feat(vue-demo-store): add select for account type & company fields (#793

) * feat(vue-demo-store): add select for account type & company fields in registration * chore: changeset * Apply suggestions from code review
shopware · Apr 3, 2024 · 82d465e · 82d465e
1 parent 807f7da
commit 82d465e
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 0 deletions.
diff --git a/.changeset/breezy-mayflies-end.md b/.changeset/breezy-mayflies-end.md
@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Add Account Type to register form & company name + VAT-ID fields
diff --git a/apps/e2e-tests/page-objects/RegisterPage.ts b/apps/e2e-tests/page-objects/RegisterPage.ts
@@ -4,11 +4,14 @@ import { faker } from "@faker-js/faker";
 export class RegisterForm {
   // Define selectors
   readonly page: Page;
+  readonly accountType: Locator;
   readonly salutation: Locator;
   readonly firstName: Locator;
   readonly lastName: Locator;
   readonly emailAdrdress: Locator;
   readonly password: Locator;
+  readonly vatId: Locator;
+  readonly companyName: Locator;
   readonly street: Locator;
   readonly zipcode: Locator;
   readonly city: Locator;
@@ -19,11 +22,14 @@ export class RegisterForm {
   // Init selectors using constructor
   constructor(page: Page) {
     this.page = page;
+    this.accountType = page.getByTestId("registration-account-type-select");
     this.salutation = page.getByTestId("registration-salutation-select");
     this.firstName = page.getByTestId("registration-first-name-input");
     this.lastName = page.getByTestId("registration-last-name-input");
     this.emailAdrdress = page.getByTestId("registration-email-input");
     this.password = page.getByTestId("registration-password-input");
+    this.vatId = page.getByTestId("registration-vatid-input");
+    this.companyName = page.getByTestId("registration-company-input");
     this.street = page.getByTestId("registration-street-input");
     this.zipcode = page.getByTestId("registration-zipcode-input");
     this.city = page.getByTestId("registration-city-input");
@@ -54,6 +60,12 @@ export class RegisterForm {
     await this.countryState.selectOption({ label: "Bavaria" });
   }
 
+  async fillCompanyData(companyName: string, vatId: string) {
+    await this.accountType.selectOption({ label: "Company" });
+    await this.companyName.type(companyName);
+    await this.vatId.type(vatId);
+  }
+
   async submitRegistraionForm() {
     await this.submitButton.click();
     await this.page.waitForURL("/", { waitUntil: "networkidle" });

diff --git a/apps/e2e-tests/tests/registrationUser.spec.ts b/apps/e2e-tests/tests/registrationUser.spec.ts
@@ -33,4 +33,27 @@ test.describe.only("Registration new user", () => {
     await page.waitForLoadState("load");
     await page.locator("header-sing-out-link").nth(1).isVisible();
   });
+
+  test("Registration new user company", async ({ page }) => {
+    await homePage.clickOnSignIn();
+    await homePage.openRegistrationPage();
+    await registrationPage.fillCompanyData(
+      "e2e " + faker.company.name(),
+      "DE123456789",
+    );
+    await registrationPage.fillCustomerData(
+      "e2e " + faker.person.firstName(),
+      "e2e " + faker.person.lastName(),
+      faker.internet.exampleEmail(),
+      faker.internet.password(),
+    );
+    await registrationPage.fillAddressData(
+      faker.location.street(),
+      faker.location.zipCode(),
+      faker.location.city(),
+    );
+    await registrationPage.submitRegistraionForm();
+    await page.waitForLoadState("load");
+    await page.locator("header-sing-out-link").nth(1).isVisible();
+  });
 });
diff --git a/templates/vue-demo-store/components/account/AccountRegisterForm.vue b/templates/vue-demo-store/components/account/AccountRegisterForm.vue
@@ -31,12 +31,15 @@ watch(isLoggedIn, (isLoggedIn) => {
 
 const initialState = {
   requestedGroupId: props.customerGroupId,
+  accountType: "private",
   salutationId: "",
   firstName: "",
   lastName: "",
   email: "",
   password: "",
+  vatIds: [null],
   billingAddress: {
+    company: null,
     street: "",
     zipcode: "",
     city: "",
@@ -48,6 +51,9 @@ const initialState = {
 const state = reactive(JSON.parse(JSON.stringify(initialState)));
 
 const rules = computed(() => ({
+  accountType: {
+    required,
+  },
   salutationId: {
     required,
   },
@@ -68,6 +74,9 @@ const rules = computed(() => ({
     minLength: minLength(8),
   },
   billingAddress: {
+    company: {
+      required: requiredIf(() => state.accountType === "business"),
+    },
     street: {
       required,
       minLength: minLength(3),
@@ -143,6 +152,24 @@ useBreadcrumbs([
         {{ $t("account.signUpHeader") }}
       </h3>
       <div class="grid grid-cols-12 gap-5 mb-10">
+        <div class="col-span-12">
+          <label for="accountType">{{ $t("form.accountType.title") }} *</label>
+          <select
+            id="accountType"
+            v-model="state.accountType"
+            name="accountType"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-secondary-500 text-secondary-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            data-testid="registration-account-type-select"
+            @blur="$v.accountType.$touch()"
+          >
+            <option value="private">
+              {{ $t("form.accountType.private") }}
+            </option>
+            <option value="business">
+              {{ $t("form.accountType.business") }}
+            </option>
+          </select>
+        </div>
         <div class="col-span-12">
           <label for="salutation">{{ $t("form.salutation") }} *</label>
           <select
@@ -280,12 +307,56 @@ useBreadcrumbs([
             {{ $v.password.$errors[0].$message }}
           </span>
         </div>
+
+        <div
+          v-if="state.accountType === 'business'"
+          class="col-span-12 md:col-span-4"
+        >
+          <label for="vatId">{{ $t("form.vatId") }}</label>
+          <input
+            id="vatId"
+            v-model="state.vatIds[0]"
+            name="vatId"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-secondary-500 text-secondary-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            :placeholder="$t('form.vatIdPlaceholder')"
+            data-testid="registration-vatid-input"
+            @blur="$v.vatIds.$touch()"
+          />
+        </div>
       </div>
 
       <h3 class="block border-b-1 mb-5 pb-2 font-bold">
         {{ $t("account.yourAddress") }}
       </h3>
       <div class="grid grid-cols-12 gap-5 mb-10">
+        <div
+          v-if="state.accountType === 'business'"
+          class="col-span-12 md:col-span-4"
+        >
+          <label for="company">{{ $t("form.company") }} *</label>
+          <input
+            id="company"
+            v-model="state.billingAddress.company"
+            name="company"
+            type="text"
+            autocomplete="company"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-secondary-500 text-secondary-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            :class="[
+              $v.billingAddress.company.$error
+                ? 'border-red-600 focus:border-red-600'
+                : 'border-secondary-300 focus:border-indigo-500',
+            ]"
+            :placeholder="$t('form.companyPlaceholder')"
+            data-testid="registration-company-input"
+            @blur="$v.billingAddress.company.$touch()"
+          />
+          <span
+            v-if="$v.billingAddress.company.$error"
+            class="pt-1 text-sm text-red-600 focus:ring-primary border-secondary-300"
+          >
+            {{ $v.billingAddress.company.$errors[0].$message }}
+          </span>
+        </div>
         <div class="col-span-12 md:col-span-4">
           <label for="street">{{ $t("form.streetAddress") }} *</label>
           <input

diff --git a/templates/vue-demo-store/i18n/de-DE/form.json b/templates/vue-demo-store/i18n/de-DE/form.json
@@ -1,5 +1,10 @@
 {
   "form": {
+    "accountType": {
+      "title": "Kontotyp",
+      "private": "Privat",
+      "business": "Gewerblich"
+    },
     "salutation": "Anrede",
     "chooseSalutation": "Anrede wählen...",
     "firstName": "Vorname",
@@ -8,6 +13,8 @@
     "lastNamePlaceholder": "Nachname eingeben...",
     "country": "Land",
     "chooseCountry": "Land auswählen...",
+    "company": "Firma",
+    "companyPlaceholder": "Firma eingeben...",
     "streetAddress": "Straße und Hausnummer",
     "streetPlaceholder": "Straße eingeben...",
     "password": "Passwort",
@@ -16,6 +23,8 @@
     "repeatPasswordPlaceholder": "Passwort wiederholen",
     "email": "E-Mail-Adresse",
     "emailPlaceholder": "E-Mail eingeben...",
+    "vatId": "USt-IdNr.",
+    "vatIdPlaceholder": "USt-IdNr. eingeben...",
     "confirmEmail": "E-Mail bestätigen",
     "city": "Stadt",
     "cityPlaceholder": "Stadt eingeben...",

diff --git a/templates/vue-demo-store/i18n/en-GB/form.json b/templates/vue-demo-store/i18n/en-GB/form.json
@@ -1,5 +1,10 @@
 {
   "form": {
+    "accountType": {
+      "title": "Account type",
+      "private": "Private",
+      "business": "Company"
+    },
     "salutation": "Salutation",
     "chooseSalutation": "Choose salutation...",
     "firstName": "First name",
@@ -8,6 +13,8 @@
     "lastNamePlaceholder": "Enter last name...",
     "country": "Country",
     "chooseCountry": "Choose country...",
+    "company": "Company",
+    "companyPlaceholder": "Enter company...",
     "streetAddress": "Street address",
     "streetPlaceholder": "Enter street...",
     "password": "Password",
@@ -16,6 +23,8 @@
     "repeatPasswordPlaceholder": "Repeat Password",
     "email": "Email address",
     "emailPlaceholder": "Enter the email...",
+    "vatId": "VAT-ID",
+    "vatIdPlaceholder": "Enter VAT-ID...",
     "confirmEmail": "Confirm e-mail",
     "city": "City",
     "cityPlaceholder": "Enter city...",

diff --git a/templates/vue-demo-store/i18n/pl-PL/form.json b/templates/vue-demo-store/i18n/pl-PL/form.json
@@ -1,5 +1,10 @@
 {
   "form": {
+    "accountType": {
+      "title": "Typ konta",
+      "private": "Osoba prywatna",
+      "business": "Klient biznesowy"
+    },
     "salutation": "Forma grzecznościowa",
     "chooseSalutation": "Wybierz formę grzecznościową...",
     "firstName": "Imię",
@@ -8,6 +13,8 @@
     "lastNamePlaceholder": "Wpisz nazwisko...",
     "country": "Kraj",
     "chooseCountry": "Wybierz kraj...",
+    "company": "Firma",
+    "companyPlaceholder": "Wprowadź nazwę firmy...",
     "streetAddress": "Adres ulicy",
     "streetPlaceholder": "Wpisz ulicę...",
     "password": "Hasło",
@@ -17,6 +24,8 @@
     "email": "Adres e-mail",
     "emailPlaceholder": "Wpisz adres e-mail...",
     "confirmEmail": "Potwierdź e-mail",
+    "vatId": "Nr VAT",
+    "vatIdPlaceholder": "Wprowadź Nr VAT...",
     "city": "Miasto",
     "cityPlaceholder": "Wpisz miasto...",
     "postalCode": "Kod pocztowy",