@licklist/design 0.44.486-dev.83 → 0.44.486-dev.9

package/src/iframe/index.ts

@@ -3,12 +3,14 @@ export {
   EventBookingView,
   EventOrderSummary,
   EventTables,
+  EventDetails,
   IframeEventCard,
   TicketDescription,
   EventBookingProducts,
   EventOrderShortSummary,
   SummaryDataType,
   EventDescription,
+  EventCalendar,
   EventProductSets,
   EventProductSetsProps,
   IframeEventVenueMap,
@@ -41,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

@@ -14,7 +14,7 @@ export const BookingSummary = ({
   time,
   menuSteps,
   formValues,
-  shouldHidePeopleAmount,
+  isNotShownPeopleAmount,
   eventName,
   transactionFee = 0,
   productsWithErrors,
@@ -65,7 +65,7 @@ export const BookingSummary = ({
                   />
                 );
               })}
-              {!shouldHidePeopleAmount && peopleAmount > 0 && (
+              {!isNotShownPeopleAmount && peopleAmount > 0 && (
                 <>
                   <hr />
                   <div className="d-flex justify-content-between mt-3">

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

@@ -12,7 +12,7 @@ export type BookingSummaryProps = {
     [key: string]: Order;
   };
   totalWithDiscount?: number;
-  shouldHidePeopleAmount?: boolean;
+  isNotShownPeopleAmount?: boolean;
   eventName?: string;
   hasPeopleInput?: boolean;
   transactionFee?: number;

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

@@ -5,8 +5,6 @@ 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,6 +212,7 @@ 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

@@ -22,13 +22,13 @@ import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMappe
 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 { MIN_SPEND_ERROR, STEP_FORM_ID } from "../../constants";
+import { STEP_FORM_ID } from "../../constants";
 import { ErrorModal } from "../ErrorModal/ErrorModal";
 import { PageBody } from "../../../page/components/PageBody";
 import {
   CalendarSelect,
   CalendarSelectOption,
-} from "../../../../calendar/components/CalendarSelect";
+} from "../../../event/event-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,19 +117,12 @@ export const CalendarStepsForm = forwardRef<
         );
         return;
       }
-      const orderError = verifyCategoryItems(
-        values,
-        step.productCategories,
-        isLastMenuStep
-      );
+      const categoryError = verifyCategoryItems(values, step.productCategories);
 
-      if (orderError) {
-        const categoryId = orderError.id
-          ? `category_${orderError.id}`
-          : MIN_SPEND_ERROR;
-        setStepFormError(orderError.message);
-        setError(categoryId as never, {
-          message: orderError.message,
+      if (categoryError) {
+        setStepFormError(categoryError.message);
+        setError(`category_${categoryError.id}`, {
+          message: categoryError.message,
         });
         return;
       }
@@ -370,5 +363,3 @@ export const CalendarStepsForm = forwardRef<
     );
   }
 );
-
-CalendarStepsForm.displayName = "CalendarStepsForm";

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

@@ -84,9 +84,23 @@ 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 } = product;
+          const {
+            isRequired = false,
+            maxAmount = 0,
+            minAmount = 0,
+            minSpend,
+            price,
+          } = 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/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx

@@ -3,7 +3,6 @@ import clsx from "clsx";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { FieldValues, RefCallBack, UseFormClearErrors } from "react-hook-form";
-import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
 import { NumberInput } from "../NumberInput";
 import { Product, ProductCategory } from "../../../../../../types";
 
@@ -12,10 +11,8 @@ interface FormOrderItem {
   name: string;
   price: number;
   productsCategoryId: number;
-  zoneId?: Zone["id"];
   deposit?: number | null;
   quantity: number;
-  capacity?: number | null;
 }
 
 interface ProductQuantityInputProps {
@@ -32,7 +29,7 @@ interface ProductQuantityInputProps {
 export const ProductQuantityInput = ({
   product,
   category,
-  onChange: _onChange,
+  onChange,
   clearErrors,
   refCallback,
   productInfo,
@@ -41,16 +38,14 @@ export const ProductQuantityInput = ({
 }: ProductQuantityInputProps) => {
   const { t } = useTranslation("Design");
 
-  const onChange = (quantity: number | null) => {
-    _onChange({
+  const onClick = () => {
+    onChange({
       id: product.id,
       name: product.name,
       deposit,
       price: product.price,
       productsCategoryId: category.id,
-      zoneId: category.zone?.id,
-      quantity,
-      capacity: product?.capacity,
+      quantity: productInfo?.quantity ? 0 : 1,
     });
   };
 
@@ -61,7 +56,6 @@ export const ProductQuantityInput = ({
       </div>
     );
   }
-
   if (product?.maxAmount === 1) {
     return (
       <Button
@@ -73,26 +67,46 @@ export const ProductQuantityInput = ({
           }`,
           invalid && "error"
         )}
-        onClick={() => onChange(productInfo?.quantity ? 0 : 1)}
+        onClick={onClick}
       >
         {t(`Design:${productInfo?.quantity ? "unselect" : "select"}`)}
       </Button>
     );
   }
-
   return (
     <NumberInput
       ref={refCallback}
       onChange={(val) => {
-        onChange(val || null);
+        onChange({
+          id: product.id,
+          name: product.name,
+          deposit,
+          price: product.price,
+          productsCategoryId: category.id,
+          quantity: val || null,
+        });
         clearErrors(`${product.id}` as const);
       }}
       onArrowDown={() => {
-        onChange(productInfo?.quantity - 1 || 0);
+        onChange({
+          id: product.id,
+          name: product.name,
+          deposit,
+          price: product.price,
+          productsCategoryId: category.id,
+          quantity: productInfo?.quantity - 1 || 0,
+        });
         clearErrors(`${product.id}` as const);
       }}
       onArrowUp={() => {
-        onChange((productInfo?.quantity ?? 0) + 1);
+        onChange({
+          id: product.id,
+          name: product.name,
+          deposit,
+          price: product.price,
+          productsCategoryId: category.id,
+          quantity: (productInfo?.quantity ?? 0) + 1,
+        });
         clearErrors(`${product.id}` as const);
       }}
       min={0}

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

@@ -10,14 +10,12 @@ 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");
@@ -49,16 +47,15 @@ export const ErrorModal = ({
       </ModalHeader>
       <ModalBody className="confirmation-modal-body">
         <div className="d-flex m-5 justify-content-center manual-form-error">
-          {message ||
-            (messageKey ? (
-              t(messageKey)
-            ) : (
-              <Trans
-                t={t}
-                i18nKey="pleaseSelectAtLeastFrom"
-                values={{ min: 1, type: "item", from: "those categories" }}
-              />
-            ))}
+          {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,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,46 +1,25 @@
 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";
 
 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
+    productCategories?: ProductCategory[]
   ): CategoryError | void => {
-    let errorMessage: { id?: number; message: string } | void;
+    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);
-
-      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;
@@ -68,16 +47,6 @@ export const useCategoryVerification = () => {
       }
     });
 
-    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

@@ -24,19 +24,12 @@ export const LeftBlock = ({
 
   return (
     <div className={clsx("left-block", className)} {...props}>
-      <div className="navigation">
-        {pageTitle && (
-          <>
-            {typeof pageTitle === "string" ? (
-              <div className="title">{pageTitle}</div>
-            ) : (
-              pageTitle
-            )}
-          </>
-        )}
-
-        {component}
-      </div>
+      {pageTitle && (
+        <div className="navigation">
+          <div className="title">{pageTitle}</div>
+          {component}
+        </div>
+      )}
       <div
         className={clsx("left-block-container", childrenClassName)}
         style={leftBlockStyles}

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/DateAndRecurrenceInput.tsx

@@ -5,11 +5,8 @@ import { Form, OverlayTrigger, Popover } from "react-bootstrap";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useClickAway } from "react-use";
-import { DateTime } from "luxon";
-import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { ProductSetRecurrence } from "@licklist/core/dist/DataMapper/Product/ProductSetRecurrenceDataMapper";
 import { DndContext } from "@dnd-kit/core";
-import { TIME_FORMAT } from "@licklist/core/dist/Config/Date";
 import {
   SortableContext,
   verticalListSortingStrategy,
@@ -23,11 +20,6 @@ import {
   RecurringDatePickerInputValues,
 } from "../../recurring-date-picker-input/RecurringDatePickerInput";
 import { ProductSetRecurrenceControl } from "./ProductSetRecurrenceControl";
-import {
-  AvailableTimesControl,
-  AvailableTimesControlRef,
-} from "../../zone/form/components/AvailableTimesControl";
-
 // eslint-disable-next-line max-len
 
 export interface DateAndRecurrenceInputValues {
@@ -36,16 +28,10 @@ export interface DateAndRecurrenceInputValues {
 
 interface DateAndRecurrenceInputProps {
   isEventEditProductSet?: boolean;
-  workHours?: WorkHour[];
-  providerHasBookingManagement: boolean;
-  isLoading?: boolean;
 }
 
 export const DateAndRecurrenceInput = ({
   isEventEditProductSet,
-  providerHasBookingManagement,
-  workHours,
-  isLoading,
 }: DateAndRecurrenceInputProps) => {
   const {
     control,
@@ -56,9 +42,6 @@ export const DateAndRecurrenceInput = ({
     clearErrors,
   } = useFormContext<DateAndRecurrenceInputValues>();
 
-  const [availableTimes, setAvailableTimes] = useState<string[]>([]);
-  const availableTimesFormRef = useRef<AvailableTimesControlRef>();
-
   const { fields, append, update, move } = useFieldArray({
     name: "menuRecurrences",
     control,
@@ -95,46 +78,13 @@ export const DateAndRecurrenceInput = ({
   const { t } = useTranslation("Design");
 
   // in this method we should fulfill the form with a proper data
-  const handleRecurringDateChange = async (
-    next: RecurringDatePickerInputValues
-  ) => {
-    const isAvailableTimesFormValid =
-      await availableTimesFormRef.current?.trigger();
-
-    if (next?.startTime && next?.endTime && isAvailableTimesFormValid) {
-      const startTime = DateTime.fromISO(next.startTime);
-      const endTime = DateTime.fromISO(next.endTime);
-      const { availableTimes } = availableTimesFormRef.current.getValues();
-      const validAvalilableTimes = availableTimes.every((time) => {
-        const currentAvailableTime = DateTime.fromFormat(time, TIME_FORMAT);
-
-        return (
-          currentAvailableTime.diff(startTime, "minutes").minutes >= 0 &&
-          currentAvailableTime.diff(endTime, "minutes").minutes <= 0
-        );
-      });
-      if (!validAvalilableTimes) {
-        availableTimesFormRef.current.setError("availableTimes", {
-          message: t("Validation:fieldTimeBetween", {
-            attribute: t("Design:startTimesSmall"),
-            min: startTime.toFormat(TIME_FORMAT),
-            max: endTime.toFormat(TIME_FORMAT),
-          }),
-        });
-
-        return;
-      }
-    }
-
-    const availableTime = availableTimesFormRef?.current?.getValues()?.availableTimes || null;
-
+  const handleRecurringDateChange = (next: RecurringDatePickerInputValues) => {
     const values = {
       rrule: next.rrule,
       startDate: next.startDate,
       endDate: next.endDate,
       startTime: next.startTime,
       endTime: next.endTime,
-      availableTimes: availableTime,
     } as Partial<ProductSetRecurrence>;
 
     if (editState.values?.id) {
@@ -157,7 +107,6 @@ export const DateAndRecurrenceInput = ({
     // Hotfix for an issue with Popover close & open actions
     setTimeout(() => {
       setEditState({ index, values: next });
-      setAvailableTimes(next.availableTimes || []);
       setIsDatePopoverVisible(() => true);
     }, 100);
   };
@@ -227,25 +176,7 @@ export const DateAndRecurrenceInput = ({
                 defaultValues={editState.values}
                 onChange={handleRecurringDateChange}
                 onDelete={handleDelete}
-              >
-                {providerHasBookingManagement && (
-                  <AvailableTimesControl
-                    workHours={workHours}
-                    isLoading={isLoading}
-                    defaultValues={availableTimes}
-                    ref={availableTimesFormRef}
-                    errorMessage={
-                      errors?.menuRecurrences?.[`${editState?.index}`]
-                        ?.availableTimes?.message
-                    }
-                    clearErrorMessage={() =>
-                      clearErrors(
-                        `menuRecurrences.${editState?.index}.availableTimes`
-                      )
-                    }
-                  />
-                )}
-              </RecurringDatePickerInput>
+              />
             </Popover.Content>
           </Popover>
         }
@@ -270,10 +201,6 @@ export const DateAndRecurrenceInput = ({
                   key={menuRecurrence._id}
                   menuRecurrence={menuRecurrence}
                   onEdit={() => handleOnEdit(menuRecurrence, index)}
-                  errorMessage={
-                    errors?.menuRecurrences?.[`${index}`]?.availableTimes
-                      ?.message
-                  }
                 />
               ))}
             </SortableContext>