@licklist/design 0.67.3 → 0.67.4-dev.0

package/src/tiptap-editor/TipTapEditor.stories.tsx

@@ -21,6 +21,7 @@ export const Disabled: Story<TipTapEditorProps> = (args) => (
   <TipTapEditor {...args} />
 );
 
+
 const content = `
   <h2>
     Hi there,
@@ -53,23 +54,24 @@ Default.args = {
   viewMode: false,
   content,
   withEmoji: false,
-};
+}
 
 WithEmoji.args = {
   viewMode: false,
   content,
   withEmoji: true,
-};
+}
 
 ViewMode.args = {
   viewMode: true,
   content,
   withEmoji: true,
-};
+}
 
 Disabled.args = {
   viewMode: false,
   content,
   withEmoji: true,
   disabled: true,
-};
+}
+

package/src/tiptap-editor/TipTapMenu/TipTapMenu.stories.tsx

@@ -13,6 +13,7 @@ export default {
   component: TipTapMenu,
 } as Meta;
 
+
 export const Default = () => {
   const editor = useEditor({
     extensions: [
@@ -25,7 +26,9 @@ export const Default = () => {
       EmojiReplacer,
     ],
     content: "",
-  });
+  })
 
-  return <TipTapMenu withEmoji editor={editor} />;
+  return (
+    <TipTapMenu withEmoji editor={editor} />
+  );
 };

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

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

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

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

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

@@ -25,12 +25,15 @@ export interface DateAndRecurrenceInputValues {
   zoneRecurrences?: Partial<ZoneRecurrence>[];
 }
 
-export type ZoneRecurrenceControlProps = {
-  workHours?: WorkHour[];
-  isLoading?: boolean;
+type ZoneRecurrenceControlProps = {
+  workHours: WorkHour[] | undefined;
+  timeZone: string;
 };
 
-export const ZoneRecurrencesControl = () => {
+export const ZoneRecurrencesControl = ({
+  workHours,
+  timeZone,
+}: ZoneRecurrenceControlProps) => {
   const {
     control,
     register,
@@ -69,7 +72,7 @@ export const ZoneRecurrencesControl = () => {
     clearEditState();
   });
 
-  const popoverId = useId()!;
+  const popoverId = useId();
 
   const { t } = useTranslation(["Design", "Validation"]);
 
@@ -166,6 +169,8 @@ export const ZoneRecurrencesControl = () => {
                 onChange={handleRecurringDateChange}
                 onDelete={handleDelete}
                 setInitialStartDateAfterSelect
+                workHours={workHours}
+                timeZone={timeZone}
               />
             </Popover.Content>
           </Popover>

package/src/zone/form/utils/dates.ts

@@ -53,18 +53,17 @@ export const getCheckboxesByWorkHours = (workHours?: WorkHour[]) => {
   if (!workHours || !workHours.length)
     return getTimeCheckboxRanges(DEFAULT_START_DAY_TIME, DEFAULT_END_DAY_TIME);
 
-  const providerWorkHoursByWeek = workHours.reduce(
-    (workHoursNextArray: { start: string; end: string }[], currentWorkHour) => {
-      const { start, end } = currentWorkHour;
+  const providerWorkHoursByWeek = workHours.reduce<
+    { start: string; end: string }[]
+  >((workHoursNextArray, currentWorkHour) => {
+    const { start, end } = currentWorkHour;
 
-      if (start && end) {
-        return [...workHoursNextArray, { start, end }];
-      }
+    if (start && end) {
+      return [...workHoursNextArray, { start, end }];
+    }
 
-      return workHoursNextArray;
-    },
-    [],
-  );
+    return workHoursNextArray;
+  }, []);
 
   // If venue has filled only 1 work day from wee
   // For another days we use default 00:00 and 23:59