@licklist/design 0.67.3-dev.0 → 0.67.3-dev.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.67.3-dev.0",
+  "version": "0.67.3-dev.1",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,7 +42,7 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.29.1-dev.2",
+    "@licklist/core": "0.29.1-dev.3",
     "@licklist/eslint-config": "0.5.5",
     "@licklist/plugins": "0.32.0-dev.3",
     "lodash": "4.17.21",
@@ -61,7 +61,7 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.29.1-dev.2",
+    "@licklist/core": "0.29.1-dev.3",
     "@licklist/eslint-config": "0.5.5",
     "@licklist/plugins": "0.32.0-dev.3",
     "@mdx-js/react": "1.6.22",

package/src/events/edit-event-modal/component/EditEventForm/EditEventForm.tsx

@@ -64,6 +64,7 @@ export interface EditEventFormProps extends HasPermissionProp {
   createProductSet: (props: EditEventFormValues) => void;
   setEditProductSetId: (value: string) => void;
   isExternalPaymentLinkEnabled?: boolean;
+  timeZone: string;
 }
 
 const eventImageTypes = {
@@ -83,6 +84,7 @@ export const EditEventForm = ({
   createProductSet,
   setEditProductSetId,
   isExternalPaymentLinkEnabled,
+  timeZone,
 }: EditEventFormProps) => {
   const { t } = useTranslation(["Design", "Validation"]);
 
@@ -405,6 +407,7 @@ export const EditEventForm = ({
             setShowEditProductSet={setShowEditProductSet}
             showEditProductSet={showEditProductSet}
             occurrenceStartAtDate={occurrenceStartAtDate}
+            timeZone={timeZone}
           />
 
           {hasPermission && !showEditProductSet && (

package/src/events/edit-event-modal/component/SelectEventProductSet/SelectEventProductSet.tsx

@@ -16,6 +16,7 @@ interface SelectEventProductSetProps extends HasPermissionProp {
   createProductSet: (props: EditEventFormValues) => void;
   setEditProductSetId: (value: string) => void;
   occurrenceStartAtDate: string;
+  timeZone: string;
 }
 
 export const SelectEventProductSet = ({
@@ -25,6 +26,7 @@ export const SelectEventProductSet = ({
   showEditProductSet,
   setShowEditProductSet,
   occurrenceStartAtDate,
+  timeZone,
 }: SelectEventProductSetProps) => {
   const { t } = useTranslation(["Design"]);
   const form = useFormContext<EditEventFormValues>();
@@ -215,6 +217,7 @@ export const SelectEventProductSet = ({
           defaultValues={
             productSetId === editedProductSet?.id && editedProductSet
           }
+          timeZone={timeZone}
         />
       )}
     </>

package/src/events/edit-event-modal/component/SelectEventProductSet/component/EditEventProductSet.tsx

@@ -23,12 +23,14 @@ interface EditEventProductSetProps {
   onSubmit: (value: EditEventFormValues["editedProductSet"]) => void;
   defaultValues?: EditEventFormValues["editedProductSet"];
   occurrenceStartAtDate: string;
+  timeZone: string;
 }
 
 export const EditEventProductSet = ({
   onSubmit,
   defaultValues,
   occurrenceStartAtDate,
+  timeZone,
 }: EditEventProductSetProps) => {
   const { companyId } = useParams<{
     companyId: string;
@@ -129,6 +131,7 @@ export const EditEventProductSet = ({
             isOverrides
             occurrenceStartAtDate={occurrenceStartAtDate}
             workHours={undefined}
+            timeZone={timeZone}
           />
           <Button
             disabled={isLoading}

package/src/product-set/control/DateAndRecurrenceInput.tsx

@@ -37,6 +37,7 @@ interface DateAndRecurrenceInputProps {
   workHours: WorkHour[] | undefined;
   providerHasBookingManagement: boolean;
   isLoading?: boolean;
+  timeZone: string;
 }
 
 export const DateAndRecurrenceInput = ({
@@ -44,6 +45,7 @@ export const DateAndRecurrenceInput = ({
   providerHasBookingManagement,
   workHours,
   isLoading,
+  timeZone,
 }: DateAndRecurrenceInputProps) => {
   const {
     control,
@@ -227,6 +229,7 @@ export const DateAndRecurrenceInput = ({
                 onChange={handleRecurringDateChange}
                 onDelete={handleDelete}
                 workHours={workHours}
+                timeZone={timeZone}
               >
                 {providerHasBookingManagement && (
                   <AvailableTimesControl

package/src/product-set/control/ProductSetControl.tsx

@@ -93,6 +93,7 @@ export interface ProductSetControlProps {
   isOverrides?: boolean;
   occurrenceStartAtDate?: string;
   isCreateNewOverrides?: boolean;
+  timeZone: string;
 }
 
 export function ProductSetControl({
@@ -111,6 +112,7 @@ export function ProductSetControl({
   isOverrides = false,
   occurrenceStartAtDate,
   isCreateNewOverrides = false,
+  timeZone,
 }: ProductSetControlProps) {
   const { t } = useTranslation(["Design", "Validation", "Notification"]);
   const {
@@ -143,6 +145,7 @@ export function ProductSetControl({
     const eventStartDate = DateTime.fromISO(occurrenceStartAtDate);
     const eventStart = eventStartDate.toFormat(DATE_MONTH_LOCALE_FORMAT);
     setValue("name", `${productSetName} (${eventStart})`);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [setValue, occurrenceStartAtDate]);
 
   return (
@@ -200,6 +203,7 @@ export function ProductSetControl({
                 workHours={isZoneAdded ? workHours : undefined}
                 isLoading={isLoading}
                 providerHasBookingManagement={providerHasBookingManagement}
+                timeZone={timeZone}
               />
             )}
           </>

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

@@ -59,6 +59,7 @@ export interface ProductSetFormProps
   isOverrides?: boolean;
   workHours?: WorkHour[];
   isCreateNewOverrides?: boolean;
+  timeZone: string;
 }
 
 export function ProductSetForm({
@@ -77,6 +78,7 @@ export function ProductSetForm({
   workHours,
   isOverrides,
   isCreateNewOverrides,
+  timeZone,
   ...shared
 }: ProductSetFormProps) {
   const { t } = useTranslation("Design");
@@ -194,6 +196,7 @@ export function ProductSetForm({
                     providerHasBookingManagement={providerHasBookingManagement}
                     isOverrides={isOverrides}
                     isCreateNewOverrides={isCreateNewOverrides}
+                    timeZone={timeZone}
                   />
                   <Row>
                     <Col md={6} sm={12} />

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

@@ -8,12 +8,8 @@ import {
   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 { TIME_FORMAT } from "@licklist/core/dist/Config";
+import { fromIso } from "@licklist/core/dist/Services";
 import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
 
 interface RecurrenceIntervalAndFrequencyInputProps {
@@ -31,17 +27,9 @@ 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,
@@ -51,6 +39,7 @@ function RecurrenceIntervalAndFrequencyInput({
   endTimeLabel,
   startTimeRules,
   endTimeRules,
+  timeZone,
 }: RecurrenceIntervalAndFrequencyInputProps) {
   const { t } = useTranslation(["Design", "Notification", "App"]);
 
@@ -66,10 +55,10 @@ function RecurrenceIntervalAndFrequencyInput({
 
   const _startTime = useWatch({ control, name: "startTime" });
   const startTime =
-    _startTime && fromTimeFormats(_startTime).toFormat(TIME_FORMAT);
+    _startTime && fromIso(_startTime, timeZone).toFormat(TIME_FORMAT);
 
   const _endTime = useWatch({ control, name: "endTime" });
-  const endTime = _endTime && fromTimeFormats(_endTime).toFormat(TIME_FORMAT);
+  const endTime = _endTime && fromIso(_endTime, timeZone).toFormat(TIME_FORMAT);
 
   useEffect(() => {
     if (!startDate || !endDate) {
@@ -119,11 +108,8 @@ function RecurrenceIntervalAndFrequencyInput({
                   if (!startDate || !date) {
                     return true;
                   }
-                  const currentStartDate = DateTime.fromFormat(
-                    startDate,
-                    DATE_FORMAT,
-                  );
-                  const currentEndDate = DateTime.fromFormat(date, DATE_FORMAT);
+                  const currentStartDate = fromIso(startDate, timeZone);
+                  const currentEndDate = fromIso(date, timeZone);
                   return currentEndDate.diff(currentStartDate, ["days"]).days >=
                     0
                     ? true

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 } from "luxon";
+import { DateTime, Interval, WeekdayNumbers } from "luxon";
 import { useIntl } from "react-intl";
 import {
   DATE_TIME_FORMAT,
@@ -32,6 +32,7 @@ export interface RecurringDatePickerInputProps {
   setInitialStartDateAfterSelect?: boolean;
   minDate?: string;
   workHours: WorkHour[] | undefined;
+  timeZone: string;
 }
 
 export interface RecurringDatePickerInputValues {
@@ -58,6 +59,7 @@ export function RecurringDatePickerInput({
   children,
   minDate,
   workHours,
+  timeZone,
 }: PropsWithChildren<RecurringDatePickerInputProps>) {
   const { t } = useTranslation(["Design"]);
 
@@ -91,7 +93,7 @@ export function RecurringDatePickerInput({
     byWeekDay,
   });
 
-  const validator = useWorkHoursValidation(byWeekDay, workHours);
+  const validator = useWorkHoursValidation(byWeekDay, workHours, timeZone);
 
   const onSubmit = (nextState: RecurringDatePickerInputValues) => {
     const end = getDateTimeObject(endDate, endTime || "23:59:59");
@@ -158,7 +160,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;
+    const currentWeekDay = (byWeekDay[0]?.weekday + 1) as WeekdayNumbers;
 
     const currentDate = DateTime.local();
 
@@ -199,6 +201,7 @@ export function RecurringDatePickerInput({
           minDate={minDate}
           startTimeRules={validator}
           endTimeRules={validator}
+          timeZone={timeZone}
         />
 
         {children}

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

@@ -1,6 +1,5 @@
-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 { fromIso } from "@licklist/core/dist/Services";
 import { DateTime, Interval } from "luxon";
 import { Validate } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -119,6 +118,7 @@ export const parseAndValidateRRule = ({
 export const useWorkHoursValidation = (
   byWeekDay: Weekday[] = [],
   workHours: WorkHour[] | undefined,
+  timeZone: string,
 ): {
   /* @ts-expect-error 2314 */
   validate?: Validate<string>;
@@ -126,15 +126,12 @@ export const useWorkHoursValidation = (
   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);
+    const startTime = fromIso(workhour.start, timeZone);
+    const endTime = fromIso(workhour.end, timeZone);
 
     if (endTime > startTime) {
       res.push(Interval.fromDateTimes(startTime, endTime));
@@ -146,8 +143,8 @@ export const useWorkHoursValidation = (
 
     const prevIndex = index === 0 ? self.length - 1 : index - 1;
 
-    const prevStartTime = fromTimeFormat(self[prevIndex].start);
-    const prevEndTime = fromTimeFormat(self[prevIndex].end);
+    const prevStartTime = fromIso(self[prevIndex].start, timeZone);
+    const prevEndTime = fromIso(self[prevIndex].end, timeZone);
 
     // 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
@@ -169,9 +166,7 @@ export const useWorkHoursValidation = (
     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 time = fromIso(_time, timeZone);
 
       const notFittingIntervalsByDay = intervalsByDay.reduce<Interval[][]>(
         (acc, intervalsByDay) => {

package/src/zone/form/ZoneForm.tsx

@@ -14,6 +14,7 @@ export type ZoneFormProps = {
   serverErrors?: ServerError;
   isLoading?: boolean;
   workHours: WorkHour[] | undefined;
+  timeZone: string;
 };
 
 export type ZoneFormValues = Partial<Zone> & {
@@ -26,6 +27,7 @@ export const ZoneForm = ({
   serverErrors,
   isLoading = false,
   workHours,
+  timeZone,
 }: ZoneFormProps) => {
   const { t } = useTranslation("Design");
   const form = useForm<ZoneFormValues>({
@@ -55,7 +57,11 @@ export const ZoneForm = ({
   return (
     <FormProvider {...form}>
       <Form onSubmit={handleSubmit(onFormSubmit)}>
-        <ZoneControl isLoading={isLoading} workHours={workHours} />
+        <ZoneControl
+          isLoading={isLoading}
+          workHours={workHours}
+          timeZone={timeZone}
+        />
         <Row>
           <Col md={6} sm={12} />
           <Col

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

@@ -11,14 +11,19 @@ import { GameDurationControl } from "./GameDurationControl";
 export type ZoneControlProps = {
   isLoading: boolean;
   workHours: WorkHour[] | undefined;
+  timeZone: string;
 };
 
-export const ZoneControl = ({ isLoading, workHours }: ZoneControlProps) => {
+export const ZoneControl = ({
+  isLoading,
+  workHours,
+  timeZone,
+}: ZoneControlProps) => {
   return (
     <Row>
       <Col md={6} sm={12} className="pr-5">
         <NameControl isLoading={isLoading} />
-        <ZoneRecurrencesControl workHours={workHours} />
+        <ZoneRecurrencesControl workHours={workHours} timeZone={timeZone} />
         <hr />
         <Row>
           <Col md={6} sm={6}>

package/src/zone/form/components/ZoneRecurrencesControl.tsx

@@ -27,10 +27,12 @@ export interface DateAndRecurrenceInputValues {
 
 type ZoneRecurrenceControlProps = {
   workHours: WorkHour[] | undefined;
+  timeZone: string;
 };
 
 export const ZoneRecurrencesControl = ({
   workHours,
+  timeZone,
 }: ZoneRecurrenceControlProps) => {
   const {
     control,
@@ -168,6 +170,7 @@ export const ZoneRecurrencesControl = ({
                 onDelete={handleDelete}
                 setInitialStartDateAfterSelect
                 workHours={workHours}
+                timeZone={timeZone}
               />
             </Popover.Content>
           </Popover>