@licklist/design 0.44.485-dev.47 → 0.44.485-dev.5

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

@@ -6,7 +6,6 @@ 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";
@@ -14,8 +13,6 @@ import { ProductSetFormValues } from "../../product-set/form";
 
 interface IntervalInputProps {
   editedProductSet?: ProductSetFormValues;
-  productSets?: ProductSet[];
-  productSetId?: number;
   disabled?: boolean;
 }
 
@@ -28,8 +25,6 @@ export interface IntervalInputValues {
 export function IntervalInput({
   disabled = false,
   editedProductSet,
-  productSetId,
-  productSets,
 }: IntervalInputProps) {
   const { t } = useTranslation(["Design", "Validation"]);
   const {
@@ -47,7 +42,6 @@ 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);
@@ -72,18 +66,6 @@ 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">
@@ -147,11 +129,9 @@ 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,7 +121,6 @@ export const EditEventForm = ({
 
   const visible = watch("visible");
   const editedProductSet = watch("editedProductSet");
-  const productSetId = watch("productSetId");
 
   const {
     images,
@@ -268,8 +267,6 @@ 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,7 +11,6 @@ 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;
 
@@ -110,16 +109,8 @@ export const EditEventProductSet = ({
       <FormProvider {...form}>
         <Form className="mt-6">
           <ProductSetControl
-            smsTemplates={getFilteredTemplates(
-              smsTemplates,
-              formValues?.smsTemplates
-            )}
-            emailTemplates={getFilteredTemplates(
-              emailTemplates,
-              formValues?.emailTemplates
-            )}
-            showEmailTemplate={!!emailTemplates}
-            showSmsTemplate={!!smsTemplates}
+            emailTemplates={emailTemplates}
+            smsTemplates={smsTemplates}
             fieldSets={fieldSetsData}
             isLoading={isLoading}
             companyName={selectedCompany?.title}

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

@@ -3,7 +3,6 @@ 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 = (
@@ -15,16 +14,15 @@ 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,
-  emailTemplates:
+  emailTemplateId:
     productSet?.mailTemplates && productSet?.mailTemplates?.length > 0
-      ? getFilteredTemplates(productSet?.mailTemplates)
+      ? productSet?.mailTemplates[0].notification.id
       : undefined,
-  smsTemplates:
+  smsTemplateId:
     productSet?.smsTemplates && productSet?.smsTemplates?.length > 0
-      ? getFilteredTemplates(productSet?.mailTemplates)
+      ? productSet?.smsTemplates[0].notification.id
       : 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="striped-static-table"
+              className="event-statistic-table"
             />
           </>
         ) : (

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

@@ -3,7 +3,6 @@ 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";
 
@@ -25,7 +24,6 @@ export type EventVenueMapProps = {
   products?: Partial<Product>[];
   pointProducts?: Partial<PointProduct>[];
   onPointProductsChange?: (values: Partial<PointProduct>[]) => void;
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
 } & EventVenueMapIframeProps;
 
 export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
@@ -45,7 +43,6 @@ export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
       usedInIframe = false,
       choosedProductUuids = [],
       errorOnChoosedProductUuids = [],
-      soldOutProducts,
     },
     ref
   ) => {
@@ -69,7 +66,6 @@ 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,8 +78,7 @@ export const MapPoint = ({
       // have 2 points near one by one
       const nextPoints = prevPoints.slice();
       const currentPoint = nextPoints.find(
-        (point) =>
-          (id && point.id === id) || (localId && point.localId === localId)
+        (i) => i.id === id || i?.localId === localId
       );
       const currentPointIndex = nextPoints.indexOf(currentPoint);
 
@@ -107,7 +106,6 @@ export const MapPoint = ({
   };
 
   const onMouseEnter = () => {
-    changePointPosition();
     changeCursorType("pointer");
   };
 

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

@@ -1,7 +1,6 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo } 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";
@@ -63,8 +62,6 @@ export const ProductIcon = ({
   const defaultX = -X_OFFSET;
   const defaultY = -Y_OFFSET;
 
-  const [hovered, setHovered] = useState<boolean>(false);
-
   const cssVariableValues = useMemo(() => {
     return {
       pointBackgroundColor:
@@ -122,12 +119,7 @@ export const ProductIcon = ({
   };
 
   return (
-    <Group
-      x={x}
-      y={y}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
+    <Group x={x} y={y}>
       <Circle
         radius={CIRCLE_RADIUS}
         strokeWidth={POINT_STROKE_WIDTH}
@@ -135,9 +127,6 @@ 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/VenueMap/VenueMap.tsx

@@ -11,7 +11,6 @@ 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";
@@ -33,7 +32,6 @@ export type VenueMapProps = {
   usedInIframe?: boolean;
   choosedProductUuids?: string[];
   errorOnChoosedProductUuids?: string[];
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
 };
 
 export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
@@ -47,7 +45,6 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
       usedInIframe = false,
       choosedProductUuids = [],
       errorOnChoosedProductUuids = [],
-      soldOutProducts,
     },
     ref
   ) => {
@@ -115,18 +112,13 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
       );
 
       if (!currentProduct) return false;
-      const selectedProduct = products.find(
-        (product) => product.uuid === currentProduct.productUuid
-      );
+
       return (
-        selectedProduct?.isSoldOut ||
-        (selectedProduct &&
-          !!soldOutProducts?.find(
-            (product) => product?.product_id === selectedProduct?.id
-          )) ||
-        false
+        products.find((product) => product.uuid === currentProduct.productUuid)
+          ?.isSoldOut || 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 const Summary = ({ data = [] }: { data: SummaryDataType }) => {
-  return (
-    <>
-      {data.map(({ name, image, quantity, title }) => {
-        const classNames = clsx("name", "mb-4", image && "align-items-center");
+export type SummaryProps = ({
+  data: SummaryDataType,
+}) => React.PropsWithChildren<any>;
 
-        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>
-        );
-      })}
-    </>
-  );
+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>
+    );
+  });
 };

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

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

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

@@ -25,9 +25,6 @@ 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);
@@ -50,7 +47,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,12 +1,8 @@
 import { Order } from "../../../../../types";
 
-export const cartSumByOrderProducts = (orderProducts?: Order[]) => {
-  if (!orderProducts || !orderProducts.length) {
-    return 0;
-  }
-  return orderProducts.reduce((prevSumValue: number, product) => {
+export const cartSumByOrderProducts = (orderProducts: Order[]) =>
+  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,7 +425,6 @@ 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,7 +19,6 @@ 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";
@@ -45,7 +44,6 @@ export interface CalendarStepsFormProps {
   onActiveVenueMapChange?: (nextVenueMapId: string) => void;
   title: string;
   menuStepWithVenueMap: Step;
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
 }
 
 export type StepsFormRef = {
@@ -69,7 +67,6 @@ export const CalendarStepsForm = forwardRef<
       title,
       menuStepWithVenueMap,
       onActiveVenueMapChange,
-      soldOutProducts,
     },
     ref
   ) => {
@@ -343,14 +340,12 @@ 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,6 +1,5 @@
 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";
 
@@ -9,7 +8,6 @@ export type CategoryProps = {
   activePointId?: number;
   pointProducts: PointProduct[];
   onCloseModal: () => void;
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
 };
 
 export const Category = ({
@@ -17,7 +15,6 @@ export const Category = ({
   activePointId,
   pointProducts,
   onCloseModal,
-  soldOutProducts,
 }: CategoryProps) => {
   return (
     <>
@@ -34,7 +31,6 @@ export const Category = ({
                     activePointId={activePointId}
                     pointProducts={pointProducts}
                     onCloseModal={onCloseModal}
-                    soldOutProducts={soldOutProducts}
                   />
                 );
               })}

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

@@ -2,7 +2,6 @@ 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";
@@ -13,7 +12,6 @@ export type CategoryProductModalProps = {
   category: ProductCategory;
   pointProducts: PointProduct[];
   onCloseModal: () => void;
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
 };
 
 export const CategoryProductModal = ({
@@ -22,7 +20,6 @@ export const CategoryProductModal = ({
   category,
   pointProducts,
   onCloseModal,
-  soldOutProducts,
 }: CategoryProductModalProps) => {
   const activePointProduct = useMemo(
     () =>
@@ -45,7 +42,6 @@ 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,7 +8,6 @@ import { StepsFormProps } from "../StepsForm/StepsForm";
 interface CategoryProps {
   productCategories: ProductCategory[];
   productsWithErrors?: StepsFormProps["productsWithErrors"];
-  soldOutProducts?: StepsFormProps["productsWithErrors"];
   errors?: DeepMap<Record<string, any>, FieldError>;
 }
 
@@ -16,7 +15,6 @@ export function Category({
   productCategories,
   productsWithErrors,
   errors,
-  soldOutProducts,
 }: CategoryProps) {
   return (
     <>
@@ -39,7 +37,6 @@ export function Category({
                     product={product}
                     category={category}
                     productsWithErrors={productsWithErrors}
-                    soldOutProducts={soldOutProducts}
                   />
                 );
               })}