@axos-web-dev/shared-components 1.0.99-dev-2 → 1.0.99-dev-5

package/dist/Forms/ClearingForm.js

@@ -21,7 +21,7 @@ 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                                */
+/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                                                    */
@@ -32,7 +32,7 @@ import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import { useForm, FormProvider } from "react-hook-form";
 import * as z from "zod";
-import { iconForm, headerForm, form, descriptionField, headerContainer, xc_input, fullRowForm, ro_input, formWrapper, disclosureForm, actions, formContainer } from "./Forms.css.js";
+import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, xc_input, fullRowForm, ro_input, disclosureForm, actions } from "./Forms.css.js";
 import { honeyPotSchema, isValidHoneyPot, HoneyPot } from "./HoneyPot/index.js";
 import { SalesforceSchema } from "./SalesforceFieldsForm.js";
 const options = [
@@ -62,6 +62,7 @@ const ClearingForm = ({
   description,
   callToAction,
   validateEmail,
+  onValidate,
   id
 }) => {
   const schema = z.object({
@@ -187,171 +188,182 @@ const ClearingForm = ({
         }
       )
     ] }),
-    /* @__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: "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", { children: /* @__PURE__ */ jsx(
-          InputPhone,
-          {
-            id: "phone",
-            ...register("phone", { required: true, maxLength: 12 }),
-            label: "Phone",
-            sizes: "medium",
-            required: true,
-            error: !!errors.phone,
-            helperText: errors.phone?.message,
-            variant
-          }
-        ) }),
-        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-          Input,
-          {
-            id: "company",
-            ...register("company", { required: true }),
-            label: "Broker-Dealer Name",
-            sizes: "medium",
-            required: true,
-            error: !!errors.company,
-            helperText: errors.company?.message,
-            variant
-          }
-        ) }),
-        /* @__PURE__ */ jsx("div", { className: xc_input, children: /* @__PURE__ */ jsxs(
-          Dropdown,
-          {
-            id: "Current_Assets_Under_Management__c",
-            ...register("Current_Assets_Under_Management__c", {
-              required: true
-            }),
-            label: "Assets Under Management",
-            sizes: "medium",
-            required: true,
-            error: !!errors.Current_Assets_Under_Management__c,
-            helperText: errors.Current_Assets_Under_Management__c?.message,
-            variant,
-            defaultValue: "Select option",
-            onChange: handleDropdownChange,
-            onClick: handleAUMerror,
-            onBlur: handleAUMerror,
-            children: [
-              /* @__PURE__ */ jsx("option", { disabled: true, value: "Select option", children: "Select Option" }),
-              /* @__PURE__ */ jsx("option", { value: "$0 - $100MM", children: "$0 - $100MM" }),
-              /* @__PURE__ */ jsx("option", { value: "$101MM - $200MM", children: "$101MM - $200MM" }),
-              /* @__PURE__ */ jsx("option", { value: "$201MM - $500MM", children: "$201MM - $500MM" }),
-              /* @__PURE__ */ jsx("option", { value: "$501MM - $750MM", children: "$501MM - $750MM" }),
-              /* @__PURE__ */ jsx("option", { value: "$751MM - $1B", children: "$751MM - $1B" }),
-              /* @__PURE__ */ jsx("option", { value: "$1B -$2B", children: "$1B -$2B" }),
-              /* @__PURE__ */ jsx("option", { value: "$2B+", children: "$2B+" })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxs("div", { className: `${fullRowForm}`, children: [
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              id: "business_type_selection",
-              label: "Type of Business",
-              onFocus: handleShowBusinessType,
-              onBlur: handleTOBerrors,
-              sizes: "medium",
-              placeholder: "Select All That Apply",
-              error: !!errors.Business_Type__c,
-              readOnly: true,
-              className: ro_input
-            }
-          ),
-          showBusinessTypes && /* @__PURE__ */ jsx(
-            CheckboxGroup,
+            ) }),
+            /* @__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: "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", { children: /* @__PURE__ */ jsx(
+              InputPhone,
+              {
+                id: "phone",
+                ...register("phone", { required: true, maxLength: 12 }),
+                label: "Phone",
+                sizes: "medium",
+                required: true,
+                error: !!errors.phone,
+                helperText: errors.phone?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "company",
+                ...register("company", { required: true }),
+                label: "Broker-Dealer Name",
+                sizes: "medium",
+                required: true,
+                error: !!errors.company,
+                helperText: errors.company?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: xc_input, children: /* @__PURE__ */ jsxs(
+              Dropdown,
+              {
+                id: "Current_Assets_Under_Management__c",
+                ...register("Current_Assets_Under_Management__c", {
+                  required: true
+                }),
+                label: "Assets Under Management",
+                sizes: "medium",
+                required: true,
+                error: !!errors.Current_Assets_Under_Management__c,
+                helperText: errors.Current_Assets_Under_Management__c?.message,
+                variant,
+                defaultValue: "Select option",
+                onChange: handleDropdownChange,
+                onClick: handleAUMerror,
+                onBlur: handleAUMerror,
+                children: [
+                  /* @__PURE__ */ jsx("option", { disabled: true, value: "Select option", children: "Select Option" }),
+                  /* @__PURE__ */ jsx("option", { value: "$0 - $100MM", children: "$0 - $100MM" }),
+                  /* @__PURE__ */ jsx("option", { value: "$101MM - $200MM", children: "$101MM - $200MM" }),
+                  /* @__PURE__ */ jsx("option", { value: "$201MM - $500MM", children: "$201MM - $500MM" }),
+                  /* @__PURE__ */ jsx("option", { value: "$501MM - $750MM", children: "$501MM - $750MM" }),
+                  /* @__PURE__ */ jsx("option", { value: "$751MM - $1B", children: "$751MM - $1B" }),
+                  /* @__PURE__ */ jsx("option", { value: "$1B -$2B", children: "$1B -$2B" }),
+                  /* @__PURE__ */ jsx("option", { value: "$2B+", children: "$2B+" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: `${fullRowForm}`, children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "business_type_selection",
+                  label: "Type of Business",
+                  onFocus: handleShowBusinessType,
+                  onBlur: handleTOBerrors,
+                  sizes: "medium",
+                  placeholder: "Select All That Apply",
+                  error: !!errors.Business_Type__c,
+                  readOnly: true,
+                  className: ro_input
+                }
+              ),
+              showBusinessTypes && /* @__PURE__ */ jsx(
+                CheckboxGroup,
+                {
+                  options,
+                  selectedValues,
+                  onChange: handleBusinessTypeChange,
+                  error: !!errors.Business_Type__c
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: fullRowForm, children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "Memo__c",
+                ...register("Memo__c", { required: false }),
+                label: "Please provide additional details about your clearing needs (optional)",
+                sizes: "medium",
+                required: false,
+                error: !!errors.Memo__c,
+                helperText: errors.Memo__c?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "hidden",
+                ...register("Lead_Source_Detail_SFDC2__c", {
+                  value: "Axos Clearing"
+                })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(HoneyPot, { register, errors, variant }),
+          children,
+          /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
+          /* @__PURE__ */ jsx("div", { className: actions, children: /* @__PURE__ */ jsx(
+            Button,
             {
-              options,
-              selectedValues,
-              onChange: handleBusinessTypeChange,
-              error: !!errors.Business_Type__c
+              color: getVariant(callToAction?.variant),
+              as: "button",
+              type: "submit",
+              disabled: !isValid || isSubmitting || !requiredAUM || !requiredTOB,
+              children: callToAction?.displayText
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: fullRowForm, children: /* @__PURE__ */ jsx(
-          Input,
-          {
-            id: "Memo__c",
-            ...register("Memo__c", { required: false }),
-            label: "Please provide additional details about your clearing needs (optional)",
-            sizes: "medium",
-            required: false,
-            error: !!errors.Memo__c,
-            helperText: errors.Memo__c?.message,
-            variant
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "hidden",
-            ...register("Lead_Source_Detail_SFDC2__c", {
-              value: "Axos Clearing"
-            })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(HoneyPot, { register, errors, 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 || !requiredAUM || !requiredTOB,
-          children: callToAction?.displayText
-        }
-      ) })
-    ] })
+          ) })
+        ]
+      }
+    )
   ] }) }) }, id);
 };
 export {

package/dist/Forms/CommercialDeposits.d.ts

@@ -14,4 +14,4 @@ export type CommercialDepositsInputs = {
     Others_Detail__c: string;
     Product_and_servicing_needs__c: string;
 };
-export declare const CommercialDeposits: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CommercialDeposits: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, onValidate, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;