@licklist/design 0.44.486-dev.7 → 0.44.486-dev.71

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -0,0 +1,118 @@
+import { PAYMENT_TYPE_TRANSLATE_KEYS } from "../hooks/useTableData";
+import {
+  AMOUNT_TOTAL,
+  AMOUNT_WITH_DISCOUNT,
+  OrderItemsTableProps,
+  REMAINING_TO_PAY,
+  SummaryItem,
+  TOTAL_PAID,
+} from "../types";
+import {
+  calculateTotalDiscount,
+  calculateTotalPrice,
+  getExternalPaymentDetail,
+  getPaymentValueByType,
+} from "./index";
+
+const paymentNotProcessedSummary = ({
+  order,
+  externalDiscount,
+  paymentDetail,
+}: OrderItemsTableProps) => {
+  const externalPaymentDetail = paymentDetail
+    ? getExternalPaymentDetail(paymentDetail)
+    : undefined;
+
+  const total = calculateTotalPrice(order, externalPaymentDetail);
+
+  const summaryItems: SummaryItem[] = [
+    {
+      translateKey: AMOUNT_TOTAL,
+      price: total,
+    },
+  ];
+
+  if (externalDiscount) {
+    summaryItems.push({
+      price: externalDiscount,
+      translateKey: AMOUNT_WITH_DISCOUNT,
+    });
+  }
+
+  if (externalPaymentDetail) {
+    return [...summaryItems, ...getExternalPaymentDetail(paymentDetail)];
+  }
+
+  return summaryItems;
+};
+
+const processedPaymentSummary = ({
+  order,
+  paymentDetail,
+}: OrderItemsTableProps) => {
+  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: AMOUNT_TOTAL,
+      price: total,
+    },
+  ];
+
+  if (totalDiscount) {
+    summaryItems.push({
+      translateKey: AMOUNT_WITH_DISCOUNT,
+      price: totalWithDiscount < 0 ? 0 : totalWithDiscount,
+    });
+  }
+
+  if (paymentDetail && !order.payments.length) {
+    return [...summaryItems, ...externalPaymentDetail];
+  }
+
+  summaryItems.push({
+    translateKey: TOTAL_PAID,
+    price: totalWithDiscount <= 0 ? 0 : order.totalAmount,
+  });
+  if (totalWithDiscount <= 0) {
+    return summaryItems;
+  }
+  summaryItems = [...summaryItems, ...externalPaymentDetail];
+
+  if (totalWithDiscount > order.totalAmount) {
+    summaryItems.push({
+      translateKey: REMAINING_TO_PAY,
+      price: totalWithDiscount - order.totalAmount,
+    });
+  }
+  return summaryItems;
+};
+
+export const getOrderSummaryItems = ({
+  order,
+  externalDiscount,
+  paymentDetail,
+  isPaymentProcessed,
+}: OrderItemsTableProps): SummaryItem[] => {
+  if (!isPaymentProcessed) {
+    return paymentNotProcessedSummary({
+      order,
+      externalDiscount,
+      paymentDetail,
+    });
+  }
+
+  return processedPaymentSummary({ order, paymentDetail });
+};

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 (!isAvailableTimesFormValid) {
+      return;
+    }
+    if (next?.startTime && next?.endTime) {
+      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 values = {
       rrule: next.rrule,
       startDate: next.startDate,
       endDate: next.endDate,
       startTime: next.startTime,
       endTime: next.endTime,
+      ...availableTimesFormRef.current.getValues(),
     } 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

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

@@ -11,11 +11,13 @@ import { Icon } from "../../static";
 export interface ProductSetRecurrenceControlProps {
   menuRecurrence?: { _id: string } & Partial<ProductSetRecurrence>;
   onEdit?: (onEdit: Partial<ProductSetRecurrence>) => void;
+  errorMessage?: string;
 }
 
 export const ProductSetRecurrenceControl = ({
   menuRecurrence,
   onEdit,
+  errorMessage,
 }: ProductSetRecurrenceControlProps) => {
   const { formatDate } = useIntl();
   const { t } = useTranslation("Design");
@@ -30,7 +32,7 @@ export const ProductSetRecurrenceControl = ({
 
   return (
     <div
-      className="sortable-tree-root"
+      className="sortable-tree-root flex-column"
       style={{
         transform: CSS.Translate.toString(transform),
         transition,
@@ -56,10 +58,14 @@ export const ProductSetRecurrenceControl = ({
             {formatDate(menuRecurrence.startDate, {
               dateStyle: "medium",
             })}{" "}
-            -{" "}
-            {formatDate(menuRecurrence.endDate, {
-              dateStyle: "medium",
-            })}
+            {menuRecurrence.endDate && (
+              <>
+                {"- "}
+                {formatDate(menuRecurrence.endDate, {
+                  dateStyle: "medium",
+                })}
+              </>
+            )}
           </span>
 
           <div
@@ -80,6 +86,9 @@ export const ProductSetRecurrenceControl = ({
           {getHumanReadableDate(menuRecurrence)}
         </span>
       </div>
+      <div className={`manual-form-error ${!errorMessage && "d-none"}`}>
+        {errorMessage}
+      </div>
     </div>
   );
 };