@licklist/design 0.44.486-dev.8 → 0.44.486-dev.81

package/src/styles/packages.scss

@@ -13,7 +13,6 @@
 @import "./static";
 @import "./table";
 @import "./back-button";
-@import "./iframe-customers-journey";
 @import "./custom-fields";
 @import "./file-upload";
 @import "./iframe-events";
@@ -41,3 +40,6 @@
 @import "./striped-static-table/";
 @import "./image-radio-input/";
 @import "./radio-card/";
+@import "./activity-card/";
+@import "./date-time-button/";
+@import "./availability-indicator/";

package/src/styles/resources-blocking/_index.scss

@@ -7,6 +7,16 @@
     overflow: auto;
   }
 
+
+  .modal-form-content {
+    max-height: 21rem;
+    overflow-x: hidden;
+
+    .error-content {
+      min-width: 25rem;
+    }
+  }
+
   .reccurrence-interval-container {
     .form-group {
       margin-bottom: 0.5rem;
@@ -66,6 +76,7 @@
     display: flex;
     flex-direction: column;
     gap: 1rem;
+
   }
 
   .custom-checkbox {
@@ -132,6 +143,10 @@
     }
   }
 
+  .footer-with-short-notes {
+    min-width: 18rem;
+  }
+
   footer {
     display: flex;
     gap: 1.25rem;
@@ -148,3 +163,4 @@
     }
   }
 }
+

package/src/styles/sales/BookingResults.scss

@@ -5,14 +5,14 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 11.125rem;
+      height: 13.825rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);
       transition: ease-in 0.25s;
       border-radius: 0.25rem;
       box-shadow: 0px 0px 0.125rem 0px rgb(0 0 0 / 20%);
-      
+
       .card-content {
         width: 100%;
         height: 100%;
@@ -28,7 +28,7 @@
           position: absolute;
           left: 0.5rem;
           top: 0.125rem;
-          font-weight: 600;   
+          font-weight: 600;
         }
 
         .order-people {
@@ -43,7 +43,7 @@
           height: 1.75rem;
           font-size: 0.625rem;
           line-height: 0.625rem;
-          color: #6D6D6D;
+          color: #6d6d6d;
           font-weight: 600;
 
           svg {
@@ -62,11 +62,19 @@
             font-size: 0.6875rem;
           }
         }
+
+        .products {
+          display: block;
+          width: 80%;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
       }
 
       &:hover {
         box-shadow: 0px 0px 0.5rem 0px rgb(0 0 0 / 20%);
-        cursor: pointer; 
+        cursor: pointer;
       }
     }
 
@@ -85,4 +93,4 @@
       }
     }
   }
-}
+}

package/src/styles/themes/bookedit/_index.scss

@@ -46,6 +46,7 @@
 .header {
   background-color: color("white");
   padding: 0 2.5rem;
+  z-index: 2;
   min-height: 4rem;
   border-bottom: 1px solid #f0f0f0;
 }

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/types/iframe.ts

@@ -15,6 +15,7 @@ export interface Product {
   isRequired?: boolean;
   isUnlimited?: boolean;
   images: CoreProduct["images"];
+  capacity?: number | null;
   uuid: string;
 }
 

package/src/typings.d.ts

@@ -28,3 +28,14 @@ declare module "*.json" {
 
 declare module "react-phone-number-input/input";
 declare module "react-phone-number-input/commonjs/Flag";
+
+// @TODO: this is a hofix for the following issue:
+// licklist_workspace_frontend/packages/design/src/product-set/hooks/useSortableTreeFunctions.ts(17,34):
+// semantic error TS2304: Cannot find name 'structuredClone'.
+interface WindowOrWorkerGlobalScope {
+  structuredClone(value: any, options?: StructuredSerializeOptions): any;
+}
+declare function structuredClone(
+  value: any,
+  options?: StructuredSerializeOptions
+): any;

package/src/virtualized/components/VirtualizedWindowScroller.tsx

@@ -39,7 +39,8 @@ const WrappedVirtualizedWindowScroller = ({
     if (!onDataUpdate) return;
 
     onDataUpdate();
-  }, [windowDimensions, scrollElement, gridRef, onDataUpdate]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [windowDimensions]);
 
   return (
     <WindowScroller scrollElement={scrollElement}>

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

@@ -9,7 +9,6 @@ import { Form } from "react-bootstrap";
 import { UseFormSetError, useForm } from "react-hook-form";
 import { useId } from "@react-aria/utils";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
-import { calculateTimeWithOffset } from "@licklist/plugins/dist/utils/time";
 import { getCheckboxesByWorkHours } from "../utils/dates";
 
 export type AvailableTimesControlRef = {
@@ -24,6 +23,8 @@ type AvailableTimesControlProps = {
   defaultValues?: string[];
   startTime?: string;
   endTime?: string;
+  errorMessage?: string;
+  clearErrorMessage: () => void;
 };
 
 type AvailableTimesForm = { availableTimes: string[] };
@@ -31,95 +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 timeWithOffset = calculateTimeWithOffset(option);
-
-    const isAlreadyChecked = availableTimes.includes(timeWithOffset);
-
-    if (isAlreadyChecked) {
-      setValue(
-        "availableTimes",
-        availableTimes.filter((value) => value !== timeWithOffset)
-      );
-
-      return;
-    }
-
-    setValue("availableTimes", [...availableTimes, timeWithOffset]);
-  };
-
-  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(
-                  calculateTimeWithOffset(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/GameDurationControl.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Form } from "react-bootstrap";
+import { useFormContext } from "react-hook-form";
+import { useId } from "@react-aria/utils";
+import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
+
+type GameDurationControlProps = {
+  isLoading: boolean;
+};
+
+export const GameDurationControl = ({
+  isLoading,
+}: GameDurationControlProps) => {
+  const nameId = useId();
+  const { t } = useTranslation(["Design", "Validation"]);
+
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<Pick<Zone, "defaultDuration">>();
+
+  return (
+    <Form.Group controlId={nameId}>
+      <Form.Label>{t("Design:defaultGameDuration")}</Form.Label>
+      <Form.Control
+        type="number"
+        {...register("defaultDuration", {
+          required: false,
+          min: 1,
+        })}
+        placeholder={t("Design:duration")}
+        isInvalid={Boolean(errors.defaultDuration)}
+        disabled={isLoading}
+      />
+      <Form.Control.Feedback type="invalid">
+        {HookFormService.hasError(errors.defaultDuration, "min") &&
+          t("Validation:fieldMinNumber", {
+            attribute: t("Design:defaultGameDuration").toLowerCase(),
+            min: 1,
+          })}
+      </Form.Control.Feedback>
+    </Form.Group>
+  );
+};

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

@@ -7,26 +7,25 @@ import { SortControl } from "./SortControl";
 import { ZoneRecurrencesControl } from "./ZoneRecurrencesControl";
 import { DescriptionControl } from "./DescriptionControl";
 import { ZoneImageControl } from "./ZoneImageControl";
+import { GameDurationControl } from "./GameDurationControl";
 
 export type ZoneControlProps = {
   isLoading: boolean;
   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}>
             <ZoneTypeControl isLoading={isLoading} />
             <SortControl isLoading={isLoading} />
+            <GameDurationControl isLoading={isLoading} />
           </Col>
           <Col md={6} sm={6}>
             <ZoneImageControl isLoading={isLoading} />

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

@@ -11,12 +11,7 @@ import {
 } from "@dnd-kit/sortable";
 import { DndContext } from "@dnd-kit/core";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
-import { DateTime } from "luxon";
-import { TIME_FORMAT } from "@licklist/core/dist/Config";
-import {
-  calculateTimeWithOffset,
-  DIRECTION_TO_LOCAL,
-} from "@licklist/plugins/dist/utils/time";
+
 import { CONFIRM_MODAL_ACTIONS } from "../../../modals/confirmation/ConfirmModal";
 import { Icon } from "../../../static";
 import {
@@ -24,10 +19,6 @@ import {
   RecurringDatePickerInputValues,
 } from "../../../recurring-date-picker-input/RecurringDatePickerInput";
 import { ZoneRecurrenceControl } from "./ZoneRecurrenceControl";
-import {
-  AvailableTimesControl,
-  AvailableTimesControlRef,
-} from "./AvailableTimesControl";
 import { sameWidthPopperModifier } from "../../../product-set/control/DateAndRecurrenceInput";
 
 export interface DateAndRecurrenceInputValues {
@@ -39,10 +30,7 @@ export type ZoneRecurrenceControlProps = {
   isLoading?: boolean;
 };
 
-export const ZoneRecurrencesControl = ({
-  workHours,
-  isLoading = false,
-}: ZoneRecurrenceControlProps) => {
+export const ZoneRecurrencesControl = () => {
   const {
     control,
     register,
@@ -66,10 +54,7 @@ export const ZoneRecurrencesControl = ({
     values: null,
   });
   const clearEditState = () => setEditState({ index: null, values: null });
-  const [availableTimes, setAvailableTimes] = useState<string[]>([]);
-
   const popoverRef = useRef<HTMLDivElement>();
-  const availableTimesFormRef = useRef<AvailableTimesControlRef>();
 
   useClickAway(popoverRef, (event) => {
     const isModal = CONFIRM_MODAL_ACTIONS.includes(
@@ -92,45 +77,12 @@ export const ZoneRecurrencesControl = ({
   const handleRecurringDateChange = async (
     next: RecurringDatePickerInputValues
   ) => {
-    const isAvailableTimesFormValid =
-      await availableTimesFormRef.current?.trigger();
-    if (!isAvailableTimesFormValid) {
-      return;
-    }
-    if (next?.startTime && next?.endTime) {
-      const startTime = DateTime.fromISO(next.startTime);
-      const endTime = DateTime.fromISO(next.endTime);
-      const { availableTimes } = availableTimesFormRef.current.getValues();
-      const validAvalilableTimes = availableTimes.every((time) => {
-        const currentAvailableTime = DateTime.fromFormat(
-          calculateTimeWithOffset(time, DIRECTION_TO_LOCAL),
-          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<ZoneRecurrence>;
 
     if (editState.values?.id) {
@@ -151,7 +103,6 @@ export const ZoneRecurrencesControl = ({
     clearEditState();
 
     setEditState({ index, values: next });
-    setAvailableTimes(next.availableTimes || []);
     setIsDatePopoverVisible(() => true);
   };
 
@@ -215,14 +166,7 @@ export const ZoneRecurrencesControl = ({
                 onChange={handleRecurringDateChange}
                 onDelete={handleDelete}
                 setInitialStartDateAfterSelect
-              >
-                <AvailableTimesControl
-                  workHours={workHours}
-                  isLoading={isLoading}
-                  defaultValues={availableTimes}
-                  ref={availableTimesFormRef}
-                />
-              </RecurringDatePickerInput>
+              />
             </Popover.Content>
           </Popover>
         }

package/src/zone/form/utils/dates.ts

@@ -1,5 +1,7 @@
-import { datetime, TIME_SEPARATOR } from "@licklist/core/dist/Services/Date";
+import { TIME_SEPARATOR } from "@licklist/core/dist/Services/Date";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
+import { DateTime } from "luxon";
+import { TIME_FORMAT } from "@licklist/core/dist/Config";
 
 const DEFAULT_START_DAY_TIME = "00:00";
 const DEFAULT_END_DAY_TIME = "23:59";
@@ -13,46 +15,37 @@ export const getTimeCheckboxRanges = (
   const [startHour, startMinutes] = startTime.split(TIME_SEPARATOR);
   const [endHour, endMinutes] = endTime.split(TIME_SEPARATOR);
 
-  let startDate = datetime(
-    today.getFullYear(),
-    today.getMonth() + 1,
-    today.getDate(),
-    Number(startHour),
-    Number(startMinutes)
-  );
-
-  const endDate = datetime(
-    today.getFullYear(),
-    today.getMonth() + 1,
-    today.getDate(),
-    Number(endHour),
-    Number(endMinutes)
-  );
-
-  const dateSlices: { [key: string]: Date } = {
-    0: startDate,
-  };
+  let startDate = DateTime.now()
+    .setZone("UTC")
+    .set({
+      year: today.getFullYear(),
+      month: today.getMonth() + 1,
+      day: today.getDate(),
+      hour: Number(startHour),
+      minute: Number(startMinutes),
+      second: 0,
+    });
+
+  const endDate = DateTime.now()
+    .setZone("UTC")
+    .set({
+      year: today.getFullYear(),
+      month: today.getMonth() + 1,
+      day: today.getDate(),
+      hour: Number(endHour),
+      minute: Number(endMinutes),
+      second: 0,
+    });
+
+  const checkboxes: string[] = [startDate.toFormat(TIME_FORMAT)];
   let count = 0;
 
-  while (endDate >= startDate) {
-    startDate = new Date(startDate.getTime() + range * 60 * 1000);
+  while (endDate.diff(startDate, ["minutes"]).minutes >= range) {
+    startDate = startDate.plus({ minutes: range });
     count += 1;
-    dateSlices[count] = startDate;
+    checkboxes[count] = startDate.toFormat(TIME_FORMAT);
   }
 
-  const checkboxes = Object.keys(dateSlices)
-    .map((key) => {
-      const date = dateSlices[key];
-      if (date < endDate) {
-        const [, time] = date.toISOString().split("T");
-        const [selectedHours, selectedMinutes] = time.split(TIME_SEPARATOR);
-
-        return [selectedHours, selectedMinutes].join(TIME_SEPARATOR);
-      }
-      return null;
-    })
-    .filter(Boolean);
-
   return checkboxes;
 };
 

package/dist/iframe/activity-cards/activity-card/ActivityCard.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from "react";
-import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
-export interface ActivityCardProps {
-    title: ReactNode;
-    duration: ReactNode;
-    price: ReactNode;
-    image?: Image | null;
-    onSelect: () => void;
-    isSelected: boolean;
-}
-export declare const ActivityCard: ({ title, duration, price, image, onSelect, isSelected, }: ActivityCardProps) => JSX.Element;
-//# sourceMappingURL=ActivityCard.d.ts.map

package/dist/iframe/activity-cards/activity-card/ActivityCard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ActivityCard.d.ts","sourceRoot":"","sources":["../../../../src/iframe/activity-cards/activity-card/ActivityCard.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,sDAAsD,CAAC;AAE7E,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,6DAOtB,iBAAiB,gBAiBnB,CAAC"}