@engagebay/engagebay-form-module 1.0.0-beta.3-8 → 1.0.0

package/link.sh

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@engagebay/engagebay-form-module",
-    "version": "1.0.0-beta.3-8",
+    "version": "1.0.0",
     "description": "Provide base form components to reacho",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
@@ -26,21 +26,5 @@
         "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/index.ts

@@ -1,5 +1,4 @@
-import axios, {AxiosInstance, AxiosRequestConfig} from "axios";
-import {FormFieldSchema} from "../form/schema/FormFieldSchema";
+import axios, { AxiosRequestConfig } from "axios";
 
 const BASE_API: AxiosRequestConfig = {
     baseURL:
@@ -24,16 +23,3 @@ 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,11 +9,9 @@ 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
@@ -28,7 +26,6 @@ import { AxiosInstance } from 'axios';
  */
 type FormPropsSchema = {
     fieldSchema: FormFieldSchema[];
-    axiosInstance?: AxiosInstance
     formData: any;
     onError?: (error: any) => void;
     onSubmit?: (data: FormData) => void;
@@ -43,7 +40,6 @@ type FormPropsSchema = {
         trigger: UseFormTrigger<any>;
         unregister: UseFormUnregister<any>;
         resetField: UseFormResetField<any>;
-        control: Control<any, any, any>;
     }) => React.ReactNode;
     customClass?: string;
 };
@@ -136,7 +132,6 @@ export default function Form(props: FormPropsSchema): JSX.Element {
                     setError,
                     setFocus,
                     unregister,
-                    axiosInstance: props.axiosInstance,
                 }}>
                 {/* Form element */}
                 <form
@@ -154,7 +149,6 @@ export default function Form(props: FormPropsSchema): JSX.Element {
                         trigger,
                         unregister,
                         resetField,
-                        control,
                     })}
                 </form>
             </FormContext.Provider>

package/src/form/context/FormContext.tsx

@@ -17,7 +17,6 @@ import {
   UseFormWatch,
 } from "react-hook-form";
 import { FormFieldSchema } from "../schema/FormFieldSchema";
-import { AxiosInstance } from "axios";
 
 export interface FormContextType {
   formFields: FormFieldSchema[];
@@ -44,7 +43,6 @@ 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,316 +1,204 @@
 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>(defaultBusinessHours);
-  const [loading, setLoading] = useState<boolean>(false);
+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]
-  );
+    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+    const hookProps = useMemo(() => formContext.register(props.fieldConfig.name, registerOptions), [formContext, props.fieldConfig.name, registerOptions]);
 
-  useEffect(() => {
-    fetchData();
-  }, []);
+    useEffect(() => {
+        fetchData();
+    }, []);
 
-  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";
+    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';
 
-                  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 newStartTime = lastEndTime; // Start new session at last session's end time
+                                            const newEndTime = "23:00"; // Calculate end time, but cap at 23:00
 
-                  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",
-          },
-        },
-      ],
-    };
-  };
+                                            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 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]);
+                    );
+                },
+                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 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));
+    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));
 
-      if (response?.data) {
-        const data: FieldOptionsSchema[] = response.data;
-        setListOptions(data);
-        setLoading(false);
+                if (response.data) {
+                    const data: FieldOptionsSchema[] = response.data;
+                    setListOptions(data);
+                    setLoading(false);
 
-        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);
+                    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]
+    );
+
+    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>
+
+                                <div className=" flex items-center text-gray-500 focus-within:text-blue-500">
+                                    <FormField fieldConfig={getTimeConfig(props.fieldConfig.name + "." + day)}/>
+                                </div>
+                            </div>
+                        </>
+                    );
+                })
+            }
+        </>
     }
-  }, [
-    props.fieldConfig.fetchUrl,
-    props.fieldConfig.optionsConfig,
-    props.fieldConfig.fetchCallback,
-    props.fieldConfig.disableHeaderInFetch,
-  ]);
 
-  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>
-
-                  <div className=" flex items-center text-gray-500 focus-within:text-blue-500">
-                    <FormField fieldConfig={timeConfigs[day]} />
-                  </div>
-                </div>
-              </>
-            );
-          })
-        )}
-      </>
+        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput}/>
     );
-  }
-
-  return (
-    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
-  );
 };