@licklist/design 0.67.5-dev.1 → 0.67.6

package/src/product-set/product/booking-management/ProductBookingManagement.stories.tsx

@@ -12,7 +12,7 @@ export default {
 } as Meta;
 
 export const Default: Story<ProductBookingManagementControlProps<{}>> = (
-  args
+  args,
 ) => {
   const form = useForm<ProductBookingManagementControlValues>({
     mode: "onChange",

package/src/product-set/product/quantity/ProductQuantity.stories.tsx

@@ -42,7 +42,7 @@ export const Default: Story<ProductQuantityControlProps<{}>> = (args) => {
 };
 
 export const ConstantForm: Story<ProductQuantityConstantControlProps<{}>> = (
-  args
+  args,
 ) => {
   const form = useForm<ProductQuantityConstantControlValues>({
     mode: "onChange",

package/src/product-set/product-zone/ProductZoneControl.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useMemo } from "react";
+import React, { useContext, useEffect, useMemo } from "react";
 import { Col, Form, Row } from "react-bootstrap";
 import {
   ArrayPath,
@@ -63,7 +63,7 @@ export const ProductZoneControl = <T extends FormValues>({
   const disabledDuration = capacity === "0" || !capacity;
 
   const { providerHasBookingManagement, zones = [] } = useContext(
-    ProductSetLoadingContext,
+    ProductSetLoadingContext
   );
 
   const currentZoneData = zones.find((zone) => zone.id === Number(zoneId));
@@ -75,10 +75,10 @@ export const ProductZoneControl = <T extends FormValues>({
           !productZones.find(
             (productZone) =>
               Number(productZone.zoneId) === zone.id &&
-              productZone.zoneId !== zoneId,
-          ),
+              productZone.zoneId !== zoneId
+          )
       ),
-    [zones, productZones, zoneId],
+    [zones, productZones, zoneId]
   );
 
   useEffect(() => {
@@ -89,7 +89,7 @@ export const ProductZoneControl = <T extends FormValues>({
     setValue(
       `${fieldNamePrefix}.duration` as Path<T>,
       /* @ts-expect-error 6385 */
-      0 as UnpackNestedValue<PathValue<T, Path<T>>>,
+      0 as UnpackNestedValue<PathValue<T, Path<T>>>
     );
     clearErrors(`${fieldNamePrefix}.duration` as Path<T>);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -104,7 +104,7 @@ export const ProductZoneControl = <T extends FormValues>({
       /* @ts-expect-error 6385 */
       (value * currentZoneData?.defaultDuration) as UnpackNestedValue<
         PathValue<T, Path<T>>
-      >,
+      >
     );
   };
   return (
@@ -123,7 +123,7 @@ export const ProductZoneControl = <T extends FormValues>({
                     disabled={isOverrides}
                     isInvalid={HookFormService.isInvalid(
                       `${fieldNamePrefix}.zoneId`,
-                      errors,
+                      errors
                     )}
                     {...field}
                   >
@@ -147,7 +147,7 @@ export const ProductZoneControl = <T extends FormValues>({
               <Form.Control.Feedback type="invalid">
                 {HookFormService.getErrors(
                   `${fieldNamePrefix}.zoneId` as Path<T>,
-                  errors,
+                  errors
                 )}
               </Form.Control.Feedback>
             </Form.Group>

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

@@ -3,7 +3,6 @@ import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemp
 import { TFunction } from "react-i18next";
 import { UseFormSetError } from "react-hook-form";
 import { checkIfZoneCategory } from "@licklist/plugins";
-import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import { TemplateItem } from "../control/ProductSetControl";
 import { ProductSetFormValues } from "../form/ProductSetForm";
 
@@ -13,11 +12,6 @@ interface CheckAvailableTimesErrors {
   t: TFunction;
 }
 
-export interface MenuTypeheadItem {
-  id: number;
-  label: string;
-  value: number;
-}
 export const moveArrayElements = <T>(
   array: T[],
   prevIndex: number,
@@ -90,8 +84,3 @@ export const checkAvailableTimesErrors = ({
   });
   return hasError;
 };
-
-export const getTypeHeadItemsFromMenus = (
-  menus?: (ProductSet | ProductSetFormValues)[],
-): MenuTypeheadItem[] =>
-  menus?.map((menu) => ({ id: menu.id, value: menu.id, label: menu.name }));

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

@@ -2,21 +2,17 @@ import { useId } from "@react-aria/utils";
 import { Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { TimeZonePath, useTimeZoneApi } from "@licklist/plugins";
-import { BlockLoader } from "src/static";
 import CountryCodeSelect from "../../static/CountryCodeSelect";
 import { LocationInputValues } from ".";
 import { FormGroupControll } from "./components";
 
-export function LocationInput({ path }: { path: TimeZonePath }) {
+export function LocationInput() {
   const {
     register,
     formState: { errors },
   } = useFormContext<LocationInputValues>();
   const { t } = useTranslation("Design");
 
-  const { data, isLoading } = useTimeZoneApi(path).useAll();
-
   const countryId = useId();
 
   return (
@@ -43,7 +39,6 @@ export function LocationInput({ path }: { path: TimeZonePath }) {
         name="location.postcode"
         label={t("locationPostcode")}
       />
-
       <Form.Group controlId={countryId}>
         <Form.Label>{t("locationCountry")}</Form.Label>
         <CountryCodeSelect
@@ -52,36 +47,6 @@ export function LocationInput({ path }: { path: TimeZonePath }) {
           error={errors?.location?.country?.message}
         />
       </Form.Group>
-
-      {isLoading ? (
-        <BlockLoader />
-      ) : (
-        <Form.Group controlId="timeZoneId">
-          <Form.Label>{t("locationTimeZone")}</Form.Label>
-          <Form.Control
-            {...register("timeZoneId", {
-              required: t("Validation:fieldRequired", {
-                attribute: t("locationTimeZone"),
-              }) as string,
-            })}
-            as="select"
-            custom
-            isInvalid={Boolean(errors?.timeZoneId?.message)}
-          >
-            <option key="" value="" disabled>
-              {t("chooseTimeZone")}
-            </option>
-            {data.map((zone) => (
-              <option key={zone.id} value={zone.id.toString()}>
-                {zone.name}
-              </option>
-            ))}
-          </Form.Control>
-          <Form.Control.Feedback type="invalid">
-            {errors?.timeZoneId?.message}
-          </Form.Control.Feedback>
-        </Form.Group>
-      )}
     </>
   );
 }

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

@@ -1,19 +1,20 @@
 import { ReactElement } from "react";
 import { useFormContext } from "react-hook-form";
 import en from "react-phone-number-input/locale/en.json";
-import { TimeZonePath, useTimeZoneApi } from "@licklist/plugins";
 import { LocationInputValues } from ".";
 
-const fieldNames = ["street", "city", "state", "postcode", "country"] as const;
-
-export function LocationInputDescription({ path }: { path: TimeZonePath }) {
+export function LocationInputDescription() {
   const { watch } = useFormContext<LocationInputValues>();
-  const location = watch("location");
-
-  const { data } = useTimeZoneApi(path).useAll();
-
+  const values = watch("location");
+  const fieldNames = [
+    "street",
+    "city",
+    "state",
+    "postcode",
+    "country",
+  ] as const;
   const fields = fieldNames.reduce<ReactElement[]>((acc, field) => {
-    const value = location?.[field];
+    const value = values?.[field];
     if (!value) return acc;
 
     return [
@@ -21,18 +22,5 @@ export function LocationInputDescription({ path }: { path: TimeZonePath }) {
       <div key={field}>{field === "country" ? en[value] : value}</div>,
     ];
   }, []);
-
-  const timeZoneId = watch("timeZoneId");
-  const timeZoneName = data?.find(
-    (timeZone) => timeZone.id === +timeZoneId,
-  )?.name;
-
-  return (
-    <div>
-      <>
-        {fields}
-        {timeZoneName && <div key="timeZone">{timeZoneName}</div>}
-      </>
-    </div>
-  );
+  return <div>{fields}</div>;
 }

package/src/provider/location-input/index.ts

@@ -11,5 +11,4 @@ export type LocationInputValues = {
     latitude: string;
     longitude: string;
   };
-  timeZoneId: string;
 };

package/src/provider/provider-form/ProviderForm.tsx

@@ -10,7 +10,6 @@ import {
 } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
 import { useMultipleImages } from "@licklist/plugins/dist/hooks/Media/useMultipleImages";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
-import { TimeZonePath } from "@licklist/plugins";
 import { CollapsibleInputGroup } from "../../collapsible-input-group";
 import {
   CategoriesInput,
@@ -42,7 +41,6 @@ export interface ProviderFormProps extends HasPermissionProp {
   companiesOptions?: TypeaheadOptions[];
   onSubmit: (values: ProviderFormValues) => void;
   intent?: "create" | "update";
-  path: TimeZonePath;
 }
 
 const providerImageTypes = {
@@ -58,17 +56,14 @@ export function ProviderForm({
   onSubmit,
   intent = "update",
   hasPermission = true,
-  path,
 }: ProviderFormProps) {
   const form = useForm<ProviderFormValues>({ defaultValues });
-
   const {
     setValue,
     handleSubmit,
     formState: { isSubmitting, errors },
     getValues,
   } = form;
-
   const { t } = useTranslation("Design");
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
 
@@ -106,10 +101,10 @@ export function ProviderForm({
           <CollapsibleInputGroup
             eventKey="location"
             label={t("location")}
-            description={<LocationInputDescription path={path} />}
+            description={<LocationInputDescription />}
             error={errors?.location?.country?.message}
           >
-            <LocationInput path={path} />
+            <LocationInput />
           </CollapsibleInputGroup>
           {categories && categories.length > 0 && (
             <CollapsibleInputGroup

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

@@ -11,7 +11,6 @@ import {
 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 { TimeZonePath } from "@licklist/plugins";
 import { CollapsibleInputGroup } from "../../collapsible-input-group";
 import {
   CategoriesInput,
@@ -51,7 +50,6 @@ export interface VenueFormProps extends HasPermissionProp {
   intent?: "create" | "update";
   isLoading?: boolean;
   errorResponse?: unknown;
-  path: TimeZonePath;
 }
 
 const providerImageTypes = {
@@ -69,7 +67,6 @@ export function VenueForm({
   hasPermission = true,
   isLoading,
   errorResponse,
-  path,
 }: VenueFormProps) {
   const form = useForm<VenueFormValues>({ defaultValues, mode: "onChange" });
   const {
@@ -137,7 +134,7 @@ export function VenueForm({
           <CollapsibleInputGroup
             eventKey="location"
             label={t("location")}
-            description={<LocationInputDescription path={path} />}
+            description={<LocationInputDescription />}
             error={
               errors?.location?.message ||
               (errors?.location &&
@@ -146,7 +143,7 @@ export function VenueForm({
                 }))
             }
           >
-            <LocationInput path={path} />
+            <LocationInput />
           </CollapsibleInputGroup>
           <CollapsibleInputGroup
             eventKey="workingHours"

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

@@ -24,9 +24,8 @@ export function WorkingHoursInput() {
         <Col>{t("Design:until")}</Col>
         <Col>{t("Design:description")}</Col>
       </Form.Row>
-
       <Form.Control
-        {...register(`workingHours`, {
+        {...register(`workingHours` as const, {
           validate: (value) => {
             const oneOfDaysFilled = value?.some(
               (workingDay) => workingDay.start,
@@ -43,7 +42,6 @@ export function WorkingHoursInput() {
         })}
         type="hidden"
       />
-
       {weekdays.map((name, i) => (
         /*
          * The only reason inputs have placeholders here is to fix
@@ -51,19 +49,14 @@ export function WorkingHoursInput() {
          * which miscalculates alignment for empty inputs.
          * Otherwise placeholders should not be used.
          */
-        <Form.Row key={name} className="align-items-baseline">
-          <Col
-            className="h5 text-lg-right text-nowrap mb-4 mb-lg-0"
-            xs="12"
-            lg="2"
-          >
+        <Form.Row key={i} className="align-items-baseline">
+          <Col className="h5 text-lg-right mb-4 mb-lg-0" xs="12" lg="2">
             {name}
           </Col>
-
           <Form.Group as={Col}>
             <Form.Label className="d-lg-none">{t("Design:from")}</Form.Label>
             <Form.Control
-              {...register(`workingHours.${i}.start`, {
+              {...register(`workingHours.${i}.start` as const, {
                 validate: (nextStartValue) => {
                   if (nextStartValue) {
                     clearErrors("workingHours");
@@ -76,22 +69,20 @@ export function WorkingHoursInput() {
               placeholder={t("Design:from")}
             />
           </Form.Group>
-
           <Form.Group as={Col}>
             <Form.Label className="d-lg-none">{t("Design:until")}</Form.Label>
             <Form.Control
-              {...register(`workingHours.${i}.end`)}
+              {...register(`workingHours.${i}.end` as const)}
               type="time"
               placeholder={t("Design:until")}
             />
           </Form.Group>
-
           <Form.Group as={Col} xs="12" lg>
             <Form.Label className="d-lg-none">
               {t("Design:description")}
             </Form.Label>
             <Form.Control
-              {...register(`workingHours.${i}.description`)}
+              {...register(`workingHours.${i}.description` as const)}
               placeholder={t("Design:description")}
             />
           </Form.Group>

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

@@ -1,6 +1,8 @@
+import { DateTime } from "luxon";
 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 { WorkingHoursInputValues } from ".";
 import { useWeekdays } from "./utils";
 
@@ -14,17 +16,34 @@ export function WorkingHoursInputDescription() {
 
   return (
     <>
-      {Array.from({ length: weekdays.length }, (_, i) => i).map((i) => (
-        <Row key={i}>
-          <Col xs="auto">{weekdays[i]}:</Col>
-          <Col>
-            {t("timeInterval", {
-              start: values?.[i].start ?? "00:00",
-              end: values?.[i].end ?? "23:59",
-            })}
-          </Col>
-        </Row>
-      ))}
+      {Array.from({ length: weekdays.length }, (_, i) => i)
+        .filter((i) => values?.[i]?.start)
+        .map((i) => {
+          const weekday = values?.[i];
+          return (
+            <Row key={i}>
+              <Col xs="auto">{weekdays[i]}:</Col>
+              <Col>
+                {weekday?.end
+                  ? weekday.start
+                    ? t("timeInterval", {
+                        start: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT,
+                        ),
+                        end: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT,
+                        ),
+                      })
+                    : t("timeFrom", {
+                        start: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT,
+                        ),
+                      })
+                  : null}
+              </Col>
+            </Row>
+          );
+        })}
     </>
   );
 }

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

@@ -8,8 +8,12 @@ import {
   useWatch,
   Validate,
 } from "react-hook-form";
-import { TIME_FORMAT } from "@licklist/core/dist/Config";
-import { fromIso } from "@licklist/core/dist/Services";
+import {
+  DATE_FORMAT,
+  TIME_FORMAT,
+  TIME_FULL_FORMAT,
+} from "@licklist/core/dist/Config";
+import { fromFormat } from "@licklist/plugins/dist/utils/dateTime";
 import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
 
 interface RecurrenceIntervalAndFrequencyInputProps {
@@ -27,9 +31,17 @@ interface RecurrenceIntervalAndFrequencyInputProps {
     RegisterOptions,
     "max" | "min" | "validate" | "required" | "pattern"
   >;
-  timeZone: string;
 }
 
+const fromTimeFormat = fromFormat(TIME_FORMAT);
+const fromTimeFullFormat = fromFormat(TIME_FULL_FORMAT);
+
+// default values and entered values are in different formats
+const fromTimeFormats = (time: string) =>
+  fromTimeFormat(time).isValid
+    ? fromTimeFormat(time)
+    : fromTimeFullFormat(time);
+
 function RecurrenceIntervalAndFrequencyInput({
   disabled = false,
   minDate,
@@ -39,7 +51,6 @@ function RecurrenceIntervalAndFrequencyInput({
   endTimeLabel,
   startTimeRules,
   endTimeRules,
-  timeZone,
 }: RecurrenceIntervalAndFrequencyInputProps) {
   const { t } = useTranslation(["Design", "Notification", "App"]);
 
@@ -55,10 +66,10 @@ function RecurrenceIntervalAndFrequencyInput({
 
   const _startTime = useWatch({ control, name: "startTime" });
   const startTime =
-    _startTime && fromIso(_startTime, timeZone).toFormat(TIME_FORMAT);
+    _startTime && fromTimeFormats(_startTime).toFormat(TIME_FORMAT);
 
   const _endTime = useWatch({ control, name: "endTime" });
-  const endTime = _endTime && fromIso(_endTime, timeZone).toFormat(TIME_FORMAT);
+  const endTime = _endTime && fromTimeFormats(_endTime).toFormat(TIME_FORMAT);
 
   useEffect(() => {
     if (!startDate || !endDate) {
@@ -108,8 +119,11 @@ function RecurrenceIntervalAndFrequencyInput({
                   if (!startDate || !date) {
                     return true;
                   }
-                  const currentStartDate = fromIso(startDate, timeZone);
-                  const currentEndDate = fromIso(date, timeZone);
+                  const currentStartDate = DateTime.fromFormat(
+                    startDate,
+                    DATE_FORMAT,
+                  );
+                  const currentEndDate = DateTime.fromFormat(date, DATE_FORMAT);
                   return currentEndDate.diff(currentStartDate, ["days"]).days >=
                     0
                     ? true

package/src/recurring-date-picker-input/RecurringDatePickerInput.stories.tsx

@@ -12,7 +12,9 @@ export default {
   component: RecurringDatePickerInput,
 } as Meta;
 
-export const Default: Story<RecurringDatePickerInputProps> = (args) => {
+type DefaultRecurringDatePickerInputProps = RecurringDatePickerInputProps;
+
+export const Default: Story<DefaultRecurringDatePickerInputProps> = (args) => {
   return (
     <Card style={{ maxWidth: "max-content" }}>
       <Card.Body>
@@ -21,7 +23,7 @@ export const Default: Story<RecurringDatePickerInputProps> = (args) => {
     </Card>
   );
 };
-export const Valid: Story<RecurringDatePickerInputProps> = (args) => {
+export const Valid: Story<DefaultRecurringDatePickerInputProps> = (args) => {
   return (
     <Card style={{ maxWidth: "max-content" }}>
       <Card.Body>
@@ -32,15 +34,6 @@ export const Valid: Story<RecurringDatePickerInputProps> = (args) => {
 };
 Default.args = {
   onChange: (data) => console.log("onSubmit", data),
-  workHours: [
-    { start: "20:00", end: "04:00", day: 0, description: "" },
-    { start: "20:00", end: "04:00", day: 1, description: "" },
-    { start: "20:00", end: "04:00", day: 2, description: "" },
-    { start: "20:00", end: "12:00", day: 3, description: "" },
-    { start: "20:00", end: "23:00", day: 4, description: "" },
-    { start: "08:00", end: "12:00", day: 5, description: "" },
-    { start: "10:00", end: "16:00", day: 6, description: "" },
-  ],
 };
 Valid.args = {
   onChange: (data) => console.log("onSubmit", data),

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

@@ -2,7 +2,7 @@ import { useEffect, useMemo, PropsWithChildren } from "react";
 import RRule, { Frequency, Weekday } from "rrule";
 import { useTranslation } from "react-i18next";
 import Button from "react-bootstrap/Button";
-import { DateTime, Interval, WeekdayNumbers } from "luxon";
+import { DateTime, Interval } from "luxon";
 import { useIntl } from "react-intl";
 import {
   DATE_TIME_FORMAT,
@@ -12,14 +12,9 @@ import {
 import { usePreviousValue } from "@licklist/plugins/dist/hooks/Value/usePreviousValue";
 import { FormProvider, useForm } from "react-hook-form";
 import { Form } from "react-bootstrap";
-import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import RecurrenceIntervalAndFrequencyInput from "./RecurrenceIntervalAndFrequencyInput";
 import RecurrenceWeekdaysInput from "./RecurrenceWeekdaysInput";
-import {
-  parseAndValidateRRule,
-  SupportedFrequency,
-  useWorkHoursValidation,
-} from "./utils";
+import { parseAndValidateRRule, SupportedFrequency } from "./utils";
 import { ConfirmModal } from "../modals";
 import { DeleteFieldButton } from "../product-set/elements";
 
@@ -31,8 +26,6 @@ export interface RecurringDatePickerInputProps {
   initialFrequency?: Frequency;
   setInitialStartDateAfterSelect?: boolean;
   minDate?: string;
-  workHours: WorkHour[] | undefined;
-  timeZone: string;
 }
 
 export interface RecurringDatePickerInputValues {
@@ -58,8 +51,6 @@ export function RecurringDatePickerInput({
   setInitialStartDateAfterSelect = false,
   children,
   minDate,
-  workHours,
-  timeZone,
 }: PropsWithChildren<RecurringDatePickerInputProps>) {
   const { t } = useTranslation(["Design"]);
 
@@ -93,8 +84,6 @@ export function RecurringDatePickerInput({
     byWeekDay,
   });
 
-  const validator = useWorkHoursValidation(byWeekDay, workHours, timeZone);
-
   const onSubmit = (nextState: RecurringDatePickerInputValues) => {
     const end = getDateTimeObject(endDate, endTime || "23:59:59");
 
@@ -160,7 +149,7 @@ export function RecurringDatePickerInput({
     // Luxon use standard ISO calendar but in that case
     // first weekday from weekdays array start from 0 index.
     // We need to add 1 to it to show correct data
-    const currentWeekDay = (byWeekDay[0]?.weekday + 1) as WeekdayNumbers;
+    const currentWeekDay = byWeekDay[0]?.weekday + 1;
 
     const currentDate = DateTime.local();
 
@@ -199,9 +188,6 @@ export function RecurringDatePickerInput({
         <RecurrenceIntervalAndFrequencyInput
           disabled={disabled}
           minDate={minDate}
-          startTimeRules={validator}
-          endTimeRules={validator}
-          timeZone={timeZone}
         />
 
         {children}