@licklist/design 0.44.485-dev.4 → 0.44.485-dev.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.44.485-dev.4",
+  "version": "0.44.485-dev.41",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -53,9 +53,9 @@
     "@fortawesome/free-brands-svg-icons": "5.15.2",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.9",
-    "@licklist/core": "0.15.x",
+    "@licklist/core": ">=0.15.27-dev.0 < 0.15.27",
     "@licklist/eslint-config": "0.3.4",
-    "@licklist/plugins": "0.20.x",
+    "@licklist/plugins": ">=0.20.133-dev.5 < 0.20.133",
     "@mdx-js/react": "1.6.22",
     "@react-aria/utils": "3.9.0",
     "@rollup/plugin-image": "2.0.6",
@@ -187,7 +187,7 @@
     "style-loader": "2.0.0",
     "ts-jest": "26.5.2",
     "twemoji-parser": "14.0.0",
-    "typescript": "4.5.5",
+    "typescript": "4.9.5",
     "url-loader": "4.1.1",
     "use-debounce": "7.0.1"
   },

package/src/customers/components/filter/CustomerFilter.stories.tsx

@@ -9,8 +9,7 @@ export default {
 
 export const Default: Story<CustomerFilterProps> = () => {
   const [values, setValues] = useState({
-    first_name: "",
-    last_name: "",
+    name: "",
     email: "",
     phone: "",
   });

package/src/customers/components/filter/CustomerFilter.tsx

@@ -4,15 +4,13 @@ import clsx from "clsx";
 import { TextField } from "../../../static/TextField";
 
 type CustomerFilterValues = {
-  first_name: string;
-  last_name: string;
+  name: string;
   email: string;
   phone: string;
 };
 
 const FILTER_FIELDS = {
-  first_name: "firstName",
-  last_name: "lastName",
+  name: "name",
   email: "email",
   phone: "phone",
 };
@@ -34,7 +32,7 @@ export const CustomerFilter = ({ values, onChange }: CustomerFilterProps) => {
           return (
             <TextField
               key={filterKeyName}
-              className={clsx("mb-0")}
+              className={clsx("mb-0", "col-4", "customer-filter")}
               type="text"
               label={label}
               value={values[filterKeyName]}

package/src/events/edit-event-modal/IntervalInput.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 
 import { useId } from "@react-aria/utils";
+import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import HTMLInputDateElement from "../../types/static/HTMLInputDateElement";
 import { RecurrenceInput } from "../../recurrence-input";
 import { WarningMessage } from "../../static";
@@ -13,6 +14,8 @@ import { ProductSetFormValues } from "../../product-set/form";
 
 interface IntervalInputProps {
   editedProductSet?: ProductSetFormValues;
+  productSets?: ProductSet[];
+  productSetId?: number;
   disabled?: boolean;
 }
 
@@ -25,6 +28,8 @@ export interface IntervalInputValues {
 export function IntervalInput({
   disabled = false,
   editedProductSet,
+  productSetId,
+  productSets,
 }: IntervalInputProps) {
   const { t } = useTranslation(["Design", "Validation"]);
   const {
@@ -42,6 +47,7 @@ export function IntervalInput({
   const start = watch("start");
   const end = watch("end");
   const [recurrent, setRecurrent] = useState(Boolean(rrule));
+  const [isOverriden, setIsOverriden] = useState(false);
   const recurrentId = useId();
 
   const startDateInput = useRef<HTMLInputDateElement | null>(null);
@@ -66,6 +72,18 @@ export function IntervalInput({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editedProductSet]);
 
+  useEffect(() => {
+    if (!productSets) return;
+
+    const isOverridenProductSet = productSets.find(
+      (productSet) =>
+        (editedProductSet && productSet?.id === editedProductSet?.id) ||
+        (Boolean(productSet?.parentMenuId) && productSet?.id === productSetId)
+    );
+
+    setIsOverriden(Boolean(isOverridenProductSet));
+  }, [productSets, productSetId, setIsOverriden, editedProductSet]);
+
   return (
     <>
       <Form.Row className="interval-container">
@@ -129,9 +147,11 @@ export function IntervalInput({
               {t("reccurentDescription", { item: t("event") })}
             </Form.Text>
           )}
-          <WarningMessage message={t("recurrentOverridesWarining")} />
         </Form.Group>
       )}
+      {isOverriden && (
+        <WarningMessage message={t("recurrentOverridesWarining")} />
+      )}
       {recurrent && start && (
         <Form.Group>
           <Controller

package/src/events/edit-event-modal/component/EditEventForm/EditEventForm.tsx

@@ -121,6 +121,7 @@ export const EditEventForm = ({
 
   const visible = watch("visible");
   const editedProductSet = watch("editedProductSet");
+  const productSetId = watch("productSetId");
 
   const {
     images,
@@ -267,6 +268,8 @@ export const EditEventForm = ({
           <IntervalInput
             key={watch("rrule")}
             disabled={disabled}
+            productSetId={productSetId}
+            productSets={productSets}
             editedProductSet={editedProductSet}
           />
           {categories.length !== 0 && (

package/src/events/edit-event-modal/component/SelectEventProductSet/component/EditEventProductSet.tsx

@@ -11,6 +11,7 @@ import { ProductSetControl } from "../../../../../product-set";
 import { ProductSetContextProvider } from "../../../../../product-set/form/context";
 import { getDefaultValues } from "../../../utils/getDefaultProductSet";
 import { EditEventFormValues } from "../../EditEventForm";
+import { getFilteredTemplates } from "../../../../../product-set/utils/index";
 
 export const DEFAULT_FEE = 5;
 
@@ -109,8 +110,16 @@ export const EditEventProductSet = ({
       <FormProvider {...form}>
         <Form className="mt-6">
           <ProductSetControl
-            emailTemplates={emailTemplates}
-            smsTemplates={smsTemplates}
+            smsTemplates={getFilteredTemplates(
+              smsTemplates,
+              formValues?.smsTemplates
+            )}
+            emailTemplates={getFilteredTemplates(
+              emailTemplates,
+              formValues?.emailTemplates
+            )}
+            showEmailTemplate={!!emailTemplates}
+            showSmsTemplate={!!smsTemplates}
             fieldSets={fieldSetsData}
             isLoading={isLoading}
             companyName={selectedCompany?.title}

package/src/events/edit-event-modal/utils/getDefaultProductSet.ts

@@ -3,6 +3,7 @@ import {
   DEFAULT_PRODUCT_SET_TYPE,
   ProductSet,
 } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
+import { getFilteredTemplates } from "../../../product-set/utils/index";
 import { ProductSetFormValues } from "../../../product-set/form/ProductSetForm";
 
 export const getDefaultValues = (
@@ -14,15 +15,16 @@ export const getDefaultValues = (
   type: productSet?.type ?? DEFAULT_PRODUCT_SET_TYPE,
   termsAndConditions: productSet?.termsAndConditions ?? "",
   operationalCost: productSet?.operationalCost ?? DEFAULT_OPERATIONAL_COST_TYPE,
+  thankYouPageUrl: productSet?.thankYouPageUrl ?? "",
   isDefault: productSet?.isDefault ?? false,
   fieldSetId: productSet?.fieldSetId,
-  emailTemplateId:
+  emailTemplates:
     productSet?.mailTemplates && productSet?.mailTemplates?.length > 0
-      ? productSet?.mailTemplates[0].notification.id
+      ? getFilteredTemplates(productSet?.mailTemplates)
       : undefined,
-  smsTemplateId:
+  smsTemplates:
     productSet?.smsTemplates && productSet?.smsTemplates?.length > 0
-      ? productSet?.smsTemplates[0].notification.id
+      ? getFilteredTemplates(productSet?.mailTemplates)
       : undefined,
   steps:
     productSet?.steps?.map(({ productCategories, ...step }) => ({

package/src/events/event-statistic-modal/EventStatisticModal.tsx

@@ -55,7 +55,7 @@ export const EventStatisticModal = ({
                 { key: "total", label: "" },
               ]}
               data={data}
-              className="event-statistic-table"
+              className="striped-static-table"
             />
           </>
         ) : (

package/src/events/event-venue-map/EventVenueMap.tsx

@@ -3,6 +3,7 @@ import { EventVenueMapProvider } from "@licklist/plugins/dist/context/event/Even
 import { Point } from "@licklist/plugins/dist/types/context/event/point";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { VenueMap, VenueMapRef } from "./components/VenueMap";
 import { useCanvasSize } from "./hooks/useCanvasSize";
 
@@ -24,6 +25,7 @@ export type EventVenueMapProps = {
   products?: Partial<Product>[];
   pointProducts?: Partial<PointProduct>[];
   onPointProductsChange?: (values: Partial<PointProduct>[]) => void;
+  soldOutProducts?: ProductQuantityCheckResponse["products"];
 } & EventVenueMapIframeProps;
 
 export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
@@ -43,6 +45,7 @@ export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
       usedInIframe = false,
       choosedProductUuids = [],
       errorOnChoosedProductUuids = [],
+      soldOutProducts,
     },
     ref
   ) => {
@@ -66,6 +69,7 @@ export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
           ref={ref}
           choosedProductUuids={choosedProductUuids}
           errorOnChoosedProductUuids={errorOnChoosedProductUuids}
+          soldOutProducts={soldOutProducts}
         />
       </EventVenueMapProvider>
     );

package/src/events/event-venue-map/components/MapPoint/MapPoint.tsx

@@ -78,7 +78,8 @@ export const MapPoint = ({
       // have 2 points near one by one
       const nextPoints = prevPoints.slice();
       const currentPoint = nextPoints.find(
-        (i) => i.id === id || i?.localId === localId
+        (point) =>
+          (id && point.id === id) || (localId && point.localId === localId)
       );
       const currentPointIndex = nextPoints.indexOf(currentPoint);
 
@@ -106,6 +107,7 @@ export const MapPoint = ({
   };
 
   const onMouseEnter = () => {
+    changePointPosition();
     changeCursorType("pointer");
   };
 

package/src/events/event-venue-map/components/MapPoint/components/ProductIcon/ProductIcon.tsx

@@ -1,6 +1,7 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import { Path, KonvaNodeEvents, Group, Circle } from "react-konva";
 import Konva from "konva";
+import { ProductTooltip } from "../ProductTooltip";
 
 const ICON_DATA =
   "M14 0C9.3569 0.6633 4.6431 0.6633 0 0L6 7V13H3V14H11V13H8V7L14 0Z";
@@ -62,6 +63,8 @@ export const ProductIcon = ({
   const defaultX = -X_OFFSET;
   const defaultY = -Y_OFFSET;
 
+  const [hovered, setHovered] = useState<boolean>(false);
+
   const cssVariableValues = useMemo(() => {
     return {
       pointBackgroundColor:
@@ -119,7 +122,12 @@ export const ProductIcon = ({
   };
 
   return (
-    <Group x={x} y={y}>
+    <Group
+      x={x}
+      y={y}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
       <Circle
         radius={CIRCLE_RADIUS}
         strokeWidth={POINT_STROKE_WIDTH}
@@ -127,6 +135,9 @@ export const ProductIcon = ({
         y={defaultY * 0.75}
         {...circleColors()}
       />
+      {hovered && isSoldOut && (
+        <ProductTooltip x={defaultX} y={defaultY} text="Sold out" />
+      )}
       {isProductChoosed ? (
         <Path
           x={defaultX}

package/src/events/event-venue-map/components/MapPoint/components/ProductTooltip/ProductTooltip.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { Group, Rect, Text } from "react-konva";
+
+const TOOLTIP_WIDTH = 60;
+const TOOLTIP_HEIGHT = 20;
+
+const BACKGROUND_COLOR = "#000";
+const BACKGROUND_Y_OFFSET = 1;
+const BACKGROUND_X_OFFSET = 30;
+const BACKGROUND_RADIUS = 5;
+const BACKGROUND_OPACITY = 0.8;
+
+const TEXT_Y_OFFSET = 4;
+const TEXT_STROKE_WIDTH = 5;
+const TEXT_COLOR = "#FFF";
+const TEXT_ALIGN = "center";
+const TEXT_VERTICAL_ALIGN = "middle";
+
+type ProductTooltipProps = {
+  x: number;
+  y: number;
+  text: string;
+};
+
+export const ProductTooltip = ({ x, y, text }: ProductTooltipProps) => {
+  return (
+    <Group
+      width={TOOLTIP_WIDTH}
+      height={TOOLTIP_HEIGHT}
+      x={x + BACKGROUND_X_OFFSET}
+      y={y - BACKGROUND_Y_OFFSET}
+    >
+      <Rect
+        x={-5}
+        y={5}
+        sceneFunc={(context) => {
+          context.beginPath();
+          context.moveTo(0, 5);
+          context.lineTo(5, 0);
+          context.lineTo(5, 10);
+          context.closePath();
+          context.fill();
+        }}
+        fill={BACKGROUND_COLOR}
+        borderColor={BACKGROUND_COLOR}
+        opacity={BACKGROUND_OPACITY}
+      />
+      <Rect
+        x={0}
+        y={0}
+        width={TOOLTIP_WIDTH}
+        height={TOOLTIP_HEIGHT}
+        fill={BACKGROUND_COLOR}
+        cornerRadius={BACKGROUND_RADIUS}
+        opacity={BACKGROUND_OPACITY}
+      />
+      <Text
+        y={TEXT_Y_OFFSET}
+        text={text}
+        strokeWidth={TEXT_STROKE_WIDTH}
+        width={TOOLTIP_WIDTH}
+        align={TEXT_ALIGN}
+        verticalAlign={TEXT_VERTICAL_ALIGN}
+        fill={TEXT_COLOR}
+      />
+    </Group>
+  );
+};

package/src/events/event-venue-map/components/MapPoint/components/ProductTooltip/index.ts

@@ -0,0 +1 @@
+export { ProductTooltip } from "./ProductTooltip";

package/src/events/event-venue-map/components/VenueMap/VenueMap.tsx

@@ -11,6 +11,7 @@ import {
   EventVenueMapContext,
   EventVenueMapContextProps,
 } from "@licklist/plugins/dist/context/event/EventVenueMapContext";
+import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { useImage } from "../../hooks/useImage";
 import { useStageActions } from "../../hooks/useStageActions";
 import { MapPoint } from "../MapPoint";
@@ -32,6 +33,7 @@ export type VenueMapProps = {
   usedInIframe?: boolean;
   choosedProductUuids?: string[];
   errorOnChoosedProductUuids?: string[];
+  soldOutProducts?: ProductQuantityCheckResponse["products"];
 };
 
 export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
@@ -45,6 +47,7 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
       usedInIframe = false,
       choosedProductUuids = [],
       errorOnChoosedProductUuids = [],
+      soldOutProducts,
     },
     ref
   ) => {
@@ -112,13 +115,18 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
       );
 
       if (!currentProduct) return false;
-
+      const selectedProduct = products.find(
+        (product) => product.uuid === currentProduct.productUuid
+      );
       return (
-        products.find((product) => product.uuid === currentProduct.productUuid)
-          ?.isSoldOut || false
+        selectedProduct?.isSoldOut ||
+        (selectedProduct &&
+          !!soldOutProducts?.find(
+            (product) => product?.product_id === selectedProduct?.id
+          )) ||
+        false
       );
     };
-
     return (
       <div className="venue-map" style={{ width, height }}>
         <div className="zone-name">

package/src/iframe/event/event-order-short-summary/components/Summary/Summary.tsx

@@ -8,25 +8,25 @@ export type SummaryDataType = {
   quantity?: number;
 }[];
 
-export type SummaryProps = ({
-  data: SummaryDataType,
-}) => React.PropsWithChildren<any>;
+export const Summary = ({ data = [] }: { data: SummaryDataType }) => {
+  return (
+    <>
+      {data.map(({ name, image, quantity, title }) => {
+        const classNames = clsx("name", "mb-4", image && "align-items-center");
 
-export const Summary: SummaryProps = ({ data = [] }) => {
-  return data.map(({ name, image, quantity, title }) => {
-    const classNames = clsx("name", "mb-4", image && "align-items-center");
-
-    return (
-      <div key={name} className="summary">
-        <p className="title mb-1">{title}</p>
-        <div className={classNames}>
-          {image && <img className="image mr-3" src={image} alt={name} />}
-          {quantity && quantity > 1 && (
-            <span className="quantity mr-3">{quantity}x</span>
-          )}
-          {name}
-        </div>
-      </div>
-    );
-  });
+        return (
+          <div key={name} className="summary">
+            <p className="title mb-1">{title}</p>
+            <div className={classNames}>
+              {image && <img className="image mr-3" src={image} alt={name} />}
+              {quantity && quantity > 1 && (
+                <span className="quantity mr-3">{quantity}x</span>
+              )}
+              {name}
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
 };

package/src/iframe/event/event-venue-map/IframeEventVenueMap.stories.tsx

@@ -6,6 +6,7 @@ import { Page, PageBody, PageHeader } from "../../page";
 import { BookingSummaryFooter } from "../../order-process/components/BookingSummaryFooter";
 import { BookingSummary } from "../../order-process/components/BookingSummary";
 import { CalendarSelect } from "../event-calendar/components/CalendarSelect";
+import { Product } from "../../../types";
 
 export default {
   title: "Iframe/Event/IframeEventVenueMap",
@@ -268,6 +269,10 @@ export function Default() {
               pointProducts={MENU_STEPS[0].pointProducts}
               usedInIframe={usedInIframe}
               onPointClick={(pointId) => console.log({ pointId })}
+              products={
+                MENU_STEPS[0].productCategories[0]
+                  .products as Partial<Product>[]
+              }
               choosedProductUuids={[
                 "beb6393c-2fdd-40f7-bb92-8800685b203f",
                 "beb6393c-2fdd-40f7-bb92-8800685b203a",

package/src/iframe/order-process/OrderProcess.stories.tsx

@@ -49,6 +49,7 @@ const productCategories = [
 
         price: 5,
         deposit: 3,
+        minSub: 10,
         isRequired: true,
         images: IMAGES,
       },
@@ -197,14 +198,14 @@ export default {
 } as Meta;
 
 const TimerWrapper = () => {
-  const [timer, setTimer] = useState(60);
+  const [timer, setTimer] = useState(120000);
   const updateTimerState = () => {
     setTimer((prevValue) => {
       if (prevValue <= 0) {
         return 0;
       }
 
-      const nexValue = prevValue - 1;
+      const nexValue = prevValue - 1000;
 
       return nexValue;
     });

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

@@ -25,6 +25,9 @@ export const BookingSummary = ({
   const { formatNumber } = useIntl();
 
   const orderProducts = useMemo(() => {
+    if (!formValues) {
+      return undefined;
+    }
     const products = Object.values(formValues).filter(Boolean) as Order[];
 
     return products?.filter((prod) => prod?.quantity !== 0);
@@ -47,7 +50,7 @@ export const BookingSummary = ({
         </div>
         <hr />
 
-        {orderProducts.length > 0 ? (
+        {orderProducts?.length > 0 ? (
           <div>
             <div className="cart-items">
               {menuSteps.map((menuStep: MenuStep) => {

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/BookingSummary/utils/index.ts

@@ -1,8 +1,12 @@
 import { Order } from "../../../../../types";
 
-export const cartSumByOrderProducts = (orderProducts: Order[]) =>
-  orderProducts.reduce((prevSumValue: number, product) => {
+export const cartSumByOrderProducts = (orderProducts?: Order[]) => {
+  if (!orderProducts || !orderProducts.length) {
+    return 0;
+  }
+  return orderProducts.reduce((prevSumValue: number, product) => {
     return (
       prevSumValue + (product?.deposit || product?.price) * product.quantity
     );
   }, 0);
+};

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}
                   />
                 );
               })}