feat(RSS-ECOMM-4_10): implement cart page

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",

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,

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 {