@axos-web-dev/shared-components 0.0.50 → 0.0.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/dist/Button/GoBackButton.js +1 -1
  2. package/dist/CallToActionBar/index.js +2 -3
  3. package/dist/Carousel/index.js +2 -3
  4. package/dist/Chevron/index.js +6 -2
  5. package/dist/ContentBanner/index.js +1 -1
  6. package/dist/DownloadTile/index.js +2 -2
  7. package/dist/ExecutiveBio/ExecutiveBio.js +1 -1
  8. package/dist/ExecutiveBio/ExecutiveBioSet.js +1 -1
  9. package/dist/FaqAccordion/index.js +6 -3
  10. package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js +6 -2
  11. package/dist/Forms/ApplicationStart.d.ts +10 -0
  12. package/dist/Forms/ApplicationStart.js +191 -0
  13. package/dist/Forms/ContactUsBusiness.d.ts +11 -0
  14. package/dist/Forms/ContactUsBusiness.js +246 -0
  15. package/dist/Forms/EmailOnly.d.ts +6 -0
  16. package/dist/Forms/EmailOnly.js +160 -0
  17. package/dist/Forms/Forms.css.d.ts +22 -1
  18. package/dist/Forms/Forms.css.js +11 -9
  19. package/dist/Forms/RenderForm.js +52 -1
  20. package/dist/Forms/SalesforceFieldsForm.js +11 -11
  21. package/dist/Forms/ScheduleCall.d.ts +1 -1
  22. package/dist/Forms/ScheduleCall.js +11 -7
  23. package/dist/Forms/ScheduleCallPremier.d.ts +12 -0
  24. package/dist/Forms/ScheduleCallPremier.js +255 -0
  25. package/dist/Forms/SuccesForm.d.ts +1 -1
  26. package/dist/Forms/SuccesForm.js +39 -3
  27. package/dist/Forms/index.d.ts +4 -0
  28. package/dist/Forms/index.js +12 -3
  29. package/dist/Hyperlink/index.js +6 -2
  30. package/dist/IconBillboard/IconBillboard.js +2 -2
  31. package/dist/IconBillboard/IconBillboardSet.js +2 -2
  32. package/dist/ImageBillboard/ImageBillboard.js +2 -2
  33. package/dist/ImageBillboard/ImageBillboardSet.js +6 -6
  34. package/dist/ImageLink/ImageLink.js +6 -2
  35. package/dist/ImageLink/ImageLinkSet.js +8 -4
  36. package/dist/ImageLink/index.js +6 -2
  37. package/dist/Input/Checkbox.css.d.ts +10 -0
  38. package/dist/Input/Checkbox.css.js +8 -0
  39. package/dist/Input/Checkbox.d.ts +5 -0
  40. package/dist/Input/Checkbox.js +48 -0
  41. package/dist/Input/CurrencyInput.d.ts +3 -0
  42. package/dist/Input/CurrencyInput.js +27 -0
  43. package/dist/Input/Dropdown.css.d.ts +1 -0
  44. package/dist/Input/Dropdown.css.js +6 -0
  45. package/dist/Input/Dropdown.d.ts +3 -0
  46. package/dist/Input/Dropdown.js +55 -0
  47. package/dist/Input/Input.css.d.ts +7 -0
  48. package/dist/Input/Input.css.js +8 -7
  49. package/dist/Input/InputPhone.js +5 -0
  50. package/dist/Input/InputProps.d.ts +29 -0
  51. package/dist/Input/InputProps.js +1 -0
  52. package/dist/Input/index.d.ts +4 -0
  53. package/dist/Input/index.js +8 -0
  54. package/dist/Modal/Modal.js +6 -2
  55. package/dist/NavigationMenu/AxosAdvisor/SubNavBar.js +5 -4
  56. package/dist/NavigationMenu/AxosAdvisor/index.js +1 -2
  57. package/dist/SecondaryFooter/index.js +1 -1
  58. package/dist/SetContainer/SetContainer.js +7 -3
  59. package/dist/StepItems/StepItemsSet.js +1 -1
  60. package/dist/Table/Table.js +2 -2
  61. package/dist/VideoWrapper/index.js +7 -7
  62. package/dist/assets/Button/Button.css +1 -1
  63. package/dist/assets/Forms/Forms.css +52 -29
  64. package/dist/assets/Input/Checkbox.css +6 -0
  65. package/dist/assets/Input/Dropdown.css +10 -0
  66. package/dist/assets/Input/Input.css +51 -30
  67. package/dist/assets/globals.css +1 -1
  68. package/dist/icons/CheckIcon/index.js +1 -1
  69. package/dist/main.d.ts +1 -1
  70. package/dist/main.js +25 -7
  71. package/package.json +3 -2
@@ -6,7 +6,7 @@ import { Button } from "./Button.js";
6
6
  const GoBackButton = (props) => {
7
7
  const [previusUrl, setPreviusUrl] = useState("");
8
8
  useMount(() => {
9
- setPreviusUrl(document == null ? void 0 : document.referrer);
9
+ setPreviusUrl(document?.referrer);
10
10
  });
11
11
  return /* @__PURE__ */ jsx(Button, { as: "a", targetUrl: previusUrl, children: props.children });
12
12
  };
@@ -28,8 +28,7 @@ const CallToActionBar = ({
28
28
  const banner_behavior = bannerBehavior.toLocaleLowerCase();
29
29
  const image_overlap = bannerBehavior.toLowerCase().includes("overlap");
30
30
  useEffect(() => {
31
- var _a;
32
- const domRectStickyEl = (_a = document == null ? void 0 : document.querySelector(`.${sticky_banner}`)) == null ? void 0 : _a.getBoundingClientRect();
31
+ const domRectStickyEl = document?.querySelector(`.${sticky_banner}`)?.getBoundingClientRect();
33
32
  if (domRectStickyEl) {
34
33
  setstickyTop(domRectStickyEl.top);
35
34
  }
@@ -61,7 +60,7 @@ const CallToActionBar = ({
61
60
  return /* @__PURE__ */ jsx(
62
61
  "section",
63
62
  {
64
- id: internalName == null ? void 0 : internalName.replace(/ /g, "-"),
63
+ id: internalName?.replace(/ /g, "-"),
65
64
  className: `${cta} ${getBannerSizeClassName(
66
65
  banner_size,
67
66
  image_overlap
@@ -71,8 +71,7 @@ const Carousel = (props) => {
71
71
  };
72
72
  const child = children;
73
73
  const showDots = () => {
74
- var _a, _b;
75
- if (children && ((_b = (_a = child == null ? void 0 : child.props) == null ? void 0 : _a.content) == null ? void 0 : _b.length) > 1) {
74
+ if (children && child?.props?.content?.length > 1) {
76
75
  return /* @__PURE__ */ jsx("div", { className: dots, children: Children.map(children, (_, indx) => /* @__PURE__ */ jsx(
77
76
  "div",
78
77
  {
@@ -102,7 +101,7 @@ const Carousel = (props) => {
102
101
  selected: idx === itemSelected,
103
102
  variant
104
103
  })
105
- ) : items == null ? void 0 : items.map((item, idx) => /* @__PURE__ */ jsx(
104
+ ) : items?.map((item, idx) => /* @__PURE__ */ jsx(
106
105
  CarouselSlide,
107
106
  {
108
107
  selected: idx === itemSelected,
@@ -31,13 +31,17 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
31
31
  import "../FaqAccordion/index.js";
32
32
  import "../FooterDisclosure/FooterDisclosure.css.js";
33
33
  /* empty css */
34
- import "../Forms/Forms.css.js";
35
- import "../Forms/SalesforceFieldsForm.js";
36
34
  import "@hookform/resolvers/zod";
35
+ import "../Input/Checkbox.js";
36
+ import "../Input/CurrencyInput.js";
37
+ import "../Input/Dropdown.js";
38
+ /* empty css */
37
39
  import "../Input/Input.js";
38
40
  import "../Input/Input.css.js";
39
41
  import "../Input/InputPhone.js";
40
42
  import "react-hook-form";
43
+ import "../Forms/Forms.css.js";
44
+ import "../Forms/SalesforceFieldsForm.js";
41
45
  import "../SetContainer/SetContainer.css.js";
42
46
  import "../ImageBillboard/ImageBillboard.css.js";
43
47
  import "../LandingPageHeader/LandingPageHeader.css.js";
@@ -31,7 +31,7 @@ const ContentBanner = ({
31
31
  ),
32
32
  bodyCopy ? /* @__PURE__ */ jsx("div", { className: `${body_copy}`, children: bodyCopy }) : null
33
33
  ] }),
34
- Array.isArray(callToActionRow) && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${call_to_action_row}`, children: callToActionRow == null ? void 0 : callToActionRow.map(
34
+ Array.isArray(callToActionRow) && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${call_to_action_row}`, children: callToActionRow?.map(
35
35
  ({ id: id2, variant: variant2, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(
36
36
  Button,
37
37
  {
@@ -12,8 +12,8 @@ const DownloadTile = ({
12
12
  downloadTiles
13
13
  }) => {
14
14
  return /* @__PURE__ */ jsx("section", { className: `containment section_spacer`, children: /* @__PURE__ */ jsxs("div", { className: table_section, children: [
15
- /* @__PURE__ */ jsx("div", { className: `${table_section_container}`, children: titleText && /* @__PURE__ */ jsxs("div", { className: `${table_header} section_header`, children: [
16
- /* @__PURE__ */ jsx("h2", { className: `text_center`, children: titleText }),
15
+ /* @__PURE__ */ jsx("div", { className: `${table_section_container}`, children: (titleText || description) && /* @__PURE__ */ jsxs("div", { className: `${table_header} section_header`, children: [
16
+ titleText && /* @__PURE__ */ jsx("h2", { className: `text_center`, children: titleText }),
17
17
  description && /* @__PURE__ */ jsx(Fragment, { children: description })
18
18
  ] }) }),
19
19
  /* @__PURE__ */ jsxs("div", { className: `${table_section_container}`, children: [
@@ -18,7 +18,7 @@ const ExecutiveBio = ({
18
18
  {
19
19
  className: img_area,
20
20
  style: {
21
- backgroundImage: `url(${executiveHeadshot == null ? void 0 : executiveHeadshot.src})`
21
+ backgroundImage: `url(${executiveHeadshot?.src})`
22
22
  },
23
23
  role: "presentation",
24
24
  children: " "
@@ -41,7 +41,7 @@ const ExecutiveBioSet = ({
41
41
  {
42
42
  className: img_area,
43
43
  style: {
44
- backgroundImage: `url(${executiveHeadshot == null ? void 0 : executiveHeadshot.src})`
44
+ backgroundImage: `url(${executiveHeadshot?.src})`
45
45
  },
46
46
  role: "presentation",
47
47
  children: " "
@@ -19,8 +19,11 @@ const AccordionItem = (props) => {
19
19
  const isOpen = useAccordion((state) => state.itemOpened);
20
20
  const toggle = (event) => {
21
21
  const ev = event.target;
22
- const evClasses = ev.getAttribute("class");
23
- if (!(evClasses == null ? void 0 : evClasses.includes(summary)) !== (evClasses == null ? void 0 : evClasses.includes(summaryHeader))) {
22
+ let evClasses = ev.getAttribute("class");
23
+ if (!evClasses) {
24
+ evClasses = ev.closest("div")?.getAttribute("class") || null;
25
+ }
26
+ if (!evClasses?.includes(summary) !== (evClasses?.includes(summaryHeader) || evClasses?.includes(icon))) {
24
27
  return;
25
28
  }
26
29
  event.preventDefault();
@@ -46,7 +49,7 @@ const AccordionItemSummary = (props) => {
46
49
  const isOpen = useAccordion((state) => state.itemOpened);
47
50
  return /* @__PURE__ */ jsxs("summary", { className: summary, children: [
48
51
  /* @__PURE__ */ jsx("div", { className: summaryHeader, children: props.children }),
49
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: icon, children: isOpen === props.id ? /* @__PURE__ */ jsx(SvgChevronUp, {}) : /* @__PURE__ */ jsx(SvgChevronDown, {}) }) })
52
+ /* @__PURE__ */ jsx("div", { className: icon, children: isOpen === props.id ? /* @__PURE__ */ jsx(SvgChevronUp, {}) : /* @__PURE__ */ jsx(SvgChevronDown, {}) })
50
53
  ] });
51
54
  };
52
55
  const AccordionItemContent = (props) => {
@@ -29,13 +29,17 @@ import "../../ExecutiveBio/ExecutiveBio.css.js";
29
29
  import "../../FaqAccordion/index.js";
30
30
  import "../../FooterDisclosure/FooterDisclosure.css.js";
31
31
  import { footer_section, footer_wrapper, ft_col, ft_col_header, ft_col_subheader, nested_grid, app_col, footer_mobile, ft_panel_group, ft_panel } from "./FooterSiteMap.css.js";
32
- import "../../Forms/Forms.css.js";
33
- import "../../Forms/SalesforceFieldsForm.js";
34
32
  import "@hookform/resolvers/zod";
33
+ import "../../Input/Checkbox.js";
34
+ import "../../Input/CurrencyInput.js";
35
+ import "../../Input/Dropdown.js";
36
+ /* empty css */
35
37
  import "../../Input/Input.js";
36
38
  import "../../Input/Input.css.js";
37
39
  import "../../Input/InputPhone.js";
38
40
  import "react-hook-form";
41
+ import "../../Forms/Forms.css.js";
42
+ import "../../Forms/SalesforceFieldsForm.js";
39
43
  import "../../SetContainer/SetContainer.css.js";
40
44
  import "../../ImageBillboard/ImageBillboard.css.js";
41
45
  import "../../LandingPageHeader/LandingPageHeader.css.js";
@@ -0,0 +1,10 @@
1
+ import { FormProps } from './ScheduleCall';
2
+
3
+ export type ApplicationStartInputs = {
4
+ first_name: string;
5
+ last_name: string;
6
+ email: string;
7
+ phone: string;
8
+ checkbox__c: string;
9
+ };
10
+ export declare const ApplicationStart: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,191 @@
1
+ "use client";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { zodResolver } from "@hookform/resolvers/zod";
4
+ import { Button } from "../Button/Button.js";
5
+ import "../Button/Button.css.js";
6
+ import "react";
7
+ import "react-use";
8
+ import { Checkbox } from "../Input/Checkbox.js";
9
+ import "../Input/CurrencyInput.js";
10
+ import "../Input/Dropdown.js";
11
+ /* empty css */
12
+ /* empty css */
13
+ import { Input } from "../Input/Input.js";
14
+ import "../Input/Input.css.js";
15
+ import { InputPhone } from "../Input/InputPhone.js";
16
+ import "../icons/ArrowIcon/ArrowIcon.css.js";
17
+ import SvgAxosX from "../icons/AxosX/index.js";
18
+ import SvgComponent from "../icons/AxosX/Blue.js";
19
+ import "../icons/CheckIcon/CheckIcon.css.js";
20
+ /* empty css */
21
+ /* empty css */
22
+ /* empty css */
23
+ /* empty css */
24
+ import { associatedEmail } from "../utils/EverestValidity.js";
25
+ import { getVariant } from "../utils/getVariant.js";
26
+ import clsx from "clsx";
27
+ import { useForm, FormProvider } from "react-hook-form";
28
+ import * as z from "zod";
29
+ import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, fullRowForm, disclosureForm, actions } from "./Forms.css.js";
30
+ import { SalesforceSchema } from "./SalesforceFieldsForm.js";
31
+ const ApplicationStart = ({
32
+ icon = false,
33
+ children,
34
+ onSubmit = (values) => {
35
+ console.log(values);
36
+ },
37
+ disclosure,
38
+ variant: fullVariant = "primary",
39
+ headline,
40
+ description,
41
+ callToAction,
42
+ validateEmail,
43
+ id
44
+ }) => {
45
+ const schema = z.object({
46
+ first_name: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "First Name is required." }),
47
+ last_name: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "Last Name is required." }),
48
+ email: z.string().email({ message: "Email is required." }).refine(async (val) => await validateEmail(val)),
49
+ phone: z.string().regex(/[\d-]{10}/).min(10, { message: "Phone is required." }).max(12, { message: "Phone is required." }).transform((val, ctx) => {
50
+ const removeDashes = val.replace(/-/gi, "");
51
+ if (removeDashes.length !== 10) {
52
+ ctx.addIssue({
53
+ code: z.ZodIssueCode.custom,
54
+ message: "Phone must have at least 10 and no more than 10 characters."
55
+ });
56
+ return z.NEVER;
57
+ }
58
+ return removeDashes;
59
+ }),
60
+ checkbox__c: z.boolean().transform((val) => val.toString())
61
+ });
62
+ const methods = useForm({
63
+ resolver: zodResolver(schema.merge(SalesforceSchema), {
64
+ async: true
65
+ }),
66
+ mode: "all",
67
+ defaultValues: {
68
+ email: ""
69
+ }
70
+ });
71
+ const {
72
+ handleSubmit,
73
+ register,
74
+ formState: { errors, isValid, isSubmitting }
75
+ } = methods;
76
+ const submitForm = async (data) => {
77
+ await onSubmit(data);
78
+ };
79
+ const variant = getVariant(fullVariant);
80
+ return /* @__PURE__ */ jsx(
81
+ "section",
82
+ {
83
+ id: `id_${id}`,
84
+ className: clsx(formContainer({ variant })),
85
+ children: /* @__PURE__ */ jsx("div", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
86
+ icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
87
+ /* @__PURE__ */ jsxs("div", { className: `${headerContainer} text_center`, children: [
88
+ /* @__PURE__ */ jsx("h2", { className: clsx("header_2", headerForm({ variant })), children: headline }),
89
+ description && /* @__PURE__ */ jsx("div", { className: `${form} ${descriptionField} text_center`, children: description })
90
+ ] }),
91
+ /* @__PURE__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
92
+ /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
93
+ /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
94
+ Input,
95
+ {
96
+ id: "first_name",
97
+ ...register("first_name", { required: true }),
98
+ label: "First Name",
99
+ sizes: "medium",
100
+ placeholder: "First Name",
101
+ required: true,
102
+ error: !!errors.first_name,
103
+ helperText: errors.first_name?.message,
104
+ variant
105
+ }
106
+ ) }),
107
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
108
+ Input,
109
+ {
110
+ id: "last_name",
111
+ ...register("last_name", { required: true }),
112
+ label: "Last Name",
113
+ sizes: "medium",
114
+ placeholder: "Last Name",
115
+ required: true,
116
+ error: !!errors.last_name,
117
+ helperText: errors.last_name?.message,
118
+ variant
119
+ }
120
+ ) }),
121
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
122
+ Input,
123
+ {
124
+ id: "email",
125
+ ...register("email", {
126
+ required: true,
127
+ validate: {
128
+ isValid: associatedEmail
129
+ }
130
+ }),
131
+ label: "Email",
132
+ sizes: "medium",
133
+ placeholder: "Email",
134
+ required: true,
135
+ error: !!errors.email,
136
+ helperText: errors.email?.message,
137
+ variant
138
+ }
139
+ ) }),
140
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
141
+ InputPhone,
142
+ {
143
+ id: "phone",
144
+ ...register("phone", { required: true, maxLength: 12 }),
145
+ label: "Phone",
146
+ sizes: "medium",
147
+ placeholder: "Phone",
148
+ required: true,
149
+ error: !!errors.phone,
150
+ helperText: errors.phone?.message,
151
+ variant
152
+ }
153
+ ) }),
154
+ /* @__PURE__ */ jsx("div", { className: fullRowForm, children: /* @__PURE__ */ jsx(
155
+ Checkbox,
156
+ {
157
+ id: "checkbox__c",
158
+ ...register("checkbox__c", {
159
+ required: true,
160
+ maxLength: 12
161
+ }),
162
+ sizes: "medium",
163
+ required: true,
164
+ error: !!errors.checkbox__c,
165
+ helperText: errors.checkbox__c?.message,
166
+ variant,
167
+ children: "By providing your phone number and selecting the checkbox, you have agreed to these Terms and Conditions, and you have agreed to receive automated text messages, calls, and emails for any purpose including but not limited to marketing of products and services by Axos Bank. You understand and agree that such messages may be sent via Automatic Telephone Dialing System and/or artificial or pre-recorded voice, and that such consent is not a condition of receipt of any good or service. Mobile carrier messages and data rates may apply. You may opt out at any time."
168
+ }
169
+ ) })
170
+ ] }),
171
+ children,
172
+ /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
173
+ /* @__PURE__ */ jsx("div", { className: actions, children: /* @__PURE__ */ jsx(
174
+ Button,
175
+ {
176
+ color: getVariant(callToAction?.variant),
177
+ as: "button",
178
+ type: "submit",
179
+ disabled: !isValid || isSubmitting,
180
+ children: callToAction?.displayText
181
+ }
182
+ ) })
183
+ ] })
184
+ ] }) })
185
+ },
186
+ id
187
+ );
188
+ };
189
+ export {
190
+ ApplicationStart
191
+ };
@@ -0,0 +1,11 @@
1
+ import { FormProps } from '../main';
2
+
3
+ export type ContactUsBusinessNmlsIdInputs = {
4
+ first_name: string;
5
+ last_name: string;
6
+ Business_Name__c: string;
7
+ email: string;
8
+ phone: string;
9
+ NMLS_ID__c: string;
10
+ };
11
+ export declare const ContactUsBusiness: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,246 @@
1
+ "use client";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { zodResolver } from "@hookform/resolvers/zod";
4
+ import "../Input/Checkbox.js";
5
+ import "../Input/CurrencyInput.js";
6
+ import "../Input/Dropdown.js";
7
+ /* empty css */
8
+ /* empty css */
9
+ import { Input } from "../Input/Input.js";
10
+ import "../Input/Input.css.js";
11
+ import { InputPhone } from "../Input/InputPhone.js";
12
+ import "../icons/ArrowIcon/ArrowIcon.css.js";
13
+ import SvgAxosX from "../icons/AxosX/index.js";
14
+ import SvgComponent from "../icons/AxosX/Blue.js";
15
+ import "../icons/CheckIcon/CheckIcon.css.js";
16
+ /* empty css */
17
+ /* empty css */
18
+ /* empty css */
19
+ /* empty css */
20
+ import "../Accordion/Accordion.js";
21
+ import "../Accordion/Accordion.css.js";
22
+ import { getVariant } from "../utils/getVariant.js";
23
+ import "../Chevron/Chevron.css.js";
24
+ import "../AlertBanner/AlertBanner.css.js";
25
+ import { Button } from "../Button/Button.js";
26
+ import "../Button/Button.css.js";
27
+ import "react";
28
+ import "react-use";
29
+ /* empty css */
30
+ import "../IconBillboard/IconBillboard.css.js";
31
+ /* empty css */
32
+ import clsx from "clsx";
33
+ /* empty css */
34
+ import "../Carousel/index.js";
35
+ /* empty css */
36
+ import "../HeroBanner/HeroBanner.css.js";
37
+ import "../ContentBanner/ContentBanner.css.js";
38
+ /* empty css */
39
+ import "../ExecutiveBio/ExecutiveBio.css.js";
40
+ import "../FaqAccordion/index.js";
41
+ import "../FooterDisclosure/FooterDisclosure.css.js";
42
+ /* empty css */
43
+ import { useForm, FormProvider } from "react-hook-form";
44
+ import { z } from "zod";
45
+ import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
46
+ import { SalesforceSchema } from "./SalesforceFieldsForm.js";
47
+ import "../SetContainer/SetContainer.css.js";
48
+ import "../ImageBillboard/ImageBillboard.css.js";
49
+ import "../LandingPageHeader/LandingPageHeader.css.js";
50
+ /* empty css */
51
+ import "../Modal/contextApi/store.js";
52
+ /* empty css */
53
+ /* empty css */
54
+ /* empty css */
55
+ /* empty css */
56
+ import "../StepItems/StepItems.css.js";
57
+ import "../Table/Table.css.js";
58
+ /* empty css */
59
+ import "next/script.js";
60
+ /* empty css */
61
+ /* empty css */
62
+ const ContactUsBusiness = ({
63
+ icon = false,
64
+ children,
65
+ onSubmit = (values) => {
66
+ console.log(values);
67
+ },
68
+ disclosure,
69
+ variant: fullVariant = "primary",
70
+ headline,
71
+ description,
72
+ callToAction,
73
+ validateEmail,
74
+ id
75
+ }) => {
76
+ const schema = z.object({
77
+ first_name: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "First Name is required." }),
78
+ last_name: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "Last Name is required." }),
79
+ email: z.string().email({ message: "Email is required." }).refine(async (val) => await validateEmail(val)),
80
+ phone: z.string().regex(/[\d-]{10}/).min(10, { message: "Phone is required." }).max(12, { message: "Phone is required." }).transform((val, ctx) => {
81
+ const removeDashes = val.replace(/-/gi, "");
82
+ if (removeDashes.length !== 10) {
83
+ ctx.addIssue({
84
+ code: z.ZodIssueCode.custom,
85
+ message: "Phone must have at least 10 and no more than 10 characters."
86
+ });
87
+ return z.NEVER;
88
+ }
89
+ return removeDashes;
90
+ }),
91
+ Business_Name__c: z.string().min(1),
92
+ NMLS_ID__c: z.string().min(6).max(7)
93
+ });
94
+ const methods = useForm({
95
+ resolver: zodResolver(
96
+ schema.merge(SalesforceSchema),
97
+ {
98
+ async: true
99
+ },
100
+ { mode: "async" }
101
+ ),
102
+ mode: "onChange",
103
+ shouldUnregister: true,
104
+ defaultValues: {
105
+ email: ""
106
+ }
107
+ });
108
+ const {
109
+ handleSubmit,
110
+ register,
111
+ formState: { errors, isValid, isSubmitting }
112
+ } = methods;
113
+ const submitForm = async (data) => {
114
+ await onSubmit(data);
115
+ };
116
+ const variant = getVariant(fullVariant);
117
+ return /* @__PURE__ */ jsx(
118
+ "section",
119
+ {
120
+ id: `id_${id}`,
121
+ className: clsx(formContainer({ variant })),
122
+ children: /* @__PURE__ */ jsx("div", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
123
+ icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
124
+ /* @__PURE__ */ jsxs("div", { className: `${headerContainer} text_center`, children: [
125
+ /* @__PURE__ */ jsx("h2", { className: clsx("header_2", headerForm({ variant })), children: headline }),
126
+ description && /* @__PURE__ */ jsx("div", { className: `${form} ${descriptionField} text_center`, children: description })
127
+ ] }),
128
+ /* @__PURE__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
129
+ /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
130
+ /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
131
+ Input,
132
+ {
133
+ id: "first_name",
134
+ ...register("first_name", { required: true }),
135
+ label: "First Name",
136
+ sizes: "medium",
137
+ placeholder: "First Name",
138
+ required: true,
139
+ error: !!errors.first_name,
140
+ helperText: errors.first_name?.message,
141
+ variant
142
+ }
143
+ ) }),
144
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
145
+ Input,
146
+ {
147
+ id: "last_name",
148
+ ...register("last_name", { required: true }),
149
+ label: "Last Name",
150
+ sizes: "medium",
151
+ placeholder: "Last Name",
152
+ required: true,
153
+ error: !!errors.last_name,
154
+ helperText: errors.last_name?.message,
155
+ variant
156
+ }
157
+ ) }),
158
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
159
+ Input,
160
+ {
161
+ id: "Business_Name__c",
162
+ ...register("Business_Name__c", {
163
+ required: true
164
+ }),
165
+ type: "text",
166
+ label: "Business Name",
167
+ sizes: "medium",
168
+ placeholder: "Business Name",
169
+ required: true,
170
+ error: !!errors.Business_Name__c,
171
+ helperText: errors.Business_Name__c?.message,
172
+ variant
173
+ }
174
+ ) }),
175
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
176
+ Input,
177
+ {
178
+ id: "email",
179
+ ...register("email", {
180
+ required: true
181
+ }),
182
+ type: "email",
183
+ label: "Email",
184
+ sizes: "medium",
185
+ placeholder: "Email",
186
+ required: true,
187
+ error: !!errors.email,
188
+ helperText: errors.email?.message,
189
+ variant
190
+ }
191
+ ) }),
192
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
193
+ InputPhone,
194
+ {
195
+ id: "phone",
196
+ ...register("phone", { required: true, maxLength: 12 }),
197
+ label: "Phone",
198
+ sizes: "medium",
199
+ placeholder: "Phone",
200
+ type: "tel",
201
+ required: true,
202
+ error: !!errors.phone,
203
+ helperText: errors.phone?.message,
204
+ variant
205
+ }
206
+ ) }),
207
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
208
+ Input,
209
+ {
210
+ id: "NMLS_ID__c",
211
+ ...register("NMLS_ID__c", {
212
+ required: true,
213
+ min: 6,
214
+ max: 7
215
+ }),
216
+ label: "Company NMLS ID",
217
+ placeholder: "Company NMLS ID",
218
+ sizes: "medium",
219
+ required: true,
220
+ error: !!errors.NMLS_ID__c,
221
+ helperText: errors.NMLS_ID__c?.message,
222
+ variant
223
+ }
224
+ ) })
225
+ ] }),
226
+ children,
227
+ /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
228
+ /* @__PURE__ */ jsx("div", { className: actions, children: /* @__PURE__ */ jsx(
229
+ Button,
230
+ {
231
+ color: getVariant(callToAction?.variant),
232
+ as: "button",
233
+ type: "submit",
234
+ disabled: !isValid || isSubmitting,
235
+ children: callToAction?.displayText
236
+ }
237
+ ) })
238
+ ] })
239
+ ] }) })
240
+ },
241
+ id
242
+ );
243
+ };
244
+ export {
245
+ ContactUsBusiness
246
+ };
@@ -0,0 +1,6 @@
1
+ import { FormProps } from './ScheduleCall';
2
+
3
+ export type EmailOnlyInputs = {
4
+ email: string;
5
+ };
6
+ export declare const EmailOnly: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;