feat(RSS-ECOMM-4_33): implement editing address

src/app/styles/variables.scss

@@ -46,9 +46,9 @@
   // 1440px
   body.light {
     // colors
+    --black: #000;
     --white: #fff;
     --white-tr: #ffffffa9;
-    --black: #000;
     --noble-white-100: #f5f5f5;
     --noble-white-200: #f0f0f0;
     --noble-gray-200: #eaeaea;
@@ -86,6 +86,8 @@
     --noble-gray-600: #cdcdcd;
     --noble-gray-700: #b0b0b0;
     --noble-gray-800: #c4c4c4;
+    --noble-gray-tr-800: #acacacbd;
+    --noble-gray-900: #1d1d1d;
     --noble-gray-1000: #1a1a1ab5;
     --red-power-600: #d0302f;
     --steam-green-300: #46a35880;
@@ -94,6 +96,7 @@
     --steam-green-500: #b6f09c;
     --steam-green-700: #70d27a;
     --steam-green-800: #46a358;
+    --steam-green-900: #46a3581a;
     --steam-green-gr-800: #c5e1cb2b;
   }
 }

src/entities/Address/model/AddressModel.ts

@@ -13,7 +13,7 @@ class AddressModel {
 
   private view: AddressView;
 
-  constructor(addressType: AddressType, options: AddressOptions) {
+  constructor(options: AddressOptions, addressType: AddressType = ADDRESS_TYPE.GENERAL) {
     this.addressType = addressType;
     this.view = new AddressView(addressType, options);
     this.init();
@@ -26,9 +26,22 @@ class AddressModel {
 
   public getAddressData(personalData: PersonalData): Address {
     const store = getStore().getState();
+    let country: string;
+
+    switch (this.addressType) {
+      case ADDRESS_TYPE.BILLING:
+        country = store.billingCountry;
+        break;
+      case ADDRESS_TYPE.SHIPPING:
+        country = store.shippingCountry;
+        break;
+      default:
+        country = store.defaultCountry;
+        break;
+    }
     const addressData: Address = {
       city: formattedText(this.view.getCityField().getView().getValue()),
-      country: this.addressType === ADDRESS_TYPE.BILLING ? store.billingCountry : store.shippingCountry,
+      country,
       email: personalData.email,
       firstName: personalData.firstName,
       id: '',
@@ -38,6 +51,7 @@ class AddressModel {
       streetName: formattedText(this.view.getStreetField().getView().getValue()),
       streetNumber: '',
     };
+
     return addressData;
   }
 

src/entities/Address/view/AddressView.ts

@@ -212,19 +212,29 @@ class AddressView {
   }
 
   private createTitle(): HTMLHeadingElement {
+    let titleText: string;
+    let key: string;
+    switch (this.addressType) {
+      case ADDRESS_TYPE.BILLING:
+        titleText = TITLE_TEXT[getStore().getState().currentLanguage].BILLING_ADDRESS;
+        key = TITLE_TEXT_KEYS.BILLING_ADDRESS;
+        break;
+      case ADDRESS_TYPE.SHIPPING:
+        titleText = TITLE_TEXT[getStore().getState().currentLanguage].SHIPPING_ADDRESS;
+        key = TITLE_TEXT_KEYS.SHIPPING_ADDRESS;
+        break;
+      default:
+        titleText = TITLE_TEXT[getStore().getState().currentLanguage].ADDRESS;
+        key = TITLE_TEXT_KEYS.ADDRESS;
+        break;
+    }
+
     const title = createBaseElement({
       cssClasses: [styles.title],
-      innerContent:
-        this.addressType === ADDRESS_TYPE.SHIPPING
-          ? TITLE_TEXT[getStore().getState().currentLanguage].SHIPPING_ADDRESS
-          : TITLE_TEXT[getStore().getState().currentLanguage].BILLING_ADDRESS,
+      innerContent: titleText,
       tag: 'h3',
     });
-    observeCurrentLanguage(
-      title,
-      TITLE_TEXT,
-      this.addressType === ADDRESS_TYPE.SHIPPING ? TITLE_TEXT_KEYS.SHIPPING_ADDRESS : TITLE_TEXT_KEYS.BILLING_ADDRESS,
-    );
+    observeCurrentLanguage(title, TITLE_TEXT, key);
     return title;
   }
 

src/entities/Address/view/addressView.module.scss

@@ -40,6 +40,7 @@
 
 .shippingAddressWrapper {
   grid-row: 3;
+  animation: show 0.5s ease-in forwards;
 }
 
 .billingAddressWrapper {

src/entities/UserAddress/model/UserAddressModel.ts

@@ -1,15 +1,14 @@
-/* eslint-disable max-lines-per-function */
 import type { Address, User } from '@/shared/types/user.ts';
 
+import AddressEditModel from '@/features/AddressEdit/model/AddressEditModel.ts';
 import getCustomerModel, { CustomerModel } from '@/shared/API/customer/model/CustomerModel.ts';
+import ConfirmModel from '@/shared/Confirm/model/ConfirmModel.ts';
 import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts';
-import LoaderModel from '@/shared/Loader/model/LoaderModel.ts';
 import modal from '@/shared/Modal/model/ModalModel.ts';
 import serverMessageModel from '@/shared/ServerMessage/model/ServerMessageModel.ts';
 import MEDIATOR_EVENT from '@/shared/constants/events.ts';
 import { ADDRESS_TYPE, type AddressTypeType } from '@/shared/constants/forms.ts';
 import { MESSAGE_STATUS, SERVER_MESSAGE_KEYS } from '@/shared/constants/messages.ts';
-import { LOADER_SIZE } from '@/shared/constants/sizes.ts';
 import showErrorMessage from '@/shared/utils/userMessage.ts';
 
 import UserAddressView from '../view/UserAddressView.ts';
@@ -30,6 +29,23 @@ class UserAddressModel {
     this.setLabelClickHandler();
   }
 
+  private async deleteAddress(address: Address): Promise<void> {
+    try {
+      const user = await getCustomerModel().getCurrentUser();
+      if (user) {
+        try {
+          await getCustomerModel().editCustomer([CustomerModel.actionRemoveAddress(address)], user);
+          EventMediatorModel.getInstance().notify(MEDIATOR_EVENT.REDRAW_USER_ADDRESSES, '');
+          serverMessageModel.showServerMessage(SERVER_MESSAGE_KEYS.ADDRESS_DELETED, MESSAGE_STATUS.SUCCESS);
+        } catch (error) {
+          showErrorMessage(error);
+        }
+      }
+    } catch (error) {
+      showErrorMessage(error);
+    }
+  }
+
   private async handleAddressType(user: User, activeType: AddressTypeType, inactive: boolean): Promise<void> {
     const customerModel = getCustomerModel();
 
@@ -63,22 +79,15 @@ class UserAddressModel {
     } else {
       switch (activeType) {
         case ADDRESS_TYPE.BILLING:
+        case ADDRESS_TYPE.DEFAULT_BILLING:
           await customerModel.editCustomer([CustomerModel.actionRemoveBillingAddress(this.currentAddress)], user);
           break;
 
         case ADDRESS_TYPE.SHIPPING:
+        case ADDRESS_TYPE.DEFAULT_SHIPPING:
           await customerModel.editCustomer([CustomerModel.actionRemoveShippingAddress(this.currentAddress)], user);
           break;
 
-        // TBD Check the adding/removing default address
-        // case ADDRESS_TYPE.DEFAULT_BILLING:
-        //   await customerModel.editCustomer([CustomerModel.actionEditDefaultBillingAddress(null)], user);
-        //   break;
-
-        // case ADDRESS_TYPE.DEFAULT_SHIPPING:
-        //   await customerModel.editCustomer([CustomerModel.actionEditDefaultShippingAddress(null)], user);
-        //   break;
-
         default:
           break;
       }
@@ -102,30 +111,14 @@ class UserAddressModel {
     this.view
       .getDeleteButton()
       .getHTML()
-      .addEventListener('click', async () => {
-        const loader = new LoaderModel(LOADER_SIZE.SMALL).getHTML();
-        this.view.getDeleteButton().getHTML().append(loader);
-        try {
-          const user = await getCustomerModel().getCurrentUser();
-          if (user) {
-            try {
-              await getCustomerModel().editCustomer([CustomerModel.actionRemoveAddress(address)], user);
-              EventMediatorModel.getInstance().notify(MEDIATOR_EVENT.REDRAW_USER_ADDRESSES, '');
-              serverMessageModel.showServerMessage(SERVER_MESSAGE_KEYS.ADDRESS_DELETED, MESSAGE_STATUS.SUCCESS);
-            } catch (error) {
-              showErrorMessage(error);
-            }
-          }
-        } catch (error) {
-          showErrorMessage(error);
-        } finally {
-          loader.remove();
-        }
+      .addEventListener('click', () => {
+        const confirmModel = new ConfirmModel(() => this.deleteAddress(address));
+        modal.setContent(confirmModel.getHTML());
+        modal.show();
       });
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  private setEditButtonHandler(_address: Address): void {
+  private setEditButtonHandler(address: Address): void {
     this.view
       .getEditButton()
       .getHTML()
@@ -135,11 +128,11 @@ class UserAddressModel {
           if (!user) {
             return;
           }
+          const newAddressEditForm = new AddressEditModel(address, user).getHTML();
           modal.show();
+          modal.setContent(newAddressEditForm);
         } catch (error) {
           showErrorMessage(error);
-        } finally {
-          modal.hide();
         }
       });
   }

src/entities/UserAddress/view/UserAddressView.ts

@@ -117,6 +117,11 @@ class UserAddressView {
     }
 
     this.view.append(addressText, this.editButton.getHTML(), this.deleteButton.getHTML());
+
+    observeStore(selectCurrentLanguage, () => {
+      addressText.innerText = this.createAddressText(getStore().getState().currentLanguage);
+    });
+
     return this.view;
   }
 
@@ -139,20 +144,20 @@ class UserAddressView {
     let addressType = null;
     switch (ActiveType) {
       case ADDRESS_TYPE.BILLING:
-        addressType = this.createLabel(ActiveType, [styles.billing], TOOLTIP_TEXT_KEYS.EDIT_BILLING_ADDRESS);
+        addressType = this.createLabel(ActiveType, [styles.billing], TOOLTIP_TEXT_KEYS.SWITCH_BILLING_ADDRESS);
         this.view.append(addressType);
         break;
 
       case ADDRESS_TYPE.SHIPPING:
-        addressType = this.createLabel(ActiveType, [styles.shipping], TOOLTIP_TEXT_KEYS.EDIT_SHIPPING_ADDRESS);
+        addressType = this.createLabel(ActiveType, [styles.shipping], TOOLTIP_TEXT_KEYS.SWITCH_SHIPPING_ADDRESS);
         this.view.append(addressType);
         break;
 
       case ADDRESS_TYPE.DEFAULT_BILLING:
         addressType = this.createLabel(
           ActiveType,
           [styles.defaultBilling],
-          TOOLTIP_TEXT_KEYS.EDIT_DEFAULT_BILLING_ADDRESS,
+          TOOLTIP_TEXT_KEYS.SWITCH_DEFAULT_BILLING_ADDRESS,
         );
         this.view.append(addressType);
         break;
@@ -161,7 +166,7 @@ class UserAddressView {
         addressType = this.createLabel(
           ActiveType,
           [styles.defaultShipping],
-          TOOLTIP_TEXT_KEYS.EDIT_DEFAULT_SHIPPING_ADDRESS,
+          TOOLTIP_TEXT_KEYS.SWITCH_DEFAULT_SHIPPING_ADDRESS,
         );
         this.view.append(addressType);
         break;

src/features/AddressAdd/model/AddressAddModel.ts

@@ -30,7 +30,7 @@ class AddressAddModel {
 
   constructor(type: AddressType, options: Record<string, boolean>) {
     this.addressType = type;
-    this.newAddress = new AddressModel(this.addressType, options);
+    this.newAddress = new AddressModel(options, this.addressType);
     this.init();
   }
 
@@ -148,6 +148,7 @@ class AddressAddModel {
     const cancelButton = this.view.getCancelButton().getHTML();
     cancelButton.addEventListener('click', () => {
       modal.hide();
+      modal.removeContent();
     });
     return true;
   }

src/features/AddressAdd/view/AddressAddView.ts

@@ -38,7 +38,7 @@ class AddressAddView {
   private createSaveChangesButton(): ButtonModel {
     this.saveChangesButton = new ButtonModel({
       classes: [styles.saveChangesButton],
-      text: BUTTON_TEXT[getStore().getState().currentLanguage].SAVE_CHANGES,
+      text: BUTTON_TEXT[getStore().getState().currentLanguage].ADD_ADDRESS,
     });
     this.saveChangesButton.setDisabled();
     return this.saveChangesButton;