@axos-web-dev/shared-components 0.0.84 → 0.0.85
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/Calculators/AnnualFeeCalculator/index.d.ts +1 -1
- package/dist/Calculators/AnnualFeeCalculator/index.js +3 -3
- package/dist/Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.d.ts +109 -0
- package/dist/Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js +41 -0
- package/dist/Calculators/BalanceAPYCalculator/index.d.ts +10 -0
- package/dist/Calculators/BalanceAPYCalculator/index.js +192 -0
- package/dist/Calculators/Calculator.d.ts +1 -1
- package/dist/Calculators/Calculator.js +19 -7
- package/dist/Carousel/index.js +6 -5
- package/dist/Chevron/index.js +6 -5
- package/dist/Comparison/Comparison.js +6 -5
- package/dist/Comparison/ComparisonSet.js +6 -5
- package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js +6 -5
- package/dist/Forms/ContactUsAAS.js +6 -62
- package/dist/Forms/ContactUsBusiness.js +6 -5
- package/dist/Forms/ContactUsNMLSId.js +6 -5
- package/dist/Forms/EmailOnly.js +6 -5
- package/dist/Forms/SuccesForm.js +7 -6
- package/dist/Hyperlink/index.js +6 -5
- package/dist/ImageLink/ImageLink.js +6 -5
- package/dist/ImageLink/ImageLinkSet.js +6 -5
- package/dist/ImageLink/index.js +6 -5
- package/dist/Modal/Modal.js +6 -5
- package/dist/NavigationMenu/AxosBank/SubNavBar.js +6 -5
- package/dist/SetContainer/SetContainer.js +6 -5
- package/dist/Table/Table.d.ts +1 -1
- package/dist/Table/Table.interface.d.ts +5 -3
- package/dist/Table/Table.js +11 -3
- package/dist/assets/Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css +200 -0
- package/package.json +3 -1
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useRef, useState, useEffect } from "react";
|
|
4
|
-
import { container, calc_container, calc_block, pb0_1023, slider_block_wrapper, w100, stat_row, balance_wrapper, fb50, stat, slider_wrapper, slider, pt0_1023, text_block } from "./AnnualFeeCalculator.css.js";
|
|
5
3
|
import { Button } from "../../Button/Button.js";
|
|
6
4
|
import { Chevron } from "../../Chevron/index.js";
|
|
7
|
-
import { getVariant } from "../../utils/getVariant.js";
|
|
8
5
|
import { title } from "../../IconBillboard/IconBillboard.css.js";
|
|
6
|
+
import { getVariant } from "../../utils/getVariant.js";
|
|
7
|
+
import { useRef, useState, useEffect } from "react";
|
|
8
|
+
import { container, calc_container, calc_block, pb0_1023, slider_block_wrapper, w100, stat_row, balance_wrapper, fb50, stat, slider_wrapper, slider, pt0_1023, text_block } from "./AnnualFeeCalculator.css.js";
|
|
9
9
|
const AnnualFeeCalculator = ({
|
|
10
10
|
marketingTiles,
|
|
11
11
|
variant
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
export declare const container: import('@vanilla-extract/recipes').RuntimeFn<{
|
|
2
|
+
variant: {
|
|
3
|
+
primary: {
|
|
4
|
+
background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
5
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
6
|
+
};
|
|
7
|
+
secondary: {
|
|
8
|
+
background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
9
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
10
|
+
};
|
|
11
|
+
tertiary: {
|
|
12
|
+
background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
13
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
14
|
+
};
|
|
15
|
+
quaternary: {
|
|
16
|
+
background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
17
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
}>;
|
|
21
|
+
export declare const table_container: string;
|
|
22
|
+
export declare const calculator_wrapper: string;
|
|
23
|
+
export declare const input_container: string;
|
|
24
|
+
export declare const input_label: string;
|
|
25
|
+
export declare const calculator_input: string;
|
|
26
|
+
export declare const d_label: string;
|
|
27
|
+
export declare const m_label: string;
|
|
28
|
+
export declare const calculator_button: string;
|
|
29
|
+
export declare const max_balance: string;
|
|
30
|
+
export declare const error_message: string;
|
|
31
|
+
export declare const calc_icon: string;
|
|
32
|
+
export declare const header_container: string;
|
|
33
|
+
export declare const header_calc: import('@vanilla-extract/recipes').RuntimeFn<{
|
|
34
|
+
variant: {
|
|
35
|
+
primary: {
|
|
36
|
+
readonly selectors: {
|
|
37
|
+
[x: string]: {
|
|
38
|
+
WebkitBackgroundClip: string;
|
|
39
|
+
backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
40
|
+
WebkitTextFillColor: string;
|
|
41
|
+
textShadow: string;
|
|
42
|
+
color?: undefined;
|
|
43
|
+
} | {
|
|
44
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
45
|
+
WebkitBackgroundClip?: undefined;
|
|
46
|
+
backgroundImage?: undefined;
|
|
47
|
+
WebkitTextFillColor?: undefined;
|
|
48
|
+
textShadow?: undefined;
|
|
49
|
+
};
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
secondary: {
|
|
53
|
+
selectors: {
|
|
54
|
+
[x: string]: {
|
|
55
|
+
WebkitBackgroundClip: "text";
|
|
56
|
+
backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
57
|
+
WebkitTextFillColor: "transparent";
|
|
58
|
+
textShadow: "0px 0px #00000000";
|
|
59
|
+
color?: undefined;
|
|
60
|
+
} | {
|
|
61
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
62
|
+
WebkitBackgroundClip?: undefined;
|
|
63
|
+
backgroundImage?: undefined;
|
|
64
|
+
WebkitTextFillColor?: undefined;
|
|
65
|
+
textShadow?: undefined;
|
|
66
|
+
};
|
|
67
|
+
};
|
|
68
|
+
};
|
|
69
|
+
tertiary: {
|
|
70
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
71
|
+
};
|
|
72
|
+
quaternary: {
|
|
73
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
74
|
+
};
|
|
75
|
+
};
|
|
76
|
+
}>;
|
|
77
|
+
export declare const calc_text: string;
|
|
78
|
+
export declare const description_text: import('@vanilla-extract/recipes').RuntimeFn<{
|
|
79
|
+
variant: {
|
|
80
|
+
primary: {
|
|
81
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
82
|
+
};
|
|
83
|
+
secondary: {
|
|
84
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
85
|
+
};
|
|
86
|
+
tertiary: {
|
|
87
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
88
|
+
};
|
|
89
|
+
quaternary: {
|
|
90
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
91
|
+
};
|
|
92
|
+
};
|
|
93
|
+
}>;
|
|
94
|
+
export declare const calc_disclosure: import('@vanilla-extract/recipes').RuntimeFn<{
|
|
95
|
+
variant: {
|
|
96
|
+
primary: {
|
|
97
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
98
|
+
};
|
|
99
|
+
secondary: {
|
|
100
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
101
|
+
};
|
|
102
|
+
tertiary: {
|
|
103
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
104
|
+
};
|
|
105
|
+
quaternary: {
|
|
106
|
+
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
107
|
+
};
|
|
108
|
+
};
|
|
109
|
+
}>;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/* empty css */
|
|
2
|
+
/* empty css */
|
|
3
|
+
/* empty css */
|
|
4
|
+
/* empty css */
|
|
5
|
+
import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
6
|
+
var container = createRuntimeFn({ defaultClassName: "_1mjmksf0", variantClassNames: { variant: { primary: "_1mjmksf1", secondary: "_1mjmksf2", tertiary: "_1mjmksf3", quaternary: "_1mjmksf4" } }, defaultVariants: {}, compoundVariants: [] });
|
|
7
|
+
var table_container = "_1mjmksf5";
|
|
8
|
+
var calculator_wrapper = "_1mjmksf6";
|
|
9
|
+
var input_container = "_1mjmksf7";
|
|
10
|
+
var input_label = "_1mjmksf8";
|
|
11
|
+
var calculator_input = "_1mjmksf9";
|
|
12
|
+
var d_label = "_1mjmksfa";
|
|
13
|
+
var m_label = "_1mjmksfb";
|
|
14
|
+
var calculator_button = "_1mjmksfc";
|
|
15
|
+
var max_balance = "_1mjmksfd";
|
|
16
|
+
var error_message = "_1mjmksfe";
|
|
17
|
+
var calc_icon = "_1mjmksff";
|
|
18
|
+
var header_container = "_1mjmksfg";
|
|
19
|
+
var header_calc = createRuntimeFn({ defaultClassName: "_1mjmksfh", variantClassNames: { variant: { primary: "_1mjmksfi", secondary: "_1mjmksfj", tertiary: "_1mjmksfk", quaternary: "_1mjmksfl" } }, defaultVariants: {}, compoundVariants: [] });
|
|
20
|
+
var calc_text = "_1mjmksfm";
|
|
21
|
+
var description_text = createRuntimeFn({ defaultClassName: "_1mjmksfn", variantClassNames: { variant: { primary: "_1mjmksfo", secondary: "_1mjmksfp", tertiary: "_1mjmksfq", quaternary: "_1mjmksfr" } }, defaultVariants: {}, compoundVariants: [] });
|
|
22
|
+
var calc_disclosure = createRuntimeFn({ defaultClassName: "_1mjmksfs", variantClassNames: { variant: { primary: "_1mjmksft", secondary: "_1mjmksfu", tertiary: "_1mjmksfv", quaternary: "_1mjmksfw" } }, defaultVariants: {}, compoundVariants: [] });
|
|
23
|
+
export {
|
|
24
|
+
calc_disclosure,
|
|
25
|
+
calc_icon,
|
|
26
|
+
calc_text,
|
|
27
|
+
calculator_button,
|
|
28
|
+
calculator_input,
|
|
29
|
+
calculator_wrapper,
|
|
30
|
+
container,
|
|
31
|
+
d_label,
|
|
32
|
+
description_text,
|
|
33
|
+
error_message,
|
|
34
|
+
header_calc,
|
|
35
|
+
header_container,
|
|
36
|
+
input_container,
|
|
37
|
+
input_label,
|
|
38
|
+
m_label,
|
|
39
|
+
max_balance,
|
|
40
|
+
table_container
|
|
41
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { default as React, FC } from 'react';
|
|
2
|
+
|
|
3
|
+
export interface BalanceAPYCalculatorProps {
|
|
4
|
+
headline?: React.ReactNode | string;
|
|
5
|
+
icon?: boolean;
|
|
6
|
+
bodyCopy?: React.ReactNode | string;
|
|
7
|
+
disclosure: React.ReactNode | string;
|
|
8
|
+
variant: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const BalanceAPYCalculator: FC<BalanceAPYCalculatorProps>;
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Button } from "../../Button/Button.js";
|
|
4
|
+
import "../../Button/Button.css.js";
|
|
5
|
+
import { useState } from "react";
|
|
6
|
+
import "react-use";
|
|
7
|
+
import "../../icons/ArrowIcon/ArrowIcon.css.js";
|
|
8
|
+
import SvgAxosX from "../../icons/AxosX/index.js";
|
|
9
|
+
import SvgComponent from "../../icons/AxosX/Blue.js";
|
|
10
|
+
import "../../icons/CheckIcon/CheckIcon.css.js";
|
|
11
|
+
/* empty css */
|
|
12
|
+
/* empty css */
|
|
13
|
+
/* empty css */
|
|
14
|
+
/* empty css */
|
|
15
|
+
import { Table, TableHead, TableRow, TableCell, TableBody } from "../../Table/Table.js";
|
|
16
|
+
import { headerCell } from "../../Table/Table.css.js";
|
|
17
|
+
import { getVariant } from "../../utils/getVariant.js";
|
|
18
|
+
import clsx from "clsx";
|
|
19
|
+
import { container, calc_icon, header_container, header_calc, calc_text, description_text, table_container, calculator_wrapper, input_container, input_label, d_label, m_label, calculator_input, calculator_button, max_balance, error_message, calc_disclosure } from "./BalanceAPYCalculator.css.js";
|
|
20
|
+
const BalanceAPYCalculator = ({
|
|
21
|
+
headline,
|
|
22
|
+
bodyCopy,
|
|
23
|
+
disclosure,
|
|
24
|
+
icon,
|
|
25
|
+
variant
|
|
26
|
+
}) => {
|
|
27
|
+
const calc_variant = getVariant(variant);
|
|
28
|
+
const [balance, setBalance] = useState(15e3);
|
|
29
|
+
const [axbAPY, _setAxbAPY] = useState(3.3);
|
|
30
|
+
const [axbEarning, setAxbEarning] = useState(495);
|
|
31
|
+
const [allyAPY, _setAllyAPY] = useState(0.25);
|
|
32
|
+
const [allyEarning, setAllyEarning] = useState(37.5);
|
|
33
|
+
const [capitalAPY, _setCapitalAPY] = useState(0.1);
|
|
34
|
+
const [capitalEarning, setCapitalEarning] = useState(15);
|
|
35
|
+
const [checkingAPY, _setCheckingAPY] = useState(0.01);
|
|
36
|
+
const [checkingEarning, setCheckingEarning] = useState(1.5);
|
|
37
|
+
const [error, setError] = useState(false);
|
|
38
|
+
const removeNonNumeric = (value) => {
|
|
39
|
+
return parseInt(value.replace(/\D/g, ""));
|
|
40
|
+
};
|
|
41
|
+
const calculateBlance = (amount) => {
|
|
42
|
+
setAxbEarning(axbAPY / 100 * amount);
|
|
43
|
+
setAllyEarning(allyAPY / 100 * amount);
|
|
44
|
+
setCapitalEarning(capitalAPY / 100 * amount);
|
|
45
|
+
setCheckingEarning(checkingAPY / 100 * amount);
|
|
46
|
+
};
|
|
47
|
+
const onUpdateBalance = (e) => {
|
|
48
|
+
const text = e.target.value;
|
|
49
|
+
const amount = removeNonNumeric(text);
|
|
50
|
+
if (amount === 0) {
|
|
51
|
+
setBalance(0);
|
|
52
|
+
}
|
|
53
|
+
if (amount > 5e4) {
|
|
54
|
+
setError(true);
|
|
55
|
+
setBalance(5e4);
|
|
56
|
+
} else {
|
|
57
|
+
setError(false);
|
|
58
|
+
setBalance(amount);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
return /* @__PURE__ */ jsx(
|
|
62
|
+
"section",
|
|
63
|
+
{
|
|
64
|
+
className: clsx(container({ variant: calc_variant }), "section_spacer"),
|
|
65
|
+
children: /* @__PURE__ */ jsxs("div", { className: clsx("containment"), children: [
|
|
66
|
+
icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", calc_icon), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
|
|
67
|
+
(headline || bodyCopy) && /* @__PURE__ */ jsxs("div", { className: `${header_container} text_center`, children: [
|
|
68
|
+
headline && /* @__PURE__ */ jsx(
|
|
69
|
+
"h2",
|
|
70
|
+
{
|
|
71
|
+
className: clsx(
|
|
72
|
+
"header_2",
|
|
73
|
+
header_calc({ variant: calc_variant })
|
|
74
|
+
),
|
|
75
|
+
children: headline
|
|
76
|
+
}
|
|
77
|
+
),
|
|
78
|
+
bodyCopy && /* @__PURE__ */ jsx(
|
|
79
|
+
"div",
|
|
80
|
+
{
|
|
81
|
+
className: `${calc_text} ${description_text({ variant: calc_variant })} text_center`,
|
|
82
|
+
children: bodyCopy
|
|
83
|
+
}
|
|
84
|
+
)
|
|
85
|
+
] }),
|
|
86
|
+
/* @__PURE__ */ jsxs("div", { className: clsx(table_container, "rounded"), children: [
|
|
87
|
+
/* @__PURE__ */ jsxs("div", { className: calculator_wrapper, children: [
|
|
88
|
+
/* @__PURE__ */ jsxs("div", { className: input_container, children: [
|
|
89
|
+
/* @__PURE__ */ jsxs("label", { htmlFor: "amount", className: input_label, children: [
|
|
90
|
+
/* @__PURE__ */ jsx("span", { className: d_label, children: "Balance: $" }),
|
|
91
|
+
/* @__PURE__ */ jsx("span", { className: m_label, children: "Balance ($)" })
|
|
92
|
+
] }),
|
|
93
|
+
/* @__PURE__ */ jsx(
|
|
94
|
+
"input",
|
|
95
|
+
{
|
|
96
|
+
className: calculator_input,
|
|
97
|
+
id: "amount",
|
|
98
|
+
type: "number",
|
|
99
|
+
step: 100,
|
|
100
|
+
name: "amount",
|
|
101
|
+
value: balance,
|
|
102
|
+
onChange: onUpdateBalance
|
|
103
|
+
}
|
|
104
|
+
)
|
|
105
|
+
] }),
|
|
106
|
+
/* @__PURE__ */ jsx(
|
|
107
|
+
Button,
|
|
108
|
+
{
|
|
109
|
+
className: calculator_button,
|
|
110
|
+
size: "large",
|
|
111
|
+
action: () => calculateBlance(balance),
|
|
112
|
+
children: "Calculate"
|
|
113
|
+
}
|
|
114
|
+
)
|
|
115
|
+
] }),
|
|
116
|
+
/* @__PURE__ */ jsx("p", { className: clsx("mb-0", max_balance, error && error_message), children: /* @__PURE__ */ jsx("small", { children: "max balance: $50,000" }) }),
|
|
117
|
+
/* @__PURE__ */ jsxs(
|
|
118
|
+
Table,
|
|
119
|
+
{
|
|
120
|
+
style: { width: "100%", marginTop: "40px" },
|
|
121
|
+
variant: "primary",
|
|
122
|
+
tableType: "Rate",
|
|
123
|
+
children: [
|
|
124
|
+
/* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
|
|
125
|
+
/* @__PURE__ */ jsx(TableCell, { as: "th", variant: "primary" }),
|
|
126
|
+
/* @__PURE__ */ jsxs(TableCell, { as: "th", variant: "primary", children: [
|
|
127
|
+
/* @__PURE__ */ jsx("div", { className: clsx(headerCell, d_label), children: "Annual Percentage Yield*" }),
|
|
128
|
+
/* @__PURE__ */ jsx("div", { className: clsx(headerCell, m_label), children: "APY*" })
|
|
129
|
+
] }),
|
|
130
|
+
/* @__PURE__ */ jsxs(TableCell, { as: "th", variant: "primary", children: [
|
|
131
|
+
/* @__PURE__ */ jsx("div", { className: clsx(headerCell, d_label), children: "Annual Earnings" }),
|
|
132
|
+
/* @__PURE__ */ jsx("div", { className: clsx(headerCell, m_label), children: "Earnings" })
|
|
133
|
+
] })
|
|
134
|
+
] }) }),
|
|
135
|
+
/* @__PURE__ */ jsxs(TableBody, { children: [
|
|
136
|
+
/* @__PURE__ */ jsxs(TableRow, { children: [
|
|
137
|
+
/* @__PURE__ */ jsx(TableCell, { variant: "primary", children: /* @__PURE__ */ jsx("b", { children: "Axos Bank" }) }),
|
|
138
|
+
/* @__PURE__ */ jsx(TableCell, { variant: "primary", children: /* @__PURE__ */ jsxs("b", { children: [
|
|
139
|
+
axbAPY.toFixed(2),
|
|
140
|
+
"%"
|
|
141
|
+
] }) }),
|
|
142
|
+
/* @__PURE__ */ jsx(TableCell, { variant: "primary", children: /* @__PURE__ */ jsxs("b", { children: [
|
|
143
|
+
"$",
|
|
144
|
+
axbEarning.toFixed(2)
|
|
145
|
+
] }) })
|
|
146
|
+
] }),
|
|
147
|
+
/* @__PURE__ */ jsxs(TableRow, { children: [
|
|
148
|
+
/* @__PURE__ */ jsx(TableCell, { variant: "primary", children: "Ally Bank Spending" }),
|
|
149
|
+
/* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
|
|
150
|
+
allyAPY.toFixed(2),
|
|
151
|
+
"%"
|
|
152
|
+
] }),
|
|
153
|
+
/* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
|
|
154
|
+
"$",
|
|
155
|
+
allyEarning.toFixed(2)
|
|
156
|
+
] })
|
|
157
|
+
] }),
|
|
158
|
+
/* @__PURE__ */ jsxs(TableRow, { children: [
|
|
159
|
+
/* @__PURE__ */ jsx(TableCell, { variant: "primary", children: "Capital One 360 Checking" }),
|
|
160
|
+
/* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
|
|
161
|
+
capitalAPY.toFixed(2),
|
|
162
|
+
"%"
|
|
163
|
+
] }),
|
|
164
|
+
/* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
|
|
165
|
+
"$",
|
|
166
|
+
capitalEarning.toFixed(2)
|
|
167
|
+
] })
|
|
168
|
+
] }),
|
|
169
|
+
/* @__PURE__ */ jsxs(TableRow, { children: [
|
|
170
|
+
/* @__PURE__ */ jsx(TableCell, { variant: "primary", children: "Wells Fargo Prime Checking" }),
|
|
171
|
+
/* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
|
|
172
|
+
checkingAPY.toFixed(2),
|
|
173
|
+
"%"
|
|
174
|
+
] }),
|
|
175
|
+
/* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
|
|
176
|
+
"$",
|
|
177
|
+
checkingEarning.toFixed(2)
|
|
178
|
+
] })
|
|
179
|
+
] })
|
|
180
|
+
] })
|
|
181
|
+
]
|
|
182
|
+
}
|
|
183
|
+
)
|
|
184
|
+
] }),
|
|
185
|
+
disclosure && /* @__PURE__ */ jsx("div", { className: calc_disclosure({ variant: calc_variant }), children: disclosure })
|
|
186
|
+
] })
|
|
187
|
+
}
|
|
188
|
+
);
|
|
189
|
+
};
|
|
190
|
+
export {
|
|
191
|
+
BalanceAPYCalculator
|
|
192
|
+
};
|
|
@@ -1,5 +1,11 @@
|
|
|
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";
|
|
6
|
+
import { MarginTradingCalculator } from "./MarginTradingCalculator/index.js";
|
|
7
|
+
import { MaxLoanCalculator } from "./MaxLoanCalculator/index.js";
|
|
8
|
+
import { MonthlyPaymentCalculator } from "./MonthlyPaymentCalculator/index.js";
|
|
3
9
|
import "@hookform/resolvers/zod";
|
|
4
10
|
import "../Modal/contextApi/store.js";
|
|
5
11
|
import { getVariant } from "../utils/getVariant.js";
|
|
@@ -27,7 +33,7 @@ import "../icons/CheckIcon/CheckIcon.css.js";
|
|
|
27
33
|
import "react-hook-form";
|
|
28
34
|
import { iconForm } from "../Forms/Forms.css.js";
|
|
29
35
|
import "../Forms/SalesforceFieldsForm.js";
|
|
30
|
-
import
|
|
36
|
+
import "../LoadingIndicator/LoadingIndicator.css.js";
|
|
31
37
|
import "../Accordion/Accordion.js";
|
|
32
38
|
import "../Accordion/Accordion.css.js";
|
|
33
39
|
import "../Chevron/Chevron.css.js";
|
|
@@ -40,10 +46,6 @@ import "next/image.js";
|
|
|
40
46
|
import "../IconBillboard/IconBillboard.css.js";
|
|
41
47
|
/* empty css */
|
|
42
48
|
import { calculator_headline, calculator_description } from "./calculator.css.js";
|
|
43
|
-
import { AnnualFeeCalculator } from "./AnnualFeeCalculator/index.js";
|
|
44
|
-
import { ApyCalculator } from "./ApyCalculator/index.js";
|
|
45
|
-
import { MarginTradingCalculator } from "./MarginTradingCalculator/index.js";
|
|
46
|
-
import { MonthlyPaymentCalculator } from "./MonthlyPaymentCalculator/index.js";
|
|
47
49
|
/* empty css */
|
|
48
50
|
import "../Carousel/index.js";
|
|
49
51
|
/* empty css */
|
|
@@ -62,7 +64,6 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
|
|
|
62
64
|
/* empty css */
|
|
63
65
|
import "../ImageBillboard/ImageBillboard.css.js";
|
|
64
66
|
import "../LandingPageHeader/LandingPageHeader.css.js";
|
|
65
|
-
import "../LoadingIndicator/LoadingIndicator.css.js";
|
|
66
67
|
/* empty css */
|
|
67
68
|
/* empty css */
|
|
68
69
|
/* empty css */
|
|
@@ -84,8 +85,8 @@ import "next/script.js";
|
|
|
84
85
|
/* empty css */
|
|
85
86
|
import "../Input/RadioButton.js";
|
|
86
87
|
import { iframeResizer } from "iframe-resizer";
|
|
88
|
+
import { BalanceAPYCalculator } from "./BalanceAPYCalculator/index.js";
|
|
87
89
|
import { calculators } from "./calculators.js";
|
|
88
|
-
import { MaxLoanCalculator } from "./MaxLoanCalculator/index.js";
|
|
89
90
|
const Calculator = (props) => {
|
|
90
91
|
const {
|
|
91
92
|
id,
|
|
@@ -146,6 +147,17 @@ const Calculator = (props) => {
|
|
|
146
147
|
variant
|
|
147
148
|
}
|
|
148
149
|
);
|
|
150
|
+
} else if (name === "APY Balance") {
|
|
151
|
+
return /* @__PURE__ */ jsx(
|
|
152
|
+
BalanceAPYCalculator,
|
|
153
|
+
{
|
|
154
|
+
headline,
|
|
155
|
+
bodyCopy,
|
|
156
|
+
variant,
|
|
157
|
+
disclosure,
|
|
158
|
+
icon
|
|
159
|
+
}
|
|
160
|
+
);
|
|
149
161
|
} else
|
|
150
162
|
return /* @__PURE__ */ jsxs("section", { id, children: [
|
|
151
163
|
/* @__PURE__ */ jsx("h1", { children: "Iframe Calculator" }),
|
package/dist/Carousel/index.js
CHANGED
|
@@ -26,6 +26,10 @@ import clsx from "clsx";
|
|
|
26
26
|
import React, { useEffect, Children, cloneElement } from "react";
|
|
27
27
|
import "../Button/Button.css.js";
|
|
28
28
|
import "react-use";
|
|
29
|
+
import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
|
|
30
|
+
import "../Calculators/ApyCalculator/ApyCalculator.css.js";
|
|
31
|
+
/* empty css */
|
|
32
|
+
import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
|
|
29
33
|
import "@hookform/resolvers/zod";
|
|
30
34
|
import "../Input/Checkbox.js";
|
|
31
35
|
import "../Input/CurrencyInput.js";
|
|
@@ -41,11 +45,9 @@ import "../Forms/SalesforceFieldsForm.js";
|
|
|
41
45
|
import "../LoadingIndicator/LoadingIndicator.css.js";
|
|
42
46
|
import "../Input/RadioButton.js";
|
|
43
47
|
import "iframe-resizer";
|
|
48
|
+
import "../Table/Table.css.js";
|
|
49
|
+
import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
|
|
44
50
|
import "../Calculators/calculator.css.js";
|
|
45
|
-
import "../Calculators/ApyCalculator/ApyCalculator.css.js";
|
|
46
|
-
import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
|
|
47
|
-
import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
|
|
48
|
-
/* empty css */
|
|
49
51
|
/* empty css */
|
|
50
52
|
/* empty css */
|
|
51
53
|
import "../Comparison/Comparison.css.js";
|
|
@@ -76,7 +78,6 @@ import "next/link.js";
|
|
|
76
78
|
/* empty css */
|
|
77
79
|
import "../StepItem/StepItem.css.js";
|
|
78
80
|
import "../StepItemSet/StepItemSet.css.js";
|
|
79
|
-
import "../Table/Table.css.js";
|
|
80
81
|
/* empty css */
|
|
81
82
|
/* empty css */
|
|
82
83
|
/* empty css */
|
package/dist/Chevron/index.js
CHANGED
|
@@ -25,6 +25,10 @@ import "clsx";
|
|
|
25
25
|
import "react";
|
|
26
26
|
import "../Button/Button.css.js";
|
|
27
27
|
import "react-use";
|
|
28
|
+
import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
|
|
29
|
+
import "../Calculators/ApyCalculator/ApyCalculator.css.js";
|
|
30
|
+
/* empty css */
|
|
31
|
+
import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
|
|
28
32
|
import "@hookform/resolvers/zod";
|
|
29
33
|
import "../Input/Checkbox.js";
|
|
30
34
|
import "../Input/CurrencyInput.js";
|
|
@@ -40,11 +44,9 @@ import "../Forms/SalesforceFieldsForm.js";
|
|
|
40
44
|
import "../LoadingIndicator/LoadingIndicator.css.js";
|
|
41
45
|
import "../Input/RadioButton.js";
|
|
42
46
|
import "iframe-resizer";
|
|
47
|
+
import "../Table/Table.css.js";
|
|
48
|
+
import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
|
|
43
49
|
import "../Calculators/calculator.css.js";
|
|
44
|
-
import "../Calculators/ApyCalculator/ApyCalculator.css.js";
|
|
45
|
-
import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
|
|
46
|
-
import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
|
|
47
|
-
/* empty css */
|
|
48
50
|
/* empty css */
|
|
49
51
|
import "../Carousel/index.js";
|
|
50
52
|
/* empty css */
|
|
@@ -76,7 +78,6 @@ import "next/link.js";
|
|
|
76
78
|
/* empty css */
|
|
77
79
|
import "../StepItem/StepItem.css.js";
|
|
78
80
|
import "../StepItemSet/StepItemSet.css.js";
|
|
79
|
-
import "../Table/Table.css.js";
|
|
80
81
|
/* empty css */
|
|
81
82
|
/* empty css */
|
|
82
83
|
/* empty css */
|
|
@@ -24,6 +24,10 @@ import "../ArticlesSet/ArticlesSet.css.js";
|
|
|
24
24
|
/* empty css */
|
|
25
25
|
/* empty css */
|
|
26
26
|
import "next/image.js";
|
|
27
|
+
import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
|
|
28
|
+
import "../Calculators/ApyCalculator/ApyCalculator.css.js";
|
|
29
|
+
/* empty css */
|
|
30
|
+
import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
|
|
27
31
|
import "@hookform/resolvers/zod";
|
|
28
32
|
import "../Input/Checkbox.js";
|
|
29
33
|
import "../Input/CurrencyInput.js";
|
|
@@ -39,11 +43,9 @@ import "../Forms/SalesforceFieldsForm.js";
|
|
|
39
43
|
import "../LoadingIndicator/LoadingIndicator.css.js";
|
|
40
44
|
import "../Input/RadioButton.js";
|
|
41
45
|
import "iframe-resizer";
|
|
46
|
+
import "../Table/Table.css.js";
|
|
47
|
+
import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
|
|
42
48
|
import "../Calculators/calculator.css.js";
|
|
43
|
-
import "../Calculators/ApyCalculator/ApyCalculator.css.js";
|
|
44
|
-
import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
|
|
45
|
-
import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
|
|
46
|
-
/* empty css */
|
|
47
49
|
/* empty css */
|
|
48
50
|
import "../Carousel/index.js";
|
|
49
51
|
/* empty css */
|
|
@@ -75,7 +77,6 @@ import "next/link.js";
|
|
|
75
77
|
/* empty css */
|
|
76
78
|
import "../StepItem/StepItem.css.js";
|
|
77
79
|
import "../StepItemSet/StepItemSet.css.js";
|
|
78
|
-
import "../Table/Table.css.js";
|
|
79
80
|
/* empty css */
|
|
80
81
|
/* empty css */
|
|
81
82
|
/* empty css */
|
|
@@ -23,6 +23,10 @@ import { buttons } from "../IconBillboard/IconBillboard.css.js";
|
|
|
23
23
|
import { Button } from "../Button/Button.js";
|
|
24
24
|
import "../Button/Button.css.js";
|
|
25
25
|
import "react-use";
|
|
26
|
+
import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
|
|
27
|
+
import "../Calculators/ApyCalculator/ApyCalculator.css.js";
|
|
28
|
+
/* empty css */
|
|
29
|
+
import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
|
|
26
30
|
import "@hookform/resolvers/zod";
|
|
27
31
|
import "../Input/Checkbox.js";
|
|
28
32
|
import "../Input/CurrencyInput.js";
|
|
@@ -39,11 +43,9 @@ import "../Forms/SalesforceFieldsForm.js";
|
|
|
39
43
|
import "../LoadingIndicator/LoadingIndicator.css.js";
|
|
40
44
|
import "../Input/RadioButton.js";
|
|
41
45
|
import "iframe-resizer";
|
|
46
|
+
import "../Table/Table.css.js";
|
|
47
|
+
import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
|
|
42
48
|
import "../Calculators/calculator.css.js";
|
|
43
|
-
import "../Calculators/ApyCalculator/ApyCalculator.css.js";
|
|
44
|
-
import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
|
|
45
|
-
import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
|
|
46
|
-
/* empty css */
|
|
47
49
|
/* empty css */
|
|
48
50
|
import "../Carousel/index.js";
|
|
49
51
|
/* empty css */
|
|
@@ -75,7 +77,6 @@ import "next/link.js";
|
|
|
75
77
|
/* empty css */
|
|
76
78
|
import "../StepItem/StepItem.css.js";
|
|
77
79
|
import "../StepItemSet/StepItemSet.css.js";
|
|
78
|
-
import "../Table/Table.css.js";
|
|
79
80
|
/* empty css */
|
|
80
81
|
/* empty css */
|
|
81
82
|
/* empty css */
|
|
@@ -23,6 +23,10 @@ import "clsx";
|
|
|
23
23
|
import "react";
|
|
24
24
|
import "../../Button/Button.css.js";
|
|
25
25
|
import "react-use";
|
|
26
|
+
import "../../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
|
|
27
|
+
import "../../Calculators/ApyCalculator/ApyCalculator.css.js";
|
|
28
|
+
/* empty css */
|
|
29
|
+
import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
|
|
26
30
|
import "@hookform/resolvers/zod";
|
|
27
31
|
import "../../Input/Checkbox.js";
|
|
28
32
|
import "../../Input/CurrencyInput.js";
|
|
@@ -38,11 +42,9 @@ import "../../Forms/SalesforceFieldsForm.js";
|
|
|
38
42
|
import "../../LoadingIndicator/LoadingIndicator.css.js";
|
|
39
43
|
import "../../Input/RadioButton.js";
|
|
40
44
|
import "iframe-resizer";
|
|
45
|
+
import "../../Table/Table.css.js";
|
|
46
|
+
import "../../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
|
|
41
47
|
import "../../Calculators/calculator.css.js";
|
|
42
|
-
import "../../Calculators/ApyCalculator/ApyCalculator.css.js";
|
|
43
|
-
import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
|
|
44
|
-
import "../../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
|
|
45
|
-
/* empty css */
|
|
46
48
|
/* empty css */
|
|
47
49
|
import "../../Carousel/index.js";
|
|
48
50
|
/* empty css */
|
|
@@ -73,7 +75,6 @@ import "next/link.js";
|
|
|
73
75
|
/* empty css */
|
|
74
76
|
import "../../StepItem/StepItem.css.js";
|
|
75
77
|
import "../../StepItemSet/StepItemSet.css.js";
|
|
76
|
-
import "../../Table/Table.css.js";
|
|
77
78
|
/* empty css */
|
|
78
79
|
/* empty css */
|
|
79
80
|
/* empty css */
|