@wealthx/shadcn 1.4.1 → 1.5.0

package/dist/components/ui/connect-bank-step.mjs

@@ -0,0 +1,287 @@
+import {
+  Button
+} from "../../chunk-NOOEKOWY.mjs";
+import "../../chunk-R4HCRDU5.mjs";
+import {
+  cn
+} from "../../chunk-AFML43VJ.mjs";
+import "../../chunk-WNQUEZJF.mjs";
+
+// src/components/ui/connect-bank-step.tsx
+import { CreditCard, KeyRound, ShieldCheck } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_BANKS = [
+  { id: "commonwealth", name: "CommBank", logoUrl: "/banks/commbank.png" },
+  { id: "nab", name: "NAB", logoUrl: "/banks/nab.png" },
+  { id: "anz", name: "ANZ", logoUrl: "/banks/anz.png" },
+  {
+    id: "bank-australia",
+    name: "Bank Australia",
+    logoUrl: "/banks/bank-australia.png"
+  },
+  {
+    id: "regional-australia-bank",
+    name: "Regional Australia Bank",
+    logoUrl: "/banks/regional-australia-bank.png"
+  }
+];
+var DEFAULT_SECURITY_ITEMS = [
+  {
+    text: "Bank grade 256-bit SSL encryption",
+    icon: /* @__PURE__ */ jsx(ShieldCheck, { className: "size-5" })
+  },
+  {
+    text: "We never save your bank login credentials in the app",
+    icon: /* @__PURE__ */ jsx(KeyRound, { className: "size-5" })
+  },
+  {
+    text: "We cannot make transactions on your behalf",
+    icon: /* @__PURE__ */ jsx(CreditCard, { className: "size-5" })
+  }
+];
+function ConnectBankStep({
+  applicant,
+  allowToAccessBanking = false,
+  banks = DEFAULT_BANKS,
+  onConnect,
+  onManualAdd,
+  onSendRequest,
+  onPrev,
+  hideManualAdd = false,
+  hideNavigation = false,
+  hideCdrBanner = false,
+  securityItems = DEFAULT_SECURITY_ITEMS,
+  cdrLogoUrl,
+  govLogoUrl,
+  className
+}) {
+  const name = applicant.name || "applicant";
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6 font-sans", className), children: [
+    /* @__PURE__ */ jsxs("h2", { className: "text-h1 text-foreground", children: [
+      "Connect ",
+      name,
+      "'s Bank Accounts"
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-body-large text-foreground", children: "Connect bank accounts & speed up your application by 20 mins." }),
+    !hideCdrBanner && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
+        /* @__PURE__ */ jsx(CdrLogo, { logoUrl: cdrLogoUrl }),
+        /* @__PURE__ */ jsx(AustralianGovLogo, { logoUrl: govLogoUrl })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "text-body-medium text-muted-foreground", children: [
+        "We are powered by Open Banking, the safest and most secure way to share your information with trusted advisers. Learn more at",
+        " ",
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: "https://www.cdr.gov.au/",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "text-primary hover:underline",
+            children: "https://www.cdr.gov.au/"
+          }
+        )
+      ] }),
+      securityItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: securityItems.map((item, i) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between border border-primary bg-secondary/10 px-4 py-3",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-body-medium text-foreground", children: item.text }),
+            item.icon && /* @__PURE__ */ jsx("span", { className: "ml-3 shrink-0 text-primary", children: item.icon })
+          ]
+        },
+        i
+      )) })
+    ] }),
+    allowToAccessBanking ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-h2 text-foreground", children: "Connect Bank Account" }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 border-l border-t border-border", children: [
+          banks.map((bank) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onConnect == null ? void 0 : onConnect(bank),
+              className: "flex h-[71px] items-center justify-center border-b border-r border-border bg-background p-3 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+              children: bank.logoUrl ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: bank.logoUrl,
+                  alt: bank.name,
+                  className: "max-h-10 w-auto object-contain"
+                }
+              ) : (
+                // Text fallback when no logo — 14px bold per Figma tile spec
+                /* @__PURE__ */ jsx("span", { className: "text-body-small font-bold text-foreground", children: bank.name })
+              )
+            },
+            bank.id
+          )),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onConnect == null ? void 0 : onConnect(),
+              className: "flex h-[71px] items-center justify-center gap-1.5 border-b border-r border-border bg-background p-3 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsx("span", { className: "text-body-small font-bold text-foreground", children: "Connect Your Bank +" })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("hr", { className: "border-border" }),
+      !hideManualAdd && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-h2 text-foreground", children: "Or Add manually" }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            className: "w-fit gap-1.5",
+            onClick: onManualAdd,
+            children: [
+              "Start form",
+              /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4" })
+            ]
+          }
+        )
+      ] })
+    ] }) : (
+      /* Co-applicant — no access yet */
+      /* @__PURE__ */ jsxs(Button, { className: "w-full", onClick: onSendRequest, children: [
+        "Send join invitation to ",
+        name
+      ] })
+    ),
+    !hideNavigation && /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: onPrev, children: [
+      /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "mr-1 size-4" }),
+      "Previous"
+    ] }) })
+  ] });
+}
+function CdrLogo({ logoUrl }) {
+  if (logoUrl) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: logoUrl,
+        alt: "Consumer Data Right",
+        className: "h-[76px] w-auto object-contain"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-label": "Consumer Data Right",
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "22", stroke: "#0057A8", strokeWidth: "2" }),
+          /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "14", stroke: "#0057A8", strokeWidth: "2" }),
+          /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "6", fill: "#0057A8" }),
+          /* @__PURE__ */ jsx("circle", { cx: "24", cy: "6", r: "3", fill: "#0057A8" }),
+          /* @__PURE__ */ jsx("circle", { cx: "24", cy: "42", r: "3", fill: "#0057A8" }),
+          /* @__PURE__ */ jsx("circle", { cx: "6", cy: "24", r: "3", fill: "#0057A8" }),
+          /* @__PURE__ */ jsx("circle", { cx: "42", cy: "24", r: "3", fill: "#0057A8" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col leading-tight", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] font-bold text-[#0057A8]", children: "Consumer" }),
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] font-bold text-[#0057A8]", children: "Data Right" })
+    ] })
+  ] });
+}
+function AustralianGovLogo({ logoUrl }) {
+  if (logoUrl) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: logoUrl,
+        alt: "Australian Government",
+        className: "h-[70px] w-auto object-contain"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        width: "40",
+        height: "36",
+        viewBox: "0 0 40 36",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-label": "Australian Government",
+        children: [
+          /* @__PURE__ */ jsx(
+            "ellipse",
+            {
+              cx: "20",
+              cy: "22",
+              rx: "14",
+              ry: "10",
+              stroke: "#333",
+              strokeWidth: "1.5"
+            }
+          ),
+          /* @__PURE__ */ jsx("circle", { cx: "20", cy: "10", r: "6", stroke: "#333", strokeWidth: "1.5" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M14 18 Q20 8 26 18",
+              stroke: "#333",
+              strokeWidth: "1.5",
+              fill: "none"
+            }
+          ),
+          /* @__PURE__ */ jsx("line", { x1: "10", y1: "28", x2: "30", y2: "28", stroke: "#333", strokeWidth: "1.5" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold text-foreground", children: "Australian Government" })
+  ] });
+}
+function ChevronLeftIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+    }
+  );
+}
+function ChevronRightIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+export {
+  ConnectBankStep,
+  DEFAULT_BANKS,
+  DEFAULT_SECURITY_ITEMS
+};