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

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/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";
@@ -34,6 +39,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 +56,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[];
@@ -100,6 +111,7 @@ export function ProductSetControl({
 
   const nameId = useId();
   const termsAndConditionsId = useId();
+  const relyOnPeopleTypeId = useId();
 
   return (
     <Row
@@ -176,15 +188,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 +223,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

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

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

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

package/src/product-set/form/ProductSetForm.stories.tsx

@@ -11,6 +11,7 @@ import {
 import {
   OPERATIONAL_COST_CUSTOMER,
   OPERATIONAL_COST_PROVIDER,
+  RELY_ON_PEOPLE_PRODUCT_QUANTITY,
 } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import { FieldSet } from "@licklist/core/dist/DataMapper/Order/FieldSetDataMapper";
 import { ProductSetForm, ProductSetFormProps } from "./ProductSetForm";
@@ -74,6 +75,7 @@ Default.args = {
     {
       createdAt: "2023-05-08T15:55:28.000+03:00",
       deletedAt: null,
+      defaultDuration: 30,
       description: "Zone description 2",
       id: 2,
       image: null,
@@ -101,8 +103,8 @@ Default.args = {
     name: "Example",
     type: "sale",
     termsAndConditions: "",
-    isDefault: true,
     operationalCost: OPERATIONAL_COST_CUSTOMER,
+    relyOnPeopleType: RELY_ON_PEOPLE_PRODUCT_QUANTITY,
     steps: [
       {
         id: 1,
@@ -114,7 +116,6 @@ Default.args = {
             minSubItems: 1,
             maxSubItems: 10,
             quantityType: "constant",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -183,7 +184,6 @@ Default.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -202,7 +202,6 @@ Default.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -288,7 +287,6 @@ Default.args = {
             minSubItems: 0,
             maxSubItems: null,
             quantityType: "recharging",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -849,7 +847,6 @@ Empty.args = {
     name: "Example",
     type: "sale",
     termsAndConditions: "",
-    isDefault: true,
     operationalCost: OPERATIONAL_COST_PROVIDER,
     steps: [],
   },
@@ -862,7 +859,6 @@ ServerErrors.args = {
     name: "",
     type: "sale",
     termsAndConditions: "",
-    isDefault: true,
     operationalCost: OPERATIONAL_COST_PROVIDER,
     steps: [],
   },
@@ -876,7 +872,6 @@ Valid.args = {
     name: "Example",
     type: "sale",
     termsAndConditions: "",
-    isDefault: true,
     operationalCost: OPERATIONAL_COST_CUSTOMER,
     menuRecurrences: [
       {
@@ -897,7 +892,6 @@ Valid.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -1112,7 +1106,6 @@ Valid.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,

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

@@ -14,6 +14,7 @@ import { generateUuid } from "@licklist/core/dist/Services";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 
 import { CategoryType } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
+import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
 import { ProductControl, ProductControlProps, ProductSetFormValues } from "..";
 import { SortableTree } from "../../sortable-tree";
 import { CreateProductSetItem } from "../item/CreateProductSetItem";
@@ -32,6 +33,7 @@ interface ProductsControlProps extends WithIsLoading {
   productCategoryIndex: number;
   hasTicket?: boolean;
   categoryType: CategoryType;
+  zones?: Zone[];
 }
 
 const getDefaultProductValue = (sort: number): Product => ({
@@ -74,6 +76,7 @@ export function ProductsControl({
   productCategoryIndex,
   hasTicket,
   categoryType,
+  zones,
 }: ProductsControlProps) {
   const { t } = useTranslation("Design");
   const form = useFormContext<ProductSetFormValues>();
@@ -89,6 +92,12 @@ export function ProductsControl({
     getValues,
   } = form;
 
+  const zoneId = watch(
+    `steps.${stepIndex}.productCategories.${productCategoryIndex}.zoneId`
+  );
+
+  const catergoryZone = zones?.find((zone) => zone.id === Number(zoneId));
+
   const productControlFieldName =
     `steps.${stepIndex}.productCategories.${productCategoryIndex}.products` as const;
 
@@ -245,6 +254,7 @@ export function ProductsControl({
                     onProductNameChange={onChange}
                     hasTicket={hasTicket}
                     categoryType={categoryType}
+                    zoneDuration={catergoryZone?.defaultDuration}
                   />
                 }
                 onDelete={() => onProductRemove(index)}

package/src/product-set/product/ProductControl.tsx

@@ -113,6 +113,7 @@ export interface ProductControlProps<T>
   productName: string;
   hasTicket?: boolean;
   categoryType?: CategoryType;
+  zoneDuration?: number;
 }
 
 export function ProductControl<T extends FormValues>({
@@ -126,6 +127,7 @@ export function ProductControl<T extends FormValues>({
   productName,
   hasTicket,
   categoryType,
+  zoneDuration,
 }: ProductControlProps<T>) {
   const {
     register,
@@ -190,6 +192,16 @@ export function ProductControl<T extends FormValues>({
     [handleImageUploading]
   );
 
+  const onChangeGameCapacity = (value: number) => {
+    if (!zoneDuration) {
+      return;
+    }
+    setValue(
+      `${fieldNamePrefix}.duration` as Path<T>,
+      (value * zoneDuration) as UnpackNestedValue<PathValue<T, Path<T>>>
+    );
+  };
+
   const onImageRemove = useCallback(
     (id, path) => {
       handleImageRemove(String(id), path);
@@ -372,6 +384,14 @@ export function ProductControl<T extends FormValues>({
             <FormNumberInput
               fieldName={`${fieldNamePrefix}.capacity`}
               label={t("capacity")}
+              rules={{
+                min: {
+                  value: 1,
+                  message: t("Validation:fieldRequired", {
+                    attribute: t("capacity"),
+                  }) as string,
+                },
+              }}
             />
           </Col>
         </Row>
@@ -383,7 +403,11 @@ export function ProductControl<T extends FormValues>({
             <FormNumberInput
               fieldName={`${fieldNamePrefix}.capacity`}
               label={t("capacity")}
+              onChange={onChangeGameCapacity}
               rules={{
+                required: t("Validation:fieldRequired", {
+                  attribute: t("capacity"),
+                }) as string,
                 min: {
                   value: 1,
                   message: t("Validation:fieldRequired", {
@@ -398,10 +422,13 @@ export function ProductControl<T extends FormValues>({
               fieldName={`${fieldNamePrefix}.duration`}
               label={t("durationMinutes")}
               rules={{
+                required: t("Validation:fieldRequired", {
+                  attribute: t("capacity"),
+                }) as string,
                 min: {
                   value: 1,
                   message: t("Validation:fieldRequired", {
-                    attribute: t("duration"),
+                    attribute: t("capacity"),
                   }) as string,
                 },
               }}

package/src/product-set/product/duration/ProductDurationControl.tsx

@@ -66,7 +66,7 @@ export const ProductDurationControl = <T,>({
         },
         min: {
           value: 1,
-          message: t("Validation:fieldMin", {
+          message: t("Validation:fieldMinNumber", {
             attribute: t("duration"),
           }),
         },

package/src/product-set/product-category/ProductCategory.stories.tsx

@@ -26,7 +26,6 @@ const categoryMock: Partial<ProductCategoryControlValues> = {
   minSubItems: 0,
   maxSubItems: 0,
   quantityType: QUANTITY_TYPE_STANDARD,
-  isRelyOnPeople: false,
   isTimeRelated: false,
   hasTicket: false,
   allowDeposits: false,

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -28,7 +28,6 @@ export interface ProductCategoryControlValues extends FormValues {
   maxSubItems: number | null;
   quantityType: QuantityType;
   type: CategoryType;
-  isRelyOnPeople: boolean;
   isTimeRelated: boolean;
   collectUserInfo: boolean;
   hasTicket: boolean;
@@ -97,7 +96,6 @@ export function ProductCategoryControl({
   const minSubItemsId = useId();
   const maxSubItemsId = useId();
   const quantityType = useId();
-  const isRelyOnPeopleId = useId();
   const isTimeRelatedId = useId();
   const collectUserInfoId = useId();
   const hasTicketId = useId();
@@ -332,7 +330,7 @@ export function ProductCategoryControl({
           <Row>
             <Col>
               <Form.Group controlId={zoneId}>
-                <Form.Label>Zone</Form.Label>
+                <Form.Label>{t("Design:zone")}</Form.Label>
                 <Controller
                   control={control}
                   name={`${fieldNamePrefix}.zoneId`}
@@ -360,12 +358,6 @@ export function ProductCategoryControl({
                         attribute: t("zone"),
                       }),
                     },
-                    validate: (value) => {
-                      if (value) return true;
-                      return t("Validation:fieldRequired", {
-                        attribute: t("zone"),
-                      }) as string;
-                    },
                   }}
                 />
                 <Form.Control.Feedback type="invalid">
@@ -470,27 +462,6 @@ export function ProductCategoryControl({
               </Form.Group>
             )}
 
-            <Form.Group
-              controlId={isRelyOnPeopleId}
-              className="advanced-switch-container"
-            >
-              <Form.Label>{t("isRelyOnPeople")}</Form.Label>
-
-              <div>
-                <Controller
-                  render={({ field: { name, value, onChange } }) => (
-                    <BooleanSwitch
-                      name={name}
-                      value={Boolean(value)}
-                      onChange={onChange}
-                      disabled={isLoading || category.hasTicket}
-                    />
-                  )}
-                  control={control}
-                  name={`${fieldNamePrefix}.isRelyOnPeople` as const}
-                />
-              </div>
-            </Form.Group>
             {!category.hasTicket && (
               <Form.Group
                 controlId={isTimeRelatedId}

package/src/provider/location-input/LocationInputDescription.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import { useFormContext } from "react-hook-form";
 import en from "react-phone-number-input/locale/en.json";
 import { LocationInputValues } from ".";
@@ -13,7 +13,7 @@ export function LocationInputDescription() {
     "postcode",
     "country",
   ] as const;
-  const fields = fieldNames.reduce<JSX.Element[]>((acc, field) => {
+  const fields = fieldNames.reduce<ReactElement[]>((acc, field) => {
     const value = values?.[field];
     if (!value) return acc;