@licklist/design 0.44.541 → 0.44.543

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,44 @@ export const DateAndRecurrenceInput = ({
   const { t } = useTranslation("Design");
 
   // in this method we should fulfill the form with a proper data
-  const handleRecurringDateChange = (next: RecurringDatePickerInputValues) => {
+  const handleRecurringDateChange = async (
+    next: RecurringDatePickerInputValues
+  ) => {
+    const isAvailableTimesFormValid =
+      await availableTimesFormRef.current?.trigger();
+
+    if (next?.startTime && next?.endTime && isAvailableTimesFormValid) {
+      const startTime = DateTime.fromISO(next.startTime);
+      const endTime = DateTime.fromISO(next.endTime);
+      const { availableTimes } = availableTimesFormRef.current.getValues();
+      const validAvalilableTimes = availableTimes.every((time) => {
+        const currentAvailableTime = DateTime.fromFormat(time, TIME_FORMAT);
+
+        return (
+          currentAvailableTime.diff(startTime, "minutes").minutes >= 0 &&
+          currentAvailableTime.diff(endTime, "minutes").minutes <= 0
+        );
+      });
+      if (!validAvalilableTimes) {
+        availableTimesFormRef.current.setError("availableTimes", {
+          message: t("Validation:fieldTimeBetween", {
+            attribute: t("Design:startTimesSmall"),
+            min: startTime.toFormat(TIME_FORMAT),
+            max: endTime.toFormat(TIME_FORMAT),
+          }),
+        });
+
+        return;
+      }
+    }
+
     const 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 +155,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 +225,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 +268,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

@@ -21,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 {
@@ -56,7 +57,6 @@ export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   type: ProductSetType;
   termsAndConditions: string;
   thankYouPageUrl: string;
-  isDefault: boolean;
   operationalCost: OperationalCostType;
   productGroups?: SelectItem[];
   relyOnPeopleType?: RelyOnPeopleType | null;
@@ -84,6 +84,8 @@ export interface ProductSetControlProps {
   fieldSets?: FieldSet[];
   showEmailTemplate?: boolean;
   showSmsTemplate?: boolean;
+  workHours?: WorkHour[];
+  providerHasBookingManagement?: boolean;
 }
 
 export function ProductSetControl({
@@ -97,6 +99,8 @@ export function ProductSetControl({
   isCreateAction,
   showEmailTemplate,
   showSmsTemplate,
+  workHours,
+  providerHasBookingManagement = false,
 }: ProductSetControlProps) {
   const { t } = useTranslation(["Design", "Validation", "Notification"]);
   const {
@@ -158,6 +162,9 @@ export function ProductSetControl({
         {isCreateAction && (
           <DateAndRecurrenceInput
             isEventEditProductSet={isEventEditProductSet}
+            workHours={workHours}
+            isLoading={isLoading}
+            providerHasBookingManagement={providerHasBookingManagement}
           />
         )}
 
@@ -189,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">

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,
@@ -84,6 +86,9 @@ export const ProductSetRecurrenceControl = ({
           {getHumanReadableDate(menuRecurrence)}
         </span>
       </div>
+      <div className={`manual-form-error ${!errorMessage && "d-none"}`}>
+        {errorMessage}
+      </div>
     </div>
   );
 };

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

@@ -23,13 +23,17 @@ export default {
 export const Default: Story<ProductSetFormProps> = (args) => {
   const providerHasMap = boolean("providerHasMap", true);
 
-  return <ProductSetForm {...args} providerHasMap={providerHasMap} />;
+  return (
+    <ProductSetForm {...args} providerHasMap={providerHasMap} isCreateAction />
+  );
 };
 
 export const Empty: Story<ProductSetFormProps> = (args) => {
   const providerHasMap = boolean("providerHasMap", true);
 
-  return <ProductSetForm {...args} providerHasMap={providerHasMap} />;
+  return (
+    <ProductSetForm {...args} providerHasMap={providerHasMap} isCreateAction />
+  );
 };
 
 export const Valid: Story<ProductSetFormProps> = (args) => {
@@ -103,7 +107,6 @@ Default.args = {
     name: "Example",
     type: "sale",
     termsAndConditions: "",
-    isDefault: true,
     operationalCost: OPERATIONAL_COST_CUSTOMER,
     relyOnPeopleType: RELY_ON_PEOPLE_PRODUCT_QUANTITY,
     steps: [
@@ -848,7 +851,6 @@ Empty.args = {
     name: "Example",
     type: "sale",
     termsAndConditions: "",
-    isDefault: true,
     operationalCost: OPERATIONAL_COST_PROVIDER,
     steps: [],
   },
@@ -861,7 +863,6 @@ ServerErrors.args = {
     name: "",
     type: "sale",
     termsAndConditions: "",
-    isDefault: true,
     operationalCost: OPERATIONAL_COST_PROVIDER,
     steps: [],
   },
@@ -875,7 +876,6 @@ Valid.args = {
     name: "Example",
     type: "sale",
     termsAndConditions: "",
-    isDefault: true,
     operationalCost: OPERATIONAL_COST_CUSTOMER,
     menuRecurrences: [
       {

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

@@ -11,6 +11,7 @@ import { isEqual } from "lodash";
 // eslint-disable-next-line max-len
 import { ProviderBookingManagementSetting } from "@licklist/core/dist/DataMapper/Provider/ProviderBookingManagementSettingDataMapper";
 import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
+import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { Dialog, useDialogContext } from "../../modals/dialog";
 import {
   ProductSetControl,
@@ -20,7 +21,7 @@ import {
 import { Step } from "../types";
 import { ProductSetContextProvider, ProductSetLoadingContext } from "./context";
 import { SelectItem } from "../../types/generic/SelectItem";
-import { getFilteredTemplates } from "../utils";
+import { checkAvailableTimesErrors, getFilteredTemplates } from "../utils";
 
 export interface WithIsLoading {
   isLoading: boolean;
@@ -49,6 +50,7 @@ export interface ProductSetFormProps
   providerHasBookingManagement?: ProviderBookingManagementSetting["hasBookingManagement"];
   zones?: Zone[] | null;
   isCreateAction?: boolean;
+  workHours?: WorkHour[];
 }
 
 export function ProductSetForm({
@@ -64,6 +66,7 @@ export function ProductSetForm({
   providerHasBookingManagement,
   zones,
   isCreateAction,
+  workHours,
   ...shared
 }: ProductSetFormProps) {
   const { t } = useTranslation("Design");
@@ -83,6 +86,15 @@ export function ProductSetForm({
   const { setError, reset } = form;
   const formValues = form.watch();
 
+  const submitHandler = (onSubmit: (values: ProductSetFormValues) => void) => {
+    return (values: ProductSetFormValues) => {
+      if (checkAvailableTimesErrors({ values, setError, t })) {
+        return;
+      }
+      onSubmit(values);
+    };
+  };
+
   useEffect(() => {
     if (!defaultValues || isEqual(defaultValues, formValues)) {
       return;
@@ -127,7 +139,7 @@ export function ProductSetForm({
       />
 
       <FormProvider {...form}>
-        <Form onSubmit={form.handleSubmit(onSubmitAndRedirect)}>
+        <Form onSubmit={form.handleSubmit(submitHandler(onSubmitAndRedirect))}>
           <ProductSetLoadingContext.Consumer>
             {({ isLoading: contextIsLoading }) => {
               return (
@@ -147,6 +159,8 @@ export function ProductSetForm({
                     isLoading={isLoading}
                     isCreateAction={isCreateAction}
                     companyName={companyName}
+                    workHours={workHours}
+                    providerHasBookingManagement={providerHasBookingManagement}
                   />
                   <Row>
                     <Col md={6} sm={12} />
@@ -158,7 +172,9 @@ export function ProductSetForm({
                       {onSubmitNoRedirect && (
                         <Button
                           className="product-set-save-btn mt-5 ml-5 d-no dne d-md-block"
-                          onClick={form.handleSubmit(onSubmitNoRedirect)}
+                          onClick={form.handleSubmit(
+                            submitHandler(onSubmitNoRedirect)
+                          )}
                           disabled={
                             isLoading || contextIsLoading || !formValues.name
                           }

package/src/product-set/utils/index.ts

@@ -1,6 +1,15 @@
 import { EmailTemplate } from "@licklist/core/dist/DataMapper/Notification/EmailTemplateDataMapper";
 import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper";
+import { TFunction } from "i18next";
+import { UseFormSetError } from "react-hook-form";
 import { TemplateItem } from "../control/ProductSetControl";
+import { ProductSetFormValues } from "../form/ProductSetForm";
+
+interface CheckAvailableTimesErrors {
+  values: ProductSetFormValues;
+  setError: UseFormSetError<ProductSetFormValues>;
+  t: TFunction;
+}
 
 export const moveArrayElements = <T>(
   array: T[],
@@ -42,3 +51,32 @@ export const getFilteredTemplates = (
       label: template?.notification?.name,
     }));
 };
+
+export const checkAvailableTimesErrors = ({
+  values,
+  setError,
+  t,
+}: CheckAvailableTimesErrors) => {
+  let hasError = false;
+
+  const hasCategoryWithZone = values?.steps?.some(
+    (step) => !!step?.productCategories.some((category) => !!category?.zoneId)
+  );
+  if (!hasCategoryWithZone) {
+    return hasError;
+  }
+
+  values?.menuRecurrences?.forEach((recurrence, index: number) => {
+    if (!recurrence?.availableTimes?.length) {
+      hasError = true;
+      setError(`menuRecurrences.${index}.availableTimes` as const, {
+        type: "validate",
+        message: t("Validation:fieldMinNumber", {
+          attribute: t("startTimes"),
+          min: 1,
+        }),
+      });
+    }
+  });
+  return hasError;
+};

package/src/styles/activity-card/GridActivitiesCard.scss

@@ -6,7 +6,6 @@
   color: $snippet-elements-body-color;
   border-radius: 0.5rem;
   padding: 0.375rem;
-  min-height: 12.5rem;
   width: 11.5rem;
   word-wrap: break-word;
   background-color: #fff;
@@ -21,13 +20,6 @@
     border: 2px solid #0e8be1;
   }
 
-  &-image {
-    width: 100%;
-    height: 6.3rem;
-    margin-bottom: 0.5rem;
-    border-radius: 0.3rem;
-  }
-
   &-title {
     font-weight: 600;
     line-height: 1.25rem;

package/src/styles/form/CustomCheckbox.scss

@@ -21,6 +21,7 @@
     padding-left: 0.5rem;
     font-weight: 400;
     font-size: 0.875rem;
+    min-height: 3rem;
   }
 
   .checkbox-input {

package/src/styles/zones/ZoneForm.scss

@@ -3,5 +3,8 @@
   flex-wrap: wrap;
   gap: 1.5rem;
   height: 8rem;
+  padding-left: 1.5rem;
+  justify-content: start;
+  width: 95%;
   overflow: scroll;
 }

package/src/zone/form/ZoneForm.tsx

@@ -25,7 +25,6 @@ export const ZoneForm = ({
   onSubmit,
   serverErrors,
   isLoading = false,
-  workHours = [],
 }: ZoneFormProps) => {
   const { t } = useTranslation("Design");
   const form = useForm<ZoneFormValues>({
@@ -55,7 +54,7 @@ export const ZoneForm = ({
   return (
     <FormProvider {...form}>
       <Form onSubmit={handleSubmit(onFormSubmit)}>
-        <ZoneControl isLoading={isLoading} workHours={workHours} />
+        <ZoneControl isLoading={isLoading} />
         <Row>
           <Col md={6} sm={12} />
           <Col

package/src/zone/form/components/AvailableTimesControl.tsx

@@ -23,6 +23,8 @@ type AvailableTimesControlProps = {
   defaultValues?: string[];
   startTime?: string;
   endTime?: string;
+  errorMessage?: string;
+  clearErrorMessage: () => void;
 };
 
 type AvailableTimesForm = { availableTimes: string[] };
@@ -30,91 +32,95 @@ type AvailableTimesForm = { availableTimes: string[] };
 export const AvailableTimesControl = forwardRef<
   AvailableTimesControlRef,
   AvailableTimesControlProps
->(({ isLoading, workHours, defaultValues = [] }, ref) => {
-  const nameId = useId();
-  const { t } = useTranslation(["Design", "Validation"]);
-
-  const {
-    register,
-    formState: { errors },
-    reset,
-    trigger,
-    getValues,
-    setValue,
-    watch,
-    setError,
-  } = useForm<AvailableTimesForm>({ mode: "onChange" });
-
-  const availableTimes = watch("availableTimes") || [];
-
-  const checkboxes = useMemo(
-    () => getCheckboxesByWorkHours(workHours),
-    [workHours]
-  );
-
-  useImperativeHandle(ref, () => {
-    return {
+>(
+  (
+    {
+      isLoading,
+      workHours,
+      defaultValues = [],
+      errorMessage,
+      clearErrorMessage,
+    },
+    ref
+  ) => {
+    const nameId = useId();
+    const { t } = useTranslation(["Design", "Validation"]);
+
+    const {
+      register,
+      formState: { errors },
+      reset,
       trigger,
       getValues,
+      setValue,
+      watch,
       setError,
+    } = useForm<AvailableTimesForm>({ mode: "onChange" });
+
+    const availableTimes = watch("availableTimes") || [];
+
+    const checkboxes = useMemo(
+      () => getCheckboxesByWorkHours(workHours),
+      [workHours]
+    );
+
+    useImperativeHandle(ref, () => {
+      return {
+        trigger,
+        getValues,
+        setError,
+      };
+    });
+
+    const onChange = (option: string) => {
+      const isAlreadyChecked = availableTimes.includes(option);
+      if (errorMessage) {
+        clearErrorMessage();
+      }
+      if (isAlreadyChecked) {
+        setValue(
+          "availableTimes",
+          availableTimes.filter((value) => value !== option)
+        );
+
+        return;
+      }
+
+      setValue("availableTimes", [...availableTimes, option]);
     };
-  });
-
-  const onChange = (option: string) => {
-    const isAlreadyChecked = availableTimes.includes(option);
-
-    if (isAlreadyChecked) {
-      setValue(
-        "availableTimes",
-        availableTimes.filter((value) => value !== option)
-      );
-
-      return;
-    }
-
-    setValue("availableTimes", [...availableTimes, option]);
-  };
-
-  useEffect(() => {
-    if (!defaultValues) return;
-
-    reset({ availableTimes: defaultValues });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultValues]);
-
-  return (
-    <Form.Group controlId={nameId}>
-      <Form.Label>{t("Design:startTimes")}</Form.Label>
-      <div className="zone-available-times">
-        {checkboxes.map((option) => {
-          return (
-            <Form.Check key={option} inline custom id={option}>
-              <Form.Check.Input
-                type="checkbox"
-                value={option}
-                checked={availableTimes.includes(option)}
-                onChange={() => onChange(option)}
-                disabled={isLoading}
-              />
-              <Form.Check.Label>{option}</Form.Check.Label>
-            </Form.Check>
-          );
-        })}
-      </div>
 
-      <Form.Control
-        type="hidden"
-        {...register("availableTimes", {
-          required: {
-            value: true,
-            message: t("Validation:fieldMinNumber", {
-              attribute: t("startTimes"),
-              min: 1,
-            }),
-          },
-        })}
-      />
-      <div className="manual-form-error">{errors.availableTimes?.message}</div>
-    </Form.Group>
-  );
-});
+    useEffect(() => {
+      if (!defaultValues) return;
+
+      reset({ availableTimes: defaultValues });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [defaultValues]);
+
+    return (
+      <Form.Group controlId={nameId}>
+        <Form.Label>{t("Design:startTimes")}</Form.Label>
+        <div className="zone-available-times">
+          {checkboxes.map((option) => {
+            return (
+              <Form.Check key={option} inline custom id={option}>
+                <Form.Check.Input
+                  type="checkbox"
+                  value={option}
+                  checked={availableTimes.includes(option)}
+                  onChange={() => onChange(option)}
+                  disabled={isLoading}
+                />
+                <Form.Check.Label>{option}</Form.Check.Label>
+              </Form.Check>
+            );
+          })}
+        </div>
+
+        <Form.Control type="hidden" {...register("availableTimes")} />
+        <div className="manual-form-error">
+          {errors.availableTimes?.message || errorMessage}
+        </div>
+      </Form.Group>
+    );
+  }
+);

package/src/zone/form/components/ZoneControl.tsx

@@ -14,15 +14,12 @@ export type ZoneControlProps = {
   workHours?: WorkHour[];
 };
 
-export const ZoneControl = ({
-  isLoading,
-  workHours = [],
-}: ZoneControlProps) => {
+export const ZoneControl = ({ isLoading }: ZoneControlProps) => {
   return (
     <Row>
       <Col md={6} sm={12} className="pr-5">
         <NameControl isLoading={isLoading} />
-        <ZoneRecurrencesControl workHours={workHours} isLoading={isLoading} />
+        <ZoneRecurrencesControl />
         <hr />
         <Row>
           <Col md={6} sm={6}>