@licklist/design 0.44.486-dev.18 → 0.44.486-dev.2

package/src/iframe/event/event-calendar/components/CalendarDate/CalendarDate.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import React from "react";
 import { Button } from "react-bootstrap";
 import { DateTime } from "luxon";
 import clsx from "clsx";
@@ -9,7 +9,6 @@ export type CalendarDateProps = {
   selectedDate?: DateTime;
   setSelectedDate: (date: DateTime) => void;
   isDisabled?: boolean;
-  fromPrice?: string | ReactElement | null;
 };
 
 export const CalendarDate = ({
@@ -18,7 +17,6 @@ export const CalendarDate = ({
   selectedDate,
   setSelectedDate,
   isDisabled = false,
-  fromPrice,
 }: CalendarDateProps) => {
   const onClick = () => {
     if (isDisabled) return;
@@ -39,13 +37,7 @@ export const CalendarDate = ({
       )}
       onClick={onClick}
     >
-      <div>{currentDate.day}</div>
-
-      {typeof fromPrice === "string" ? (
-        <div>{fromPrice}</div>
-      ) : (
-        <>{fromPrice}</>
-      )}
+      {currentDate.day}
     </Button>
   );
 };

package/src/iframe/event/event-calendar/components/CalendarDates/CalendarDates.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useContext, useMemo } from "react";
+import React, { useContext, useMemo } from "react";
 import { DateTime } from "luxon";
 import { EventCalendarContext } from "@licklist/plugins/dist/context/event/EventCalendarContext";
 import { CalendarWeekdays } from "../CalendarWeekdays";
@@ -6,14 +6,11 @@ import { CalendarDate } from "../CalendarDate";
 import { CalendarBaseProps } from "../../types";
 import { isSelectedDateDisabled } from "../../utils";
 
-export type CalendarDatesProps = CalendarBaseProps & {
-  fromPrice?: string | ReactElement | null;
-};
+export type CalendarDatesProps = CalendarBaseProps;
 
 export const CalendarDates = ({
   disabledDates = [],
   isLoading = false,
-  fromPrice,
 }: CalendarDatesProps) => {
   const { calendarDates, initialDate, selectedDate, setSelectedDate } =
     useContext(EventCalendarContext);
@@ -55,7 +52,6 @@ export const CalendarDates = ({
               selectedDate={selectedDate}
               setSelectedDate={setSelectedDate}
               isDisabled={isDisabled}
-              fromPrice={fromPrice}
             />
           );
         })}

package/src/iframe/index.ts

@@ -43,5 +43,5 @@ export {
 export { BackButton } from "./back-button";
 export { PoweredBy } from "./powered-by";
 export * from "./page";
-export * from "./activity-card";
+export * from "./activity-cards";
 export { CustomDateField, CustomDateFieldProps } from "./custom-fields";

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

@@ -11,7 +11,6 @@ import { BookingSummaryAccordion } from "./components/BookingSummaryAccordion";
 
 export const BookingSummary = ({
   date,
-  time,
   menuSteps,
   formValues,
   isNotShownPeopleAmount,
@@ -48,7 +47,6 @@ export const BookingSummary = ({
         <div className="event-info">
           <p className="m-0 title event-name">{eventName}</p>
           <p className="m-0">{date}</p>
-          {time && <p className="m-0">{time}</p>}
         </div>
         <hr />
 

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

@@ -6,7 +6,6 @@ export const ACCORDION_KEY = "booking-summary";
 
 export type BookingSummaryProps = {
   date: string;
-  time?: string;
   menuSteps?: MenuStep[];
   formValues?: {
     [key: string]: Order;

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

@@ -20,8 +20,8 @@ import { Step } from "@licklist/core/dist/DataMapper/Product/StepDataMapper";
 import { useTranslation } from "react-i18next";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
 import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
-import { MenuStep } from "@licklist/plugins/dist/types/context/sale/menuSteps";
 import { Category } from "./components/Category";
+import { MenuStep } from "../../../../types";
 import { STEP_FORM_ID } from "../../constants";
 import { ErrorModal } from "../ErrorModal/ErrorModal";
 import { PageBody } from "../../../page/components/PageBody";
@@ -117,7 +117,7 @@ export const CalendarStepsForm = forwardRef<
         );
         return;
       }
-      const categoryError = verifyCategoryItems(values, step.productCategories);
+      const categoryError = verifyCategoryItems(values, step);
 
       if (categoryError) {
         setStepFormError(categoryError.message);

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

@@ -1,6 +1,5 @@
-import { ProductCategory } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
 import { useTranslation } from "react-i18next";
-import { Order } from "src/types";
+import { MenuStep, Order } from "src/types";
 
 interface CategoryError {
   message: string;
@@ -13,39 +12,41 @@ export const useCategoryVerification = () => {
 
   return (
     values: Record<Order["id"], Order>,
-    productCategories?: ProductCategory[]
+    step: MenuStep
   ): CategoryError | void => {
-    let errorMessage: { id: number; message: string } | void;
+    let errorMessage;
 
     const productArray = Object.values(values).filter(
       (product) => product?.quantity > 0
     );
 
-    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;
+    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 };
+        }
       }
-
-      if (maxSubItems && categoryProductsQuantity > maxSubItems) {
-        const message = t("Validation:fieldMaxNumber", {
-          max: maxSubItems,
-          attribute: `number of products in the ${name} category`,
-        });
-        errorMessage = { id, message };
-      }
-    });
+    );
 
     return errorMessage;
   };

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

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

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

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

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

@@ -1,24 +1,7 @@
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import { PaymentDetail } from "@licklist/core/dist/DataMapper/Order/PaymentDetailDataMapper";
 
-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 SummaryItem = { translateKey: string; price: number };
 
 export type OrderItemsTableProps = {
   order?: Order;

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

@@ -314,38 +314,13 @@ export const EmailTemplateControl = React.forwardRef(
         <Row className="mb-4">
           <Form.Group as={Col}>
             <Form.Label>{t("Design:emailBody")}</Form.Label>
-
-            <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"}`}>
+            <div className="email-editor">
               <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/form/ProductCategoriesControl.tsx

@@ -72,7 +72,6 @@ export function ProductCategoriesControl({
     providerHasMap,
     expandedProductCategories,
     setExpandedProductCategories,
-    zones,
   } = useContext(ProductSetLoadingContext);
   const form = useFormContext<ProductSetFormValues>();
   const [isSelectCategoryVisible, setIsSelectCategoryVisible] = useState(false);
@@ -288,7 +287,6 @@ 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,7 +74,6 @@ 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,7 +14,6 @@ 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";
@@ -33,7 +32,6 @@ interface ProductsControlProps extends WithIsLoading {
   productCategoryIndex: number;
   hasTicket?: boolean;
   categoryType: CategoryType;
-  zones?: Zone[];
 }
 
 const getDefaultProductValue = (sort: number): Product => ({
@@ -76,7 +74,6 @@ export function ProductsControl({
   productCategoryIndex,
   hasTicket,
   categoryType,
-  zones,
 }: ProductsControlProps) {
   const { t } = useTranslation("Design");
   const form = useFormContext<ProductSetFormValues>();
@@ -92,12 +89,6 @@ 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;
 
@@ -254,7 +245,6 @@ export function ProductsControl({
                     onProductNameChange={onChange}
                     hasTicket={hasTicket}
                     categoryType={categoryType}
-                    zoneDuration={catergoryZone?.defaultDuration}
                   />
                 }
                 onDelete={() => onProductRemove(index)}

package/src/product-set/product/ProductControl.tsx

@@ -113,7 +113,6 @@ export interface ProductControlProps<T>
   productName: string;
   hasTicket?: boolean;
   categoryType?: CategoryType;
-  zoneDuration?: number;
 }
 
 export function ProductControl<T extends FormValues>({
@@ -127,7 +126,6 @@ export function ProductControl<T extends FormValues>({
   productName,
   hasTicket,
   categoryType,
-  zoneDuration,
 }: ProductControlProps<T>) {
   const {
     register,
@@ -135,7 +133,6 @@ export function ProductControl<T extends FormValues>({
     formState: { errors },
     setValue,
     getValues,
-    setError,
     watch,
   } = useFormContext<T>();
 
@@ -193,13 +190,6 @@ export function ProductControl<T extends FormValues>({
     [handleImageUploading]
   );
 
-  const onChangeGameCapacity = (value: number) => {
-    setValue(
-      `${fieldNamePrefix}.duration` as Path<T>,
-      (value * zoneDuration) as UnpackNestedValue<PathValue<T, Path<T>>>
-    );
-  };
-
   const onImageRemove = useCallback(
     (id, path) => {
       handleImageRemove(String(id), path);
@@ -227,17 +217,6 @@ export function ProductControl<T extends FormValues>({
     }
   }, [images, fieldNamePrefix, setValue]);
 
-  useEffect(() => {
-    if (categoryType !== CATEGORY_TYPE_GAME || zoneDuration) {
-      return;
-    }
-
-    setError(`${fieldNamePrefix}.duration` as Path<T>, {
-      message: t("Validation:categoryZoneDoesntHaveDefaultDuration"),
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [categoryType, zoneDuration, fieldNamePrefix]);
-
   const quantitySelector = quantityValue ?? "1";
   const quantity = QUANTITY_TYPE_LIST_DTO[quantitySelector as string];
   return (
@@ -393,14 +372,6 @@ export function ProductControl<T extends FormValues>({
             <FormNumberInput
               fieldName={`${fieldNamePrefix}.capacity`}
               label={t("capacity")}
-              rules={{
-                min: {
-                  value: 1,
-                  message: t("Validation:fieldRequired", {
-                    attribute: t("capacity"),
-                  }) as string,
-                },
-              }}
             />
           </Col>
         </Row>
@@ -412,7 +383,6 @@ export function ProductControl<T extends FormValues>({
             <FormNumberInput
               fieldName={`${fieldNamePrefix}.capacity`}
               label={t("capacity")}
-              onChange={onChangeGameCapacity}
               rules={{
                 min: {
                   value: 1,
@@ -427,7 +397,14 @@ export function ProductControl<T extends FormValues>({
             <FormNumberInput
               fieldName={`${fieldNamePrefix}.duration`}
               label={t("durationMinutes")}
-              disabled
+              rules={{
+                min: {
+                  value: 1,
+                  message: t("Validation:fieldRequired", {
+                    attribute: t("duration"),
+                  }) as string,
+                },
+              }}
             />
           </Col>
         </Row>

package/src/product-set/product/duration/ProductDurationControl.tsx

@@ -66,7 +66,7 @@ export const ProductDurationControl = <T,>({
         },
         min: {
           value: 1,
-          message: t("Validation:fieldMinNumber", {
+          message: t("Validation:fieldMin", {
             attribute: t("duration"),
           }),
         },

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -332,7 +332,7 @@ export function ProductCategoryControl({
           <Row>
             <Col>
               <Form.Group controlId={zoneId}>
-                <Form.Label>{t("Design:zone")}</Form.Label>
+                <Form.Label>Zone</Form.Label>
                 <Controller
                   control={control}
                   name={`${fieldNamePrefix}.zoneId`}
@@ -361,20 +361,10 @@ export function ProductCategoryControl({
                       }),
                     },
                     validate: (value) => {
-                      if (category.type !== CATEGORY_TYPE_GAME) {
-                        return true;
-                      }
-                      const selelctedZone = zones?.find(
-                        (zone) => zone?.id === Number(value)
-                      );
-
-                      if (!selelctedZone?.defaultDuration) {
-                        return t(
-                          "Validation:zoneDoesntHaveDefaultDuration"
-                        ) as string;
-                      }
-
-                      return true;
+                      if (value) return true;
+                      return t("Validation:fieldRequired", {
+                        attribute: t("zone"),
+                      }) as string;
                     },
                   }}
                 />

package/src/provider/working-hours-input/WorkingHoursInputDescription.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Col, Row } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { TIME_FORMAT } from "@licklist/core/dist/Config";
+import { useIntl } from "react-intl";
 import { WorkingHoursInputValues } from ".";
 import { useWeekdays } from "./utils";
 
@@ -12,9 +12,7 @@ export function WorkingHoursInputDescription() {
   const values = watch("workingHours");
   const weekdays = useWeekdays("short");
   const { t } = useTranslation("Design");
-
-  if (!values) return null;
-
+  const { formatTime } = useIntl();
   return (
     <>
       {Array.from({ length: weekdays.length }, (_, i) => i)
@@ -28,16 +26,16 @@ export function WorkingHoursInputDescription() {
                 {weekday?.end
                   ? weekday.start
                     ? t("timeInterval", {
-                        start: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT
+                        start: formatTime(
+                          DateTime.fromISO(weekday.start).toJSDate()
                         ),
-                        end: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT
+                        end: formatTime(
+                          DateTime.fromISO(weekday.end).toJSDate()
                         ),
                       })
                     : t("timeFrom", {
-                        start: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT
+                        start: formatTime(
+                          DateTime.fromISO(weekday.start).toJSDate()
                         ),
                       })
                   : null}