@engagebay/engagebay-form-module 1.0.0-beta.0

package/src/form/FormFields.tsx

@@ -0,0 +1,41 @@
+import React, { useContext } from "react";
+import { FormContext } from "./context/FormContext";
+import FormField from "./FormField";
+
+/**
+ * FormFields Component
+ *
+ * The FormFields component maps over a list of field names and renders
+ * corresponding FormField components based on the provided form context.
+ *
+ * @param {Object} props - The component props.
+ * @param {string[]} props.fields - An array of field names to render.
+ * @returns {JSX.Element} The rendered FormFields component.
+ */
+export default function FormFields({
+  fields,
+}: {
+  fields: string[];
+}): JSX.Element {
+  // Get context from FormContext
+  let formContext = useContext(FormContext);
+
+  return (
+    <>
+      {/* Map over the field names and render FormField components */}
+      {fields.map((fieldName, index) => {
+        // Find the field configuration from the form context
+        let fieldConfig = formContext.formFields.find((fieldInfo) => {
+          return fieldInfo.name == fieldName;
+        });
+
+        // Render the FormField component if fieldConfig is found, else render an empty fragment
+        return fieldConfig ? (
+          <FormField key={index} fieldConfig={fieldConfig} />
+        ) : (
+          <></>
+        );
+      })}
+    </>
+  );
+}

package/src/form/context/FormContext.tsx

@@ -0,0 +1,66 @@
+import { createContext } from "react";
+import {
+  Control,
+  FieldErrors,
+  UseFormClearErrors,
+  UseFormGetFieldState,
+  UseFormGetValues,
+  UseFormHandleSubmit,
+  UseFormRegister,
+  UseFormReset,
+  UseFormResetField,
+  UseFormSetError,
+  UseFormSetFocus,
+  UseFormSetValue,
+  UseFormTrigger,
+  UseFormUnregister,
+  UseFormWatch,
+} from "react-hook-form";
+import { FormFieldSchema } from "../schema/FormFieldSchema";
+
+export interface FormContextType {
+  formFields: FormFieldSchema[];
+  onSubmit?: (e?: any) => void;
+  register: UseFormRegister<any>;
+  control?: Control<any, any>;
+  setValue: UseFormSetValue<any>;
+  errors?: FieldErrors<any>;
+  getValues: UseFormGetValues<any>;
+  reset: UseFormReset<any>;
+  watch: UseFormWatch<any>;
+  // updateField: (context: any) => void
+  // getValues?: UseFormGetValues<TFieldValues>;
+  getFieldState: UseFormGetFieldState<any>;
+  setError: UseFormSetError<any>;
+  clearErrors?: UseFormClearErrors<any>;
+  // setValue: UseFormSetValue<TFieldValues>;
+  trigger: UseFormTrigger<any>;
+  // formState: FormState<TFieldValues>;
+  resetField: UseFormResetField<any>;
+  // reset: UseFormReset<TFieldValues>;
+  handleSubmit?: UseFormHandleSubmit<any, any>;
+  unregister: UseFormUnregister<any>;
+  // control: Control<TFieldValues, TContext>;
+  // register: UseFormRegister<TFieldValues>;
+  setFocus: UseFormSetFocus<any>;
+}
+
+export const FormContext = createContext({
+  formFields: [],
+  // onSubmit: (undefined) => void,
+  register: {} as UseFormRegister<{}>,
+  getValues: {} as UseFormGetValues<{}>,
+  setValue: {} as UseFormSetValue<any>,
+  watch: {} as UseFormWatch<any>,
+  reset: {} as UseFormReset<any>,
+  resetField: {} as UseFormResetField<any>,
+  getFieldState: {} as UseFormGetFieldState<any>,
+  setError: {} as UseFormSetError<any>,
+  unregister: {} as UseFormUnregister<any>,
+  // updateField: (context: any) => { },
+  // control: undefined,
+  // setValue: [],
+  setFocus: {} as UseFormSetFocus<any>,
+  trigger: {} as UseFormTrigger<any>,
+  // errors: []
+} as FormContextType);

package/src/form/formfields/ArrayField.tsx

@@ -0,0 +1,169 @@
+import { useContext, useEffect } from "react";
+import { FieldArrayMethodProps, FieldValues, useFieldArray, UseFieldArrayAppend, UseFieldArrayPrepend, UseFieldArrayRemove } from "react-hook-form";
+import FormField from "../FormField";
+import { FormContext } from "../context/FormContext";
+import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
+import React from "react";
+
+const ArrayField: React.FC<FormFieldComponentPropSchema> = ({
+    fieldConfig,
+}: FormFieldComponentPropSchema) => {
+    let {
+        formFields,
+        getFieldState,
+        getValues,
+        register,
+        reset,
+        resetField,
+        setError,
+        setFocus,
+        setValue,
+        trigger,
+        unregister,
+        watch,
+        clearErrors,
+        control,
+        errors,
+        onSubmit,
+    } = useContext(FormContext);
+    useEffect(() => {
+        if(fieldConfig.defaultValue && !getValues(fieldConfig.name)){
+            append(fieldConfig.defaultValue);
+        }
+    }, []);
+
+    const { fields, append, prepend, remove, swap, move, insert, replace } =
+        useFieldArray({
+            control: control,
+            name: fieldConfig.name,
+            rules: {
+                minLength: fieldConfig.minLength,
+                maxLength: fieldConfig.maxLength,
+                required: fieldConfig.required,
+                validate: fieldConfig.formFieldPattern
+                    ? fieldConfig?.formFieldPattern[0].getValidate()
+                    : null,
+            },
+        });
+
+    const removeField: UseFieldArrayRemove = (
+        index: number | number[] | undefined
+    ) => {
+        remove(index);
+        reset(getValues());
+
+        if (fieldConfig.submitOnChange) {
+            onSubmit && onSubmit();
+        }
+    };
+
+    const appendField: UseFieldArrayAppend<any> = (
+        value,
+        options?: FieldArrayMethodProps
+    ) => {
+        append(value, options);
+        reset(getValues());
+
+        if (fieldConfig.submitOnChange) {
+            onSubmit && onSubmit();
+        }
+    };
+
+    const prependField: UseFieldArrayPrepend<any> = (
+        value,
+        options?: FieldArrayMethodProps
+    ) => {
+        prepend(value, options);
+        reset(getValues());
+
+        if (fieldConfig.submitOnChange) {
+            onSubmit && onSubmit();
+        }
+    };
+
+    const getObjectField = (objectIndex: number) => {
+        return fieldConfig.children?.map((child) => {
+            let childConfig = { ...child };
+            childConfig.name =
+                fieldConfig.name + "." + objectIndex + "." + child.name;
+
+            return <FormField fieldConfig={childConfig}></FormField>;
+        });
+    };
+
+    const childByFieldName = (
+        objectIndex: number,
+        fieldName: string,
+        mapperType?: string
+    ) => {
+        if (!fieldConfig.children || fieldConfig.children.length == 0)
+            return null;
+
+        for (const child of fieldConfig.children) {
+            if (
+                (mapperType &&
+                    child.name == fieldName &&
+                    child.mapperType == mapperType) ||
+                (!mapperType && child.name == fieldName)
+            ) {
+                let childConfig = { ...child };
+                childConfig.name =
+                    fieldConfig.name + "." + objectIndex + "." + child.name;
+                return <FormField fieldConfig={childConfig}></FormField>;
+            }
+        }
+        return null;
+    };
+
+    const getArrayfields = () => {
+        return (
+            fields &&
+            fields.map((field, index) => {
+                return fieldConfig.arrayIndexWrapper ? (
+                    <fieldConfig.arrayIndexWrapper
+                        key={field.id}
+                        {...{
+                            append: appendField,
+                            prepend: prependField,
+                            remove: removeField,
+                            index,
+                            getValues,
+                            setValue,
+                            length: fields.length,
+                            mappedName: fieldConfig.name + "." + index,
+                            childByFieldName: (
+                                fieldName: string,
+                                mapperType?: string
+                            ) => {
+                                let field = childByFieldName(
+                                    index,
+                                    fieldName,
+                                    mapperType
+                                );
+                                return field ? field : <span></span>;
+                            },
+                        }}>
+                        {getObjectField(index)}
+                    </fieldConfig.arrayIndexWrapper>
+                ) : (
+                    <div key={field.id}>{getObjectField(index)}</div>
+                );
+            })
+        );
+    };
+
+    return fieldConfig.arrayWrapper ? (
+        <fieldConfig.arrayWrapper
+            {...{
+                append,
+                prepend,
+                remove,
+                getValues: getValues,
+            }}>
+            {getArrayfields()}
+        </fieldConfig.arrayWrapper>
+    ) : (
+        <>{getArrayfields()}</>
+    );
+};
+export default ArrayField;

package/src/form/formfields/BusinessHoursField.tsx

@@ -0,0 +1,204 @@
+import {
+    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 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 Tippy from "@tippyjs/react";
+
+
+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();
+    }, []);
+
+    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
+
+                                            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",
+                        },
+                    },
+                ],
+            }
+        }
+    ;
+
+    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 (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>
+                        </>
+                    );
+                })
+            }
+        </>
+    }
+
+    return (
+        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput}/>
+    );
+};

package/src/form/formfields/CheckboxButtonsField.tsx

@@ -0,0 +1,97 @@
+import { RegisterOptions } from "react-hook-form";
+import { useContext } from "react";
+import React from "react";
+import { FormContext } from "../context/FormContext";
+import {
+    FormFieldComponentPropSchema,
+    FormFieldPatternsImpl,
+} from "../schema/FormFieldSchema";
+import { Field, Label } from "@headlessui/react";
+import RenderFormField from "../util/RenderFormField";
+
+const CheckboxButtonField: React.FC<FormFieldComponentPropSchema> = (
+    props: FormFieldComponentPropSchema
+) => {
+    const formContext = useContext(FormContext);
+
+    let registerOptions: RegisterOptions = {
+        required: props.fieldConfig.required
+            ? FormFieldPatternsImpl.REQUIRED.getMessage()
+            : false,
+    };
+    if (props.fieldConfig?.formFieldPattern) {
+        registerOptions.pattern =
+            props.fieldConfig?.formFieldPattern[0].getPattern();
+    }
+
+    let hookProps = formContext.register(
+        props.fieldConfig.name,
+        registerOptions
+    );
+
+    const handleChange = (value: boolean) => {
+        formContext.setValue(props.fieldConfig?.name, value, {
+            shouldValidate: true,
+            shouldDirty: formContext.getFieldState(props.fieldConfig.name)
+                .isDirty,
+            shouldTouch: formContext.getFieldState(props.fieldConfig.name)
+                .isTouched,
+        });
+    };
+
+    function getInput() {
+        return props.fieldConfig.options ? (
+            props.fieldConfig.options.map((option) => {
+                return (
+                    <Field
+                        className={
+                            props.fieldConfig.customClassNames?.fieldClassName
+                                ? "checkbox-inline" +
+                                  props.fieldConfig.customClassNames
+                                      ?.fieldClassName
+                                : "checkbox-inline"
+                        }>
+                        <Label className="text-capitalize checkbox checkbox-primary">
+                            <input
+                                {...hookProps}
+                                name={props.fieldConfig.name}
+                                type="checkbox"
+                                value={option.value}
+                                data-do-not-deserialize="true"
+                            />
+                            {/* <span className="text-capitalize"> </span>{" "} */}
+                            {option.label}
+                        </Label>
+                    </Field>
+                );
+            })
+        ) : (
+            <>
+                <Field className="be-checkbox">
+                    <Label
+                        className="checkbox checkbox-primary flex"
+                        style={{ width: "fit-content" }}>
+                        <input
+                            {...hookProps}
+                            className="form-checkbox"
+                            type="checkbox"
+                            // defaultValue={props.fieldConfig.defaultValue}
+                            value={formContext.getValues(
+                                props.fieldConfig.name
+                            )}
+                            onChange={(e) => handleChange(e.target.checked)}
+                        />
+                        <Label className="form-check-label ms-1">
+                            {props.fieldConfig.label}
+                        </Label>
+                    </Label>
+                </Field>
+            </>
+        );
+    }
+    return (
+        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+    );
+};
+
+export default CheckboxButtonField;