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

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

@@ -10,12 +10,14 @@ import Icon from "../../../../static/Icon";
 export interface ErrorModalProps {
   isOpen: boolean;
   onClose?: () => void;
+  message?: string;
   messageKey?: string;
 }
 
 export const ErrorModal = ({
   isOpen = false,
   onClose,
+  message,
   messageKey,
 }: ErrorModalProps) => {
   const { t } = useTranslation("Design");
@@ -47,15 +49,16 @@ export const ErrorModal = ({
       </ModalHeader>
       <ModalBody className="confirmation-modal-body">
         <div className="d-flex m-5 justify-content-center manual-form-error">
-          {messageKey ? (
-            t(messageKey)
-          ) : (
-            <Trans
-              t={t}
-              i18nKey="pleaseSelectAtLeastFrom"
-              values={{ min: 1, type: "item", from: "those categories" }}
-            />
-          )}
+          {message ||
+            (messageKey ? (
+              t(messageKey)
+            ) : (
+              <Trans
+                t={t}
+                i18nKey="pleaseSelectAtLeastFrom"
+                values={{ min: 1, type: "item", from: "those categories" }}
+              />
+            ))}
         </div>
       </ModalBody>
     </Modal>

package/src/iframe/order-process/components/Timer/utils/index.ts

@@ -1,10 +1,7 @@
-export const fancyTimeFormat = (miliseconds: number) => {
-  const date = new Date(miliseconds);
-  const mins = date.getMinutes();
-  const secs = date.getSeconds();
-  let timerString = "";
-
-  timerString += `${mins}:${secs < 10 ? "0" : ""}`;
-  timerString += `${secs}`;
-  return timerString;
+export const fancyTimeFormat = (milliseconds: number) => {
+  const totalSeconds = Math.floor(milliseconds / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  const formattedSecs = seconds < 10 ? `0${seconds}` : `${seconds}`;
+  return `${minutes}:${formattedSecs}`;
 };

package/src/iframe/order-process/components/utils/useCategoryVerification.ts

@@ -1,52 +1,80 @@
+import { ProductCategory } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
+import { Currency } from "@licklist/core/dist/Config";
+import { useIntl } from "react-intl";
 import { useTranslation } from "react-i18next";
-import { MenuStep, Order } from "src/types";
+import { Order } from "src/types";
 
 interface CategoryError {
   message: string;
-  id: number;
+  id?: number;
 }
 
 // TODO it's temporary solution, please remove it later
 export const useCategoryVerification = () => {
   const { t } = useTranslation("Validation");
-
+  const { formatNumber } = useIntl();
   return (
     values: Record<Order["id"], Order>,
-    step: MenuStep
+    productCategories?: ProductCategory[]
   ): CategoryError | void => {
-    let errorMessage;
+    let errorMessage: { id?: number; message: string } | void;
+
+    const sumOfMinSpends = productCategories.reduce(
+      (acc, productCategories) => {
+        const { products } = productCategories;
+
+        const productMinSpends = products.reduce((productAcc, product) => {
+          const minSpendValue = !product?.minSpend ? 0 : product.minSpend;
+          return productAcc + minSpendValue;
+        }, 0);
 
+        return acc + productMinSpends;
+      },
+      0
+    );
     const productArray = Object.values(values).filter(
       (product) => product?.quantity > 0
     );
+    const totalPrice = productArray.reduce(
+      (total, product) => total + product.price * product.quantity,
+      0
+    );
+
+    productCategories.forEach(({ minSubItems, maxSubItems, id, name }) => {
+      if (!minSubItems && !maxSubItems) return;
 
-    step?.productCategories.forEach(
-      ({ minSubItems, maxSubItems, id, name }) => {
-        if (!minSubItems && !maxSubItems) return;
-
-        const categoryProductsQuantity = productArray.filter(
-          (product) => product?.productsCategoryId === id
-        ).length;
-
-        if (minSubItems && categoryProductsQuantity < minSubItems) {
-          const message = t("Validation:fieldMinNumber", {
-            min: minSubItems,
-            attribute: `number of products in the ${name} category`,
-          });
-          errorMessage = { id, message };
-
-          return;
-        }
-
-        if (maxSubItems && categoryProductsQuantity > maxSubItems) {
-          const message = t("Validation:fieldMaxNumber", {
-            max: maxSubItems,
-            attribute: `number of products in the ${name} category`,
-          });
-          errorMessage = { id, message };
-        }
+      const categoryProductsQuantity = productArray.filter(
+        (product) => product?.productsCategoryId === id
+      ).length;
+
+      if (minSubItems && categoryProductsQuantity < minSubItems) {
+        const message = t("Validation:fieldMinNumber", {
+          min: minSubItems,
+          attribute: `number of products in the ${name} category`,
+        });
+        errorMessage = { id, message };
+
+        return;
       }
-    );
+
+      if (maxSubItems && categoryProductsQuantity > maxSubItems) {
+        const message = t("Validation:fieldMaxNumber", {
+          max: maxSubItems,
+          attribute: `number of products in the ${name} category`,
+        });
+        errorMessage = { id, message };
+      }
+    });
+
+    if (totalPrice < sumOfMinSpends && !errorMessage) {
+      const message = t("Design:minimumSpendSumValidation", {
+        minSpend: formatNumber(sumOfMinSpends, {
+          style: "currency",
+          currency: Currency.GBP,
+        }),
+      }) as string;
+      errorMessage = { message };
+    }
 
     return errorMessage;
   };

package/src/iframe/page/Page.stories.tsx

@@ -6,7 +6,7 @@ import { Page } from "./Page";
 import { PageHeader } from "./components/PageHeader";
 import { PageBody } from "./components/PageBody";
 import { IframeEventCard } from "../event/event-card/IframeEventCard";
-import { CalendarSelect } from "../event/event-calendar/components/CalendarSelect";
+import { CalendarSelect } from "../../calendar/components/CalendarSelect";
 
 export default {
   title: "Iframe/Page/Page",
@@ -219,7 +219,7 @@ export function Default() {
               <>
                 <CalendarSelect
                   options={[{ label: "Floor 1", value: "1" }]}
-                  value={"1"}
+                  value="1"
                   onChange={(chagedId: string) => console.log({ chagedId })}
                 />
               </>

package/src/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.tsx

@@ -26,7 +26,12 @@ export const LeftBlock = ({
     <div className={clsx("left-block", className)} {...props}>
       {pageTitle && (
         <div className="navigation">
-          <div className="title">{pageTitle}</div>
+          {typeof pageTitle === "string" ? (
+            <div className="title">{pageTitle}</div>
+          ) : (
+            pageTitle
+          )}
+
           {component}
         </div>
       )}

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

@@ -9,15 +9,9 @@ import {
   PAYMENT_TYPE_NET_PROFIT,
 } from "@licklist/core/dist/DataMapper/Order/PaymentDataMapper";
 import { StaticTableData } from "../../../../table";
-import {
-  getProductQuantityAndPrice,
-  calculateTotalDiscount,
-  calculateTotalPrice,
-  getPaymentValueByType,
-  getExternalPaymentDetail,
-  getTotalSumByCategory,
-} from "../utils";
+import { getProductQuantityAndPrice, getTotalSumByCategory } from "../utils";
 import { OrderItemsTableProps, SummaryItem } from "../types";
+import { getOrderSummaryItems } from "../utils/paymentSummary";
 
 const CURRENCY_DEFAULT = "GBP";
 export const PAYMENT_TYPE_TRANSLATE_KEYS = {
@@ -114,9 +108,7 @@ export const useTableData = ({
     );
   };
 
-  const renderSummaryItems = (
-    summaryItems: { translateKey: string; price: number }[]
-  ) => {
+  const renderSummaryItems = (summaryItems: SummaryItem[]) => {
     return summaryItems.map(({ translateKey, price }) => {
       return {
         key: uniqueId(`summary-info-${translateKey}`),
@@ -127,93 +119,6 @@ export const useTableData = ({
     });
   };
 
-  const paymentNotProcessedSummary = () => {
-    const externalPaymentDetail = paymentDetail
-      ? getExternalPaymentDetail(paymentDetail)
-      : undefined;
-
-    const total = calculateTotalPrice(order, externalPaymentDetail);
-
-    const summaryItems: SummaryItem[] = [
-      {
-        translateKey: "amountTotal",
-        price: total,
-      },
-    ];
-
-    if (externalDiscount) {
-      summaryItems.push({
-        price: externalDiscount,
-        translateKey: "amountWithDiscount",
-      });
-    }
-
-    if (externalPaymentDetail) {
-      return [...summaryItems, ...getExternalPaymentDetail(paymentDetail)];
-    }
-
-    return summaryItems;
-  };
-
-  const processedPaymentSummary = () => {
-    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[] = [
-      {
-        translateKey: "amountTotal",
-        price: total,
-      },
-    ];
-
-    if (totalDiscount) {
-      summaryItems.push({
-        translateKey: "amountWithDiscount",
-        price: totalWithDiscount < 0 ? 0 : totalWithDiscount,
-      });
-    }
-
-    if (paymentDetail && !order.payments.length) {
-      return [...summaryItems, ...externalPaymentDetail];
-    }
-
-    summaryItems.push({
-      translateKey: "totalPaid",
-      price: totalWithDiscount <= 0 ? 0 : order.totalAmount,
-    });
-    if (totalWithDiscount <= 0) {
-      return summaryItems;
-    }
-    summaryItems = [...summaryItems, ...externalPaymentDetail];
-
-    if (totalWithDiscount > order.totalAmount) {
-      summaryItems.push({
-        translateKey: "remainingToPay",
-        price: totalWithDiscount - order.totalAmount,
-      });
-    }
-    return summaryItems;
-  };
-
-  const getOrderSummaryItems = () => {
-    if (!isPaymentProcessed) {
-      return paymentNotProcessedSummary();
-    }
-
-    return processedPaymentSummary();
-  };
-
   const data = useMemo(
     () => {
       if (!order) {
@@ -222,7 +127,14 @@ export const useTableData = ({
 
       return [
         ...renderProductsContent(),
-        ...renderSummaryItems(getOrderSummaryItems()),
+        ...renderSummaryItems(
+          getOrderSummaryItems({
+            order,
+            paymentDetail,
+            isPaymentProcessed,
+            externalDiscount,
+          })
+        ),
       ];
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -1,7 +1,24 @@
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import { PaymentDetail } from "@licklist/core/dist/DataMapper/Order/PaymentDetailDataMapper";
 
-export type SummaryItem = { translateKey: string; price: number };
+export const AMOUNT_TOTAL = "amountTotal";
+export const AMOUNT_WITH_DISCOUNT = "amountWithDiscount";
+export const TOTAL_PAID = "totalPaid";
+export const REMAINING_TO_PAY = "remainingToPay";
+
+export const SUMMARY_TRANSLATE_KEYS = [
+  AMOUNT_TOTAL,
+  AMOUNT_WITH_DISCOUNT,
+  TOTAL_PAID,
+  REMAINING_TO_PAY,
+];
+
+export type SUMMARY_TRANSLATE_KEY = typeof SUMMARY_TRANSLATE_KEYS[number];
+
+export type SummaryItem = {
+  translateKey: SUMMARY_TRANSLATE_KEY;
+  price: number;
+};
 
 export type OrderItemsTableProps = {
   order?: Order;

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -0,0 +1,118 @@
+import { PAYMENT_TYPE_TRANSLATE_KEYS } from "../hooks/useTableData";
+import {
+  AMOUNT_TOTAL,
+  AMOUNT_WITH_DISCOUNT,
+  OrderItemsTableProps,
+  REMAINING_TO_PAY,
+  SummaryItem,
+  TOTAL_PAID,
+} from "../types";
+import {
+  calculateTotalDiscount,
+  calculateTotalPrice,
+  getExternalPaymentDetail,
+  getPaymentValueByType,
+} from "./index";
+
+const paymentNotProcessedSummary = ({
+  order,
+  externalDiscount,
+  paymentDetail,
+}: OrderItemsTableProps) => {
+  const externalPaymentDetail = paymentDetail
+    ? getExternalPaymentDetail(paymentDetail)
+    : undefined;
+
+  const total = calculateTotalPrice(order, externalPaymentDetail);
+
+  const summaryItems: SummaryItem[] = [
+    {
+      translateKey: AMOUNT_TOTAL,
+      price: total,
+    },
+  ];
+
+  if (externalDiscount) {
+    summaryItems.push({
+      price: externalDiscount,
+      translateKey: AMOUNT_WITH_DISCOUNT,
+    });
+  }
+
+  if (externalPaymentDetail) {
+    return [...summaryItems, ...getExternalPaymentDetail(paymentDetail)];
+  }
+
+  return summaryItems;
+};
+
+const processedPaymentSummary = ({
+  order,
+  paymentDetail,
+}: OrderItemsTableProps) => {
+  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[] = [
+    {
+      translateKey: AMOUNT_TOTAL,
+      price: total,
+    },
+  ];
+
+  if (totalDiscount) {
+    summaryItems.push({
+      translateKey: AMOUNT_WITH_DISCOUNT,
+      price: totalWithDiscount < 0 ? 0 : totalWithDiscount,
+    });
+  }
+
+  if (paymentDetail && !order.payments.length) {
+    return [...summaryItems, ...externalPaymentDetail];
+  }
+
+  summaryItems.push({
+    translateKey: TOTAL_PAID,
+    price: totalWithDiscount <= 0 ? 0 : order.totalAmount,
+  });
+  if (totalWithDiscount <= 0) {
+    return summaryItems;
+  }
+  summaryItems = [...summaryItems, ...externalPaymentDetail];
+
+  if (totalWithDiscount > order.totalAmount) {
+    summaryItems.push({
+      translateKey: REMAINING_TO_PAY,
+      price: totalWithDiscount - order.totalAmount,
+    });
+  }
+  return summaryItems;
+};
+
+export const getOrderSummaryItems = ({
+  order,
+  externalDiscount,
+  paymentDetail,
+  isPaymentProcessed,
+}: OrderItemsTableProps): SummaryItem[] => {
+  if (!isPaymentProcessed) {
+    return paymentNotProcessedSummary({
+      order,
+      externalDiscount,
+      paymentDetail,
+    });
+  }
+
+  return processedPaymentSummary({ order, paymentDetail });
+};

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

@@ -100,18 +100,18 @@ export const PaymentPage = ({
     );
   }
 
-  const orderTotalAmounByFormValues = cartSumByOrderProducts(
+  const orderTotalAmountByFormValues = cartSumByOrderProducts(
     bookingSummaryProps && bookingSummaryProps?.formValues
       ? Object.values(bookingSummaryProps?.formValues)
       : undefined
   );
 
-  // User can fill promocode only in iframe appcliation.
+  // User can fill promo code only in iframe application.
   // 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;
+    orderTotalAmountByFormValues > data?.amount;
 
   return (
     <Page
@@ -164,7 +164,7 @@ export const PaymentPage = ({
                         <SummaryTotalBlock
                           label={t("total")}
                           amount={
-                            orderTotalAmounByFormValues +
+                            orderTotalAmountByFormValues +
                             (bookingSummaryProps?.transactionFee || 0)
                           }
                         />

package/src/index.ts

@@ -39,3 +39,5 @@ export * from "./radio-card";
 export * from "./image-radio-input";
 export * from "./sorting-select";
 export * from "./date-time-button";
+export * from "./calendar";
+export * from "./availability-indicator";

package/src/notification/email-template/control/EmailTemplateControl.tsx

@@ -314,13 +314,38 @@ export const EmailTemplateControl = React.forwardRef(
         <Row className="mb-4">
           <Form.Group as={Col}>
             <Form.Label>{t("Design:emailBody")}</Form.Label>
-            <div className="email-editor">
+
+            <div className="alert alert-warning" role="alert">
+              Due to the mail services limitations on the length of the email
+              body that can be sent or received - maximum length is set to
+              65,535 characters.
+            </div>
+
+            <div className={`email-editor ${errors.body && "is-invalid"}`}>
               <EmailEditor
                 ref={ref}
                 onReady={onReadyEditor}
                 style={{ height: "50rem" }}
               />
+
+              <input
+                type="hidden"
+                name="body"
+                {...register("body", {
+                  maxLength: {
+                    value: 65535,
+                    message: t("Validation:fieldMaxLength", {
+                      attribute: t("body"),
+                      max: 65535,
+                    }) as string,
+                  },
+                })}
+              />
             </div>
+
+            <Form.Control.Feedback type="invalid">
+              {errors.body?.message}
+            </Form.Control.Feedback>
           </Form.Group>
         </Row>
         <Row>

package/src/product-set/control/DateAndRecurrenceInput.tsx

@@ -176,6 +176,7 @@ export const DateAndRecurrenceInput = ({
                 defaultValues={editState.values}
                 onChange={handleRecurringDateChange}
                 onDelete={handleDelete}
+                isProductSet
               />
             </Popover.Content>
           </Popover>

package/src/product-set/control/ProductSetRecurrenceControl.tsx

@@ -56,10 +56,14 @@ export const ProductSetRecurrenceControl = ({
             {formatDate(menuRecurrence.startDate, {
               dateStyle: "medium",
             })}{" "}
-            -{" "}
-            {formatDate(menuRecurrence.endDate, {
-              dateStyle: "medium",
-            })}
+            {menuRecurrence.endDate && (
+              <>
+                {"- "}
+                {formatDate(menuRecurrence.endDate, {
+                  dateStyle: "medium",
+                })}
+              </>
+            )}
           </span>
 
           <div

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

@@ -72,6 +72,7 @@ export function ProductCategoriesControl({
     providerHasMap,
     expandedProductCategories,
     setExpandedProductCategories,
+    zones,
   } = useContext(ProductSetLoadingContext);
   const form = useFormContext<ProductSetFormValues>();
   const [isSelectCategoryVisible, setIsSelectCategoryVisible] = useState(false);
@@ -287,6 +288,7 @@ export function ProductCategoriesControl({
                     quantityType={productCategory.quantityType}
                     hasTicket={productCategory?.hasTicket}
                     stepIndex={stepIndex}
+                    zones={zones}
                     productCategoryIndex={index}
                     categoryType={productCategory.type}
                   />

package/src/product-set/form/ProductSetForm.stories.tsx

@@ -74,6 +74,7 @@ Default.args = {
     {
       createdAt: "2023-05-08T15:55:28.000+03:00",
       deletedAt: null,
+      defaultDuration: 30,
       description: "Zone description 2",
       id: 2,
       image: null,

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

@@ -14,6 +14,7 @@ import { generateUuid } from "@licklist/core/dist/Services";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 
 import { CategoryType } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
+import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
 import { ProductControl, ProductControlProps, ProductSetFormValues } from "..";
 import { SortableTree } from "../../sortable-tree";
 import { CreateProductSetItem } from "../item/CreateProductSetItem";
@@ -32,6 +33,7 @@ interface ProductsControlProps extends WithIsLoading {
   productCategoryIndex: number;
   hasTicket?: boolean;
   categoryType: CategoryType;
+  zones?: Zone[];
 }
 
 const getDefaultProductValue = (sort: number): Product => ({
@@ -74,6 +76,7 @@ export function ProductsControl({
   productCategoryIndex,
   hasTicket,
   categoryType,
+  zones,
 }: ProductsControlProps) {
   const { t } = useTranslation("Design");
   const form = useFormContext<ProductSetFormValues>();
@@ -89,6 +92,12 @@ export function ProductsControl({
     getValues,
   } = form;
 
+  const zoneId = watch(
+    `steps.${stepIndex}.productCategories.${productCategoryIndex}.zoneId`
+  );
+
+  const catergoryZone = zones?.find((zone) => zone.id === Number(zoneId));
+
   const productControlFieldName =
     `steps.${stepIndex}.productCategories.${productCategoryIndex}.products` as const;
 
@@ -245,6 +254,7 @@ export function ProductsControl({
                     onProductNameChange={onChange}
                     hasTicket={hasTicket}
                     categoryType={categoryType}
+                    zoneDuration={catergoryZone?.defaultDuration}
                   />
                 }
                 onDelete={() => onProductRemove(index)}