@axos-web-dev/shared-components 1.0.100-dev.56 → 1.0.100-dev.58

package/dist/Calculators/AxosOneCalculator/BalanceAPYCalculator.css.d.ts

@@ -44,3 +44,5 @@ export declare const ax1_calc_disclosure: import('@vanilla-extract/recipes').Run
     };
 }>;
 export declare const call_to_action_row: string;
+export declare const tieredRowAnimation: string;
+export declare const tieredRowAnimationDelayed: string;

package/dist/Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js

@@ -1,8 +1,9 @@
-import '../../assets/Calculators/AxosOneCalculator/BalanceAPYCalculator.css';import '../../assets/Typography/Typography.css';import '../../assets/themes/victorie.css';import '../../assets/themes/ufb.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
+import '../../assets/Calculators/AxosOneCalculator/BalanceAPYCalculator.css';import '../../assets/Table/Table.css';import '../../assets/Typography/Typography.css';import '../../assets/themes/victorie.css';import '../../assets/themes/ufb.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
 /* empty css                                      */
 /* empty css                                  */
 /* empty css                                       */
 /* empty css                                             */
+/* empty css                                   */
 /* empty css                                        */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var ax1_container = "_11b2y8z0";
@@ -21,6 +22,8 @@ var ax1_calc_text = "_11b2y8zc";
 var ax1_description_text = createRuntimeFn({ defaultClassName: "_11b2y8zd", variantClassNames: { variant: { primary: "_11b2y8ze", secondary: "_11b2y8zf", tertiary: "_11b2y8zg", quaternary: "_11b2y8zh" } }, defaultVariants: {}, compoundVariants: [] });
 var ax1_calc_disclosure = createRuntimeFn({ defaultClassName: "_11b2y8zi", variantClassNames: { variant: { primary: "_11b2y8zj", secondary: "_11b2y8zk", tertiary: "_11b2y8zl", quaternary: "_11b2y8zm" } }, defaultVariants: {}, compoundVariants: [] });
 var call_to_action_row = "_11b2y8zn";
+var tieredRowAnimation = "_11b2y8zp";
+var tieredRowAnimationDelayed = "_11b2y8zq";
 export {
   ax1_calc_disclosure,
   ax1_calc_icon,
@@ -37,5 +40,7 @@ export {
   ax1_input_label,
   ax1_m_label,
   ax1_table_container,
-  call_to_action_row
+  call_to_action_row,
+  tieredRowAnimation,
+  tieredRowAnimationDelayed
 };

package/dist/Calculators/AxosOneCalculator/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Button } from "../../Button/Button.js";
 import "../../Button/Button.css.js";
 import { useState } from "react";
@@ -19,7 +19,7 @@ import { headerCell } from "../../Table/Table.css.js";
 import "../../utils/allowedAxosDomains.js";
 import { getVariant } from "../../utils/getVariant.js";
 import clsx from "clsx";
-import { ax1_calc_icon, ax1_header_container, ax1_header_calc, ax1_calc_text, ax1_description_text, ax1_calculator_wrapper, ax1_input_container, ax1_input_label, ax1_calculator_input, ax1_calculator_button, ax1_d_label, ax1_m_label, ax1_table_container, call_to_action_row, ax1_calc_disclosure, ax1_container } from "./BalanceAPYCalculator.css.js";
+import { ax1_calc_icon, ax1_header_container, ax1_header_calc, ax1_calc_text, ax1_description_text, ax1_calculator_wrapper, ax1_input_container, ax1_input_label, ax1_calculator_input, ax1_calculator_button, ax1_d_label, ax1_m_label, tieredRowAnimation, tieredRowAnimationDelayed, ax1_table_container, call_to_action_row, ax1_calc_disclosure, ax1_container } from "./BalanceAPYCalculator.css.js";
 const AxosOneCalculator = ({
   headline,
   bodyCopy,
@@ -31,24 +31,17 @@ const AxosOneCalculator = ({
 }) => {
   const calc_variant = getVariant(variant);
   const AXOS_ONE_APY = +process.env.NEXT_PUBLIC_AXOS_ONE_APY;
+  const AXOS_ONE_APY_TIERED = +process.env.NEXT_PUBLIC_AXOS1_APY_TIER;
   const startingBalance = Number.isFinite(Number(initialBalance)) && Number(initialBalance) >= 0 ? Number(initialBalance) : 1e4;
   const [balance, setBalance] = useState(startingBalance);
-  const [axbAPY, _setAxbAPY] = useState(AXOS_ONE_APY);
+  const [calculatedBalance, setCalculatedBalance] = useState(startingBalance);
+  const [axbAPY, setAxbAPY] = useState(AXOS_ONE_APY);
   const [axbEarning, setAxbEarning] = useState(
     AXOS_ONE_APY / 100 * startingBalance
   );
-  const [chaseAPY, _setChaseAPY] = useState(0.01);
-  const [chaseEarning, setChaseEarning] = useState(
-    0.01 / 100 * startingBalance
-  );
-  const [bofaAPY, _setBofaAPY] = useState(0.01);
-  const [bofaEarning, setBofaEarning] = useState(
-    0.01 / 100 * startingBalance
-  );
-  const [fargoAPY, _setFargoAPY] = useState(0.05);
-  const [fargoEarning, setFargoEarning] = useState(
-    0.05 / 100 * startingBalance
-  );
+  const [tier1Earning, setTier1Earning] = useState(0);
+  const [tier2Earning, setTier2Earning] = useState(0);
+  const [showTieredRows, setShowTieredRows] = useState(false);
   const removeNonNumeric = (value) => {
     if (value === "") {
       value = "0";
@@ -59,10 +52,27 @@ const AxosOneCalculator = ({
     return newValue;
   };
   const calculateBalance = (amount) => {
-    setAxbEarning(axbAPY / 100 * amount);
-    setChaseEarning(chaseAPY / 100 * amount);
-    setBofaEarning(bofaAPY / 100 * amount);
-    setFargoEarning(fargoAPY / 100 * amount);
+    setCalculatedBalance(amount);
+    const TIER_THRESHOLD = 499999.99;
+    if (amount > TIER_THRESHOLD) {
+      const tier1Amount = TIER_THRESHOLD;
+      const tier2Amount = amount - TIER_THRESHOLD;
+      const tier1Earn = AXOS_ONE_APY / 100 * tier1Amount;
+      const tier2Earn = AXOS_ONE_APY_TIERED / 100 * tier2Amount;
+      setTier1Earning(tier1Earn);
+      setTier2Earning(tier2Earn);
+      const totalEarning = tier1Earn + tier2Earn;
+      setAxbEarning(totalEarning);
+      const effectiveAPY = totalEarning / amount * 100;
+      setAxbAPY(effectiveAPY);
+      setShowTieredRows(true);
+    } else {
+      setAxbEarning(AXOS_ONE_APY / 100 * amount);
+      setAxbAPY(AXOS_ONE_APY);
+      setTier1Earning(0);
+      setTier2Earning(0);
+      setShowTieredRows(false);
+    }
   };
   const onUpdateBalance = (e) => {
     const text = e.target.value;
@@ -83,6 +93,12 @@ const AxosOneCalculator = ({
       maximumFractionDigits: 2
     });
   };
+  const formatEarnings = (value) => {
+    return Math.round(value).toLocaleString(void 0, {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    });
+  };
   return /* @__PURE__ */ jsx("section", { className: clsx(ax1_container), id: "axoapycalc", children: /* @__PURE__ */ jsxs("div", { className: clsx("containment"), children: [
     icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", ax1_calc_icon), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
     (headline || bodyCopy) && /* @__PURE__ */ jsxs("div", { className: `${ax1_header_container} text_center`, children: [
@@ -137,8 +153,8 @@ const AxosOneCalculator = ({
           children: [
             /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
               /* @__PURE__ */ jsxs(TableCell, { as: "th", variant: "primary", children: [
-                /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_d_label), children: "Bank" }),
-                /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_m_label), children: "Bank" })
+                /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_d_label), children: "Balance" }),
+                /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_m_label), children: "Balance" })
               ] }),
               /* @__PURE__ */ jsxs(TableCell, { as: "th", variant: "primary", children: [
                 /* @__PURE__ */ jsx("div", { className: clsx(headerCell, ax1_d_label), children: "Annual Percentage Yield*" }),
@@ -151,56 +167,47 @@ const AxosOneCalculator = ({
             ] }) }),
             /* @__PURE__ */ jsxs(TableBody, { children: [
               /* @__PURE__ */ jsxs(TableRow, { children: [
-                /* @__PURE__ */ jsx(TableCell, { variant: "primary", children: /* @__PURE__ */ jsx("b", { children: "Axos Bank" }) }),
+                /* @__PURE__ */ jsx(TableCell, { variant: "primary", children: /* @__PURE__ */ jsxs("b", { children: [
+                  "$",
+                  formatUSD(calculatedBalance)
+                ] }) }),
                 /* @__PURE__ */ jsx(TableCell, { variant: "primary", children: /* @__PURE__ */ jsxs("b", { children: [
                   axbAPY.toFixed(2),
                   "%"
                 ] }) }),
                 /* @__PURE__ */ jsx(TableCell, { variant: "primary", children: /* @__PURE__ */ jsxs("b", { children: [
                   "$",
-                  formatUSD(axbEarning)
+                  formatEarnings(axbEarning)
                 ] }) })
               ] }),
-              /* @__PURE__ */ jsxs(TableRow, { children: [
-                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  "Wells Fargo",
-                  /* @__PURE__ */ jsx("sup", { children: "2" })
+              showTieredRows && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(TableRow, { className: clsx(tieredRowAnimation), children: [
+                  /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                    "$",
+                    formatUSD(499999.99)
+                  ] }),
+                  /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                    AXOS_ONE_APY.toFixed(2),
+                    "%"
+                  ] }),
+                  /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                    "$",
+                    formatEarnings(tier1Earning)
+                  ] })
                 ] }),
-                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  fargoAPY.toFixed(2),
-                  "%"
-                ] }),
-                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  "$",
-                  formatUSD(fargoEarning)
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs(TableRow, { children: [
-                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  "Bank of America",
-                  /* @__PURE__ */ jsx("sup", { children: "3" })
-                ] }),
-                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  bofaAPY.toFixed(2),
-                  "%"
-                ] }),
-                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  "$",
-                  formatUSD(bofaEarning)
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs(TableRow, { children: [
-                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  "Chase",
-                  /* @__PURE__ */ jsx("sup", { children: "4" })
-                ] }),
-                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  chaseAPY.toFixed(2),
-                  "%"
-                ] }),
-                /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
-                  "$",
-                  formatUSD(chaseEarning)
+                /* @__PURE__ */ jsxs(TableRow, { className: clsx(tieredRowAnimationDelayed), children: [
+                  /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                    "$",
+                    formatUSD(calculatedBalance - 499999.99)
+                  ] }),
+                  /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                    AXOS_ONE_APY_TIERED.toFixed(2),
+                    "%"
+                  ] }),
+                  /* @__PURE__ */ jsxs(TableCell, { variant: "primary", children: [
+                    "$",
+                    formatEarnings(tier2Earning)
+                  ] })
                 ] })
               ] })
             ] })
@@ -221,7 +228,7 @@ const AxosOneCalculator = ({
         id
       )
     ) }),
-    disclosure && /* @__PURE__ */ jsx("div", { className: ax1_calc_disclosure({ variant: calc_variant }), children: disclosure })
+    showTieredRows && disclosure && /* @__PURE__ */ jsx("div", { className: ax1_calc_disclosure({ variant: calc_variant }), children: disclosure })
   ] }) });
 };
 export {

package/dist/Table/Table.d.ts

@@ -61,7 +61,7 @@ export declare const TableCell: ({ children, as, variant, highlighted, colSpan,
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
-    popover?: "" | "auto" | "manual" | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined;
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
     popoverTarget?: string | undefined;
     onToggle?: import('react').ToggleEventHandler<HTMLTableCellElement> | undefined;

package/dist/assets/Calculators/AxosOneCalculator/BalanceAPYCalculator.css

@@ -1,3 +1,13 @@
+@keyframes _11b2y8zo {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 ._11b2y8z0 {
   position: relative;
 }
@@ -8,11 +18,24 @@
   background: #fff;
   color: #1e3860;
 }
+._11b2y8z0 th {
+  background: #fff !important;
+  color: #1e3860;
+}
+._11b2y8z0 ._1nivbwet {
+  overflow-x: hidden;
+}
+._11b2y8z0 tbody tr:first-child td:first-child {
+  border-radius: 1rem 0 0 1rem !important;
+}
+._11b2y8z0 tbody tr:first-child td:last-child {
+  border-radius: 0 1rem 1rem 0 !important;
+}
 ._11b2y8z0 ._1nivbwet ._1nivbwe12 tr:nth-child(even) td {
   background: #fff;
 }
 ._11b2y8z0 > .containment {
-  padding: 84px 82px 100px;
+  padding: 56px;
   background: #def4ff;
   border-radius: 1rem;
 }
@@ -131,12 +154,18 @@
   margin-top: 2rem;
   gap: 3rem;
 }
+._11b2y8zp {
+  animation: _11b2y8zo 0.5s ease-out forwards;
+}
+._11b2y8zq {
+  animation: _11b2y8zo 0.5s ease-out 0.15s forwards;
+  opacity: 0;
+}
 @media screen and (max-width: 1023px) {
   ._11b2y8z0 > .containment {
     max-width: 100%;
     width: 100%;
     border-radius: 0;
-    padding: 84px 28px 100px;
   }
   ._11b2y8z1 {
     padding: 32px 24px;
@@ -159,6 +188,15 @@
   }
 }
 @media screen and (max-width: 768px) {
+  ._11b2y8z0 ._1nivbwet {
+    margin-top: 0px !important;
+  }
+  ._11b2y8z0 tbody tr:first-child td:first-child {
+    border-radius: 0px !important;
+  }
+  ._11b2y8z0 tbody tr:first-child td:last-child {
+    border-radius: 0px !important;
+  }
   ._11b2y8z0 ._1nivbwet ._1nivbwe12 tr:nth-child(even) td {
     background: var(--_1073cm88);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "1.0.100-dev.56",
+  "version": "1.0.100-dev.58",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",