@licklist/design 0.44.486-dev.5 → 0.44.486-dev.51

package/src/iframe/activity-card/ActivityCard.tsx

@@ -0,0 +1,77 @@
+import React, { ReactNode } from "react";
+import clsx from "clsx";
+import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
+
+export const LAYOUT_GRID = "grid";
+export const LAYOUT_LIST = "list";
+
+type Layout = typeof LAYOUT_GRID | typeof LAYOUT_LIST;
+
+export type ActivityCardProps = {
+  title: ReactNode;
+  duration: ReactNode;
+  price: ReactNode;
+  image?: Image | null;
+  onSelect: () => void;
+  isSelected: boolean;
+  layout?: Layout;
+};
+
+export const ActivityCard = ({
+  title,
+  duration,
+  price,
+  image,
+  onSelect,
+  isSelected,
+  layout = LAYOUT_GRID,
+}: ActivityCardProps) => {
+  if (layout === LAYOUT_GRID) {
+    return (
+      <button
+        type="button"
+        className={clsx("activity-card", isSelected && "active")}
+        onClick={onSelect}
+      >
+        {image && (
+          <img className="activity-card-image" alt="" src={image.url} />
+        )}
+        <div className={clsx("d-flex", "flex-column", !image && "no-image")}>
+          <div className="activity-card-title">{title}</div>
+
+          {duration && <div>{duration}</div>}
+
+          {price && <div>{price}</div>}
+        </div>
+      </button>
+    );
+  }
+
+  return (
+    <div role="button" onClick={onSelect} onKeyPress={onSelect} tabIndex={0}>
+      <div
+        className={clsx("list-activity-card", {
+          active: isSelected,
+        })}
+      >
+        <div className="description">
+          <div className="title">{title}</div>
+          {duration && (
+            <div>
+              <p>{duration}</p>
+            </div>
+          )}
+
+          {price && <div>{price}</div>}
+        </div>
+
+        {image && (
+          <div className="image-container">
+            <img className="image" src={image.url} alt="" />
+          </div>
+        )}
+      </div>
+      <hr className="list-activity-card-hr" />
+    </div>
+  );
+};

package/src/iframe/activity-card/index.ts

@@ -0,0 +1 @@
+export * from "./ActivityCard";

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

@@ -5,7 +5,7 @@ import { IframeEventVenueMap } from "./IframeEventVenueMap";
 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 { CalendarSelect } from "../../../calendar/components/CalendarSelect";
 import { Product } from "../../../types";
 
 export default {
@@ -26,7 +26,6 @@ const MENU_STEPS = [
         maxSubItems: 1,
         quantityType: "constant",
         type: "menuItems",
-        isRelyOnPeople: false,
         collectUserInfo: false,
         isTimeRelated: false,
         hasTicket: false,

package/src/iframe/event/index.ts

@@ -13,12 +13,6 @@ export {
 } from "./event-order-short-summary";
 export { EventDescription } from "./event-description";
 export { EventProductSets, EventProductSetsProps } from "./event-product-sets";
-export {
-  EventCalendar,
-  CalendarSelect,
-  CalendarSelectProps,
-  CalendarSelectOption,
-} from "./event-calendar";
 export {
   EventStepVenueMapZones,
   EventStepVenueMapZonesProps,

package/src/iframe/index.ts

@@ -10,7 +10,6 @@ export {
   EventOrderShortSummary,
   SummaryDataType,
   EventDescription,
-  EventCalendar,
   EventProductSets,
   EventProductSetsProps,
   IframeEventVenueMap,
@@ -43,5 +42,5 @@ export {
 export { BackButton } from "./back-button";
 export { PoweredBy } from "./powered-by";
 export * from "./page";
-export * from "./activity-cards";
+export * from "./activity-card";
 export { CustomDateField, CustomDateFieldProps } from "./custom-fields";

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

@@ -11,9 +11,10 @@ import { BookingSummaryAccordion } from "./components/BookingSummaryAccordion";
 
 export const BookingSummary = ({
   date,
+  time,
   menuSteps,
   formValues,
-  isNotShownPeopleAmount,
+  shouldHidePeopleAmount,
   eventName,
   transactionFee = 0,
   productsWithErrors,
@@ -47,6 +48,7 @@ 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 />
 
@@ -63,7 +65,7 @@ export const BookingSummary = ({
                   />
                 );
               })}
-              {!isNotShownPeopleAmount && peopleAmount > 0 && (
+              {!shouldHidePeopleAmount && peopleAmount > 0 && (
                 <>
                   <hr />
                   <div className="d-flex justify-content-between mt-3">

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

@@ -6,12 +6,13 @@ export const ACCORDION_KEY = "booking-summary";
 
 export type BookingSummaryProps = {
   date: string;
+  time?: string;
   menuSteps?: MenuStep[];
   formValues?: {
     [key: string]: Order;
   };
   totalWithDiscount?: number;
-  isNotShownPeopleAmount?: boolean;
+  shouldHidePeopleAmount?: boolean;
   eventName?: string;
   hasPeopleInput?: boolean;
   transactionFee?: number;

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

@@ -5,6 +5,8 @@ export const cartSumByOrderProducts = (orderProducts?: Order[]) => {
     return 0;
   }
   return orderProducts.reduce((prevSumValue: number, product) => {
+    if (!product) return 0;
+
     return (
       prevSumValue + (product?.deposit || product?.price) * product.quantity
     );

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

@@ -212,7 +212,6 @@ const MENU_STEPS = [
         minSubItems: 1,
         quantityType: "constant" as const,
         type: "menuItems" as const,
-        isRelyOnPeople: false,
         collectUserInfo: false,
         isTimeRelated: false,
         hasTicket: false,

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

@@ -20,15 +20,15 @@ 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 { MIN_SPEND_ERROR, STEP_FORM_ID } from "../../constants";
 import { ErrorModal } from "../ErrorModal/ErrorModal";
 import { PageBody } from "../../../page/components/PageBody";
 import {
   CalendarSelect,
   CalendarSelectOption,
-} from "../../../event/event-calendar/components/CalendarSelect";
+} from "../../../../calendar/components/CalendarSelect";
 import { IframeEventVenueMap } from "../../../event/event-venue-map";
 import { VenueMapRef } from "../../../../events/event-venue-map/components/VenueMap";
 import { useCategoryVerification } from "../utils/useCategoryVerification";
@@ -117,12 +117,19 @@ export const CalendarStepsForm = forwardRef<
         );
         return;
       }
-      const categoryError = verifyCategoryItems(values, step);
+      const orderError = verifyCategoryItems(
+        values,
+        step.productCategories,
+        isLastMenuStep
+      );
 
-      if (categoryError) {
-        setStepFormError(categoryError.message);
-        setError(`category_${categoryError.id}`, {
-          message: categoryError.message,
+      if (orderError) {
+        const categoryId = orderError.id
+          ? `category_${orderError.id}`
+          : MIN_SPEND_ERROR;
+        setStepFormError(orderError.message);
+        setError(categoryId as never, {
+          message: orderError.message,
         });
         return;
       }
@@ -363,3 +370,5 @@ export const CalendarStepsForm = forwardRef<
     );
   }
 );
+
+CalendarStepsForm.displayName = "CalendarStepsForm";

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

@@ -84,23 +84,9 @@ export const CategoryProduct = ({
           // but didn't click on number input.
           // If it will be required then required check fired firstly.
 
-          const {
-            isRequired = false,
-            maxAmount = 0,
-            minAmount = 0,
-            minSpend,
-            price,
-          } = product;
+          const { isRequired = false, maxAmount = 0, minAmount = 0 } = product;
 
           const currentQuantity = value?.quantity ?? 0;
-          if (minSpend && currentQuantity * price < minSpend) {
-            return t("Design:minimumSpendSumValidation", {
-              minSpend: formatNumber(minSpend, {
-                style: "currency",
-                currency: Config.Currency.GBP,
-              }),
-            }) as string;
-          }
 
           if (!value) return true;
 

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,53 +1,83 @@
+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[],
+    isLastPage?: boolean
   ): CategoryError | void => {
-    let errorMessage;
-
+    let errorMessage: { id?: number; message: string } | void;
     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);
 
-    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 };
-        }
-      }
+      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 };
+      }
+    });
+
+    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 +1,2 @@
 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 "../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;