Update province component to use SfComponentSelect

Report issue for this component vuestorefront/storefront-ui#2490 AB#65237
Orckestra · Sep 7, 2022 · 1a0fba0 · 1a0fba0
1 parent 5b36501
commit 1a0fba0
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 37 deletions.
diff --git a/packages/theme/components/AddressForm.vue b/packages/theme/components/AddressForm.vue
@@ -9,7 +9,7 @@
       <SfInput
         v-model="form.addressName"
         name="addressName"
-        :label="'Address Name'"
+        :label="$t('Address Name')"
         required
         :valid="!errors[0]"
         :error-message="errors[0]"
@@ -24,7 +24,7 @@
         <SfInput
           v-model="form.firstName"
           name="firstName"
-          :label="'First Name'"
+          :label="$t('First Name')"
           required
           :valid="!errors[0]"
           :error-message="errors[0]"
@@ -38,7 +38,7 @@
         <SfInput
           v-model="form.lastName"
           name="lastName"
-          :label="'Last Name'"
+          :label="$t('Last Name')"
           required
           :valid="!errors[0]"
           :error-message="errors[0]"
@@ -53,7 +53,7 @@
       <SfInput
         v-model="form.line1"
         name="line1"
-        :label="'Street Name'"
+        :label="$t('Street Name')"
         required
         :valid="!errors[0]"
         :error-message="errors[0]"
@@ -67,7 +67,7 @@
       <SfInput
         v-model="form.line2"
         name="line2"
-        :label="'House/Apartment number'"
+        :label="$t('House/Apartment number')"
         :valid="!errors[0]"
         :error-message="errors[0]"
       />
@@ -78,47 +78,54 @@
         rules="required"
         class="form__element"
       >
-        <SfSelect
+       <SfComponentSelect
           v-model="form.countryCode"
           name="countryCode"
-          :label="'Country'"
-          class=" form__select  sf-select--underlined"
+          @change="form.regionCode = ''"
+          :label="$t('Country')"
           required
           :valid="!errors[0]"
           :error-message="errors[0]"
-        >
-          <SfSelectOption
+          class="
+            sf-component-select--underlined
+            form__select
+            form__element
+            form__element--half
+            form__element--half-even">
+          <SfComponentSelectOption
             v-for="{isoCode, name} in countries"
             :key="isoCode"
-            :value="isoCode"
-          >
-            {{ name || isoCode }}
-          </SfSelectOption>
-        </SfSelect>
+            :value="isoCode">
+              {{ name || isoCode }}
+          </SfComponentSelectOption>
+        </SfComponentSelect>
       </ValidationProvider>
       <ValidationProvider
         v-slot="{ errors }"
         rules="required|min:2|max:36"
         class="form__element"
       >
-        <SfSelect
+        <SfComponentSelect
           v-model="form.regionCode"
           name="regionCode"
-          :label="'State/Province'"
-          class=" form__select  sf-select--underlined"
+          :label="$t('State/Province')"
           required
-          :disabled="!form.countryCode"
           :valid="!errors[0]"
           :error-message="errors[0]"
-        >
-          <SfSelectOption
-            v-for="{isoCode, name} in getRegions(form.countryCode)"
-            :key="isoCode"
-            :value="isoCode"
-          >
-            {{ name || isoCode }}
-          </SfSelectOption>
-        </SfSelect>
+          class="
+            sf-component-select--underlined
+            form__select
+            form__element
+            form__element--half
+            form__element--half-even">
+            <SfComponentSelectOption
+              v-for="{isoCode, name} in getRegions(form.countryCode)"
+              :key="isoCode"
+              :value="isoCode"
+                >
+              {{ name || isoCode }}
+            </SfComponentSelectOption>
+        </SfComponentSelect>
       </ValidationProvider>
     </div>
     <div class="form__horizontal">
@@ -130,7 +137,7 @@
         <SfInput
           v-model="form.city"
           name="city"
-          :label="'City'"
+          :label="$t('City')"
           required
           :valid="!errors[0]"
           :error-message="errors[0]"
@@ -144,7 +151,7 @@
         <SfInput
           v-model="form.postalCode"
           name="postalCode"
-          :label="'Zip-code'"
+          :label="$t('Zip-code')"
           required
           :valid="!errors[0]"
           :error-message="errors[0]"
@@ -159,7 +166,7 @@
       <SfInput
         v-model="form.phoneNumber"
         name="phoneNumber"
-        :label="'Phone number'"
+        :label="$t('Phone number')"
         required
         :valid="!errors[0]"
         :error-message="errors[0]"
@@ -169,7 +176,7 @@
 </template>
 
 <script>
-import { SfButton, SfInput, SfSelect, SfCheckbox } from '@storefront-ui/vue';
+import { SfButton, SfInput, SfSelect, SfComponentSelect, SfCheckbox } from '@storefront-ui/vue';
 import { ValidationObserver, ValidationProvider } from 'vee-validate';
 import { countriesGetters, useCountries } from '@vue-storefront/orc-vsf';
 
@@ -180,6 +187,7 @@ export default {
     SfButton,
     SfSelect,
     SfCheckbox,
+    SfComponentSelect,
     ValidationProvider,
     ValidationObserver
   },
@@ -197,6 +205,7 @@ export default {
     const { countries } = useCountries();
     const getRegions = (country) => countriesGetters.getRegions(countries.value, country);
 
+
     return {
       getRegions,
       countries

diff --git a/packages/theme/components/MyAccount/BillingAddressForm.vue b/packages/theme/components/MyAccount/BillingAddressForm.vue
@@ -24,7 +24,7 @@
           class="action-button sf-button"
           :disabled="loading"
           >
-          {{ $t(isNew ? 'Add address' : 'Update address') }}
+          {{ $t(isNew ? 'Add new address' : 'Update address') }}
         </SfButton>
 
       </div>

diff --git a/packages/theme/components/MyAccount/ProfileUpdateForm.vue b/packages/theme/components/MyAccount/ProfileUpdateForm.vue
@@ -43,7 +43,7 @@
           v-model="form.email"
           type="email"
           name="email"
-          :label="$t('Your e-mail')"
+          :label="$t('Email')"
           required
           :valid="!errors[0]"
           :error-message="$t(errors[0])"

diff --git a/packages/theme/components/MyAccount/ShippingAddressForm.vue b/packages/theme/components/MyAccount/ShippingAddressForm.vue
@@ -24,7 +24,7 @@
           class="action-button sf-button"
           :disabled="loading"
           >
-          {{ $t(isNew ? 'Add address' : 'Update address') }}
+          {{ $t(isNew ? 'Add new address' : 'Update address') }}
         </SfButton>
 
       </div>

diff --git a/packages/theme/lang/en.js b/packages/theme/lang/en.js
@@ -168,5 +168,17 @@ export default {
   'Go to billing': 'Go to billing',
   'Go to shipping': 'Go to shipping',
   'Unavailable items in cart': 'Your cart contains unavailable products. Please review the cart or clean the cart automatically.',
-  'Clean cart': 'Clean cart'
+  'Clean cart': 'Clean cart',
+  'Add new address': 'Add new address',
+  'Address Name': 'Address Name',
+  'First Name': 'First Name',
+  'Last Name': 'Last Name',
+  'Street Name': 'Street Name',
+  'House/Apartment number': 'House/Apartment number',
+  'Country': 'Country',
+  'State/Province': 'State/Province',
+  'City': 'City',
+  'Zip-code': 'Zip-code',
+  'Phone number': 'Phone number',
+  'Email': 'Email'
 };
diff --git a/packages/theme/lang/fr.js b/packages/theme/lang/fr.js
@@ -159,5 +159,17 @@ export default {
   'Open hours': 'Open hours',
   'Your authentication session has expired. Please log in again.': 'Your authentication session has expired. Please log in again.',
   'Change to grid view': 'Change to grid view',
-  'Change to list view': 'Change to list view'
+  'Change to list view': 'Change to list view',
+  'Add new address': 'Ajouter une nouvelle adresse',
+  'Address Name': 'Identifier votre adresse',
+  'First Name': 'Prénom',
+  'Last Name': 'Nom',
+  'Street Name': 'Adresse',
+  'House/Apartment number': 'Complément d\'adresse',
+  'Country': 'Pays',
+  'State/Province': 'Province',
+  'City': 'Ville',
+  'Zip-code': 'Code Postal',
+  'Phone number': 'Numéro de téléphone',
+  'Email': 'Email'
 };