@licklist/design 0.66.7-dev.9 → 0.66.7

package/src/recurrence-input/RecurrenceWeekdaysInput.tsx

@@ -1,4 +1,5 @@
 import { Info } from "luxon";
+import React from "react";
 import { Form, ToggleButton, ToggleButtonGroup } from "react-bootstrap";
 import { Frequency, Weekday } from "rrule";
 import { getWeekdayForFrequency } from "./utils";
@@ -29,7 +30,7 @@ function RecurrenceWeekdaysInput({
               ? value
                   .map((weekday) => new Weekday(weekday))
                   .sort((a, b) => a.weekday - b.weekday)
-              : [getWeekdayForFrequency({ date, frequency: Frequency.WEEKLY })],
+              : [getWeekdayForFrequency({ date, frequency: Frequency.WEEKLY })]
           )
         }
       >

package/src/recurrence-input/utils.ts

@@ -14,8 +14,8 @@ export const getWeekdayForFrequency = ({
     frequency !== Frequency.MONTHLY
       ? undefined
       : parsedDate.day + 7 > parsedDate.daysInMonth
-        ? -1
-        : Math.floor(parsedDate.day / 7) + 1,
+      ? -1
+      : Math.floor(parsedDate.day / 7) + 1
   );
 };
 
@@ -57,7 +57,7 @@ export const parseAndValidateRRule = ({
 
   // We need to make sure that given RRule:
   const options = RRule.parseString(
-    rrule.includes("EXDATE") ? rrule.split(";EXDATE=")[0] : rrule,
+    rrule.includes("EXDATE") ? rrule.split(";EXDATE=")[0] : rrule
   );
 
   if (

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 import { Frequency } from "rrule";
 import { useTranslation } from "react-i18next";
 import Button from "react-bootstrap/Button";
@@ -67,7 +67,6 @@ export function DatePickerInput({
           // prevents parent form submitting
           event.preventDefault();
           event.stopPropagation();
-          /* @ts-expect-error 2345 */
           return handleSubmit(onSubmit)(event);
         }}
       >

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

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import { DateTime } from "luxon";
 import { Col, Form, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";

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

@@ -1,4 +1,4 @@
-import { 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";

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

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import { DateTime } from "luxon";
 import { Col, Form, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
@@ -121,7 +121,7 @@ function RecurrenceIntervalAndFrequencyInput({
                   }
                   const currentStartDate = DateTime.fromFormat(
                     startDate,
-                    DATE_FORMAT,
+                    DATE_FORMAT
                   );
                   const currentEndDate = DateTime.fromFormat(date, DATE_FORMAT);
                   return currentEndDate.diff(currentStartDate, ["days"]).days >=
@@ -176,8 +176,7 @@ function RecurrenceIntervalAndFrequencyInput({
                 ...endTimeRules,
                 validate: {
                   external: endTimeRules?.validate
-                    ? /* @ts-expect-error 2314  */
-                      (endTimeRules?.validate as Validate<string>)
+                    ? (endTimeRules?.validate as Validate<string>)
                     : () => true,
                   time: (time) => {
                     if (!startTime || !time) {

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

@@ -1,4 +1,5 @@
 import { Info } from "luxon";
+import React from "react";
 import { Form } from "react-bootstrap";
 import { Frequency, Weekday } from "rrule";
 import { getWeekdayForFrequency } from "./utils";

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

@@ -1,4 +1,5 @@
 import { Info } from "luxon";
+import React from "react";
 import { Form, ToggleButton, ToggleButtonGroup } from "react-bootstrap";
 import { Frequency, Weekday } from "rrule";
 import { useFormContext } from "react-hook-form";
@@ -30,7 +31,7 @@ function RecurrenceWeekdaysInput({ disabled = false, date }: Props) {
               ? value
                   .map((weekday) => new Weekday(weekday))
                   .sort((a, b) => a.weekday - b.weekday)
-              : [getWeekdayForFrequency({ date, frequency: Frequency.WEEKLY })],
+              : [getWeekdayForFrequency({ date, frequency: Frequency.WEEKLY })]
           )
         }
       >

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

@@ -1,18 +1,22 @@
+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;
 
-export const Default: Story<RecurringDatePickerInputProps> = (args) => {
+interface DefaultRecurringDatePickerInputProps
+  extends RecurringDatePickerInputProps {}
+
+export const Default: Story<DefaultRecurringDatePickerInputProps> = (args) => {
   return (
     <Card style={{ maxWidth: "max-content" }}>
       <Card.Body>
@@ -21,7 +25,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 +36,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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, PropsWithChildren } from "react";
+import React, { useEffect, useMemo, PropsWithChildren } from "react";
 import RRule, { Frequency, Weekday } from "rrule";
 import { useTranslation } from "react-i18next";
 import Button from "react-bootstrap/Button";
@@ -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,7 +26,6 @@ export interface RecurringDatePickerInputProps {
   initialFrequency?: Frequency;
   setInitialStartDateAfterSelect?: boolean;
   minDate?: string;
-  workHours: WorkHour[] | undefined;
 }
 
 export interface RecurringDatePickerInputValues {
@@ -57,7 +51,6 @@ export function RecurringDatePickerInput({
   setInitialStartDateAfterSelect = false,
   children,
   minDate,
-  workHours,
 }: PropsWithChildren<RecurringDatePickerInputProps>) {
   const { t } = useTranslation(["Design"]);
 
@@ -91,8 +84,6 @@ export function RecurringDatePickerInput({
     byWeekDay,
   });
 
-  const validator = useWorkHoursValidation(byWeekDay, workHours);
-
   const onSubmit = (nextState: RecurringDatePickerInputValues) => {
     const end = getDateTimeObject(endDate, endTime || "23:59:59");
 
@@ -107,7 +98,7 @@ export function RecurringDatePickerInput({
           }
 
           return new Weekday(
-            (weekDay as { weekday: number })?.weekday as number,
+            (weekDay as { weekday: number })?.weekday as number
           );
         })
       : nextState.byweekday;
@@ -176,7 +167,7 @@ export function RecurringDatePickerInput({
 
     setValue(
       "startDate",
-      currentDateWithSelectedWeekday.plus({ week: 1 }).toSQLDate(),
+      currentDateWithSelectedWeekday.plus({ week: 1 }).toSQLDate()
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [byWeekDay, setInitialStartDateAfterSelect]);
@@ -197,8 +188,6 @@ export function RecurringDatePickerInput({
         <RecurrenceIntervalAndFrequencyInput
           disabled={disabled}
           minDate={minDate}
-          startTimeRules={validator}
-          endTimeRules={validator}
         />
 
         {children}
@@ -301,7 +290,7 @@ const useFormattedDuration = ({
 
     const interval = Interval.fromDateTimes(
       start.set({ second: 0 }),
-      end.set({ second: 0 }),
+      end.set({ second: 0 })
     ).toDuration(["days", "hours", "minutes"]);
 
     if (!interval.isValid) return undefined;
@@ -311,7 +300,7 @@ const useFormattedDuration = ({
 
     const subIntervals = Interval.fromDateTimes(
       start.minus({ second: 1 }),
-      end.plus({ second: 1 }),
+      end.plus({ second: 1 })
     ).splitBy({
       days: 1,
     });
@@ -319,7 +308,7 @@ const useFormattedDuration = ({
     const occurrences = byWeekDay.length
       ? subIntervals.reduce((occurrences, subInt) => {
           return byWeekDay.some(
-            (weekday) => weekday.weekday + 1 === subInt.start.weekday,
+            (weekday) => weekday.weekday + 1 === subInt.start.weekday
           )
             ? occurrences + 1
             : occurrences;
@@ -342,14 +331,14 @@ const useFormattedDuration = ({
 
     return formatList(
       units.map((args) => formatUnit(...args)),
-      { style: "long", type: "unit" },
+      { style: "long", type: "unit" }
     );
   }, [start, end, byWeekDay, formatList, formatNumber]);
 };
 
 export const getDateTimeObject = (
   date: string,
-  time: string,
+  time: string
 ): DateTime | string => {
   const dateTime = DateTime.fromFormat(`${date} ${time}`, DATE_TIME_FORMAT);
 
@@ -359,7 +348,7 @@ export const getDateTimeObject = (
 
   const dateTimeFull = DateTime.fromFormat(
     `${date} ${time}`,
-    DATE_TIME_FULL_FORMAT,
+    DATE_TIME_FULL_FORMAT
   );
 
   if (dateTimeFull.isValid) {

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

@@ -1,9 +1,4 @@
-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 { DateTime } from "luxon";
 import RRule, { Frequency, Weekday } from "rrule";
 
 export const getWeekdayForFrequency = ({
@@ -16,12 +11,11 @@ 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
-        ? -1
-        : Math.floor(parsedDate.day / 7) + 1,
+      ? -1
+      : Math.floor(parsedDate.day / 7) + 1
   );
 };
 
@@ -63,7 +57,7 @@ export const parseAndValidateRRule = ({
 
   // We need to make sure that given RRule:
   const options = RRule.parseString(
-    rrule.includes("EXDATE") ? rrule.split(";EXDATE=")[0] : rrule,
+    rrule.includes("EXDATE") ? rrule.split(";EXDATE=")[0] : rrule
   );
 
   if (
@@ -115,87 +109,3 @@ export const parseAndValidateRRule = ({
     until: options.until,
   } as ParsedRRuleOptions;
 };
-
-export const useWorkHoursValidation = (
-  byWeekDay: Weekday[] = [],
-  workHours: WorkHour[] | undefined,
-): {
-  /* @ts-expect-error 2314 */
-  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/DataFieldsSelector/DataFieldsSelector.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent } from "react";
+import React, { ChangeEvent } from "react";
 import { useId } from "@react-aria/utils";
 import { xor } from "lodash";
 import { useTranslation } from "react-i18next";

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

@@ -1,4 +1,5 @@
 import { Meta, Story } from "@storybook/react";
+import React from "react";
 import { Card } from "react-bootstrap";
 import { ReportRunnerModal, ReportRunnerModalProps } from "./ReportRunnerModal";
 

package/src/report/ReportRunnerModal/ReportRunnerModal.tsx

@@ -8,6 +8,7 @@ import {
   ReportType,
 } from "@licklist/core/dist/DataMapper/Report";
 import { capitalize } from "lodash";
+import React from "react";
 import { Button, Form, Modal } from "react-bootstrap";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -26,7 +27,7 @@ export type ReportRunnerModalProps = {
   reportId: Report["id"] | null;
   show: boolean;
   useShowReportFields: (
-    reportType?: ReportType,
+    reportType?: ReportType
   ) => CachedHttpQueryResponse<ReportField[], unknown>;
   generate?: HttpQuery<Record<string, string>[] | null>;
   download?: HttpQuery<Blob | null>;
@@ -117,7 +118,7 @@ export const ReportRunnerModal = ({
           <div className="data-fields">
             {report?.reportFieldValues.map((fieldValue) => {
               const field = reportFields?.find(
-                (field) => field.id === fieldValue.reportFieldId,
+                (field) => field.id === fieldValue.reportFieldId
               );
               if (!field) return null;
               return <span key={fieldValue.id}>{field.title}</span>;

package/src/report/ReportTypeSelect/ReportTypeSelect.tsx

@@ -1,5 +1,6 @@
 import { reportTypes } from "@licklist/core/dist/DataMapper/Report";
 import { capitalize } from "lodash";
+import React from "react";
 import { Row, Col, Form, OverlayTrigger, Popover } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";

package/src/report/card/ReportCard.stories.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Meta, Story } from "@storybook/react";
 
 import { ReportCard, ReportCardProps } from "./ReportCard";

package/src/report/card/ReportCard.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
+import React from "react";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 
 import { Icon } from "../../static";

package/src/report/form/ReportForm.stories.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { ReportForm, ReportFormProps } from "./ReportForm";
 

package/src/report/form/ReportForm.tsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import React, { useRef } from "react";
 import { Row, Col, Button, Form, Modal } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useForm } from "react-hook-form";

package/src/resource/card/ResourceCard.stories.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { ResourceCard, ResourceCardProps } from "./ResourceCard";
 

package/src/resource/card/ResourceCard.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { ZoneCard } from "../../zone/card";
 

package/src/resource/form/ResourceForm.stories.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { boolean } from "@storybook/addon-knobs";
 import { ResourceForm, ResourceFormProps } from "./ResourceForm";

package/src/resource/form/ResourceForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import { useForm, FormProvider } from "react-hook-form";
 import { Form, Row, Col, Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";

package/src/resource/form/components/CapacityControl.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";

package/src/resource/form/components/NameControl.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";

package/src/resource/form/components/SortControl.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";

package/src/resource/form/components/ZoneControl.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";

package/src/sales/booking/results/BookingResults.stories.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Meta } from "@storybook/react";
 import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
 import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";

package/src/sales/booking/results/BookingResults.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
@@ -25,7 +26,7 @@ export const BookingResults = ({
         <div className="booking-results-wrapper">
           {orders?.map((order, index) => {
             const staffMember = staffMembers?.find(
-              (staff) => staff.id === order?.orderMetadata?.created_by,
+              (staff) => staff.id === order?.orderMetadata?.created_by
             );
             return (
               <ResultCard

package/src/sales/booking/results/components/ResultCard.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { DateTime } from "luxon";
@@ -11,6 +12,7 @@ import { TIME_FORMAT } from "@licklist/core/dist/Config";
 import * as Config from "@licklist/core/dist/Config";
 import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
 import { getOrderSourceTitle } from "@licklist/plugins/dist/utils/sourceTitle";
+
 import Icon from "../../../../static/Icon";
 
 export type ResultCardProps = {
@@ -20,6 +22,8 @@ export type ResultCardProps = {
   onCardClick?: (id: number) => void;
 };
 
+// @TODO integrate when API will be available
+// activity and staff keys
 export const ResultCard = ({
   order,
   className,

package/src/sales/coupon/control/CouponFormControl.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { ProductGroup } from "@licklist/core/dist/DataMapper/Product/ProductGroupDataMapper";
 import {
   COUPON_TOTAL_TYPE_GROSS,
@@ -91,7 +91,7 @@ export const CouponFormControl = ({
     const defaultProductGroup = getValues("productGroupIds");
 
     setSelectedProductGroups(
-      convertToTypeaheadOptions(defaultProductGroup as ProductGroup[]),
+      convertToTypeaheadOptions(defaultProductGroup as ProductGroup[])
     );
   }, [getValues]);
 

package/src/sales/coupon/form/CouponForm.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, Story } from "@storybook/react";
+import React from "react";
 
 import { CouponForm, CouponFormValues, CouponFormProps } from "./CouponFrom";
 

package/src/sales/coupon/form/CouponFrom.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import {
   ProductGroup,
   ProductGroupDTO,

package/src/sales/filters/SaleFilter.stories.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { Meta, Story } from "@storybook/react";
 import { SaleFilters, SaleFiltersProps } from "./SaleFilters";
 

package/src/sales/filters/SaleFilters.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import { TextField } from "../../static/TextField";

package/src/sales/guest-profile/previous-bookings/PreviousBookings.stories.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Meta } from "@storybook/react";
 import { boolean } from "@storybook/addon-knobs";
 import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";

package/src/sales/guest-profile/previous-bookings/PreviousBookings.tsx

@@ -1,4 +1,4 @@
-import { useState, ReactNode } from "react";
+import React, { useState, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { DateTime } from "luxon";
 import { Button } from "react-bootstrap";
@@ -59,7 +59,7 @@ export const PreviousBookings = ({
                   <div className="products-wrapper">
                     {order.products.map(({ name, id }) => {
                       const orderProduct = order.orderProducts.find(
-                        (product) => product.productId === id,
+                        (product) => product.productId === id
                       );
 
                       const count = orderProduct ? orderProduct.quantity : 1;

package/src/sales/guest-profile/profile/Profile.stories.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Meta } from "@storybook/react";
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import { USER_GENDER_FEMALE } from "@licklist/core/dist/DataMapper/User/UserDetailDataMapper";