feat: add default address

src/entities/UserAddress/view/UserAddressView.ts

@@ -1,10 +1,11 @@
+import type { UserAddressType } from '@/shared/constants/forms.ts';
 import type { Address, User } from '@/shared/types/user';
 
 import ButtonModel from '@/shared/Button/model/ButtonModel.ts';
 import getStore from '@/shared/Store/Store.ts';
 import observeStore, { selectCurrentLanguage } from '@/shared/Store/observer.ts';
 import COUNTRIES_LIST from '@/shared/constants/countriesList.ts';
-import { USER_ADDRESS_TYPE, type UserAddressType } from '@/shared/constants/forms.ts';
+import { USER_ADDRESS_TYPE } from '@/shared/constants/forms.ts';
 import SVG_DETAILS from '@/shared/constants/svg.ts';
 import TOOLTIP_TEXT from '@/shared/constants/tooltip.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
@@ -43,7 +44,7 @@ class UserAddressView {
 
     const country = findKeyByValue(COUNTRIES_LIST[locale], address.country);
     const standartAddressText = addressTemplate(address.streetName, address.city, country, address.postalCode);
-    let addressText = addressMessage(type, standartAddressText);
+    let addressText = addressMessage(standartAddressText, type);
 
     if (defaultAddressId === address.id) {
       if (type === USER_ADDRESS_TYPE.BILLING) {
@@ -103,13 +104,14 @@ class UserAddressView {
 
   private createHTML(user: User, address: Address, type: UserAddressType, defaultAddressId: string): HTMLLIElement {
     this.view = createBaseElement({
+      attributes: { 'data-type': type },
       cssClasses: [styles.info],
       tag: 'li',
     });
     const addressText = createBaseElement({
       cssClasses: [styles.addressText],
       innerContent: this.createAddress(user, address, type, defaultAddressId),
-      tag: 'div',
+      tag: 'span',
     });
 
     this.view.append(addressText, this.editButton.getHTML(), this.deleteButton.getHTML());

src/features/AddressAdd/model/AddressAddModel.ts

@@ -1,6 +1,7 @@
 import type InputFieldModel from '@/entities/InputField/model/InputFieldModel.ts';
 import type { AddressType } from '@/shared/types/address.ts';
 import type { Address, User } from '@/shared/types/user.ts';
+import type { MyCustomerUpdateAction } from '@commercetools/platform-sdk';
 
 import AddressModel from '@/entities/Address/model/AddressModel.ts';
 import getCustomerModel, { CustomerModel } from '@/shared/API/customer/model/CustomerModel.ts';
@@ -34,21 +35,22 @@ class AddressAddModel {
   }
 
   private async addAddressType(): Promise<void> {
-    const updatedUser = await getCustomerModel().getCurrentUser();
-    if (updatedUser) {
-      const newAddress = updatedUser.addresses[updatedUser.addresses.length - 1];
-      if (newAddress && newAddress.id) {
-        const action =
-          this.addressType === ADDRESS_TYPE.BILLING
-            ? CustomerModel.actionAddBillingAddress(newAddress.id)
-            : CustomerModel.actionAddShippingAddress(newAddress.id);
-
-        await getCustomerModel().editCustomer([action], updatedUser);
-
-        serverMessageModel.showServerMessage(SERVER_MESSAGE_KEYS.ADDRESS_ADDED, MESSAGE_STATUS.SUCCESS);
-        modal.hide();
-        EventMediatorModel.getInstance().notify(MEDIATOR_EVENT.REDRAW_ADDRESSES, '');
+    try {
+      const updatedUser = await getCustomerModel().getCurrentUser();
+      if (updatedUser) {
+        const newAddress = this.getNewAddress(updatedUser);
+        if (newAddress && newAddress.id) {
+          const actions = this.getAddressActions(newAddress.id);
+          if (this.shouldSetDefaultAddress()) {
+            actions.push(this.getDefaultAddressAction(newAddress.id));
+          }
+
+          await getCustomerModel().editCustomer(actions, updatedUser);
+          this.handleSuccess();
+        }
       }
+    } catch (error) {
+      showErrorMessage();
     }
   }
 
@@ -88,6 +90,21 @@ class AddressAddModel {
     }
   }
 
+  private getAddressActions(addressId: string): MyCustomerUpdateAction[] {
+    const addAddressAction =
+      this.addressType === ADDRESS_TYPE.BILLING
+        ? CustomerModel.actionAddBillingAddress(addressId)
+        : CustomerModel.actionAddShippingAddress(addressId);
+
+    return [addAddressAction];
+  }
+
+  private getDefaultAddressAction(addressId: string): MyCustomerUpdateAction {
+    return this.addressType === ADDRESS_TYPE.BILLING
+      ? CustomerModel.actionEditDefaultBillingAddress(addressId)
+      : CustomerModel.actionEditDefaultShippingAddress(addressId);
+  }
+
   private getFormAddressData(): Record<string, string> {
     return {
       city: formattedText(this.newAddress.getView().getCityField().getView().getInput().getValue()),
@@ -97,6 +114,16 @@ class AddressAddModel {
     };
   }
 
+  private getNewAddress(user: User): Address | null {
+    return user.addresses[user.addresses.length - 1] || null;
+  }
+
+  private handleSuccess(): void {
+    serverMessageModel.showServerMessage(SERVER_MESSAGE_KEYS.ADDRESS_ADDED, MESSAGE_STATUS.SUCCESS);
+    EventMediatorModel.getInstance().notify(MEDIATOR_EVENT.REDRAW_ADDRESSES, '');
+    modal.hide();
+  }
+
   private init(): void {
     this.getHTML().append(this.newAddress.getHTML());
     this.inputFields = [
@@ -148,6 +175,10 @@ class AddressAddModel {
     return true;
   }
 
+  private shouldSetDefaultAddress(): boolean {
+    return this.newAddress.getView().getAddressByDefaultCheckBox()?.getHTML().checked || false;
+  }
+
   private switchSubmitFormButtonAccess(): boolean {
     if (this.inputFields.every((inputField) => inputField.getIsValid())) {
       this.view.getSaveChangesButton().setEnabled();

src/features/AddressAdd/view/addressAddView.module.scss

@@ -3,7 +3,6 @@
 .wrapper {
   border-bottom: var(--tiny-offset) solid var(--steam-green-800);
   padding: var(--small-offset);
-  width: 500px;
   height: max-content;
   background-color: var(--noble-white-100);
 }

src/shared/constants/forms.ts

@@ -29,6 +29,10 @@ export const FORM_TEXT_KEYS = {
   SINGLE_ADDRESS: 'SINGLE_ADDRESS',
 } as const;
 
+export const DEFAULT_ADDRESS = {
+  setDefault: true,
+};
+
 export type FormTextKeysType = (typeof FORM_TEXT_KEYS)[keyof typeof FORM_TEXT_KEYS];
 
 export const USER_COUNTRY_ADDRESS = {

src/shared/utils/messageTemplates.ts

@@ -79,13 +79,13 @@ export const minLengthMessage = (minLength: number): string =>
     ? minLengthMessageEn(minLength)
     : minLengthMessageRu(minLength);
 
-export function addressMessage(type: string, text: string): string {
+export function addressMessage(text: string, type?: string): string {
   switch (type) {
     case ADDRESS_TYPE.BILLING:
       return billingAddressMessage(text);
     case ADDRESS_TYPE.SHIPPING:
       return shippingAddressMessage(text);
     default:
-      return '';
+      return text;
   }
 }

src/widgets/UserAddresses/model/UserAddressesModel.ts

@@ -4,7 +4,7 @@ import type { Address, User } from '@/shared/types/user.ts';
 import UserAddressModel from '@/entities/UserAddress/model/UserAddressModel.ts';
 import AddressAddModel from '@/features/AddressAdd/model/AddressAddModel.ts';
 import modal from '@/shared/Modal/model/ModalModel.ts';
-import { USER_ADDRESS_TYPE } from '@/shared/constants/forms.ts';
+import { DEFAULT_ADDRESS, USER_ADDRESS_TYPE } from '@/shared/constants/forms.ts';
 import { ADDRESS_TYPE } from '@/shared/types/address.ts';
 
 import UserAddressesView from '../view/UserAddressesView.ts';
@@ -39,7 +39,7 @@ class UserAddressesModel {
       .getCreateBillingAddressButton()
       .getHTML()
       .addEventListener('click', () => {
-        const newAddressForm = new AddressAddModel(ADDRESS_TYPE.BILLING, { setDefault: true }).getHTML();
+        const newAddressForm = new AddressAddModel(ADDRESS_TYPE.BILLING, DEFAULT_ADDRESS).getHTML();
         modal.show();
         modal.setContent(newAddressForm);
       });
@@ -50,7 +50,7 @@ class UserAddressesModel {
       .getCreateShippingAddressButton()
       .getHTML()
       .addEventListener('click', () => {
-        const newAddressForm = new AddressAddModel(ADDRESS_TYPE.SHIPPING, { setDefault: true }).getHTML();
+        const newAddressForm = new AddressAddModel(ADDRESS_TYPE.SHIPPING, DEFAULT_ADDRESS).getHTML();
         modal.show();
         modal.setContent(newAddressForm);
       });