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

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/typeahead/Typeahead.tsx

@@ -12,10 +12,13 @@ export interface TypeaheadProps {
   placeholder: string;
   isRequired?: boolean;
   name: string;
+  value?: TypeaheadOptions;
   isMultipleChoise?: boolean;
   noOptionsMessage: string;
   isInvalid?: boolean;
   isCouponForm?: boolean;
+  containerStyles?: CSSObjectWithLabel;
+  onChangeValue?: (value: TypeaheadOptions) => void;
 }
 
 function Typeahead({
@@ -24,6 +27,9 @@ function Typeahead({
   isRequired = false,
   isMultipleChoise,
   name = "",
+  value,
+  onChangeValue,
+  containerStyles,
   isCouponForm = false,
   noOptionsMessage = "",
   isInvalid,
@@ -53,15 +59,23 @@ function Typeahead({
         render={({ field }) => (
           <Select
             placeholder={placeholder}
-            value={field.value}
+            value={value ?? field.value}
             isMulti={isMultipleChoise}
             styles={{
+              container: (base) => ({
+                ...base,
+                ...containerStyles,
+              }),
               control: (base) => ({
                 ...base,
                 ...getStyle(),
               }),
             }}
             onChange={(value) => {
+              if (onChangeValue) {
+                onChangeValue(value);
+                return;
+              }
               field.onChange(value);
             }}
             options={options}

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>