Added country dependent state dropdown on address segment of the profile, shipping and payment pages (#431-country-dependent-state-dropdown)

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed `isAddToCartDisabled` computed property (#377)
 - Update filters bar on category page (#381)
 - Use i18n wrapper for the login title (#438)
+- Added country dependent state dropdown (#431)
 - Corrected displayed the selected size option on product page (#436)
 
 ## [1.0.2] - 03.07.2020

components/organisms/o-my-account-shipping-details.vue

@@ -61,12 +61,22 @@
               :error-message="$t('Field is required.')"
               class="form__element form__element--half"
             />
-            <SfInput
+            <SfSelect
               v-model="editedAddress.state"
               name="state"
               :label="$t('State/Province')"
-              class="form__element form__element--half form__element--half-even"
-            />
+              required
+              :error-message="$t('Field is required.')"
+              class="sf-select--underlined form__select form__element form__element--half form__select form__element--half-even"
+            >
+              <SfSelectOption
+                v-for="state in stateOptions"
+                :key="state.code"
+                :value="state.name"
+              >
+                {{ state.name }}
+              </SfSelectOption>
+            </SfSelect>
             <SfInput
               v-model="editedAddress.postcode"
               name="postcode"
@@ -170,7 +180,9 @@
 import { required, minLength } from 'vuelidate/lib/validators';
 import { unicodeAlpha, unicodeAlphaNum } from '@vue-storefront/core/helpers/validators';
 import { SfTabs, SfInput, SfButton, SfSelect, SfIcon } from '@storefront-ui/vue';
+import config from 'config';
 const Countries = require('@vue-storefront/i18n/resource/countries.json')
+const States = require('@vue-storefront/i18n/resource/states.json')
 
 export default {
   name: 'OMyAccountShippingDetails',
@@ -190,12 +202,17 @@ export default {
         country: '',
         telephone: ''
       },
-      countries: Countries
+      countries: Countries,
+      states: States
     }
   },
   computed: {
     addresses () {
       return this.$store.state.user.current.addresses
+    },
+    stateOptions () {
+      let countryCode = this.editedAddress.country ? this.countries.find(country => country.name === this.editedAddress.country).code : config.i18n.defaultCountry
+      return this.states[countryCode] ? this.states[countryCode] : []
     }
   },
   methods: {
@@ -248,7 +265,8 @@ export default {
         lastname: this.editedAddress.lastname,
         street: [this.editedAddress.streetName, this.editedAddress.apartment],
         city: this.editedAddress.city,
-        ...(this.editedAddress.state ? { region: { region: this.editedAddress.state } } : {}),
+        ...(this.editedAddress.state && this.stateOptions ? { region: { region: this.editedAddress.state, region_id: this.stateOptions.find(state => state.name === this.editedAddress.state).code || this.editedAddress.state, region_code: this.stateOptions.find(state => state.name === this.editedAddress.state).code || this.editedAddress.state } } : {}),
+        ...(this.stateOptions ? { region_id: this.stateOptions.find(state => state.name === this.editedAddress.state).code || this.editedAddress.state } : {}),
         country_id: this.countries.find(country => country.name === this.editedAddress.country).code || this.editedAddress.country,
         postcode: this.editedAddress.postcode,
         ...(this.editedAddress.telephone ? { telephone: this.editedAddress.telephone } : {})
@@ -298,6 +316,9 @@ export default {
         required,
         minLength: minLength(3)
       },
+      state: {
+        required
+      },
       country: {
         required
       }

components/organisms/o-payment.vue

@@ -73,12 +73,20 @@
         :error-message="$t('Field is required')"
         @blur="$v.payment.city.$touch()"
       />
-      <SfInput
+      <SfSelect
         v-model.trim="payment.state"
         class="form__element form__element--half form__element--half-even"
         name="state"
         :label="$t('State / Province')"
-      />
+      >
+        <SfSelectOption
+          v-for="state in stateOptions"
+          :key="state.code"
+          :value="state.code"
+        >
+          {{ state.name }}
+        </SfSelectOption>
+      </SfSelect>
       <SfInput
         v-model.trim="payment.zipCode"
         class="form__element form__element--half"
@@ -196,6 +204,7 @@
 import { required, minLength } from 'vuelidate/lib/validators';
 import { unicodeAlpha, unicodeAlphaNum } from '@vue-storefront/core/helpers/validators';
 import { Payment } from '@vue-storefront/core/modules/checkout/components/Payment';
+import config from 'config';
 import {
   SfInput,
   SfRadio,
@@ -205,9 +214,15 @@ import {
   SfCheckbox
 } from '@storefront-ui/vue';
 import { createSmoothscroll } from 'theme/helpers';
+const States = require('@vue-storefront/i18n/resource/states.json')
 
 export default {
   name: 'OPayment',
+  data () {
+    return {
+      states: States
+    }
+  },
   components: {
     SfInput,
     SfRadio,
@@ -279,6 +294,12 @@ export default {
   },
   mounted () {
     createSmoothscroll(document.documentElement.scrollTop || document.body.scrollTop, 0);
+  },
+  computed: {
+    stateOptions () {
+      let countryCode = this.payment.country ? this.payment.country : config.i18n.defaultCountry
+      return this.states[countryCode] ? this.states[countryCode] : []
+    }
   }
 };
 </script>

components/organisms/o-shipping.vue

@@ -67,12 +67,22 @@
         :error-message="$t('Field is required')"
         @blur="$v.shipping.city.$touch()"
       />
-      <SfInput
+      <SfSelect
         v-model.trim="shipping.state"
-        class="form__element form__element--half form__element--half-even"
+        class="form__element form__element--half form__element--half-even form__select sf-select--underlined"
         name="state"
         :label="$t('State / Province')"
-      />
+        :required="true"
+        :error-message="$t('Field is required')"
+      >
+        <SfSelectOption
+          v-for="state in stateOptions"
+          :key="state.code"
+          :value="state.code"
+        >
+          {{ state.name }}
+        </SfSelectOption>
+      </SfSelect>
       <SfInput
         v-model.trim="shipping.zipCode"
         class="form__element form__element--half"
@@ -160,6 +170,7 @@
 import { required, minLength } from 'vuelidate/lib/validators';
 import { unicodeAlpha, unicodeAlphaNum } from '@vue-storefront/core/helpers/validators';
 import { Shipping } from '@vue-storefront/core/modules/checkout/components/Shipping';
+import config from 'config';
 import {
   SfInput,
   SfRadio,
@@ -169,9 +180,15 @@ import {
   SfCheckbox
 } from '@storefront-ui/vue';
 import { createSmoothscroll } from 'theme/helpers';
+const States = require('@vue-storefront/i18n/resource/states.json')
 
 export default {
   name: 'OShipping',
+  data () {
+    return {
+      states: States
+    }
+  },
   components: {
     SfInput,
     SfRadio,
@@ -216,6 +233,16 @@ export default {
   },
   mounted () {
     createSmoothscroll(document.documentElement.scrollTop || document.body.scrollTop, 0);
+  },
+  computed: {
+    stateOptions () {
+      let countryCode = this.shipping.country ? this.shipping.country : config.i18n.defaultCountry
+      if (this.states[countryCode] !== null) {
+        return this.states[countryCode]
+      } else {
+        return []
+      }
+    }
   }
 };
 </script>