@tribe-nest/forge 1.13.0

package/src/ui/styled/AccountDashboard.tsx

@@ -0,0 +1,575 @@
+import { useEffect, useState } from "react";
+import {
+  usePublicAuth,
+  useUserOrders,
+  useSavedPosts,
+  useNotificationPreferences,
+  useUpdateNotificationPreference,
+  useCancelMembership,
+  useUpdateAccount,
+  useChangePassword,
+  useExportAccountData,
+  useRequestAccountDeletion,
+  useCancelAccountDeletion,
+  useAccountDeletionStatus,
+  OrderStatus,
+  type NotificationPreferences,
+} from "../../index";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useSiteConfig } from "../../data/queries/useWebsite";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { Loading } from "./Loading";
+
+export const ACCOUNT_TABS = ["membership", "orders", "saved", "account", "notifications"] as const;
+export type AccountTabKey = (typeof ACCOUNT_TABS)[number];
+
+export interface AccountDashboardProps {
+  className?: string;
+  style?: React.CSSProperties;
+  /** The currently active tab (driven by the host route's URL search param). */
+  tab: AccountTabKey;
+  /** Called when the visitor selects a different tab. Host maps this to navigation. */
+  onTabChange?: (tab: AccountTabKey) => void;
+  /**
+   * Navigate to the membership page (the "Change" / "Join" action). Host wires
+   * this to its router (e.g. `/i/membership`).
+   */
+  onNavigateMembership?: () => void;
+  /**
+   * Optional currency formatter override. Defaults to Forge's `useFormatCurrency`
+   * (which honors the visitor's selected currency + tenant exchange rates), so the
+   * per-order / per-membership currency code is respected exactly as before.
+   */
+  formatAmount?: (amount: number, currencyCode?: string) => string;
+  /** Optional short-date formatter. Defaults to `en-US` "Jun 30, 2026". */
+  formatDate?: (value: string | number | Date) => string;
+  /** Fallback currency code used when a record has no explicit currency. */
+  currency?: string;
+}
+
+const defaultFormatDate = (value: string | number | Date): string =>
+  new Date(value).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
+
+// ---- shared styling helpers -------------------------------------------------
+
+function useCardStyles() {
+  const t = useThemeTokens();
+  return {
+    t,
+    card: {
+      background: t.surface,
+      border: `1px solid ${t.primary}20`,
+      borderRadius: t.cornerRadius,
+      padding: 24,
+      color: t.text,
+    } as React.CSSProperties,
+    button: {
+      padding: "8px 14px",
+      borderRadius: t.cornerRadius,
+      background: t.primary,
+      color: t.background,
+      border: "none",
+      fontWeight: 600,
+      cursor: "pointer",
+    } as React.CSSProperties,
+    ghostButton: {
+      padding: "8px 14px",
+      borderRadius: t.cornerRadius,
+      background: "transparent",
+      color: t.text,
+      border: `1px solid ${t.primary}40`,
+      cursor: "pointer",
+    } as React.CSSProperties,
+    input: {
+      width: "100%",
+      height: 40,
+      padding: "8px 12px",
+      borderRadius: t.cornerRadius,
+      border: `1px solid ${t.primary}40`,
+      background: "transparent",
+      color: t.text,
+      outline: "none",
+    } as React.CSSProperties,
+  };
+}
+
+// ---- shared context passed down to tabs ------------------------------------
+
+interface TabContext {
+  formatAmount: (amount: number, currencyCode?: string) => string;
+  formatDate: (value: string | number | Date) => string;
+  currency?: string;
+  onNavigateMembership?: () => void;
+}
+
+// ---- page -------------------------------------------------------------------
+
+/**
+ * The full member account dashboard body (membership / orders / saved / account /
+ * notifications tabs). Framework-agnostic: the active tab and navigation targets
+ * are supplied by the host via props.
+ */
+export function AccountDashboard({
+  tab,
+  onTabChange,
+  onNavigateMembership,
+  formatAmount,
+  formatDate,
+  currency,
+  className,
+  style,
+}: AccountDashboardProps) {
+  const { user, logout } = usePublicAuth();
+  const { t } = useCardStyles();
+  const { data: siteConfig } = useSiteConfig();
+
+  const fmtAmount = useAmountFormatter(formatAmount);
+  const fmtDate = formatDate ?? defaultFormatDate;
+
+  const ctx: TabContext = {
+    formatAmount: fmtAmount,
+    formatDate: fmtDate,
+    // Fallback for records with no explicit currency — the tenant's runtime
+    // settlement currency (single source), unless the host overrides it.
+    currency: currency ?? siteConfig?.currency,
+    onNavigateMembership,
+  };
+
+  if (!user) return <Loading fullPage />;
+
+  return (
+    <div className={className} style={{ maxWidth: 900, margin: "0 auto", color: t.text, ...style }}>
+      <div style={{ marginBottom: 24, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
+        <div>
+          <h1 style={{ fontSize: 28, fontWeight: 800, fontFamily: t.headingFontFamily }}>My Account</h1>
+          <p style={{ opacity: 0.7 }}>{user.email}</p>
+        </div>
+        <button
+          onClick={() => logout()}
+          style={{ padding: "8px 14px", borderRadius: t.cornerRadius, background: "transparent", color: t.text, border: `1px solid ${t.primary}40`, cursor: "pointer" }}
+        >
+          Log out
+        </button>
+      </div>
+
+      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 24 }}>
+        {ACCOUNT_TABS.map((tabKey) => (
+          <button
+            key={tabKey}
+            onClick={() => onTabChange?.(tabKey)}
+            style={{
+              padding: "8px 14px",
+              borderRadius: t.cornerRadius,
+              border: `1px solid ${t.primary}40`,
+              background: tab === tabKey ? t.primary : "transparent",
+              color: tab === tabKey ? t.background : t.text,
+              cursor: "pointer",
+              textTransform: "capitalize",
+              fontWeight: 600,
+            }}
+          >
+            {tabKey}
+          </button>
+        ))}
+      </div>
+
+      {tab === "membership" && <MembershipTab ctx={ctx} />}
+      {tab === "orders" && <OrdersTab ctx={ctx} />}
+      {tab === "saved" && <SavedTab />}
+      {tab === "account" && <AccountTab ctx={ctx} />}
+      {tab === "notifications" && <NotificationsTab />}
+    </div>
+  );
+}
+
+// ---- Membership tab ---------------------------------------------------------
+
+function MembershipTab({ ctx }: { ctx: TabContext }) {
+  const { user } = usePublicAuth();
+  const { t, card, button, ghostButton } = useCardStyles();
+  const { formatAmount, formatDate, currency, onNavigateMembership } = ctx;
+  const cancelMembership = useCancelMembership();
+  const [isCancelling, setIsCancelling] = useState(false);
+
+  const membership = user?.membership;
+  const isActive = membership?.status === "active";
+
+  const onCancel = async () => {
+    if (!membership?.id) return;
+    setIsCancelling(true);
+    try {
+      await cancelMembership.mutateAsync({ membershipId: membership.id });
+      window.location.reload();
+    } finally {
+      setIsCancelling(false);
+    }
+  };
+
+  return (
+    <div style={card}>
+      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>Current Membership</h2>
+      {membership ? (
+        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+          <div>
+            <h3 style={{ fontWeight: 700 }}>{membership.membershipTier.name}</h3>
+            <p style={{ fontSize: 13, opacity: 0.7 }}>{isActive ? "Active" : "Cancelled"}</p>
+            {!!membership.subscriptionAmount && (
+              <p style={{ fontSize: 14, marginTop: 4 }}>
+                {formatAmount(membership.subscriptionAmount, membership.subscriptionCurrency || currency)} / {membership.billingCycle}
+              </p>
+            )}
+          </div>
+          {!!membership.membershipTier.benefits?.length && (
+            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
+              {membership.membershipTier.benefits.map((b) => (
+                <li key={b.id} style={{ display: "flex", gap: 8 }}>
+                  <span style={{ color: t.primary }}>✓</span>
+                  {b.title}
+                </li>
+              ))}
+            </ul>
+          )}
+          {membership.endDate && (
+            <p style={{ fontSize: 14, opacity: 0.8 }}>
+              {isActive ? "Renews" : "Ends"} on {formatDate(membership.endDate)}
+            </p>
+          )}
+        </div>
+      ) : (
+        <p style={{ opacity: 0.8 }}>You don&apos;t have an active membership.</p>
+      )}
+
+      <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 24 }}>
+        {isActive && (
+          <button onClick={onCancel} disabled={isCancelling} style={ghostButton}>
+            {isCancelling ? "Cancelling…" : "Cancel"}
+          </button>
+        )}
+        <button onClick={() => onNavigateMembership?.()} style={button}>
+          {membership ? "Change" : "Join"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ---- Orders tab -------------------------------------------------------------
+
+function OrdersTab({ ctx }: { ctx: TabContext }) {
+  const { user } = usePublicAuth();
+  const { t, card } = useCardStyles();
+  const { formatAmount, formatDate, currency } = ctx;
+  const { data: orders, isLoading } = useUserOrders(user?.id);
+
+  const formatStatus = (s: OrderStatus) => s.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
+
+  return (
+    <div style={card}>
+      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>My Orders</h2>
+      {isLoading ? (
+        <Loading />
+      ) : orders && orders.length > 0 ? (
+        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+          {orders
+            .filter((o) => ![OrderStatus.InitiatedPayment, OrderStatus.PaymentFailed].includes(o.status))
+            .map((order) => (
+              <div key={order.id} style={{ border: `1px solid ${t.primary}20`, borderRadius: t.cornerRadius, padding: 16 }}>
+                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12 }}>
+                  <div>
+                    <div style={{ fontWeight: 600 }}>Order #{order.id}</div>
+                    <div style={{ fontSize: 13, opacity: 0.7 }}>{formatDate(order.createdAt)}</div>
+                  </div>
+                  <span style={{ fontSize: 13, color: t.primary }}>{formatStatus(order.status)}</span>
+                </div>
+                {order.deliveryGroups.map((group) =>
+                  group.items.map((item, i) => (
+                    <div key={`${item.productVariantId}-${i}`} style={{ display: "flex", justifyContent: "space-between", fontSize: 14, padding: "4px 0" }}>
+                      <span>
+                        {item.title} × {item.quantity}
+                      </span>
+                      <span>{formatAmount(item.price * item.quantity, order.currency || currency)}</span>
+                    </div>
+                  )),
+                )}
+                <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 700, marginTop: 12, paddingTop: 12, borderTop: `1px solid ${t.primary}20` }}>
+                  <span>Total</span>
+                  <span style={{ color: t.primary }}>{formatAmount(order.totalAmount, order.currency || currency)}</span>
+                </div>
+              </div>
+            ))}
+        </div>
+      ) : (
+        <p style={{ opacity: 0.8 }}>You haven&apos;t placed any orders yet.</p>
+      )}
+    </div>
+  );
+}
+
+// ---- Saved tab --------------------------------------------------------------
+
+function SavedTab() {
+  const { user } = usePublicAuth();
+  const { t, card } = useCardStyles();
+  const { data, isLoading } = useSavedPosts(user?.id);
+  const posts = data?.data;
+
+  return (
+    <div style={card}>
+      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>Saved Posts</h2>
+      {isLoading ? (
+        <Loading />
+      ) : posts && posts.length > 0 ? (
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 16 }}>
+          {posts.map((post) => (
+            <div key={post.id} style={{ border: `1px solid ${t.primary}20`, borderRadius: t.cornerRadius, padding: 16 }}>
+              <p style={{ fontSize: 14, marginBottom: 8 }}>{post.caption}</p>
+              <p style={{ fontSize: 12, opacity: 0.6 }}>
+                {post.likes} likes · {post.comments} comments
+              </p>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <p style={{ opacity: 0.8 }}>You haven&apos;t saved any posts yet.</p>
+      )}
+    </div>
+  );
+}
+
+// ---- Account tab ------------------------------------------------------------
+
+function AccountTab({ ctx }: { ctx: TabContext }) {
+  const { user, refetchUser, logout } = usePublicAuth();
+  const { t, card, button, ghostButton, input } = useCardStyles();
+  const { formatDate } = ctx;
+
+  const updateAccount = useUpdateAccount();
+  const changePassword = useChangePassword();
+  const exportData = useExportAccountData();
+  const requestDeletion = useRequestAccountDeletion();
+  const cancelDeletion = useCancelAccountDeletion();
+  const { data: deletionStatus } = useAccountDeletionStatus();
+
+  const [firstName, setFirstName] = useState(user?.firstName ?? "");
+  const [lastName, setLastName] = useState(user?.lastName ?? "");
+  const [profileMsg, setProfileMsg] = useState("");
+
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [passwordMsg, setPasswordMsg] = useState("");
+
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const scheduledAt = deletionStatus?.deletionRequest?.scheduledDeletionAt;
+
+  const onUpdateProfile = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setProfileMsg("");
+    try {
+      await updateAccount.mutateAsync({ firstName, lastName });
+      await refetchUser();
+      setProfileMsg("Profile updated.");
+    } catch {
+      setProfileMsg("Failed to update profile.");
+    }
+  };
+
+  const onChangePassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setPasswordMsg("");
+    if (newPassword.length < 8) return setPasswordMsg("New password must be at least 8 characters.");
+    if (newPassword !== confirmPassword) return setPasswordMsg("Passwords don't match.");
+    try {
+      await changePassword.mutateAsync({ currentPassword, newPassword });
+      logout();
+    } catch {
+      setPasswordMsg("Failed to update password.");
+    }
+  };
+
+  const onExport = async () => {
+    try {
+      const json = await exportData.mutateAsync();
+      const blob = new Blob([JSON.stringify(json, null, 2)], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "data-export.json";
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const sectionTitle: React.CSSProperties = { fontSize: 16, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily };
+  const label: React.CSSProperties = { fontSize: 14, display: "block", marginBottom: 6 };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+      {/* Profile */}
+      <form onSubmit={onUpdateProfile} style={card}>
+        <h2 style={sectionTitle}>Profile Information</h2>
+        <div style={{ display: "flex", gap: 12, marginBottom: 12 }}>
+          <div style={{ flex: 1 }}>
+            <label style={label}>First name</label>
+            <input value={firstName} onChange={(e) => setFirstName(e.target.value)} style={input} />
+          </div>
+          <div style={{ flex: 1 }}>
+            <label style={label}>Last name</label>
+            <input value={lastName} onChange={(e) => setLastName(e.target.value)} style={input} />
+          </div>
+        </div>
+        <p style={{ fontSize: 13, opacity: 0.7, marginBottom: 12 }}>Email: {user?.email} (cannot be changed)</p>
+        {profileMsg && <p style={{ fontSize: 13, marginBottom: 12 }}>{profileMsg}</p>}
+        <button type="submit" style={button}>
+          Update Profile
+        </button>
+      </form>
+
+      {/* Password */}
+      <form onSubmit={onChangePassword} style={card}>
+        <h2 style={sectionTitle}>Change Password</h2>
+        {passwordMsg && <p style={{ color: "#ef4444", fontSize: 13, marginBottom: 12 }}>{passwordMsg}</p>}
+        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+          <div>
+            <label style={label}>Current password</label>
+            <input type="password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} style={input} />
+          </div>
+          <div style={{ display: "flex", gap: 12 }}>
+            <div style={{ flex: 1 }}>
+              <label style={label}>New password</label>
+              <input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} style={input} />
+            </div>
+            <div style={{ flex: 1 }}>
+              <label style={label}>Confirm new password</label>
+              <input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} style={input} />
+            </div>
+          </div>
+        </div>
+        <button type="submit" style={{ ...button, marginTop: 16 }}>
+          Update Password
+        </button>
+      </form>
+
+      {/* Data rights */}
+      <div style={card}>
+        <h2 style={sectionTitle}>Your Data</h2>
+        <p style={{ fontSize: 13, opacity: 0.7, marginBottom: 12 }}>Export a copy of your personal data.</p>
+        <button onClick={onExport} style={ghostButton}>
+          Export My Data
+        </button>
+      </div>
+
+      {/* Delete account */}
+      <div style={{ ...card, borderColor: "#ef444533" }}>
+        <h2 style={{ ...sectionTitle, color: "#ef4444" }}>Delete Account</h2>
+        {scheduledAt ? (
+          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+            <p style={{ fontSize: 14 }}>
+              Account deletion scheduled for {formatDate(scheduledAt)}. You can cancel before then.
+            </p>
+            <button onClick={() => cancelDeletion.mutate()} style={ghostButton}>
+              Cancel Deletion
+            </button>
+          </div>
+        ) : confirmDelete ? (
+          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+            <p style={{ fontSize: 14 }}>
+              Your account will be scheduled for permanent deletion after a 30-day cooling-off period.
+            </p>
+            <div style={{ display: "flex", gap: 12 }}>
+              <button onClick={() => requestDeletion.mutate()} style={{ ...button, background: "#ef4444" }}>
+                Yes, delete my account
+              </button>
+              <button onClick={() => setConfirmDelete(false)} style={ghostButton}>
+                Cancel
+              </button>
+            </div>
+          </div>
+        ) : (
+          <button
+            onClick={() => setConfirmDelete(true)}
+            style={{ padding: "8px 14px", borderRadius: t.cornerRadius, background: "#ef444411", color: "#ef4444", border: "1px solid #ef444433", cursor: "pointer" }}
+          >
+            Request Account Deletion
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---- Notifications tab ------------------------------------------------------
+
+function NotificationsTab() {
+  const { t, card } = useCardStyles();
+  const { data } = useNotificationPreferences();
+  const updatePreference = useUpdateNotificationPreference();
+
+  const [preferences, setPreferences] = useState<NotificationPreferences>({ newPosts: true, chatMessages: true });
+
+  useEffect(() => {
+    if (data?.preferences) {
+      setPreferences({
+        newPosts: data.preferences.newPosts !== false,
+        chatMessages: data.preferences.chatMessages !== false,
+      });
+    }
+  }, [data]);
+
+  const toggle = async (key: keyof NotificationPreferences) => {
+    const value = !preferences[key];
+    setPreferences((prev) => ({ ...prev, [key]: value }));
+    try {
+      await updatePreference.mutateAsync({ key, value });
+    } catch {
+      setPreferences((prev) => ({ ...prev, [key]: !value }));
+    }
+  };
+
+  const Row = ({ k, title, desc }: { k: keyof NotificationPreferences; title: string; desc: string }) => (
+    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+      <div>
+        <div style={{ fontWeight: 600 }}>{title}</div>
+        <div style={{ fontSize: 13, opacity: 0.7 }}>{desc}</div>
+      </div>
+      <button
+        onClick={() => toggle(k)}
+        style={{
+          position: "relative",
+          width: 44,
+          height: 24,
+          borderRadius: 999,
+          border: "none",
+          cursor: "pointer",
+          background: preferences[k] ? t.primary : `${t.text}40`,
+        }}
+        aria-pressed={preferences[k]}
+      >
+        <span
+          style={{
+            position: "absolute",
+            top: 4,
+            left: preferences[k] ? 24 : 4,
+            width: 16,
+            height: 16,
+            borderRadius: "50%",
+            background: "#fff",
+            transition: "left 0.15s",
+          }}
+        />
+      </button>
+    </div>
+  );
+
+  return (
+    <div style={card}>
+      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>Notification Types</h2>
+      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <Row k="newPosts" title="New Posts" desc="Get notified when new posts are published" />
+        <Row k="chatMessages" title="Chat Messages" desc="Get notified when new chat messages arrive" />
+      </div>
+    </div>
+  );
+}