@axos-web-dev/shared-components 1.0.77-patch.9 → 1.0.77-patch.92-rev.1

package/dist/Forms/CommercialDeposits.js

@@ -20,18 +20,21 @@ import "../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgAxosX from "../icons/AxosX/index.js";
 import SvgComponent from "../icons/AxosX/Blue.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
+/* empty css                               */
 /* empty css                                    */
 /* empty css                                                    */
 /* empty css                                                */
 import "../utils/allowedAxosDomains.js";
+import * as z from "zod";
 import { associatedEmail } from "../utils/EverestValidity.js";
 import { getVariant } from "../utils/getVariant.js";
+import { useCachedEmailValidator } from "../utils/useCachedValidators.js";
 import clsx from "clsx";
 import { useForm, FormProvider } from "react-hook-form";
-import * as z from "zod";
 import { iconForm, headerForm, form, descriptionField, headerContainer, x_input, fullRowForm, pl_label, formWrapper, disclosureForm, actions, formContainer } from "./Forms.css.js";
+import { honeyPotSchema, isValidHoneyPot, HoneyPot } from "./HoneyPot/index.js";
 import { SalesforceSchema } from "./SalesforceFieldsForm.js";
 const CommercialDeposits = ({
   icon = false,
@@ -45,8 +48,10 @@ const CommercialDeposits = ({
   description,
   callToAction,
   validateEmail,
+  onValidate,
   id
 }) => {
+  const cachedEmailValidator = useCachedEmailValidator(validateEmail);
   const schema = z.object({
     first_name: z.string({ message: "First Name is required." }).regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g, {
       message: "First Name is required."
@@ -54,7 +59,7 @@ const CommercialDeposits = ({
     last_name: z.string({ message: "Last Name is required." }).regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g, {
       message: "Last Name is required."
     }).trim().min(1, { message: "Last Name is required." }),
-    email: z.string().email({ message: "Email is required." }).refine(async (val) => await validateEmail(val)),
+    email: z.string().email({ message: "Email is required." }).refine(cachedEmailValidator, { message: "Invalid email address." }),
     phone: z.string({ message: "Business Phone is required." }).regex(/[\d-]{10}/, { message: "Business Phone is required." }).min(10, { message: "Business Phone is required." }).max(12, { message: "Business Phone is required." }).transform((val, ctx) => {
       const removeDashes = val.replace(/-/gi, "");
       if (removeDashes.length !== 10) {
@@ -86,8 +91,16 @@ const CommercialDeposits = ({
     Others_Detail__c: z.string().optional(),
     Product_and_servicing_needs__c: z.string()
   });
+  const gen_schema = schema.merge(SalesforceSchema).merge(honeyPotSchema).superRefine((data, ctx) => {
+    if (!isValidHoneyPot(data)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "fields are not valid."
+      });
+    }
+  });
   const methods = useForm({
-    resolver: zodResolver(schema.merge(SalesforceSchema), {
+    resolver: zodResolver(gen_schema, {
       async: true
     }),
     mode: "all"
@@ -128,187 +141,199 @@ const CommercialDeposits = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
-          /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "first_name",
-                ...register("first_name", {
-                  required: "First Name is required"
-                }),
-                label: "First Name",
-                sizes: "medium",
-                required: true,
-                error: !!errors.first_name,
-                helperText: errors.first_name?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "last_name",
-                ...register("last_name", { required: true }),
-                label: "Last Name",
-                sizes: "medium",
-                required: true,
-                error: !!errors.last_name,
-                helperText: errors.last_name?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "company",
-                ...register("company", { required: true }),
-                label: "Business Name",
-                sizes: "medium",
-                required: true,
-                error: !!errors.company,
-                helperText: errors.company?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "email",
-                ...register("email", {
-                  required: true,
-                  validate: {
-                    isValid: associatedEmail
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            className: form,
+            onSubmit: async (e) => {
+              onValidate && onValidate(e);
+              await handleSubmit(submitForm)(e);
+              e.preventDefault();
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "first_name",
+                    ...register("first_name", {
+                      required: "First Name is required"
+                    }),
+                    label: "First Name",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.first_name,
+                    helperText: errors.first_name?.message,
+                    variant
                   }
-                }),
-                label: "Email",
-                sizes: "medium",
-                required: true,
-                error: !!errors.email,
-                helperText: errors.email?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { className: x_input, children: /* @__PURE__ */ jsx(
-              InputPhone,
-              {
-                id: "phone",
-                ...register("phone", { required: true, maxLength: 12 }),
-                label: "Business Phone",
-                sizes: "medium",
-                required: true,
-                error: !!errors.phone,
-                helperText: errors.phone?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-              Dropdown,
-              {
-                id: "Estimated_Gross_Annual_Revenue__c",
-                ...register("Estimated_Gross_Annual_Revenue__c", {
-                  required: true
-                }),
-                label: "Estimated Gross Annual Revenue",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Estimated_Gross_Annual_Revenue__c,
-                helperText: errors.Estimated_Gross_Annual_Revenue__c?.message,
-                variant,
-                defaultValue: "",
-                children: [
-                  /* @__PURE__ */ jsx("option", { disabled: true, value: "", children: "Select Option" }),
-                  /* @__PURE__ */ jsx("option", { value: "Under $3MM", children: "Under $3MM" }),
-                  /* @__PURE__ */ jsx("option", { value: "$3MM - $10MM", children: "$3MM - $10MM" }),
-                  /* @__PURE__ */ jsx("option", { value: "$10MM - $100MM", children: "$10MM - $100MM" }),
-                  /* @__PURE__ */ jsx("option", { value: "Above $100MM", children: "Above $100MM" })
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsxs("div", { className: `${fullRowForm}`, children: [
-              /* @__PURE__ */ jsx("div", { className: pl_label, children: "Which products or services apply to your request? Click all that apply." }),
-              /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  id: "Banking__c",
-                  ...register("Banking__c"),
-                  sizes: "medium",
-                  variant,
-                  children: "Banking"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  id: "Treasury_Management__c",
-                  ...register("Treasury_Management__c"),
-                  sizes: "medium",
-                  variant,
-                  children: "Treasury Management"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  id: "Lending__c",
-                  ...register("Lending__c"),
-                  sizes: "medium",
-                  variant,
-                  children: "Lending"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  id: "Others__c",
-                  ...register("Others__c"),
-                  sizes: "medium",
-                  variant,
-                  children: "Other"
-                }
-              ),
-              othersChecked && /* @__PURE__ */ jsx(
-                Input,
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "last_name",
+                    ...register("last_name", { required: true }),
+                    label: "Last Name",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.last_name,
+                    helperText: errors.last_name?.message,
+                    variant
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "company",
+                    ...register("company", { required: true }),
+                    label: "Business Name",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.company,
+                    helperText: errors.company?.message,
+                    variant
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "email",
+                    ...register("email", {
+                      required: true,
+                      validate: {
+                        isValid: associatedEmail
+                      }
+                    }),
+                    label: "Email",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.email,
+                    helperText: errors.email?.message,
+                    variant
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { className: x_input, children: /* @__PURE__ */ jsx(
+                  InputPhone,
+                  {
+                    id: "phone",
+                    ...register("phone", { required: true, maxLength: 12 }),
+                    label: "Business Phone",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.phone,
+                    helperText: errors.phone?.message,
+                    variant
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+                  Dropdown,
+                  {
+                    id: "Estimated_Gross_Annual_Revenue__c",
+                    ...register("Estimated_Gross_Annual_Revenue__c", {
+                      required: true
+                    }),
+                    label: "Estimated Gross Annual Revenue",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Estimated_Gross_Annual_Revenue__c,
+                    helperText: errors.Estimated_Gross_Annual_Revenue__c?.message,
+                    variant,
+                    defaultValue: "",
+                    children: [
+                      /* @__PURE__ */ jsx("option", { disabled: true, value: "", children: "Select Option" }),
+                      /* @__PURE__ */ jsx("option", { value: "Under $3MM", children: "Under $3MM" }),
+                      /* @__PURE__ */ jsx("option", { value: "$3MM - $10MM", children: "$3MM - $10MM" }),
+                      /* @__PURE__ */ jsx("option", { value: "$10MM - $100MM", children: "$10MM - $100MM" }),
+                      /* @__PURE__ */ jsx("option", { value: "Above $100MM", children: "Above $100MM" })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("div", { className: `${fullRowForm}`, children: [
+                  /* @__PURE__ */ jsx("div", { className: pl_label, children: "Which products or services apply to your request? Click all that apply." }),
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      id: "Banking__c",
+                      ...register("Banking__c"),
+                      sizes: "medium",
+                      variant,
+                      children: "Banking"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      id: "Treasury_Management__c",
+                      ...register("Treasury_Management__c"),
+                      sizes: "medium",
+                      variant,
+                      children: "Treasury Management"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      id: "Lending__c",
+                      ...register("Lending__c"),
+                      sizes: "medium",
+                      variant,
+                      children: "Lending"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      id: "Others__c",
+                      ...register("Others__c"),
+                      sizes: "medium",
+                      variant,
+                      children: "Other"
+                    }
+                  ),
+                  othersChecked && /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      id: "Others_Detail__c",
+                      ...register("Others_Detail__c", { required: false }),
+                      sizes: "medium",
+                      required: false,
+                      error: !!errors.Others_Detail__c,
+                      helperText: errors.Others_Detail__c?.message,
+                      variant
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: fullRowForm, children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "Product_and_servicing_needs__c",
+                    ...register("Product_and_servicing_needs__c", {
+                      required: false
+                    }),
+                    label: "Kindly describe your product and/or servicing needs.",
+                    sizes: "medium",
+                    required: false,
+                    error: !!errors.Product_and_servicing_needs__c,
+                    helperText: errors.Product_and_servicing_needs__c?.message,
+                    variant
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(HoneyPot, { register, variant })
+              ] }),
+              children,
+              /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
+              /* @__PURE__ */ jsx("div", { className: actions, children: /* @__PURE__ */ jsx(
+                Button,
                 {
-                  id: "Others_Detail__c",
-                  ...register("Others_Detail__c", { required: false }),
-                  sizes: "medium",
-                  required: false,
-                  error: !!errors.Others_Detail__c,
-                  helperText: errors.Others_Detail__c?.message,
-                  variant
+                  color: getVariant(callToAction?.variant),
+                  as: "button",
+                  type: "submit",
+                  disabled: !isValid || isSubmitting,
+                  children: callToAction?.displayText
                 }
-              )
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: fullRowForm, children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "Product_and_servicing_needs__c",
-                ...register("Product_and_servicing_needs__c", {
-                  required: false
-                }),
-                label: "Kindly describe your product and/or servicing needs.",
-                sizes: "medium",
-                required: false,
-                error: !!errors.Product_and_servicing_needs__c,
-                helperText: errors.Product_and_servicing_needs__c?.message,
-                variant
-              }
-            ) })
-          ] }),
-          children,
-          /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
-          /* @__PURE__ */ jsx("div", { className: actions, children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              color: getVariant(callToAction?.variant),
-              as: "button",
-              type: "submit",
-              disabled: !isValid || isSubmitting,
-              children: callToAction?.displayText
-            }
-          ) })
-        ] })
+              ) })
+            ]
+          }
+        )
       ] }) })
     },
     id

package/dist/Forms/CommercialDepositsNoLendingOption.d.ts

@@ -0,0 +1,16 @@
+import { FormProps } from './FormProps';
+
+export type CommercialDepositsNoLendingOptionInputs = {
+    first_name: string;
+    last_name: string;
+    company: string;
+    email: string;
+    phone: string;
+    Estimated_Gross_Annual_Revenue__c: string;
+    Banking__c: boolean;
+    Treasury_Management__c: boolean;
+    Others__c: boolean;
+    Others_Detail__c: string;
+    Product_and_servicing_needs__c: string;
+};
+export declare const CommercialDepositsNoLendingOption: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, onValidate, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;