@licklist/design 0.44.486-dev.82 → 0.44.486-dev.9

package/src/product-set/utils/index.ts

@@ -1,15 +1,6 @@
 import { EmailTemplate } from "@licklist/core/dist/DataMapper/Notification/EmailTemplateDataMapper";
 import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper";
-import { TFunction } from "i18next";
-import { UseFormSetError } from "react-hook-form";
 import { TemplateItem } from "../control/ProductSetControl";
-import { ProductSetFormValues } from "../form/ProductSetForm";
-
-interface CheckAvailableTimesErrors {
-  values: ProductSetFormValues;
-  setError: UseFormSetError<ProductSetFormValues>;
-  t: TFunction;
-}
 
 export const moveArrayElements = <T>(
   array: T[],
@@ -51,32 +42,3 @@ export const getFilteredTemplates = (
       label: template?.notification?.name,
     }));
 };
-
-export const checkAvailableTimesErrors = ({
-  values,
-  setError,
-  t,
-}: CheckAvailableTimesErrors) => {
-  let hasError = false;
-
-  const hasCategoryWithZone = values?.steps?.some(
-    (step) => !!step?.productCategories.some((category) => !!category?.zoneId)
-  );
-  if (!hasCategoryWithZone) {
-    return hasError;
-  }
-
-  values?.menuRecurrences?.forEach((recurrence, index: number) => {
-    if (!recurrence?.availableTimes?.length) {
-      hasError = true;
-      setError(`menuRecurrences.${index}.availableTimes` as const, {
-        type: "validate",
-        message: t("Validation:fieldMinNumber", {
-          attribute: t("startTimes"),
-          min: 1,
-        }),
-      });
-    }
-  });
-  return hasError;
-};

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

@@ -5,7 +5,6 @@ import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import CountryCodeSelect from "../../static/CountryCodeSelect";
 import { LocationInputValues } from ".";
-import { FormGroupControll } from "./components";
 
 export function LocationInput() {
   const {
@@ -14,32 +13,32 @@ export function LocationInput() {
   } = useFormContext<LocationInputValues>();
   const { t } = useTranslation("Design");
 
+  const addressId = useId();
+  const cityId = useId();
+  const stateId = useId();
+  const postcodeId = useId();
   const countryId = useId();
 
   return (
     <>
       <input {...register("location.latitude")} type="hidden" />
       <input {...register("location.longitude")} type="hidden" />
-      <FormGroupControll
-        error={errors?.location?.street}
-        name="location.street"
-        label={t("locationStreet")}
-      />
-      <FormGroupControll
-        error={errors?.location?.city}
-        name="location.city"
-        label={t("locationCity")}
-      />
-      <FormGroupControll
-        error={errors?.location?.state}
-        name="location.state"
-        label={t("locationState")}
-      />
-      <FormGroupControll
-        error={errors?.location?.postcode}
-        name="location.postcode"
-        label={t("locationPostcode")}
-      />
+      <Form.Group controlId={addressId}>
+        <Form.Label>{t("locationStreet")}</Form.Label>
+        <Form.Control {...register("location.street")} />
+      </Form.Group>
+      <Form.Group controlId={cityId}>
+        <Form.Label>{t("locationCity")}</Form.Label>
+        <Form.Control {...register("location.city")} />
+      </Form.Group>
+      <Form.Group controlId={stateId}>
+        <Form.Label>{t("locationState")}</Form.Label>
+        <Form.Control {...register("location.state")} />
+      </Form.Group>
+      <Form.Group controlId={postcodeId}>
+        <Form.Label>{t("locationPostcode")}</Form.Label>
+        <Form.Control {...register("location.postcode")} />
+      </Form.Group>
       <Form.Group controlId={countryId}>
         <Form.Label>{t("locationCountry")}</Form.Label>
         <CountryCodeSelect

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/location-input/index.ts

@@ -1,6 +1,6 @@
 export * from "./LocationInput";
 export * from "./LocationInputDescription";
-export * from "./components";
+
 export type LocationInputValues = {
   location: {
     street: string;

package/src/provider/provider-details-input/ProviderDetailsInput.tsx

@@ -4,6 +4,7 @@ import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useId } from "@react-aria/utils";
 import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
+import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import { Typeahead, TypeaheadOptions } from "../../typeahead";
 import { MAX_DESCRIPTION_CHARACTERS_LENGTH } from "../constants";
 import {
@@ -69,7 +70,8 @@ export function ProviderDetailsInput({
           isInvalid={Boolean(errors.name)}
         />
         <Form.Control.Feedback type="invalid">
-          {errors.name?.message}
+          {HookFormService.hasError(errors.name, "required") &&
+            errors.name?.message}
         </Form.Control.Feedback>
       </Form.Group>
 
@@ -93,7 +95,8 @@ export function ProviderDetailsInput({
           isInvalid={Boolean(errors.description)}
         />
         <Form.Control.Feedback type="invalid">
-          {errors.description?.message}
+          {HookFormService.hasError(errors.description, "validate") &&
+            errors.description?.message}
         </Form.Control.Feedback>
       </Form.Group>
 
@@ -117,7 +120,10 @@ export function ProviderDetailsInput({
           isInvalid={Boolean(errors.email)}
         />
         <Form.Control.Feedback type="invalid">
-          {errors.email?.message}
+          {HookFormService.hasError(errors.email, "required") &&
+            errors.email?.message}
+          {HookFormService.hasError(errors.email, "pattern") &&
+            errors.email?.message}
         </Form.Control.Feedback>
       </Form.Group>
 
@@ -135,7 +141,8 @@ export function ProviderDetailsInput({
           isInvalid={Boolean(errors.phone)}
         />
         <Form.Control.Feedback type="invalid">
-          {errors.phone?.message}
+          {HookFormService.hasError(errors.phone, "required") &&
+            errors.phone?.message}
         </Form.Control.Feedback>
       </Form.Group>
 
@@ -156,7 +163,8 @@ export function ProviderDetailsInput({
           isInvalid={Boolean(errors.website)}
         />
         <Form.Control.Feedback type="invalid">
-          {errors.website?.message}
+          {HookFormService.hasError(errors.website, "pattern") &&
+            errors.website?.message}
         </Form.Control.Feedback>
       </Form.Group>
       {/* If admin has only 1 company - he dont need to set up it */}

package/src/provider/venue-form/VenueForm.stories.tsx

@@ -11,29 +11,6 @@ const categories = Array.from({ length: 6 }, (_, i) => ({
   }),
 }));
 
-const errorResponse = {
-  name: ["The name field is required."],
-  email: ["The email field is required."],
-  phone: ["The phone field is required."],
-  website: ["The website must be a string."],
-  description: ["The description must be a string."],
-  "location.street": ["The location.street must be a string."],
-  "location.city": ["The location.city must be a string."],
-  "location.state": ["The location.state must be a string."],
-  "location.country": [
-    "The location.country must be a string.",
-    "Invalid ISO3166-A2 country code.",
-  ],
-  "categories.0": [
-    "The categories.0 must be an integer.",
-    "The categories.0 must be between 0 and 20 digits.",
-  ],
-  "categories.1": [
-    "The categories.1 must be an integer.",
-    "The categories.1 must be between 0 and 20 digits.",
-  ],
-};
-
 const defaultValues: VenueFormValues = {
   name: "Sample provider",
   description: "Description",
@@ -81,5 +58,4 @@ WithDefaultValues.args = {
   defaultValues,
   categories,
   linkTypes,
-  errorResponse,
 };

package/src/provider/venue-form/VenueForm.tsx

@@ -10,7 +10,6 @@ import {
 } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { useMultipleImages } from "@licklist/plugins/dist/hooks/Media/useMultipleImages";
-import { parseServerErrorForFormValidation } from "@licklist/plugins/dist/utils/parseError";
 import { CollapsibleInputGroup } from "../../collapsible-input-group";
 import {
   CategoriesInput,
@@ -48,8 +47,6 @@ export interface VenueFormProps extends HasPermissionProp {
   companiesOptions?: TypeaheadOptions[];
   onSubmit: (values: VenueFormValues) => void;
   intent?: "create" | "update";
-  isLoading?: boolean;
-  errorResponse?: unknown;
 }
 
 const providerImageTypes = {
@@ -65,8 +62,6 @@ export function VenueForm({
   onSubmit,
   intent = "update",
   hasPermission = true,
-  isLoading,
-  errorResponse,
 }: VenueFormProps) {
   const form = useForm<VenueFormValues>({ defaultValues, mode: "onChange" });
   const {
@@ -74,7 +69,6 @@ export function VenueForm({
     handleSubmit,
     formState: { isSubmitting, errors },
     getValues,
-    setError,
   } = form;
   const { t } = useTranslation("Design");
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
@@ -98,27 +92,6 @@ export function VenueForm({
     }
   }, [images, setValue]);
 
-  useEffect(() => {
-    if (!errorResponse) {
-      return;
-    }
-    const errorEntriesArray = parseServerErrorForFormValidation({
-      values: getValues(),
-      error: errorResponse,
-    });
-    if (!errorEntriesArray.length) {
-      return;
-    }
-    errorEntriesArray.forEach((errorEntriesArray) => {
-      const [key, value] = errorEntriesArray;
-      setError(key as keyof VenueFormValues, {
-        message: value,
-        type: "validate",
-      });
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [errorResponse]);
-
   return (
     <FormProvider {...form}>
       <Form
@@ -135,13 +108,7 @@ export function VenueForm({
             eventKey="location"
             label={t("location")}
             description={<LocationInputDescription />}
-            error={
-              errors?.location?.message ||
-              (errors?.location &&
-                t("Validation:isNotValidField", {
-                  attribute: "The location data",
-                }))
-            }
+            error={errors?.location?.country?.message}
           >
             <LocationInput />
           </CollapsibleInputGroup>
@@ -149,13 +116,7 @@ export function VenueForm({
             eventKey="workingHours"
             label={t("workingHours")}
             description={<WorkingHoursInputDescription />}
-            error={
-              errors?.workingHours?.message ||
-              (errors?.workingHours &&
-                t("Validation:isNotValidField", {
-                  attribute: "The Working hours data",
-                }))
-            }
+            error={errors.workingHours?.message}
           >
             <WorkingHoursInput />
           </CollapsibleInputGroup>
@@ -163,13 +124,6 @@ export function VenueForm({
             <CollapsibleInputGroup
               eventKey="categories"
               label={t("categories")}
-              error={
-                errors?.categories?.message ||
-                (errors?.categories &&
-                  t("Validation:isNotValidField", {
-                    attribute: "The Categories data",
-                  }))
-              }
               description={
                 <CategoriesInputDescription categories={categories} />
               }
@@ -207,15 +161,10 @@ export function VenueForm({
         {hasPermission && (
           <Button
             type="submit"
-            disabled={
-              isLoading ||
-              isSubmitting ||
-              isImagesLoading ||
-              isCoverImagesLoading
-            }
+            disabled={isSubmitting || isImagesLoading || isCoverImagesLoading}
             className="d-flex align-items-center align-self-end"
           >
-            {(isSubmitting || isLoading) && (
+            {isSubmitting && (
               <Spinner
                 animation="border"
                 size="sm"

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>
@@ -127,7 +109,7 @@ function RecurrenceEndInput({
   );
 }
 
-export const defaultOccurrences = {
+const defaultOccurrences = {
   [RRule.DAILY]: 30,
   [RRule.WEEKLY]: 13,
   [RRule.MONTHLY]: 12,

package/src/recurrence-input/RecurrenceInput.tsx

@@ -3,7 +3,7 @@
 import { DateTime } from "luxon";
 import React, { useEffect, useReducer } from "react";
 import RRule, { Frequency, Weekday } from "rrule";
-import RecurrenceEndInput, { defaultOccurrences } from "./RecurrenceEndInput";
+import RecurrenceEndInput from "./RecurrenceEndInput";
 import RecurrenceIntervalAndFrequencyInput from "./RecurrenceIntervalAndFrequencyInput";
 import RecurrenceMonthlyRepeatByInput from "./RecurrenceMonthlyRepeatByInput";
 import RecurrenceWeekdaysInput from "./RecurrenceWeekdaysInput";
@@ -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}
@@ -133,12 +130,5 @@ const getInitialState = ({
     byweekday = options.byweekday[0];
   }
 
-  return {
-    ...options,
-    count:
-      options?.count || options.until
-        ? options.count
-        : defaultOccurrences[options.freq],
-    byweekday,
-  };
+  return { ...options, byweekday };
 };

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

@@ -2,7 +2,7 @@ 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 { useFormContext } from "react-hook-form";
 import { DATE_FORMAT } from "@licklist/core/dist/Config";
 import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
 
@@ -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>
 
@@ -156,16 +144,18 @@ function RecurrenceIntervalAndFrequencyInput({
                   const currentStartTime = DateTime.fromISO(startTime);
                   const currentEndTime = DateTime.fromISO(time);
 
-                  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/recurring-date-picker-input/RecurringDatePickerInput.tsx

@@ -7,7 +7,6 @@ import { useIntl } from "react-intl";
 import {
   DATE_TIME_FORMAT,
   DATE_TIME_FULL_FORMAT,
-  TIME_FULL_FORMAT,
 } from "@licklist/core/dist/Config/Date";
 import { usePreviousValue } from "@licklist/plugins/dist/hooks/Value/usePreviousValue";
 import { FormProvider, useForm } from "react-hook-form";
@@ -39,7 +38,6 @@ export interface RecurringDatePickerInputValues {
   byweekday?: Weekday[];
   until?: Date;
   count?: number;
-  withOutEndDate?: boolean;
 }
 
 export function RecurringDatePickerInput({
@@ -103,11 +101,6 @@ export function RecurringDatePickerInput({
         })
       : nextState.byweekday;
 
-    const endTimeNextState = nextState?.endTime
-      ? DateTime.fromISO(nextState?.endTime).toFormat(TIME_FULL_FORMAT)
-      : "";
-    const endDateNextState = nextState?.endDate ?? "";
-
     const rrule = RRule.optionsToString({
       // @TODO: investigate if we need these fields
       // dtstart: getDateTimeObject(startDate, startTime).toJSDate(),
@@ -122,8 +115,6 @@ export function RecurringDatePickerInput({
 
     onChange({
       ...nextState,
-      endDate: endDateNextState,
-      endTime: endTimeNextState,
       rrule,
     });
   };

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