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

package/src/recurrence-input/RecurrenceEndInput.tsx

@@ -1,17 +1,19 @@
-import React, { useRef } from "react";
+import React, { useEffect, 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;
+  date: string; // yyyy-mm-ddThh:mm
+  minDate?: string; // should be in yyyy-mm-dd format
   frequency: SupportedFrequency;
-  until?: string;
+  until?: string; // yyyy-mm-dd
   count?: number;
   onChange: (values: { until?: string; count?: number }) => void;
 }
@@ -23,16 +25,31 @@ 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>Ends</Form.Label>
+      <Form.Label>{t("ends")}</Form.Label>
 
       <Form.Check type="radio" id={neverId} custom className="mt-3">
         <Form.Check.Input
@@ -41,7 +58,7 @@ function RecurrenceEndInput({
           onChange={() => onChange({ count: 500 })}
           disabled={disabled}
         />
-        <Form.Check.Label>Never</Form.Check.Label>
+        <Form.Check.Label>{t("never")}</Form.Check.Label>
       </Form.Check>
 
       <Form.Check type="radio" id={onId} custom className="mt-3">
@@ -55,11 +72,12 @@ function RecurrenceEndInput({
               }
               disabled={disabled}
             />
-            <Form.Check.Label>On</Form.Check.Label>
+            <Form.Check.Label>{t("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 })}
@@ -83,7 +101,7 @@ function RecurrenceEndInput({
               }
               disabled={disabled}
             />
-            <Form.Check.Label>After</Form.Check.Label>
+            <Form.Check.Label>{t("after")}</Form.Check.Label>
           </Col>
           <Col>
             <InputGroup>
@@ -99,7 +117,7 @@ function RecurrenceEndInput({
                 }
               />
               <InputGroup.Append>
-                <InputGroup.Text>occurrences</InputGroup.Text>
+                <InputGroup.Text>{t("occurences")}</InputGroup.Text>
               </InputGroup.Append>
             </InputGroup>
           </Col>

package/src/recurrence-input/RecurrenceInput.tsx

@@ -16,6 +16,7 @@ import {
 export interface RecurrenceInputProps {
   disabled?: boolean;
   date: string;
+  minDate?: string;
   value?: string;
   onChange: (value: string) => void;
   initialFrequency?: Frequency;
@@ -24,6 +25,7 @@ export interface RecurrenceInputProps {
 export function RecurrenceInput({
   disabled = false,
   date,
+  minDate,
   value,
   onChange,
   initialFrequency = Frequency.WEEKLY,
@@ -82,6 +84,7 @@ 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 { useFormContext } from "react-hook-form";
-import { DATE_FORMAT, TIME_FULL_FORMAT } from "@licklist/core/dist/Config";
+import { RegisterOptions, useFormContext } from "react-hook-form";
+import { DATE_FORMAT } from "@licklist/core/dist/Config";
 import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
 
 interface RecurrenceIntervalAndFrequencyInputProps {
@@ -13,6 +13,14 @@ 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({
@@ -22,6 +30,8 @@ function RecurrenceIntervalAndFrequencyInput({
   startTimeLabel,
   endDateLabel,
   endTimeLabel,
+  startTimeRules,
+  endTimeRules,
 }: RecurrenceIntervalAndFrequencyInputProps) {
   const { t } = useTranslation(["Design", "Notification", "App"]);
 
@@ -30,7 +40,6 @@ function RecurrenceIntervalAndFrequencyInput({
     formState: { errors },
     register,
     trigger,
-    setValue,
   } = useFormContext<RecurringDatePickerInputValues>();
 
   const startDate = getValues("startDate");
@@ -47,6 +56,9 @@ function RecurrenceIntervalAndFrequencyInput({
   }, [startDate]);
 
   useEffect(() => {
+    if (!startTime || !endTime) {
+      return;
+    }
     trigger("endTime");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [startTime]);
@@ -118,15 +130,15 @@ function RecurrenceIntervalAndFrequencyInput({
             </Form.Label>
             <Form.Control
               type="time"
-              {...register("startTime", { required: false })}
-              onChange={({ target: { value } }) => {
-                setValue("startTime", `${value}:00`);
-              }}
+              {...register("startTime", { required: false, ...startTimeRules })}
               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>
 
@@ -141,28 +153,19 @@ function RecurrenceIntervalAndFrequencyInput({
                   if (!startTime || !time) {
                     return true;
                   }
-                  const currentStartTime = DateTime.fromFormat(
-                    startTime,
-                    TIME_FULL_FORMAT
-                  );
-
-                  const currentEndTime = DateTime.fromFormat(
-                    time,
-                    TIME_FULL_FORMAT
-                  );
+                  const currentStartTime = DateTime.fromISO(startTime);
+                  const currentEndTime = DateTime.fromISO(time);
 
-                  return currentEndTime?.diff(currentStartTime, ["seconds"])
-                    ?.seconds > 0
+                  return currentEndTime?.diff(currentStartTime, ["minutes"])
+                    ?.minutes >= 0
                     ? true
                     : `${t(`Validation:fieldLaterDate`, {
                         attribute: t("Design:endTimeSmall"),
                         min: t("Design:startTimeSmall"),
                       })}`;
                 },
+                ...endTimeRules,
               })}
-              onChange={({ target: { value } }) => {
-                setValue("endTime", `${value}:59`, { shouldValidate: true });
-              }}
               placeholder="hh:mm"
               defaultValue={endTime}
               disabled={disabled}

package/src/report/form/ReportForm.tsx

@@ -15,7 +15,7 @@ export function ReportForm({
   onSubmit,
   onHide,
   hasPermission,
-}: ReportFormProps): JSX.Element {
+}: ReportFormProps) {
   const { t } = useTranslation(["App"]);
   const fromDateInput = useRef<HTMLInputDateElement | null>(null);
   const toDateInput = useRef<HTMLInputDateElement | null>(null);

package/src/static/CountryCodeSelect.tsx

@@ -52,11 +52,9 @@ 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/RestrictedAccess.tsx

@@ -4,7 +4,7 @@ import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
 import { useTranslation } from "react-i18next";
 import Icon from "./Icon";
 
-function RestrictedAccess(): JSX.Element {
+function RestrictedAccess() {
   const { t } = useTranslation("Design");
 
   return (

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+@import "./GridActivitiesCard.scss";
+@import "./ListActivitiesCard.scss";

package/src/styles/{iframe-customers-journey → date-time-button}/DateTimeButton.scss

@@ -100,14 +100,11 @@
   color: $snippet-calendar-button-font-color;
 }
 
-.info {
+.resources {
   display: flex;
   justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
   font-weight: 300;
   flex-direction: row;
-
-  .logo {
-    width: 0.5rem;
-    margin-right: 0.5rem;
-  }
 }

package/src/styles/date-time-button/_index.scss

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

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/styles/notification/Notification.scss

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

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,5 @@
 @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,6 +7,11 @@
     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,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/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/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/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} />