refactor(RSS-ECOMM-2_53): apply changes and fixes to prod for cross-check

.github/pull_request_template.md

@@ -3,7 +3,7 @@
 📍 conforms with the following format:
 
 - [ ] prefix (following the [convention](https://www.conventionalcommits.org/en/v1.0.0-beta.2/): `feat`, `fix`, `hotfix`, `chore`, `refactor`, `revert`, `docs`, `style`, `test`)
-- [ ] sprint and issue number (e.g. `RSS-ECOMM-2_01`, where `2` - is the sprint number and `01` - is the issue number)
+- [ ] sprint and issue number (e.g. `RSS-ECOMM-3_01`, where `3` - is the sprint number and `01` - is the issue number)
 - [ ] short description
 
 👀 Example: `feat(RSS-ECOMM-2_01): description`
@@ -16,6 +16,10 @@ _Add a comprehensive description of the changes in the PR_ 🤔
 
 Provide affected modules or areas
 
+#### Styles 🎨
+
+Provide any style changes details
+
 #### Testing Strategy 🧼
 
 Describe the testing strategy for the changes
@@ -38,12 +42,13 @@ Specify if any documentation updates are required and provide details on what ne
       [![Pull Request Labeler](https://github.com/stardustmeg/greenshop/actions/workflows/labeler.yml/badge.svg)](https://github.com/stardustmeg/greenshop/actions/workflows/labeler.yml)
 - [x] My code doesn't generate any errors or warnings ⛓️
       [![Continuous Integration](https://github.com/stardustmeg/greenshop/actions/workflows/ci.yml/badge.svg)](https://github.com/stardustmeg/greenshop/actions/workflows/ci.yml)
+- [x] My code builds successfully ⚙️
+      [![Netlify Status](https://api.netlify.com/api/v1/badges/6c9181d3-e996-4070-b82e-6a351e8fa037/deploy-status)](https://app.netlify.com/sites/mad-wizards-greenshop-develop/deploys)
 
 ## Self-Check 🌟
 
 - [ ] I wrote the correct title for the PR 🗝️
 - [ ] I wrote a comprehensive description for the PR 📜
 - [ ] I have performed a self-review of my own code ✅
 - [ ] I have commented my code where needed 📝
-- [ ] My code successfully builds ⚙️
 - [ ] I am happy with my PR and ready to merge ❤️‍🔥

package.json

@@ -65,9 +65,9 @@
     "@commercetools/sdk-middleware-http": "^7.0.4",
     "autoprefixer": "^10.4.19",
     "isomorphic-fetch": "^3.0.0",
+    "materialize-css": "^1.0.0-rc.2",
     "modern-normalize": "^2.0.0",
     "postcode-validator": "^3.8.20",
-    "translate": "^3.0.0",
     "vite-plugin-checker": "^0.6.4",
     "vite-plugin-image-optimizer": "^1.1.7",
     "vite-plugin-svg-spriter": "^1.0.0",

src/app/App/view/AppView.ts

@@ -1,4 +1,3 @@
-import TAG_NAME from '@/shared/constants/tags.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 
 import styles from './appView.module.scss';
@@ -13,7 +12,7 @@ class AppView {
   private createHTML(): HTMLDivElement {
     this.pagesContainer = createBaseElement({
       cssClasses: [styles.siteWrapper],
-      tag: TAG_NAME.DIV,
+      tag: 'div',
     });
 
     return this.pagesContainer;

src/app/Router/model/RouterModel.ts

@@ -1,7 +1,7 @@
 import type { Page } from '@/shared/types/common.ts';
 
 import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts';
-import { EVENT_NAME, MEDIATOR_EVENT } from '@/shared/constants/events.ts';
+import MEDIATOR_EVENT from '@/shared/constants/events.ts';
 import { PAGE_ID } from '@/shared/constants/pages.ts';
 
 const DEFAULT_SEGMENT = import.meta.env.VITE_APP_DEFAULT_SEGMENT;
@@ -15,7 +15,7 @@ class RouterModel {
   private pages: Map<string, Page> = new Map();
 
   constructor() {
-    document.addEventListener(EVENT_NAME.DOM_CONTENT_LOADED, () => {
+    document.addEventListener('DOMContentLoaded', () => {
       const currentPath = window.location.pathname
         .split(DEFAULT_SEGMENT)
         .slice(PATH_SEGMENTS_TO_KEEP + NEXT_SEGMENT)

src/entities/Address/model/AddressModel.ts

@@ -0,0 +1,51 @@
+import type { Address, PersonalData } from '@/shared/types/user.ts';
+
+import CountryChoiceModel from '@/features/CountryChoice/model/CountryChoiceModel.ts';
+import getStore from '@/shared/Store/Store.ts';
+import { ADDRESS_TYPE, type AddressOptions, type AddressType } from '@/shared/types/address.ts';
+
+import AddressView from '../view/AddressView.ts';
+
+class AddressModel {
+  private addressType: AddressType;
+
+  private view: AddressView;
+
+  constructor(addressType: AddressType, options: AddressOptions) {
+    this.addressType = addressType;
+    this.view = new AddressView(addressType, options);
+    this.init();
+  }
+
+  private init(): boolean {
+    this.getHTML().append(new CountryChoiceModel(this.view.getCountryField().getView().getInput().getHTML()).getHTML());
+    return true;
+  }
+
+  public getAddressData(personalData: PersonalData): Address {
+    const store = getStore().getState();
+    const addressData: Address = {
+      city: this.view.getCityField().getView().getValue(),
+      country: this.addressType === ADDRESS_TYPE.BILLING ? store.billingCountry : store.shippingCountry,
+      email: personalData.email,
+      firstName: personalData.firstName,
+      id: '',
+      lastName: personalData.lastName,
+      postalCode: this.view.getPostalCodeField().getView().getValue(),
+      state: '',
+      streetName: this.view.getStreetField().getView().getValue(),
+      streetNumber: '',
+    };
+    return addressData;
+  }
+
+  public getHTML(): HTMLDivElement {
+    return this.view.getHTML();
+  }
+
+  public getView(): AddressView {
+    return this.view;
+  }
+}
+
+export default AddressModel;

src/entities/Address/view/AddressView.ts

@@ -0,0 +1,250 @@
+import InputFieldModel from '@/entities/InputField/model/InputFieldModel.ts';
+import InputModel from '@/shared/Input/model/InputModel.ts';
+import { FORM_TEXT, INPUT_TYPE } from '@/shared/constants/forms.ts';
+import { TITLE_TEXT } from '@/shared/constants/forms/register/constant.ts';
+import * as FORM_FIELDS from '@/shared/constants/forms/register/fieldParams.ts';
+import * as FORM_VALIDATION from '@/shared/constants/forms/register/validationParams.ts';
+import { ADDRESS_TYPE, type AddressOptions, type AddressType, SINGLE_ADDRESS } from '@/shared/types/address.ts';
+import createBaseElement from '@/shared/utils/createBaseElement.ts';
+
+import styles from './addressView.module.scss';
+
+class AddressView {
+  private address: HTMLDivElement;
+
+  private addressAsBillingCheckBox: InputModel | null = null;
+
+  private addressByDefaultCheckBox: InputModel | null = null;
+
+  private addressType: AddressType;
+
+  private cityField: InputFieldModel;
+
+  private countryField: InputFieldModel;
+
+  private inputFields: InputFieldModel[] = [];
+
+  private options: AddressOptions;
+
+  private postalCodeField: InputFieldModel;
+
+  private streetField: InputFieldModel;
+
+  constructor(addressType: AddressType, options: AddressOptions) {
+    this.addressType = addressType;
+    this.options = options;
+    this.streetField = this.createStreetField();
+    this.cityField = this.createCityField();
+    this.countryField = this.createCountryField();
+    this.postalCodeField = this.createPostalCodeField();
+    this.address = this.createHTML();
+  }
+
+  private appendInputFields(): void {
+    this.inputFields.forEach((inputField) => {
+      const inputFieldElement = inputField.getView().getHTML();
+      if (inputFieldElement instanceof HTMLLabelElement) {
+        inputFieldElement.classList.add(styles.label);
+        this.address.append(inputFieldElement);
+      } else if (inputFieldElement instanceof InputModel) {
+        this.address.append(inputFieldElement.getHTML());
+      }
+    });
+  }
+
+  private createAddressAsBillingCheckbox(innerContent: string): HTMLLabelElement {
+    const checkboxLabel = createBaseElement({
+      attributes: {
+        for: SINGLE_ADDRESS,
+      },
+      cssClasses: [styles.checkboxLabel],
+      tag: 'label',
+    });
+
+    const checkBoxText = createBaseElement({
+      cssClasses: [styles.checkboxText],
+      innerContent,
+      tag: 'span',
+    });
+
+    this.addressAsBillingCheckBox = new InputModel({
+      autocomplete: FORM_FIELDS.CHECKBOX.AUTOCOMPLETE,
+      id: SINGLE_ADDRESS,
+      placeholder: '',
+      type: INPUT_TYPE.CHECK_BOX,
+    });
+
+    checkboxLabel.append(checkBoxText, this.addressAsBillingCheckBox.getHTML());
+
+    return checkboxLabel;
+  }
+
+  private createAddressByDefaultCheckbox(innerContent: string): HTMLLabelElement {
+    const checkboxLabel = createBaseElement({
+      attributes: {
+        for: this.addressType === ADDRESS_TYPE.SHIPPING ? ADDRESS_TYPE.SHIPPING : ADDRESS_TYPE.BILLING,
+      },
+      cssClasses: [styles.checkboxLabel],
+      tag: 'label',
+    });
+
+    const checkBoxText = createBaseElement({
+      cssClasses: [styles.checkboxText],
+      innerContent,
+      tag: 'span',
+    });
+
+    this.addressByDefaultCheckBox = new InputModel({
+      autocomplete: FORM_FIELDS.CHECKBOX.AUTOCOMPLETE,
+      id: this.addressType === ADDRESS_TYPE.SHIPPING ? ADDRESS_TYPE.SHIPPING : ADDRESS_TYPE.BILLING,
+      placeholder: '',
+      type: INPUT_TYPE.CHECK_BOX,
+    });
+
+    checkboxLabel.append(checkBoxText, this.addressByDefaultCheckBox.getHTML());
+
+    return checkboxLabel;
+  }
+
+  private createCityField(): InputFieldModel {
+    if (this.addressType === ADDRESS_TYPE.SHIPPING) {
+      this.cityField = new InputFieldModel(
+        FORM_FIELDS.SHIPPING_ADDRESS_CITY,
+        FORM_VALIDATION.SHIPPING_ADDRESS_CITY_VALIDATE,
+      );
+    } else {
+      this.cityField = new InputFieldModel(
+        FORM_FIELDS.BILLING_ADDRESS_CITY,
+        FORM_VALIDATION.BILLING_ADDRESS_CITY_VALIDATE,
+      );
+    }
+
+    this.inputFields.push(this.cityField);
+
+    return this.cityField;
+  }
+
+  private createCountryField(): InputFieldModel {
+    if (this.addressType === ADDRESS_TYPE.SHIPPING) {
+      this.countryField = new InputFieldModel(
+        FORM_FIELDS.SHIPPING_ADDRESS_COUNTRY,
+        FORM_VALIDATION.SHIPPING_ADDRESS_COUNTRY_VALIDATE,
+      );
+    } else {
+      this.countryField = new InputFieldModel(
+        FORM_FIELDS.BILLING_ADDRESS_COUNTRY,
+        FORM_VALIDATION.BILLING_ADDRESS_COUNTRY_VALIDATE,
+      );
+    }
+
+    this.inputFields.push(this.countryField);
+
+    return this.countryField;
+  }
+
+  private createHTML(): HTMLDivElement {
+    this.address = createBaseElement({
+      cssClasses: [
+        styles.address,
+        this.addressType === ADDRESS_TYPE.SHIPPING ? styles.shippingAddressWrapper : styles.billingAddressWrapper,
+      ],
+      tag: 'div',
+    });
+
+    this.address.append(this.createTitle());
+
+    this.appendInputFields();
+
+    if (this.options.setDefault) {
+      this.address.append(this.createAddressByDefaultCheckbox(FORM_TEXT.DEFAULT_ADDRESS));
+    }
+    if (this.options.setAsBilling) {
+      this.address.append(this.createAddressAsBillingCheckbox(FORM_TEXT.SINGLE_ADDRESS));
+    }
+
+    return this.address;
+  }
+
+  private createPostalCodeField(): InputFieldModel {
+    if (this.addressType === ADDRESS_TYPE.SHIPPING) {
+      this.postalCodeField = new InputFieldModel(
+        FORM_FIELDS.SHIPPING_ADDRESS_POSTAL_CODE,
+        FORM_VALIDATION.SHIPPING_ADDRESS_POSTAL_CODE_VALIDATE,
+      );
+    } else {
+      this.postalCodeField = new InputFieldModel(
+        FORM_FIELDS.BILLING_ADDRESS_POSTAL_CODE,
+        FORM_VALIDATION.BILLING_ADDRESS_POSTAL_CODE_VALIDATE,
+      );
+    }
+
+    this.inputFields.push(this.postalCodeField);
+
+    return this.postalCodeField;
+  }
+
+  private createStreetField(): InputFieldModel {
+    if (this.addressType === ADDRESS_TYPE.SHIPPING) {
+      this.streetField = new InputFieldModel(
+        FORM_FIELDS.SHIPPING_ADDRESS_STREET,
+        FORM_VALIDATION.SHIPPING_ADDRESS_STREET_VALIDATE,
+      );
+    } else {
+      this.streetField = new InputFieldModel(
+        FORM_FIELDS.BILLING_ADDRESS_STREET,
+        FORM_VALIDATION.BILLING_ADDRESS_STREET_VALIDATE,
+      );
+    }
+
+    this.inputFields.push(this.streetField);
+
+    return this.streetField;
+  }
+
+  private createTitle(): HTMLHeadingElement {
+    return createBaseElement({
+      cssClasses: [styles.title],
+      innerContent:
+        this.addressType === ADDRESS_TYPE.SHIPPING ? TITLE_TEXT.en.SHIPPING_ADDRESS : TITLE_TEXT.en.BILLING_ADDRESS,
+      tag: 'h3',
+    });
+  }
+
+  public getAddressAsBillingCheckBox(): InputModel | null {
+    return this.addressAsBillingCheckBox;
+  }
+
+  public getAddressByDefaultCheckBox(): InputModel | null {
+    return this.addressByDefaultCheckBox;
+  }
+
+  public getCityField(): InputFieldModel {
+    return this.cityField;
+  }
+
+  public getCountryField(): InputFieldModel {
+    return this.countryField;
+  }
+
+  public getHTML(): HTMLDivElement {
+    return this.address;
+  }
+
+  public getInputFields(): InputFieldModel[] {
+    return this.inputFields;
+  }
+
+  public getPostalCodeField(): InputFieldModel {
+    return this.postalCodeField;
+  }
+
+  public getStreetField(): InputFieldModel {
+    return this.streetField;
+  }
+
+  public switchVisibilityAddressWrapper(isVisible: boolean): void {
+    this.address.classList.toggle(styles.hidden, isVisible);
+  }
+}
+
+export default AddressView;