fix: billing address overwrites shipping address when copy flag is set (

#510)

* fix(theme): don't redirect with empty cart on thank-you step during the checkout

* fix(theme): fix on billing step when address for shipping and billing are the same

When addresses are the same, hide the form on the billing-step so users can't fill in a new address

* chore(theme): added missing translations

packages/theme/lang/de.js

@@ -56,7 +56,7 @@ export default {
   "Forgot Password Modal Email": "E-Mail, mit der Sie sich anmelden:",
   "forgotPasswordConfirmation": "Vielen Dank! Wenn ein Konto mit der E-Mail-Adresse {0} registriert ist, finden Sie in Ihrem Posteingang eine Nachricht mit einem Link zum Zurücksetzen des Passworts.",
   "Forgotten password?": "Passwort vergessen?",
-  "Go back": "Go back",
+  "Go back": "Geh zurück",
   "Go back shopping": "Zurück einkaufen",
   "Go back to shop": "Zurück zum Einkaufen",
   "Go to checkout": "Zur Kasse gehen",
@@ -88,6 +88,7 @@ export default {
   "Manage shipping addresses": "Alle gewünschten Versandadressen verwalten (Arbeitsplatz, Privatadresse ...) Auf diese Weise müssen Sie die Versandadresse nicht bei jeder Bestellung manuell eingeben.",
   "Match it with": "Kombiniere es mit",
   "Men fashion": "Herrenmode",
+  "My billing and shipping address are the same": "Meine Rechnungs- und Lieferadresse sind identisch",
   "My Cart": "Mein Warenkorb",
   "No account": "Sie haben noch keinen Account?",
   "or": "oder",

packages/theme/lang/en.js

@@ -86,6 +86,7 @@ export default {
   "Manage shipping addresses": "Manage all the shipping addresses you want (work place, home address...) This way you won\"t have to enter the shipping address manually with each order.",
   "Match it with": "Match it with",
   "Men fashion": "Men fashion",
+  "My billing and shipping address are the same": "My billing and shipping address are the same",
   "My Cart": "My Cart",
   "No account": "Don't have an account yet?",
   "or": "or",

packages/theme/pages/Checkout.vue

@@ -91,7 +91,7 @@ export default defineComponent({
 
     onMounted(async () => {
       await load();
-      if (products.value.length === 0) {
+      if (products.value.length === 0 && currentStep.value !== 'thank-you') {
         await router.push(app.localePath('/'));
       }
 

packages/theme/pages/Checkout/Billing.vue

@@ -9,23 +9,30 @@
     <form
       @submit.prevent="handleSubmit(handleAddressSubmit(reset))"
     >
-      <UserBillingAddresses
-        v-if="isAuthenticated && hasSavedBillingAddress"
-        v-model="setAsDefault"
-        v-e2e="'billing-addresses'"
-        :current-address-id="currentAddressId || NOT_SELECTED_ADDRESS"
-        @setCurrentAddress="handleSetCurrentAddress"
-      />
       <SfCheckbox
         v-e2e="'copy-address'"
         :selected="sameAsShipping"
-        label="Copy address data from shipping"
+        :label="$t('My billing and shipping address are the same')"
         name="copyShippingAddress"
         class="form__element"
         @change="handleCheckSameAddress"
       />
+      <div v-if="sameAsShipping" class="copy__shipping__addresses">
+        <div class="copy__shipping__address">
+          <div class="sf-address">
+            <UserAddressDetails :address="{... billingDetails, region: {region_code: billingDetails.region}}" />
+          </div>
+        </div>
+      </div>
+      <UserBillingAddresses
+        v-if="!sameAsShipping && isAuthenticated && hasSavedBillingAddress"
+        v-model="setAsDefault"
+        v-e2e="'billing-addresses'"
+        :current-address-id="currentAddressId || NOT_SELECTED_ADDRESS"
+        @setCurrentAddress="handleSetCurrentAddress"
+      />
       <div
-        v-if="canAddNewAddress"
+        v-if="!sameAsShipping && canAddNewAddress"
         class="form"
       >
         <ValidationProvider
@@ -222,7 +229,7 @@
         </ValidationProvider>
       </div>
       <SfButton
-        v-if="!canAddNewAddress"
+        v-if="!sameAsShipping && !canAddNewAddress"
         class="color-light form__action-button form__action-button--add-address"
         type="submit"
         @click="handleAddNewAddressBtnClick"
@@ -243,7 +250,7 @@
             to="localePath('/checkout/shipping')"
             class="sf-button sf-button--underlined form__back-button smartphone-only"
           >
-            Go back
+            {{ $t('Go back') }}
           </nuxt-link>
         </div>
       </div>
@@ -259,6 +266,7 @@ import {
   SfSelect,
   SfCheckbox,
 } from '@storefront-ui/vue';
+import UserAddressDetails from '~/components/UserAddressDetails.vue';
 import {
   useUserBilling,
   userBillingGetters,
@@ -309,6 +317,7 @@ export default defineComponent({
     ValidationProvider,
     ValidationObserver,
     UserBillingAddresses: () => import('~/components/Checkout/UserBillingAddresses.vue'),
+    UserAddressDetails,
   },
   setup() {
     const router = useRouter();
@@ -398,7 +407,6 @@ export default defineComponent({
         oldBilling = { ...billingDetails.value };
         billingDetails.value = { ...formatAddressReturnToData(shippingDetails.value) };
         currentAddressId.value = NOT_SELECTED_ADDRESS;
-        canAddNewAddress.value = true;
         setAsDefault.value = false;
         if (billingDetails.value.country_code) {
           await searchCountry({ id: billingDetails?.value.country_code });
@@ -519,6 +527,29 @@ export default defineComponent({
   --heading-title-font-weight: var(--font-weight--bold);
 }
 
+.copy__shipping {
+  &__address {
+    margin-bottom: var(--spacer-xs);
+    @include for-desktop {
+      margin-right: var(--spacer-sm);
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+    }
+
+    .sf-address {
+      padding: var(--spacer-xs);
+    }
+  }
+
+  &__addresses {
+    margin-bottom: var(--spacer-xl);
+    @include for-desktop {
+      display: flex;
+    }
+  }
+}
+
 .form {
   &__select {
     display: flex;