AB#65768 (#84)

Orckestra · Sep 13, 2022 · 6b99b98 · 6b99b98
1 parent 82a1bc8
commit 6b99b98
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 66 deletions.
diff --git a/packages/composables/src/getters/fulfillmentMethodsGetters.ts b/packages/composables/src/getters/fulfillmentMethodsGetters.ts
@@ -5,11 +5,19 @@ function getFulfillmentMethod(fulfillmentMethods: FulfillmentMethod[], shippingP
   return fulfillmentMethods?.find(c => c.shippingProviderId === shippingProviderId);
 }
 
+function getFulfillmentMethodsGroupedByType(fulfillmentMethods: FulfillmentMethod[]): Record<string, FulfillmentMethod[]> {
+  return fulfillmentMethods?.reduce((rv, x) => {
+    (rv[x.fulfillmentMethodType] = rv[x.fulfillmentMethodType] || []).push(x);
+    return rv;
+  }, {});
+}
+
 function getFulfillmentMethodType(fulfillmentMethods: FulfillmentMethod[], shippingProviderId: string): FulfillmentMethodType {
   return this.getFulfillmentMethod(fulfillmentMethods, shippingProviderId)?.fulfillmentMethodType;
 }
 
 export const fulfillmentMethodsGetters: FulfillmentMethodsGetters<FulfillmentMethod> = {
   getFulfillmentMethod,
-  getFulfillmentMethodType
+  getFulfillmentMethodType,
+  getFulfillmentMethodsGroupedByType
 };
diff --git a/packages/composables/src/types.ts b/packages/composables/src/types.ts
@@ -471,7 +471,8 @@ export interface UseFulfillmentMethods<METHOD> {
 
 export interface FulfillmentMethodsGetters<METHOD> {
   getFulfillmentMethod(fulfillmentMethods: METHOD[], shippingProviderId: string): METHOD;
-  getFulfillmentMethodType(fulfillmentMethods: METHOD[], shippingProviderId: string): FulfillmentMethodType
+  getFulfillmentMethodType(fulfillmentMethods: METHOD[], shippingProviderId: string): FulfillmentMethodType;
+  getFulfillmentMethodsGroupedByType(fulfillmentMethods: METHOD[]): Record<string, METHOD[]>
 }
 
 export interface UseCreditCardFormErrors {

diff --git a/packages/theme/components/Checkout/VsfShippingProvider.vue b/packages/theme/components/Checkout/VsfShippingProvider.vue
@@ -1,40 +1,41 @@
 <template>
-  <div class="form__radio-group" data-testid="shipping-method">
+  <div class="form__radio-group shipping__types">
+    <div v-for="type in Object.keys(fulfillmentMethodsByType)"
+    :key="type"
+    class="shipping__type">
     <SfRadio
-      v-for="(item, index) in fulfillmentMethods"
-      :key="index"
-      :selected="selected"
-      :disabled="disabled"
-      :label="th.getTranslation(item.displayName) || item.name"
-      :value="item.shippingProviderId"
+      :selected="selected.fulfillmentMethodType"
+      :value="type"
+      :label="$t(`${type}_Label`)"
+      name="shippingMethodType"
+      @change="(type) => updateShippingMethod(fulfillmentMethodsByType[type][0].shippingProviderId)"
+      class="form__radio" />
+
+    <SfComponentSelect v-if="selected.fulfillmentMethodType === type"
+      data-testid="shipping-method"
       name="shippingMethod"
-      :description="item.fulfillmentMethodType"
-      class="form__radio shipping"
-      @input="updateShippingMethod"
-    >
-      <template #label="{ label }">
-        <div class="sf-radio__label shipping__label">
-          <div>
-            {{ label }}
-          </div>
-          <div class="shipping__label-price">{{$n(Number(item.cost), 'currency')}}</div>
-        </div>
-      </template>
-      <template #description>
-        <div class="sf-radio__description shipping__description">
-              <span>{{item.fulfillmentMethodType}}</span>
-              <span v-if="item.expectedDeliveryDate">
-                 / Estimated ship time:
-                {{((new Date(item.expectedDeliveryDate) - Date.now())/ (1000 * 60 * 60 * 24)).toFixed() }} days
-              </span>
-        </div>
-      </template>
-    </SfRadio>
+      :label="$t('Shipping Method')"
+      :selected="selected.shippingProviderId"
+      @change="updateShippingMethod"
+      class="sf-component-select--underlined shipping__methods">
+      <SfComponentSelectOption
+          v-for="(item, index) in fulfillmentMethodsByType[type]"
+          :key="index"
+          :value="item.shippingProviderId">
+            <div class="shipping__label">
+              <div>{{ th.getTranslation(item.displayName) || item.name }}
+                <small class="desktop-only" v-if="item.expectedDeliveryDate"> ({{((new Date(item.expectedDeliveryDate) - Date.now())/ (1000 * 60 * 60 * 24)).toFixed() }} days)</small>
+              </div>
+              <div class="shipping__label-price">{{$n(Number(item.cost), 'currency')}}</div>
+            </div>
+        </SfComponentSelectOption>
+    </SfComponentSelect>
   </div>
+</div>
 </template>
 
 <script>
-import { SfButton, SfRadio } from '@storefront-ui/vue';
+import { SfButton, SfRadio, SfComponentSelect } from '@storefront-ui/vue';
 import { useUiHelpers } from '~/composables';
 
 export default {
@@ -45,27 +46,31 @@ export default {
   },
   props: {
     selected: {
-      type: String,
-      default: ''
+      type: Object,
+      default() {
+        return {};
+      }
     },
     disabled: {
       type: Boolean,
       default: false
     },
-    fulfillmentMethods: {
-      type: Array,
-      default: []
+    fulfillmentMethodsByType: {
+      type: Object,
+      default() {
+        return {};
+      }
     }
   },
   components: {
     SfButton,
-    SfRadio
+    SfRadio,
+    SfComponentSelect
   },
   emits: ['change'],
   setup(props, { emit }) {
     const th = useUiHelpers();
     const updateShippingMethod = value => emit('change', value);
-
     return {
       th,
       updateShippingMethod
@@ -78,12 +83,7 @@ export default {
 .form {
   &__radio {
     margin: var(--spacer-xs) 0;
-
-    &:last-of-type {
-      margin: var(--spacer-xs) 0 var(--spacer-xl);
-    }
-
-    ::v-deep .sf-radio__container {
+     ::v-deep .sf-radio__container {
       --radio-container-padding: var(--spacer-xs);
       @include for-desktop {
         --radio-container-padding: var(--spacer-xs) var(--spacer-xs) var(--spacer-xs) var(--spacer-sm);
@@ -94,19 +94,30 @@ export default {
   @include for-desktop {
     &__radio-group {
       flex: 0 0 calc(100% + var(--spacer-sm));
-      margin: 0 calc(-1 * var(--spacer-sm));
     }
   }
 }
-
 .shipping {
+
+  &__types {
+    display: flex;
+   flex-wrap: wrap;
+   justify-content: flex-start;
+   margin-bottom: var(--spacer-base);
+  }
+  &__type {
+    flex: 1 1 100%;
+    @include for-desktop {
+      flex: 0 0 50%;
+    }
+  }
+  &__methods {
+    margin-top: var(--spacer-base);
+  }
   &__label {
+    width: 100%;
     display: flex;
     justify-content: space-between;
   }
-  &__description {
-    --radio-description-margin: 0;
-    --radio-description-font-size: var(--font-xs);
-  }
 }
 </style>
diff --git a/packages/theme/lang/en.js b/packages/theme/lang/en.js
@@ -180,5 +180,11 @@ export default {
   'City': 'City',
   'Zip-code': 'Zip-code',
   'Phone number': 'Phone number',
-  'Email': 'Email'
+  'Email': 'Email',
+  'Shipping_Label': 'Ship to home',
+  'PickUp_Label': 'Pick up in the store',
+  'Pickup location': 'Pickup location',
+  'Select pickup location': 'Select pickup location',
+  'Available shipping services': 'Available shipping services',
+  'Shipping Method': 'Shipping method'
 };
diff --git a/packages/theme/lang/fr.js b/packages/theme/lang/fr.js
@@ -171,5 +171,11 @@ export default {
   'City': 'Ville',
   'Zip-code': 'Code Postal',
   'Phone number': 'Numéro de téléphone',
-  'Email': 'Email'
+  'Email': 'Email',
+  'Shipping_Label': 'Ship to home',
+  'PickUp_Label': 'Pick up in the store',
+  'Pickup location': 'Pickup location',
+  'Select pickup location': 'Select pickup location',
+  'Available shipping services': 'Available shipping services',
+  'Shipping Method': 'Shipping method'
 };
diff --git a/packages/theme/pages/Checkout/Review.vue b/packages/theme/pages/Checkout/Review.vue
@@ -37,7 +37,7 @@
       />
       <SfProperty
         name="Shipping type"
-        :value="shipping.type"
+        :value="$t(`${shipping.type}_Label`)"
         class="sf-property"
       />
       <SfProperty

diff --git a/packages/theme/pages/Checkout/Shipping.vue b/packages/theme/pages/Checkout/Shipping.vue
@@ -1,14 +1,14 @@
 <template>
   <ValidationObserver v-slot="{ handleSubmit }">
-    <SfHeading
-      v-e2e="'shipping-heading'"
-      :level="3"
-      :title="$t('Shipping method')"
-      class="sf-heading--left sf-heading--no-underline title"
-    />
     <form @submit.prevent="handleSubmit(handleFormSubmit)">
+      <SfHeading
+        v-e2e="'shipping-heading'"
+        :level="3"
+        :title="$t('Available shipping services')"
+        class="sf-heading--left sf-heading--no-underline title"
+      />
       <VsfShippingProvider
-        :fulfillmentMethods="fulfillmentMethods"
+        :fulfillmentMethodsByType="methodsByType"
         :selected="form.shippingMethod"
         :disabled="loadingCart"
         @change="updateShippingMethod"
@@ -203,6 +203,8 @@ export default {
     const { stores: storesList, search: loadStoresList } = useStores();
     const { isStoresModalOpen, toggleStoresModal } = useUiState();
 
+    const methodsByType = computed(() => fulfillmentMethodsGetters.getFulfillmentMethodsGroupedByType(fulfillmentMethods.value));
+
     const shipment = computed(() => cartGetters.getActiveShipment(cart.value));
     const shipmentAddressId = computed(() => shipment.value?.address?.id);
 
@@ -216,7 +218,7 @@ export default {
     const shipmentPickUpLocationId = computed(() => shipment.value?.pickUpLocationId);
 
     const form = ref({
-      shippingMethod: shipment.value?.fulfillmentMethod?.shippingProviderId,
+      shippingMethod: shipment.value?.fulfillmentMethod,
       pickUpLocationId: shipment.value?.pickUpLocationId
     });
 
@@ -330,13 +332,14 @@ export default {
     };
 
     const updateShippingMethod = (value) => {
-      form.value.shippingMethod = value;
+      const fulfillmentMethod = fulfillmentMethods.value.find(x => x.shippingProviderId === value);
+      form.value.shippingMethod = fulfillmentMethod;
 
       const updatedShipment = {
         ...shipment.value,
         pickUpLocationId: null,
         fulfillmentLocationId: null,
-        fulfillmentMethod: fulfillmentMethods.value.find(x => x.shippingProviderId === value)
+        fulfillmentMethod
       };
 
       if (isAuthenticated.value && !shipment.value?.address?.id && updatedShipment.fulfillmentMethod.fulfillmentMethodType === FulfillmentMethodType.Shipping) {
@@ -413,8 +416,8 @@ export default {
       updateAddress,
       goBack,
       fulfillmentMethods,
+      methodsByType,
       addresses,
-      fulfillmentMethodsGetters,
       shipmentAddressId,
       stores,
       isPickupMethod,

diff --git a/packages/theme/pages/MyAccount/OrderHistory.vue b/packages/theme/pages/MyAccount/OrderHistory.vue
@@ -156,7 +156,7 @@
                 />
                  <SfProperty
                   name="Type"
-                  :value="currentOrderShipping.type"
+                  :value="$t(`${currentOrderShipping.type}_Label`)"
                   class="sf-property property"
                 />
                 <SfProperty