feat: shared address form

.changeset/spicy-terms-prove.md

@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Move AccountAddressForm to the shareable components folder

templates/vue-demo-store/components/account/AccountAddressCard.vue

@@ -83,7 +83,7 @@ const addAddressModalController = useModal();
         @click.prevent="addAddressModalController.open"
       />
       <SharedModal :controller="addAddressModalController">
-        <AccountAddressForm
+        <SharedAccountAddressForm
           :address="address"
           :title="$t('account.editAddress')"
           @success="addAddressModalController.close"

templates/vue-demo-store/components/account/AccountChangePassword.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { useVuelidate } from "@vuelidate/core";
-import { required, minLength, sameAs } from "@vuelidate/validators";
+import { customValidators } from "@/i18n/utils/i18n-validators";
 
+const { required, minLength, sameAs } = customValidators();
 const emits = defineEmits<{
   (e: "success"): void;
 }>();

templates/vue-demo-store/components/account/AccountPersonalData.vue

@@ -1,13 +1,8 @@
 <script setup lang="ts">
 import { useVuelidate } from "@vuelidate/core";
-import {
-  required,
-  minLength,
-  email,
-  sameAs,
-  requiredIf,
-} from "@vuelidate/validators";
 import { ClientApiError } from "@shopware-pwa/types";
+import { customValidators } from "@/i18n/utils/i18n-validators";
+const { required, minLength, requiredIf, email, sameAs } = customValidators();
 
 const { user, refreshUser, updatePersonalInfo, updateEmail } = useUser();
 

templates/vue-demo-store/components/account/AccountRegisterForm.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { useVuelidate } from "@vuelidate/core";
-import { required, email, minLength, requiredIf } from "@vuelidate/validators";
 import { ClientApiError } from "@shopware-pwa/types";
+import { customValidators } from "@/i18n/utils/i18n-validators";
 
+const { required, minLength, email } = customValidators();
 const props = defineProps<{
   customerGroupId?: string;
 }>();
 
 const { getSalutations } = useSalutations();
-const { getStatesForCountry } = useCountries();
+const { getCountries } = useCountries();
 const { register, isLoggedIn } = useUser();
 const { pushError } = useNotifications();
 
@@ -40,7 +41,6 @@ const initialState = {
     zipcode: "",
     city: "",
     countryId: "",
-    countryStateId: "",
   },
 };
 
@@ -80,11 +80,6 @@ const rules = computed(() => ({
     countryId: {
       required,
     },
-    countryStateId: {
-      required: requiredIf(() => {
-        return !!getStatesForCountry(state.billingAddress.countryId)?.length;
-      }),
-    },
   },
 }));
 
@@ -361,13 +356,40 @@ useBreadcrumbs([
           </span>
         </div>
 
-        <SharedCountryStateInput
-          v-model:countryId="state.billingAddress.countryId"
-          v-model:stateId="state.billingAddress.countryStateId"
-          :country-id-validation="$v.billingAddress.countryId"
-          :state-id-validation="$v.billingAddress.countryStateId"
-          class="col-span-12 md:col-span-4"
-        />
+        <div class="col-span-12 md:col-span-4">
+          <label for="country">{{ $t("form.country") }} *</label>
+          <select
+            id="country"
+            v-model="state.billingAddress.countryId"
+            name="country"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            :class="[
+              $v.billingAddress.countryId.$error
+                ? 'border-red-600 focus:border-red-600'
+                : 'border-gray-300 focus:border-indigo-500',
+            ]"
+            :disabled="loading"
+            data-testid="registration-country-select"
+            @blur="$v.billingAddress.countryId.$touch()"
+          >
+            <option disabled selected value="">
+              {{ $t("form.chooseCountry") }}
+            </option>
+            <option
+              v-for="country in getCountries"
+              :key="country.id"
+              :value="country.id"
+            >
+              {{ country.name }}
+            </option>
+          </select>
+          <span
+            v-if="$v.salutationId.$error"
+            class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
+          >
+            {{ $v.salutationId.$errors[0].$message }}
+          </span>
+        </div>
       </div>
       <div class="mb-5 text-right">
         <button

templates/vue-demo-store/components/account/AccountResetPasswordForm.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { useVuelidate } from "@vuelidate/core";
-import { required, minLength, sameAs } from "@vuelidate/validators";
 import { confirmPasswordReset } from "@shopware-pwa/api-client";
 import { ClientApiError } from "@shopware-pwa/types";
+import { customValidators } from "@/i18n/utils/i18n-validators";
 
+const { required, minLength, sameAs } = customValidators();
 const { apiInstance } = useShopwareContext();
 
 const state = reactive({