@engagebay/engagebay-form-module 1.0.1 → 1.0.2-beta.1

package/link.sh

@@ -1,2 +1,2 @@
-sudo npm link ../../../reacho-frontend/node_modules/react
+sudo npm link /home/eb137/IdeaProjects/engagebay-frontend/node_modules/react
 npm link

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@engagebay/engagebay-form-module",
-    "version": "1.0.1",
+    "version": "1.0.2-beta.1",
     "description": "Provide base form components to reacho",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
@@ -26,5 +26,21 @@
         "react-redux": ">=8.0.4",
         "react-tailwindcss-datepicker": ">=1.6.6",
         "redux-saga": ">=1.3.0"
+    },
+    "devDependencies": {
+        "@headlessui/react": ">=2.1.2",
+        "@heroicons/react": ">=2.1.5",
+        "@reduxjs/toolkit": ">=2.2.7",
+        "@tippyjs/react": ">=4.2.6",
+        "@types/lodash": ">=4.17.7",
+        "@types/react-redux": ">=7.1.33",
+        "axios": ">=1.7.2",
+        "clsx": ">=2.1.1",
+        "moment": ">=2.30.1",
+        "react-hook-form": ">=7.52.1",
+        "react-popper": ">=2.3.0",
+        "react-redux": ">=8.0.4",
+        "react-tailwindcss-datepicker": ">=1.6.6",
+        "redux-saga": ">=1.3.0"
     }
 }

package/src/api/AxiosConfigProvider.tsx

@@ -0,0 +1,53 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+import { AxiosInstance } from 'axios';
+
+interface AxiosConfigContextType {
+  axiosInstance: AxiosInstance;
+  baseURL?: string;
+  timeout?: number;
+  headers?: Record<string, string>;
+}
+
+const AxiosConfigContext = createContext<AxiosConfigContextType | null>(null);
+
+interface AxiosConfigProviderProps {
+  children: ReactNode;
+  axiosInstance: AxiosInstance;
+  baseURL?: string;
+  timeout?: number;
+  headers?: Record<string, string>;
+}
+
+export const AxiosConfigProvider: React.FC<AxiosConfigProviderProps> = ({
+  children,
+  axiosInstance,
+  baseURL,
+  timeout,
+  headers,
+}) => {
+  const config: AxiosConfigContextType = {
+    axiosInstance,
+    baseURL,
+    timeout,
+    headers,
+  };
+
+  return (
+    <AxiosConfigContext.Provider value={config}>
+      {children}
+    </AxiosConfigContext.Provider>
+  );
+};
+
+export const useAxiosConfig = (): AxiosConfigContextType => {
+  const context = useContext(AxiosConfigContext);
+  if (!context) {
+    throw new Error('useAxiosConfig must be used within an AxiosConfigProvider');
+  }
+  return context;
+};
+
+// Hook for optional usage (doesn't throw error if not provided)
+export const useAxiosConfigOptional = (): AxiosConfigContextType | null => {
+  return useContext(AxiosConfigContext);
+};

package/src/api/index.ts

@@ -1,4 +1,5 @@
-import axios, { AxiosRequestConfig } from "axios";
+import axios, {AxiosInstance, AxiosRequestConfig} from "axios";
+import {FormFieldSchema} from "../form/schema/FormFieldSchema";
 
 const BASE_API: AxiosRequestConfig = {
     baseURL:
@@ -23,3 +24,16 @@ reachoAPI.interceptors.request.use(
         return Promise.reject(error);
     }
 );
+
+export const getAxiosInstance = (axiosInstance: AxiosInstance | undefined, fieldConfig: FormFieldSchema): AxiosInstance => {
+    
+    if (fieldConfig && fieldConfig.axiosInstance) {
+        return fieldConfig.axiosInstance;
+    }
+
+    if (axiosInstance) {
+        return axiosInstance;
+    }
+
+    return fieldConfig.disableHeaderInFetch ? axios : reachoAPI;
+};

package/src/form/Form.tsx

@@ -9,9 +9,11 @@ import {
     UseFormTrigger,
     UseFormUnregister,
     UseFormResetField,
+    Control,
 } from "react-hook-form";
 import { FormFieldSchema } from "./schema/FormFieldSchema";
 import { FormContext } from "./context/FormContext";
+import { AxiosInstance } from 'axios';
 
 /**
  * Props for the Form component
@@ -26,6 +28,7 @@ import { FormContext } from "./context/FormContext";
  */
 type FormPropsSchema = {
     fieldSchema: FormFieldSchema[];
+    axiosInstance?: AxiosInstance
     formData: any;
     onError?: (error: any) => void;
     onSubmit?: (data: FormData) => void;
@@ -40,6 +43,7 @@ type FormPropsSchema = {
         trigger: UseFormTrigger<any>;
         unregister: UseFormUnregister<any>;
         resetField: UseFormResetField<any>;
+        control: Control<any, any, any>;
     }) => React.ReactNode;
     customClass?: string;
 };
@@ -132,6 +136,7 @@ export default function Form(props: FormPropsSchema): JSX.Element {
                     setError,
                     setFocus,
                     unregister,
+                    axiosInstance: props.axiosInstance,
                 }}>
                 {/* Form element */}
                 <form
@@ -149,6 +154,7 @@ export default function Form(props: FormPropsSchema): JSX.Element {
                         trigger,
                         unregister,
                         resetField,
+                        control,
                     })}
                 </form>
             </FormContext.Provider>

package/src/form/context/FormContext.tsx

@@ -17,6 +17,7 @@ import {
   UseFormWatch,
 } from "react-hook-form";
 import { FormFieldSchema } from "../schema/FormFieldSchema";
+import { AxiosInstance } from "axios";
 
 export interface FormContextType {
   formFields: FormFieldSchema[];
@@ -43,6 +44,7 @@ export interface FormContextType {
   // control: Control<TFieldValues, TContext>;
   // register: UseFormRegister<TFieldValues>;
   setFocus: UseFormSetFocus<any>;
+  axiosInstance?: AxiosInstance;
 }
 
 export const FormContext = createContext({

package/src/form/formfields/BusinessHoursField.tsx

@@ -1,204 +1,316 @@
 import {
-    FieldAlignType,
-    FieldOptionsSchema,
-    FormFieldComponentPropSchema,
-    FormFieldSchema,
-    FormFieldType
+  FieldAlignType,
+  FieldOptionsSchema,
+  FormFieldComponentPropSchema,
+  FormFieldSchema,
+  FormFieldType,
 } from "../schema/FormFieldSchema";
-import React, {useCallback, useContext, useEffect, useMemo, useState} from "react";
-import {FormContext} from "../context/FormContext";
-import {RegisterOptions} from "react-hook-form";
-import {convertToTitleCase, registerFormField} from "../util";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { FormContext } from "../context/FormContext";
+import { RegisterOptions } from "react-hook-form";
+import { convertToTitleCase, registerFormField } from "../util";
 import axios from "axios";
-import {reachoAPI} from "../../api";
 import SwitchField from "./SwitchField";
 import FormField from "../FormField";
 import RenderFormField from "../util/RenderFormField";
-import {TrashIcon, XMarkIcon} from "@heroicons/react/24/outline";
+import { TrashIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import Tippy from "@tippyjs/react";
+import { set } from "lodash";
 
+const defaultBusinessHours = {
+  MONDAY: {
+    enabledDay: true,
+    sessions: [
+      {
+        startTime: "10:00",
+        endTime: "18:00",
+      },
+    ],
+  },
+  TUESDAY: {
+    enabledDay: true,
+    sessions: [
+      {
+        startTime: "10:00",
+        endTime: "18:00",
+      },
+    ],
+  },
+  WEDNESDAY: {
+    enabledDay: true,
+    sessions: [
+      {
+        startTime: "10:00",
+        endTime: "18:00",
+      },
+    ],
+  },
+  THURSDAY: {
+    enabledDay: true,
+    sessions: [
+      {
+        startTime: "10:00",
+        endTime: "18:00",
+      },
+    ],
+  },
+  FRIDAY: {
+    enabledDay: true,
+    sessions: [
+      {
+        startTime: "10:00",
+        endTime: "18:00",
+      },
+    ],
+  },
+  SATURDAY: {
+    enabledDay: false,
+    sessions: [
+      {
+        startTime: "10:00",
+        endTime: "18:00",
+      },
+    ],
+  },
+  SUNDAY: {
+    enabledDay: false,
+    sessions: [
+      {
+        startTime: "10:00",
+        endTime: "18:00",
+      },
+    ],
+  },
+};
 
-export const BusinessHoursField: React.FC<FormFieldComponentPropSchema> = (props: FormFieldComponentPropSchema) => {
-    const formContext = useContext(FormContext);
-    const [listOptions, setListOptions] = useState<any[]>([]);
-    const [loading, setLoading] = useState<boolean>(false);
-
-    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
-    const hookProps = useMemo(() => formContext.register(props.fieldConfig.name, registerOptions), [formContext, props.fieldConfig.name, registerOptions]);
-
-    useEffect(() => {
-        fetchData();
-    }, []);
+export const BusinessHoursField: React.FC<FormFieldComponentPropSchema> = (
+  props: FormFieldComponentPropSchema
+) => {
+  const formContext = useContext(FormContext);
+  const [listOptions, setListOptions] = useState<any>(defaultBusinessHours);
+  const [loading, setLoading] = useState<boolean>(false);
 
-    const getTimeConfig = (mappedName: string): FormFieldSchema => {
-            return {
-                required: true,
-                name: mappedName + ".sessions",
-                wrapper: ({children}) => {
-                    return <div style={{border: '1px sold #ddd', padding: '0px'}}>{children}</div>;
-                },
-                arrayWrapper: ({children, append,getValues}) => {
-                    return (
-                        <>
-                            <div style={{border: '1px sold #ddd',}}>
-                                {children}
-                            </div>
-                            <div className='w-full sm:w-full text-end mr-[2.3em]'>
-                                <button type='button' className={`text-end text-primary cursor-pointer font-[13px] font-medium ${getValues(`${mappedName}.sessions`)?.length > 1 ? "mr-9" : ''}`}
-                                        onClick={() => {
-                                            const lastEndTime = getValues(`${mappedName}.sessions`)?.[getValues(`${mappedName}.sessions`).length - 1]?.endTime || '08:30';
+  let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+  const hookProps = useMemo(
+    () => formContext.register(props.fieldConfig.name, registerOptions),
+    [formContext, props.fieldConfig.name, registerOptions]
+  );
 
-                                            const newStartTime = lastEndTime; // Start new session at last session's end time
-                                            const newEndTime = "23:00"; // Calculate end time, but cap at 23:00
+  useEffect(() => {
+    fetchData();
+  }, []);
 
-                                            append({
-                                                startTime: newStartTime,
-                                                endTime: newEndTime,
-                                            });
-                                        }}
-                                >
-                                    + Add
-                                </button>
-                            </div>
-                        </>
-                    );
-                },
-                arrayIndexWrapper: ({
-                                        mappedName,
-                                        getValues,
-                                        children,
-                                        childByFieldName,
-                                        append,
-                                        prepend,
-                                        remove,
-                                        index
-                                    }) => {
-                    return (
-                        <div className="flex items-center  gap-4 form-group !mb-2">
-                            <div>{childByFieldName('startTime')}</div>
-                            <p>To</p>
-                            <div>{childByFieldName('endTime')}</div>
-                            {index > 0 ?
-                                <button
-                                    className="Button__StyledButton-sc-1l1v2a6-0 gVdTUT"
-                                    type="button"
-                                    onClick={() => {
-                                        remove(index);
-                                    }}
-                                >
-                                    {/* <TrashIcon height={18} width={18} className=""/> */}
-                                    <Tippy content="Delete">
-                                    <XMarkIcon aria-hidden="true" height={18} width={18} className="" />
-  </Tippy>
-                                    
-                                </button> : <></>}
-                        </div>
+  const getTimeConfig = (mappedName: string): FormFieldSchema => {
+    return {
+      required: true,
+      name: mappedName + ".sessions",
+      wrapper: ({ children }) => {
+        return (
+          <div style={{ border: "1px sold #ddd", padding: "0px" }}>
+            {children}
+          </div>
+        );
+      },
+      arrayWrapper: ({ children, append, getValues }) => {
+        return (
+          <>
+            <div style={{ border: "1px sold #ddd" }}>{children}</div>
+            <div className="w-full sm:w-full text-end mr-[2.3em]">
+              <button
+                type="button"
+                className={`text-end text-primary cursor-pointer font-[13px] font-medium ${
+                  getValues(`${mappedName}.sessions`)?.length > 1 ? "mr-9" : ""
+                }`}
+                onClick={() => {
+                  const lastEndTime =
+                    getValues(`${mappedName}.sessions`)?.[
+                      getValues(`${mappedName}.sessions`).length - 1
+                    ]?.endTime || "08:30";
 
-                    );
-                },
-                formFieldType: FormFieldType.ARRAY,
-                align: FieldAlignType.HORIZONTAL,
-                disableDefaultWrapper: true,
-                defaultValue: {
-                    startTime: "08:30",
-                    endTime: "18:00"
-                },
-                children: [
-                    {
-                        required: false,
-                        formFieldType: FormFieldType.TIME,
-                        name: "startTime",
-                        disableDefaultWrapper:true,
-                        defaultValue: "08:30",
-                        customClassNames: {
-                            fieldClassName: "border-none bg-blue-100",
-                        },
-                    }, {
-                        required: false,
-                        formFieldType: FormFieldType.TIME,
-                        name: "endTime",
-                        disableDefaultWrapper: true,
-                        defaultValue: "18:00",
-                        customClassNames: {
-                            fieldClassName: "border-none bg-blue-100",
-                        },
-                    },
-                ],
-            }
-        }
-    ;
+                  const newStartTime = lastEndTime; // Start new session at last session's end time
+                  const newEndTime = "23:00"; // Calculate end time, but cap at 23:00
 
-    const fetchData = useCallback(async () => {
-            setLoading(true);
-            // if (!props.fieldConfig.fetchUrl) return;
-            let url = "/api/core/user-prefs/get-default-business-days";
-            if (props.fieldConfig.fetchUrl) {
-                url = props.fieldConfig.fetchUrl;
-            }
-            try {
-                let response = await (props.fieldConfig.disableHeaderInFetch
-                    ? axios.get(url)
-                    : reachoAPI.get(url));
+                  append({
+                    startTime: newStartTime,
+                    endTime: newEndTime,
+                  });
+                }}
+              >
+                + Add
+              </button>
+            </div>
+          </>
+        );
+      },
+      arrayIndexWrapper: ({
+        mappedName,
+        getValues,
+        children,
+        childByFieldName,
+        append,
+        prepend,
+        remove,
+        index,
+      }) => {
+        return (
+          <div className="flex items-center  gap-4 form-group !mb-2">
+            <div>{childByFieldName("startTime")}</div>
+            <p>To</p>
+            <div>{childByFieldName("endTime")}</div>
+            {index > 0 ? (
+              <button
+                className="Button__StyledButton-sc-1l1v2a6-0 gVdTUT"
+                type="button"
+                onClick={() => {
+                  remove(index);
+                }}
+              >
+                {/* <TrashIcon height={18} width={18} className=""/> */}
+                <Tippy content="Delete">
+                  <XMarkIcon
+                    aria-hidden="true"
+                    height={18}
+                    width={18}
+                    className=""
+                  />
+                </Tippy>
+              </button>
+            ) : (
+              <></>
+            )}
+          </div>
+        );
+      },
+      formFieldType: FormFieldType.ARRAY,
+      align: FieldAlignType.HORIZONTAL,
+      disableDefaultWrapper: true,
+      defaultValue: {
+        startTime: "08:30",
+        endTime: "18:00",
+      },
+      children: [
+        {
+          required: false,
+          formFieldType: FormFieldType.TIME,
+          name: "startTime",
+          disableDefaultWrapper: true,
+          defaultValue: "08:30",
+          customClassNames: {
+            fieldClassName: "border-none bg-blue-100",
+          },
+        },
+        {
+          required: false,
+          formFieldType: FormFieldType.TIME,
+          name: "endTime",
+          disableDefaultWrapper: true,
+          defaultValue: "18:00",
+          customClassNames: {
+            fieldClassName: "border-none bg-blue-100",
+          },
+        },
+      ],
+    };
+  };
 
-                if (response.data) {
-                    const data: FieldOptionsSchema[] = response.data;
-                    setListOptions(data);
-                    setLoading(false);
+  const timeConfigs = useMemo(() => {
+    const configs: Record<string, FormFieldSchema> = {};
+    Object.keys(listOptions || {}).forEach((day) => {
+      configs[day] = getTimeConfig(props.fieldConfig.name + "." + day);
+    });
+    return configs;
+  }, [props.fieldConfig.name, listOptions]);
 
-                    if (props.fieldConfig.fetchCallback) {
-                        props.fieldConfig.fetchCallback(response);
-                    }
-                } else {
-                    console.error(response.statusText);
-                    setLoading(false);
-                }
-            } catch (error) {
-                console.error('Fetch error:', error);
-                setLoading(false);
-            }
-        },
-        [props.fieldConfig.fetchUrl, props.fieldConfig.optionsConfig, props.fieldConfig.fetchCallback, props.fieldConfig.disableHeaderInFetch]
-    );
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    // if (!props.fieldConfig.fetchUrl) return;
+    let url = "/api/core/user-prefs/get-default-business-days";
+    if (props.fieldConfig.fetchUrl) {
+      url = props.fieldConfig.fetchUrl;
+    }
+    try {
+      let response = await (props.fieldConfig.disableHeaderInFetch
+        ? axios.get(url)
+        : formContext.axiosInstance?.get(url));
 
-    function getInput() {
-        return <>
-            {loading?<></>:
-                listOptions && Object.keys(listOptions).map((day) => {
-                    const dayInfo = listOptions[day as any];
-                    return (
-                        <>
-                            <div className="flex baseline mb-6" data-testid="" key={day}>
-                                <div className="max-w-sm space-y-2">
-                                    <div
-                                        className="group flex items-center w-full  gap-x-2 text-sm font-normal leading-none text-gray-700 mt-3">
-                                        <SwitchField fieldConfig={{
-                                            name: props.fieldConfig.name + "." + day + ".enabledDay",
-                                            defaultValue: dayInfo.enabledDay,
-                                            required: false,
-                                            formFieldType: FormFieldType.SWITCH,
-                                            disableDefaultWrapper: true,
-                                            customClassNames: {
-                                                fieldClassName: "!mb-0",
-                                            },
-                                        }}/>
-                                        <p className="flex justify-between border-gray-900 text-sm  text-gray-900 font-medium ml-2 w-24 leading-none">
-                                            <span className="w-full">{convertToTitleCase(day)}</span>
-                                        </p>
-                                    </div>
-                                </div>
+      if (response?.data) {
+        const data: FieldOptionsSchema[] = response.data;
+        setListOptions(data);
+        setLoading(false);
 
-                                <div className=" flex items-center text-gray-500 focus-within:text-blue-500">
-                                    <FormField fieldConfig={getTimeConfig(props.fieldConfig.name + "." + day)}/>
-                                </div>
-                            </div>
-                        </>
-                    );
-                })
-            }
-        </>
+        if (props.fieldConfig.fetchCallback) {
+          props.fieldConfig.fetchCallback(response);
+        }
+      } else {
+        setListOptions(defaultBusinessHours);
+        console.error(response?.statusText);
+        setLoading(false);
+      }
+    } catch (error) {
+      console.error("Fetch error:", error);
+      setLoading(false);
     }
+  }, [
+    props.fieldConfig.fetchUrl,
+    props.fieldConfig.optionsConfig,
+    props.fieldConfig.fetchCallback,
+    props.fieldConfig.disableHeaderInFetch,
+  ]);
 
+  function getInput() {
     return (
-        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput}/>
+      <>
+        {loading ? (
+          <></>
+        ) : (
+          listOptions &&
+          Object.keys(listOptions).map((day) => {
+            const dayInfo = listOptions[day as any];
+            return (
+              <>
+                <div className="flex baseline mb-6" data-testid="" key={day}>
+                  <div className="max-w-sm space-y-2">
+                    <div className="group flex items-center w-full  gap-x-2 text-sm font-normal leading-none text-gray-700 mt-3">
+                      <SwitchField
+                        fieldConfig={{
+                          name:
+                            props.fieldConfig.name + "." + day + ".enabledDay",
+                          defaultValue: dayInfo.enabledDay,
+                          required: false,
+                          formFieldType: FormFieldType.SWITCH,
+                          disableDefaultWrapper: true,
+                          customClassNames: {
+                            fieldClassName: "!mb-0",
+                          },
+                        }}
+                      />
+                      <p className="flex justify-between border-gray-900 text-sm  text-gray-900 font-medium ml-2 w-24 leading-none">
+                        <span className="w-full">
+                          {convertToTitleCase(day)}
+                        </span>
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className=" flex items-center text-gray-500 focus-within:text-blue-500">
+                    <FormField fieldConfig={timeConfigs[day]} />
+                  </div>
+                </div>
+              </>
+            );
+          })
+        )}
+      </>
     );
+  }
+
+  return (
+    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+  );
 };