@licklist/design 0.44.486-dev.28 → 0.44.486-dev.3

package/src/product-set/form/ProductsControl.tsx

@@ -14,7 +14,6 @@ import { generateUuid } from "@licklist/core/dist/Services";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 
 import { CategoryType } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
 import { ProductControl, ProductControlProps, ProductSetFormValues } from "..";
 import { SortableTree } from "../../sortable-tree";
 import { CreateProductSetItem } from "../item/CreateProductSetItem";
@@ -33,7 +32,6 @@ interface ProductsControlProps extends WithIsLoading {
   productCategoryIndex: number;
   hasTicket?: boolean;
   categoryType: CategoryType;
-  zones?: Zone[];
 }
 
 const getDefaultProductValue = (sort: number): Product => ({
@@ -76,7 +74,6 @@ export function ProductsControl({
   productCategoryIndex,
   hasTicket,
   categoryType,
-  zones,
 }: ProductsControlProps) {
   const { t } = useTranslation("Design");
   const form = useFormContext<ProductSetFormValues>();
@@ -92,12 +89,6 @@ export function ProductsControl({
     getValues,
   } = form;
 
-  const zoneId = watch(
-    `steps.${stepIndex}.productCategories.${productCategoryIndex}.zoneId`
-  );
-
-  const catergoryZone = zones?.find((zone) => zone.id === Number(zoneId));
-
   const productControlFieldName =
     `steps.${stepIndex}.productCategories.${productCategoryIndex}.products` as const;
 
@@ -254,7 +245,6 @@ export function ProductsControl({
                     onProductNameChange={onChange}
                     hasTicket={hasTicket}
                     categoryType={categoryType}
-                    zoneDuration={catergoryZone?.defaultDuration}
                   />
                 }
                 onDelete={() => onProductRemove(index)}

package/src/product-set/product/ProductControl.tsx

@@ -113,7 +113,6 @@ export interface ProductControlProps<T>
   productName: string;
   hasTicket?: boolean;
   categoryType?: CategoryType;
-  zoneDuration?: number;
 }
 
 export function ProductControl<T extends FormValues>({
@@ -127,7 +126,6 @@ export function ProductControl<T extends FormValues>({
   productName,
   hasTicket,
   categoryType,
-  zoneDuration,
 }: ProductControlProps<T>) {
   const {
     register,
@@ -135,7 +133,6 @@ export function ProductControl<T extends FormValues>({
     formState: { errors },
     setValue,
     getValues,
-    setError,
     watch,
   } = useFormContext<T>();
 
@@ -193,13 +190,6 @@ export function ProductControl<T extends FormValues>({
     [handleImageUploading]
   );
 
-  const onChangeGameCapacity = (value: number) => {
-    setValue(
-      `${fieldNamePrefix}.duration` as Path<T>,
-      (value * zoneDuration) as UnpackNestedValue<PathValue<T, Path<T>>>
-    );
-  };
-
   const onImageRemove = useCallback(
     (id, path) => {
       handleImageRemove(String(id), path);
@@ -227,17 +217,6 @@ export function ProductControl<T extends FormValues>({
     }
   }, [images, fieldNamePrefix, setValue]);
 
-  useEffect(() => {
-    if (categoryType !== CATEGORY_TYPE_GAME || zoneDuration) {
-      return;
-    }
-
-    setError(`${fieldNamePrefix}.duration` as Path<T>, {
-      message: t("Validation:categoryZoneDoesntHaveDefaultDuration"),
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [categoryType, zoneDuration, fieldNamePrefix]);
-
   const quantitySelector = quantityValue ?? "1";
   const quantity = QUANTITY_TYPE_LIST_DTO[quantitySelector as string];
   return (
@@ -393,14 +372,6 @@ export function ProductControl<T extends FormValues>({
             <FormNumberInput
               fieldName={`${fieldNamePrefix}.capacity`}
               label={t("capacity")}
-              rules={{
-                min: {
-                  value: 1,
-                  message: t("Validation:fieldRequired", {
-                    attribute: t("capacity"),
-                  }) as string,
-                },
-              }}
             />
           </Col>
         </Row>
@@ -412,7 +383,6 @@ export function ProductControl<T extends FormValues>({
             <FormNumberInput
               fieldName={`${fieldNamePrefix}.capacity`}
               label={t("capacity")}
-              onChange={onChangeGameCapacity}
               rules={{
                 min: {
                   value: 1,
@@ -427,6 +397,14 @@ export function ProductControl<T extends FormValues>({
             <FormNumberInput
               fieldName={`${fieldNamePrefix}.duration`}
               label={t("durationMinutes")}
+              rules={{
+                min: {
+                  value: 1,
+                  message: t("Validation:fieldRequired", {
+                    attribute: t("duration"),
+                  }) as string,
+                },
+              }}
             />
           </Col>
         </Row>

package/src/product-set/product/duration/ProductDurationControl.tsx

@@ -66,7 +66,7 @@ export const ProductDurationControl = <T,>({
         },
         min: {
           value: 1,
-          message: t("Validation:fieldMinNumber", {
+          message: t("Validation:fieldMin", {
             attribute: t("duration"),
           }),
         },

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -332,7 +332,7 @@ export function ProductCategoryControl({
           <Row>
             <Col>
               <Form.Group controlId={zoneId}>
-                <Form.Label>{t("Design:zone")}</Form.Label>
+                <Form.Label>Zone</Form.Label>
                 <Controller
                   control={control}
                   name={`${fieldNamePrefix}.zoneId`}
@@ -361,20 +361,10 @@ export function ProductCategoryControl({
                       }),
                     },
                     validate: (value) => {
-                      if (category.type !== CATEGORY_TYPE_GAME) {
-                        return true;
-                      }
-                      const selelctedZone = zones?.find(
-                        (zone) => zone?.id === Number(value)
-                      );
-
-                      if (!selelctedZone?.defaultDuration) {
-                        return t(
-                          "Validation:zoneDoesntHaveDefaultDuration"
-                        ) as string;
-                      }
-
-                      return true;
+                      if (value) return true;
+                      return t("Validation:fieldRequired", {
+                        attribute: t("zone"),
+                      }) as string;
                     },
                   }}
                 />

package/src/provider/location-input/LocationInputDescription.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import React from "react";
 import { useFormContext } from "react-hook-form";
 import en from "react-phone-number-input/locale/en.json";
 import { LocationInputValues } from ".";
@@ -13,7 +13,7 @@ export function LocationInputDescription() {
     "postcode",
     "country",
   ] as const;
-  const fields = fieldNames.reduce<ReactElement[]>((acc, field) => {
+  const fields = fieldNames.reduce<JSX.Element[]>((acc, field) => {
     const value = values?.[field];
     if (!value) return acc;
 

package/src/provider/working-hours-input/WorkingHoursInputDescription.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Col, Row } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { TIME_FORMAT } from "@licklist/core/dist/Config";
+import { useIntl } from "react-intl";
 import { WorkingHoursInputValues } from ".";
 import { useWeekdays } from "./utils";
 
@@ -12,9 +12,7 @@ export function WorkingHoursInputDescription() {
   const values = watch("workingHours");
   const weekdays = useWeekdays("short");
   const { t } = useTranslation("Design");
-
-  if (!values) return null;
-
+  const { formatTime } = useIntl();
   return (
     <>
       {Array.from({ length: weekdays.length }, (_, i) => i)
@@ -28,16 +26,16 @@ export function WorkingHoursInputDescription() {
                 {weekday?.end
                   ? weekday.start
                     ? t("timeInterval", {
-                        start: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT
+                        start: formatTime(
+                          DateTime.fromISO(weekday.start).toJSDate()
                         ),
-                        end: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT
+                        end: formatTime(
+                          DateTime.fromISO(weekday.end).toJSDate()
                         ),
                       })
                     : t("timeFrom", {
-                        start: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT
+                        start: formatTime(
+                          DateTime.fromISO(weekday.start).toJSDate()
                         ),
                       })
                   : null}

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"]);
 
@@ -40,6 +30,7 @@ function RecurrenceIntervalAndFrequencyInput({
     formState: { errors },
     register,
     trigger,
+    setValue,
   } = useFormContext<RecurringDatePickerInputValues>();
 
   const startDate = getValues("startDate");
@@ -56,9 +47,6 @@ function RecurrenceIntervalAndFrequencyInput({
   }, [startDate]);
 
   useEffect(() => {
-    if (!startTime || !endTime) {
-      return;
-    }
     trigger("endTime");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [startTime]);
@@ -130,15 +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`);
+              }}
               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>
 
@@ -153,19 +141,28 @@ 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, ["minutes"])
-                    ?.minutes >= 0
+                  return currentEndTime?.diff(currentStartTime, ["seconds"])
+                    ?.seconds > 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) {
+}: ReportFormProps): JSX.Element {
   const { t } = useTranslation(["App"]);
   const fromDateInput = useRef<HTMLInputDateElement | null>(null);
   const toDateInput = useRef<HTMLInputDateElement | null>(null);

package/src/snippet/snippet-template/preview/Preview.tsx

@@ -7,9 +7,6 @@ import {
   SNIPPET_TYPE_VENUE_MAP,
 } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
 import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
-import { DateTime } from "luxon";
-import { Calendar, defaultStartDay } from "../../../calendar";
-import { getMonthCalendarDates } from "../../../calendar/utils";
 import { IframeEventCard } from "../../../iframe/event/event-card";
 import { SettingButton } from "../settings";
 import {
@@ -27,6 +24,7 @@ import {
 } from "../../../iframe";
 import { NumberInput } from "../../../iframe/order-process/components/CategoryProduct/components/NumberInput";
 import { SnippetTemplateContext } from "../context/snippetTemplate";
+import { EventCalendar } from "../../../iframe/event/event-calendar";
 
 const DEFAULT_IMAGE =
   "https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80";
@@ -54,10 +52,6 @@ export function Preview({
     onSettingClick();
   };
 
-  const [currentDate, setCurrentDate] = useState<DateTime>(defaultStartDay);
-  const [selectedDate, setSelectedDate] = useState<DateTime | null>(null);
-  const calendarDates = getMonthCalendarDates(currentDate);
-
   return (
     <div className="w-100 h-100 snippet-template-preview">
       <Page
@@ -202,13 +196,7 @@ export function Preview({
                         className="mt-3 m-0"
                         containerClassName="mt-5 pt-5"
                       >
-                        <Calendar
-                          currentDate={currentDate}
-                          setCurrentDate={setCurrentDate}
-                          selectedDate={selectedDate}
-                          setSelectedDate={setSelectedDate}
-                          calendarDates={calendarDates}
-                        />
+                        <EventCalendar />
                       </SettingButton>
                     </div>
                     <div className="pt-4">

package/src/static/CountryCodeSelect.tsx

@@ -52,9 +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() {
+function RestrictedAccess(): JSX.Element {
   const { t } = useTranslation("Design");
 
   return (

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/header/Header.scss

@@ -11,6 +11,10 @@
     }
   }
 
+  svg {
+    max-height: 1rem;
+  }
+
   .navbar-nav {
     line-height: 1;
     margin-top: 4px;

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/{dist/styles/activity-card/ListActivitiesCard.scss → src/styles/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/{date-time-button → iframe-customers-journey}/DateTimeButton.scss

@@ -100,11 +100,14 @@
   color: $snippet-calendar-button-font-color;
 }
 
-.resources {
+.info {
   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/iframe-customers-journey/_index.scss

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