Update

vuestorefront · Mar 8, 2021 · 1f15c36 · 1f15c36
1 parent 2da6879
commit 1f15c36
Show file tree

Hide file tree

Showing 13 changed files with 104 additions and 315 deletions.
diff --git a/packages/commercetools/theme/components/Checkout/VsfPaymentProviderMock.vue b/packages/commercetools/theme/components/Checkout/VsfPaymentProviderMock.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="payment-provider">
+  <div
+    v-e2e="'payment-radio_paymentMethod'"
+    class="payment-provider"
+  >
     <SfHeading
       :level="3"
       :title="$t('Payment methods')"

diff --git a/packages/commercetools/theme/components/Checkout/VsfShippingProvider.vue b/packages/commercetools/theme/components/Checkout/VsfShippingProvider.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="shipping-provider">
+  <div
+    v-e2e="'shipping-methods'"
+    class="shipping-provider"
+  >
     <SfHeading
       :level="3"
       :title="$t('Shipping method')"
@@ -46,10 +49,11 @@
           >{{ $t('Go back') }}</nuxt-link
         >
         <SfButton
+          v-e2e="'checkout-continue-button'"
+          :disabled="!isShippingMethodStepCompleted || loading || loadingShippingProvider.save"
           class="form__action-button"
           type="button"
           @click.native="$emit('submit')"
-          :disabled="!isShippingMethodStepCompleted || loading || loadingShippingProvider.save"
         >
           {{ $t('Continue to billing') }}
         </SfButton>

diff --git a/packages/commercetools/theme/pages/Checkout/Billing.vue b/packages/commercetools/theme/pages/Checkout/Billing.vue
@@ -17,11 +17,12 @@
         @setCurrentAddress="handleSetCurrentAddress"
       />
       <SfCheckbox
+        v-e2e="'payment-copy-from-billing'"
         :selected="sameAsShipping"
-        @change="handleCheckSameAddress"
         label="Copy address data from shipping"
         name="copyShippingAddress"
         class="form__element"
+        @change="handleCheckSameAddress"
       />
       <div class="form" v-if="canAddNewAddress">
         <ValidationProvider
@@ -196,6 +197,7 @@
             class="sf-button color-secondary form__back-button"
             >Go back</nuxt-link>
           <SfButton
+            v-e2e="'checkout-continue-button'"
             class="form__action-button"
             type="submit"
             :disabled="loading"

diff --git a/packages/commercetools/theme/pages/Checkout/Payment.vue b/packages/commercetools/theme/pages/Checkout/Payment.vue
@@ -106,7 +106,12 @@
           class="sf-property--full-width sf-property--large summary__property-total"
         />
         <VsfPaymentProviderMock @status="paymentReady = $event"/>
-        <SfCheckbox v-model="terms" name="terms" class="summary__terms">
+        <SfCheckbox
+          v-e2e="'payment-checkbox-terms'"
+          v-model="terms"
+          name="terms"
+          class="summary__terms"
+        >
           <template #label>
             <div class="sf-checkbox__label">
               {{ $t('I agree to') }} <SfLink href="#"> {{ $t('Terms and conditions') }}</SfLink>
@@ -117,7 +122,11 @@
           <nuxt-link to="/checkout/payment" class="sf-button color-secondary summary__back-button">
             {{ $t('Go back') }}
           </nuxt-link>
-          <SfButton class="summary__action-button" @click="processOrder" :disabled="loading || !paymentReady || !terms">
+          <SfButton
+            v-e2e="'payment-submit-order'"
+            :disabled="loading || !paymentReady || !terms"
+            class="summary__action-button"
+            @click="processOrder">
             {{ $t('Make an order') }}
           </SfButton>
         </div>

diff --git a/packages/commercetools/theme/pages/Checkout/Shipping.vue b/packages/commercetools/theme/pages/Checkout/Shipping.vue
@@ -24,6 +24,7 @@
           slim
         >
           <SfInput
+            v-e2e="'shipping-details-input_firstName'"
             :value="shippingDetails.firstName"
             @input="firstName => changeShippingDetails('firstName', firstName)"
             label="First name"
@@ -41,6 +42,7 @@
           slim
         >
           <SfInput
+            v-e2e="'shipping-details-input_lastName'"
             :value="shippingDetails.lastName"
             @input="lastName => changeShippingDetails('lastName', lastName)"
             label="Last name"
@@ -58,6 +60,7 @@
           slim
         >
           <SfInput
+            v-e2e="'shipping-details-input_streetName'"
             :value="shippingDetails.streetName"
             @input="streetName => changeShippingDetails('streetName', streetName)"
             label="Street name"
@@ -75,6 +78,7 @@
           slim
         >
           <SfInput
+            v-e2e="'shipping-details-input_apartment'"
             :value="shippingDetails.apartment"
             @input="apartment => changeShippingDetails('apartment', apartment)"
             label="House/Apartment number"
@@ -92,6 +96,7 @@
           slim
         >
           <SfInput
+            v-e2e="'shipping-details-input_city'"
             :value="shippingDetails.city"
             @input="city => changeShippingDetails('city', city)"
             label="City"
@@ -107,6 +112,7 @@
           slim
         >
           <SfInput
+            v-e2e="'shipping-details-input_state'"
             :value="shippingDetails.state"
             @input="state => changeShippingDetails('state', state)"
             label="State/Province"
@@ -147,6 +153,7 @@
           slim
         >
           <SfInput
+            v-e2e="'shipping-details-input_postalCode'"
             :value="shippingDetails.postalCode"
             @input="postalCode => changeShippingDetails('postalCode', postalCode)"
             label="Zip-code"
@@ -164,6 +171,7 @@
           slim
         >
           <SfInput
+            v-e2e="'shipping-details-input_phone'"
             :value="shippingDetails.phone"
             @input="phone => changeShippingDetails('phone', phone)"
             label="Phone number"
@@ -186,10 +194,11 @@
       <div class="form">
         <div class="form__action">
           <SfButton
+            v-if="!(isShippingDetailsStepCompleted && !dirty)"
+            v-e2e="'checkout-continue-button'"
+            :disabled="loading"
             class="form__action-button"
             type="submit"
-            :disabled="loading"
-            v-if="!(isShippingDetailsStepCompleted && !dirty)"
           >
             {{ $t('Select shipping method') }}
           </SfButton>

diff --git a/packages/core/nuxt-theme-module/theme/components/AppHeader.vue b/packages/core/nuxt-theme-module/theme/components/AppHeader.vue
@@ -53,6 +53,7 @@
             />
           </SfButton>
           <SfButton
+            v-e2e="'header-minicart'"
             class="sf-button--pure sf-header__action"
             @click="toggleCartSidebar"
           >
@@ -61,7 +62,11 @@
               icon="empty_cart"
               size="1.25rem"
             />
-            <SfBadge v-if="cartTotalItems" class="sf-badge--number cart-badge">{{cartTotalItems}}</SfBadge>
+            <SfBadge
+              v-if="cartTotalItems"
+              class="sf-badge--number cart-badge">
+              {{ cartTotalItems }}
+            </SfBadge>
           </SfButton>
         </div>
       </template>

diff --git a/packages/core/nuxt-theme-module/theme/components/Checkout/VsfPaymentProvider.vue b/packages/core/nuxt-theme-module/theme/components/Checkout/VsfPaymentProvider.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-e2e="'payment-radio_paymentMethod'">
     <p>
       <b>Please implement vendor specific VsfPaymentProvider component in 'components/Checkout' directory</b>
     </p>

diff --git a/packages/core/nuxt-theme-module/theme/components/Checkout/VsfShippingProvider.vue b/packages/core/nuxt-theme-module/theme/components/Checkout/VsfShippingProvider.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-e2e="'shipping-methods'">
     <p>
       <b>Please implement vendor specific VsfShippingProvider component in 'components/Checkout' directory</b>
     </p>
@@ -25,6 +25,7 @@
     </SfRadio>
 
     <SfButton
+      v-e2e="'checkout-continue-button'"
       :disabled="!selectedMethod"
       type="button"
       @click="$emit('submit')"

diff --git a/packages/core/nuxt-theme-module/theme/pages/Checkout/Billing.vue b/packages/core/nuxt-theme-module/theme/pages/Checkout/Billing.vue
@@ -6,6 +6,14 @@
       class="sf-heading--left sf-heading--no-underline title"
     />
     <form @submit.prevent="handleSubmit(handleFormSubmit)">
+      <SfCheckbox
+        v-e2e="'payment-copy-from-billing'"
+        v-model="copyAddress"
+        label="Copy address data from shipping"
+        name="copyShippingAddress"
+        class="form__element"
+      />
+
       <div class="form">
         <ValidationProvider
           name="firstName"
@@ -165,6 +173,7 @@
             {{ $t('Go back') }}
           </SfButton>
           <SfButton
+            v-e2e="'checkout-continue-button'"
             class="form__action-button"
             type="submit"
           >
@@ -185,9 +194,9 @@ import {
   SfRadio,
   SfCheckbox
 } from '@storefront-ui/vue';
-import { ref } from '@vue/composition-api';
+import { ref, watch } from '@vue/composition-api';
 import { onSSR } from '@vue-storefront/core';
-import { useBilling } from '<%= options.generate.replace.composables %>';
+import { useBilling, useShipping } from '<%= options.generate.replace.composables %>';
 import { required, min, digits } from 'vee-validate/dist/rules';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 
@@ -224,7 +233,10 @@ export default {
     ValidationObserver
   },
   setup(props, context) {
-    const { load, save } = useBilling();
+    const { load: loadBilling, save } = useBilling();
+    const { load: loadShipping, shipping } = useShipping();
+
+    const copyAddress = ref(false);
 
     const form = ref({
       firstName: '',
@@ -243,11 +255,21 @@ export default {
       context.root.$router.push('/checkout/payment');
     };
 
+    watch(copyAddress, async (shouldCopy) => {
+      if (!shouldCopy) {
+        return;
+      }
+
+      await loadShipping();
+      form.value = shipping.value;
+    });
+
     onSSR(async () => {
-      await load();
+      await loadBilling();
     });
 
     return {
+      copyAddress,
       form,
       countries: COUNTRIES,
       handleFormSubmit

diff --git a/packages/core/nuxt-theme-module/theme/pages/Checkout/Payment.vue b/packages/core/nuxt-theme-module/theme/pages/Checkout/Payment.vue
@@ -65,7 +65,11 @@
 
         <VsfPaymentProvider @status="isPaymentReady = true"/>
 
-        <SfCheckbox v-model="terms" name="terms" class="summary__terms">
+        <SfCheckbox
+          v-e2e="'payment-checkbox-terms'"
+          v-model="terms"
+          name="terms"
+          class="summary__terms">
           <template #label>
             <div class="sf-checkbox__label">
               {{ $t('I agree to') }} <SfLink href="#"> {{ $t('Terms and conditions') }}</SfLink>
@@ -82,6 +86,7 @@
             {{ $t('Go back') }}
           </SfButton>
           <SfButton
+            v-e2e="'payment-submit-order'"
             :disabled="loading || !isPaymentReady || !terms"
             class="summary__action-button"
             @click="processOrder"

diff --git a/packages/core/nuxt-theme-module/theme/pages/Checkout/Shipping.vue b/packages/core/nuxt-theme-module/theme/pages/Checkout/Shipping.vue
@@ -14,6 +14,7 @@
           slim
         >
           <SfInput
+            v-e2e="'shipping-details-input_firstName'"
             v-model="form.firstName"
             label="First name"
             name="firstName"
@@ -30,6 +31,7 @@
           slim
         >
           <SfInput
+            v-e2e="'shipping-details-input_lastName'"
             v-model="form.lastName"
             label="Last name"
             name="lastName"
@@ -46,6 +48,7 @@
           slim
         >
           <SfInput
+            v-e2e="'shipping-details-input_streetName'"
             v-model="form.streetName"
             label="Street name"
             name="streetName"
@@ -62,6 +65,7 @@
           slim
         >
           <SfInput
+            v-e2e="'shipping-details-input_apartment'"
             v-model="form.apartment"
             label="House/Apartment number"
             name="apartment"
@@ -78,6 +82,7 @@
           slim
         >
           <SfInput
+            v-e2e="'shipping-details-input_city'"
             v-model="form.city"
             label="City"
             name="city"
@@ -92,6 +97,7 @@
           slim
         >
           <SfInput
+            v-e2e="'shipping-details-input_state'"
             v-model="form.state"
             label="State/Province"
             name="state"
@@ -105,6 +111,7 @@
           slim
         >
           <SfSelect
+            v-e2e="'shipping-details-select_country'"
             v-model="form.country"
             label="Country"
             name="country"
@@ -129,6 +136,7 @@
           slim
         >
           <SfInput
+            v-e2e="'shipping-details-input_postalCode'"
             v-model="form.postalCode"
             label="Zip-code"
             name="zipCode"
@@ -145,6 +153,7 @@
           slim
         >
           <SfInput
+            v-e2e="'shipping-details-input_phone'"
             v-model="form.phone"
             label="Phone number"
             name="phone"
@@ -159,6 +168,7 @@
         <div class="form__action">
           <SfButton
             v-if="!isFormSubmitted"
+            v-e2e="'checkout-continue-button'"
             :disabled="loading"
             class="form__action-button"
             type="submit"