From 155e316b6e3bfbe3f0524c02c4650fc40a083e1e Mon Sep 17 00:00:00 2001
From: Maciej <7597086+mdanilowicz@users.noreply.github.com>
Date: Tue, 4 Jul 2023 10:44:50 +0200
Subject: [PATCH 1/5] feat: shared address form

---
 .../components/account/AccountAddressCard.vue |   2 +-
 .../account/AccountRegisterForm.vue           |  53 +++--
 .../shared/SharedAccountAddressForm.vue       | 208 ++++++++++++++++++
 .../vue-demo-store/pages/account/address.vue  |   2 +-
 .../vue-demo-store/pages/checkout/index.vue   |   2 +-
 5 files changed, 248 insertions(+), 19 deletions(-)
 create mode 100644 templates/vue-demo-store/components/shared/SharedAccountAddressForm.vue

diff --git a/templates/vue-demo-store/components/account/AccountAddressCard.vue b/templates/vue-demo-store/components/account/AccountAddressCard.vue
index f9c86a2e8..6c6294583 100644
--- a/templates/vue-demo-store/components/account/AccountAddressCard.vue
+++ b/templates/vue-demo-store/components/account/AccountAddressCard.vue
@@ -80,7 +80,7 @@ const addAddressModalController = useModal();
         @click.prevent="addAddressModalController.open"
       />
       <SharedModal :controller="addAddressModalController">
-        <AccountAddressForm
+        <SharedAccountAddressForm
           :address="address"
           :title="$t('account.editAddress')"
           @success="addAddressModalController.close"
diff --git a/templates/vue-demo-store/components/account/AccountRegisterForm.vue b/templates/vue-demo-store/components/account/AccountRegisterForm.vue
index 1b2052476..ff344bf21 100644
--- a/templates/vue-demo-store/components/account/AccountRegisterForm.vue
+++ b/templates/vue-demo-store/components/account/AccountRegisterForm.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useVuelidate } from "@vuelidate/core";
-import { required, email, minLength, requiredIf } from "@vuelidate/validators";
+import { required, email, minLength } from "@vuelidate/validators";
 import { ClientApiError } from "@shopware-pwa/types";
 
 const props = defineProps<{
@@ -8,7 +8,7 @@ const props = defineProps<{
 }>();
 
 const { getSalutations } = useSalutations();
-const { getStatesForCountry } = useCountries();
+const { getCountries } = useCountries();
 const { register, isLoggedIn } = useUser();
 const { pushError } = useNotifications();
 
@@ -34,7 +34,6 @@ const initialState = {
     zipcode: "",
     city: "",
     countryId: "",
-    countryStateId: "",
   },
 };
 
@@ -74,11 +73,6 @@ const rules = computed(() => ({
     countryId: {
       required,
     },
-    countryStateId: {
-      required: requiredIf(() => {
-        return !!getStatesForCountry(state.billingAddress.countryId)?.length;
-      }),
-    },
   },
 }));
 
@@ -284,7 +278,7 @@ useBreadcrumbs([
       </h3>
       <div class="grid grid-cols-12 gap-5 mb-10">
         <div class="col-span-12 md:col-span-4">
-          <label for="street">{{ $t("form.streetAddress") }} *</label>
+          <label for="street">{{ $t("form.street") }} *</label>
           <input
             id="Street"
             v-model="state.billingAddress.street"
@@ -364,13 +358,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
diff --git a/templates/vue-demo-store/components/shared/SharedAccountAddressForm.vue b/templates/vue-demo-store/components/shared/SharedAccountAddressForm.vue
new file mode 100644
index 000000000..745eaa673
--- /dev/null
+++ b/templates/vue-demo-store/components/shared/SharedAccountAddressForm.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { CustomerAddress, Error } from "@shopware-pwa/types";
+
+const { createCustomerAddress, updateCustomerAddress, errorMessageBuilder } =
+  useAddress();
+
+const emits = defineEmits<{
+  (e: "success"): void;
+  (e: "close"): void;
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    address?: CustomerAddress;
+    title?: string;
+  }>(),
+  {
+    title: "Account address",
+    address: undefined,
+  }
+);
+
+const { getSalutations } = useSalutations();
+const { t } = useI18n();
+const { pushError } = useNotifications();
+
+const formData = reactive<CustomerAddress>({
+  countryId: props.address?.countryId ?? "",
+  countryStateId: props.address?.countryStateId ?? "",
+  salutationId: props.address?.salutationId ?? "",
+  firstName: props.address?.firstName ?? "",
+  lastName: props.address?.lastName ?? "",
+  zipcode: props.address?.zipcode ?? "",
+  city: props.address?.city ?? "",
+  street: props.address?.street ?? "",
+  id: props.address?.id ?? "",
+});
+
+const invokeSave = async (): Promise<void> => {
+  try {
+    const saveAddress = formData.id
+      ? updateCustomerAddress
+      : createCustomerAddress;
+    await saveAddress(formData);
+    emits("success");
+  } catch (errors: Error[]) {
+    errors.messages.forEach((element: Error) => {
+      pushError(errorMessageBuilder(element) || t("messages.error"));
+    });
+  }
+};
+
+const firstNameInputElement = ref();
+useFocus(firstNameInputElement, { initialValue: true });
+</script>
+
+<template>
+  <div class="mt-5 md:mt-0 md:col-span-2">
+    <div class="shadow overflow-hidden sm:rounded-md">
+      <form
+        id="account-address"
+        ref="formElement"
+        name="account-address"
+        method="post"
+      >
+        <div class="px-4 py-5 bg-white sm:p-6">
+          <h3 class="text-2xl border-b pb-3">
+            {{ props.title }}
+          </h3>
+          <div class="grid grid-cols-6 gap-6 mt-8">
+            <div class="col-span-6 sm:col-span-6">
+              <label
+                for="country"
+                class="block mb-2 text-sm font-medium text-gray-500"
+              >
+                {{ $t("form.salutation") }}
+              </label>
+              <select
+                id="salutation"
+                v-model="formData.salutationId"
+                required
+                name="salutation"
+                autocomplete="salutation-name"
+                class="mt-1 block w-full py-2.5 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-brand-light focus:border-brand-light sm:text-sm"
+                data-testid="account-address-form-salutation-select"
+              >
+                <option
+                  v-for="salutation in getSalutations"
+                  :key="salutation.id"
+                  :value="salutation.id"
+                  data-testid="account-address-form-salutation-select-option"
+                >
+                  {{ salutation.displayName }}
+                </option>
+              </select>
+            </div>
+            <div class="col-span-6 sm:col-span-3">
+              <label
+                for="first-name"
+                class="block mb-2 text-sm font-medium text-gray-500"
+              >
+                {{ $t("form.firstName") }}
+              </label>
+              <input
+                id="first-name"
+                ref="firstNameInputElement"
+                v-model="formData.firstName"
+                type="text"
+                required
+                name="first-name"
+                class="mt-1 block w-full p-2.5 border border-gray-300 text-gray-900 text-sm rounded-md shadow-sm focus:ring-brand-light focus:border-brand-light"
+                data-testid="account-address-form-firstname-input"
+              />
+            </div>
+
+            <div class="col-span-6 sm:col-span-3">
+              <label
+                for="last-name"
+                class="block mb-2 text-sm font-medium text-gray-500"
+              >
+                {{ $t("form.lastName") }}
+              </label>
+              <input
+                id="last-name"
+                v-model="formData.lastName"
+                type="text"
+                required
+                name="last-name"
+                class="mt-1 block w-full p-2.5 border border-gray-300 text-gray-900 text-sm rounded-md shadow-sm focus:ring-brand-light focus:border-brand-light"
+                data-testid="account-address-form-lastname-input"
+              />
+            </div>
+            <SharedCountryStateInput
+              v-model:countryId="formData.countryId"
+              v-model:stateId="formData.countryStateId"
+              class="col-span-6 sm:col-span-6"
+            />
+            <div class="col-span-6">
+              <label
+                for="street-address"
+                class="block mb-2 text-sm font-medium text-gray-500"
+              >
+                {{ $t("form.streetAddress") }}
+              </label>
+              <input
+                id="street-address"
+                v-model="formData.street"
+                type="text"
+                required
+                name="street-address"
+                autocomplete="street-address"
+                class="mt-1 block w-full p-2.5 border border-gray-300 text-gray-900 text-sm rounded-md shadow-sm focus:ring-brand-light focus:border-brand-light"
+                data-testid="account-address-form-street-input"
+              />
+            </div>
+
+            <div class="col-span-6 sm:col-span-6 lg:col-span-4">
+              <label
+                for="city"
+                class="block mb-2 text-sm font-medium text-gray-500"
+              >
+                {{ $t("form.city") }}
+              </label>
+              <input
+                id="city"
+                v-model="formData.city"
+                type="text"
+                required
+                name="city"
+                autocomplete="address-level2"
+                class="mt-1 block w-full p-2.5 border border-gray-300 text-gray-900 text-sm rounded-md shadow-sm focus:ring-brand-light focus:border-brand-light"
+                data-testid="account-address-form-city-input"
+              />
+            </div>
+            <div class="col-span-6 sm:col-span-3 lg:col-span-2">
+              <label
+                for="postal-code"
+                class="block mb-2 text-sm font-medium text-gray-500"
+              >
+                {{ $t("form.postalCode") }}
+              </label>
+              <input
+                id="postal-code"
+                v-model="formData.zipcode"
+                type="text"
+                required
+                name="postal-code"
+                autocomplete="postal-code"
+                class="mt-1 block w-full p-2.5 border border-gray-300 text-gray-900 text-sm rounded-md shadow-sm focus:ring-brand-light focus:border-brand-light"
+                data-testid="account-address-form-postal-code-input"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
+          <button
+            type="submit"
+            class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-brand-primary hover:bg-brand-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-light"
+            data-testid="account-address-form-submit-button"
+            @click.stop.prevent="invokeSave"
+          >
+            {{ $t("form.save") }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
diff --git a/templates/vue-demo-store/pages/account/address.vue b/templates/vue-demo-store/pages/account/address.vue
index ea2671f1a..ef3fc1d69 100644
--- a/templates/vue-demo-store/pages/account/address.vue
+++ b/templates/vue-demo-store/pages/account/address.vue
@@ -72,7 +72,7 @@ onBeforeMount(async () => {
       {{ $t("account.addressAddNew") }}
     </button>
     <SharedModal :controller="addAddressModalController">
-      <AccountAddressForm @success="addAddressModalController.close" />
+      <SharedAccountAddressForm @success="addAddressModalController.close" />
     </SharedModal>
   </div>
 </template>
diff --git a/templates/vue-demo-store/pages/checkout/index.vue b/templates/vue-demo-store/pages/checkout/index.vue
index db79c4f86..718aa6bc0 100644
--- a/templates/vue-demo-store/pages/checkout/index.vue
+++ b/templates/vue-demo-store/pages/checkout/index.vue
@@ -257,7 +257,7 @@ const addAddressModalController = useModal();
       />
     </SharedModal>
     <SharedModal :controller="addAddressModalController">
-      <AccountAddressForm @success="addAddressModalController.close" />
+      <SharedAccountAddressForm @success="addAddressModalController.close" />
     </SharedModal>
     <div
       v-if="isCheckoutAvailable || isCartLoading"

From 1a4927936a4c0fe8bd466637b277255a388ad0f4 Mon Sep 17 00:00:00 2001
From: Maciej <7597086+mdanilowicz@users.noreply.github.com>
Date: Tue, 4 Jul 2023 10:48:04 +0200
Subject: [PATCH 2/5] feat: shared address form

---
 .changeset/spicy-terms-prove.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/spicy-terms-prove.md

diff --git a/.changeset/spicy-terms-prove.md b/.changeset/spicy-terms-prove.md
new file mode 100644
index 000000000..ac9b3b963
--- /dev/null
+++ b/.changeset/spicy-terms-prove.md
@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Move AccountAddressForm to the shareable components folder

From 55675cd3a62f0f8d1ae256ecb8e6d82b91a8133c Mon Sep 17 00:00:00 2001
From: Maciej <7597086+mdanilowicz@users.noreply.github.com>
Date: Thu, 6 Jul 2023 09:22:21 +0200
Subject: [PATCH 3/5] feat: shared address form

---
 .../vue-demo-store/components/account/AccountRegisterForm.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/vue-demo-store/components/account/AccountRegisterForm.vue b/templates/vue-demo-store/components/account/AccountRegisterForm.vue
index ff344bf21..33455256f 100644
--- a/templates/vue-demo-store/components/account/AccountRegisterForm.vue
+++ b/templates/vue-demo-store/components/account/AccountRegisterForm.vue
@@ -278,7 +278,7 @@ useBreadcrumbs([
       </h3>
       <div class="grid grid-cols-12 gap-5 mb-10">
         <div class="col-span-12 md:col-span-4">
-          <label for="street">{{ $t("form.street") }} *</label>
+          <label for="street">{{ $t("form.streetAddress") }} *</label>
           <input
             id="Street"
             v-model="state.billingAddress.street"

From fc83fe35b3c4e58c9674aec02702dc58f9f52d8f Mon Sep 17 00:00:00 2001
From: Maciej <7597086+mdanilowicz@users.noreply.github.com>
Date: Mon, 10 Jul 2023 10:54:20 +0200
Subject: [PATCH 4/5] feat: shared address form

---
 .../shared/SharedAccountAddressForm.vue       | 97 +++++++++++++++++--
 1 file changed, 91 insertions(+), 6 deletions(-)

diff --git a/templates/vue-demo-store/components/shared/SharedAccountAddressForm.vue b/templates/vue-demo-store/components/shared/SharedAccountAddressForm.vue
index 745eaa673..d567cdd0a 100644
--- a/templates/vue-demo-store/components/shared/SharedAccountAddressForm.vue
+++ b/templates/vue-demo-store/components/shared/SharedAccountAddressForm.vue
@@ -1,8 +1,15 @@
 <script setup lang="ts">
-import { CustomerAddress, Error } from "@shopware-pwa/types";
+import {
+  CustomerAddress,
+  ClientApiError,
+  ShopwareError,
+} from "@shopware-pwa/types";
+import { useVuelidate } from "@vuelidate/core";
+import { required, minLength, requiredIf } from "@vuelidate/validators";
 
 const { createCustomerAddress, updateCustomerAddress, errorMessageBuilder } =
   useAddress();
+const { getStatesForCountry } = useCountries();
 
 const emits = defineEmits<{
   (e: "success"): void;
@@ -24,7 +31,7 @@ const { getSalutations } = useSalutations();
 const { t } = useI18n();
 const { pushError } = useNotifications();
 
-const formData = reactive<CustomerAddress>({
+const formData = reactive({
   countryId: props.address?.countryId ?? "",
   countryStateId: props.address?.countryStateId ?? "",
   salutationId: props.address?.salutationId ?? "",
@@ -41,10 +48,15 @@ const invokeSave = async (): Promise<void> => {
     const saveAddress = formData.id
       ? updateCustomerAddress
       : createCustomerAddress;
-    await saveAddress(formData);
-    emits("success");
-  } catch (errors: Error[]) {
-    errors.messages.forEach((element: Error) => {
+
+    $v.value.$touch();
+    const valid = await $v.value.$validate();
+    if (valid) {
+      await saveAddress(formData);
+      emits("success");
+    }
+  } catch (errors) {
+    (errors as ClientApiError).messages.forEach((element: ShopwareError) => {
       pushError(errorMessageBuilder(element) || t("messages.error"));
     });
   }
@@ -52,6 +64,40 @@ const invokeSave = async (): Promise<void> => {
 
 const firstNameInputElement = ref();
 useFocus(firstNameInputElement, { initialValue: true });
+
+const rules = computed(() => ({
+  salutationId: {
+    required,
+  },
+  firstName: {
+    required,
+    minLength: minLength(3),
+  },
+  lastName: {
+    required,
+    minLength: minLength(3),
+  },
+  zipcode: {
+    required,
+  },
+  street: {
+    required,
+    minLength: minLength(3),
+  },
+  city: {
+    required,
+  },
+  countryId: {
+    required,
+  },
+  countryStateId: {
+    required: requiredIf(() => {
+      return !!getStatesForCountry(formData.countryId)?.length;
+    }),
+  },
+}));
+
+const $v = useVuelidate(rules, formData);
 </script>
 
 <template>
@@ -93,6 +139,12 @@ useFocus(firstNameInputElement, { initialValue: true });
                   {{ salutation.displayName }}
                 </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 class="col-span-6 sm:col-span-3">
               <label
@@ -111,6 +163,12 @@ useFocus(firstNameInputElement, { initialValue: true });
                 class="mt-1 block w-full p-2.5 border border-gray-300 text-gray-900 text-sm rounded-md shadow-sm focus:ring-brand-light focus:border-brand-light"
                 data-testid="account-address-form-firstname-input"
               />
+              <span
+                v-if="$v.firstName.$error"
+                class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
+              >
+                {{ $v.firstName.$errors[0].$message }}
+              </span>
             </div>
 
             <div class="col-span-6 sm:col-span-3">
@@ -129,10 +187,19 @@ useFocus(firstNameInputElement, { initialValue: true });
                 class="mt-1 block w-full p-2.5 border border-gray-300 text-gray-900 text-sm rounded-md shadow-sm focus:ring-brand-light focus:border-brand-light"
                 data-testid="account-address-form-lastname-input"
               />
+              <span
+                v-if="$v.lastName.$error"
+                class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
+              >
+                {{ $v.lastName.$errors[0].$message }}
+              </span>
             </div>
+
             <SharedCountryStateInput
               v-model:countryId="formData.countryId"
               v-model:stateId="formData.countryStateId"
+              :country-id-validation="$v.countryId"
+              :state-id-validation="$v.countryStateId"
               class="col-span-6 sm:col-span-6"
             />
             <div class="col-span-6">
@@ -152,6 +219,12 @@ useFocus(firstNameInputElement, { initialValue: true });
                 class="mt-1 block w-full p-2.5 border border-gray-300 text-gray-900 text-sm rounded-md shadow-sm focus:ring-brand-light focus:border-brand-light"
                 data-testid="account-address-form-street-input"
               />
+              <span
+                v-if="$v.street.$error"
+                class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
+              >
+                {{ $v.street.$errors[0].$message }}
+              </span>
             </div>
 
             <div class="col-span-6 sm:col-span-6 lg:col-span-4">
@@ -171,6 +244,12 @@ useFocus(firstNameInputElement, { initialValue: true });
                 class="mt-1 block w-full p-2.5 border border-gray-300 text-gray-900 text-sm rounded-md shadow-sm focus:ring-brand-light focus:border-brand-light"
                 data-testid="account-address-form-city-input"
               />
+              <span
+                v-if="$v.city.$error"
+                class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
+              >
+                {{ $v.city.$errors[0].$message }}
+              </span>
             </div>
             <div class="col-span-6 sm:col-span-3 lg:col-span-2">
               <label
@@ -189,6 +268,12 @@ useFocus(firstNameInputElement, { initialValue: true });
                 class="mt-1 block w-full p-2.5 border border-gray-300 text-gray-900 text-sm rounded-md shadow-sm focus:ring-brand-light focus:border-brand-light"
                 data-testid="account-address-form-postal-code-input"
               />
+              <span
+                v-if="$v.zipcode.$error"
+                class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
+              >
+                {{ $v.zipcode.$errors[0].$message }}
+              </span>
             </div>
           </div>
         </div>

From 32c034fc29b0633256c7e2bdfe19ebf577c5fbcc Mon Sep 17 00:00:00 2001
From: Maciej <7597086+mdanilowicz@users.noreply.github.com>
Date: Thu, 13 Jul 2023 09:41:33 +0200
Subject: [PATCH 5/5] feat: shared address form

---
 .../account/AccountChangePassword.vue         |  3 +-
 .../account/AccountPersonalData.vue           |  9 ++----
 .../account/AccountRegisterForm.vue           |  3 +-
 .../account/AccountResetPasswordForm.vue      |  3 +-
 .../shared/SharedAccountAddressForm.vue       |  6 ++--
 templates/vue-demo-store/i18n/de-DE/de-DE.ts  |  2 ++
 .../i18n/de-DE/validations.json               | 24 ++++++++++++++
 templates/vue-demo-store/i18n/en-GB/en-GB.ts  |  2 ++
 .../i18n/en-GB/validations.json               | 23 ++++++++++++++
 templates/vue-demo-store/i18n/pl-PL/pl-PL.ts  |  2 ++
 .../i18n/pl-PL/validations.json               | 23 ++++++++++++++
 .../i18n/utils/i18n-validators.ts             | 31 +++++++++++++++++++
 .../vue-demo-store/pages/checkout/index.vue   |  4 ++-
 13 files changed, 122 insertions(+), 13 deletions(-)
 create mode 100644 templates/vue-demo-store/i18n/de-DE/validations.json
 create mode 100644 templates/vue-demo-store/i18n/en-GB/validations.json
 create mode 100644 templates/vue-demo-store/i18n/pl-PL/validations.json
 create mode 100644 templates/vue-demo-store/i18n/utils/i18n-validators.ts

diff --git a/templates/vue-demo-store/components/account/AccountChangePassword.vue b/templates/vue-demo-store/components/account/AccountChangePassword.vue
index 81d9dbea9..7c7b8f9e6 100644
--- a/templates/vue-demo-store/components/account/AccountChangePassword.vue
+++ b/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;
 }>();
diff --git a/templates/vue-demo-store/components/account/AccountPersonalData.vue b/templates/vue-demo-store/components/account/AccountPersonalData.vue
index b4195929a..5ed3bd640 100644
--- a/templates/vue-demo-store/components/account/AccountPersonalData.vue
+++ b/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();
 
diff --git a/templates/vue-demo-store/components/account/AccountRegisterForm.vue b/templates/vue-demo-store/components/account/AccountRegisterForm.vue
index b28184593..3bdb3ce0b 100644
--- a/templates/vue-demo-store/components/account/AccountRegisterForm.vue
+++ b/templates/vue-demo-store/components/account/AccountRegisterForm.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { useVuelidate } from "@vuelidate/core";
-import { required, email, minLength } 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;
 }>();
diff --git a/templates/vue-demo-store/components/account/AccountResetPasswordForm.vue b/templates/vue-demo-store/components/account/AccountResetPasswordForm.vue
index a75746fca..c23212ffc 100644
--- a/templates/vue-demo-store/components/account/AccountResetPasswordForm.vue
+++ b/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({
diff --git a/templates/vue-demo-store/components/shared/SharedAccountAddressForm.vue b/templates/vue-demo-store/components/shared/SharedAccountAddressForm.vue
index d567cdd0a..3abbedf02 100644
--- a/templates/vue-demo-store/components/shared/SharedAccountAddressForm.vue
+++ b/templates/vue-demo-store/components/shared/SharedAccountAddressForm.vue
@@ -5,7 +5,9 @@ import {
   ShopwareError,
 } from "@shopware-pwa/types";
 import { useVuelidate } from "@vuelidate/core";
-import { required, minLength, requiredIf } from "@vuelidate/validators";
+import { customValidators } from "@/i18n/utils/i18n-validators";
+
+const { required, minLength, requiredIf } = customValidators();
 
 const { createCustomerAddress, updateCustomerAddress, errorMessageBuilder } =
   useAddress();
@@ -24,7 +26,7 @@ const props = withDefaults(
   {
     title: "Account address",
     address: undefined,
-  }
+  },
 );
 
 const { getSalutations } = useSalutations();
diff --git a/templates/vue-demo-store/i18n/de-DE/de-DE.ts b/templates/vue-demo-store/i18n/de-DE/de-DE.ts
index 46f3c7562..4eadfc660 100644
--- a/templates/vue-demo-store/i18n/de-DE/de-DE.ts
+++ b/templates/vue-demo-store/i18n/de-DE/de-DE.ts
@@ -8,6 +8,7 @@ import cart from "./cart.json";
 import listing from "./listing.json";
 import product from "./product.json";
 import newsletter from "./newsletter.json";
+import validations from "./validations.json";
 
 export default Object.assign(
   account,
@@ -20,4 +21,5 @@ export default Object.assign(
   listing,
   product,
   newsletter,
+  validations,
 );
diff --git a/templates/vue-demo-store/i18n/de-DE/validations.json b/templates/vue-demo-store/i18n/de-DE/validations.json
new file mode 100644
index 000000000..f7d593cac
--- /dev/null
+++ b/templates/vue-demo-store/i18n/de-DE/validations.json
@@ -0,0 +1,24 @@
+
+{
+  "validations": {
+    "alpha": "Der Wert ist nicht alphabetisch",
+    "alphaNum": "Der Wert muss alphanumerisch sein",
+    "between": "Der Wert muss zwischen {min} und {max} liegen",
+    "decimal": "Der Wert muss dezimal sein",
+    "email": "Der Wert ist keine gültige E-Mail-Adresse",
+    "integer": "Der Wert ist keine ganze Zahl",
+    "ipAddress": "Der Wert ist keine gültige IP-Adresse",
+    "macAddress": "Der Wert ist keine gültige MAC-Adresse",
+    "maxLength": "Die maximale Länge beträgt {max}",
+    "minLength": "Mindestlänge {min}",
+    "minValue": "Der kleinste erlaubte Wert ist {min}",
+    "not": "Der Wert entspricht dem angegebenen Validierer nicht",
+    "numeric": "Der Wert muss numerisch sein",
+    "or": "Der Wert entspricht keinem der angegebenen Validierer",
+    "required": "Der Wert ist erforderlich",
+    "requiredIf": "Der Wert ist erforderlich",
+    "requiredUnless": "Der Wert ist erforderlich",
+    "sameAs": "Der Wert muss dem Wert {otherName} entsprechen",
+    "url": "Der Wert ist keine gültige URL-Adresse"
+  }
+}
diff --git a/templates/vue-demo-store/i18n/en-GB/en-GB.ts b/templates/vue-demo-store/i18n/en-GB/en-GB.ts
index 46f3c7562..4eadfc660 100644
--- a/templates/vue-demo-store/i18n/en-GB/en-GB.ts
+++ b/templates/vue-demo-store/i18n/en-GB/en-GB.ts
@@ -8,6 +8,7 @@ import cart from "./cart.json";
 import listing from "./listing.json";
 import product from "./product.json";
 import newsletter from "./newsletter.json";
+import validations from "./validations.json";
 
 export default Object.assign(
   account,
@@ -20,4 +21,5 @@ export default Object.assign(
   listing,
   product,
   newsletter,
+  validations,
 );
diff --git a/templates/vue-demo-store/i18n/en-GB/validations.json b/templates/vue-demo-store/i18n/en-GB/validations.json
new file mode 100644
index 000000000..bc0239622
--- /dev/null
+++ b/templates/vue-demo-store/i18n/en-GB/validations.json
@@ -0,0 +1,23 @@
+{
+  "validations": {
+    "alpha": "The value is not alphabetical",
+    "alphaNum": "The value must be alpha-numeric",
+    "between": "The value must be between {min} and {max}",
+    "decimal": "Value must be decimal",
+    "email": "Value is not a valid email address",
+    "integer": "Value is not an integer",
+    "ipAddress": "The value is not a valid IP address",
+    "macAddress": "The value is not a valid MAC Address",
+    "maxLength": "The maximum length allowed is {max}",
+    "minLength": "This minimum length should be at least {min}",
+    "minValue": "The minimum value allowed is {min}",
+    "not": "The value does not match the provided validator",
+    "numeric": "Value must be numeric",
+    "or": "The value does not match any of the provided validators",
+    "required": "Value is required",
+    "requiredIf": "The value is required",
+    "requiredUnless": "The value is required",
+    "sameAs": "The value must be equal to the {otherName} value",
+    "url": "The value is not a valid URL address"
+  }
+}
diff --git a/templates/vue-demo-store/i18n/pl-PL/pl-PL.ts b/templates/vue-demo-store/i18n/pl-PL/pl-PL.ts
index 7a92b29ef..f05737cc4 100644
--- a/templates/vue-demo-store/i18n/pl-PL/pl-PL.ts
+++ b/templates/vue-demo-store/i18n/pl-PL/pl-PL.ts
@@ -8,6 +8,7 @@ import cart from "../pl-PL/cart.json";
 import listing from "../pl-PL/listing.json";
 import product from "../pl-PL/product.json";
 import newsletter from "../pl-PL/newsletter.json";
+import validations from "../pl-PL/validations.json";
 
 export default Object.assign(
   account,
@@ -20,4 +21,5 @@ export default Object.assign(
   listing,
   product,
   newsletter,
+  validations,
 );
diff --git a/templates/vue-demo-store/i18n/pl-PL/validations.json b/templates/vue-demo-store/i18n/pl-PL/validations.json
new file mode 100644
index 000000000..310996d4e
--- /dev/null
+++ b/templates/vue-demo-store/i18n/pl-PL/validations.json
@@ -0,0 +1,23 @@
+{
+  "validations": {
+    "alpha": "Wartość nie jest alfabetyczna",
+    "alphaNum": "Wartość musi być alfanumeryczna",
+    "between": "Wartość musi być między {min} a {max}",
+    "decimal": "Wartość musi być dziesiętna",
+    "email": "Wartość nie jest prawidłowym adresem e-mail",
+    "integer": "Wartość nie jest liczbą całkowitą",
+    "ipAddress": "Wartość nie jest prawidłowym adresem IP",
+    "macAddress": "Wartość nie jest prawidłowym adresem MAC",
+    "maxLength": "Maksymalna dozwolona długość to {max}",
+    "minLength": "Minimalna długość {min}",
+    "minValue": "Minimalna dozwolona wartość to {min}",
+    "not": "Wartość nie pasuje do podanego walidatora",
+    "numeric": "Wartość musi być numeryczna",
+    "or": "Wartość nie pasuje do żadnego z podanych walidatorów",
+    "required": "Wartość jest wymagana",
+    "requiredIf": "Wartość jest wymagana",
+    "requiredUnless": "Wartość jest wymagana",
+    "sameAs": "Wartość musi być równa wartości {otherName}",
+    "url": "Wartość nie jest prawidłowym adresem URL"
+  }
+}
diff --git a/templates/vue-demo-store/i18n/utils/i18n-validators.ts b/templates/vue-demo-store/i18n/utils/i18n-validators.ts
new file mode 100644
index 000000000..dc42bbf24
--- /dev/null
+++ b/templates/vue-demo-store/i18n/utils/i18n-validators.ts
@@ -0,0 +1,31 @@
+import * as validators from "@vuelidate/validators";
+
+export const customValidators = () => {
+  const { $i18n } = useNuxtApp();
+  const { createI18nMessage } = validators;
+  const withI18nMessage = createI18nMessage({ t: $i18n.t.bind($i18n) });
+
+  return {
+    alpha: withI18nMessage(validators.alpha),
+    alphaNum: withI18nMessage(validators.alphaNum),
+    between: withI18nMessage(validators.between, { withArguments: true }),
+    decimal: withI18nMessage(validators.decimal),
+    email: withI18nMessage(validators.email),
+    integer: withI18nMessage(validators.integer),
+    ipAddress: withI18nMessage(validators.ipAddress),
+    macAddress: withI18nMessage(validators.macAddress),
+    maxLength: withI18nMessage(validators.maxLength, { withArguments: true }),
+    minLength: withI18nMessage(validators.minLength, { withArguments: true }),
+    minValue: withI18nMessage(validators.minValue, { withArguments: true }),
+    not: withI18nMessage(validators.not, { withArguments: true }),
+    numeric: withI18nMessage(validators.numeric),
+    or: withI18nMessage(validators.or, { withArguments: true }),
+    required: withI18nMessage(validators.required),
+    requiredIf: withI18nMessage(validators.requiredIf, { withArguments: true }),
+    requiredUnless: withI18nMessage(validators.requiredUnless, {
+      withArguments: true,
+    }),
+    sameAs: withI18nMessage(validators.sameAs, { withArguments: true }),
+    url: withI18nMessage(validators.url),
+  };
+};
diff --git a/templates/vue-demo-store/pages/checkout/index.vue b/templates/vue-demo-store/pages/checkout/index.vue
index 9c4ca37b6..a1c289216 100644
--- a/templates/vue-demo-store/pages/checkout/index.vue
+++ b/templates/vue-demo-store/pages/checkout/index.vue
@@ -5,9 +5,11 @@ export default {
 </script>
 <script setup lang="ts">
 import { useVuelidate } from "@vuelidate/core";
-import { required, email, minLength, requiredIf } from "@vuelidate/validators";
 import { ClientApiError, ShopwareError } from "@shopware-pwa/types";
 import { getShippingMethodDeliveryTime } from "@shopware-pwa/helpers-next";
+import { customValidators } from "@/i18n/utils/i18n-validators";
+
+const { required, minLength, requiredIf, email } = customValidators();
 
 definePageMeta({
   layout: "checkout",