From 3e6e1648ebf58ac7b7f6beb78df227da6597f82e Mon Sep 17 00:00:00 2001 From: Margarita Golubeva Date: Sun, 26 May 2024 22:32:57 +0300 Subject: [PATCH] feat: add default address --- .../UserAddress/view/UserAddressView.ts | 8 ++- .../AddressAdd/model/AddressAddModel.ts | 59 ++++++++++++++----- .../view/addressAddView.module.scss | 1 - src/shared/constants/forms.ts | 4 ++ src/shared/utils/messageTemplates.ts | 4 +- .../UserAddresses/model/UserAddressesModel.ts | 6 +- 6 files changed, 59 insertions(+), 23 deletions(-) diff --git a/src/entities/UserAddress/view/UserAddressView.ts b/src/entities/UserAddress/view/UserAddressView.ts index cff58393..6e49e8dd 100644 --- a/src/entities/UserAddress/view/UserAddressView.ts +++ b/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()); diff --git a/src/features/AddressAdd/model/AddressAddModel.ts b/src/features/AddressAdd/model/AddressAddModel.ts index ffe87d65..8fe05cd0 100644 --- a/src/features/AddressAdd/model/AddressAddModel.ts +++ b/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 { - 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 { 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(); diff --git a/src/features/AddressAdd/view/addressAddView.module.scss b/src/features/AddressAdd/view/addressAddView.module.scss index d03571e7..456e1ee6 100644 --- a/src/features/AddressAdd/view/addressAddView.module.scss +++ b/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); } diff --git a/src/shared/constants/forms.ts b/src/shared/constants/forms.ts index bcc37bd5..aa540f5c 100644 --- a/src/shared/constants/forms.ts +++ b/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 = { diff --git a/src/shared/utils/messageTemplates.ts b/src/shared/utils/messageTemplates.ts index 426c608f..dd3095d5 100644 --- a/src/shared/utils/messageTemplates.ts +++ b/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; } } diff --git a/src/widgets/UserAddresses/model/UserAddressesModel.ts b/src/widgets/UserAddresses/model/UserAddressesModel.ts index 61f7f5db..fb85931e 100644 --- a/src/widgets/UserAddresses/model/UserAddressesModel.ts +++ b/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); });