@licklist/design 0.44.486-dev.8 → 0.44.486-dev.80

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

@@ -24,12 +24,19 @@ export const LeftBlock = ({
 
   return (
     <div className={clsx("left-block", className)} {...props}>
-      {pageTitle && (
-        <div className="navigation">
-          <div className="title">{pageTitle}</div>
-          {component}
-        </div>
-      )}
+      <div className="navigation">
+        {pageTitle && (
+          <>
+            {typeof pageTitle === "string" ? (
+              <div className="title">{pageTitle}</div>
+            ) : (
+              pageTitle
+            )}
+          </>
+        )}
+
+        {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,
     },
-    isNotShownPeopleAmount: true,
+    shouldHidePeopleAmount: true,
     menuSteps: [],
   },
 };

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,6 @@ 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,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/{iframe/event/event-details/components/number-of-people-input → number-of-people-input}/NumberOfPeopleInput.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { useFormContext, Controller } from "react-hook-form";
-import { RenderNumberOfPeopleInputComponent } from "./component";
+import { RenderNumberOfPeopleInputComponent } from "./components";
 
 const NUMBER_OF_PEOPLE = "numberOfPeople";
 

package/src/number-of-people-input/components/RenderNumberOfPeopleInputComponent.stories.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import { Meta } from "@storybook/react";
+import { RenderNumberOfPeopleInputComponent } from "./RenderNumberOfPeopleInputComponent";
+
+export default {
+  title: "NumberOfPeopleInput/RenderNumberOfPeopleInputComponent",
+  component: RenderNumberOfPeopleInputComponent,
+} as Meta;
+
+const productCategories = [
+  {
+    id: 1,
+    name: "Early Bird General Admission",
+    products: [
+      {
+        id: 7,
+        name: "Beer",
+        description: `Ticket is valid for students and non students. 
+            You do not need student ID for this event but do require regular age ID e.g. driving licence or passport. 
+            Ticket valid for entry before 11.30pm for 12.30am showtime.`,
+        minQuantity: 1,
+        maxQuantity: 10,
+        price: 1,
+      },
+      {
+        id: 8,
+        name: "Wine",
+        description: `Ticket is valid for students and non students.
+             You do not need student ID for this event but do require regular age ID e.g. driving licence or passport.
+              Ticket valid for entry before 11.30pm for 12.30am showtime.`,
+        minQuantity: 1,
+        maxQuantity: 10,
+        price: 1,
+        isRequired: true,
+      },
+    ],
+  },
+  {
+    id: 2,
+    name: "Nice",
+    products: [
+      {
+        id: 3,
+        name: "Beer",
+        description: `Ticket is valid for students and non students. 
+            You do not need student ID for this event but do require regular age ID e.g. driving licence or passport. 
+            Ticket valid for entry before 11.30pm for 12.30am showtime.`,
+        minQuantity: 1,
+        maxQuantity: 10,
+        price: 1,
+      },
+      {
+        id: 5,
+        name: "Wine",
+        description: `Ticket is valid for students and non students.
+             You do not need student ID for this event but do require regular age ID e.g. driving licence or passport.
+              Ticket valid for entry before 11.30pm for 12.30am showtime.`,
+        minQuantity: 1,
+        maxQuantity: 10,
+        price: 1,
+      },
+    ],
+  },
+];
+
+const menus = [
+  {
+    id: 1,
+    name: "Menu 1",
+    menuSteps: [
+      {
+        id: 1,
+        name: "Burger",
+        productCategories: productCategories,
+      },
+    ],
+  },
+];
+
+export function Default() {
+  const [peopleAmount, setPeopleAmount] = useState(0);
+
+  return (
+    <div>
+      <RenderNumberOfPeopleInputComponent
+        peopleAmount={peopleAmount}
+        onChangePeopleAmount={(amount) => setPeopleAmount(amount)}
+        peopleAmountError={false}
+      />
+    </div>
+  );
+}

package/src/{iframe/event/event-details/components/number-of-people-input/component → number-of-people-input/components}/RenderNumberOfPeopleInputComponent.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import clsx from "clsx";
-import { NumberInput } from "../../../../../order-process/components/CategoryProduct/components/NumberInput";
+import { NumberInput } from "../../iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput";
 
 const NUMBER_OF_PEOPLE = "numberOfPeople";
 
-interface RenderNumberOfPeopleInputComponentProps {
+export interface RenderNumberOfPeopleInputComponentProps {
   onChangePeopleAmount: (value: number) => void;
   peopleAmount: number;
-  peopleAmountError: boolean;
+  peopleAmountError?: boolean;
 }
 
 export const RenderNumberOfPeopleInputComponent = ({

package/src/number-of-people-input/components/index.ts

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

package/src/number-of-people-input/index.ts

@@ -0,0 +1,2 @@
+export * from "./NumberOfPeopleInput";
+export * from "./components";

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

@@ -5,8 +5,11 @@ 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,
@@ -20,6 +23,11 @@ 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 {
@@ -28,10 +36,16 @@ export interface DateAndRecurrenceInputValues {
 
 interface DateAndRecurrenceInputProps {
   isEventEditProductSet?: boolean;
+  workHours?: WorkHour[];
+  providerHasBookingManagement: boolean;
+  isLoading?: boolean;
 }
 
 export const DateAndRecurrenceInput = ({
   isEventEditProductSet,
+  providerHasBookingManagement,
+  workHours,
+  isLoading,
 }: DateAndRecurrenceInputProps) => {
   const {
     control,
@@ -42,6 +56,9 @@ export const DateAndRecurrenceInput = ({
     clearErrors,
   } = useFormContext<DateAndRecurrenceInputValues>();
 
+  const [availableTimes, setAvailableTimes] = useState<string[]>([]);
+  const availableTimesFormRef = useRef<AvailableTimesControlRef>();
+
   const { fields, append, update, move } = useFieldArray({
     name: "menuRecurrences",
     control,
@@ -78,13 +95,46 @@ export const DateAndRecurrenceInput = ({
   const { t } = useTranslation("Design");
 
   // in this method we should fulfill the form with a proper data
-  const handleRecurringDateChange = (next: RecurringDatePickerInputValues) => {
+  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 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) {
@@ -107,6 +157,7 @@ export const DateAndRecurrenceInput = ({
     // Hotfix for an issue with Popover close & open actions
     setTimeout(() => {
       setEditState({ index, values: next });
+      setAvailableTimes(next.availableTimes || []);
       setIsDatePopoverVisible(() => true);
     }, 100);
   };
@@ -176,7 +227,25 @@ 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>
         }
@@ -201,6 +270,10 @@ export const DateAndRecurrenceInput = ({
                   key={menuRecurrence._id}
                   menuRecurrence={menuRecurrence}
                   onEdit={() => handleOnEdit(menuRecurrence, index)}
+                  errorMessage={
+                    errors?.menuRecurrences?.[`${index}`]?.availableTimes
+                      ?.message
+                  }
                 />
               ))}
             </SortableContext>

package/src/product-set/control/ProductSetControl.stories.tsx

@@ -67,7 +67,6 @@ Empty.args = {
     type: "sale",
     termsAndConditions: "",
     operationalCost: OPERATIONAL_COST_CUSTOMER,
-    isDefault: false,
     menuRecurrence: {
       id: 38,
       menuId: 257,
@@ -87,7 +86,6 @@ Default.args = {
     type: "sale",
     termsAndConditions: "",
     operationalCost: OPERATIONAL_COST_CUSTOMER,
-    isDefault: true,
     menuRecurrence: {
       id: 38,
       menuId: 257,

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

@@ -7,8 +7,13 @@ 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";
@@ -16,6 +21,7 @@ import { EmailTemplate } from "@licklist/core/dist/DataMapper/Notification/Email
 import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import { ruleForUrlWithProtocol } from "@licklist/plugins/dist/validation/Rules/urlRule";
+import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { WarningMessage } from "../../static";
 import { SelectItem } from "../../types/generic/SelectItem";
 import {
@@ -34,6 +40,12 @@ 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;
@@ -45,9 +57,9 @@ export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   type: ProductSetType;
   termsAndConditions: string;
   thankYouPageUrl: string;
-  isDefault: boolean;
   operationalCost: OperationalCostType;
   productGroups?: SelectItem[];
+  relyOnPeopleType?: RelyOnPeopleType | null;
   fieldSetId?: number;
   steps?: Step[];
   emailTemplates?: TemplateItem[];
@@ -72,6 +84,8 @@ export interface ProductSetControlProps {
   fieldSets?: FieldSet[];
   showEmailTemplate?: boolean;
   showSmsTemplate?: boolean;
+  workHours?: WorkHour[];
+  providerHasBookingManagement?: boolean;
 }
 
 export function ProductSetControl({
@@ -85,6 +99,8 @@ export function ProductSetControl({
   isCreateAction,
   showEmailTemplate,
   showSmsTemplate,
+  workHours,
+  providerHasBookingManagement = false,
 }: ProductSetControlProps) {
   const { t } = useTranslation(["Design", "Validation", "Notification"]);
   const {
@@ -100,6 +116,7 @@ export function ProductSetControl({
 
   const nameId = useId();
   const termsAndConditionsId = useId();
+  const relyOnPeopleTypeId = useId();
 
   return (
     <Row
@@ -145,6 +162,9 @@ export function ProductSetControl({
         {isCreateAction && (
           <DateAndRecurrenceInput
             isEventEditProductSet={isEventEditProductSet}
+            workHours={workHours}
+            isLoading={isLoading}
+            providerHasBookingManagement={providerHasBookingManagement}
           />
         )}
 
@@ -176,15 +196,6 @@ export function ProductSetControl({
                 </Form.Group>
               )}
             /> */}
-          {/* <Form.Check
-              {...register("isDefault")}
-              id="isDefaultId"
-              name="isDefault"
-              label={t("Design:setAsDraft")}
-              custom
-              className="is-default-checkbox"
-              disabled={isLoading}
-            /> */}
 
           <Form.Group>
             <Form.Label className="mb-0">
@@ -220,6 +231,29 @@ 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