@licklist/design 0.44.526 → 0.44.528

package/src/styles/iframe-order-process/IframeOrderProcess.scss

@@ -64,6 +64,11 @@
   font-weight: 400;
   font-size: 0.875rem;
 
+  b {
+    display: block;
+    font-size: 1rem;
+  }
+
   .accordion > button {
     width: 100%;
     border: 0;
@@ -193,7 +198,7 @@
 }
 
 .steps-wrapper {
-  margin-left: 1rem;
+  margin: 0 3rem;
   flex: 1;
   display: flex;
   align-items: center;
@@ -238,9 +243,9 @@
 
       .number {
         text-align: center;
-        max-width: 3rem;
+        max-width: 17rem;
         width: 100%;
-        height: 0.25rem;
+        height: 0.35rem;
         line-height: 2.5rem;
         background: $snippet-page-header-steps-inactive-step-background-color;
         display: block;

package/src/styles/iframe-page/PageBody.scss

@@ -60,6 +60,7 @@
 
     .left-block-container {
       height: calc(100svh - 12rem);
+      scrollbar-width: none;
       overflow: scroll;
 
       .iframe-event-card {
@@ -119,6 +120,7 @@
 
         &.show {
           overflow: scroll;
+          scrollbar-width: none;
           overflow-x: hidden;
         }
 
@@ -197,7 +199,8 @@
         color: $snippet-elements-button-color;
         border: none;
         background-color: $snippet-elements-button-background-color;
-        box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
+        box-shadow: 0 0 0 $input-btn-focus-width
+          $snippet-elements-button-background-color;
       }
 
       &:disabled {
@@ -232,7 +235,7 @@
     font-weight: 500;
     border-radius: 0.25rem;
     font-size: 0.875rem;
-    height: 2.25rem;
+    min-height: 2.25rem;
 
     &:focus {
       box-shadow: unset;

package/src/styles/{widgets/ImageRadioInput.scss → image-radio-input/_index.scss}

@@ -1,4 +1,5 @@
 .image-radio-input {
+  width: min-content;
   padding: 0;
 
   &-wrapper {
@@ -9,9 +10,16 @@
     cursor: pointer;
   }
 
+  &-image-wrapper {
+    display: flex;
+    max-width: 7.5rem;
+    max-height: 4.25rem;
+  }
+
   &-label {
     display: flex;
     justify-content: center;
+    align-items: center;
     gap: 0.5rem;
 
     input {
@@ -19,4 +27,8 @@
       margin: 0;
     }
   }
+
+  .disabled {
+    opacity: 0.5;
+  }
 }

package/src/styles/packages.scss

@@ -8,9 +8,11 @@
 @import "./sales";
 @import "./setting";
 @import "./sidebar";
+@import "./sortable-field";
 @import "./sortable-tree";
 @import "./static";
 @import "./table";
+@import "./back-button";
 @import "./custom-fields";
 @import "./file-upload";
 @import "./iframe-events";
@@ -29,7 +31,6 @@
 @import "./iframe-page";
 @import "./affiliate";
 @import "./zones";
-@import "./widgets/";
 @import "./resources-blocking";
 @import "./ryft-payment-form";
 @import "./skeleton";
@@ -37,3 +38,8 @@
 @import "./error";
 @import "./customers/";
 @import "./striped-static-table/";
+@import "./image-radio-input/";
+@import "./radio-card/";
+@import "./activity-card/";
+@import "./date-time-button/";
+@import "./availability-indicator/";

package/src/styles/{widgets/WidgetTypeRadioButton.scss → radio-card/_index.scss}

@@ -1,8 +1,15 @@
-.widget-type-radio {
+.radio-card {
   padding: 0;
 
+  &.invalid {
+    label {
+      border-color: $red;
+    }
+  }
+
   label {
     display: block;
+    align-items: center;
     padding: 0.75rem 1rem;
     border-radius: 0.5rem;
     border: 2px solid #dcdcdc;

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

@@ -7,6 +7,42 @@
     overflow: auto;
   }
 
+  .modal-form-content {
+    max-height: 21rem;
+    overflow-x: hidden;
+  }
+
+  .reccurrence-interval-container {
+    .form-group {
+      margin-bottom: 0.5rem;
+      .form-control {
+        height: 1.5rem;
+        font-size: 0.625rem;
+        border: 2px solid #dcdcdc;
+        border-radius: 0.5rem;
+      }
+    }
+  }
+
+  .custom-checkbox .custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 0.5rem;
+    border: 2px solid #0e8ce2;
+    margin-top: -0.3rem;
+  }
+  .custom-checkbox .custom-control-label::after {
+    width: 1.5rem;
+    height: 1.5rem;
+    top: 0;
+  }
+
+  .custom-control-label {
+    padding-left: 0.5rem;
+    font-weight: 400;
+    font-size: 0.875rem;
+  }
+
   label,
   header,
   button {
@@ -14,6 +50,10 @@
     font-size: 0.875rem;
   }
 
+  .title {
+    margin-left: 0.25rem;
+  }
+
   header {
     display: flex;
     justify-content: space-between;
@@ -46,6 +86,7 @@
     display: flex;
     align-items: center;
     gap: 1rem;
+    margin-bottom: 1rem;
 
     span {
       font-weight: 600;
@@ -58,6 +99,7 @@
     justify-content: space-between;
     align-items: center;
     gap: 0.25rem;
+    margin-bottom: 0.5rem;
   }
 
   .text-input.form-group {
@@ -90,7 +132,7 @@
       font-weight: 600;
     }
 
-    .lane {
+    .resource {
       margin-bottom: 0.25rem;
     }
   }

package/src/styles/sales/BookingFilter.scss

@@ -215,6 +215,8 @@
 
         .icon {
           margin-left: 0.5rem;
+          border: none;
+          padding: 0;
           cursor: pointer;
           width: 1.125rem;
           height: 1.125rem;

package/src/styles/sales/ManualBooking.scss

@@ -158,6 +158,12 @@
     font-weight: 600;
   }
 
+  .category-start-time {
+    font-size: 1rem;
+    width: 11rem;
+    margin-top: 1rem;
+  }
+
   .accordion-form-control {
     border: none;
     border-bottom: 2px solid $gray-400;
@@ -279,7 +285,7 @@
   .small-sizes-input {
     font-size: 1.5rem;
     padding: 0;
-    padding-left: 1.7rem;
+    padding-left: 1.5rem;
     padding-right: 1rem;
     margin: 0 auto;
     width: 7rem;

package/src/styles/sales/RandomColors.scss

@@ -1,17 +1,20 @@
 .random-color {
   &-blue {
-    background-color: #E4F9FF;
+    background-color: #e4f9ff;
   }
 
   &-yellow {
-    background-color: #F7F4C1;
+    background-color: #f7f4c1;
   }
 
   &-green {
-    background-color: #E4FFF3;
+    background-color: #e4fff3;
   }
 
   &-pink {
-    background-color: #FFE4F8;
+    background-color: #ffe4f8;
+  }
+  &-violet {
+    background-color: #e4e4ff;
   }
 }

package/src/styles/sortable-field/SortableField.scss

@@ -0,0 +1,21 @@
+.sortable-field-list {
+    display: flex;
+
+    .icon-container {
+        margin-right: .8rem;
+        margin-left: .2rem;
+        margin-top: 1rem;
+
+        div {
+            width: 0.75rem;
+            height: 2px;
+            margin-bottom: 2px;
+            background-color: #B5CCDE;
+            border-radius: 1px;
+        }
+    }
+
+    .form-group {
+        width: 80%;
+    }
+}

package/src/styles/sortable-field/_index.scss

@@ -0,0 +1 @@
+@import "./SortableField";

package/src/styles/static/DateRangeInput.scss

@@ -5,6 +5,10 @@
 
   .date-range-input[readonly] {
     background-color: transparent;
+
+    &:disabled {
+      background-color: #ebebeb;
+    }
   }
 
   .date-range-input-icon {
@@ -13,4 +17,4 @@
     bottom: 1rem;
     color: $gray-500;
   }
-}
+}

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/themes/bookedit/_variables.scss

@@ -38,7 +38,7 @@ $blue: #0e8ce2;
 $indigo: #6610f2 !default;
 $purple: #6f42c1 !default;
 $pink: #e83e8c !default;
-$dark-pink: #E20E58 !default;
+$dark-pink: #e20e58 !default;
 $red: #f94b25;
 $orange: #fd7e14 !default;
 $yellow: #ffc107 !default;
@@ -65,7 +65,7 @@ $colors: (
   "gray": $gray-600,
   "gray-dark": $gray-800,
   "light-yellow": $light-yellow,
-  "dark-pink": $dark-pink
+  "dark-pink": $dark-pink,
 );
 
 $primary: $blue !default;
@@ -231,6 +231,7 @@ $line-height-lg: 1.5 !default;
 $line-height-sm: 1.5 !default;
 
 $border-width: 1px !default;
+$calendar-border: 2px solid #f2f2f2;
 $border-color: $gray-300 !default;
 
 $border-radius: 1rem;

package/src/styles/zones/ZoneForm.scss

@@ -1,7 +1,6 @@
 .zone-available-times {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
   gap: 1.5rem;
   height: 8rem;
   overflow: scroll;

package/src/table/FilterHelperComponent.tsx

@@ -33,6 +33,7 @@ function FilterHelperComponent({
     if (onClickFn) {
       onClickFn("");
     }
+    setItem("");
   };
 
   const onSearch = () => {

package/src/types/iframe.ts

@@ -1,4 +1,5 @@
 import { Product as CoreProduct } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
 
 export interface Product {
   id: number;
@@ -25,12 +26,13 @@ export interface ProductCategory {
   minSubItems: number | null;
   maxSubItems: number | null;
   products?: Product[];
+  zone?: Zone | null;
 }
 
 export interface MenuStep {
   id: number;
   name: string;
-  productCategories: ProductCategory[];
+  productCategories?: ProductCategory[];
 }
 
 export interface Menu {
@@ -38,6 +40,8 @@ export interface Menu {
   menuSteps: MenuStep[];
 }
 
+// TODO similar type exists in iframe app
+// remove this when components are moved to iframe
 export interface Order {
   id: number;
   quantity: number;

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/components/AvailableTimesControl.tsx

@@ -6,7 +6,7 @@ import React, {
 } from "react";
 import { useTranslation } from "react-i18next";
 import { Form } from "react-bootstrap";
-import { useForm } from "react-hook-form";
+import { UseFormSetError, useForm } from "react-hook-form";
 import { useId } from "@react-aria/utils";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { getCheckboxesByWorkHours } from "../utils/dates";
@@ -14,12 +14,15 @@ import { getCheckboxesByWorkHours } from "../utils/dates";
 export type AvailableTimesControlRef = {
   trigger: () => Promise<boolean>;
   getValues: () => { availableTimes: string[] };
+  setError: UseFormSetError<AvailableTimesForm>;
 };
 
 type AvailableTimesControlProps = {
   isLoading: boolean;
   workHours?: WorkHour[];
   defaultValues?: string[];
+  startTime?: string;
+  endTime?: string;
 };
 
 type AvailableTimesForm = { availableTimes: string[] };
@@ -39,6 +42,7 @@ export const AvailableTimesControl = forwardRef<
     getValues,
     setValue,
     watch,
+    setError,
   } = useForm<AvailableTimesForm>({ mode: "onChange" });
 
   const availableTimes = watch("availableTimes") || [];
@@ -52,6 +56,7 @@ export const AvailableTimesControl = forwardRef<
     return {
       trigger,
       getValues,
+      setError,
     };
   });
 

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,6 +7,7 @@ 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;
@@ -27,6 +28,7 @@ export const ZoneControl = ({
           <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

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from "react";
-import type Popper from "@popperjs/core";
 import { useId } from "@react-aria/utils";
 import { Form, OverlayTrigger, Popover } from "react-bootstrap";
 import { useFieldArray, useFormContext } from "react-hook-form";
@@ -12,6 +11,9 @@ 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 { CONFIRM_MODAL_ACTIONS } from "../../../modals/confirmation/ConfirmModal";
 import { Icon } from "../../../static";
 import {
@@ -23,6 +25,7 @@ import {
   AvailableTimesControl,
   AvailableTimesControlRef,
 } from "./AvailableTimesControl";
+import { sameWidthPopperModifier } from "../../../product-set/control/DateAndRecurrenceInput";
 
 export interface DateAndRecurrenceInputValues {
   zoneRecurrences?: Partial<ZoneRecurrence>[];
@@ -45,7 +48,6 @@ export const ZoneRecurrencesControl = ({
     setValue,
     clearErrors,
   } = useFormContext<DateAndRecurrenceInputValues>();
-
   const { fields, append, update, move } = useFieldArray({
     name: "zoneRecurrences",
     control,
@@ -62,7 +64,6 @@ export const ZoneRecurrencesControl = ({
   });
   const clearEditState = () => setEditState({ index: null, values: null });
   const [availableTimes, setAvailableTimes] = useState<string[]>([]);
-
   const popoverRef = useRef<HTMLDivElement>();
   const availableTimesFormRef = useRef<AvailableTimesControlRef>();
 
@@ -81,18 +82,41 @@ export const ZoneRecurrencesControl = ({
 
   const popoverId = useId()!;
 
-  const { t } = useTranslation("Design");
+  const { t } = useTranslation(["Design", "Validation"]);
 
   // in this method we should fulfill the form with a proper data
   const handleRecurringDateChange = async (
     next: RecurringDatePickerInputValues
   ) => {
-    const isValid = await availableTimesFormRef.current?.trigger();
-
-    if (!isValid) {
+    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(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,
@@ -119,12 +143,9 @@ export const ZoneRecurrencesControl = ({
   const handleOnEdit = (next: Partial<ZoneRecurrence>, index) => {
     clearEditState();
 
-    // Hotfix for an issue with Popover close & open actions
-    setTimeout(() => {
-      setEditState({ index, values: next });
-      setAvailableTimes(next.availableTimes || []);
-      setIsDatePopoverVisible(() => true);
-    }, 100);
+    setEditState({ index, values: next });
+    setAvailableTimes(next.availableTimes || []);
+    setIsDatePopoverVisible(() => true);
   };
 
   const handleOnAdd = () => {
@@ -211,7 +232,7 @@ export const ZoneRecurrencesControl = ({
               }
               strategy={verticalListSortingStrategy}
             >
-              {fields.map((zoneRecurrence, index) => (
+              {fields?.map((zoneRecurrence, index) => (
                 <ZoneRecurrenceControl
                   key={zoneRecurrence._id}
                   zoneRecurrence={zoneRecurrence}
@@ -257,29 +278,3 @@ export const ZoneRecurrencesControl = ({
     </Form.Group>
   );
 };
-
-const sameWidthPopperModifier: Popper.Modifier<
-  "sameWidth",
-  Record<string, unknown>
-> = {
-  name: "sameWidth",
-  enabled: true,
-  phase: "beforeWrite",
-  requires: ["computeStyles"],
-  fn({ state }) {
-    const style = {
-      width: `${state.rects.reference.width + 4}px`,
-      marginLeft: "-2px",
-      maxWidth: "unset",
-    };
-    Object.assign(state.styles.popper, style);
-  },
-  effect({ state }) {
-    const { width } = state.elements.reference.getBoundingClientRect();
-    const style = {
-      width: `${width}px`,
-      maxWidth: "unset",
-    };
-    Object.assign(state.elements.popper.style, style);
-  },
-};