feat(RSS-ECOMM-3_14): display user info

src/app/App/model/AppModel.ts

@@ -2,6 +2,7 @@
 import type { Page } from '@/shared/types/common.ts';
 
 import RouterModel from '@/app/Router/model/RouterModel.ts';
+import modal from '@/shared/Modal/model/ModalModel.ts';
 import { PAGE_ID } from '@/shared/constants/pages.ts';
 import FooterModel from '@/widgets/Footer/model/FooterModel.ts';
 import HeaderModel from '@/widgets/Header/model/HeaderModel.ts';
@@ -65,7 +66,7 @@ class AppModel {
       },
       [PAGE_ID.USER_PROFILE_PAGE]: async (): Promise<Page> => {
         const { default: UserProfilePageModel } = await import('@/pages/UserProfilePage/model/UserProfilePageModel.ts');
-        return new UserProfilePageModel(this.appView.getHTML());
+        return new UserProfilePageModel(this.appView.getHTML(), this.router);
       },
     };
 
@@ -81,6 +82,7 @@ class AppModel {
       .getHTML()
       .insertAdjacentElement('beforebegin', new HeaderModel(this.router, this.appView.getHTML()).getHTML());
     this.appView.getHTML().insertAdjacentElement('afterend', new FooterModel(this.router).getHTML());
+    this.appView.getHTML().insertAdjacentElement('afterend', modal.getHTML());
 
     const routes = await this.createRoutes();
     this.router.setRoutes(routes);

src/app/App/view/AppView.ts

@@ -14,7 +14,6 @@ class AppView {
       cssClasses: [styles.siteWrapper],
       tag: 'div',
     });
-
     return this.pagesContainer;
   }
 

src/app/App/view/appView.module.scss

@@ -8,4 +8,8 @@
   width: 100%;
   min-height: calc(100vh - 141px);
   max-width: 1440px;
+  background-image: url('../../../shared/img/tree.png');
+  background-position: right bottom;
+  background-size: 60dvh;
+  background-repeat: no-repeat;
 }

src/app/styles/variables.scss

@@ -11,6 +11,14 @@
   --medium-br: 10px;
   --large-br: 20px;
 
+  // shadows
+  --mellow-shadow-100: rgb(0 0 0 / 19%) 0 10px 20px, rgb(0 0 0 / 23%) 0 6px 6px;
+  --mellow-shadow-200: rgb(255 255 255 / 10%) 0 1px 1px 0 inset, rgb(50 50 93 / 25%) 0 50px 100px -20px,
+    rgb(0 0 0 / 30%) 0 30px 60px -30px;
+  --mellow-shadow-300: rgb(0 0 0 / 25%) 0 14px 28px, rgb(0 0 0 / 22%) 0 10px 10px;
+  --mellow-shadow-400: rgb(0 0 0 / 9%) 0 2px 1px, rgb(0 0 0 / 9%) 0 4px 2px, rgb(0 0 0 / 9%) 0 8px 4px,
+    rgb(0 0 0 / 9%) 0 16px 8px, rgb(0 0 0 / 9%) 0 32px 16px;
+
   // fonts
   --regular-font: 400 13px 'Cerapro', sans-serif;
   --extra-regular-font: 400 24px 'Cerapro', sans-serif;
@@ -24,6 +32,7 @@
   body.light {
     // colors
     --white: #fff;
+    --white-tr: #ffffffa9;
     --black: #000;
     --noble-white-100: #f5f5f5;
     --noble-white-200: #f0f0f0;
@@ -34,6 +43,8 @@
     --noble-gray-600: #a5a5a5;
     --noble-gray-700: #727272;
     --noble-gray-800: #3d3d3d;
+    --noble-gray-tr-800: #acacacbd;
+    --noble-gray-900: #1d1d1d;
     --noble-gray-1000: #1a1a1ab5;
     --red-power-600: #d0302f;
     --steam-green-300: #46a35880;

src/entities/Navigation/model/NavigationModel.ts

@@ -1,10 +1,9 @@
 import type RouterModel from '@/app/Router/model/RouterModel';
 
-import serverMessageModel from '@/shared/ServerMessage/model/ServerMessageModel.ts';
 import getStore from '@/shared/Store/Store.ts';
-import observeStore, { selectCurrentPage, selectCurrentUser } from '@/shared/Store/observer.ts';
-import { MESSAGE_STATUS, SERVER_MESSAGE } from '@/shared/constants/messages.ts';
+import observeStore, { selectCurrentPage, selectIsUserLoggedIn } from '@/shared/Store/observer.ts';
 import { PAGE_ID } from '@/shared/constants/pages.ts';
+import showErrorMessage from '@/shared/utils/userMessage.ts';
 
 import NavigationView from '../view/NavigationView.ts';
 
@@ -37,7 +36,7 @@ class NavigationModel {
   }
 
   private observeState(): boolean {
-    observeStore(selectCurrentUser, () => this.checkCurrentUser());
+    observeStore(selectIsUserLoggedIn, () => this.checkCurrentUser());
     observeStore(selectCurrentPage, () => this.switchLinksState());
     return true;
   }
@@ -50,10 +49,7 @@ class NavigationModel {
         try {
           await this.router.navigateTo(route);
         } catch {
-          serverMessageModel.showServerMessage(
-            SERVER_MESSAGE[getStore().getState().currentLanguage].BAD_REQUEST,
-            MESSAGE_STATUS.ERROR,
-          );
+          showErrorMessage();
         }
       });
     });

src/entities/ProductCard/view/ProductCardView.ts

@@ -5,7 +5,8 @@ import LinkModel from '@/shared/Link/model/LinkModel.ts';
 import LoaderModel from '@/shared/Loader/model/LoaderModel.ts';
 import getStore from '@/shared/Store/Store.ts';
 import observeStore, { selectCurrentLanguage } from '@/shared/Store/observer.ts';
-import { LANGUAGE_CHOICE, MORE_TEXT } from '@/shared/constants/buttons.ts';
+import { MORE_TEXT } from '@/shared/constants/buttons.ts';
+import { LANGUAGE_CHOICE } from '@/shared/constants/common.ts';
 import { PAGE_ID } from '@/shared/constants/pages.ts';
 import { LOADER_SIZE } from '@/shared/constants/sizes.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';

src/entities/UserAddress/model/UserAddressModel.ts

@@ -0,0 +1,19 @@
+import UserAddressView from '../view/UserAddressView.ts';
+
+class UserAddressModel {
+  private view = new UserAddressView();
+
+  public getHTML(): HTMLElement {
+    return this.view.getHTML();
+  }
+
+  public hide(): void {
+    this.view.hide();
+  }
+
+  public show(): void {
+    this.view.show();
+  }
+}
+
+export default UserAddressModel;

src/entities/UserAddress/view/UserAddressView.ts

@@ -0,0 +1,72 @@
+import getStore from '@/shared/Store/Store.ts';
+import COUNTRIES_LIST from '@/shared/constants/countriesList.ts';
+import createBaseElement from '@/shared/utils/createBaseElement.ts';
+import findKeyByValue from '@/shared/utils/findKeyByValue.ts';
+import { defaultBillingAddress, defaultShippingAddress } from '@/shared/utils/messageTemplates.ts';
+
+import styles from './userAddressView.module.scss';
+
+class UserAddressView {
+  private addressesWrapper: HTMLDivElement;
+
+  constructor() {
+    this.addressesWrapper = this.createAddresses();
+  }
+
+  private createAddressElement(
+    text: string,
+    tag: keyof HTMLElementTagNameMap = 'li',
+    classes: string[] = [styles.info],
+  ): HTMLElement {
+    return createBaseElement({
+      cssClasses: classes,
+      innerContent: text,
+      tag,
+    });
+  }
+
+  private createAddresses(): HTMLDivElement {
+    const { currentUser } = getStore().getState();
+    if (!currentUser) {
+      return createBaseElement({
+        cssClasses: [styles.addressesWrapper, styles.hidden],
+        tag: 'div',
+      });
+    }
+    const { addresses, defaultBillingAddressId, defaultShippingAddressId, locale } = currentUser;
+
+    this.addressesWrapper = createBaseElement({
+      cssClasses: [styles.addressesWrapper, styles.hidden],
+      tag: 'div',
+    });
+    addresses.forEach((address) => {
+      const country = findKeyByValue(COUNTRIES_LIST[locale], address.country);
+      const standartAddressText = `${address.streetName}, ${address.city}, ${country}, ${address.postalCode}`;
+      let addressText = `${standartAddressText}`;
+
+      if (defaultBillingAddressId?.id === address.id) {
+        addressText = defaultBillingAddress(standartAddressText);
+      }
+      if (defaultShippingAddressId?.id === address.id) {
+        addressText = defaultShippingAddress(standartAddressText);
+      }
+      const addressWrapper = this.createAddressElement(addressText);
+      this.addressesWrapper.append(addressWrapper);
+    });
+    return this.addressesWrapper;
+  }
+
+  public getHTML(): HTMLDivElement {
+    return this.addressesWrapper;
+  }
+
+  public hide(): void {
+    this.addressesWrapper.classList.add(styles.hidden);
+  }
+
+  public show(): void {
+    this.addressesWrapper.classList.remove(styles.hidden);
+  }
+}
+
+export default UserAddressView;

src/entities/UserAddress/view/userAddressView.module.scss

@@ -0,0 +1,69 @@
+.info {
+  grid-column: 2 span;
+  max-width: 100%;
+  word-break: break-all;
+
+  @media (max-width: 810px) {
+    font: var(--medium-font);
+  }
+
+  @media (max-width: 500px) {
+    font: var(--regular-font);
+  }
+}
+
+.addressesWrapper {
+  position: relative;
+  display: grid;
+  align-items: center;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(5, auto);
+  margin: 0 var(--small-offset);
+  padding: var(--small-offset);
+  min-width: 40%;
+  max-width: fit-content;
+  box-shadow: var(--mellow-shadow-100);
+  font: var(--extra-regular-font);
+  letter-spacing: 1px;
+  color: var(--noble-gray-900);
+  background-color: var(--noble-gray-tr-800);
+  gap: var(--small-offset);
+}
+
+.editInfoButton {
+  grid-column: 2 span;
+  grid-row: 5;
+  margin: 0 auto;
+  border-radius: var(--medium-br);
+  padding: calc(var(--small-offset) / 3) var(--small-offset);
+  height: max-content;
+  max-width: max-content;
+  font: var(--regular-font);
+  letter-spacing: 1px;
+  color: var(--white);
+  background-color: var(--steam-green-800);
+  transition:
+    color 0.2s,
+    background-color 0.2s;
+
+  &:focus {
+    background-color: var(--steam-green-700);
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--steam-green-700);
+    }
+  }
+
+  &:disabled {
+    background-color: var(--noble-gray-300);
+    pointer-events: none;
+  }
+}
+
+.hidden {
+  display: none; // TBD check to replace
+  opacity: 0;
+  visibility: hidden;
+}

src/entities/UserInfo/model/UserInfoModel.ts

@@ -0,0 +1,32 @@
+import UserInfoView from '../view/UserInfoView.ts';
+
+class UserInfoModel {
+  private view = new UserInfoView();
+
+  constructor() {
+    this.view.show();
+    this.setEditInfoButtonHandler();
+  }
+
+  private setEditInfoButtonHandler(): boolean {
+    const editInfoButton = this.view.getEditInfoButton();
+    editInfoButton.getHTML().addEventListener('click', () => {
+      // TBD Replace with edit action
+    });
+    return true;
+  }
+
+  public getHTML(): HTMLDivElement {
+    return this.view.getHTML();
+  }
+
+  public hide(): void {
+    this.view.hide();
+  }
+
+  public show(): void {
+    this.view.show();
+  }
+}
+
+export default UserInfoModel;