@licklist/design 0.65.0 → 0.66.0-dev.0

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

@@ -35,6 +35,8 @@ interface ProductsControlProps extends WithIsLoading {
   categoryType: CategoryType;
   zones?: Zone[];
   isOverrides?: boolean;
+  isEventEditProductSet?: boolean;
+  isCreateNewOverrides?: boolean;
 }
 
 const getDefaultProductValue = (sort: number): Product => ({
@@ -57,6 +59,7 @@ const getDefaultProductValue = (sort: number): Product => ({
   quantitySelector: 1,
   hasSpecialNotes: false,
   weight: 0,
+  originalProductId: null,
   type: DEFAULT_PRODUCT_TYPE,
   tierId: Number(uniqueId()),
   zoneId: null,
@@ -79,6 +82,8 @@ export function ProductsControl({
   categoryType,
   zones,
   isOverrides,
+  isEventEditProductSet,
+  isCreateNewOverrides,
 }: ProductsControlProps) {
   const { t } = useTranslation("Design");
   const form = useFormContext<ProductSetFormValues>();
@@ -203,90 +208,101 @@ export function ProductsControl({
         onDragEnd={handleDragEnd}
         sensors={[mouseSensor]}
       >
-        {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>
+        {fields.map((product, index) => {
+          const isOverridesProductSet = isEventEditProductSet
+            ? !!product.id
+            : isOverrides && !!product.originalProductId;
+
+          const isNewProductOverrides = isCreateNewOverrides && !!product.id;
+
+          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={
+                        isNewProductOverrides || isOverridesProductSet
+                      }
+                    />
+                  }
+                  onDelete={() => onProductRemove(index)}
+                  validate={() =>
+                    trigger(`${productControlFieldName}.${index}`)
+                  }
+                  saveValidField={saveValidField}
+                  // preItem={<Popover className="d-none d-sm-block" />}
+                >
+                  <SubProductsControl
                     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={isOverrides}
+                    stepIndex={stepIndex}
+                    productCategoryIndex={productCategoryIndex}
+                    productIndex={index}
                   />
-                }
-                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.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,9 +19,16 @@ import { ProductSetFormValues } from "./ProductSetForm";
 interface StepsControlProps {
   isLoading: boolean;
   isOverrides?: boolean;
+  isEventEditProductSet?: boolean;
+  isCreateNewOverrides?: boolean;
 }
 
-export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
+export function StepsControl({
+  isLoading,
+  isOverrides,
+  isEventEditProductSet,
+  isCreateNewOverrides,
+}: StepsControlProps) {
   const form = useFormContext<ProductSetFormValues>();
   const { t } = useTranslation("Design");
   const [showStepModal, setShowStepModal] = useState(false);
@@ -68,9 +75,9 @@ export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
     <>
       {fields.map((step, index) => {
         const stepFieldName = `steps.${index}` as const;
-
         const stepData = getValues(stepFieldName);
-
+        const isOverrideStep =
+          (isOverrides || isCreateNewOverrides) && !!step.id;
         return (
           <Controller
             key={`step-${step._id}`}
@@ -92,9 +99,9 @@ export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
                 modalLabel={t("addNewStep")}
                 modalClass={ProductSetModalClasses.step}
                 isNewAdded={showStepModal}
-                edit={() => !isOverrides && edit(index)}
+                edit={() => edit(index)}
                 cancelChanges={() => cancelChanges(index)}
-                isOverride={isOverrides}
+                isOverride={isOverrideStep}
                 subTitle={
                   <div className="product-set-badges-container">
                     <div className="product-set-subtitle-dot product-set-subtitle-step-dot" />
@@ -110,6 +117,7 @@ export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
                     stepIndex={index}
                     stepName={value}
                     onStepNameChange={onChange}
+                    isOverrides={isOverrideStep}
                   />
                 }
                 onDelete={() => remove(index)}
@@ -140,6 +148,8 @@ export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
                   isLoading={isLoading}
                   stepIndex={index}
                   isOverrides={isOverrides}
+                  isCreateNewOverrides={isCreateNewOverrides}
+                  isEventEditProductSet={isEventEditProductSet}
                 />
               </SortableTree.Item>
             )}
@@ -149,9 +159,7 @@ export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
 
       <CreateProductSetItem
         title={t("addStep")}
-        isOverride={isOverrides}
         onClick={() => {
-          if (isOverrides) return;
           append(getDefaultStepsValues());
           setShowStepModal(true);
           if (errors.steps?.type === HookFormService.manualErrorType) {

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

@@ -7,14 +7,17 @@ import {
   QUANTITY_TYPE_LIST_DTO,
   QUANTITY_TYPE_RECHARGING,
 } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-import { ProductType } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import {
+  ProductType,
+  PRODUCT_DEfAULT_COLORS,
+} from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import clsx from "clsx";
 import {
   FieldNamePrefixPath,
   FormValues,
 } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { useId } from "@react-aria/utils";
-import clsx from "clsx";
 import React, {
   ChangeEvent,
   useCallback,
@@ -36,7 +39,7 @@ import {
 } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useImages } from "@licklist/plugins/dist/hooks/Media/useImages";
-import { PRODUCT_DEfAULT_COLORS } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+
 import {
   Image,
   IMAGE_TYPE_IMAGE,
@@ -86,6 +89,7 @@ export interface ProductControlValues
   totalQuantity: number;
   isAvailable: boolean;
   isSoldOut: boolean;
+  originalProductId: number | null;
   isUnlimited: boolean;
   isRequired: boolean;
   quantitySelector: number;
@@ -156,7 +160,6 @@ export function ProductControl<T extends FormValues>({
   );
   const capacity = watch(`${fieldNamePrefix}.capacity` as Path<T>);
   const disabledDuration = capacity === "0" || !capacity;
-
   const advancedId = useId();
   const nameId = useId();
 
@@ -410,7 +413,7 @@ export function ProductControl<T extends FormValues>({
                 `${fieldNamePrefix}.productGroupId` as Path<T>,
                 errors
               )}
-              disabled={isLoading}
+              disabled={isLoading || isOverrides}
               defaultValue=""
             >
               <option value="">{t("Design:selectProductGroup")}</option>

package/src/product-set/step/StepControl.tsx

@@ -26,6 +26,7 @@ export interface StepControlProps extends IsDeletableEvent {
   stepIndex: number;
   stepName: string;
   onStepNameChange: (args: any) => void;
+  isOverrides?: boolean;
 }
 
 export function StepControl({
@@ -33,6 +34,7 @@ export function StepControl({
   stepIndex,
   stepName,
   onStepNameChange,
+  isOverrides = false,
 }: StepControlProps) {
   const { providerHasMap } = useContext(ProductSetLoadingContext);
   const {
@@ -42,7 +44,6 @@ export function StepControl({
     watch,
   } = useFormContext<ProductSetFormValues>();
   const { t } = useTranslation("Design");
-
   const fieldName = `steps.${stepIndex}.name` as const;
   const productCategoriesFieldName =
     `steps.${stepIndex}.productCategories` as const;
@@ -71,7 +72,7 @@ export function StepControl({
                     fieldName,
                     errors
                   )}
-                  disabled={isLoading}
+                  disabled={isLoading || isOverrides}
                 />
               )}
               control={control}
@@ -114,7 +115,7 @@ export function StepControl({
                           name={name}
                           value={Boolean(value)}
                           onChange={onChange}
-                          disabled={isLoading}
+                          disabled={isLoading || isOverrides}
                         />
                       )}
                       control={control}

package/src/provider/working-hours-input/WorkingHoursInputDescription.tsx

@@ -1,9 +1,7 @@
-import { DateTime } from "luxon";
 import React from "react";
 import { Col, Row } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { TIME_FORMAT } from "@licklist/core/dist/Config";
 import { WorkingHoursInputValues } from ".";
 import { useWeekdays } from "./utils";
 
@@ -25,22 +23,10 @@ export function WorkingHoursInputDescription() {
             <Row key={i}>
               <Col xs="auto">{weekdays[i]}:</Col>
               <Col>
-                {weekday?.end
-                  ? weekday.start
-                    ? t("timeInterval", {
-                        start: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT
-                        ),
-                        end: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT
-                        ),
-                      })
-                    : t("timeFrom", {
-                        start: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT
-                        ),
-                      })
-                  : null}
+                {t("timeInterval", {
+                  start: weekday.start,
+                  end: weekday.end,
+                })}
               </Col>
             </Row>
           );

package/src/recurring-date-picker-input/RecurrenceIntervalAndFrequencyInput.tsx

@@ -2,8 +2,18 @@ import React, { useEffect } from "react";
 import { DateTime } from "luxon";
 import { Col, Form, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
-import { RegisterOptions, useFormContext } from "react-hook-form";
-import { DATE_FORMAT } from "@licklist/core/dist/Config";
+import {
+  RegisterOptions,
+  useFormContext,
+  useWatch,
+  Validate,
+} from "react-hook-form";
+import {
+  DATE_FORMAT,
+  TIME_FORMAT,
+  TIME_FULL_FORMAT,
+} from "@licklist/core/dist/Config";
+import { fromFormat } from "@licklist/plugins/dist/utils/dateTime";
 import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
 
 interface RecurrenceIntervalAndFrequencyInputProps {
@@ -23,6 +33,15 @@ interface RecurrenceIntervalAndFrequencyInputProps {
   >;
 }
 
+const fromTimeFormat = fromFormat(TIME_FORMAT);
+const fromTimeFullFormat = fromFormat(TIME_FULL_FORMAT);
+
+// default values and entered values are in different formats
+const fromTimeFormats = (time: string) =>
+  fromTimeFormat(time).isValid
+    ? fromTimeFormat(time)
+    : fromTimeFullFormat(time);
+
 function RecurrenceIntervalAndFrequencyInput({
   disabled = false,
   minDate,
@@ -36,16 +55,20 @@ function RecurrenceIntervalAndFrequencyInput({
   const { t } = useTranslation(["Design", "Notification", "App"]);
 
   const {
-    getValues,
     formState: { errors },
     register,
     trigger,
+    control,
   } = useFormContext<RecurringDatePickerInputValues>();
 
-  const startDate = getValues("startDate");
-  const endDate = getValues("endDate");
-  const startTime = getValues("startTime");
-  const endTime = getValues("endTime");
+  const startDate = useWatch({ control, name: "startDate" });
+  const endDate = useWatch({ control, name: "endDate" });
+
+  const _startTime = useWatch({ control, name: "startTime" });
+  const startTime = fromTimeFormats(_startTime).toFormat(TIME_FORMAT);
+
+  const _endTime = useWatch({ control, name: "endTime" });
+  const endTime = fromTimeFormats(_endTime).toFormat(TIME_FORMAT);
 
   useEffect(() => {
     if (!startDate || !endDate) {
@@ -149,22 +172,27 @@ function RecurrenceIntervalAndFrequencyInput({
               type="time"
               {...register("endTime", {
                 required: false,
-                validate: (time) => {
-                  if (!startTime || !time) {
-                    return true;
-                  }
-                  const currentStartTime = DateTime.fromISO(startTime);
-                  const currentEndTime = DateTime.fromISO(time);
+                ...endTimeRules,
+                validate: {
+                  external: endTimeRules?.validate
+                    ? (endTimeRules?.validate as Validate<string>)
+                    : () => true,
+                  time: (time) => {
+                    if (!startTime || !time) {
+                      return true;
+                    }
+                    const currentStartTime = DateTime.fromISO(startTime);
+                    const currentEndTime = DateTime.fromISO(time);
 
-                  return currentEndTime?.diff(currentStartTime, ["minutes"])
-                    ?.minutes >= 0
-                    ? true
-                    : `${t(`Validation:fieldLaterDate`, {
-                        attribute: t("Design:endTimeSmall"),
-                        min: t("Design:startTimeSmall"),
-                      })}`;
+                    return currentEndTime?.diff(currentStartTime, ["minutes"])
+                      ?.minutes >= 0
+                      ? true
+                      : `${t(`Validation:fieldLaterDate`, {
+                          attribute: t("Design:endTimeSmall"),
+                          min: t("Design:startTimeSmall"),
+                        })}`;
+                  },
                 },
-                ...endTimeRules,
               })}
               placeholder="hh:mm"
               defaultValue={endTime}

package/src/recurring-date-picker-input/RecurringDatePickerInput.stories.tsx

@@ -1,22 +1,19 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { Card } from "react-bootstrap";
+import { DateTime } from "luxon";
+import { DATE_FORMAT, TIME_FORMAT } from "@licklist/core/dist/Config/Date";
 import {
   RecurringDatePickerInput,
   RecurringDatePickerInputProps,
 } from "./RecurringDatePickerInput";
-import { DateTime } from "luxon";
-import { DATE_FORMAT, TIME_FORMAT } from "@licklist/core/dist/Config/Date";
 
 export default {
   title: "RecurringDatePickerInput",
   component: RecurringDatePickerInput,
 } as Meta;
 
-interface DefaultRecurringDatePickerInputProps
-  extends RecurringDatePickerInputProps {}
-
-export const Default: Story<DefaultRecurringDatePickerInputProps> = (args) => {
+export const Default: Story<RecurringDatePickerInputProps> = (args) => {
   return (
     <Card style={{ maxWidth: "max-content" }}>
       <Card.Body>
@@ -25,7 +22,7 @@ export const Default: Story<DefaultRecurringDatePickerInputProps> = (args) => {
     </Card>
   );
 };
-export const Valid: Story<DefaultRecurringDatePickerInputProps> = (args) => {
+export const Valid: Story<RecurringDatePickerInputProps> = (args) => {
   return (
     <Card style={{ maxWidth: "max-content" }}>
       <Card.Body>
@@ -36,6 +33,15 @@ export const Valid: Story<DefaultRecurringDatePickerInputProps> = (args) => {
 };
 Default.args = {
   onChange: (data) => console.log("onSubmit", data),
+  workHours: [
+    { start: "20:00", end: "04:00", day: 0, description: "" },
+    { start: "20:00", end: "04:00", day: 1, description: "" },
+    { start: "20:00", end: "04:00", day: 2, description: "" },
+    { start: "20:00", end: "12:00", day: 3, description: "" },
+    { start: "20:00", end: "23:00", day: 4, description: "" },
+    { start: "08:00", end: "12:00", day: 5, description: "" },
+    { start: "10:00", end: "16:00", day: 6, description: "" },
+  ],
 };
 Valid.args = {
   onChange: (data) => console.log("onSubmit", data),

package/src/recurring-date-picker-input/RecurringDatePickerInput.tsx

@@ -12,9 +12,14 @@ import {
 import { usePreviousValue } from "@licklist/plugins/dist/hooks/Value/usePreviousValue";
 import { FormProvider, useForm } from "react-hook-form";
 import { Form } from "react-bootstrap";
+import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import RecurrenceIntervalAndFrequencyInput from "./RecurrenceIntervalAndFrequencyInput";
 import RecurrenceWeekdaysInput from "./RecurrenceWeekdaysInput";
-import { parseAndValidateRRule, SupportedFrequency } from "./utils";
+import {
+  parseAndValidateRRule,
+  SupportedFrequency,
+  useWorkHoursValidation,
+} from "./utils";
 import { ConfirmModal } from "../modals";
 import { DeleteFieldButton } from "../product-set/elements";
 
@@ -26,6 +31,7 @@ export interface RecurringDatePickerInputProps {
   initialFrequency?: Frequency;
   setInitialStartDateAfterSelect?: boolean;
   minDate?: string;
+  workHours: WorkHour[] | undefined;
 }
 
 export interface RecurringDatePickerInputValues {
@@ -51,6 +57,7 @@ export function RecurringDatePickerInput({
   setInitialStartDateAfterSelect = false,
   children,
   minDate,
+  workHours,
 }: PropsWithChildren<RecurringDatePickerInputProps>) {
   const { t } = useTranslation(["Design"]);
 
@@ -84,6 +91,8 @@ export function RecurringDatePickerInput({
     byWeekDay,
   });
 
+  const validator = useWorkHoursValidation(byWeekDay, workHours);
+
   const onSubmit = (nextState: RecurringDatePickerInputValues) => {
     const end = getDateTimeObject(endDate, endTime || "23:59:59");
 
@@ -188,6 +197,8 @@ export function RecurringDatePickerInput({
         <RecurrenceIntervalAndFrequencyInput
           disabled={disabled}
           minDate={minDate}
+          startTimeRules={validator}
+          endTimeRules={validator}
         />
 
         {children}