feat(RSS-ECOMM-4_95): add confirm and link

src/pages/CartPage/view/CartPageView.ts

@@ -4,9 +4,12 @@ import type { languageVariants } from '@/shared/types/common';
 import type ProductOrderModel from '@/widgets/ProductOrder/model/ProductOrderModel';
 
 import RouterModel from '@/app/Router/model/RouterModel.ts';
+import ConfirmModel from '@/shared/Confirm/model/ConfirmModel.ts';
 import InputModel from '@/shared/Input/model/InputModel.ts';
 import LinkModel from '@/shared/Link/model/LinkModel.ts';
+import modal from '@/shared/Modal/model/ModalModel.ts';
 import getStore from '@/shared/Store/Store.ts';
+import { USER_MESSAGE } from '@/shared/constants/confirmUserMessage.ts';
 import { INPUT_TYPE } from '@/shared/constants/forms.ts';
 import { PAGE_ID } from '@/shared/constants/pages.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
@@ -218,7 +221,12 @@ class CartPageView {
     this.textElement.push({ element: this.clear.getHTML(), textItem: TITLE.CLEAR });
     this.clear.getHTML().addEventListener('click', (event) => {
       event.preventDefault();
-      this.clearCallback();
+      const confirmModel = new ConfirmModel(
+        () => this.clearCallback(),
+        USER_MESSAGE[getStore().getState().currentLanguage].CLEAR_CART,
+      );
+      modal.setContent(confirmModel.getHTML());
+      modal.show();
     });
     tdDelete.append(this.clear.getHTML());
     return tdDelete;

src/shared/API/cart/model/CartModel.ts

@@ -33,10 +33,13 @@ export class CartModel {
 
   private cart: Cart | null = null;
 
+  private isSetAnonymousId = false;
+
   private root: CartApi;
 
   constructor() {
     this.root = getCartApi();
+    this.getCart().catch(showErrorMessage);
   }
 
   private adaptCart(data: CartResponse): Cart {
@@ -98,13 +101,15 @@ export class CartModel {
     const data = await this.root.getAnonymCart(anonymousCartId);
     if (!data.body.customerId) {
       this.cart = this.getCartFromData(data);
-      if (data.body.anonymousId !== anonymousId) {
+      const cartAnonymId = data.body.anonymousId;
+      if (cartAnonymId !== anonymousId && !this.isSetAnonymousId) {
+        this.isSetAnonymousId = true;
         const actions: CartSetAnonymousIdAction = {
           action: ACTIONS.setAnonymousId,
           anonymousId,
         };
-        const data = await this.root.setAnonymousId(this.cart, actions);
-        this.cart = this.getCartFromData(data);
+        const dataSetId = await this.root.setAnonymousId(this.cart, actions);
+        this.cart = this.getCartFromData(dataSetId);
       }
     }
 
@@ -256,6 +261,9 @@ export class CartModel {
     if (!this.cart) {
       const { anonymousCartId, anonymousId } = getStore().getState();
       if (anonymousCartId && anonymousId) {
+        // const data = await this.root.getAnonymCart(anonymousCartId);
+        // this.cart = this.getCartFromData(data);
+
         this.cart = await this.getAnonymousCart(anonymousCartId, anonymousId);
       }
       if (!this.cart) {

src/shared/constants/confirmUserMessage.ts

@@ -1,9 +1,11 @@
 export const USER_MESSAGE = {
   en: {
+    CLEAR_CART: 'Are you sure you want to clear the cart?',
     CONFIRM: 'Are you sure you want to proceed?',
     DELETE_ADDRESS: 'Are you sure you want to delete this address?',
   },
   ru: {
+    CLEAR_CART: 'Вы уверены, что хотите очистить корзину?',
     CONFIRM: 'Вы уверены, что хотите продолжить?',
     DELETE_ADDRESS: 'Вы уверены, что хотите удалить этот адрес?',
   },

src/widgets/ProductOrder/view/ProductOrderView.ts

@@ -2,10 +2,13 @@ import type { LanguageChoiceType } from '@/shared/constants/common.ts';
 import type { CartProduct } from '@/shared/types/cart';
 import type { languageVariants } from '@/shared/types/common';
 
+import LinkModel from '@/shared/Link/model/LinkModel.ts';
 import getStore from '@/shared/Store/Store.ts';
 import { LANGUAGE_CHOICE, TABLET_WIDTH } from '@/shared/constants/common.ts';
+import { PAGE_ID } from '@/shared/constants/pages.ts';
 import SVG_DETAILS from '@/shared/constants/svg.ts';
 import { CartActive } from '@/shared/types/cart.ts';
+import { buildPathName } from '@/shared/utils/buildPathname.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 import createSVGUse from '@/shared/utils/createSVGUse.ts';
 import Hammer from 'hammerjs';
@@ -121,10 +124,20 @@ class ProductOrderView {
 
   private createImgCell(): HTMLTableCellElement {
     const tdImage = createBaseElement({ cssClasses: [styles.td, styles.imgCell], tag: 'td' });
+    const href = `${buildPathName(PAGE_ID.PRODUCT_PAGE, this.productItem.key, {
+      size: [this.productItem.size],
+    })}`;
+    const link = new LinkModel({
+      attrs: {
+        href,
+      },
+      classes: [styles.goDetailsPageLink],
+    });
     const img = createBaseElement({ cssClasses: [styles.img], tag: 'img' });
     img.src = this.productItem.images;
     img.alt = this.productItem.name[Number(getStore().getState().currentLanguage === LANGUAGE_CHOICE.RU)].value;
-    tdImage.append(img);
+    link.getHTML().append(img);
+    tdImage.append(link.getHTML());
     return tdImage;
   }