@licklist/design 0.44.486-dev.18 → 0.44.486-dev.2

package/src/recurrence-input/RecurrenceEndInput.tsx

@@ -1,19 +1,17 @@
-import React, { useEffect, useRef } from "react";
+import React, { useRef } from "react";
 import { useId } from "@react-aria/utils";
 import { DateTime, DurationUnit } from "luxon";
 import { Col, Form, InputGroup, Row } from "react-bootstrap";
 import RRule from "rrule";
-import { DATE_FORMAT } from "@licklist/core/dist/Config";
-import { useTranslation } from "react-i18next";
+
 import { SupportedFrequency } from "./utils";
 import HTMLInputDateElement from "../types/static/HTMLInputDateElement";
 
 interface Props {
   disabled?: boolean;
-  date: string; // yyyy-mm-ddThh:mm
-  minDate?: string; // should be in yyyy-mm-dd format
+  date: string;
   frequency: SupportedFrequency;
-  until?: string; // yyyy-mm-dd
+  until?: string;
   count?: number;
   onChange: (values: { until?: string; count?: number }) => void;
 }
@@ -25,31 +23,16 @@ function RecurrenceEndInput({
   until,
   count,
   onChange,
-  minDate,
 }: Props) {
-  const { t } = useTranslation("Design");
   // unique ids for radios
   const neverId = useId();
   const onId = useId();
   const afterId = useId();
   const dateInput = useRef<HTMLInputDateElement | null>(null);
 
-  useEffect(() => {
-    const untilDatetime = DateTime.fromFormat(
-      until ?? getUntil({ date, frequency }),
-      DATE_FORMAT
-    );
-
-    const minDatetime = DateTime.fromFormat(minDate, DATE_FORMAT);
-
-    if (minDatetime > untilDatetime) {
-      onChange({ until: minDate });
-    }
-  }, [minDate, onChange, until, date, frequency]);
-
   return (
     <Form.Group>
-      <Form.Label>{t("ends")}</Form.Label>
+      <Form.Label>Ends</Form.Label>
 
       <Form.Check type="radio" id={neverId} custom className="mt-3">
         <Form.Check.Input
@@ -58,7 +41,7 @@ function RecurrenceEndInput({
           onChange={() => onChange({ count: 500 })}
           disabled={disabled}
         />
-        <Form.Check.Label>{t("never")}</Form.Check.Label>
+        <Form.Check.Label>Never</Form.Check.Label>
       </Form.Check>
 
       <Form.Check type="radio" id={onId} custom className="mt-3">
@@ -72,12 +55,11 @@ function RecurrenceEndInput({
               }
               disabled={disabled}
             />
-            <Form.Check.Label>{t("on")}</Form.Check.Label>
+            <Form.Check.Label>On</Form.Check.Label>
           </Col>
           <Col>
             <Form.Control
               type="date"
-              min={minDate}
               disabled={disabled || !until}
               aria-label="Date on which the recurrence ends"
               value={until ?? getUntil({ date, frequency })}
@@ -101,7 +83,7 @@ function RecurrenceEndInput({
               }
               disabled={disabled}
             />
-            <Form.Check.Label>{t("after")}</Form.Check.Label>
+            <Form.Check.Label>After</Form.Check.Label>
           </Col>
           <Col>
             <InputGroup>
@@ -117,7 +99,7 @@ function RecurrenceEndInput({
                 }
               />
               <InputGroup.Append>
-                <InputGroup.Text>{t("occurences")}</InputGroup.Text>
+                <InputGroup.Text>occurrences</InputGroup.Text>
               </InputGroup.Append>
             </InputGroup>
           </Col>

package/src/recurrence-input/RecurrenceInput.tsx

@@ -16,7 +16,6 @@ import {
 export interface RecurrenceInputProps {
   disabled?: boolean;
   date: string;
-  minDate?: string;
   value?: string;
   onChange: (value: string) => void;
   initialFrequency?: Frequency;
@@ -25,7 +24,6 @@ export interface RecurrenceInputProps {
 export function RecurrenceInput({
   disabled = false,
   date,
-  minDate,
   value,
   onChange,
   initialFrequency = Frequency.WEEKLY,
@@ -84,7 +82,6 @@ export function RecurrenceInput({
       )}
       <RecurrenceEndInput
         date={date}
-        minDate={minDate}
         frequency={state.freq}
         until={state.until && DateTime.fromJSDate(state.until).toISODate()}
         count={state.count}

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

@@ -2,8 +2,8 @@ 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 { useFormContext } from "react-hook-form";
+import { DATE_FORMAT, TIME_FULL_FORMAT } from "@licklist/core/dist/Config";
 import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
 
 interface RecurrenceIntervalAndFrequencyInputProps {
@@ -13,14 +13,6 @@ interface RecurrenceIntervalAndFrequencyInputProps {
   startTimeLabel?: string;
   endDateLabel?: string;
   endTimeLabel?: string;
-  startTimeRules?: Pick<
-    RegisterOptions,
-    "max" | "min" | "validate" | "required" | "pattern"
-  >;
-  endTimeRules?: Pick<
-    RegisterOptions,
-    "max" | "min" | "validate" | "required" | "pattern"
-  >;
 }
 
 function RecurrenceIntervalAndFrequencyInput({
@@ -30,8 +22,6 @@ function RecurrenceIntervalAndFrequencyInput({
   startTimeLabel,
   endDateLabel,
   endTimeLabel,
-  startTimeRules,
-  endTimeRules,
 }: RecurrenceIntervalAndFrequencyInputProps) {
   const { t } = useTranslation(["Design", "Notification", "App"]);
 
@@ -57,9 +47,6 @@ function RecurrenceIntervalAndFrequencyInput({
   }, [startDate]);
 
   useEffect(() => {
-    if (!startTime || !endTime) {
-      return;
-    }
     trigger("endTime");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [startTime]);
@@ -131,18 +118,15 @@ function RecurrenceIntervalAndFrequencyInput({
             </Form.Label>
             <Form.Control
               type="time"
-              {...register("startTime", { required: false, ...startTimeRules })}
+              {...register("startTime", { required: false })}
               onChange={({ target: { value } }) => {
-                setValue("startTime", `${value}:00`, { shouldValidate: true });
+                setValue("startTime", `${value}:00`);
               }}
               placeholder="hh:mm"
               defaultValue={startTime}
               disabled={disabled}
               isInvalid={Boolean(errors.startTime)}
             />
-            <Form.Control.Feedback type="invalid">
-              {errors.startTime?.message}
-            </Form.Control.Feedback>
           </Form.Group>
         </Col>
 
@@ -157,8 +141,15 @@ function RecurrenceIntervalAndFrequencyInput({
                   if (!startTime || !time) {
                     return true;
                   }
-                  const currentStartTime = DateTime.fromISO(startTime);
-                  const currentEndTime = DateTime.fromISO(time);
+                  const currentStartTime = DateTime.fromFormat(
+                    startTime,
+                    TIME_FULL_FORMAT
+                  );
+
+                  const currentEndTime = DateTime.fromFormat(
+                    time,
+                    TIME_FULL_FORMAT
+                  );
 
                   return currentEndTime?.diff(currentStartTime, ["seconds"])
                     ?.seconds > 0
@@ -168,7 +159,6 @@ function RecurrenceIntervalAndFrequencyInput({
                         min: t("Design:startTimeSmall"),
                       })}`;
                 },
-                ...endTimeRules,
               })}
               onChange={({ target: { value } }) => {
                 setValue("endTime", `${value}:59`, { shouldValidate: true });

package/src/static/CountryCodeSelect.tsx

@@ -52,9 +52,11 @@ function CountryCodeSelect({
           {t("chooseCountry")}
         </option>
         {sortedCountries.map((key: keyof typeof en) => (
-          <option key={key as string} value={key as string}>
-            {en[key]}
-          </option>
+          <>
+            <option key={key as string} value={key as string}>
+              {en[key]}
+            </option>
+          </>
         ))}
       </Form.Control>
       <Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>

package/src/static/form-number-input/FormNumberInput.tsx

@@ -15,7 +15,6 @@ interface FormNumberInputProps {
   label: string;
   fieldName: string;
   step?: number;
-  onChange?: (value: number) => void;
   disabled?: boolean;
   rules?: Pick<
     RegisterOptions,
@@ -29,7 +28,6 @@ export const FormNumberInput = ({
   step = 1,
   rules,
   disabled,
-  onChange,
 }: FormNumberInputProps) => {
   const controlId = useId();
   const { t } = useTranslation("Validation");
@@ -78,12 +76,7 @@ export const FormNumberInput = ({
               disabled={disabled}
               isInvalid={HookFormService.isInvalid(fieldName, errors)}
               {...field}
-              onChange={(event) => {
-                if (onChange) {
-                  onChange(Number(event.target.value));
-                }
-                field.onChange(Number(event.target.value));
-              }}
+              onChange={(event) => field.onChange(Number(event.target.value))}
               onFocus={onFocus}
             />
           )}

package/src/styles/{activity-card/GridActivitiesCard.scss → iframe-customers-journey/ActivitiesCard.scss}

@@ -11,7 +11,7 @@
   word-wrap: break-word;
   background-color: #fff;
   font-size: 0.8rem;
-  background-color: $snippet-product-set-background-color;
+  color: $snippet-elements-body-color;
 
   div {
     text-align: left;

package/src/styles/{activity-card/ListActivitiesCard.scss → iframe-customers-journey/ActivitiesSelectedCard.scss}

@@ -6,9 +6,8 @@
   align-items: center;
   cursor: pointer;
   height: 5rem;
-  padding: 0.375rem;
   border: 2px solid transparent;
-  border-radius: 0.5rem;
+  border: 2px solid transparent;
   background-color: $snippet-product-set-background-color;
   color: $snippet-product-set-font-color;
   transition: $color-transition;

package/src/styles/iframe-customers-journey/_index.scss

@@ -0,0 +1,3 @@
+@import "./ActivitiesSelectedCard.scss";
+@import "./ActivitiesCard.scss";
+@import "./DateTimeButton.scss";

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

@@ -1,3 +1,4 @@
+
 .calendar-wrapper {
   display: flex;
 
@@ -20,7 +21,7 @@
           background-color: transparent;
         }
 
-        &:focus {
+        &:focus{
           box-shadow: none;
         }
       }
@@ -72,9 +73,10 @@
       }
     }
 
+    
+
     .calendar-dates-wrapper {
-      .calendar-weekdays,
-      .calendar-dates {
+      .calendar-weekdays, .calendar-dates {
         display: grid;
         grid-template-columns: repeat(7, auto);
         grid-gap: 0.5rem 1rem;
@@ -96,17 +98,17 @@
         margin-top: 0.75rem;
 
         .calendar-date {
+          height: 2rem;
           display: flex;
-          flex-direction: column;
           align-items: center;
           justify-content: center;
-          padding: 0.25rem;
+          padding: 0;
           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;
@@ -136,7 +138,7 @@
           &:hover {
             border-color: $snippet-calendar-active-button-border-color;
           }
-
+            
           &:focus {
             box-shadow: none;
           }
@@ -165,11 +167,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;
@@ -187,16 +189,14 @@
     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,8 +199,7 @@
         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 {
@@ -235,7 +234,7 @@
     font-weight: 500;
     border-radius: 0.25rem;
     font-size: 0.875rem;
-    min-height: 2.25rem;
+    height: 2.25rem;
 
     &:focus {
       box-shadow: unset;

package/src/styles/notification/Notification.scss

@@ -15,10 +15,6 @@
       display: none !important;
     }
   }
-
-  &.is-invalid {
-    border-color: theme-color("danger");
-  }
 }
 
 .placeholder-row {

package/src/styles/packages.scss

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

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

@@ -7,11 +7,6 @@
     overflow: auto;
   }
 
-  .modal-form-content {
-    max-height: 21rem;
-    overflow-x: auto;
-  }
-
   .reccurrence-interval-container {
     .form-group {
       margin-bottom: 0.5rem;

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

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

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

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

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

@@ -7,7 +7,6 @@ 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;
@@ -28,7 +27,6 @@ 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

@@ -12,8 +12,11 @@ import {
 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 { TIME_FORMAT, TIME_FULL_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 {
@@ -64,6 +67,7 @@ export const ZoneRecurrencesControl = ({
   });
   const clearEditState = () => setEditState({ index: null, values: null });
   const [availableTimes, setAvailableTimes] = useState<string[]>([]);
+
   const popoverRef = useRef<HTMLDivElement>();
   const availableTimesFormRef = useRef<AvailableTimesControlRef>();
 
@@ -93,29 +97,30 @@ export const ZoneRecurrencesControl = ({
     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
-        );
+    const startTime = DateTime.fromFormat(next.startTime, TIME_FULL_FORMAT);
+    const endTime = DateTime.fromFormat(next.endTime, TIME_FULL_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: startTime.toFormat(TIME_FORMAT),
+          max: endTime.toFormat(TIME_FORMAT),
+        }),
       });
-      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,
@@ -143,9 +148,12 @@ export const ZoneRecurrencesControl = ({
   const handleOnEdit = (next: Partial<ZoneRecurrence>, index) => {
     clearEditState();
 
-    setEditState({ index, values: next });
-    setAvailableTimes(next.availableTimes || []);
-    setIsDatePopoverVisible(() => true);
+    // Hotfix for an issue with Popover close & open actions
+    setTimeout(() => {
+      setEditState({ index, values: next });
+      setAvailableTimes(next.availableTimes || []);
+      setIsDatePopoverVisible(() => true);
+    }, 100);
   };
 
   const handleOnAdd = () => {

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

@@ -1,7 +1,5 @@
-import { TIME_SEPARATOR } from "@licklist/core/dist/Services/Date";
+import { datetime, 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";
@@ -15,37 +13,46 @@ export const getTimeCheckboxRanges = (
   const [startHour, startMinutes] = startTime.split(TIME_SEPARATOR);
   const [endHour, endMinutes] = endTime.split(TIME_SEPARATOR);
 
-  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 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 count = 0;
 
-  while (endDate.diff(startDate, ["minutes"]).minutes >= range) {
-    startDate = startDate.plus({ minutes: range });
+  while (endDate >= startDate) {
+    startDate = new Date(startDate.getTime() + range * 60 * 1000);
     count += 1;
-    checkboxes[count] = startDate.toFormat(TIME_FORMAT);
+    dateSlices[count] = startDate;
   }
 
+  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;
 };