From a05f990e1bd6f38d1e2870a0b6da0854271b5673 Mon Sep 17 00:00:00 2001
From: Aishwary Shrivastava <aishwary.shrivastava@hotwaxsystems.com>
Date: Sat, 25 Jul 2020 16:12:25 +0530
Subject: [PATCH 1/5] Added country dependent state dropdown on address segment
 of the profile, shipping and payment pages
 (#431-country-dependent-state-dropdown)

Created dropdown in place of input for the state.
Created a function stateOptions from fetching state for country.
---
 .../o-my-account-shipping-details.vue         | 35 ++++++++++++++++---
 components/organisms/o-payment.vue            | 29 +++++++++++++--
 components/organisms/o-shipping.vue           | 33 +++++++++++++++--
 3 files changed, 87 insertions(+), 10 deletions(-)

diff --git a/components/organisms/o-my-account-shipping-details.vue b/components/organisms/o-my-account-shipping-details.vue
index 1ad17eb47..52f9ad2d6 100644
--- a/components/organisms/o-my-account-shipping-details.vue
+++ b/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,21 @@ 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
+      if (this.states[countryCode] !== null) {
+        return this.states[countryCode]
+      } else {
+        return []
+      }
     }
   },
   methods: {
@@ -248,7 +269,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 +320,9 @@ export default {
         required,
         minLength: minLength(3)
       },
+      state: {
+        required
+      },
       country: {
         required
       }
diff --git a/components/organisms/o-payment.vue b/components/organisms/o-payment.vue
index ae4be3252..924f627ae 100644
--- a/components/organisms/o-payment.vue
+++ b/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,16 @@ export default {
   },
   mounted () {
     createSmoothscroll(document.documentElement.scrollTop || document.body.scrollTop, 0);
+  },
+  computed: {
+    stateOptions () {
+      let countryCode = this.payment.country ? this.payment.country : config.i18n.defaultCountry
+      if (this.states[countryCode] !== null) {
+        return this.states[countryCode]
+      } else {
+        return []
+      }
+    }
   }
 };
 </script>
diff --git a/components/organisms/o-shipping.vue b/components/organisms/o-shipping.vue
index 68dd4b553..069e3f2b2 100644
--- a/components/organisms/o-shipping.vue
+++ b/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>

From c3bef9e2289163aba953a593c78529829a13f7e0 Mon Sep 17 00:00:00 2001
From: Aishwary Shrivastava <aishwary.shrivastava@hotwaxsystems.com>
Date: Mon, 24 Aug 2020 15:51:41 +0530
Subject: [PATCH 2/5] Improved returing the states from stateOptions (#431)

---
 components/organisms/o-my-account-shipping-details.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/components/organisms/o-my-account-shipping-details.vue b/components/organisms/o-my-account-shipping-details.vue
index 7852dd074..9bbdfda04 100644
--- a/components/organisms/o-my-account-shipping-details.vue
+++ b/components/organisms/o-my-account-shipping-details.vue
@@ -212,11 +212,7 @@ export default {
     },
     stateOptions () {
       let countryCode = this.editedAddress.country ? this.countries.find(country => country.name === this.editedAddress.country).code : config.i18n.defaultCountry
-      if (this.states[countryCode] !== null) {
-        return this.states[countryCode]
-      } else {
-        return []
-      }
+      return this.states[countryCode] ? this.states[countryCode] : []
     }
   },
   methods: {

From ad386b2c340147e84d830920fb1124ddcd85c5a5 Mon Sep 17 00:00:00 2001
From: Aishwary Shrivastava <aishwary.shrivastava@hotwaxsystems.com>
Date: Mon, 24 Aug 2020 15:59:16 +0530
Subject: [PATCH 3/5] Added Change log entry

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 41ff28667..30ebd84f5 100644
--- a/CHANGELOG.md
+++ b/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

From cd0ba91844f4c7f821ee692124ecee19be63e223 Mon Sep 17 00:00:00 2001
From: Aishwary Shrivastava <aishwary.shrivastava@hotwaxsystems.com>
Date: Mon, 24 Aug 2020 18:18:24 +0530
Subject: [PATCH 4/5] Improved: stateOptions in o-payment.vue (#431)

---
 components/organisms/o-payment.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/components/organisms/o-payment.vue b/components/organisms/o-payment.vue
index 924f627ae..ffa86e8b3 100644
--- a/components/organisms/o-payment.vue
+++ b/components/organisms/o-payment.vue
@@ -298,11 +298,7 @@ export default {
   computed: {
     stateOptions () {
       let countryCode = this.payment.country ? this.payment.country : config.i18n.defaultCountry
-      if (this.states[countryCode] !== null) {
-        return this.states[countryCode]
-      } else {
-        return []
-      }
+      return this.states[countryCode] ? this.states[countryCode] : []
     }
   }
 };

From 1450dd86316bdd2d32e4578b64e0ac0e3c7ae629 Mon Sep 17 00:00:00 2001
From: Aishwary Shrivastava <aishwary.shrivastava@hotwaxsystems.com>
Date: Tue, 25 Aug 2020 10:54:17 +0530
Subject: [PATCH 5/5] Improved stateOptions

---
 components/organisms/o-shipping.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/components/organisms/o-shipping.vue b/components/organisms/o-shipping.vue
index 069e3f2b2..6e4af0ea7 100644
--- a/components/organisms/o-shipping.vue
+++ b/components/organisms/o-shipping.vue
@@ -237,11 +237,7 @@ export default {
   computed: {
     stateOptions () {
       let countryCode = this.shipping.country ? this.shipping.country : config.i18n.defaultCountry
-      if (this.states[countryCode] !== null) {
-        return this.states[countryCode]
-      } else {
-        return []
-      }
+      return this.states[countryCode] ? this.states[countryCode] : []
     }
   }
 };