@axos-web-dev/shared-components 0.0.75 → 0.0.77
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.
- package/dist/ATMLocator/ATMLocator.d.ts +2 -0
- package/dist/ATMLocator/ATMLocator.js +22 -0
- package/dist/ATMLocator/index.d.ts +1 -0
- package/dist/ATMLocator/index.js +4 -0
- package/dist/AnnualFeeCalculator/AnnualFeeCalculator.css.d.ts +34 -0
- package/dist/AnnualFeeCalculator/AnnualFeeCalculator.css.js +34 -0
- package/dist/AnnualFeeCalculator/index.d.ts +10 -0
- package/dist/AnnualFeeCalculator/index.js +143 -0
- package/dist/ApyCalculator/ApyCalculator.css.d.ts +68 -3
- package/dist/ApyCalculator/ApyCalculator.css.js +29 -22
- package/dist/ApyCalculator/index.d.ts +7 -1
- package/dist/ApyCalculator/index.js +106 -87
- package/dist/ArticlesSet/ArticlesSet.js +2 -2
- package/dist/Calculators/Calculator.d.ts +2 -0
- package/dist/Calculators/Calculator.js +79 -34
- package/dist/Calculators/calculators.js +6 -0
- package/dist/Carousel/index.js +6 -4
- package/dist/Chevron/index.js +7 -5
- package/dist/Comparison/Comparison.js +4 -2
- package/dist/Comparison/ComparisonSet.js +6 -4
- package/dist/ExecutiveBio/ExecutiveBio.js +2 -2
- package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js +7 -5
- package/dist/Forms/CommercialLending.d.ts +1 -1
- package/dist/Forms/CommercialLending.js +16 -2
- package/dist/Forms/ContactUsAAS.js +6 -4
- package/dist/Forms/ContactUsBusiness.js +6 -4
- package/dist/Forms/ContactUsNMLSId.d.ts +10 -0
- package/dist/Forms/ContactUsNMLSId.js +263 -0
- package/dist/Forms/EmailOnly.js +6 -4
- package/dist/Forms/EmailUs.d.ts +1 -1
- package/dist/Forms/EmailUs.js +16 -2
- package/dist/Forms/SuccesForm.js +5 -3
- package/dist/Forms/index.d.ts +1 -0
- package/dist/Forms/index.js +2 -0
- package/dist/HeroBanner/HeroBanner.js +22 -4
- package/dist/HeroBanner/SelectionBanner.css.d.ts +10 -1
- package/dist/HeroBanner/SelectionBanner.css.js +1 -1
- package/dist/Hyperlink/index.js +7 -5
- package/dist/IconBillboard/IconBillboard.css.d.ts +2 -0
- package/dist/IconBillboard/IconBillboard.js +1 -1
- package/dist/ImageBillboard/ImageBillboard.css.d.ts +1 -0
- package/dist/ImageLink/ImageLink.js +5 -3
- package/dist/ImageLink/ImageLinkSet.js +4 -2
- package/dist/ImageLink/index.js +7 -5
- package/dist/Modal/Modal.js +6 -4
- package/dist/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.d.ts +27 -0
- package/dist/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js +22 -0
- package/dist/MonthlyPaymentCalculator/index.d.ts +8 -0
- package/dist/MonthlyPaymentCalculator/index.js +212 -0
- package/dist/NavigationMenu/AxosBank/NavBar.module.js +53 -53
- package/dist/NavigationMenu/AxosBank/SubNavBar.js +31 -18
- package/dist/NavigationMenu/NavItem/index.js +1 -2
- package/dist/SetContainer/SetContainer.js +6 -4
- package/dist/SocialMediaBar/iconsRepository.js +34 -34
- package/dist/StepItemSet/StepItemSet.js +2 -2
- package/dist/assets/AnnualFeeCalculator/AnnualFeeCalculator.css +125 -0
- package/dist/assets/ApyCalculator/ApyCalculator.css +77 -98
- package/dist/assets/CallToActionBar/CallToActionBar.css +4 -0
- package/dist/assets/HeroBanner/SelectionBanner.css +10 -4
- package/dist/assets/IconBillboard/IconBillboard.css +4 -0
- package/dist/assets/ImageBillboard/ImageBillboard.css +1 -0
- package/dist/assets/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css +67 -0
- package/dist/assets/NavigationMenu/AxosBank/NavBar.css.css +154 -150
- package/dist/assets/SetContainer/SetContainer.css +3 -0
- package/dist/assets/Tab/Tab.css +1 -1
- package/dist/assets/globals.css +3 -0
- package/dist/main.d.ts +3 -2
- package/dist/main.js +61 -57
- package/package.json +1 -1
|
@@ -1,14 +1,21 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Button } from "../Button/Button.js";
|
|
4
3
|
import { button } from "../Button/Button.css.js";
|
|
5
4
|
import { useState, useCallback, useEffect } from "react";
|
|
5
|
+
import { container, apy_calculator, calculator_section, section_header, header_theme, mt_8, apy_calculator_form, pis_0, errorTag, fieldset, field_row, relative, label_symbol, cash, prefix_pad, percent, submit_section, span_12, form_disclosure, marketing, marketingTile, bodyContent } from "./ApyCalculator.css.js";
|
|
6
|
+
import { Button } from "../Button/Button.js";
|
|
6
7
|
import "react-use";
|
|
7
|
-
import {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
import { getVariant } from "../utils/getVariant.js";
|
|
9
|
+
import { Chevron } from "../Chevron/index.js";
|
|
10
|
+
import { section_container, content, headerIconBillboard, buttons } from "../IconBillboard/IconBillboard.css.js";
|
|
11
|
+
const ApyCalculator = ({
|
|
12
|
+
header,
|
|
13
|
+
body,
|
|
14
|
+
marketingTiles,
|
|
15
|
+
disclosure,
|
|
16
|
+
variant
|
|
17
|
+
}) => {
|
|
18
|
+
const calculator_variant = getVariant(variant);
|
|
12
19
|
const [initialDeposit, setInititalDeposit] = useState(1e3);
|
|
13
20
|
const [APR, setAPR] = useState(2.32);
|
|
14
21
|
const [APY, setAPY] = useState(2.35);
|
|
@@ -16,12 +23,12 @@ const ApyCalculator = ({ header }) => {
|
|
|
16
23
|
const [compounding, setCompounding] = useState(360);
|
|
17
24
|
const [monthlyDeposits, setMonthlyDeposits] = useState(100);
|
|
18
25
|
const [endingBalance, setEndingBalance] = useState("");
|
|
19
|
-
const [
|
|
26
|
+
const [errors, setErrors] = useState([]);
|
|
20
27
|
const [interestRate, setInterestRate] = useState(0);
|
|
21
28
|
const isValidNumber = (input) => {
|
|
22
29
|
if (typeof input !== "number") {
|
|
23
30
|
return false;
|
|
24
|
-
} else if (input < 0) {
|
|
31
|
+
} else if (input < 0 || Number.isNaN(input)) {
|
|
25
32
|
return false;
|
|
26
33
|
} else
|
|
27
34
|
return true;
|
|
@@ -29,7 +36,7 @@ const ApyCalculator = ({ header }) => {
|
|
|
29
36
|
const isValidAPY = (input) => {
|
|
30
37
|
if (typeof input !== "number") {
|
|
31
38
|
return false;
|
|
32
|
-
} else if (input <= 0) {
|
|
39
|
+
} else if (input <= 0 || Number.isNaN(input)) {
|
|
33
40
|
return false;
|
|
34
41
|
} else
|
|
35
42
|
return true;
|
|
@@ -43,9 +50,27 @@ const ApyCalculator = ({ header }) => {
|
|
|
43
50
|
}, [convertInterest, interestRate, setInterestRate]);
|
|
44
51
|
const handleCalculate = () => {
|
|
45
52
|
convertInterest();
|
|
46
|
-
|
|
47
|
-
|
|
53
|
+
let newErrors = [];
|
|
54
|
+
if (!isValidNumber(initialDeposit)) {
|
|
55
|
+
newErrors.push("Initial Deposit must be a positive number.");
|
|
56
|
+
}
|
|
57
|
+
if (!isValidNumber(months)) {
|
|
58
|
+
newErrors.push("Months must be a positive number.");
|
|
59
|
+
}
|
|
60
|
+
if (!isValidNumber(monthlyDeposits)) {
|
|
61
|
+
newErrors.push("Monthly Deposits must be a positive number.");
|
|
62
|
+
}
|
|
63
|
+
if (!isValidAPY(APY)) {
|
|
64
|
+
newErrors.push("APY must be a positive number.");
|
|
65
|
+
}
|
|
66
|
+
if (!isValidAPY(APR)) {
|
|
67
|
+
newErrors.push("APR must be a positive number.");
|
|
68
|
+
}
|
|
69
|
+
if (newErrors.length > 0) {
|
|
70
|
+
setErrors(newErrors);
|
|
48
71
|
} else {
|
|
72
|
+
newErrors = [];
|
|
73
|
+
setErrors([]);
|
|
49
74
|
let total;
|
|
50
75
|
if (compounding === 360) {
|
|
51
76
|
total = initialDeposit * Math.pow(1 + interestRate / compounding, 30 * months) + monthlyDeposits / (interestRate / 12) * (Math.pow(1 + interestRate / compounding, 30 * months) - 1);
|
|
@@ -88,20 +113,21 @@ const ApyCalculator = ({ header }) => {
|
|
|
88
113
|
return /* @__PURE__ */ jsx(
|
|
89
114
|
"section",
|
|
90
115
|
{
|
|
91
|
-
className: `section_spacer`,
|
|
92
|
-
style: {
|
|
93
|
-
background: vars.colors.secondary.background,
|
|
94
|
-
color: "black",
|
|
95
|
-
paddingBlock: "42px"
|
|
96
|
-
},
|
|
116
|
+
className: `section_spacer ${container({ variant: getVariant(variant) })}`,
|
|
97
117
|
children: /* @__PURE__ */ jsxs("div", { className: `${apy_calculator} containment flex between`, children: [
|
|
98
118
|
/* @__PURE__ */ jsxs("div", { className: `${calculator_section}`, children: [
|
|
99
|
-
/* @__PURE__ */ jsxs("div", { className: `${section_header}`, children: [
|
|
100
|
-
/* @__PURE__ */ jsx(
|
|
101
|
-
|
|
119
|
+
(header || body) && /* @__PURE__ */ jsxs("div", { className: `${section_header}`, children: [
|
|
120
|
+
header && /* @__PURE__ */ jsx(
|
|
121
|
+
"h2",
|
|
122
|
+
{
|
|
123
|
+
className: `header_2 ${header_theme({ variant: calculator_variant })}`,
|
|
124
|
+
children: header
|
|
125
|
+
}
|
|
126
|
+
),
|
|
127
|
+
body && /* @__PURE__ */ jsx("div", { className: mt_8, children: body })
|
|
102
128
|
] }),
|
|
103
129
|
/* @__PURE__ */ jsxs("form", { id: "calculator_form", className: `${apy_calculator_form}`, children: [
|
|
104
|
-
/* @__PURE__ */ jsx("div", { id: "errmsgbox", className: " flex middle", children: /* @__PURE__ */ jsx("
|
|
130
|
+
/* @__PURE__ */ jsx("div", { id: "errmsgbox", className: " flex middle", children: errors.length > 0 && /* @__PURE__ */ jsx("ul", { className: pis_0, children: errors.map((error, index) => /* @__PURE__ */ jsx("li", { className: `${errorTag}`, children: error }, index)) }) }),
|
|
105
131
|
/* @__PURE__ */ jsxs("div", { className: `${fieldset}`, children: [
|
|
106
132
|
/* @__PURE__ */ jsxs("div", { className: `${field_row} ${relative} flex flex_col`, children: [
|
|
107
133
|
/* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "initDeposit", children: "Initial Deposit" }),
|
|
@@ -109,13 +135,13 @@ const ApyCalculator = ({ header }) => {
|
|
|
109
135
|
/* @__PURE__ */ jsx(
|
|
110
136
|
"input",
|
|
111
137
|
{
|
|
112
|
-
className: `${prefix_pad}`,
|
|
138
|
+
className: `${prefix_pad} bordered`,
|
|
113
139
|
id: "initDeposit",
|
|
114
140
|
type: "number",
|
|
115
141
|
step: 100,
|
|
116
142
|
name: "initDeposit",
|
|
117
143
|
value: initialDeposit,
|
|
118
|
-
onChange: (e) => setInititalDeposit(
|
|
144
|
+
onChange: (e) => setInititalDeposit(parseInt(e.target.value))
|
|
119
145
|
}
|
|
120
146
|
)
|
|
121
147
|
] }),
|
|
@@ -125,13 +151,13 @@ const ApyCalculator = ({ header }) => {
|
|
|
125
151
|
/* @__PURE__ */ jsx(
|
|
126
152
|
"input",
|
|
127
153
|
{
|
|
128
|
-
className: `${prefix_pad}`,
|
|
154
|
+
className: `${prefix_pad} bordered`,
|
|
129
155
|
id: "apr",
|
|
130
156
|
type: "number",
|
|
131
157
|
step: 0.01,
|
|
132
158
|
name: "apr",
|
|
133
159
|
value: APR,
|
|
134
|
-
onChange: (e) => updateAPR(
|
|
160
|
+
onChange: (e) => updateAPR(parseFloat(e.target.value))
|
|
135
161
|
}
|
|
136
162
|
)
|
|
137
163
|
] }),
|
|
@@ -141,13 +167,13 @@ const ApyCalculator = ({ header }) => {
|
|
|
141
167
|
/* @__PURE__ */ jsx(
|
|
142
168
|
"input",
|
|
143
169
|
{
|
|
144
|
-
className: `${prefix_pad}`,
|
|
170
|
+
className: `${prefix_pad} bordered`,
|
|
145
171
|
id: "apy",
|
|
146
172
|
type: "number",
|
|
147
173
|
step: 0.01,
|
|
148
174
|
name: "apy",
|
|
149
175
|
value: APY,
|
|
150
|
-
onChange: (e) => updateAPY(
|
|
176
|
+
onChange: (e) => updateAPY(parseFloat(e.target.value))
|
|
151
177
|
}
|
|
152
178
|
)
|
|
153
179
|
] }),
|
|
@@ -156,13 +182,14 @@ const ApyCalculator = ({ header }) => {
|
|
|
156
182
|
/* @__PURE__ */ jsx(
|
|
157
183
|
"input",
|
|
158
184
|
{
|
|
159
|
-
className: `${prefix_pad}`,
|
|
185
|
+
className: `${prefix_pad} bordered`,
|
|
160
186
|
id: "months",
|
|
187
|
+
min: 1,
|
|
161
188
|
maxLength: 4,
|
|
162
189
|
type: "number",
|
|
163
190
|
name: "months",
|
|
164
191
|
value: months,
|
|
165
|
-
onChange: (e) => setMonths(
|
|
192
|
+
onChange: (e) => setMonths(parseInt(e.target.value))
|
|
166
193
|
}
|
|
167
194
|
)
|
|
168
195
|
] }),
|
|
@@ -171,7 +198,7 @@ const ApyCalculator = ({ header }) => {
|
|
|
171
198
|
/* @__PURE__ */ jsxs(
|
|
172
199
|
"select",
|
|
173
200
|
{
|
|
174
|
-
className: `${prefix_pad}`,
|
|
201
|
+
className: `${prefix_pad} bordered`,
|
|
175
202
|
id: "compounding",
|
|
176
203
|
name: "compounding",
|
|
177
204
|
value: compounding,
|
|
@@ -192,13 +219,13 @@ const ApyCalculator = ({ header }) => {
|
|
|
192
219
|
/* @__PURE__ */ jsx(
|
|
193
220
|
"input",
|
|
194
221
|
{
|
|
195
|
-
className: `${prefix_pad}`,
|
|
222
|
+
className: `${prefix_pad} bordered`,
|
|
196
223
|
id: "monthlyDeposits",
|
|
197
224
|
maxLength: 25,
|
|
198
225
|
type: "number",
|
|
199
226
|
value: monthlyDeposits,
|
|
200
227
|
name: "monthlyDeposits",
|
|
201
|
-
onChange: (e) => setMonthlyDeposits(
|
|
228
|
+
onChange: (e) => setMonthlyDeposits(parseInt(e.target.value))
|
|
202
229
|
}
|
|
203
230
|
)
|
|
204
231
|
] }),
|
|
@@ -207,7 +234,7 @@ const ApyCalculator = ({ header }) => {
|
|
|
207
234
|
/* @__PURE__ */ jsx(
|
|
208
235
|
"input",
|
|
209
236
|
{
|
|
210
|
-
className: `${prefix_pad}`,
|
|
237
|
+
className: `${prefix_pad} bordered`,
|
|
211
238
|
id: "endBal",
|
|
212
239
|
maxLength: 30,
|
|
213
240
|
type: "string",
|
|
@@ -224,7 +251,7 @@ const ApyCalculator = ({ header }) => {
|
|
|
224
251
|
children: /* @__PURE__ */ jsx(
|
|
225
252
|
"input",
|
|
226
253
|
{
|
|
227
|
-
className: `${button({ color: "
|
|
254
|
+
className: `${button({ color: "primary", size: "medium", rounded: "medium" })} center`,
|
|
228
255
|
type: "button",
|
|
229
256
|
value: "Calculate",
|
|
230
257
|
onClick: handleCalculate
|
|
@@ -232,66 +259,58 @@ const ApyCalculator = ({ header }) => {
|
|
|
232
259
|
)
|
|
233
260
|
}
|
|
234
261
|
),
|
|
235
|
-
/* @__PURE__ */ jsx("div", { className: `${form_disclosure} push_up_24`, children:
|
|
236
|
-
/* @__PURE__ */ jsx("strong", { children: "NOTE:" }),
|
|
237
|
-
" Our APY Interest Calculator is an educational tool to help you determine potential earnings. Your calculator results are estimates and do not guarantee cost savings or tax benefits. Axos Bank does not guarantee your results as determined by using this calculator."
|
|
238
|
-
] }) })
|
|
262
|
+
disclosure && /* @__PURE__ */ jsx("div", { className: `${form_disclosure} push_up_24`, children: disclosure })
|
|
239
263
|
] })
|
|
240
264
|
] })
|
|
241
265
|
] }),
|
|
242
|
-
/* @__PURE__ */
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
{
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
266
|
+
/* @__PURE__ */ jsx("div", { className: `${marketing} ${section_container}`, children: marketingTiles && marketingTiles?.map(
|
|
267
|
+
({ id, headline, bodyCopy, callToActionRow }) => /* @__PURE__ */ jsxs(
|
|
268
|
+
"div",
|
|
269
|
+
{
|
|
270
|
+
className: `${container({ variant: getVariant(variant) })} ${marketingTile} rounded bordered`,
|
|
271
|
+
children: [
|
|
272
|
+
/* @__PURE__ */ jsx("div", { className: `${content} ${bodyContent}`, children: /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
|
|
273
|
+
/* @__PURE__ */ jsx(
|
|
274
|
+
"div",
|
|
275
|
+
{
|
|
276
|
+
className: `header_3 ${header_theme({ variant: calculator_variant })}`,
|
|
277
|
+
children: headline
|
|
278
|
+
}
|
|
279
|
+
),
|
|
280
|
+
/* @__PURE__ */ jsx("div", { children: bodyCopy })
|
|
281
|
+
] }) }),
|
|
282
|
+
callToActionRow && /* @__PURE__ */ jsx("div", { className: `${buttons} middle`, children: callToActionRow.map(
|
|
283
|
+
({
|
|
284
|
+
id: id2,
|
|
285
|
+
variant: variant2,
|
|
286
|
+
displayText,
|
|
287
|
+
targetUrl,
|
|
288
|
+
type
|
|
289
|
+
}) => type === "Button" ? /* @__PURE__ */ jsx(
|
|
253
290
|
Button,
|
|
254
291
|
{
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
color: "secondary",
|
|
292
|
+
targetUrl,
|
|
293
|
+
color: getVariant(variant2),
|
|
258
294
|
size: "medium",
|
|
259
295
|
rounded: "medium",
|
|
260
|
-
children:
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
/* @__PURE__ */ jsxs("tbody", { children: [
|
|
279
|
-
/* @__PURE__ */ jsxs("tr", { children: [
|
|
280
|
-
/* @__PURE__ */ jsx("td", { "aria-label": "Select Checking", children: /* @__PURE__ */ jsx("a", { className: "link", href: "/products/select-savings", children: "Select Savings" }) }),
|
|
281
|
-
/* @__PURE__ */ jsx("td", { "aria-label": "Up to 5.25%", children: "Up to 0.20%" })
|
|
282
|
-
] }),
|
|
283
|
-
/* @__PURE__ */ jsxs("tr", { children: [
|
|
284
|
-
/* @__PURE__ */ jsx("td", { "aria-label": "Select Checking", children: /* @__PURE__ */ jsx("a", { className: "link", href: "/products/select-checking", children: "Select Checking" }) }),
|
|
285
|
-
/* @__PURE__ */ jsx("td", { "aria-label": "Up to 5.25%", children: "Up to 0.10%" })
|
|
286
|
-
] })
|
|
287
|
-
] })
|
|
288
|
-
] })
|
|
289
|
-
] })
|
|
290
|
-
}
|
|
291
|
-
)
|
|
292
|
-
] }),
|
|
293
|
-
/* @__PURE__ */ jsx("div", {})
|
|
294
|
-
] })
|
|
296
|
+
children: displayText
|
|
297
|
+
},
|
|
298
|
+
id2
|
|
299
|
+
) : /* @__PURE__ */ jsx(
|
|
300
|
+
Chevron,
|
|
301
|
+
{
|
|
302
|
+
targetUrl,
|
|
303
|
+
variant: getVariant(variant2),
|
|
304
|
+
children: displayText
|
|
305
|
+
},
|
|
306
|
+
id2
|
|
307
|
+
)
|
|
308
|
+
) })
|
|
309
|
+
]
|
|
310
|
+
},
|
|
311
|
+
id
|
|
312
|
+
)
|
|
313
|
+
) })
|
|
295
314
|
] })
|
|
296
315
|
}
|
|
297
316
|
);
|
|
@@ -50,7 +50,7 @@ const ArticlesSet = ({
|
|
|
50
50
|
stroke: "none",
|
|
51
51
|
strokeWidth: "1",
|
|
52
52
|
fill: "none",
|
|
53
|
-
|
|
53
|
+
fillRule: "evenodd",
|
|
54
54
|
transform: "rotate(90deg)",
|
|
55
55
|
children: /* @__PURE__ */ jsx(
|
|
56
56
|
"g",
|
|
@@ -77,7 +77,7 @@ const ArticlesSet = ({
|
|
|
77
77
|
d: "M1.13491422,0.187942261 C0.94986252,0.00203917967 0.649789062,0.00203917967 0.464737367,0.187942261 L0.187303721,0.466652324 C0.00225202625,0.652555405 0.00225202625,0.95391307 0.187303721,1.13991252 L4.55851447,5.53075249 L0.187303721,9.92149608 C0.00225202625,10.1074955 0.00225202625,10.4088532 0.187303721,10.5947563 L0.464737367,10.8734663 C0.649789062,11.0593694 0.94986252,11.0593694 1.13491422,10.8734663 L6.45248835,5.53075249 L1.13491422,0.187942261 Z",
|
|
78
78
|
id: "Fill-1",
|
|
79
79
|
fill: "#2F5B88",
|
|
80
|
-
|
|
80
|
+
fillRule: "evenodd",
|
|
81
81
|
mask: "url(#mask-2)"
|
|
82
82
|
}
|
|
83
83
|
)
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { IconBillboardProps } from '../IconBillboard/IconBillboard.interface';
|
|
1
2
|
import { default as React } from 'react';
|
|
2
3
|
|
|
3
4
|
export interface CalculatorProps {
|
|
@@ -9,5 +10,6 @@ export interface CalculatorProps {
|
|
|
9
10
|
headline?: React.ReactNode;
|
|
10
11
|
bodyCopy?: React.ReactNode;
|
|
11
12
|
disclosure?: React.ReactNode;
|
|
13
|
+
marketingTiles?: IconBillboardProps[];
|
|
12
14
|
}
|
|
13
15
|
export declare const Calculator: (props: CalculatorProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { ATMLocator } from "../ATMLocator/ATMLocator.js";
|
|
4
|
+
import { AnnualFeeCalculator } from "../AnnualFeeCalculator/index.js";
|
|
5
|
+
import { ApyCalculator } from "../ApyCalculator/index.js";
|
|
3
6
|
import "@hookform/resolvers/zod";
|
|
4
7
|
import "../Modal/contextApi/store.js";
|
|
5
8
|
import { getVariant } from "../utils/getVariant.js";
|
|
@@ -31,7 +34,6 @@ import "../Accordion/Accordion.js";
|
|
|
31
34
|
import "../Accordion/Accordion.css.js";
|
|
32
35
|
import "../Chevron/Chevron.css.js";
|
|
33
36
|
import "../AlertBanner/AlertBanner.css.js";
|
|
34
|
-
/* empty css */
|
|
35
37
|
import "../Article/Article.css.js";
|
|
36
38
|
import "../ArticlesSet/ArticlesSet.css.js";
|
|
37
39
|
/* empty css */
|
|
@@ -59,12 +61,12 @@ import "../ImageBillboard/ImageBillboard.css.js";
|
|
|
59
61
|
import "../LandingPageHeader/LandingPageHeader.css.js";
|
|
60
62
|
import "../LoadingIndicator/LoadingIndicator.css.js";
|
|
61
63
|
/* empty css */
|
|
62
|
-
import "next/link.js";
|
|
63
64
|
/* empty css */
|
|
64
65
|
/* empty css */
|
|
65
66
|
/* empty css */
|
|
66
67
|
/* empty css */
|
|
67
68
|
import "next/image.js";
|
|
69
|
+
import "next/link.js";
|
|
68
70
|
/* empty css */
|
|
69
71
|
/* empty css */
|
|
70
72
|
/* empty css */
|
|
@@ -79,10 +81,19 @@ import "next/script.js";
|
|
|
79
81
|
/* empty css */
|
|
80
82
|
/* empty css */
|
|
81
83
|
import "../Input/RadioButton.js";
|
|
84
|
+
import { MonthlyPaymentCalculator } from "../MonthlyPaymentCalculator/index.js";
|
|
82
85
|
import { iframeResizer } from "iframe-resizer";
|
|
83
86
|
import { calculators } from "./calculators.js";
|
|
84
87
|
const Calculator = (props) => {
|
|
85
|
-
const {
|
|
88
|
+
const {
|
|
89
|
+
id,
|
|
90
|
+
bodyCopy,
|
|
91
|
+
icon = false,
|
|
92
|
+
disclosure,
|
|
93
|
+
headline,
|
|
94
|
+
name,
|
|
95
|
+
marketingTiles
|
|
96
|
+
} = props;
|
|
86
97
|
const ref = useRef(null);
|
|
87
98
|
const iframe = calculators.get(name || "");
|
|
88
99
|
useEffect(() => {
|
|
@@ -91,39 +102,73 @@ const Calculator = (props) => {
|
|
|
91
102
|
}
|
|
92
103
|
}, []);
|
|
93
104
|
const variant = getVariant(props.variant);
|
|
94
|
-
|
|
95
|
-
/* @__PURE__ */
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
className: clsx(
|
|
101
|
-
"header_2 text_center",
|
|
102
|
-
calculator_headline({ variant })
|
|
103
|
-
),
|
|
104
|
-
children: headline
|
|
105
|
-
}
|
|
106
|
-
),
|
|
107
|
-
/* @__PURE__ */ jsx("div", { className: clsx(calculator_description({ variant })), children: bodyCopy })
|
|
108
|
-
] }),
|
|
109
|
-
/* @__PURE__ */ jsx("div", { className: "calc section-narrow", children: /* @__PURE__ */ jsx(
|
|
110
|
-
"iframe",
|
|
105
|
+
if (name?.toLowerCase()?.includes("atm locator")) {
|
|
106
|
+
return /* @__PURE__ */ jsx(ATMLocator, {});
|
|
107
|
+
}
|
|
108
|
+
if (name === "APY Calculator") {
|
|
109
|
+
return /* @__PURE__ */ jsx(
|
|
110
|
+
ApyCalculator,
|
|
111
111
|
{
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
},
|
|
118
|
-
scrolling: "no",
|
|
119
|
-
frameBorder: "0",
|
|
120
|
-
className: "iframe-calculator",
|
|
121
|
-
allow: "from",
|
|
122
|
-
src: iframe?.src
|
|
112
|
+
header: headline,
|
|
113
|
+
body: bodyCopy,
|
|
114
|
+
marketingTiles,
|
|
115
|
+
variant,
|
|
116
|
+
disclosure
|
|
123
117
|
}
|
|
124
|
-
)
|
|
125
|
-
|
|
126
|
-
|
|
118
|
+
);
|
|
119
|
+
} else if (name === "Monthly Payment Calculator") {
|
|
120
|
+
return /* @__PURE__ */ jsx(
|
|
121
|
+
MonthlyPaymentCalculator,
|
|
122
|
+
{
|
|
123
|
+
header: headline,
|
|
124
|
+
body: bodyCopy,
|
|
125
|
+
variant
|
|
126
|
+
}
|
|
127
|
+
);
|
|
128
|
+
} else if (name === "Annual Fee Calculator") {
|
|
129
|
+
return /* @__PURE__ */ jsx(
|
|
130
|
+
AnnualFeeCalculator,
|
|
131
|
+
{
|
|
132
|
+
header: headline,
|
|
133
|
+
body: bodyCopy,
|
|
134
|
+
marketingTiles,
|
|
135
|
+
variant
|
|
136
|
+
}
|
|
137
|
+
);
|
|
138
|
+
} else
|
|
139
|
+
return /* @__PURE__ */ jsx("section", { id, className: "", children: /* @__PURE__ */ jsxs("div", { className: clsx("containment"), children: [
|
|
140
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
141
|
+
icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
|
|
142
|
+
/* @__PURE__ */ jsx(
|
|
143
|
+
"h2",
|
|
144
|
+
{
|
|
145
|
+
className: clsx(
|
|
146
|
+
"header_2 text_center",
|
|
147
|
+
calculator_headline({ variant })
|
|
148
|
+
),
|
|
149
|
+
children: headline
|
|
150
|
+
}
|
|
151
|
+
),
|
|
152
|
+
/* @__PURE__ */ jsx("div", { className: clsx(calculator_description({ variant })), children: bodyCopy })
|
|
153
|
+
] }),
|
|
154
|
+
/* @__PURE__ */ jsx("div", { className: "calc section-narrow", children: /* @__PURE__ */ jsx(
|
|
155
|
+
"iframe",
|
|
156
|
+
{
|
|
157
|
+
ref,
|
|
158
|
+
style: {
|
|
159
|
+
width: "100%",
|
|
160
|
+
maxWidth: "100%",
|
|
161
|
+
minHeight: "clamp(1100px, 200vh)"
|
|
162
|
+
},
|
|
163
|
+
scrolling: "no",
|
|
164
|
+
frameBorder: "0",
|
|
165
|
+
className: "iframe-calculator",
|
|
166
|
+
allow: "from",
|
|
167
|
+
src: iframe?.src
|
|
168
|
+
}
|
|
169
|
+
) }),
|
|
170
|
+
/* @__PURE__ */ jsx("div", { className: clsx(calculator_description({ variant })), children: disclosure })
|
|
171
|
+
] }) });
|
|
127
172
|
};
|
|
128
173
|
export {
|
|
129
174
|
Calculator
|
|
@@ -96,6 +96,12 @@ const calculators = /* @__PURE__ */ new Map([
|
|
|
96
96
|
[
|
|
97
97
|
"Rent or buy?",
|
|
98
98
|
{ src: "https://www.fintactix.com/bofi/tools/mortgage/m02" }
|
|
99
|
+
],
|
|
100
|
+
[
|
|
101
|
+
"401(k) Calculator",
|
|
102
|
+
{
|
|
103
|
+
src: "https://www.fintactix.com/bofi/tools/retirement/r02"
|
|
104
|
+
}
|
|
99
105
|
]
|
|
100
106
|
]);
|
|
101
107
|
export {
|
package/dist/Carousel/index.js
CHANGED
|
@@ -16,16 +16,17 @@ import { getVariant } from "../utils/getVariant.js";
|
|
|
16
16
|
import "../Accordion/Accordion.js";
|
|
17
17
|
import "../Accordion/Accordion.css.js";
|
|
18
18
|
import "../AlertBanner/AlertBanner.css.js";
|
|
19
|
+
import "../Button/Button.css.js";
|
|
20
|
+
import React, { useEffect, Children, cloneElement } from "react";
|
|
21
|
+
import "../ApyCalculator/ApyCalculator.css.js";
|
|
19
22
|
import "../Modal/contextApi/store.js";
|
|
20
23
|
import clsx from "clsx";
|
|
21
|
-
import React, { useEffect, Children, cloneElement } from "react";
|
|
22
|
-
import "../Button/Button.css.js";
|
|
23
24
|
import "react-use";
|
|
24
|
-
/* empty css */
|
|
25
25
|
import "../Article/Article.css.js";
|
|
26
26
|
import "../ArticlesSet/ArticlesSet.css.js";
|
|
27
27
|
/* empty css */
|
|
28
28
|
/* empty css */
|
|
29
|
+
import "../AnnualFeeCalculator/AnnualFeeCalculator.css.js";
|
|
29
30
|
import "@hookform/resolvers/zod";
|
|
30
31
|
import "../Input/Checkbox.js";
|
|
31
32
|
import "../Input/CurrencyInput.js";
|
|
@@ -40,6 +41,7 @@ import "../Forms/Forms.css.js";
|
|
|
40
41
|
import "../Forms/SalesforceFieldsForm.js";
|
|
41
42
|
import "../LoadingIndicator/LoadingIndicator.css.js";
|
|
42
43
|
import "../Input/RadioButton.js";
|
|
44
|
+
import "../MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
|
|
43
45
|
import "iframe-resizer";
|
|
44
46
|
import "../Calculators/calculator.css.js";
|
|
45
47
|
/* empty css */
|
|
@@ -61,12 +63,12 @@ import "../ImageBillboard/ImageBillboard.css.js";
|
|
|
61
63
|
import "../LandingPageHeader/LandingPageHeader.css.js";
|
|
62
64
|
import "../Chevron/Chevron.css.js";
|
|
63
65
|
/* empty css */
|
|
64
|
-
import "next/link.js";
|
|
65
66
|
/* empty css */
|
|
66
67
|
/* empty css */
|
|
67
68
|
/* empty css */
|
|
68
69
|
/* empty css */
|
|
69
70
|
import "next/image.js";
|
|
71
|
+
import "next/link.js";
|
|
70
72
|
/* empty css */
|
|
71
73
|
/* empty css */
|
|
72
74
|
/* empty css */
|
package/dist/Chevron/index.js
CHANGED
|
@@ -9,22 +9,23 @@ import "../icons/CheckIcon/CheckIcon.css.js";
|
|
|
9
9
|
import "../Accordion/Accordion.js";
|
|
10
10
|
import "../Accordion/Accordion.css.js";
|
|
11
11
|
import "../AlertBanner/AlertBanner.css.js";
|
|
12
|
+
import "../Button/Button.css.js";
|
|
13
|
+
import "react";
|
|
14
|
+
import "../ApyCalculator/ApyCalculator.css.js";
|
|
12
15
|
import { useGlobalContext } from "../Modal/contextApi/store.js";
|
|
13
16
|
import { findMoreAxosDomains } from "../utils/allowedAxosDomains.js";
|
|
14
17
|
import { getVariant } from "../utils/getVariant.js";
|
|
15
18
|
import { validateLink } from "../utils/validateExternalLinks.js";
|
|
16
19
|
import "clsx";
|
|
17
|
-
import "react";
|
|
18
|
-
import "../Button/Button.css.js";
|
|
19
20
|
import "react-use";
|
|
20
|
-
|
|
21
|
+
import "../IconBillboard/IconBillboard.css.js";
|
|
21
22
|
import "../Article/Article.css.js";
|
|
22
23
|
import "../ArticlesSet/ArticlesSet.css.js";
|
|
23
24
|
/* empty css */
|
|
24
25
|
/* empty css */
|
|
25
26
|
/* empty css */
|
|
26
|
-
import "../IconBillboard/IconBillboard.css.js";
|
|
27
27
|
/* empty css */
|
|
28
|
+
import "../AnnualFeeCalculator/AnnualFeeCalculator.css.js";
|
|
28
29
|
import "@hookform/resolvers/zod";
|
|
29
30
|
import "../Input/Checkbox.js";
|
|
30
31
|
import "../Input/CurrencyInput.js";
|
|
@@ -39,6 +40,7 @@ import "../Forms/Forms.css.js";
|
|
|
39
40
|
import "../Forms/SalesforceFieldsForm.js";
|
|
40
41
|
import "../LoadingIndicator/LoadingIndicator.css.js";
|
|
41
42
|
import "../Input/RadioButton.js";
|
|
43
|
+
import "../MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
|
|
42
44
|
import "iframe-resizer";
|
|
43
45
|
import "../Calculators/calculator.css.js";
|
|
44
46
|
/* empty css */
|
|
@@ -61,12 +63,12 @@ import "../ImageBillboard/ImageBillboard.css.js";
|
|
|
61
63
|
import "../LandingPageHeader/LandingPageHeader.css.js";
|
|
62
64
|
import { chevron_wrapper, chevron } from "./Chevron.css.js";
|
|
63
65
|
/* empty css */
|
|
64
|
-
import "next/link.js";
|
|
65
66
|
/* empty css */
|
|
66
67
|
/* empty css */
|
|
67
68
|
/* empty css */
|
|
68
69
|
/* empty css */
|
|
69
70
|
import "next/image.js";
|
|
71
|
+
import "next/link.js";
|
|
70
72
|
/* empty css */
|
|
71
73
|
/* empty css */
|
|
72
74
|
/* empty css */
|