fix(vue-demo): revert SharedCountryStateInput (#331)

.changeset/cuddly-apricots-applaud.md

@@ -0,0 +1,5 @@
+---
+"vue-demo-store": patch
+---
+
+Revert `SharedCountryStateInput` component on registration page

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

@@ -3,13 +3,13 @@ import { useVuelidate } from "@vuelidate/core";
 import { ClientApiError } from "@shopware-pwa/types";
 import { customValidators } from "@/i18n/utils/i18n-validators";
 
-const { required, minLength, email } = customValidators();
+const { required, minLength, email, requiredIf } = customValidators();
 const props = defineProps<{
   customerGroupId?: string;
 }>();
 
 const { getSalutations } = useSalutations();
-const { getCountries } = useCountries();
+const { getStatesForCountry } = useCountries();
 const { register, isLoggedIn } = useUser();
 const { pushError } = useNotifications();
 
@@ -41,6 +41,7 @@ const initialState = {
     zipcode: "",
     city: "",
     countryId: "",
+    countryStateId: "",
   },
 };
 
@@ -80,6 +81,11 @@ const rules = computed(() => ({
     countryId: {
       required,
     },
+    countryStateId: {
+      required: requiredIf(() => {
+        return !!getStatesForCountry(state.billingAddress.countryId)?.length;
+      }),
+    },
   },
 }));
 
@@ -356,40 +362,13 @@ useBreadcrumbs([
           </span>
         </div>
 
-        <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>
+        <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>
       <div class="mb-5 text-right">
         <button