@licklist/design 0.66.0 → 0.66.1-dev.0

package/src/product-set/step/StepControl.tsx

@@ -26,6 +26,7 @@ export interface StepControlProps extends IsDeletableEvent {
   stepIndex: number;
   stepName: string;
   onStepNameChange: (args: any) => void;
+  isOverrides?: boolean;
 }
 
 export function StepControl({
@@ -33,6 +34,7 @@ export function StepControl({
   stepIndex,
   stepName,
   onStepNameChange,
+  isOverrides = false,
 }: StepControlProps) {
   const { providerHasMap } = useContext(ProductSetLoadingContext);
   const {
@@ -42,7 +44,6 @@ export function StepControl({
     watch,
   } = useFormContext<ProductSetFormValues>();
   const { t } = useTranslation("Design");
-
   const fieldName = `steps.${stepIndex}.name` as const;
   const productCategoriesFieldName =
     `steps.${stepIndex}.productCategories` as const;
@@ -71,7 +72,7 @@ export function StepControl({
                     fieldName,
                     errors
                   )}
-                  disabled={isLoading}
+                  disabled={isLoading || isOverrides}
                 />
               )}
               control={control}
@@ -114,7 +115,7 @@ export function StepControl({
                           name={name}
                           value={Boolean(value)}
                           onChange={onChange}
-                          disabled={isLoading}
+                          disabled={isLoading || isOverrides}
                         />
                       )}
                       control={control}

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

@@ -1,9 +1,7 @@
-import { DateTime } from "luxon";
 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 { WorkingHoursInputValues } from ".";
 import { useWeekdays } from "./utils";
 
@@ -25,22 +23,10 @@ export function WorkingHoursInputDescription() {
             <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}
+                {t("timeInterval", {
+                  start: weekday.start,
+                  end: weekday.end,
+                })}
               </Col>
             </Row>
           );

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

@@ -2,8 +2,18 @@ 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 {
+  RegisterOptions,
+  useFormContext,
+  useWatch,
+  Validate,
+} from "react-hook-form";
+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 {
@@ -23,6 +33,15 @@ interface RecurrenceIntervalAndFrequencyInputProps {
   >;
 }
 
+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,
@@ -36,16 +55,21 @@ function RecurrenceIntervalAndFrequencyInput({
   const { t } = useTranslation(["Design", "Notification", "App"]);
 
   const {
-    getValues,
     formState: { errors },
     register,
     trigger,
+    control,
   } = useFormContext<RecurringDatePickerInputValues>();
 
-  const startDate = getValues("startDate");
-  const endDate = getValues("endDate");
-  const startTime = getValues("startTime");
-  const endTime = getValues("endTime");
+  const startDate = useWatch({ control, name: "startDate" });
+  const endDate = useWatch({ control, name: "endDate" });
+
+  const _startTime = useWatch({ control, name: "startTime" });
+  const startTime =
+    _startTime && fromTimeFormats(_startTime).toFormat(TIME_FORMAT);
+
+  const _endTime = useWatch({ control, name: "endTime" });
+  const endTime = _endTime && fromTimeFormats(_endTime).toFormat(TIME_FORMAT);
 
   useEffect(() => {
     if (!startDate || !endDate) {
@@ -149,22 +173,27 @@ function RecurrenceIntervalAndFrequencyInput({
               type="time"
               {...register("endTime", {
                 required: false,
-                validate: (time) => {
-                  if (!startTime || !time) {
-                    return true;
-                  }
-                  const currentStartTime = DateTime.fromISO(startTime);
-                  const currentEndTime = DateTime.fromISO(time);
+                ...endTimeRules,
+                validate: {
+                  external: endTimeRules?.validate
+                    ? (endTimeRules?.validate as Validate<string>)
+                    : () => true,
+                  time: (time) => {
+                    if (!startTime || !time) {
+                      return true;
+                    }
+                    const currentStartTime = DateTime.fromISO(startTime);
+                    const currentEndTime = DateTime.fromISO(time);
 
-                  return currentEndTime?.diff(currentStartTime, ["minutes"])
-                    ?.minutes >= 0
-                    ? true
-                    : `${t(`Validation:fieldLaterDate`, {
-                        attribute: t("Design:endTimeSmall"),
-                        min: t("Design:startTimeSmall"),
-                      })}`;
+                    return currentEndTime?.diff(currentStartTime, ["minutes"])
+                      ?.minutes >= 0
+                      ? true
+                      : `${t(`Validation:fieldLaterDate`, {
+                          attribute: t("Design:endTimeSmall"),
+                          min: t("Design:startTimeSmall"),
+                        })}`;
+                  },
                 },
-                ...endTimeRules,
               })}
               placeholder="hh:mm"
               defaultValue={endTime}

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

@@ -1,22 +1,19 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { Card } from "react-bootstrap";
+import { DateTime } from "luxon";
+import { DATE_FORMAT, TIME_FORMAT } from "@licklist/core/dist/Config/Date";
 import {
   RecurringDatePickerInput,
   RecurringDatePickerInputProps,
 } from "./RecurringDatePickerInput";
-import { DateTime } from "luxon";
-import { DATE_FORMAT, TIME_FORMAT } from "@licklist/core/dist/Config/Date";
 
 export default {
   title: "RecurringDatePickerInput",
   component: RecurringDatePickerInput,
 } as Meta;
 
-interface DefaultRecurringDatePickerInputProps
-  extends RecurringDatePickerInputProps {}
-
-export const Default: Story<DefaultRecurringDatePickerInputProps> = (args) => {
+export const Default: Story<RecurringDatePickerInputProps> = (args) => {
   return (
     <Card style={{ maxWidth: "max-content" }}>
       <Card.Body>
@@ -25,7 +22,7 @@ export const Default: Story<DefaultRecurringDatePickerInputProps> = (args) => {
     </Card>
   );
 };
-export const Valid: Story<DefaultRecurringDatePickerInputProps> = (args) => {
+export const Valid: Story<RecurringDatePickerInputProps> = (args) => {
   return (
     <Card style={{ maxWidth: "max-content" }}>
       <Card.Body>
@@ -36,6 +33,15 @@ export const Valid: Story<DefaultRecurringDatePickerInputProps> = (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

@@ -12,9 +12,14 @@ 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 } from "./utils";
+import {
+  parseAndValidateRRule,
+  SupportedFrequency,
+  useWorkHoursValidation,
+} from "./utils";
 import { ConfirmModal } from "../modals";
 import { DeleteFieldButton } from "../product-set/elements";
 
@@ -26,6 +31,7 @@ export interface RecurringDatePickerInputProps {
   initialFrequency?: Frequency;
   setInitialStartDateAfterSelect?: boolean;
   minDate?: string;
+  workHours: WorkHour[] | undefined;
 }
 
 export interface RecurringDatePickerInputValues {
@@ -51,6 +57,7 @@ export function RecurringDatePickerInput({
   setInitialStartDateAfterSelect = false,
   children,
   minDate,
+  workHours,
 }: PropsWithChildren<RecurringDatePickerInputProps>) {
   const { t } = useTranslation(["Design"]);
 
@@ -84,6 +91,8 @@ export function RecurringDatePickerInput({
     byWeekDay,
   });
 
+  const validator = useWorkHoursValidation(byWeekDay, workHours);
+
   const onSubmit = (nextState: RecurringDatePickerInputValues) => {
     const end = getDateTimeObject(endDate, endTime || "23:59:59");
 
@@ -188,6 +197,8 @@ export function RecurringDatePickerInput({
         <RecurrenceIntervalAndFrequencyInput
           disabled={disabled}
           minDate={minDate}
+          startTimeRules={validator}
+          endTimeRules={validator}
         />
 
         {children}

package/src/recurring-date-picker-input/utils.ts

@@ -1,4 +1,9 @@
-import { DateTime } from "luxon";
+import { TIME_FORMAT, TIME_FULL_FORMAT } from "@licklist/core/dist/Config";
+import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
+import { fromFormat } from "@licklist/plugins/dist/utils/dateTime";
+import { DateTime, Interval } from "luxon";
+import { Validate } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import RRule, { Frequency, Weekday } from "rrule";
 
 export const getWeekdayForFrequency = ({
@@ -11,6 +16,7 @@ export const getWeekdayForFrequency = ({
   const parsedDate = DateTime.fromISO(date);
   return new Weekday(
     parsedDate.weekday - 1,
+    // eslint-disable-next-line no-nested-ternary
     frequency !== Frequency.MONTHLY
       ? undefined
       : parsedDate.day + 7 > parsedDate.daysInMonth
@@ -109,3 +115,86 @@ export const parseAndValidateRRule = ({
     until: options.until,
   } as ParsedRRuleOptions;
 };
+
+export const useWorkHoursValidation = (
+  byWeekDay: Weekday[] = [],
+  workHours: WorkHour[] | undefined
+): {
+  validate?: Validate<string>;
+} => {
+  const { t } = useTranslation("Validation");
+  if (!workHours) return {};
+
+  const fromTimeFormat = fromFormat(TIME_FORMAT);
+  const fromTimeFullFormat = fromFormat(TIME_FULL_FORMAT);
+
+  // map every day to array of intervals describing workhours for that day
+  let intervalsByDay = workHours.map((workhour, index, self) => {
+    const res: Interval[] = [];
+
+    const startTime = fromTimeFormat(workhour.start);
+    const endTime = fromTimeFormat(workhour.end);
+
+    if (endTime > startTime) {
+      res.push(Interval.fromDateTimes(startTime, endTime));
+    } else {
+      // if end is before start, then it means that end is on the next day
+      // so count only to the end of current day
+      res.push(Interval.fromDateTimes(startTime, startTime.endOf("day")));
+    }
+
+    const prevIndex = index === 0 ? self.length - 1 : index - 1;
+
+    const prevStartTime = fromTimeFormat(self[prevIndex].start);
+    const prevEndTime = fromTimeFormat(self[prevIndex].end);
+
+    // if prevStartTime > prevEndTime then it means that prevEndTime is on the current day
+    // so we need to add interval from start of current day to prevEndTime
+    if (prevStartTime > prevEndTime) {
+      res.push(Interval.fromDateTimes(prevEndTime.startOf("day"), prevEndTime));
+    }
+
+    return res;
+  });
+
+  // if length === 0 or length === 7 then all workhours are selected, no need to filter
+  if (![0, 7].includes(byWeekDay.length)) {
+    intervalsByDay = intervalsByDay.filter((_, index) =>
+      byWeekDay.find(({ weekday }) => weekday === index)
+    );
+  }
+
+  return {
+    validate: (_time: string) => {
+      // workaround for issue with form values
+      // default values and entered values have different formats
+      const time = fromTimeFormat(_time).isValid
+        ? fromTimeFormat(_time)
+        : fromTimeFullFormat(_time);
+
+      const notFittingIntervalsByDay = intervalsByDay.reduce<Interval[][]>(
+        (acc, intervalsByDay) => {
+          if (!intervalsByDay.some((interval) => interval.contains(time))) {
+            acc.push(intervalsByDay);
+          }
+          return acc;
+        },
+        []
+      );
+
+      const notFittingIntervals = notFittingIntervalsByDay
+        .flat()
+        .filter((interval) => !interval.contains(time));
+
+      const attribute = notFittingIntervals
+        .map((interval) => interval.toFormat("HH:mm"))
+        .join(", ");
+
+      if (notFittingIntervalsByDay.length !== 0) {
+        return t("outsideWorkingHours", { attribute }) as string;
+      }
+
+      return true;
+    },
+  };
+};

package/src/report/ReportRunnerModal/ReportRunnerModal.stories.tsx

@@ -0,0 +1,307 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+import { Card } from "react-bootstrap";
+import { ReportRunnerModal, ReportRunnerModalProps } from "./ReportRunnerModal";
+
+export default {
+  title: "Report/ReportRunnerModal",
+  component: ReportRunnerModal,
+} as Meta;
+
+export const Default: Story<ReportRunnerModalProps> = (args) => (
+  <Card style={{ maxWidth: "max-content" }}>
+    <Card.Body>
+      <ReportRunnerModal {...args} />
+    </Card.Body>
+  </Card>
+);
+
+Default.args = {
+  reportId: 47,
+  show: true,
+  generate: { isLoading: false },
+  download: { isLoading: false },
+  useShowReportFields: (type) => ({ data: [], isLoading: false }),
+  onHide: () => {},
+  onEdit: () => {},
+  reports: [
+    {
+      id: 47,
+      providerId: null,
+      type: "payments",
+      name: "Test 1",
+      createdAt: "2024-04-26 08:16:59",
+      updatedAt: "2024-04-26 08:16:59",
+      deletedAt: null,
+      reportFieldValues: [
+        {
+          id: 580,
+          reportId: 47,
+          reportFieldId: 16,
+        },
+        {
+          id: 581,
+          reportId: 47,
+          reportFieldId: 17,
+        },
+        {
+          id: 582,
+          reportId: 47,
+          reportFieldId: 18,
+        },
+        {
+          id: 583,
+          reportId: 47,
+          reportFieldId: 19,
+        },
+        {
+          id: 584,
+          reportId: 47,
+          reportFieldId: 20,
+        },
+        {
+          id: 585,
+          reportId: 47,
+          reportFieldId: 21,
+        },
+        {
+          id: 586,
+          reportId: 47,
+          reportFieldId: 22,
+        },
+        {
+          id: 587,
+          reportId: 47,
+          reportFieldId: 23,
+        },
+        {
+          id: 588,
+          reportId: 47,
+          reportFieldId: 24,
+        },
+        {
+          id: 589,
+          reportId: 47,
+          reportFieldId: 26,
+        },
+        {
+          id: 590,
+          reportId: 47,
+          reportFieldId: 27,
+        },
+        {
+          id: 591,
+          reportId: 47,
+          reportFieldId: 28,
+        },
+        {
+          id: 592,
+          reportId: 47,
+          reportFieldId: 40,
+        },
+        {
+          id: 593,
+          reportId: 47,
+          reportFieldId: 41,
+        },
+        {
+          id: 594,
+          reportId: 47,
+          reportFieldId: 42,
+        },
+      ],
+    },
+    {
+      id: 52,
+      providerId: null,
+      type: "bookings",
+      name: "new report",
+      createdAt: "2024-04-29 16:05:51",
+      updatedAt: "2024-04-29 16:08:39",
+      deletedAt: null,
+      reportFieldValues: [
+        {
+          id: 635,
+          reportId: 52,
+          reportFieldId: 1,
+        },
+        {
+          id: 636,
+          reportId: 52,
+          reportFieldId: 2,
+        },
+        {
+          id: 637,
+          reportId: 52,
+          reportFieldId: 3,
+        },
+        {
+          id: 638,
+          reportId: 52,
+          reportFieldId: 4,
+        },
+        {
+          id: 639,
+          reportId: 52,
+          reportFieldId: 5,
+        },
+        {
+          id: 640,
+          reportId: 52,
+          reportFieldId: 6,
+        },
+        {
+          id: 641,
+          reportId: 52,
+          reportFieldId: 7,
+        },
+        {
+          id: 642,
+          reportId: 52,
+          reportFieldId: 8,
+        },
+        {
+          id: 643,
+          reportId: 52,
+          reportFieldId: 9,
+        },
+        {
+          id: 644,
+          reportId: 52,
+          reportFieldId: 10,
+        },
+        {
+          id: 645,
+          reportId: 52,
+          reportFieldId: 11,
+        },
+        {
+          id: 646,
+          reportId: 52,
+          reportFieldId: 12,
+        },
+        {
+          id: 647,
+          reportId: 52,
+          reportFieldId: 13,
+        },
+        {
+          id: 648,
+          reportId: 52,
+          reportFieldId: 14,
+        },
+        {
+          id: 649,
+          reportId: 52,
+          reportFieldId: 15,
+        },
+        {
+          id: 650,
+          reportId: 52,
+          reportFieldId: 36,
+        },
+        {
+          id: 651,
+          reportId: 52,
+          reportFieldId: 37,
+        },
+        {
+          id: 652,
+          reportId: 52,
+          reportFieldId: 38,
+        },
+        {
+          id: 653,
+          reportId: 52,
+          reportFieldId: 39,
+        },
+        {
+          id: 654,
+          reportId: 52,
+          reportFieldId: 47,
+        },
+        {
+          id: 655,
+          reportId: 52,
+          reportFieldId: 48,
+        },
+      ],
+    },
+    {
+      id: 53,
+      providerId: null,
+      type: "tickets",
+      name: "tickets",
+      createdAt: "2024-04-29 16:12:36",
+      updatedAt: "2024-04-29 16:12:36",
+      deletedAt: null,
+      reportFieldValues: [
+        {
+          id: 656,
+          reportId: 53,
+          reportFieldId: 29,
+        },
+        {
+          id: 657,
+          reportId: 53,
+          reportFieldId: 30,
+        },
+        {
+          id: 658,
+          reportId: 53,
+          reportFieldId: 31,
+        },
+        {
+          id: 659,
+          reportId: 53,
+          reportFieldId: 32,
+        },
+        {
+          id: 660,
+          reportId: 53,
+          reportFieldId: 33,
+        },
+        {
+          id: 661,
+          reportId: 53,
+          reportFieldId: 34,
+        },
+        {
+          id: 662,
+          reportId: 53,
+          reportFieldId: 35,
+        },
+        {
+          id: 663,
+          reportId: 53,
+          reportFieldId: 43,
+        },
+        {
+          id: 664,
+          reportId: 53,
+          reportFieldId: 44,
+        },
+        {
+          id: 665,
+          reportId: 53,
+          reportFieldId: 45,
+        },
+        {
+          id: 666,
+          reportId: 53,
+          reportFieldId: 46,
+        },
+        {
+          id: 667,
+          reportId: 53,
+          reportFieldId: 51,
+        },
+        {
+          id: 668,
+          reportId: 53,
+          reportFieldId: 52,
+        },
+      ],
+    },
+  ],
+};