chore: merge sprint-5 into fix(RSS-ECOMM-5_11)/styles

src/app/App/model/AppModel.ts

@@ -71,6 +71,10 @@ class AppModel {
         const { default: UserProfilePageModel } = await import('@/pages/UserProfilePage/model/UserProfilePageModel.ts');
         return new UserProfilePageModel(this.appView.getHTML());
       },
+      [PAGE_ID.WISHLIST_PAGE]: async (): Promise<Page> => {
+        const { default: WishlistPageModel } = await import('@/pages/WishlistPage/model/WishlistPageModel.ts');
+        return new WishlistPageModel(this.appView.getHTML());
+      },
     };
 
     const routes = new Map<string, (params: PageParams) => Promise<Page>>();

src/app/Router/model/RouterModel.ts

@@ -102,7 +102,7 @@ class RouterModel {
 
     return {
       hasRoute,
-      params: { [currentPage.slice(PATH_SEGMENTS_TO_KEEP)]: { id } },
+      params: { [currentPage]: { id } },
     };
   }
 

src/entities/Navigation/view/NavigationView.ts

@@ -1,6 +1,7 @@
 import LinkModel from '@/shared/Link/model/LinkModel.ts';
 import getStore from '@/shared/Store/Store.ts';
-import { PAGE_ID, PAGE_LINK_TEXT, PAGE_LINK_TEXT_KEYS } from '@/shared/constants/pages.ts';
+import { PAGE_LINK_TEXT, PAGE_LINK_TEXT_KEYS } from '@/shared/constants/links.ts';
+import { PAGE_ID } from '@/shared/constants/pages.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 import observeCurrentLanguage from '@/shared/utils/observeCurrentLanguage.ts';
 

src/entities/ProductCard/model/ProductCardModel.ts

@@ -8,8 +8,7 @@ import getCartModel from '@/shared/API/cart/model/CartModel.ts';
 import modal from '@/shared/Modal/model/ModalModel.ts';
 import getStore from '@/shared/Store/Store.ts';
 import { LANGUAGE_CHOICE } from '@/shared/constants/common.ts';
-import { PAGE_ID } from '@/shared/constants/pages.ts';
-import { buildPathName } from '@/shared/utils/buildPathname.ts';
+import * as buildPath from '@/shared/utils/buildPathname.ts';
 import { productAddedToCartMessage } from '@/shared/utils/messageTemplates.ts';
 import { showErrorMessage, showSuccessMessage } from '@/shared/utils/userMessage.ts';
 import ProductInfoModel from '@/widgets/ProductInfo/model/ProductInfoModel.ts';
@@ -34,7 +33,7 @@ class ProductCardModel {
     this.currentSize = currentSize ?? this.params.variant[0].size;
     this.currentVariant = this.params.variant.find(({ size }) => size === currentSize) ?? this.params.variant[0];
     this.view = new ProductCardView(params, currentSize);
-    this.price = new ProductPriceModel(this.currentVariant);
+    this.price = new ProductPriceModel({ new: this.currentVariant.discount, old: this.currentVariant.price });
     this.wishlistButton = new WishlistButtonModel(this.params);
     this.init(cart);
   }
@@ -62,10 +61,9 @@ class ProductCardModel {
     const goDetailsPageLink = this.view.getGoDetailsPageLink();
     goDetailsPageLink.getHTML().addEventListener('click', (event) => {
       event.preventDefault();
-      const path = buildPathName(PAGE_ID.PRODUCT_PAGE, this.params.key, {
+      const path = buildPath.productPathWithIDAndQuery(this.params.key, {
         size: [this.currentSize ?? this.params.variant[0].size],
       });
-
       RouterModel.getInstance().navigateTo(path);
     });
   }

src/entities/ProductCard/view/ProductCardView.ts

@@ -7,11 +7,10 @@ import getStore from '@/shared/Store/Store.ts';
 import observeStore, { selectCurrentLanguage } from '@/shared/Store/observer.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 { PRODUCT_INFO_TEXT } from '@/shared/constants/product.ts';
 import { LOADER_SIZE } from '@/shared/constants/sizes.ts';
 import SVG_DETAILS from '@/shared/constants/svg.ts';
-import { buildPathName } from '@/shared/utils/buildPathname.ts';
+import * as buildPath from '@/shared/utils/buildPathname.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 import createSVGUse from '@/shared/utils/createSVGUse.ts';
 
@@ -135,9 +134,7 @@ class ProductCardView {
   }
 
   private createGoDetailsPageLink(): LinkModel {
-    const href = `${buildPathName(PAGE_ID.PRODUCT_PAGE, this.params.key, {
-      size: [this.currentSize ?? this.params.variant[0].size],
-    })}`;
+    const href = `${buildPath.productPathWithIDAndQuery(this.params.key, { size: [this.currentSize ?? this.params.variant[0].size] })}`;
 
     this.goDetailsPageLink = new LinkModel({
       attrs: {

src/entities/ProductCard/view/productCardView.module.scss

@@ -135,6 +135,7 @@
   width: 100%;
   max-width: 90%;
   font: var(--regular-font);
+  line-height: 150%;
   letter-spacing: var(--one);
   text-align: left;
   text-overflow: ellipsis;

src/entities/ProductPrice/model/ProductPriceModel.ts

@@ -1,12 +1,10 @@
-import type { Variant } from '@/shared/types/product.ts';
-
 import ProductPriceView from '../view/ProductPriceView.ts';
 
 class ProductPriceModel {
   private view: ProductPriceView;
 
-  constructor(currentVariant: Variant) {
-    this.view = new ProductPriceView(currentVariant);
+  constructor(params: { new: number; old: number }) {
+    this.view = new ProductPriceView(params);
     this.init();
   }
 
@@ -15,6 +13,10 @@ class ProductPriceModel {
   public getHTML(): HTMLDivElement {
     return this.view.getHTML();
   }
+
+  public updatePrice(params: { new: number; old: number }): void {
+    this.view.updatesPrice(params);
+  }
 }
 
 export default ProductPriceModel;

src/entities/ProductPrice/view/ProductPriceView.ts

@@ -1,36 +1,32 @@
-import type { Variant } from '@/shared/types/product';
-
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 
 import './productPriceView.scss';
 
 class ProductPriceView {
   private basicPrice: HTMLSpanElement;
 
-  private currentVariant: Variant;
-
   private oldPrice: HTMLSpanElement;
 
+  private params: { new: number; old: number };
+
   private view: HTMLDivElement;
 
-  constructor(currentVariant: Variant) {
-    this.currentVariant = currentVariant;
+  constructor(params: { new: number; old: number }) {
+    this.params = params;
     this.basicPrice = this.createBasicPrice();
     this.oldPrice = this.createOldPrice();
     this.view = this.createHTML();
   }
 
   private createBasicPrice(): HTMLSpanElement {
-    const innerContent = this.currentVariant.discount
-      ? `$${this.currentVariant.discount.toFixed(2)}`
-      : `$${this.currentVariant.price?.toFixed(2)}`;
+    const innerContent = this.getBasePrice(); // this.params.new ? `$${this.params.new.toFixed(2)}` : `$${this.params.old?.toFixed(2)}`;
     this.basicPrice = createBaseElement({
       cssClasses: ['basicPrice'],
       innerContent,
       tag: 'span',
     });
 
-    if (!this.currentVariant.discount) {
+    if (!this.params.new) {
       this.basicPrice.classList.add('gray');
     }
 
@@ -48,7 +44,7 @@ class ProductPriceView {
   }
 
   private createOldPrice(): HTMLSpanElement {
-    const innerContent = this.currentVariant.discount ? `$${this.currentVariant.price?.toFixed(2)}` : '';
+    const innerContent = this.getOldPrice(); // this.params.new ? `$${this.params.old.toFixed(2)}` : '';
     this.oldPrice = createBaseElement({
       cssClasses: ['oldPrice'],
       innerContent,
@@ -58,9 +54,28 @@ class ProductPriceView {
     return this.oldPrice;
   }
 
+  private getBasePrice(): string {
+    return this.params.new ? `$${this.params.new.toFixed(2)}` : `$${this.params.old?.toFixed(2)}`;
+  }
+
+  private getOldPrice(): string {
+    return this.params.new ? `$${this.params.old.toFixed(2)}` : '';
+  }
+
   public getHTML(): HTMLDivElement {
     return this.view;
   }
+
+  public updatesPrice(params: { new: number; old: number }): void {
+    this.params = params;
+    this.basicPrice.textContent = this.getBasePrice();
+    this.oldPrice.textContent = this.getOldPrice();
+    if (!this.params.new) {
+      this.basicPrice.classList.add('gray');
+    } else {
+      this.basicPrice.classList.remove('gray');
+    }
+  }
 }
 
 export default ProductPriceView;

src/features/Breadcrumbs/model/BreadcrumbsModel.ts

@@ -1,17 +1,29 @@
-import type { BreadCrumbLink } from '@/shared/types/link.ts';
+import type { BreadcrumbLink } from '@/shared/types/link.ts';
 
 import BreadcrumbsView from '../view/BreadcrumbsView.ts';
 
 class BreadcrumbsModel {
+  private breadcrumbLinksData: BreadcrumbLink[] = [];
+
   private view: BreadcrumbsView;
 
-  constructor(navigationLinks: BreadCrumbLink[]) {
-    this.view = new BreadcrumbsView(navigationLinks);
+  constructor() {
+    this.view = new BreadcrumbsView(this.breadcrumbLinksData);
+  }
+
+  public addBreadcrumbLinks(linkData: BreadcrumbLink[]): void {
+    this.breadcrumbLinksData.push(...linkData);
+    this.view.drawLinks();
   }
 
   public getHTML(): HTMLDivElement {
     return this.view.getHTML();
   }
+
+  public removeBreadcrumbLink(linkData: BreadcrumbLink): void {
+    this.breadcrumbLinksData = this.breadcrumbLinksData.filter((link) => link !== linkData);
+    this.view.drawLinks();
+  }
 }
 
 export default BreadcrumbsModel;

src/features/Breadcrumbs/view/BreadcrumbsView.ts

@@ -1,4 +1,4 @@
-import type { BreadCrumbLink } from '@/shared/types/link';
+import type { BreadcrumbLink } from '@/shared/types/link';
 
 import RouterModel from '@/app/Router/model/RouterModel.ts';
 import LinkModel from '@/shared/Link/model/LinkModel.ts';
@@ -10,52 +10,53 @@ import styles from './breadcrumbsView.module.scss';
 const DELIMITER = '>';
 
 class BreadcrumbsView {
+  private breadcrumbLinkData: BreadcrumbLink[] = [];
+
   private view: HTMLDivElement;
 
-  constructor(navigationLinks: BreadCrumbLink[]) {
-    this.view = this.createHTML(navigationLinks);
+  constructor(breadcrumbLinkData: BreadcrumbLink[]) {
+    this.breadcrumbLinkData = breadcrumbLinkData;
+    this.view = this.createHTML();
   }
 
-  private createHTML(navigationLinks: BreadCrumbLink[]): HTMLDivElement {
+  private createHTML(): HTMLDivElement {
     this.view = createBaseElement({
       cssClasses: [styles.breadcrumbs],
       tag: 'div',
     });
 
-    navigationLinks.forEach((linkParams) => {
-      this.createLink(linkParams).getHTML();
-    });
-
-    this.view.lastChild?.remove();
-    this.view.lastElementChild?.classList.add(styles.active);
+    this.drawLinks();
 
     return this.view;
   }
 
-  private createLink(linkParams: BreadCrumbLink): LinkModel {
-    const link = new LinkModel({
-      attrs: {
-        href: linkParams.link,
-      },
-      classes: [styles.link],
-      text: formattedText(linkParams.name),
-    });
-
-    link.getHTML().addEventListener('click', (event) => {
-      event.preventDefault();
-      RouterModel.getInstance().navigateTo(linkParams.link);
-    });
-
-    const delimiter = createBaseElement({
-      cssClasses: [styles.delimiter],
-      innerContent: DELIMITER,
-      tag: 'span',
+  public drawLinks(): void {
+    this.view.innerHTML = '';
+    this.breadcrumbLinkData.forEach((linkParams) => {
+      const link = new LinkModel({
+        attrs: {
+          href: linkParams.link,
+        },
+        classes: [styles.link],
+        text: formattedText(linkParams.name),
+      });
+
+      link.getHTML().addEventListener('click', (event) => {
+        event.preventDefault();
+        RouterModel.getInstance().navigateTo(linkParams.link);
+      });
+
+      const delimiter = createBaseElement({
+        cssClasses: [styles.delimiter],
+        innerContent: DELIMITER,
+        tag: 'span',
+      });
+
+      this.view.append(link.getHTML(), delimiter);
     });
 
-    this.view.append(link.getHTML());
-    this.view.append(delimiter);
-
-    return link;
+    this.view.lastChild?.remove();
+    this.view.lastElementChild?.classList.add(styles.active);
   }
 
   public getHTML(): HTMLDivElement {

src/features/WishlistButton/model/WishlistButtonModel.ts

@@ -3,8 +3,10 @@ import type { Product } from '@/shared/types/product.ts';
 import type { ShoppingList, ShoppingListProduct } from '@/shared/types/shopping-list.ts';
 
 import getShoppingListModel from '@/shared/API/shopping-list/model/ShoppingListModel.ts';
+import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts';
 import getStore from '@/shared/Store/Store.ts';
 import { LANGUAGE_CHOICE } from '@/shared/constants/common.ts';
+import MEDIATOR_EVENT from '@/shared/constants/events.ts';
 import { productAddedToWishListMessage, productRemovedFromWishListMessage } from '@/shared/utils/messageTemplates.ts';
 import { showErrorMessage, showSuccessMessage } from '@/shared/utils/userMessage.ts';
 
@@ -30,6 +32,7 @@ class WishlistButtonModel {
           ),
         );
         this.view.switchStateWishListButton(true);
+        EventMediatorModel.getInstance().notify(MEDIATOR_EVENT.REDRAW_WISHLIST, '');
       })
       .catch(showErrorMessage);
   }
@@ -44,6 +47,7 @@ class WishlistButtonModel {
           ),
         );
         this.view.switchStateWishListButton(false);
+        EventMediatorModel.getInstance().notify(MEDIATOR_EVENT.REDRAW_WISHLIST, '');
       })
       .catch(showErrorMessage);
   }

src/features/WishlistButton/view/wishlistButtonView.module.scss

@@ -22,10 +22,10 @@
 
   @media (hover: hover) {
     &:hover {
-      outline: calc(var(--one) * 1.5) solid var(--red-power-600);
+      outline: calc(var(--one) * 1.5) solid var(--steam-green-800);
 
       svg {
-        fill: var(--red-power-600);
+        fill: var(--steam-green-800);
       }
     }
   }
@@ -44,9 +44,9 @@
 }
 
 .inWishList {
-  outline: calc(var(--one) * 1.5) solid var(--red-power-600);
+  outline: calc(var(--one) * 1.5) solid var(--steam-green-800);
 
   svg {
-    fill: var(--red-power-600);
+    fill: var(--steam-green-800);
   }
 }