@verii/components-organizations-registrar 1.0.0-pre.1756100765 → 1.0.0-pre.1756238035

package/dist/chunks/{CreateOrganization.A11-a_8R.js → ValidateTextInput.DEBaVB1L.js}

@@ -1,21 +1,274 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const material = require("@mui/material");
 const reactAdmin = require("react-admin");
-const React = require("react");
+const reactHookForm = require("react-hook-form");
+const parse = require("autosuggest-highlight/parse/index.js");
+const match = require("autosuggest-highlight/match/index.js");
+const iconsMaterial = require("@mui/icons-material");
 const PropTypes = require("prop-types");
+const remoteDataProvider = require("./remoteDataProvider.BCiFSYnk.js");
 const KeyboardArrowRightIcon = require("@mui/icons-material/KeyboardArrowRight");
 const InfoIcon = require("@mui/icons-material/Info");
 const index$1 = require("./index.iexmV4Mr.js");
-const CreateOrganization_utils = require("./CreateOrganization.utils.C5C_r3Zp.js");
-const OrganisationSubmitButton = require("./OrganisationSubmitButton.D32qynh9.js");
-const index = require("./index.DlFajFTS.js");
-const LinkedInRegistrationInput = require("./LinkedInRegistrationInput.DKRMHYRh.js");
-const remoteDataProvider = require("./remoteDataProvider.BCiFSYnk.js");
-const Grid = require("@mui/material/Grid2");
+const CreateOrganizationUtils = require("./CreateOrganizationUtils.C5C_r3Zp.js");
+const index = require("./index.DIizFYFZ.js");
+const LinkedInRegistrationInput = require("./LinkedInRegistrationInput.gnYgP1Hf.js");
 const reactRouter = require("react-router");
 const theme = require("./theme.CDQ6GHCD.js");
+const Loading = require("./Loading.cGHE59CV.js");
 const AuthContext = require("./AuthContext.DCNVg-VT.js");
+const OrganizationSubmitButton = ({ title, isLoading, endIcon, styles: styles2, handleState, enabled }) => {
+  const form = reactHookForm.useFormContext();
+  React.useEffect(() => {
+    if (handleState) {
+      handleState(form.formState.isValid);
+    }
+  }, [form.formState.isValid, handleState]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAdmin.Button,
+    {
+      disabled: !form.formState.isValid && !enabled,
+      variant: "outlined",
+      color: "primary",
+      type: "submit",
+      size: "large",
+      label: isLoading ? "" : title,
+      endIcon,
+      sx: styles2,
+      children: isLoading && /* @__PURE__ */ jsxRuntime.jsx(Loading.Loading, { color: "error", sx: { pl: "10px" }, size: 26 })
+    }
+  );
+};
+OrganizationSubmitButton.propTypes = {
+  title: PropTypes.string.isRequired,
+  isLoading: PropTypes.bool,
+  endIcon: PropTypes.element,
+  // eslint-disable-next-line react/forbid-prop-types
+  styles: PropTypes.object,
+  handleState: PropTypes.func,
+  enabled: PropTypes.bool
+};
+const useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = React.useState(value);
+  React.useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+};
+const DID_START = "did:";
+const ERRORS = {
+  DID_NOT_FOUND: "DID not found",
+  REQUIRED: "Required"
+};
+const AutoCompleteOrganizationName = ({ defaultValue }) => {
+  const form = reactHookForm.useFormContext();
+  const [value, setValue] = React.useState(defaultValue);
+  const [text, setText] = React.useState(defaultValue?.name || "");
+  const [options, setOptions] = React.useState([]);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState("");
+  const dataProvider = reactAdmin.useDataProvider();
+  const debouncedText = useDebounce(text, 500);
+  const theme2 = material.useTheme();
+  const [stopSearch, setStopSearch] = React.useState(false);
+  form.register("org.name", { required: true });
+  React.useEffect(() => {
+    form.setValue("org", value, { shouldValidate: true });
+  }, [form, value]);
+  React.useEffect(() => {
+    const searchProfiles = async () => {
+      if (stopSearch) {
+        return;
+      }
+      setLoading(true);
+      try {
+        if (debouncedText.includes(DID_START)) {
+          const result2 = await dataProvider.getOne(remoteDataProvider.dataResources.VERIFIED_PROFILE, {
+            id: debouncedText
+          });
+          setError("");
+          setText(result2.data.credentialSubject.name);
+          setValue(result2.data.credentialSubject);
+          setIsOpen(false);
+          return;
+        }
+        if (!debouncedText) {
+          setOptions([]);
+          return;
+        }
+        const result = await dataProvider.getList(remoteDataProvider.dataResources.SEARCH_PROFILES, {
+          search: debouncedText
+        });
+        setOptions(result.data.slice(0, 5));
+      } catch {
+        setOptions([]);
+        if (debouncedText.includes(DID_START)) {
+          setError(ERRORS.DID_NOT_FOUND);
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+    if (debouncedText) {
+      searchProfiles();
+    }
+  }, [dataProvider, debouncedText, stopSearch]);
+  React.useEffect(() => {
+    if (!isOpen) {
+      setOptions([]);
+    }
+  }, [isOpen]);
+  const handleChangeText = React.useCallback((event) => {
+    setText(event?.target?.value);
+    setValue({ name: event?.target?.value });
+  }, []);
+  const handleBlur = React.useCallback(() => {
+    if (!text) {
+      setValue(null);
+      setError(ERRORS.REQUIRED);
+    }
+    if (text && !options.length) {
+      setValue({ name: text });
+    }
+  }, [options, text]);
+  const handleFocus = React.useCallback(() => {
+    setError("");
+  }, []);
+  const handleStopSearch = React.useCallback(() => {
+    setStopSearch(true);
+    setOptions([]);
+    setTimeout(() => {
+      setStopSearch(false);
+    }, 1e4);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { marginBottom: 5, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Autocomplete,
+      {
+        fullWidth: true,
+        options: text?.length && !loading ? options : [],
+        inputValue: text || "",
+        open: isOpen,
+        onOpen: () => setIsOpen(true),
+        onClose: () => setIsOpen(false),
+        onInputChange: handleChangeText,
+        getOptionLabel: (params) => params?.name?.toString(),
+        getOptionKey: (params) => params.id,
+        loading,
+        freeSolo: true,
+        disableClearable: true,
+        blurOnSelect: true,
+        value,
+        filterOptions: (x) => x,
+        onChange: (_event, newValue) => {
+          if (typeof newValue === "string") {
+            setText(text);
+            setValue({ name: text });
+            setOptions([]);
+            return;
+          }
+          setValue(newValue);
+          setText(newValue.name);
+        },
+        renderOption: (props, option, { inputValue }) => {
+          const matches = match(option.name, inputValue, { insideWords: true });
+          const parts = parse(option.name, matches);
+          const isLastItem = props["data-option-index"] === options.length - 1;
+          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("li", { ...props, style: isLastItem ? styles.lastItem : styles.item, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: parts.map((part, index2) => /* @__PURE__ */ jsxRuntime.jsx(
+                material.Typography,
+                {
+                  style: { fontWeight: part.highlight ? 700 : 400 },
+                  variant: "pl",
+                  children: part.text
+                },
+                index2
+              )) }),
+              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "ps", color: theme2.palette.secondary.light, children: option.id })
+            ] }) }),
+            isLastItem ? /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Button,
+              {
+                variant: "outlined",
+                color: "secondary",
+                onClick: handleStopSearch,
+                sx: styles.inviteButton,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Add, { sx: styles.plus }),
+                  "Invite New Organization"
+                ]
+              }
+            ) : null
+          ] });
+        },
+        renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { style: styles.inputBox, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.TextField,
+            {
+              label: "Legal Name",
+              ...params,
+              value: params.inputProps.value.name,
+              onBlur: handleBlur,
+              onFocus: handleFocus,
+              error
+            }
+          ),
+          value?.id ? /* @__PURE__ */ jsxRuntime.jsx(
+            material.Typography,
+            {
+              style: styles.did,
+              variant: "ps",
+              color: theme2.palette.secondary.light,
+              sx: styles.inviteButton,
+              children: value.id
+            }
+          ) : null
+        ] })
+      }
+    ),
+    error ? /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "ps", color: theme2.palette.error.light, children: error }) : null
+  ] });
+};
+AutoCompleteOrganizationName.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  defaultValue: PropTypes.object
+};
+const styles = {
+  inputBox: { position: "relative" },
+  item: {
+    padding: "8px 12px",
+    borderBottomWidth: "1px",
+    borderBottomStyle: "solid",
+    borderBottomColor: "#D1D4D8"
+  },
+  lastItem: {
+    padding: "8px 12px"
+  },
+  did: {
+    position: "absolute",
+    left: "0px",
+    bottom: "-12px"
+  },
+  inviteButton: {
+    color: (theme2) => theme2.customColors.grey2,
+    marginBottom: "16px",
+    marginLeft: "12px",
+    marginTop: "16px",
+    fontSize: "12px"
+  },
+  plus: {
+    width: "16px",
+    height: "16px",
+    marginRight: "6px"
+  }
+};
 const CreateInvitationForOrganization = ({ onSubmit, countryCodes, onCancel, defaultValues }) => {
   const dataProvider = reactAdmin.useDataProvider();
   const timeout = React.useRef(null);
@@ -41,7 +294,7 @@ const CreateInvitationForOrganization = ({ onSubmit, countryCodes, onCancel, def
       }, 500);
     });
   };
-  const orgNamevalidation = [...CreateOrganization_utils.validateName, debouncedValidation];
+  const orgNamevalidation = [...CreateOrganizationUtils.validateName, debouncedValidation];
   const handleSubmit = React.useCallback(
     (data) => {
       onSubmit(data);
@@ -76,7 +329,7 @@ const CreateInvitationForOrganization = ({ onSubmit, countryCodes, onCancel, def
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(reactAdmin.TextInput, { fullWidth: true, multiline: true, label: "Short Description", source: "description" }),
       /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { flexDirection: "row", gap: 1.75, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactAdmin.TextInput, { fullWidth: true, label: "Website", source: "website", validate: CreateOrganization_utils.validateWebsite }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactAdmin.TextInput, { fullWidth: true, label: "Website", source: "website", validate: CreateOrganizationUtils.validateWebsite }),
         /* @__PURE__ */ jsxRuntime.jsx(material.Box, { mt: 2, children: /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: index$1.WEBSITE_HINT, children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, { color: "info", fontSize: "small", cursor: "pointer" }) }) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(reactAdmin.TextInput, { fullWidth: true, label: "Address", source: "physicalAddress.line1" }),
@@ -94,7 +347,7 @@ const CreateInvitationForOrganization = ({ onSubmit, countryCodes, onCancel, def
           fullWidth: true,
           label: "LinkedIn Page",
           source: "linkedInProfile",
-          validate: CreateOrganization_utils.validateWebsiteStrict
+          validate: CreateOrganizationUtils.validateWebsiteStrict
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(LinkedInRegistrationInput.LinkedInRegistrationInput, { formData, source: "registrationNumbers" }),
@@ -105,7 +358,7 @@ const CreateInvitationForOrganization = ({ onSubmit, countryCodes, onCancel, def
             fullWidth: true,
             label: "Support Email",
             source: "contactEmail",
-            validate: CreateOrganization_utils.validateEmail
+            validate: CreateOrganizationUtils.validateEmail
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(material.Box, { mt: 2, children: /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: index$1.SUPPORT_EMAIL_HINT, children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, { color: "info", fontSize: "small", cursor: "pointer" }) }) })
@@ -117,7 +370,7 @@ const CreateInvitationForOrganization = ({ onSubmit, countryCodes, onCancel, def
             fullWidth: true,
             label: "Technical Contact Email",
             source: "technicalEmail",
-            validate: CreateOrganization_utils.validateEmail
+            validate: CreateOrganizationUtils.validateEmail
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(material.Box, { mt: 2, children: /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: index$1.TECHNICAL_EMAIL_HINT, children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, { color: "info", fontSize: "small", cursor: "pointer" }) }) })
@@ -135,7 +388,7 @@ const CreateInvitationForOrganization = ({ onSubmit, countryCodes, onCancel, def
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          OrganisationSubmitButton.OrganizationSubmitButton,
+          OrganizationSubmitButton,
           {
             styles: sxStyles$1.button,
             title: "Next",
@@ -182,30 +435,30 @@ const CreateOrganization = ({
     /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h1", mb: 2, children: title }),
     /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "pl", mb: 6.5, textAlign: "center", children: subTitle }),
     /* @__PURE__ */ jsxRuntime.jsx(reactAdmin.Form, { defaultValues, onSubmit: handleSubmit, noValidate: true, mode: "all", children: /* @__PURE__ */ jsxRuntime.jsx(reactAdmin.FormDataConsumer, { children: ({ formData }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Grid, { container: true, spacing: 4, rowSpacing: 1, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { container: true, flex: 1, flexDirection: "column", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Grid, { size: { xs: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, spacing: 4, rowSpacing: 1, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { container: true, flex: 1, flexDirection: "column", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(
             reactAdmin.TextInput,
             {
               fullWidth: true,
               label: "Legal Name",
               source: "name",
-              validate: CreateOrganization_utils.validateName
+              validate: CreateOrganizationUtils.validateName
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Grid, { size: { xs: 12 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { flexDirection: "row", gap: 1.75, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { flexDirection: "row", gap: 1.75, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               reactAdmin.TextInput,
               {
                 fullWidth: true,
                 label: "Website",
                 source: "website",
-                validate: [reactAdmin.required(), ...CreateOrganization_utils.validateWebsiteStrict]
+                validate: [reactAdmin.required(), ...CreateOrganizationUtils.validateWebsiteStrict]
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(material.Box, { mt: 2, children: /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: index$1.WEBSITE_HINT, children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, { color: "info", fontSize: "small", cursor: "pointer" }) }) })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Grid, { size: { xs: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(
             reactAdmin.TextInput,
             {
               fullWidth: true,
@@ -214,7 +467,7 @@ const CreateOrganization = ({
               validate: [reactAdmin.required(), reactAdmin.maxLength(1024)]
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Grid, { size: { xs: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(
             reactAdmin.AutocompleteInput,
             {
               label: "Country",
@@ -224,7 +477,7 @@ const CreateOrganization = ({
             }
           ) })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Grid, { size: { xs: 6 }, pb: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 6 }, pb: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
           index.CustomImageInput,
           {
             label: false,
@@ -233,36 +486,36 @@ const CreateOrganization = ({
             imgSrc: defaultValues?.logo
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { flexDirection: "row", gap: 1.75, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { flexDirection: "row", gap: 1.75, children: /* @__PURE__ */ jsxRuntime.jsx(
           reactAdmin.TextInput,
           {
             fullWidth: true,
             label: "LinkedIn Page",
             source: "linkedInProfile",
-            validate: [...CreateOrganization_utils.validateWebsite, reactAdmin.required()]
+            validate: [...CreateOrganizationUtils.validateWebsite, reactAdmin.required()]
           }
         ) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsx(LinkedInRegistrationInput.LinkedInRegistrationInput, { formData: { ...formData, ...defaultValues } }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { flexDirection: "row", gap: 1.75, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsx(LinkedInRegistrationInput.LinkedInRegistrationInput, { formData: { ...formData, ...defaultValues } }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { flexDirection: "row", gap: 1.75, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             reactAdmin.TextInput,
             {
               fullWidth: true,
               label: "Support Email",
               source: "contactEmail",
-              validate: [reactAdmin.required(), ...CreateOrganization_utils.validateEmail]
+              validate: [reactAdmin.required(), ...CreateOrganizationUtils.validateEmail]
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(material.Box, { mt: 2, children: /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: index$1.SUPPORT_EMAIL_HINT, children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, { color: "info", fontSize: "small", cursor: "pointer" }) }) })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { flexDirection: "row", gap: 1.75, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { flexDirection: "row", gap: 1.75, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             reactAdmin.TextInput,
             {
               fullWidth: true,
               label: "Technical Contact Email",
               source: "technicalEmail",
-              validate: [reactAdmin.required(), ...CreateOrganization_utils.validateEmail]
+              validate: [reactAdmin.required(), ...CreateOrganizationUtils.validateEmail]
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(material.Box, { mt: 2, children: /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: index$1.TECHNICAL_EMAIL_HINT, children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, { color: "info", fontSize: "small", cursor: "pointer" }) }) })
@@ -274,7 +527,7 @@ const CreateOrganization = ({
             orientation: "horizontal"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(Grid, { size: { xs: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(
           reactAdmin.TextInput,
           {
             fullWidth: true,
@@ -285,15 +538,15 @@ const CreateOrganization = ({
             validate: reactAdmin.required()
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { flexDirection: "row", gap: 1.75, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { flexDirection: "row", gap: 1.75, children: [
           /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h4", my: 2, children: "Administrator’s Details" }),
           /* @__PURE__ */ jsxRuntime.jsx(material.Box, { mt: 2.25, children: /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: index$1.ADMINISTRATOR_DETAILS_HINT, children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, { color: "info", fontSize: "small", cursor: "pointer" }) }) })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { flexDirection: "row", gap: 1.75, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { flexDirection: "row", gap: 1.75, children: [
           /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h4", my: 2, children: "Signatory Authority’s Details" }),
           /* @__PURE__ */ jsxRuntime.jsx(material.Box, { mt: 2.25, children: /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: index$1.SIGNATORY_DETAILS_HINT, children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, { color: "info", fontSize: "small", cursor: "pointer" }) }) })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Grid, { size: { xs: 6 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { size: { xs: 6 }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { flexDirection: "row", gap: 1.75, children: /* @__PURE__ */ jsxRuntime.jsx(
             reactAdmin.TextInput,
             {
@@ -315,7 +568,7 @@ const CreateOrganization = ({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Grid, { size: { xs: 6 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { size: { xs: 6 }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { flexDirection: "row", gap: 1.75, children: /* @__PURE__ */ jsxRuntime.jsx(
             reactAdmin.TextInput,
             {
@@ -335,7 +588,7 @@ const CreateOrganization = ({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { flexDirection: "row", gap: 1.75, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { flexDirection: "row", gap: 1.75, children: /* @__PURE__ */ jsxRuntime.jsx(
           reactAdmin.TextInput,
           {
             fullWidth: true,
@@ -344,7 +597,7 @@ const CreateOrganization = ({
             validate: [reactAdmin.maxLength(1024), reactAdmin.required()]
           }
         ) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { flexDirection: "row", gap: 1.75, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { flexDirection: "row", gap: 1.75, children: /* @__PURE__ */ jsxRuntime.jsx(
           reactAdmin.TextInput,
           {
             fullWidth: true,
@@ -353,24 +606,24 @@ const CreateOrganization = ({
             validate: [reactAdmin.maxLength(1024), reactAdmin.required()]
           }
         ) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { flexDirection: "row", gap: 1.75, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { flexDirection: "row", gap: 1.75, children: /* @__PURE__ */ jsxRuntime.jsx(
           reactAdmin.TextInput,
           {
             fullWidth: true,
             label: "Email",
             source: "adminEmail",
-            validate: [...CreateOrganization_utils.validateEmail, reactAdmin.required()],
+            validate: [...CreateOrganizationUtils.validateEmail, reactAdmin.required()],
             defaultValue: userData ? userData.email : ""
           }
         ) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { flexDirection: "row", gap: 1.75, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { flexDirection: "row", gap: 1.75, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             reactAdmin.TextInput,
             {
               fullWidth: true,
               label: "Email",
               source: "signatoryEmail",
-              validate: [...CreateOrganization_utils.validateEmail, reactAdmin.required()]
+              validate: [...CreateOrganizationUtils.validateEmail, reactAdmin.required()]
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(material.Box, { mt: 2, children: /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: index$1.SIGNATORY_EMAIL_HINT, children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, { color: "info", fontSize: "small", cursor: "pointer" }) }) })
@@ -390,7 +643,7 @@ const CreateOrganization = ({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          OrganisationSubmitButton.OrganizationSubmitButton,
+          OrganizationSubmitButton,
           {
             title: buttonTitle,
             isLoading,
@@ -438,6 +691,67 @@ const sxStyles = {
     mr: 2
   }
 };
+const ValidateTextInput = ({ source, resource, ...props }) => {
+  const { debounce: debounceTime = 250, ...rest } = props;
+  const errorobj = { message: " " };
+  const dataProvider = reactAdmin.useDataProvider();
+  const [isError, setIsError] = React.useState(false);
+  const timeout = React.useRef(null);
+  const validateSecureUrl = [
+    reactAdmin.regex(index$1.secureUrlRegexp, (res) => {
+      setIsError(false);
+      return res ? "Secure webhook should be a HTTPS URL" : void 0;
+    }),
+    reactAdmin.maxLength(1024)
+  ];
+  const debouncedValidation = async (value) => {
+    clearTimeout(timeout.current);
+    if (!value) {
+      setIsError(false);
+      return void 0;
+    }
+    return new Promise((resolve) => {
+      timeout.current = setTimeout(async () => {
+        const { data } = await dataProvider.create(resource, { data: { secureWebhookUrl: value } });
+        if (data && data.status === 400) {
+          setIsError(true);
+          resolve(errorobj);
+        } else {
+          resolve(void 0);
+          setIsError(false);
+        }
+      }, debounceTime);
+    });
+  };
+  const validate = [...validateSecureUrl, debouncedValidation];
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: sx.constainer, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactAdmin.TextInput, { source, validate, ...rest }),
+    isError && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", component: "div", sx: sx.errorMessage, children: index$1.ERRORS.secureWebHook })
+  ] });
+};
+const sx = {
+  constainer: {
+    width: "100%",
+    position: "relative"
+  },
+  errorMessage: {
+    color: "primary.main",
+    mt: 0,
+    mb: 0.5,
+    ml: 1.5
+  }
+};
+ValidateTextInput.propTypes = {
+  source: PropTypes.string,
+  resource: PropTypes.string,
+  errortext: PropTypes.string,
+  // eslint-disable-next-line react/forbid-prop-types
+  validate: PropTypes.array,
+  debounce: PropTypes.number
+};
+exports.AutoCompleteOrganizationName = AutoCompleteOrganizationName;
 exports.CreateInvitationForOrganization = CreateInvitationForOrganization;
 exports.CreateOrganization = CreateOrganization;
-//# sourceMappingURL=CreateOrganization.A11-a_8R.js.map
+exports.OrganizationSubmitButton = OrganizationSubmitButton;
+exports.ValidateTextInput = ValidateTextInput;
+//# sourceMappingURL=ValidateTextInput.DEBaVB1L.js.map