@licklist/design 0.44.486-dev.59 → 0.44.486-dev.6

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

@@ -1,7 +1,10 @@
-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}`;
+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;
 };

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

@@ -1,82 +1,52 @@
-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 { Order } from "src/types";
+import { MenuStep, 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>,
-    productCategories?: ProductCategory[],
-    isLastPage?: boolean
+    step: MenuStep
   ): CategoryError | void => {
-    let errorMessage: { id?: number; message: string } | void;
+    let errorMessage;
+
     const productArray = Object.values(values).filter(
       (product) => product?.quantity > 0
     );
-    const sumOfMinSpends = productCategories.reduce((acc, productCategory) => {
-      const { products } = productCategory;
-      const selectedProducts = products.filter((product) =>
-        productArray.map((el) => el.id).includes(product?.id)
-      );
-      const productMinSpendsSum = selectedProducts.reduce((sum, product) => {
-        const quantity =
-          productArray.find((selected) => selected.id === product.id)
-            ?.quantity || 1;
-        return sum + product.minSpend * quantity;
-      }, 0);
-
-      return acc + productMinSpendsSum;
-    }, 0);
-
-    const totalPrice = productArray.reduce(
-      (total, product) => total + product.price * 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;
-      }
-
-      if (maxSubItems && categoryProductsQuantity > maxSubItems) {
-        const message = t("Validation:fieldMaxNumber", {
-          max: maxSubItems,
-          attribute: `number of products in the ${name} category`,
-        });
-        errorMessage = { id, message };
+    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 (totalPrice < sumOfMinSpends && !errorMessage && isLastPage) {
-      const message = t("Design:minimumSpendSumValidation", {
-        minSpend: formatNumber(sumOfMinSpends, {
-          style: "currency",
-          currency: Currency.GBP,
-        }),
-      }) as string;
-      errorMessage = { message };
-    }
+    );
 
     return errorMessage;
   };

package/src/iframe/order-process/constants.ts

@@ -1,2 +1 @@
 export const STEP_FORM_ID = "STEP_FORM";
-export const MIN_SPEND_ERROR = "MIN_SPEND_ERROR";

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 "../../calendar/components/CalendarSelect";
+import { CalendarSelect } from "../event/event-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,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/iframe/payment/payment-page/PaymentPage.stories.tsx

@@ -38,7 +38,7 @@ Default.args = {
       },
       numberOfPeople: 1,
     },
-    shouldHidePeopleAmount: true,
+    isNotShownPeopleAmount: true,
     menuSteps: [],
   },
 };

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

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

package/src/index.ts

@@ -39,6 +39,3 @@ 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";
-export * from "./number-of-people-input";

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/control/ProductSetControl.tsx

@@ -7,13 +7,8 @@ import {
   OPERATIONAL_COST_CUSTOMER,
   OPERATIONAL_COST_PROVIDER,
   OPERATIONAL_COST_TYPES,
-  RELY_ON_PEOPLE_QUANTITY,
-  RELY_ON_PEOPLE_PRODUCT_CAPACITY_QUANTITY,
-  RELY_ON_PEOPLE_PRODUCT_QUANTITY,
   OperationalCostType,
   ProductSetType,
-  RELY_ON_PEOPLE_TYPES,
-  RelyOnPeopleType,
 } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import { useId } from "@react-aria/utils";
 import { FieldSet } from "@licklist/core/dist/DataMapper/Order/FieldSetDataMapper";
@@ -39,12 +34,6 @@ const OPERATIONAL_COST_TITLES = {
   [OPERATIONAL_COST_CUSTOMER]: "operationalCostCustomer",
 } as const;
 
-const RELY_ON_PEOPLE_TYPE_TITLES = {
-  [RELY_ON_PEOPLE_PRODUCT_CAPACITY_QUANTITY]: "peopleProductCapacityQuantity",
-  [RELY_ON_PEOPLE_PRODUCT_QUANTITY]: "peopleProductQuantity",
-  [RELY_ON_PEOPLE_QUANTITY]: "peopleQuantity",
-};
-
 export interface TemplateItem {
   id: string;
   value: EmailTemplate | SmsTemplate;
@@ -59,7 +48,6 @@ export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   isDefault: boolean;
   operationalCost: OperationalCostType;
   productGroups?: SelectItem[];
-  relyOnPeopleType?: RelyOnPeopleType | null;
   fieldSetId?: number;
   steps?: Step[];
   emailTemplates?: TemplateItem[];
@@ -112,7 +100,6 @@ export function ProductSetControl({
 
   const nameId = useId();
   const termsAndConditionsId = useId();
-  const relyOnPeopleTypeId = useId();
 
   return (
     <Row
@@ -233,29 +220,6 @@ export function ProductSetControl({
             </Form.Control>
           </Form.Group>
 
-          <Form.Group controlId={relyOnPeopleTypeId}>
-            <Form.Label>{t("peopleQuantityType")}</Form.Label>
-            <Form.Control
-              {...register("relyOnPeopleType")}
-              as="select"
-              defaultValue={null}
-            >
-              <option value="">{t("notRequired")}</option>
-              {Object.keys(RELY_ON_PEOPLE_TYPES).map((relyOnPeopleType) => (
-                <option
-                  value={RELY_ON_PEOPLE_TYPES[relyOnPeopleType]}
-                  key={RELY_ON_PEOPLE_TYPES[relyOnPeopleType]}
-                >
-                  {t(
-                    RELY_ON_PEOPLE_TYPE_TITLES[
-                      RELY_ON_PEOPLE_TYPES[relyOnPeopleType]
-                    ]
-                  )}
-                </option>
-              ))}
-            </Form.Control>
-          </Form.Group>
-
           <Form.Group controlId={termsAndConditionsId}>
             <Form.Label>{t("Design:termsAndConditions")}</Form.Label>
             <Form.Control

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

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

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

@@ -48,6 +48,7 @@ const getCategoryDefaultValue = (
   maxSubItems: null,
   quantityType: QUANTITY_TYPE_STANDARD,
   type: categoryType,
+  isRelyOnPeople: categoryType === CATEGORY_TYPE_TICKETS,
   isTimeRelated: false,
   collectUserInfo: false,
   hasTicket: categoryType === CATEGORY_TYPE_TICKETS,
@@ -71,7 +72,6 @@ export function ProductCategoriesControl({
     providerHasMap,
     expandedProductCategories,
     setExpandedProductCategories,
-    zones,
   } = useContext(ProductSetLoadingContext);
   const form = useFormContext<ProductSetFormValues>();
   const [isSelectCategoryVisible, setIsSelectCategoryVisible] = useState(false);
@@ -287,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

@@ -11,7 +11,6 @@ import {
 import {
   OPERATIONAL_COST_CUSTOMER,
   OPERATIONAL_COST_PROVIDER,
-  RELY_ON_PEOPLE_PRODUCT_QUANTITY,
 } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import { FieldSet } from "@licklist/core/dist/DataMapper/Order/FieldSetDataMapper";
 import { ProductSetForm, ProductSetFormProps } from "./ProductSetForm";
@@ -75,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,
@@ -105,7 +103,6 @@ Default.args = {
     termsAndConditions: "",
     isDefault: true,
     operationalCost: OPERATIONAL_COST_CUSTOMER,
-    relyOnPeopleType: RELY_ON_PEOPLE_PRODUCT_QUANTITY,
     steps: [
       {
         id: 1,
@@ -117,6 +114,7 @@ Default.args = {
             minSubItems: 1,
             maxSubItems: 10,
             quantityType: "constant",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -185,6 +183,7 @@ Default.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -203,6 +202,7 @@ Default.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -288,6 +288,7 @@ Default.args = {
             minSubItems: 0,
             maxSubItems: null,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -896,6 +897,7 @@ Valid.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -1110,6 +1112,7 @@ Valid.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,

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