@wealthx/shadcn 1.4.1 → 1.5.0

package/src/components/ui/category-edit-dialog.tsx

@@ -0,0 +1,300 @@
+import React, { useEffect, useState } from "react";
+import { Check, Search } from "lucide-react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./dialog";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "./accordion";
+import { Input } from "./input";
+import { Switch } from "./switch";
+import { Button } from "./button";
+import { cn } from "@/lib/utils";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface CategoryChild {
+  id: string;
+  name: string;
+  icon?: React.ReactNode;
+}
+
+export interface CategoryItem {
+  id: string;
+  name: string;
+  icon?: React.ReactNode;
+  subCategories?: CategoryChild[];
+}
+
+export interface CategoryEditDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Transaction description shown as subtitle in the dialog header */
+  transactionDescription?: string;
+  /** Currently assigned category ID — pre-selects and auto-expands the matching parent */
+  currentCategoryId?: string;
+  /** Full category tree to display */
+  categories: CategoryItem[];
+  /** Called on Save — receives the chosen category ID and the "apply to future" toggle state */
+  onSave: (categoryId: string, applyToFuture: boolean) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Internal sub-components
+// ---------------------------------------------------------------------------
+
+function ItemIcon({
+  icon,
+  active,
+}: {
+  icon?: React.ReactNode;
+  active: boolean;
+}) {
+  if (!icon) return null;
+  return (
+    <span
+      className={cn(
+        "shrink-0",
+        active ? "text-primary" : "text-muted-foreground",
+      )}
+    >
+      {icon}
+    </span>
+  );
+}
+
+function CategoryRow({
+  name,
+  icon,
+  isSelected,
+  indent = false,
+  onClick,
+}: {
+  name: string;
+  icon?: React.ReactNode;
+  isSelected: boolean;
+  indent?: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "flex w-full items-center gap-2 text-left text-body-small transition-colors hover:bg-muted",
+        indent ? "py-2 pl-9 pr-4" : "px-4 py-2.5",
+        isSelected && "bg-primary/10",
+      )}
+    >
+      <ItemIcon icon={icon} active={isSelected} />
+      <span className="flex-1">{name}</span>
+      {isSelected && <Check className="size-3.5 shrink-0 text-primary" />}
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function CategoryEditDialog({
+  open,
+  onOpenChange,
+  transactionDescription,
+  currentCategoryId,
+  categories,
+  onSave,
+}: CategoryEditDialogProps) {
+  const [search, setSearch] = useState("");
+  const [selected, setSelected] = useState(currentCategoryId ?? "");
+  const [applyToFuture, setApplyToFuture] = useState(false);
+  const [openItem, setOpenItem] = useState<string>("");
+
+  useEffect(() => {
+    if (!open) return;
+    setSelected(currentCategoryId ?? "");
+    setSearch("");
+    setApplyToFuture(false);
+    const parent = categories.find(
+      (c) =>
+        c.id === currentCategoryId ||
+        c.subCategories?.some((s) => s.id === currentCategoryId),
+    );
+    setOpenItem(parent?.id ?? "");
+  }, [open, currentCategoryId, categories]);
+
+  const q = search.toLowerCase();
+
+  const filtered = categories.filter(
+    (c) =>
+      !q ||
+      c.name.toLowerCase().includes(q) ||
+      c.subCategories?.some((s) => s.name.toLowerCase().includes(q)),
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent size="sm" className="gap-0 p-0">
+        <DialogHeader className="px-5 pt-5 pb-3">
+          <DialogTitle>Change Category</DialogTitle>
+          {transactionDescription && (
+            <p className="truncate text-caption text-muted-foreground">
+              {transactionDescription}
+            </p>
+          )}
+        </DialogHeader>
+
+        {/* Search */}
+        <div className="px-4 pb-3">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              placeholder="Search categories…"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="h-8 pl-8 text-body-small"
+            />
+          </div>
+        </div>
+
+        {/* Category list */}
+        <div className="max-h-64 overflow-y-auto border-y border-border">
+          {filtered.length === 0 ? (
+            <p className="py-8 text-center text-caption text-muted-foreground">
+              No categories found
+            </p>
+          ) : q ? (
+            // Search mode — flat list, no animation
+            filtered.map((cat) => {
+              const hasChildren = (cat.subCategories?.length ?? 0) > 0;
+              const matchingChildren = cat.subCategories?.filter((s) =>
+                s.name.toLowerCase().includes(q),
+              );
+
+              return (
+                <div key={cat.id}>
+                  {(!hasChildren || cat.name.toLowerCase().includes(q)) &&
+                    (hasChildren ? (
+                      // Non-selectable group header
+                      <div className="flex items-center gap-2 px-4 py-2.5 text-body-small">
+                        <ItemIcon icon={cat.icon} active={false} />
+                        <span className="flex-1 text-muted-foreground">
+                          {cat.name}
+                        </span>
+                      </div>
+                    ) : (
+                      <CategoryRow
+                        name={cat.name}
+                        icon={cat.icon}
+                        isSelected={selected === cat.id}
+                        onClick={() => setSelected(cat.id)}
+                      />
+                    ))}
+                  {matchingChildren?.map((sub) => (
+                    <CategoryRow
+                      key={sub.id}
+                      name={sub.name}
+                      icon={sub.icon}
+                      isSelected={selected === sub.id}
+                      indent
+                      onClick={() => setSelected(sub.id)}
+                    />
+                  ))}
+                </div>
+              );
+            })
+          ) : (
+            // Browse mode — accordion with animated expand/collapse
+            <Accordion
+              type="single"
+              collapsible
+              value={openItem}
+              onValueChange={(v) => setOpenItem(v ?? "")}
+            >
+              {filtered.map((cat) => {
+                if ((cat.subCategories?.length ?? 0) > 0) {
+                  return (
+                    <AccordionItem
+                      key={cat.id}
+                      value={cat.id}
+                      className="border-b border-border last:border-0"
+                    >
+                      <AccordionTrigger className="gap-2 px-4 py-2.5 text-body-small hover:bg-muted hover:no-underline [&>svg:last-child]:size-3.5 [&>svg:last-child]:text-muted-foreground">
+                        <ItemIcon icon={cat.icon} active={false} />
+                        <span className="flex-1 text-left">{cat.name}</span>
+                      </AccordionTrigger>
+                      <AccordionContent className="p-0 text-current">
+                        {cat.subCategories!.map((sub) => (
+                          <CategoryRow
+                            key={sub.id}
+                            name={sub.name}
+                            icon={sub.icon}
+                            isSelected={selected === sub.id}
+                            indent
+                            onClick={() => setSelected(sub.id)}
+                          />
+                        ))}
+                      </AccordionContent>
+                    </AccordionItem>
+                  );
+                }
+
+                return (
+                  <div
+                    key={cat.id}
+                    className="border-b border-border last:border-0"
+                  >
+                    <CategoryRow
+                      name={cat.name}
+                      icon={cat.icon}
+                      isSelected={selected === cat.id}
+                      onClick={() => setSelected(cat.id)}
+                    />
+                  </div>
+                );
+              })}
+            </Accordion>
+          )}
+        </div>
+
+        {/* Apply to future toggle */}
+        <div className="flex items-center justify-between gap-3 px-4 py-3">
+          <label className="text-caption text-muted-foreground">
+            Apply to all future transactions from this merchant
+          </label>
+          <Switch
+            checked={applyToFuture}
+            onCheckedChange={setApplyToFuture}
+            className="shrink-0"
+          />
+        </div>
+
+        {/* Actions */}
+        <div className="flex gap-2 px-4 pb-4">
+          <Button
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => onOpenChange(false)}
+          >
+            Cancel
+          </Button>
+          <Button
+            size="sm"
+            className="flex-1"
+            disabled={!selected || selected === currentCategoryId}
+            onClick={() => {
+              onSave(selected, applyToFuture);
+              onOpenChange(false);
+            }}
+          >
+            Save
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/connect-bank-step.tsx

@@ -0,0 +1,379 @@
+import * as React from "react";
+import { CreditCard, KeyRound, ShieldCheck } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type ConnectBankApplicant = {
+  name: string;
+  email?: string;
+  isMain?: boolean;
+};
+
+export type BankTile = {
+  id: string;
+  name: string;
+  /** Optional logo URL. Falls back to abbreviated name. */
+  logoUrl?: string;
+};
+
+/**
+ * Default AU banks shown in the connect grid (matches Figma design).
+ * logoUrl values are relative paths served from the Storybook public directory.
+ * In production, override `banks` prop with CDN-hosted URLs.
+ */
+export const DEFAULT_BANKS: BankTile[] = [
+  { 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",
+  },
+];
+
+export type SecurityItem = {
+  text: string;
+  icon?: React.ReactNode;
+};
+
+export const DEFAULT_SECURITY_ITEMS: SecurityItem[] = [
+  {
+    text: "Bank grade 256-bit SSL encryption",
+    icon: <ShieldCheck className="size-5" />,
+  },
+  {
+    text: "We never save your bank login credentials in the app",
+    icon: <KeyRound className="size-5" />,
+  },
+  {
+    text: "We cannot make transactions on your behalf",
+    icon: <CreditCard className="size-5" />,
+  },
+];
+
+export type ConnectBankStepProps = {
+  applicant: ConnectBankApplicant;
+  /** Whether the current user has been granted banking access for this applicant. */
+  allowToAccessBanking?: boolean;
+  /** Featured banks to show as individual tiles. Defaults to 5 AU banks. A
+   *  "Connect Your Bank +" tile is always appended as the 6th cell. */
+  banks?: BankTile[];
+  /** Called when a specific bank tile OR the generic "Connect Your Bank +" is clicked. */
+  onConnect?: (bank?: BankTile) => void;
+  onManualAdd?: () => void;
+  onSendRequest?: () => void;
+  onPrev?: () => void;
+  hideManualAdd?: boolean;
+  hideNavigation?: boolean;
+  hideCdrBanner?: boolean;
+  /** Security/trust items shown below the CDR banner. Defaults to 3 standard AU Open Banking items. */
+  securityItems?: SecurityItem[];
+  /** URL for the Consumer Data Right logo. Falls back to an inline SVG placeholder. */
+  cdrLogoUrl?: string;
+  /** URL for the Australian Government crest. Falls back to an inline SVG placeholder. */
+  govLogoUrl?: string;
+  className?: string;
+};
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * ConnectBankStep — prompts the applicant to connect their bank accounts
+ * via Open Banking (Basiq).
+ *
+ * States:
+ * - `allowToAccessBanking=true` — shows CDR section + featured bank grid
+ *   + "Connect Your Bank +" + "Or Add manually"
+ * - `allowToAccessBanking=false` — shows "Send join invitation" CTA only
+ *   (used for co-applicants who haven't yet granted access)
+ *
+ * Mirrors `ConnectBankStep` + `ConnectBankSection` + `BankConnectBanner`
+ * from the frontend app.
+ *
+ * Figma: WealthX-Backoffice---Mobile-App — node 19308:52803
+ */
+export 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,
+}: ConnectBankStepProps) {
+  const name = applicant.name || "applicant";
+
+  return (
+    <div className={cn("flex flex-col gap-6 font-sans", className)}>
+      {/* Heading — h1, dynamic applicant name */}
+      <h2 className="text-h1 text-foreground">
+        Connect {name}&apos;s Bank Accounts
+      </h2>
+
+      <p className="text-body-large text-foreground">
+        Connect bank accounts &amp; speed up your application by 20 mins.
+      </p>
+
+      {/* CDR trust section */}
+      {!hideCdrBanner && (
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center gap-6">
+            <CdrLogo logoUrl={cdrLogoUrl} />
+            <AustralianGovLogo logoUrl={govLogoUrl} />
+          </div>
+          <p className="text-body-medium text-muted-foreground">
+            We are powered by Open Banking, the safest and most secure way to
+            share your information with trusted advisers. Learn more at{" "}
+            <a
+              href="https://www.cdr.gov.au/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary hover:underline"
+            >
+              https://www.cdr.gov.au/
+            </a>
+          </p>
+
+          {/* Security items */}
+          {securityItems.length > 0 && (
+            <div className="flex flex-col gap-2">
+              {securityItems.map((item, i) => (
+                <div
+                  key={i}
+                  className="flex items-center justify-between border border-primary bg-secondary/10 px-4 py-3"
+                >
+                  <span className="text-body-medium text-foreground">
+                    {item.text}
+                  </span>
+                  {item.icon && (
+                    <span className="ml-3 shrink-0 text-primary">
+                      {item.icon}
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {allowToAccessBanking ? (
+        <>
+          {/* Bank connect section */}
+          <div className="flex flex-col gap-3">
+            {/* h2 (28px / 600) */}
+            <h3 className="text-h2 text-foreground">Connect Bank Account</h3>
+
+            {/* Bank grid: featured banks + generic "Connect Your Bank +" */}
+            <div className="grid grid-cols-3 border-l border-t border-border">
+              {banks.map((bank) => (
+                <button
+                  key={bank.id}
+                  type="button"
+                  onClick={() => 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"
+                >
+                  {bank.logoUrl ? (
+                    <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
+                    <span className="text-body-small font-bold text-foreground">
+                      {bank.name}
+                    </span>
+                  )}
+                </button>
+              ))}
+
+              {/* Generic "Connect Your Bank +" tile — 14px bold per Figma */}
+              <button
+                type="button"
+                onClick={() => 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"
+              >
+                <span className="text-body-small font-bold text-foreground">
+                  Connect Your Bank +
+                </span>
+              </button>
+            </div>
+          </div>
+
+          {/* Divider */}
+          <hr className="border-border" />
+
+          {/* Or Add manually — display-medium (48px desktop → 32px mobile) per Figma */}
+          {!hideManualAdd && (
+            <div className="flex flex-col gap-3">
+              {/* h2 (28px / 600) */}
+              <h3 className="text-h2 text-foreground">Or Add manually</h3>
+              <Button
+                variant="outline"
+                className="w-fit gap-1.5"
+                onClick={onManualAdd}
+              >
+                Start form
+                <ChevronRightIcon className="size-4" />
+              </Button>
+            </div>
+          )}
+        </>
+      ) : (
+        /* Co-applicant — no access yet */
+        <Button className="w-full" onClick={onSendRequest}>
+          Send join invitation to {name}
+        </Button>
+      )}
+
+      {/* Navigation */}
+      {!hideNavigation && (
+        <div className="pt-2">
+          <Button variant="outline" onClick={onPrev}>
+            <ChevronLeftIcon className="mr-1 size-4" />
+            Previous
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── CDR / Gov logos ──────────────────────────────────────────────────────────
+
+/** Consumer Data Right logo — uses real image when `logoUrl` is provided, falls back to SVG placeholder */
+function CdrLogo({ logoUrl }: { logoUrl?: string }) {
+  if (logoUrl) {
+    return (
+      <img
+        src={logoUrl}
+        alt="Consumer Data Right"
+        className="h-[76px] w-auto object-contain"
+      />
+    );
+  }
+  return (
+    <div className="flex items-center gap-2">
+      <svg
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-label="Consumer Data Right"
+      >
+        <circle cx="24" cy="24" r="22" stroke="#0057A8" strokeWidth="2" />
+        <circle cx="24" cy="24" r="14" stroke="#0057A8" strokeWidth="2" />
+        <circle cx="24" cy="24" r="6" fill="#0057A8" />
+        <circle cx="24" cy="6" r="3" fill="#0057A8" />
+        <circle cx="24" cy="42" r="3" fill="#0057A8" />
+        <circle cx="6" cy="24" r="3" fill="#0057A8" />
+        <circle cx="42" cy="24" r="3" fill="#0057A8" />
+      </svg>
+      <div className="flex flex-col leading-tight">
+        <span className="text-[11px] font-bold text-[#0057A8]">Consumer</span>
+        <span className="text-[11px] font-bold text-[#0057A8]">Data Right</span>
+      </div>
+    </div>
+  );
+}
+
+/** Australian Government crest — uses real image when `logoUrl` is provided, falls back to SVG placeholder */
+function AustralianGovLogo({ logoUrl }: { logoUrl?: string }) {
+  if (logoUrl) {
+    return (
+      <img
+        src={logoUrl}
+        alt="Australian Government"
+        className="h-[70px] w-auto object-contain"
+      />
+    );
+  }
+  return (
+    <div className="flex flex-col items-center gap-0.5">
+      {/* Simplified coat of arms silhouette */}
+      <svg
+        width="40"
+        height="36"
+        viewBox="0 0 40 36"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-label="Australian Government"
+      >
+        <ellipse
+          cx="20"
+          cy="22"
+          rx="14"
+          ry="10"
+          stroke="#333"
+          strokeWidth="1.5"
+        />
+        <circle cx="20" cy="10" r="6" stroke="#333" strokeWidth="1.5" />
+        <path
+          d="M14 18 Q20 8 26 18"
+          stroke="#333"
+          strokeWidth="1.5"
+          fill="none"
+        />
+        <line x1="10" y1="28" x2="30" y2="28" stroke="#333" strokeWidth="1.5" />
+      </svg>
+      <span className="text-[10px] font-semibold text-foreground">
+        Australian Government
+      </span>
+    </div>
+  );
+}
+
+// ─── Icons ────────────────────────────────────────────────────────────────────
+
+function ChevronLeftIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+  );
+}
+
+function ChevronRightIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  );
+}