@licklist/design 0.44.486-dev.1 → 0.44.486-dev.10

package/src/styles/iframe-events/Calendar.scss

@@ -1,4 +1,3 @@
-
 .calendar-wrapper {
   display: flex;
 
@@ -21,7 +20,7 @@
           background-color: transparent;
         }
 
-        &:focus{
+        &:focus {
           box-shadow: none;
         }
       }
@@ -73,10 +72,9 @@
       }
     }
 
-    
-
     .calendar-dates-wrapper {
-      .calendar-weekdays, .calendar-dates {
+      .calendar-weekdays,
+      .calendar-dates {
         display: grid;
         grid-template-columns: repeat(7, auto);
         grid-gap: 0.5rem 1rem;
@@ -98,17 +96,17 @@
         margin-top: 0.75rem;
 
         .calendar-date {
-          height: 2rem;
           display: flex;
+          flex-direction: column;
           align-items: center;
           justify-content: center;
-          padding: 0;
+          padding: 0.25rem;
           border-radius: 0.25rem;
           background-color: $snippet-calendar-button-background-color;
           color: $snippet-calendar-button-font-color;
           font-size: 0.875rem;
           line-height: 1.3125rem;
-          border: 1px solid $snippet-calendar-button-border-color;;
+          border: 1px solid $snippet-calendar-button-border-color;
 
           &.selected-date {
             background-color: $snippet-calendar-active-button-background-color;
@@ -138,7 +136,7 @@
           &:hover {
             border-color: $snippet-calendar-active-button-border-color;
           }
-            
+
           &:focus {
             box-shadow: none;
           }
@@ -167,11 +165,11 @@
         justify-content: center;
         width: 3.75rem;
         height: 2.5rem;
-        background-color: #F2F2F2;
+        background-color: #f2f2f2;
         color: $black;
         font-size: 0.75rem;
         border-radius: 0.25rem;
-  
+
         &.selected-time {
           background-color: $blue;
           color: $white;
@@ -189,14 +187,16 @@
     flex-direction: column;
     align-items: center;
 
-    .calendar, .start-time-wrapper {
+    .calendar,
+    .start-time-wrapper {
       min-width: 20.75rem;
 
       .calendar-dates-wrapper {
-        .calendar-weekdays, .calendar-dates {
+        .calendar-weekdays,
+        .calendar-dates {
           grid-gap: 0.5rem;
         }
-  
+
         .calendar-dates {
           .calendar-date {
             width: 2.5rem;

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

@@ -199,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 {
@@ -234,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/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 = {
@@ -62,20 +61,18 @@ export const AvailableTimesControl = forwardRef<
   });
 
   const onChange = (option: string) => {
-    const timeWithOffset = calculateTimeWithOffset(option);
-
-    const isAlreadyChecked = availableTimes.includes(timeWithOffset);
+    const isAlreadyChecked = availableTimes.includes(option);
 
     if (isAlreadyChecked) {
       setValue(
         "availableTimes",
-        availableTimes.filter((value) => value !== timeWithOffset)
+        availableTimes.filter((value) => value !== option)
       );
 
       return;
     }
 
-    setValue("availableTimes", [...availableTimes, timeWithOffset]);
+    setValue("availableTimes", [...availableTimes, option]);
   };
 
   useEffect(() => {
@@ -95,9 +92,7 @@ export const AvailableTimesControl = forwardRef<
               <Form.Check.Input
                 type="checkbox"
                 value={option}
-                checked={availableTimes.includes(
-                  calculateTimeWithOffset(option)
-                )}
+                checked={availableTimes.includes(option)}
                 onChange={() => onChange(option)}
                 disabled={isLoading}
               />

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

@@ -13,10 +13,7 @@ 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 {
@@ -67,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>();
 
@@ -97,29 +93,29 @@ export const ZoneRecurrencesControl = ({
     if (!isAvailableTimesFormValid) {
       return;
     }
-    const startTime = DateTime.fromFormat(next.startTime, TIME_FORMAT);
-    const endTime = DateTime.fromFormat(next.endTime, TIME_FORMAT);
-    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: next?.startTime,
-          max: next?.endTime,
-        }),
+    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;
+        return;
+      }
     }
     const values = {
       rrule: next.rrule,
@@ -147,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 = () => {

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;
 };