@licklist/design 0.44.485-dev.2 → 0.44.485-dev.20

package/src/iframe/order-process/components/BookingSummary/types/index.ts

@@ -6,13 +6,13 @@ export const ACCORDION_KEY = "booking-summary";
 
 export type BookingSummaryProps = {
   date: string;
-  menuSteps: MenuStep[];
-  formValues: {
+  menuSteps?: MenuStep[];
+  formValues?: {
     [key: string]: Order;
   };
   totalWithDiscount?: number;
   isNotShownPeopleAmount?: boolean;
-  eventName: string;
+  eventName?: string;
   hasPeopleInput?: boolean;
   transactionFee?: number;
   isFreePayment?: boolean;

package/src/iframe/order-process/components/CalendarStepsForm/CalendarStepsForm.stories.tsx

@@ -425,6 +425,7 @@ export function Default() {
                 menuStepWithVenueMap={MENU_STEPS[0] as any}
                 title="Select a product"
                 activeVenueMapId="7"
+                soldOutProducts={[{ product_id: 148, message: "message" }]}
               />
             }
             rightBlock={

package/src/iframe/order-process/components/CalendarStepsForm/CalendarStepsForm.tsx

@@ -19,6 +19,7 @@ import {
 import { Step } from "@licklist/core/dist/DataMapper/Product/StepDataMapper";
 import { useTranslation } from "react-i18next";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { Category } from "./components/Category";
 import { MenuStep } from "../../../../types";
 import { STEP_FORM_ID } from "../../constants";
@@ -44,6 +45,7 @@ export interface CalendarStepsFormProps {
   onActiveVenueMapChange?: (nextVenueMapId: string) => void;
   title: string;
   menuStepWithVenueMap: Step;
+  soldOutProducts?: ProductQuantityCheckResponse["products"];
 }
 
 export type StepsFormRef = {
@@ -67,6 +69,7 @@ export const CalendarStepsForm = forwardRef<
       title,
       menuStepWithVenueMap,
       onActiveVenueMapChange,
+      soldOutProducts,
     },
     ref
   ) => {
@@ -340,12 +343,14 @@ export const CalendarStepsForm = forwardRef<
                       ref={canvasRef}
                       choosedProductUuids={choosedProductUuids}
                       errorOnChoosedProductUuids={errorOnChoosedProductUuids}
+                      soldOutProducts={soldOutProducts}
                     />
                     <Category
                       productCategories={step?.productCategories}
                       activePointId={activePointId}
                       pointProducts={menuStepWithVenueMap.pointProducts}
                       onCloseModal={onCloseProductModal}
+                      soldOutProducts={soldOutProducts}
                     />
                   </>
                 )}

package/src/iframe/order-process/components/CalendarStepsForm/components/Category.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
+import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { ProductCategory } from "../../../../../types";
 import { CategoryProductModal } from "./CategoryProductModal";
 
@@ -8,6 +9,7 @@ export type CategoryProps = {
   activePointId?: number;
   pointProducts: PointProduct[];
   onCloseModal: () => void;
+  soldOutProducts?: ProductQuantityCheckResponse["products"];
 };
 
 export const Category = ({
@@ -15,6 +17,7 @@ export const Category = ({
   activePointId,
   pointProducts,
   onCloseModal,
+  soldOutProducts,
 }: CategoryProps) => {
   return (
     <>
@@ -31,6 +34,7 @@ export const Category = ({
                     activePointId={activePointId}
                     pointProducts={pointProducts}
                     onCloseModal={onCloseModal}
+                    soldOutProducts={soldOutProducts}
                   />
                 );
               })}

package/src/iframe/order-process/components/CalendarStepsForm/components/CategoryProductModal.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from "react";
 import clsx from "clsx";
 import { Button } from "react-bootstrap";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
+import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { ProductCategory, Product } from "../../../../../types";
 import { CategoryProduct } from "../../CategoryProduct";
 import Icon from "../../../../../static/Icon";
@@ -12,6 +13,7 @@ export type CategoryProductModalProps = {
   category: ProductCategory;
   pointProducts: PointProduct[];
   onCloseModal: () => void;
+  soldOutProducts?: ProductQuantityCheckResponse["products"];
 };
 
 export const CategoryProductModal = ({
@@ -20,6 +22,7 @@ export const CategoryProductModal = ({
   category,
   pointProducts,
   onCloseModal,
+  soldOutProducts,
 }: CategoryProductModalProps) => {
   const activePointProduct = useMemo(
     () =>
@@ -42,6 +45,7 @@ export const CategoryProductModal = ({
         product={product}
         category={category}
         canExpandDescription={false}
+        soldOutProducts={soldOutProducts}
       />
       <div className="close-modal-button">
         <Button

package/src/iframe/order-process/components/Category/Category.tsx

@@ -8,6 +8,7 @@ import { StepsFormProps } from "../StepsForm/StepsForm";
 interface CategoryProps {
   productCategories: ProductCategory[];
   productsWithErrors?: StepsFormProps["productsWithErrors"];
+  soldOutProducts?: StepsFormProps["productsWithErrors"];
   errors?: DeepMap<Record<string, any>, FieldError>;
 }
 
@@ -15,6 +16,7 @@ export function Category({
   productCategories,
   productsWithErrors,
   errors,
+  soldOutProducts,
 }: CategoryProps) {
   return (
     <>
@@ -37,6 +39,7 @@ export function Category({
                     product={product}
                     category={category}
                     productsWithErrors={productsWithErrors}
+                    soldOutProducts={soldOutProducts}
                   />
                 );
               })}

package/src/iframe/order-process/components/CategoryProduct/CategoryProduct.tsx

@@ -15,6 +15,7 @@ interface CategoryProductProps {
   category: ProductCategory;
   canExpandDescription?: boolean;
   productsWithErrors?: StepsFormProps["productsWithErrors"];
+  soldOutProducts?: StepsFormProps["productsWithErrors"];
 }
 
 export const CategoryProduct = ({
@@ -22,6 +23,7 @@ export const CategoryProduct = ({
   category,
   canExpandDescription = true,
   productsWithErrors,
+  soldOutProducts,
 }: CategoryProductProps) => {
   const { formatNumber } = useIntl();
   const { t } = useTranslation(["Design", "Validation"]);
@@ -49,6 +51,16 @@ export const CategoryProduct = ({
     return product.deposit;
   }, [category, product]);
 
+  const checkIfSoldOutProduct = () => {
+    if (!soldOutProducts || product?.isSoldOut) {
+      return undefined;
+    }
+    const error = soldOutProducts.find(
+      (productWithError) => productWithError.product_id === product.id
+    );
+    return !!error?.message;
+  };
+
   useEffect(() => {
     if (!productQuantityError) {
       return;
@@ -136,7 +148,10 @@ export const CategoryProduct = ({
                 productInfo={productInfo}
                 ref={ref}
                 clearErrors={clearErrors}
-                product={product}
+                product={{
+                  ...product,
+                  isSoldOut: product?.isSoldOut || checkIfSoldOutProduct(),
+                }}
                 category={category}
                 invalid={invalid}
                 deposit={deposit}

package/src/iframe/order-process/components/StepsForm/StepsForm.tsx

@@ -32,6 +32,7 @@ export interface StepsFormProps {
   setFormErrors?: (errors: Record<string, any>) => void;
   id?: string;
   productsWithErrors?: ProductQuantityCheckResponse["products"];
+  soldOutProducts?: ProductQuantityCheckResponse["products"];
 }
 
 export type StepsFormRef = {
@@ -49,6 +50,7 @@ export const StepsForm = forwardRef<StepsFormRef, StepsFormProps>(
       setFormErrors,
       id = STEP_FORM_ID,
       productsWithErrors,
+      soldOutProducts,
     },
     ref
   ) => {
@@ -150,6 +152,7 @@ export const StepsForm = forwardRef<StepsFormRef, StepsFormProps>(
                 productCategories={step?.productCategories}
                 productsWithErrors={productsWithErrors}
                 errors={errors}
+                soldOutProducts={soldOutProducts}
               />
 
               {errors[NO_ORDER_ITEMS_ERROR] && (

package/src/iframe/payment/order-items-table/OrderItemsTable.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Meta } from "@storybook/react";
 import { boolean } from "@storybook/addon-knobs";
+import { ORDER_FEE_CHARGE_TYPE_CLIENT } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import { OrderItemsTable } from "./OrderItemsTable";
 
 export default {
@@ -24,6 +25,7 @@ export function Default(args) {
 
 Default.args = {
   order: {
+    feeChargeType: ORDER_FEE_CHARGE_TYPE_CLIENT,
     products: [
       {
         id: 1,

package/src/iframe/payment/order-items-table/hooks/useTableData.tsx

@@ -20,7 +20,7 @@ import {
 import { OrderItemsTableProps, SummaryItem } from "../types";
 
 const CURRENCY_DEFAULT = "GBP";
-const TRANSLATE_KEYS = {
+export const PAYMENT_TYPE_TRANSLATE_KEYS = {
   [PAYMENT_TYPE_NET_PROFIT]: "netAmount",
   [PAYMENT_TYPE_FEE]: "bookeditFee",
   [PAYMENT_TYPE_VAT]: "vat",
@@ -128,7 +128,11 @@ export const useTableData = ({
   };
 
   const paymentNotProcessedSummary = () => {
-    const total = calculateTotalPrice(order.orderProducts);
+    const externalPaymentDetail = paymentDetail
+      ? getExternalPaymentDetail(paymentDetail)
+      : undefined;
+
+    const total = calculateTotalPrice(order, externalPaymentDetail);
 
     const summaryItems: SummaryItem[] = [
       {
@@ -144,7 +148,7 @@ export const useTableData = ({
       });
     }
 
-    if (paymentDetail) {
+    if (externalPaymentDetail) {
       return [...summaryItems, ...getExternalPaymentDetail(paymentDetail)];
     }
 
@@ -152,7 +156,18 @@ export const useTableData = ({
   };
 
   const processedPaymentSummary = () => {
-    const total = calculateTotalPrice(order.orderProducts);
+    const externalPaymentDetail =
+      paymentDetail && !order.payments.length
+        ? getExternalPaymentDetail(paymentDetail)
+        : Object.keys(PAYMENT_TYPE_TRANSLATE_KEYS).map((key) => {
+            return {
+              translateKey: PAYMENT_TYPE_TRANSLATE_KEYS[key],
+              price: getPaymentValueByType(order.payments, key),
+            };
+          });
+
+    const total = calculateTotalPrice(order, externalPaymentDetail);
+
     const totalDiscount = calculateTotalDiscount(order.payments);
     const totalWithDiscount = total - Number(totalDiscount);
     let summaryItems: SummaryItem[] = [
@@ -170,7 +185,7 @@ export const useTableData = ({
     }
 
     if (paymentDetail && !order.payments.length) {
-      return [...summaryItems, ...getExternalPaymentDetail(paymentDetail)];
+      return [...summaryItems, ...externalPaymentDetail];
     }
 
     summaryItems.push({
@@ -180,15 +195,7 @@ export const useTableData = ({
     if (totalWithDiscount <= 0) {
       return summaryItems;
     }
-    summaryItems = [
-      ...summaryItems,
-      ...Object.keys(TRANSLATE_KEYS).map((key) => {
-        return {
-          translateKey: TRANSLATE_KEYS[key],
-          price: getPaymentValueByType(order.payments, key),
-        };
-      }),
-    ];
+    summaryItems = [...summaryItems, ...externalPaymentDetail];
 
     if (totalWithDiscount > order.totalAmount) {
       summaryItems.push({

package/src/iframe/payment/order-items-table/utils/index.ts

@@ -1,13 +1,16 @@
-import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
+import {
+  Order,
+  ORDER_FEE_CHARGE_TYPE_CLIENT,
+} from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
 import { PAYMENT_TYPE_DISCOUNT } from "@licklist/core/dist/DataMapper/Order/PaymentDataMapper";
 import { PaymentDetail } from "@licklist/core/dist/DataMapper/Order/PaymentDetailDataMapper";
+import { PAYMENT_TYPE_TRANSLATE_KEYS } from "../hooks/useTableData";
 
 const TRANSLATE_KEYS = {
   totalAmount: "totalPaid",
   netAmount: "netAmount",
   fee: "bookeditFee",
-  remainingToPay: "remainingToPay",
 };
 
 export enum PAYMENT_TYPE_TITLES {
@@ -16,14 +19,35 @@ export enum PAYMENT_TYPE_TITLES {
   VAT = "VAT",
 }
 
-export const calculateTotalPrice = (orderProducts: Order["orderProducts"]) => {
-  return (
-    orderProducts?.reduce(
+interface ExternalPaymnetDetail {
+  translateKey: string;
+  price: number;
+}
+
+export const calculateTotalPrice = (
+  order: Order,
+  externalPaymentDetails?: ExternalPaymnetDetail[]
+) => {
+  const totalPrice =
+    order?.orderProducts?.reduce(
       (total: number, product) =>
         total + (product?.quantity ?? 1) * product.price,
       0
-    ) ?? 0
-  );
+    ) ?? 0;
+
+  if (
+    order?.feeChargeType !== ORDER_FEE_CHARGE_TYPE_CLIENT ||
+    !externalPaymentDetails
+  ) {
+    return totalPrice;
+  }
+
+  const fee =
+    externalPaymentDetails.find(
+      (externalPayment) =>
+        externalPayment.translateKey === PAYMENT_TYPE_TRANSLATE_KEYS.fee
+    )?.price || 0;
+  return totalPrice + fee;
 };
 
 export const calculateTotalDiscount = (payments: Order["payments"]) => {
@@ -51,21 +75,37 @@ export const getProductQuantityAndPrice = (
 export const getPaymentValueByType = (
   payments: Order["payments"],
   paymentTypeTitle: string
-) => {
+): number => {
+  if (!payments || !payments.length) {
+    return 0;
+  }
   if (paymentTypeTitle === PAYMENT_TYPE_TITLES.FEE) {
     const feeWithoutVatValue =
-      payments.find((payment) => payment.paymentType.title === paymentTypeTitle)
-        ?.amount ?? 0;
+      payments?.reduce((sumOfPayments, payment) => {
+        if (payment.paymentType.title !== PAYMENT_TYPE_TITLES.FEE) {
+          return sumOfPayments;
+        }
+
+        return sumOfPayments + (payment?.amount ?? 0);
+      }, 0) ?? 0;
 
     const vatValue =
-      payments.find(
-        (payment) => payment.paymentType.title === PAYMENT_TYPE_TITLES.VAT
-      )?.amount ?? 0;
+      payments?.reduce((sumOfPayments, payment) => {
+        if (payment.paymentType.title !== PAYMENT_TYPE_TITLES.VAT) {
+          return sumOfPayments;
+        }
+        return sumOfPayments + (payment?.amount ?? 0);
+      }, 0) ?? 0;
     return feeWithoutVatValue + vatValue;
   }
+
   return (
-    payments.find((payment) => payment.paymentType.title === paymentTypeTitle)
-      ?.amount ?? 0
+    payments?.reduce((sumOfPayments, payment) => {
+      if (payment.paymentType.title !== paymentTypeTitle) {
+        return sumOfPayments;
+      }
+      return sumOfPayments + (payment?.amount ?? 0);
+    }, 0) ?? 0
   );
 };
 

package/src/iframe/payment/payment-page/PaymentPage.tsx

@@ -15,6 +15,7 @@ import {
 import { PaymentTimer } from "./PaymentTimer";
 import { Page, PageBody, PageHeader } from "../../page";
 import { BookingSummary, BookingSummaryFooter } from "../../order-process";
+import { cartSumByOrderProducts } from "../../order-process/components/BookingSummary/utils";
 
 export interface PaymentMetadata {
   total: number;
@@ -99,6 +100,17 @@ export const PaymentPage = ({
     );
   }
 
+  const orderTotalAmounByFormValues = cartSumByOrderProducts(
+    Object.values(bookingSummaryProps?.formValues)
+  );
+
+  // User can fill promocode only in iframe appcliation.
+  // It didn't possible via payment link. This check will
+  // be applied when there are no metadata and in case when
+  // orderValues sum is greater than amount in order.
+  const isCalculatedAmountGreaterThanOrderAmount =
+    orderTotalAmounByFormValues > data?.amount;
+
   return (
     <Page
       className="payment_link"
@@ -127,7 +139,7 @@ export const PaymentPage = ({
             bottomBlock={
               <BookingSummaryFooter showButton={false}>
                 <div className="d-flex flex-column justify-content-between">
-                  {paymentMetadata && (
+                  {paymentMetadata ? (
                     <>
                       <SummaryTotalBlock
                         label={t("total")}
@@ -137,12 +149,39 @@ export const PaymentPage = ({
                         label={t("paidSum")}
                         amount={paymentMetadata.paid || 0}
                       />
+                      <SummaryTotalBlock
+                        label={t("remaining")}
+                        amount={
+                          data?.amount +
+                          (bookingSummaryProps?.transactionFee || 0)
+                        }
+                      />
+                    </>
+                  ) : (
+                    <>
+                      {isCalculatedAmountGreaterThanOrderAmount && (
+                        <SummaryTotalBlock
+                          label={t("total")}
+                          amount={
+                            orderTotalAmounByFormValues +
+                            (bookingSummaryProps?.transactionFee || 0)
+                          }
+                        />
+                      )}
+
+                      <SummaryTotalBlock
+                        label={t(
+                          isCalculatedAmountGreaterThanOrderAmount
+                            ? "totalWithDiscount"
+                            : "total"
+                        )}
+                        amount={
+                          data?.amount +
+                          (bookingSummaryProps?.transactionFee || 0)
+                        }
+                      />
                     </>
                   )}
-                  <SummaryTotalBlock
-                    label={t(paymentMetadata ? "remaining" : "total")}
-                    amount={data?.amount || 0}
-                  />
                 </div>
               </BookingSummaryFooter>
             }

package/src/iframe/payment/payment-status-page/PaymentStatusPage.tsx

@@ -9,6 +9,8 @@ import { BookingSummary, BookingSummaryFooter } from "../../order-process";
 import { PaymentStatusHeader } from "../payment-status-header/PaymentStatusHeader";
 import { SummaryTotalBlock } from "../../order-process/components/BookingSummary/components/SummaryTotal";
 import { BookingSummaryProps } from "../../order-process/components/BookingSummary/types";
+import { PaymentMetadata } from "../payment-page/PaymentPage";
+import { cartSumByOrderProducts } from "../../order-process/components/BookingSummary/utils";
 
 export const ORDER_STATUS_FAILED = "failed";
 export const ORDER_STATUS_SUCCESS = "success";
@@ -23,7 +25,6 @@ interface PaymentStatusComponentProps {
   onCloseWindow: () => void;
   onBack?: () => void;
   onTryAgain?: () => void;
-  totalAmount?: number;
   isLoading?: boolean;
   status: OrderStatusPrefix;
   isAppUsingInIframe?: boolean;
@@ -31,6 +32,8 @@ interface PaymentStatusComponentProps {
   EventCardComponent?: ReactNode;
   showCloseButton?: boolean;
   email?: string;
+  totalAmount?: number;
+  paymentMetadata?: PaymentMetadata;
 }
 
 // @TODO In future think, how to reuse this component in Iframe Pending, Success and Failed Pages
@@ -38,7 +41,6 @@ export const PaymentStatusPage = ({
   onCloseWindow,
   onBack,
   onTryAgain,
-  totalAmount,
   isLoading,
   status,
   isAppUsingInIframe,
@@ -46,6 +48,8 @@ export const PaymentStatusPage = ({
   EventCardComponent,
   showCloseButton = false,
   email,
+  totalAmount = 0,
+  paymentMetadata,
 }: PaymentStatusComponentProps) => {
   const { t } = useTranslation("Design");
 
@@ -65,6 +69,20 @@ export const PaymentStatusPage = ({
   if (isLoading) {
     return <LoaderIndicator isLoaded={false} />;
   }
+
+  const orderTotalAmounByFormValues = cartSumByOrderProducts(
+    Object.values(bookingSummaryProps?.formValues)
+  );
+
+  // User can fill promocode only in iframe appcliation.
+  // It didn't possible via payment link. This check will
+  // be applied when there are no metadata and in case when
+  // orderValues sum is greater than amount in order.
+  // For payment status page booking summary props can be empty
+  // so we should also check for them
+  const isCalculatedAmountGreaterThanOrderAmount =
+    bookingSummaryProps && orderTotalAmounByFormValues > totalAmount;
+
   return (
     <Page
       className="payment-status-page"
@@ -98,16 +116,51 @@ export const PaymentStatusPage = ({
           <PageBody.RightBlock
             bottomBlock={
               <BookingSummaryFooter showButton={false}>
-                {bookingSummaryProps?.formValues ? (
-                  <BookingSummary.SummaryTotal
-                    formValues={bookingSummaryProps?.formValues}
-                  />
-                ) : (
-                  <SummaryTotalBlock
-                    label={t("total")}
-                    amount={totalAmount || 0}
-                  />
-                )}
+                <div className="d-flex flex-column justify-content-between">
+                  {paymentMetadata ? (
+                    <>
+                      <SummaryTotalBlock
+                        label={t("total")}
+                        amount={paymentMetadata.total || 0}
+                      />
+                      <SummaryTotalBlock
+                        label={t("paidSum")}
+                        amount={paymentMetadata.paid || 0}
+                      />
+                      <SummaryTotalBlock
+                        label={t("remaining")}
+                        amount={
+                          totalAmount +
+                          (bookingSummaryProps?.transactionFee || 0)
+                        }
+                      />
+                    </>
+                  ) : (
+                    <>
+                      {isCalculatedAmountGreaterThanOrderAmount && (
+                        <SummaryTotalBlock
+                          label={t("total")}
+                          amount={
+                            orderTotalAmounByFormValues +
+                            (bookingSummaryProps?.transactionFee || 0)
+                          }
+                        />
+                      )}
+
+                      <SummaryTotalBlock
+                        label={t(
+                          isCalculatedAmountGreaterThanOrderAmount
+                            ? "totalWithDiscount"
+                            : "total"
+                        )}
+                        amount={
+                          totalAmount +
+                          (bookingSummaryProps?.transactionFee || 0)
+                        }
+                      />
+                    </>
+                  )}
+                </div>
               </BookingSummaryFooter>
             }
           >

package/src/product-set/form/ProductCategoriesControl.tsx

@@ -165,7 +165,10 @@ export function ProductCategoriesControl({
         return sum + Number(product.price) * Number(product.totalQuantity);
       }, 0);
       const quantity = productCategory.products?.reduce((sum, product) => {
-        return sum + Number(product.totalQuantity);
+        const productQuantity = !product.isUnlimited
+          ? Number(product.totalQuantity)
+          : 0;
+        return sum + productQuantity;
       }, 0);
 
       setProductCategoryState((prevState) => ({

package/src/product-set/form/ProductsControl.tsx

@@ -85,11 +85,14 @@ export function ProductsControl({
     trigger,
     setValue,
     watch,
+    getValues,
   } = form;
 
   const productControlFieldName =
     `steps.${stepIndex}.productCategories.${productCategoryIndex}.products` as const;
 
+  const productPointsKey = `steps.${stepIndex}.pointProducts` as const;
+
   const { fields, append, remove, move } = useFieldArray({
     name: productControlFieldName,
     control,
@@ -156,6 +159,22 @@ export function ProductsControl({
     });
   };
 
+  const onProductRemove = (index: number) => {
+    const currentProduct = getValues(
+      `${productControlFieldName}.${index}` as const
+    );
+
+    const currentPointProducts = getValues(productPointsKey);
+
+    setValue(
+      productPointsKey,
+      currentPointProducts?.filter(
+        (product) => product.productUuid !== currentProduct.uuid
+      ) || []
+    );
+    remove(index);
+  };
+
   return (
     <>
       <SortableTree
@@ -219,7 +238,7 @@ export function ProductsControl({
                     categoryType={categoryType}
                   />
                 }
-                onDelete={() => remove(index)}
+                onDelete={() => onProductRemove(index)}
                 validate={() => trigger(`${productControlFieldName}.${index}`)}
                 // preItem={<Popover className="d-none d-sm-block" />}
               >