fix: checkout province state code issue

bartoszherba · bartoszherba · commit b786b3e6acb4 · 2022-06-13T13:59:44.000+02:00
- province/state will be now properly displayed on the shipping and billing steps
diff --git a/packages/theme/helpers/checkout/address.ts b/packages/theme/helpers/checkout/address.ts
@@ -25,7 +25,7 @@ export const addressFromApiToForm = (address: CustomerAddress | CartAddressInter
   apartment: address.street?.[1],
   city: address.city,
   region: (address as CustomerAddress)?.region?.region_code ?? (address as CartAddressInterface).region.code,
-  country_code: (address as CustomerAddress)?.country_code ?? (address as CartAddressInterface).region.code,
+  country_code: (address as CustomerAddress)?.country_code ?? (address as CartAddressInterface).country.code,
   postcode: address.postcode,
   telephone: address.telephone,
 });
diff --git a/packages/theme/lang/de.js b/packages/theme/lang/de.js
@@ -15,7 +15,7 @@ export default {
   "Back to home": "Zurück Zur Startseite",
   "Back to homepage": "Zurück zur Homepage",
   "Billing": "Abrechnung",
-  "Billing Address": "Rechnungsadresse",
+  "Billing address": "Rechnungsadresse",
   "Brand": "Marke",
   "Cancel": "Abbrechen",
   "Cart": "Warenkorb",
@@ -156,13 +156,14 @@ export default {
   "Set up newsletter": "Richten Sie Ihren Newsletter ein und wir senden Ihnen wöchentlich Informationen zu neuen Produkten und Trends aus den von Ihnen ausgewählten Bereichen",
   "Share your look": "Teile deinen Look",
   "Shipping": "Versand",
-  "Shipping Address": "Lieferanschrift",
-  "Shipping Details": "Versanddetails",
-  "Shipping Method": "Versandart",
+  "Shipping address": "Lieferanschrift",
+  "Shipping details": "Versanddetails",
+  "Shipping method": "Versandart",
   "Show":"Show",
   "show more": "mehr anzeigen",
   "Show on page": "Auf Seite anzeigen",
   "Sign in": "Einloggen",
+  "Size guide": "Größentabelle",
   "Sign Up for Newsletter": "Anmeldung für Newsletter",
   "Sort by": "Sortieren nach",
   "Sort: Default": "Standard",
diff --git a/packages/theme/lang/en.js b/packages/theme/lang/en.js
@@ -15,7 +15,7 @@ export default {
   "Back to home": "Back to home",
   "Back to homepage": "Back to homepage",
   "Billing": "Billing",
-  "Billing Address": "Billing Address",
+  "Billing address": "Billing address",
   "Brand": "Brand",
   "Cancel": "Cancel",
   "Cart": "Cart",
@@ -151,13 +151,14 @@ export default {
   "Set up newsletter": "Set up your newsletter and we will send you information about new products and trends from the sections you selected every week.",
   "Share your look": "Share your look",
   "Shipping": "Shipping",
-  "Shipping Address": "Shipping Address",
-  "Shipping Details": "Shipping Details",
-  "Shipping Method": "Shipping Method",
+  "Shipping address": "Shipping address",
+  "Shipping details": "Shipping details",
+  "Shipping method": "Shipping method",
   "Show":"Show",
   "show more": "show more",
   "Show on page": "Show on page",
   "Sign in": "Sign in",
+  "Size guide": "Size guide",
   "Sign Up for Newsletter": "Sign Up for Newsletter",
   "Sort by": "Sort by",
   "Sort: Default": "Default",
diff --git a/packages/theme/modules/checkout/components/CartPreview.vue b/packages/theme/modules/checkout/components/CartPreview.vue
@@ -56,7 +56,7 @@ import { computed, ref, defineComponent } from '@nuxtjs/composition-api';
 import cartGetters from '~/modules/checkout/getters/cartGetters';
 import useCart from '~/modules/checkout/composables/useCart';
 import getShippingMethodPrice from '~/helpers/checkout/getShippingMethodPrice';
-import CouponCode from '../CouponCode.vue';
+import CouponCode from '../../../components/CouponCode.vue';
 
 const CHARACTERISTICS = [
   {
diff --git a/packages/theme/modules/checkout/components/UserBillingAddresses.vue b/packages/theme/modules/checkout/components/UserBillingAddresses.vue
diff --git a/packages/theme/modules/checkout/components/UserShippingAddresses.vue b/packages/theme/modules/checkout/components/UserShippingAddresses.vue
diff --git a/packages/theme/modules/checkout/components/VsfPaymentProvider.vue b/packages/theme/modules/checkout/components/VsfPaymentProvider.vue
diff --git a/packages/theme/modules/checkout/components/VsfShippingProvider.vue b/packages/theme/modules/checkout/components/VsfShippingProvider.vue
diff --git a/packages/theme/modules/checkout/pages/Checkout.vue b/packages/theme/modules/checkout/pages/Checkout.vue
@@ -44,7 +44,7 @@ import {
 } from '@nuxtjs/composition-api';
 import cartGetters from '~/modules/checkout/getters/cartGetters';
 import useCart from '~/modules/checkout/composables/useCart';
-import CartPreview from '~/components/Checkout/CartPreview.vue';
+import CartPreview from '~/modules/checkout/components/CartPreview.vue';
 
 export default defineComponent({
   name: 'CheckoutPage',
diff --git a/packages/theme/modules/checkout/pages/Checkout/Billing.vue b/packages/theme/modules/checkout/pages/Checkout/Billing.vue
@@ -334,7 +334,7 @@ export default defineComponent({
     SfCheckbox,
     ValidationProvider,
     ValidationObserver,
-    UserBillingAddresses: () => import('~/components/Checkout/UserBillingAddresses.vue'),
+    UserBillingAddresses: () => import('~/modules/checkout/components/UserBillingAddresses.vue'),
     UserAddressDetails,
   },
   setup() {
@@ -479,8 +479,15 @@ export default defineComponent({
       country.value = await searchCountry({ id });
     };
 
-    watch(billingAddress, (addr) => {
+    watch(billingAddress, async (addr) => {
       billingDetails.value = addr ? addressFromApiToForm(addr) : getInitialCheckoutAddressForm();
+      country.value = await searchCountry({ id: billingDetails.value.country_code });
+    });
+
+    watch(country, (data) => {
+      if (!data?.available_regions) {
+        billingDetails.value.region = '';
+      }
     });
 
     onMounted(async () => {
diff --git a/packages/theme/modules/checkout/pages/Checkout/Payment.vue b/packages/theme/modules/checkout/pages/Checkout/Payment.vue
@@ -199,7 +199,7 @@ export default defineComponent({
     SfProperty,
     SfLink,
     SfImage,
-    VsfPaymentProvider: () => import('~/components/Checkout/VsfPaymentProvider.vue'),
+    VsfPaymentProvider: () => import('~/modules/checkout/components/VsfPaymentProvider.vue'),
   },
   setup() {
     const order = ref(null);
diff --git a/packages/theme/modules/checkout/pages/Checkout/Shipping.vue b/packages/theme/modules/checkout/pages/Checkout/Shipping.vue
@@ -3,7 +3,7 @@
     <SfHeading
       v-e2e="'shipping-heading'"
       :level="3"
-      :title="$t('Shipping')"
+      :title="$t('Shipping address')"
       class="sf-heading--left sf-heading--no-underline title"
     />
 
@@ -311,8 +311,8 @@ export default defineComponent({
     SfSelect,
     ValidationProvider,
     ValidationObserver,
-    UserShippingAddresses: () => import('~/components/Checkout/UserShippingAddresses.vue'),
-    VsfShippingProvider: () => import('~/components/Checkout/VsfShippingProvider.vue'),
+    UserShippingAddresses: () => import('~/modules/checkout/components/UserShippingAddresses.vue'),
+    VsfShippingProvider: () => import('~/modules/checkout/components/VsfShippingProvider.vue'),
   },
   setup() {
     const router = useRouter();
@@ -339,7 +339,6 @@ export default defineComponent({
     const shippingDetails = ref<CheckoutAddressForm>(address.value ? addressFromApiToForm(address.value) : getInitialCheckoutAddressForm());
     const shippingMethods = ref<AvailableShippingMethod[]>([]);
     const currentAddressId = ref(NOT_SELECTED_ADDRESS);
-
     const setAsDefault = ref(false);
     const isFormSubmitted = ref(false);
     const canAddNewAddress = ref(true);
@@ -426,9 +425,17 @@ export default defineComponent({
       country.value = await searchCountry({ id });
     };
 
-    watch(address, (addr) => {
+    watch(address, async (addr) => {
       shippingDetails.value = addr ? addressFromApiToForm(addr) : getInitialCheckoutAddressForm();
+      country.value = await searchCountry({ id: shippingDetails.value.country_code });
     });
+
+    watch(country, (data) => {
+      if (!data?.available_regions) {
+        shippingDetails.value.region = '';
+      }
+    });
+
     onMounted(async () => {
       const validStep = await isPreviousStepValid('user-account');
       if (!validStep) {

Original file line number	Diff line number	Diff line change
`@@ -56,7 +56,7 @@ import { computed, ref, defineComponent } from '@nuxtjs/composition-api';`
`56`	`56`	`import cartGetters from '~/modules/checkout/getters/cartGetters';`
`57`	`57`	`import useCart from '~/modules/checkout/composables/useCart';`
`58`	`58`	`import getShippingMethodPrice from '~/helpers/checkout/getShippingMethodPrice';`
`59`		`-import CouponCode from '../CouponCode.vue';`
	`59`	`+import CouponCode from '../../../components/CouponCode.vue';`
`60`	`60`
`61`	`61`	`const CHARACTERISTICS = [`
`62`	`62`	`{`