@licklist/design 0.63.0-dev.1 → 0.63.0

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

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { Modifier } from "@popperjs/core";
 import { useId } from "@react-aria/utils";
 import { Form, OverlayTrigger, Popover } from "react-bootstrap";
-import { useFieldArray, useFormContext, useWatch } from "react-hook-form";
+import { useFieldArray, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useClickAway } from "react-use";
 import { DateTime } from "luxon";
@@ -14,6 +14,7 @@ import {
   SortableContext,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
+
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { CONFIRM_MODAL_ACTIONS } from "../../modals/confirmation/ConfirmModal";
 import { Icon } from "../../static";
@@ -26,15 +27,16 @@ import {
   AvailableTimesControl,
   AvailableTimesControlRef,
 } from "../../zone/form/components/AvailableTimesControl";
-import { ProductSetControlValues } from "..";
-import {
-  getProductWithSmallestDuration,
-  getLatestAvailableDateTime,
-} from "./utils";
+
+// eslint-disable-next-line max-len
+
+export interface DateAndRecurrenceInputValues {
+  menuRecurrences?: Partial<ProductSetRecurrence>[];
+}
 
 interface DateAndRecurrenceInputProps {
   isEventEditProductSet?: boolean;
-  workHours: WorkHour[] | undefined;
+  workHours?: WorkHour[];
   providerHasBookingManagement: boolean;
   isLoading?: boolean;
 }
@@ -52,9 +54,7 @@ export const DateAndRecurrenceInput = ({
     getValues,
     setValue,
     clearErrors,
-  } = useFormContext<ProductSetControlValues>();
-
-  const steps = useWatch({ control, name: "steps" });
+  } = useFormContext<DateAndRecurrenceInputValues>();
 
   const [availableTimes, setAvailableTimes] = useState<string[]>([]);
   const availableTimesFormRef = useRef<AvailableTimesControlRef>();
@@ -90,7 +90,7 @@ export const DateAndRecurrenceInput = ({
     clearEditState();
   });
 
-  const popoverId = useId();
+  const popoverId = useId()!;
 
   const { t } = useTranslation("Design");
 
@@ -101,13 +101,11 @@ export const DateAndRecurrenceInput = ({
     const isAvailableTimesFormValid =
       await availableTimesFormRef.current?.trigger();
 
-    const { availableTimes } = availableTimesFormRef.current.getValues();
-
     if (next?.startTime && next?.endTime && isAvailableTimesFormValid) {
       const startTime = DateTime.fromISO(next.startTime);
       const endTime = DateTime.fromISO(next.endTime);
-
-      const areAvailableTimesValid = availableTimes.every((time) => {
+      const { availableTimes } = availableTimesFormRef.current.getValues();
+      const validAvalilableTimes = availableTimes.every((time) => {
         const currentAvailableTime = DateTime.fromFormat(time, TIME_FORMAT);
 
         return (
@@ -115,8 +113,7 @@ export const DateAndRecurrenceInput = ({
           currentAvailableTime.diff(endTime, "minutes").minutes <= 0
         );
       });
-
-      if (!areAvailableTimesValid) {
+      if (!validAvalilableTimes) {
         availableTimesFormRef.current.setError("availableTimes", {
           message: t("Validation:fieldTimeBetween", {
             attribute: t("Design:startTimesSmall"),
@@ -129,36 +126,6 @@ export const DateAndRecurrenceInput = ({
       }
     }
 
-    // this check is required to prevent user from adding available time
-    // less than the lowest duration product, e.g. if lowest duration product
-    // is 1 hour and user tries to add time 15 minutes before end time,
-    // such time can never be booked
-    const lowestDurationProduct = getProductWithSmallestDuration(steps);
-
-    if (lowestDurationProduct) {
-      const endTime = next?.endTime
-        ? DateTime.fromFormat(next?.endTime, TIME_FORMAT)
-        : // this is to allow user to add 23:00 if end is at 23:59
-          DateTime.fromFormat("23:59", TIME_FORMAT).plus({ minutes: 1 });
-
-      const latestAvailableTime = getLatestAvailableDateTime(availableTimes);
-
-      const latestAllowedTime = endTime.minus({
-        minutes: lowestDurationProduct.duration,
-      });
-
-      if (latestAvailableTime > latestAllowedTime) {
-        availableTimesFormRef.current.setError("availableTimes", {
-          message: t("Validation:fieldTimeBefore", {
-            attribute: t("Design:timeLowercase"),
-            time: latestAllowedTime.toFormat(TIME_FORMAT),
-          }),
-        });
-
-        return;
-      }
-    }
-
     const availableTime =
       availableTimesFormRef?.current?.getValues()?.availableTimes || null;
 
@@ -261,7 +228,6 @@ export const DateAndRecurrenceInput = ({
                 defaultValues={editState.values}
                 onChange={handleRecurringDateChange}
                 onDelete={handleDelete}
-                workHours={workHours}
               >
                 {providerHasBookingManagement && (
                   <AvailableTimesControl

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

@@ -5,8 +5,9 @@ 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 { UTC_TIMEZONE, TIME_FORMAT } from "@licklist/core/dist/Config/Date";
+import { TIMEZONE } from "@licklist/core/dist/Config/Date";
 import { ProductSetRecurrence } from "@licklist/core/dist/DataMapper/Product/ProductSetRecurrenceDataMapper";
+import { TIME_FORMAT } from "@licklist/core/dist/Config/Date";
 import { DateTime } from "luxon";
 import RRule, { Frequency } from "rrule";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
@@ -26,6 +27,7 @@ import {
 import { ProductSetRecurrenceOverridesControl } from "./ProductSetRecurrenceOverridesControl";
 import { MAX_QUANTITY_RECURRENCE_DATE_IN_OVERRIDE } from "../product/constants";
 
+
 export interface DateAndRecurrenceInputValues {
   menuRecurrences?: Partial<ProductSetRecurrence>[];
 }
@@ -136,7 +138,7 @@ export const DateInput = ({
       until: (start as DateTime).toJSDate(),
       byweekday: [],
       freq: Frequency.DAILY,
-      tzid: UTC_TIMEZONE,
+      tzid: TIMEZONE,
       interval: 1,
     }).replace("RRULE:", "");
 

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

@@ -2,12 +2,12 @@ import { Meta, Story } from "@storybook/react";
 import React from "react";
 import Form from "react-bootstrap/Form";
 import { FormProvider, useForm } from "react-hook-form";
-import { OPERATIONAL_COST_CUSTOMER } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import {
   ProductSetControl,
   ProductSetControlProps,
   ProductSetControlValues,
 } from "./ProductSetControl";
+import { OPERATIONAL_COST_CUSTOMER } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 
 export default {
   title: "Product Set/Control",

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

@@ -22,10 +22,14 @@ import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemp
 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 { ProductSetRecurrence } from "@licklist/core/dist/DataMapper/Product/ProductSetRecurrenceDataMapper";
 import { WarningMessage } from "../../static";
 import { SelectItem } from "../../types/generic/SelectItem";
-import { DateAndRecurrenceInput } from "./DateAndRecurrenceInput";
+import {
+  DateAndRecurrenceInput,
+  // TODO: Show Date Component, when reccurent date bugs are fixed
+  // DateAndRecurrenceInput,
+  DateAndRecurrenceInputValues,
+} from "./DateAndRecurrenceInput";
 import TutorialGifCard from "./TutorialGifCard";
 import { Step } from "../types";
 import { StepsControl } from "../form/StepsControl";
@@ -49,7 +53,7 @@ export interface TemplateItem {
   label: string;
 }
 
-export interface ProductSetControlValues {
+export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   name: string;
   type: ProductSetType;
   termsAndConditions: string;
@@ -61,7 +65,6 @@ export interface ProductSetControlValues {
   steps: Step[];
   emailTemplates?: TemplateItem[];
   smsTemplates?: TemplateItem[];
-  menuRecurrences?: Partial<ProductSetRecurrence>[];
 }
 
 export interface ProductSetControlShared {
@@ -82,7 +85,7 @@ export interface ProductSetControlProps {
   fieldSets?: FieldSet[];
   showEmailTemplate?: boolean;
   showSmsTemplate?: boolean;
-  workHours: WorkHour[] | undefined;
+  workHours?: WorkHour[];
   providerHasBookingManagement?: boolean;
   isOverrides?: boolean;
 }
@@ -120,7 +123,7 @@ export function ProductSetControl({
 
   const showSmsTemplateSelector = showSmsTemplate && !isOverrides;
   const showEmailTemplateSelector = showEmailTemplate && !isOverrides;
-  const showDateSelector = !isEventEditProductSet && isOverrides;
+
   return (
     <Row
       className={`product-set-form ${
@@ -162,7 +165,7 @@ export function ProductSetControl({
           </Form.Control.Feedback>
         </Form.Group>
 
-        {showDateSelector ? (
+        {isOverrides ? (
           <DateInput
             workHours={workHours}
             isLoading={isLoading}
@@ -185,11 +188,7 @@ export function ProductSetControl({
 
         <TutorialGifCard isOverrides={isOverrides} />
 
-        <StepsControl
-          isLoading={isLoading}
-          isEventEditProductSet={isEventEditProductSet}
-          isOverrides={isOverrides}
-        />
+        <StepsControl isLoading={isLoading} isOverrides={isOverrides} />
       </Col>
       <Col md={6} sm={12}>
         <div className="second-column">

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

@@ -36,7 +36,6 @@ import { useSortableTreeFunctions } from "../hooks/useSortableTreeFunctions";
 interface ProductCategoriesControlProps extends WithIsLoading {
   stepIndex: number;
   isOverrides?: boolean;
-  isEventEditProductSet?: boolean;
 }
 
 const getCategoryDefaultValue = (
@@ -68,7 +67,6 @@ export function ProductCategoriesControl({
   isLoading,
   stepIndex,
   isOverrides,
-  isEventEditProductSet,
 }: ProductCategoriesControlProps) {
   const { t } = useTranslation("Design");
   const {
@@ -216,10 +214,6 @@ export function ProductCategoriesControl({
             ? String(productCategory.id)
             : productCategory.uniqueId;
 
-          const isOverridesCategory = productCategory.products.some((product) =>
-            isEventEditProductSet ? !!product.id : !!product.originalProductId
-          );
-
           const onSetIsExpanded = () => {
             setIsExpanded(productCategoryId);
           };
@@ -275,7 +269,7 @@ export function ProductCategoriesControl({
                       categoryName={value}
                       stepIndex={stepIndex}
                       productCategoryIndex={index}
-                      isOverride={isOverrides && isOverridesCategory}
+                      isOverride={isOverrides}
                     />
                   }
                   isOverride={isOverrides}
@@ -302,7 +296,6 @@ export function ProductCategoriesControl({
                     productCategoryIndex={index}
                     categoryType={productCategory.type}
                     isOverrides={isOverrides}
-                    isEventEditProductSet={isEventEditProductSet}
                   />
                 </SortableTree.Item>
               )}
@@ -312,7 +305,9 @@ export function ProductCategoriesControl({
       </SortableTree>
       <CreateProductSetItem
         title={t("addCategory")}
+        isOverride={isOverrides}
         onClick={() => {
+           if (isOverrides) return;
           setIsSelectCategoryVisible(true);
         }}
       />
@@ -321,6 +316,7 @@ export function ProductCategoriesControl({
         isVisible={isSelectCategoryVisible}
         onHide={() => setIsSelectCategoryVisible(false)}
         onCategorySelect={(categoryType) => {
+          if (isOverrides) return;
           append(getCategoryDefaultValue(categoryType, fields.length));
           setShowCategoryModal(true);
           if (

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

@@ -63,9 +63,9 @@ Default.args = {
       sort: 100,
       type: "standard",
       updatedAt: "2023-05-08T15:55:28.000+03:00",
-      defaultDuration: 30,
       zoneRecurrences: [
         {
+          availableTimes: ["10:05", "10:25", "10:45"],
           endDate: "2022-02-22",
           endTime: "22:00:00",
           id: 1,
@@ -90,6 +90,7 @@ Default.args = {
       updatedAt: "2023-05-08T15:55:28.000+03:00",
       zoneRecurrences: [
         {
+          availableTimes: ["10:05", "10:25", "10:45"],
           endDate: "2022-02-22",
           endTime: "22:00:00",
           id: 1,

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

@@ -26,16 +26,12 @@ import { checkAvailableTimesErrors, getFilteredTemplates } from "../utils";
 export interface WithIsLoading {
   isLoading: boolean;
 }
-export interface WithIdOptional {
-  id?: number;
-}
-
 export interface WithId {
   id: number;
 }
 export interface ProductSetFormValues
   extends FormValues,
-    WithIdOptional,
+    WithId,
     ProductSetControlValues {
   steps: Step[];
   isOverrides?: boolean;

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

@@ -35,7 +35,6 @@ interface ProductsControlProps extends WithIsLoading {
   categoryType: CategoryType;
   zones?: Zone[];
   isOverrides?: boolean;
-  isEventEditProductSet?: boolean;
 }
 
 const getDefaultProductValue = (sort: number): Product => ({
@@ -58,7 +57,6 @@ const getDefaultProductValue = (sort: number): Product => ({
   quantitySelector: 1,
   hasSpecialNotes: false,
   weight: 0,
-  originalProductId: null,
   type: DEFAULT_PRODUCT_TYPE,
   tierId: Number(uniqueId()),
   zoneId: null,
@@ -81,7 +79,6 @@ export function ProductsControl({
   categoryType,
   zones,
   isOverrides,
-  isEventEditProductSet,
 }: ProductsControlProps) {
   const { t } = useTranslation("Design");
   const form = useFormContext<ProductSetFormValues>();
@@ -206,97 +203,90 @@ export function ProductsControl({
         onDragEnd={handleDragEnd}
         sensors={[mouseSensor]}
       >
-        {fields.map((product, index) => {
-          const isOverridesProductSet = isEventEditProductSet
-            ? !!product.id
-            : isOverrides && !!product.originalProductId;
-
-          return (
-            <Controller
-              key={product._id}
-              control={control}
-              name={`${productControlFieldName}.${index}.name` as const}
-              rules={{
-                required: t("Validation:fieldRequired", {
-                  attribute: t("name"),
-                }) as string,
-              }}
-              render={({ field: { value, onChange } }) => (
-                <SortableTree.Item
-                  key={`product-${product._id}`}
-                  id={String(product._id)}
-                  isExpanded={isFirstProductAdded}
-                  isInvalid={!!categoryProductErrors}
-                  title={value}
-                  isOverride={isOverrides}
-                  badge={
-                    <Badge className="product-badge">{t("product")}</Badge>
-                  }
-                  isIconInHeader={false}
-                  cancelChanges={() => cancelChanges(index)}
-                  edit={() => edit(index)}
-                  secondaryBadge={getBadgeConfig(categoryType, t(categoryType))}
-                  subTitle={
-                    <div className="product-set-badges-container">
-                      <div className="product-set-subtitle-dot product-set-subtitle-product-dot" />
-                      <span>
-                        {`£${prices[index]} ${t("each")} - ${t("qty")}:${
-                          !isUnlimitedQuantities[index]
-                            ? ` ${quantities[index]}`
-                            : t(" unlimited")
-                        } ${
-                          !isUnlimitedQuantities[index]
-                            ? ` - ${t("possibleRevenue")} £${
-                                prices[index] * quantities[index]
-                              }`
-                            : ""
-                        } `}
-                      </span>
-                    </div>
-                  }
-                  modalLabel={t("addNewProduct")}
-                  modalClass={ProductSetModalClasses.product}
-                  isNewAdded={showProductModal}
-                  body={
-                    <ProductControl<ProductSetFormValues>
-                      isLoading={isLoading}
-                      quantityType={quantityType}
-                      allowDeposits={allowDeposits}
-                      hasBookingManagement={false}
-                      fieldNamePrefix={
-                        `${productControlFieldName}.${index}` as const
-                      }
-                      productName={value}
-                      onProductNameChange={onChange}
-                      hasTicket={hasTicket}
-                      categoryType={categoryType}
-                      zoneDuration={catergoryZone?.defaultDuration}
-                      isOverrides={isOverridesProductSet}
-                    />
-                  }
-                  onDelete={() => onProductRemove(index)}
-                  validate={() =>
-                    trigger(`${productControlFieldName}.${index}`)
-                  }
-                  saveValidField={saveValidField}
-                  // preItem={<Popover className="d-none d-sm-block" />}
-                >
-                  <SubProductsControl
+        {fields.map((product, index) => (
+          <Controller
+            key={product._id}
+            control={control}
+            name={`${productControlFieldName}.${index}.name` as const}
+            rules={{
+              required: t("Validation:fieldRequired", {
+                attribute: t("name"),
+              }) as string,
+            }}
+            render={({ field: { value, onChange } }) => (
+              <SortableTree.Item
+                key={`product-${product._id}`}
+                id={String(product._id)}
+                isExpanded={isFirstProductAdded}
+                isInvalid={!!categoryProductErrors}
+                title={value}
+                isOverride={isOverrides}
+                badge={<Badge className="product-badge">{t("product")}</Badge>}
+                isIconInHeader={false}
+                cancelChanges={() => cancelChanges(index)}
+                edit={() => edit(index)}
+                isProduct
+                secondaryBadge={getBadgeConfig(categoryType, t(categoryType))}
+                subTitle={
+                  <div className="product-set-badges-container">
+                    <div className="product-set-subtitle-dot product-set-subtitle-product-dot" />
+                    <span>
+                      {`£${prices[index]} ${t("each")} - ${t("qty")}:${
+                        !isUnlimitedQuantities[index]
+                          ? ` ${quantities[index]}`
+                          : t(" unlimited")
+                      } ${
+                        !isUnlimitedQuantities[index]
+                          ? ` - ${t("possibleRevenue")} £${
+                              prices[index] * quantities[index]
+                            }`
+                          : ""
+                      } `}
+                    </span>
+                  </div>
+                }
+                modalLabel={t("addNewProduct")}
+                modalClass={ProductSetModalClasses.product}
+                isNewAdded={showProductModal}
+                body={
+                  <ProductControl<ProductSetFormValues>
                     isLoading={isLoading}
                     quantityType={quantityType}
-                    stepIndex={stepIndex}
-                    productCategoryIndex={productCategoryIndex}
-                    productIndex={index}
+                    allowDeposits={allowDeposits}
+                    hasBookingManagement={false}
+                    fieldNamePrefix={
+                      `${productControlFieldName}.${index}` as const
+                    }
+                    productName={value}
+                    onProductNameChange={onChange}
+                    hasTicket={hasTicket}
+                    categoryType={categoryType}
+                    zoneDuration={catergoryZone?.defaultDuration}
+                    isOverrides={isOverrides}
                   />
-                </SortableTree.Item>
-              )}
-            />
-          );
-        })}
+                }
+                onDelete={() => onProductRemove(index)}
+                validate={() => trigger(`${productControlFieldName}.${index}`)}
+                saveValidField={saveValidField}
+                // preItem={<Popover className="d-none d-sm-block" />}
+              >
+                <SubProductsControl
+                  isLoading={isLoading}
+                  quantityType={quantityType}
+                  stepIndex={stepIndex}
+                  productCategoryIndex={productCategoryIndex}
+                  productIndex={index}
+                />
+              </SortableTree.Item>
+            )}
+          />
+        ))}
       </SortableTree>
       <CreateProductSetItem
         title={t("addProduct")}
+        isOverride={isOverrides}
         onClick={() => {
+          if (isOverrides) return;
           append(getDefaultProductValue(fields.length));
           setShowProductModal(true);
 

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

@@ -19,14 +19,9 @@ import { ProductSetFormValues } from "./ProductSetForm";
 interface StepsControlProps {
   isLoading: boolean;
   isOverrides?: boolean;
-  isEventEditProductSet?: boolean;
 }
 
-export function StepsControl({
-  isLoading,
-  isOverrides,
-  isEventEditProductSet,
-}: StepsControlProps) {
+export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
   const form = useFormContext<ProductSetFormValues>();
   const { t } = useTranslation("Design");
   const [showStepModal, setShowStepModal] = useState(false);
@@ -73,8 +68,8 @@ export function StepsControl({
     <>
       {fields.map((step, index) => {
         const stepFieldName = `steps.${index}` as const;
+
         const stepData = getValues(stepFieldName);
-        const isOverrideStep = !!step.id;
 
         return (
           <Controller
@@ -97,9 +92,9 @@ export function StepsControl({
                 modalLabel={t("addNewStep")}
                 modalClass={ProductSetModalClasses.step}
                 isNewAdded={showStepModal}
-                edit={() => edit(index)}
+                edit={() => !isOverrides && edit(index)}
                 cancelChanges={() => cancelChanges(index)}
-                isOverride={isOverrideStep}
+                isOverride={isOverrides}
                 subTitle={
                   <div className="product-set-badges-container">
                     <div className="product-set-subtitle-dot product-set-subtitle-step-dot" />
@@ -115,7 +110,6 @@ export function StepsControl({
                     stepIndex={index}
                     stepName={value}
                     onStepNameChange={onChange}
-                    isOverrides={isOverrideStep}
                   />
                 }
                 onDelete={() => remove(index)}
@@ -146,7 +140,6 @@ export function StepsControl({
                   isLoading={isLoading}
                   stepIndex={index}
                   isOverrides={isOverrides}
-                  isEventEditProductSet={isEventEditProductSet}
                 />
               </SortableTree.Item>
             )}
@@ -156,7 +149,9 @@ export function StepsControl({
 
       <CreateProductSetItem
         title={t("addStep")}
+        isOverride={isOverrides}
         onClick={() => {
+          if (isOverrides) return;
           append(getDefaultStepsValues());
           setShowStepModal(true);
           if (errors.steps?.type === HookFormService.manualErrorType) {

package/src/product-set/hooks/useSortableTreeFunctions.ts

@@ -24,10 +24,8 @@ export const useSortableTreeFunctions = ({
   const cancelChanges = (index: number) => {
     if (isOverrides) return;
     if (!previousValue) {
-      // eslint-disable-next-line consistent-return
       return remove(index);
     }
-    // eslint-disable-next-line consistent-return
     return setValue(`${fieldName}.${index}` as const, previousValue);
   };