Merge branch 'sprint-4' into feat(RSS-ECOMM-4_33)/implementEditingAdd…

…ress
stardustmeg · May 29, 2024 · 4433ae1 · 4433ae1
2 parents 45a607a + 20fedc3
commit 4433ae1
Show file tree

Hide file tree

Showing 32 changed files with 722 additions and 246 deletions.
diff --git a/package.json b/package.json
@@ -64,8 +64,10 @@
     "@commercetools/sdk-client-v2": "^2.5.0",
     "@commercetools/sdk-middleware-auth": "^7.0.1",
     "@commercetools/sdk-middleware-http": "^7.0.4",
+    "@types/hammerjs": "^2.0.45",
     "@types/js-cookie": "^3.0.6",
     "autoprefixer": "^10.4.19",
+    "hammerjs": "^2.0.8",
     "isomorphic-fetch": "^3.0.0",
     "js-cookie": "^3.0.5",
     "materialize-css": "^1.0.0-rc.2",

diff --git a/src/app/Router/model/RouterModel.ts b/src/app/Router/model/RouterModel.ts
@@ -1,5 +1,6 @@
 import type { PageParams, PagesType } from '@/shared/types/page';
 
+import getStore from '@/shared/Store/Store.ts';
 import { PAGE_ID } from '@/shared/constants/pages.ts';
 import { isValidPath, isValidState } from '@/shared/types/validation/paths.ts';
 import formattedText from '@/shared/utils/formattedText.ts';
@@ -118,14 +119,16 @@ class RouterModel {
 
   public navigateTo(path: string): void {
     const currentPage = path.split(DEFAULT_SEGMENT)[PATH_SEGMENTS_TO_KEEP] + DEFAULT_SEGMENT || PAGE_ID.DEFAULT_PAGE;
-    this.checkPageAndParams(currentPage, path)
-      .then((check) => {
-        if (check) {
-          this.routes.get(currentPage)?.(check.params).catch(showErrorMessage);
-          history.pushState({ path }, '', `/${path}`);
-        }
-      })
-      .catch(showErrorMessage);
+    if (currentPage !== getStore().getState().currentPage) {
+      this.checkPageAndParams(currentPage, path)
+        .then((check) => {
+          if (check) {
+            this.routes.get(currentPage)?.(check.params).catch(showErrorMessage);
+          }
+        })
+        .catch(showErrorMessage);
+    }
+    history.pushState({ path }, '', `/${path}`);
   }
 }
 

diff --git a/src/app/styles/variables.scss b/src/app/styles/variables.scss
@@ -23,7 +23,7 @@
   // shadows
   --mellow-shadow-050: 0 0 20px rgb(0 0 0 / 6%);
   --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,
+  --mellow-shadow-200: hsl(0deg 0% 100% / 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,

diff --git a/src/features/Pagination/view/PaginationView.ts b/src/features/Pagination/view/PaginationView.ts
@@ -101,11 +101,8 @@ class PaginationView {
   }
 
   private switchStateNavigationButtons(page: number): void {
-    const prevButton = this.prevPageButton.getHTML();
-    const nextButton = this.nextPageButton.getHTML();
-
-    prevButton.disabled = page === DEFAULT_PAGE;
-    nextButton.disabled = page === this.pageButtons.length;
+    this.prevPageButton.getHTML().disabled = page === DEFAULT_PAGE;
+    this.nextPageButton.getHTML().disabled = page === this.pageButtons.length;
   }
 
   public getHTML(): HTMLDivElement {

diff --git a/src/features/ProductFilters/model/ProductFiltersModel.ts b/src/features/ProductFilters/model/ProductFiltersModel.ts
@@ -12,10 +12,6 @@ class ProductFiltersModel {
   public getView(): ProductFiltersView {
     return this.view;
   }
-
-  public updateParams(params: ProductFiltersParams | null): void {
-    this.view.updateParams(params);
-  }
 }
 
 export default ProductFiltersModel;
diff --git a/src/features/ProductFilters/view/ProductFiltersView.ts b/src/features/ProductFilters/view/ProductFiltersView.ts
@@ -1,4 +1,4 @@
-import type { SizeProductCount } from '@/shared/API/types/type';
+import type { PriceRange, SizeProductCount } from '@/shared/API/types/type';
 import type { Category } from '@/shared/types/product';
 import type ProductFiltersParams from '@/shared/types/productFilters';
 
@@ -629,17 +629,6 @@ class ProductFiltersView {
 
   public updateParams(params: ProductFiltersParams | null): void {
     this.params = params;
-    this.priceSlider.updateOptions(
-      {
-        range: { max: params?.priceRange?.max ?? 0, min: params?.priceRange?.min ?? 0 },
-        start: [params?.priceRange?.min ?? 0, params?.priceRange?.max ?? 0],
-      },
-      true,
-    );
-    const fromInput = this.priceInputs.get(PRICE_RANGE_LABEL[getStore().getState().currentLanguage].FROM);
-    const toInput = this.priceInputs.get(PRICE_RANGE_LABEL[getStore().getState().currentLanguage].TO);
-    fromInput?.setValue(this.params?.priceRange?.min.toFixed(2) ?? '');
-    toInput?.setValue(this.params?.priceRange?.max.toFixed(2) ?? '');
 
     this.categoryCountSpan.forEach((span) => {
       const currentSpan = span;
@@ -651,6 +640,23 @@ class ProductFiltersView {
     });
     this.redrawProductsCount();
   }
+
+  public updatePriceRange(params: PriceRange): void {
+    if (this.params) {
+      this.params.priceRange = params;
+    }
+    this.priceSlider.updateOptions(
+      {
+        range: { max: params.max ?? 0, min: params.min ?? 0 },
+        start: [params.min ?? 0, params.max ?? 0],
+      },
+      true,
+    );
+    const fromInput = this.priceInputs.get(PRICE_RANGE_LABEL[getStore().getState().currentLanguage].FROM);
+    const toInput = this.priceInputs.get(PRICE_RANGE_LABEL[getStore().getState().currentLanguage].TO);
+    fromInput?.setValue(params.min.toFixed(2) ?? '');
+    toInput?.setValue(params.max.toFixed(2) ?? '');
+  }
 }
 
 export default ProductFiltersView;
diff --git a/src/features/ProductSorts/view/ProductSortsView.ts b/src/features/ProductSorts/view/ProductSortsView.ts
@@ -7,7 +7,6 @@ import { DATA_KEYS } from '@/shared/constants/common.ts';
 import { SEARCH_PARAMS_FIELD } from '@/shared/constants/product.ts';
 import { SORTING_ID, TEXT } from '@/shared/constants/sorting.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
-import { isKeyOfSortField } from '@/shared/utils/isKeyOf.ts';
 
 import styles from './productSortsView.module.scss';
 
@@ -47,26 +46,20 @@ class ProductSortsView {
   private createCurrentSortingSpan(): HTMLSpanElement {
     const selectedSorting = RouterModel.getSearchParams().get(SEARCH_PARAMS_FIELD.FIELD);
 
-    const upperText = selectedSorting
-      ? selectedSorting.toUpperCase()
-      : TEXT[getStore().getState().currentLanguage].DEFAULT.toUpperCase();
-    if (isKeyOfSortField(upperText)) {
-      this.currentSortingSpan = createBaseElement({
-        cssClasses: [styles.currentSortingSpan],
-        innerContent: TEXT[getStore().getState().currentLanguage][upperText],
-        tag: 'span',
-      });
-    }
+    this.currentSortingSpan = createBaseElement({
+      cssClasses: [styles.currentSortingSpan],
+      innerContent: selectedSorting
+        ? selectedSorting.toUpperCase()
+        : TEXT[getStore().getState().currentLanguage].DEFAULT.toUpperCase(),
+      tag: 'span',
+    });
 
     observeStore(selectCurrentLanguage, () => {
       const selectedSorting = RouterModel.getSearchParams().get(SEARCH_PARAMS_FIELD.FIELD);
-      const upperText = selectedSorting
+
+      this.currentSortingSpan.innerText = selectedSorting
         ? selectedSorting.toUpperCase()
         : TEXT[getStore().getState().currentLanguage].DEFAULT.toUpperCase();
-
-      if (isKeyOfSortField(upperText)) {
-        this.currentSortingSpan.innerText = TEXT[getStore().getState().currentLanguage][upperText];
-      }
     });
 
     return this.currentSortingSpan;

diff --git a/src/pages/CartPage/model/CartPageModel.ts b/src/pages/CartPage/model/CartPageModel.ts
@@ -4,33 +4,92 @@ import type { Page } from '@/shared/types/page.ts';
 import getCartModel from '@/shared/API/cart/model/CartModel.ts';
 import getStore from '@/shared/Store/Store.ts';
 import { setCurrentPage } from '@/shared/Store/actions.ts';
+import observeStore, { selectCurrentLanguage } from '@/shared/Store/observer.ts';
 import { PAGE_ID } from '@/shared/constants/pages.ts';
 import showErrorMessage from '@/shared/utils/userMessage.ts';
 import ProductOrderModel from '@/widgets/ProductOrder/model/ProductOrderModel.ts';
 
 import CartPageView from '../view/CartPageView.ts';
 
 class CartPageModel implements Page {
+  private addDiscountHandler = async (discountCode: string): Promise<void> => {
+    if (discountCode.trim()) {
+      this.cart = await getCartModel().addCoupon(discountCode);
+      this.view.updateTotal(this.cart);
+
+      getCartModel()
+        .addCoupon(discountCode)
+        .then((cart) => {
+          this.cart = cart;
+          this.view.updateTotal(this.cart);
+        })
+        .catch(showErrorMessage);
+    }
+  };
+
   private cart: Cart | null = null;
 
+  private changeProductHandler = (cart: Cart): void => {
+    this.cart = cart;
+    this.productsItem = this.productsItem.filter((productItem) => {
+      const searchEl = this.cart?.products.find((item) => item.lineItemId === productItem.getProduct().lineItemId);
+      if (!searchEl) {
+        productItem.getHTML().remove();
+        return false;
+      }
+      return true;
+    });
+
+    if (!this.productsItem.length) {
+      this.view.renderEmpty();
+    }
+    this.view.updateTotal(this.cart);
+  };
+
+  private clearCart = async (): Promise<void> => {
+    this.cart = await getCartModel().clearCart();
+    this.productsItem = this.productsItem.filter((productItem) => {
+      const searchEl = this.cart?.products.find((item) => item.lineItemId === productItem.getProduct().lineItemId);
+      if (!searchEl) {
+        productItem.getHTML().remove();
+        return false;
+      }
+      return true;
+    });
+    this.renderCart();
+  };
+
   private productsItem: ProductOrderModel[] = [];
 
   private view: CartPageView;
 
   constructor(parent: HTMLDivElement) {
-    this.view = new CartPageView(parent);
+    this.view = new CartPageView(parent, this.clearCart, this.addDiscountHandler);
 
     this.init().catch(showErrorMessage);
   }
 
   private async init(): Promise<void> {
     getStore().dispatch(setCurrentPage(PAGE_ID.CART_PAGE));
     this.cart = await getCartModel().addProductInfo();
-    this.cart.products.forEach((product) => {
-      this.productsItem.push(new ProductOrderModel(product));
-    });
+    this.renderCart();
+    observeStore(selectCurrentLanguage, () => this.view.updateLanguage());
+  }
+
+  private renderCart(): void {
+    if (this.cart) {
+      this.cart.products.forEach((product) => {
+        this.productsItem.push(new ProductOrderModel(product, this.changeProductHandler));
+      });
 
-    this.view.renderCart(this.productsItem);
+      if (this.productsItem.length) {
+        this.view.renderCart(this.productsItem);
+        this.view.updateTotal(this.cart);
+      } else {
+        this.view.renderEmpty();
+        this.view.updateTotal(this.cart);
+      }
+    }
   }
 
   public getHTML(): HTMLDivElement {