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

package/src/form/formfields/TypeaheadMultiSelect.tsx

@@ -1,9 +1,9 @@
 import React, {
-    useCallback,
-    useContext,
-    useEffect,
-    useRef,
-    useState,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
 } from "react";
 
 import { Listbox, ListboxButton } from "@headlessui/react";
@@ -12,192 +12,206 @@ import { RegisterOptions } from "react-hook-form";
 import { FormContext } from "../context/FormContext";
 import { getListOption, getListOptions } from "../FormFieldUtils";
 import {
-    FieldOptionsSchema,
-    FormFieldComponentPropSchema,
-    FormFieldType,
+  FieldOptionsSchema,
+  FormFieldComponentPropSchema,
+  FormFieldType,
 } from "../schema/FormFieldSchema";
 import { handleChange, registerFormField } from "../util";
 import RenderFormField from "../util/RenderFormField";
 import RenderListOptions, {
-    renderListBoxValue,
+  renderListBoxValue,
 } from "../util/RenderListOptions";
 // import _ from "lodash";
 import axios from "axios";
-import { reachoAPI } from "../../api";
+import { getAxiosInstance } from "src/api";
 
 const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
-    props: FormFieldComponentPropSchema
+  props: FormFieldComponentPropSchema,
 ) => {
-    const dynamicSelectRef = useRef<HTMLUListElement>(null);
-    const formContext = useContext(FormContext);
-    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
-    let hookProps = formContext.register(
+  const dynamicSelectRef = useRef<HTMLUListElement>(null);
+  const formContext = useContext(FormContext);
+  let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+  let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
+  const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>([]);
+  const [selectedValues, setSelectedValues] = useState<FieldOptionsSchema[]>(
+    [],
+  );
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    if (
+      !formContext.getValues(props.fieldConfig.name) &&
+      props.fieldConfig.defaultValue
+    ) {
+      formContext.setValue(
         props.fieldConfig.name,
-        registerOptions
-    );
-    const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>([]);
-    const [selectedValues, setSelectedValues] = useState<FieldOptionsSchema[]>(
-        []
-    );
-    const [loading, setLoading] = useState<boolean>(true);
-
-    useEffect(() => {
-        if (
-            !formContext.getValues(props.fieldConfig.name) &&
-            props.fieldConfig.defaultValue
-        ) {
-            formContext.setValue(
-                props.fieldConfig.name,
-                props.fieldConfig.defaultValue
-            );
+        props.fieldConfig.defaultValue,
+      );
+    }
+    fetchData(undefined);
+  }, []);
+
+  const fetchData = useCallback(
+    async (_query: string | undefined) => {
+      setLoading(true);
+      try {
+        if (!props.fieldConfig.fetchUrl) return;
+
+        let url = props.fieldConfig.fetchUrl;
+        if (_query) {
+          url = url.includes("?") ? url + "&q=" + _query : url + "?q=" + _query;
         }
-        fetchData(undefined);
-    }, []);
-
-    const fetchData = useCallback(
-        async (_query: string | undefined) => {
-            setLoading(true);
-            try {
-                if (!props.fieldConfig.fetchUrl) return;
-
-                let url = props.fieldConfig.fetchUrl;
-                if (_query) {
-                    url = url.includes("?")
-                        ? url + "&q=" + _query
-                        : url + "?q=" + _query;
-                }
-
-                let response = await (props.fieldConfig.disableHeaderInFetch
-                    ? axios.get(url)
-                    : reachoAPI.get(url));
-                if (response.data) {
-                    const data: FieldOptionsSchema[] = getListOptions(
-                        response.data,
-                        props.fieldConfig.optionsConfig
-                    );
-                    setListOptions([...data]);
-                    let values = formContext.getValues(props.fieldConfig.name) || [];
-
-                    if (
-                        values.length > 0 && // Ensure 'values' is not empty
-                        (data.length === 0 || // If 'data' is empty
-                            !values.every((v: string) => data.some(i => i.value === v)) && // Ensure none of 'values' match 'data'
-                        !values.every((v: string) => selectedValues.some(i => i.value === v)) // Ensure none of 'values' match 'selectedValues'
-                    )) {
-                        fetchValue(values); // Call 'fetchValue()' if all conditions are met
-                    }
-
-                    if (props.fieldConfig.fetchCallback) {
-                        props.fieldConfig.fetchCallback(response);
-                    }
-                } else {
-                    console.error(response.statusText);
-                }
-            } catch (err) {
-            } finally {
-                setLoading(false);
-            }
-        },
-        [props.fieldConfig.fetchUrl]
-    );
+        const axiosInstance = getAxiosInstance(
+          formContext.axiosInstance,
+          props.fieldConfig,
+        );
 
-    const fetchValue = async (value: string) => {
-        try {
-            if (
-                props.fieldConfig.ignoreFetchValue ||
-                !props.fieldConfig.fetchUrl
-            ) {
-                return;
-            }
-
-            let url = props.fieldConfig.fetchUrl;
-
-            url = url = url.includes("?")
-                ? url + "&values=" + value
-                : url + "?values=" + value;
-
-            let response = await (props.fieldConfig.disableHeaderInFetch
-                ? axios.get(url)
-                : reachoAPI.get(url));
-            if (response.data) {
-                const data: FieldOptionsSchema[] = getListOptions(
-                    response.data,
-                    props.fieldConfig.optionsConfig
-                );
-                setSelectedValues([...data]);
-            }
-        } catch (err) { }
-    };
-
-    const updateListOptions = (data: any) => {
-        const resData: FieldOptionsSchema = getListOption(
-            data,
-            props.fieldConfig.optionsConfig
+        let response = await axiosInstance.get(url);
+        if (response?.data) {
+          const data: FieldOptionsSchema[] = getListOptions(
+            response?.data,
+            props.fieldConfig.optionsConfig,
+          );
+          setListOptions([...data]);
+          let values = formContext.getValues(props.fieldConfig.name) || [];
+
+          if (
+            values.length > 0 && // Ensure 'values' is not empty
+            (data.length === 0 || // If 'data' is empty
+              (!values.every((v: string) => data.some((i) => i.value === v)) && // Ensure none of 'values' match 'data'
+                !values.every((v: string) =>
+                  selectedValues.some((i) => i.value === v),
+                ))) // Ensure none of 'values' match 'selectedValues'
+          ) {
+            fetchValue(values); // Call 'fetchValue()' if all conditions are met
+          }
+
+          if (props.fieldConfig.fetchCallback) {
+            props.fieldConfig.fetchCallback(response);
+          }
+        } else {
+          console.error(response?.statusText);
+        }
+      } catch (err) {
+      } finally {
+        setLoading(false);
+      }
+    },
+    [props.fieldConfig.fetchUrl],
+  );
+
+  const fetchValue = async (value: string) => {
+    try {
+      if (props.fieldConfig.ignoreFetchValue || !props.fieldConfig.fetchUrl) {
+        return;
+      }
+
+      let url = props.fieldConfig.fetchUrl;
+
+      url = url = url.includes("?")
+        ? url + "&values=" + value
+        : url + "?values=" + value;
+
+      let response = await (props.fieldConfig.disableHeaderInFetch
+        ? axios.get(url)
+        : formContext.axiosInstance?.get(url));
+      if (response?.data) {
+        const data: FieldOptionsSchema[] = getListOptions(
+          response?.data,
+          props.fieldConfig.optionsConfig,
         );
-        setSelectedValues((prev) => [...prev, resData]);
-        let result = formContext.getValues(props.fieldConfig.name) || [];
-        result = result.includes(resData.value) ? result.filter((v: string) => v != resData.value) : [...result, resData.value];
-        formContext.setValue(props.fieldConfig.name, result);
-    };
-
-    const getInput = () => {
-        return (
-            <Listbox
-                as={"div"}
-                {...hookProps}
-                value={formContext.getValues(props.fieldConfig.name) || []}
-                name={props.fieldConfig.name}
-                defaultValue={props.fieldConfig.defaultValue}
-                key={props.fieldConfig.name}
-                className={"relative form-listbox flex-1"}
-                onChange={(selectedOptions) => {
-                    const chossenOptions = listOptions.filter(op => selectedOptions.includes(op.value));
-                    setSelectedValues(prev => [...prev, ...chossenOptions])
-                    handleChange(
-                        selectedOptions,
-                        formContext,
-                        props.fieldConfig,
-                        props.onChange
-                    )
-                }
-                }
-                multiple>
-                <ListboxButton
-                    className={
-                        props.fieldConfig.customClassNames?.fieldClassName
-                            ? "form-listbox-select " +
-                            props.fieldConfig.customClassNames?.fieldClassName
-                            : "form-listbox-select"
-                    }>
-                    {renderListBoxValue(
-                        formContext,
-                        props.fieldConfig,
-                        [...selectedValues, ...listOptions],
-                        props.onChange
-                    )}
-                </ListboxButton>
-                <RenderListOptions
-                    formContext={formContext}
-                    onChange={props.onChange}
-                    formField={FormFieldType.TYPEAHEAD_MULTI_SELECT}
-                    ref={dynamicSelectRef}
-                    fieldConfig={props.fieldConfig}
-                    listOptions={[...selectedValues, ...listOptions]}
-                    setListOptions={setListOptions}
-                    loading={loading}
-                    setLoading={setLoading}
-                    createCallback={(data) => updateListOptions(data)}
-                    queryCallback={(query) => fetchData(query)}
-                />
-            </Listbox>
+        let values: any[] = formContext.getValues(props.fieldConfig.name) || [];
+        setSelectedValues(
+          [
+            ...data,
+            props.fieldConfig.dropdownFieldConfig?.isSuggestionBox && values
+              ? values
+                  .filter(
+                    (value) =>
+                      data.some((d) => d.value !== value) || data.length == 0,
+                  )
+                  .map((val) => ({ label: val, value: val }))
+              : [],
+          ].flat(),
         );
-    };
-    if (props.fieldConfig.hideWhenNoResults && listOptions.length == 0) {
-        return <></>;
-    }
-
+      }
+    } catch (err) {}
+  };
+
+  const updateListOptions = (data: any) => {
+    const resData: FieldOptionsSchema = getListOption(
+      data,
+      props.fieldConfig.optionsConfig,
+    );
+    setSelectedValues((prev) => [...prev, resData]);
+    let result = formContext.getValues(props.fieldConfig.name) || [];
+    result = result.includes(resData.value)
+      ? result.filter((v: string) => v != resData.value)
+      : [...result, resData.value];
+    formContext.setValue(props.fieldConfig.name, result);
+  };
+
+  const getInput = () => {
     return (
-        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+      <Listbox
+        as={"div"}
+        {...hookProps}
+        value={formContext.getValues(props.fieldConfig.name) || []}
+        name={props.fieldConfig.name}
+        defaultValue={props.fieldConfig.defaultValue}
+        key={props.fieldConfig.name}
+        className={"relative form-listbox flex-1 overflow-hidden"}
+        onChange={(selectedOptions) => {
+          const chossenOptions = listOptions.filter((op) =>
+            selectedOptions.includes(op.value),
+          );
+          setSelectedValues((prev) => [...prev, ...chossenOptions]);
+          handleChange(
+            selectedOptions,
+            formContext,
+            props.fieldConfig,
+            props.onChange,
+          );
+        }}
+        multiple
+      >
+        <ListboxButton
+          className={
+            props.fieldConfig.customClassNames?.fieldClassName
+              ? "form-listbox-select " +
+                props.fieldConfig.customClassNames?.fieldClassName
+              : "form-listbox-select"
+          }
+        >
+          {renderListBoxValue(
+            formContext,
+            props.fieldConfig,
+            [...selectedValues, ...listOptions],
+            props.onChange,
+          )}
+        </ListboxButton>
+        <RenderListOptions
+          formContext={formContext}
+          onChange={props.onChange}
+          formField={FormFieldType.TYPEAHEAD_MULTI_SELECT}
+          ref={dynamicSelectRef}
+          fieldConfig={props.fieldConfig}
+          listOptions={[...selectedValues, ...listOptions]}
+          setListOptions={setListOptions}
+          loading={loading}
+          setLoading={setLoading}
+          createCallback={(data) => updateListOptions(data)}
+          queryCallback={(query) => fetchData(query)}
+        />
+      </Listbox>
     );
+  };
+  if (props.fieldConfig.hideWhenNoResults && listOptions.length == 0) {
+    return <></>;
+  }
+
+  return (
+    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+  );
 };
 export default TypeaheadMultiSelect;

package/src/form/schema/FormFieldSchema.ts

@@ -10,6 +10,7 @@ import {
 } from "react-hook-form";
 import { Saga } from "redux-saga";
 import { emailIdsValidator, queryValidator } from "./CustomValidators";
+import { AxiosInstance } from 'axios';
 
 export enum FormFieldType {
     INPUT = "INPUT",
@@ -75,6 +76,9 @@ export type DropdownFieldConfig = {
     showDeleteOption: boolean;
     showCreateOption: boolean;
     showSearchBox: boolean;
+    placeHolder?: string;
+    hideIcon?: boolean;
+    isSuggestionBox?: boolean;
     createLabelText?: string;
     isCaseSensitive?: boolean;
 };
@@ -136,6 +140,7 @@ export type FormFieldSchema = {
     forceUpdate?: boolean;
     disableHeaderInFetch?: boolean;
     dropdownFieldConfig?: DropdownFieldConfig;
+    axiosInstance?: AxiosInstance
 
     /**
      * Redux configuration attribute
@@ -301,6 +306,18 @@ export class FormFieldPatternsImpl implements FormFieldPatterns {
             /^[a-z][a-z0-9_]*$/
         );
 
+    static readonly NO_SPECIAL_CHAR_LOWERCASE_WITH_SPACES = new FormFieldPatternsImpl(
+        "NO_SPECIAL_CHAR_LOWERCASE_WITH_SPACES",
+        "Please enter only letters, numbers, and spaces.",
+        /^[A-Za-z0-9 ]+$/
+    );
+
+    static readonly VALID_SUBDOMAIN_NAME = new FormFieldPatternsImpl(
+        "VALID_SUBDOMAIN_NAME",
+        "Name should be between 3-30 characters. Cannot contain special characters.",
+        /^[a-z]+$/
+    );
+
     private constructor(
         private readonly patternName: string,
         private readonly message: string,

package/src/form/util/RenderFormField.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { FieldAlignType, FormFieldSchema } from "../schema/FormFieldSchema";
 import ErrorContextHandler from "../formfields/ErrorContextHandler";
 import SVGIcon from "../../util/svg/SVGIcon";
+import { useFormState } from "react-hook-form";
 /**
  * RenderFormField Component
  *
@@ -54,6 +55,7 @@ const RenderFormField = ({
     fieldConfig: FormFieldSchema;
     getInput: Function;
 }): JSX.Element => {
+
     function formTypeHorizontal() {
         return (
             <Field

package/src/form/util/RenderListOptions.tsx

@@ -85,7 +85,14 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
       }
     };
     let resultList = [...createdListItems, ...listOptions];
-    resultList = [...resultList.filter((result) => result.label).filter((option, index, self) => index === self.findIndex((obj) => obj.value === option.value))]; // removing duplicate values
+    resultList = [
+      ...resultList
+        .filter((result) => result.label)
+        .filter(
+          (option, index, self) =>
+            index === self.findIndex((obj) => obj.value === option.value)
+        ),
+    ]; // removing duplicate values
 
     const caseSensitive =
       query && fieldConfig.dropdownFieldConfig?.isCaseSensitive
@@ -154,12 +161,15 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
         selected = option.value == formValue;
       }
       return (
-        <ListboxOption
+        <Listbox.Option
+          static
           key={option.value}
           disabled={option.isDisabled}
           onClick={() => setTimeout(resetToDefault, 300)}
           className={`form-listbox-option ${
-            selected ? " bg-gray-100 text-gray-900" : "bg-white text-gray-700"
+            selected
+              ? " bg-gray-100 text-gray-900"
+              : "hover:bg-gray-100 text-gray-700"
           }`}
           value={option.value}
         >
@@ -178,7 +188,8 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
                   )}
                   {option.label}
                 </span>
-                {isTypeahead ? (
+                {isTypeahead &&
+                !fieldConfig.dropdownFieldConfig?.isSuggestionBox ? (
                   <input
                     type="checkbox"
                     className="form-checkbox"
@@ -195,7 +206,7 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
                 )}
               </div>
               {option.helpText && (
-                <div className="mt-0 text-sm text-gray-500 font-normal truncate w-full !max-w-[150px]">
+                <div className="mt-0 text-xs text-gray-500 font-normal truncate w-full !max-w-[150px]">
                   {option.helpText}
                 </div>
               )}
@@ -259,51 +270,53 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
                 }
               }}
               className="form-input !pr-[36px] Search-field"
-              placeholder="Search"
+              placeholder={
+                fieldConfig.dropdownFieldConfig?.placeHolder || "Search"
+              }
               value={query}
               autoFocus
               type="text"
             />
-            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center mr-3">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 16 16"
-                fill="currentColor"
-                aria-hidden="true"
-                data-slot="icon"
-                className="h-5 w-5 text-gray-400"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
-                  clipRule="evenodd"
-                ></path>
-              </svg>
-            </div>
+            {!fieldConfig.dropdownFieldConfig?.hideIcon && (
+              <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center mr-3">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  data-slot="icon"
+                  className="h-5 w-5 text-gray-400"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
+                    clipRule="evenodd"
+                  ></path>
+                </svg>
+              </div>
+            )}
           </div>
         )}
 
-<div className="form-listbox-options-container">
-        {loading ? (
+        <div className="form-listbox-options-container">
+          {loading ? (
             <div className="form-listbox-option">
               <div className="flex items-center justify-center p-3">
                 <LoaderWithText />
               </div>
             </div>
-        ) : (
+          ) : (
             renderList
-        )}
+          )}
 
-        {Object.keys(groupedOptions).length > 0 &&
-          Object.keys(groupedOptions).map((groupName) => (
-            <div key={groupName}>
-              <h2 className="pb-1 pt-2 font-bold">{groupName}</h2>
-              {groupedOptions[groupName].map(renderOption)}
-            </div>
-          ))}
+          {Object.keys(groupedOptions).length > 0 &&
+            Object.keys(groupedOptions).map((groupName) => (
+              <div key={groupName}>
+                <h2 className="pb-1 pt-2 font-bold">{groupName}</h2>
+                {groupedOptions[groupName].map(renderOption)}
+              </div>
+            ))}
         </div>
-
-        
       </ListboxOptions>
     );
   }
@@ -413,7 +426,7 @@ export function renderListBoxValue(
   };
   return (
     <>
-      <span className="form-selected-option">{renderValue()}</span>
+      <span className="form-selected-option w-full">{renderValue()}</span>
       <SVGIcon
         name="chevronDown"
         className="h-5 w-5 text-gray-400"