From a27e4d9bb5cdf8c1d1b96f964dfeeda5b903ce78 Mon Sep 17 00:00:00 2001 From: Armaan Jain <84474476+Developing-Gamer@users.noreply.github.com> Date: Tue, 26 May 2026 17:45:50 -0700 Subject: [PATCH 1/2] Small onboarding fixes (#1489) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ## Summary by cubic Improves onboarding and analytics visuals. Adds clear Stripe setup actions (Connect or Do Later) with safe redirects and precise loading/disabled states, and fixes a stuck dashboard reload after linking an existing project. - **New Features** - Payments onboarding: separate Connect/Do Later actions with per-button loading and mutual disabling. - US-only: “Do Later” creates a deferred Stripe account before finishing onboarding. - Secure redirect: enforce HTTPS on Connect and navigate via window.location.href. - Refresh Stripe account cache after `setupPayments()` to avoid stale data on return. - Analytics: smoother pie hover transitions, fading center label, optional `showDateRange`; dashboard donut hides date range and adjusts radii; revenue hover chart uses split bars for rounded tops and an avg line. - Tests cover deferred/unsupported payments setup and button loading isolation. - **Bug Fixes** - After linking an existing config, use a full page navigation to the project to prevent the dashboard from getting stuck on initial load. Written for commit c80034ad1f0fc753e7de279e894c6fa524ef5adf. Summary will update on new commits. Review in cubic ## Summary by CodeRabbit * **New Features** * Option to defer payments setup during project onboarding; connect/defer actions show targeted loading states. * **Improvements** * Linking existing projects now performs full navigation when applicable. * Charts: refined donut/pie sizing, smoother center fade animation, optional date-range display, and improved color/stack rendering. * Payments setup now refreshes account info after setup. * **Tests** * Added tests covering payments deferral, connect flows, and UI/loading behavior. [![Review Change Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/hexclave/stack-auth/pull/1489?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) --- .../new-project/page-client-parts/content.tsx | 7 +- .../project-onboarding-wizard.test.tsx | 234 +++++++++++++++++- .../project-onboarding-wizard.tsx | 54 ++-- .../[projectId]/(overview)/line-chart.tsx | 30 ++- .../analytics-chart/analytics-chart-pie.tsx | 72 ++++-- .../src/components/analytics-chart/types.ts | 1 + .../apps/implementations/admin-app-impl.ts | 4 +- 7 files changed, 359 insertions(+), 43 deletions(-) diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/content.tsx b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/content.tsx index 76da09258..365de7eb4 100644 --- a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/content.tsx +++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/content.tsx @@ -531,7 +531,12 @@ function PageClientInner() { setOnboardingState={(nextState) => setSelectedProjectOnboardingState(selectedProject, nextState)} clearOnboardingState={() => setSelectedProjectOnboardingState(selectedProject, null)} onComplete={() => { - router.push(`/projects/${encodeURIComponent(selectedProject.id)}`); + const projectUrl = `/projects/${encodeURIComponent(selectedProject.id)}`; + if (mode === "link-existing") { + window.location.href = projectUrl; + return; + } + router.push(projectUrl); }} /> diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/project-onboarding-wizard.test.tsx b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/project-onboarding-wizard.test.tsx index a7918b85d..fef933ec3 100644 --- a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/project-onboarding-wizard.test.tsx +++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/project-onboarding-wizard.test.tsx @@ -24,11 +24,11 @@ vi.mock("@/components/design-components/button", () => ({ DesignButton: ({ children, type, - loading: _loading, + loading, variant: _variant, ...props }: ButtonHTMLAttributes & { loading?: boolean, variant?: string }) => ( - + ), })); @@ -231,6 +231,236 @@ describe("ProjectOnboardingWizard", () => { expect(onComplete).not.toHaveBeenCalled(); }); + it("creates a deferred Stripe account when payments setup is deferred for a US project", async () => { + const setStatus = vi.fn(async () => {}); + const setOnboardingState = vi.fn(async () => {}); + const setupPayments = vi.fn(async () => ({ url: "https://example.com" })); + + render( + ({ + apps: { + installed: { + authentication: { enabled: true }, + emails: { enabled: true }, + payments: { enabled: true }, + }, + }, + domains: { + trustedDomains: {}, + }, + emails: { + selectedThemeId: "default", + server: {}, + }, + }), + app: { + setupPayments, + useEmailThemes: () => [], + useStripeAccountInfo: () => null, + }, + } as never} + status="payments_setup" + onboardingState={null} + mode={null} + setMode={vi.fn()} + setStatus={setStatus} + setOnboardingState={setOnboardingState} + clearOnboardingState={vi.fn(async () => {})} + onComplete={vi.fn()} + />, + ); + + fireEvent.click(screen.getByText("Do Later")); + + await waitFor(() => { + expect(setupPayments).toHaveBeenCalledOnce(); + }); + expect(setOnboardingState).toHaveBeenCalledOnce(); + expect(setStatus).toHaveBeenCalledWith("welcome"); + }); + + it("does not create a Stripe account when payments setup is deferred for an unsupported country", async () => { + const setStatus = vi.fn(async () => {}); + const setupPayments = vi.fn(async () => ({ url: "https://example.com" })); + + render( + ({ + apps: { + installed: { + authentication: { enabled: true }, + emails: { enabled: true }, + payments: { enabled: true }, + }, + }, + domains: { + trustedDomains: {}, + }, + emails: { + selectedThemeId: "default", + server: {}, + }, + }), + app: { + setupPayments, + useEmailThemes: () => [], + useStripeAccountInfo: () => null, + }, + } as never} + status="payments_setup" + onboardingState={{ + selected_config_choice: "create-new", + selected_apps: ["authentication", "emails", "payments"], + selected_sign_in_methods: ["credential"], + selected_email_theme_id: "default", + selected_payments_country: "OTHER", + }} + mode={null} + setMode={vi.fn()} + setStatus={setStatus} + setOnboardingState={vi.fn(async () => {})} + clearOnboardingState={vi.fn(async () => {})} + onComplete={vi.fn()} + />, + ); + + fireEvent.click(screen.getByText("Do Later")); + + await waitFor(() => { + expect(setStatus).toHaveBeenCalledWith("welcome"); + }); + expect(setupPayments).not.toHaveBeenCalled(); + }); + + it("only shows a loading indicator on the deferred payments action while disabling connect", async () => { + const setupPayments = vi.fn(() => new Promise<{ url: string }>(() => {})); + + render( + ({ + apps: { + installed: { + authentication: { enabled: true }, + emails: { enabled: true }, + payments: { enabled: true }, + }, + }, + domains: { + trustedDomains: {}, + }, + emails: { + selectedThemeId: "default", + server: {}, + }, + }), + app: { + setupPayments, + useEmailThemes: () => [], + useStripeAccountInfo: () => null, + }, + } as never} + status="payments_setup" + onboardingState={null} + mode={null} + setMode={vi.fn()} + setStatus={vi.fn(async () => {})} + setOnboardingState={vi.fn(async () => {})} + clearOnboardingState={vi.fn(async () => {})} + onComplete={vi.fn()} + />, + ); + + fireEvent.click(screen.getByRole("button", { name: "Do Later" })); + + await waitFor(() => { + expect(screen.getByRole("button", { name: "Do Later" }).getAttribute("data-loading")).toBe("true"); + }); + expect(screen.getByRole("button", { name: "Do Later" }).hasAttribute("disabled")).toBe(true); + expect(screen.getByRole("button", { name: "Connect" }).hasAttribute("disabled")).toBe(true); + expect(screen.getByRole("button", { name: "Connect" }).getAttribute("data-loading")).toBe("false"); + }); + + it("only shows a loading indicator on the connect payments action while disabling defer", async () => { + const setupPayments = vi.fn(() => new Promise<{ url: string }>(() => {})); + + render( + ({ + apps: { + installed: { + authentication: { enabled: true }, + emails: { enabled: true }, + payments: { enabled: true }, + }, + }, + domains: { + trustedDomains: {}, + }, + emails: { + selectedThemeId: "default", + server: {}, + }, + }), + app: { + setupPayments, + useEmailThemes: () => [], + useStripeAccountInfo: () => null, + }, + } as never} + status="payments_setup" + onboardingState={null} + mode={null} + setMode={vi.fn()} + setStatus={vi.fn(async () => {})} + setOnboardingState={vi.fn(async () => {})} + clearOnboardingState={vi.fn(async () => {})} + onComplete={vi.fn()} + />, + ); + + fireEvent.click(screen.getByRole("button", { name: "Connect" })); + + await waitFor(() => { + expect(screen.getByRole("button", { name: "Connect" }).getAttribute("data-loading")).toBe("true"); + }); + expect(screen.getByRole("button", { name: "Connect" }).hasAttribute("disabled")).toBe(true); + expect(screen.getByRole("button", { name: "Do Later" }).hasAttribute("disabled")).toBe(true); + expect(screen.getByRole("button", { name: "Do Later" }).getAttribute("data-loading")).toBe("false"); + }); + it("persists shared OAuth providers selected during onboarding before completing", async () => { const setStatus = vi.fn(async () => {}); const clearOnboardingState = vi.fn(async () => {}); diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/project-onboarding-wizard.tsx b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/project-onboarding-wizard.tsx index a120b5fbb..9b52e2014 100644 --- a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/project-onboarding-wizard.tsx +++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/project-onboarding-wizard.tsx @@ -117,6 +117,7 @@ export function ProjectOnboardingWizard(props: { const [authSetupMobileTab, setAuthSetupMobileTab] = useState<"methods" | "preview">("methods"); const [domainSetupAutoAdvanceError, setDomainSetupAutoAdvanceError] = useState(null); const [domainSetupAutoAdvancing, setDomainSetupAutoAdvancing] = useState(false); + const [paymentsSetupAction, setPaymentsSetupAction] = useState<"defer" | "connect" | null>(null); const previousProjectId = useRef(null); const paymentsAutoCompletingRef = useRef(false); const stripeAccountInfo = props.project.app.useStripeAccountInfo(); @@ -166,6 +167,7 @@ export function ProjectOnboardingWizard(props: { setAuthSetupMobileTab("methods"); setDomainSetupAutoAdvanceError(null); setDomainSetupAutoAdvancing(false); + setPaymentsSetupAction(null); paymentsAutoCompletingRef.current = false; }, [completeConfig, deriveCurrentOnboardingState, project, project.id, status]); @@ -375,6 +377,37 @@ export function ProjectOnboardingWizard(props: { updateConfig, ]); + const deferPaymentsSetup = useCallback(async () => { + await runWithSaving(async () => { + setPaymentsSetupAction("defer"); + try { + if (selectedPaymentsCountry === "US") { + await props.project.app.setupPayments(); + } + await persistOnboardingState(); + await setStatus("welcome"); + } finally { + setPaymentsSetupAction(null); + } + }); + }, [persistOnboardingState, props.project.app, runWithSaving, selectedPaymentsCountry, setStatus]); + + const connectPaymentsSetup = useCallback(async () => { + await runWithSaving(async () => { + setPaymentsSetupAction("connect"); + try { + const setup = await props.project.app.setupPayments(); + const redirectUrl = new URL(setup.url); + if (redirectUrl.protocol !== "https:") { + throw new Error("Payments setup redirect URL must use HTTPS."); + } + window.location.href = redirectUrl.toString(); + } finally { + setPaymentsSetupAction(null); + } + }); + }, [props.project.app, runWithSaving]); + useEffect(() => { if (status !== "payments_setup" || stripeAccountInfo?.details_submitted !== true || paymentsAutoCompletingRef.current) { return; @@ -893,12 +926,9 @@ export function ProjectOnboardingWizard(props: { primaryAction={ runAsynchronouslyWithAlert(() => runWithSaving(async () => { - await persistOnboardingState(); - await props.setStatus("welcome"); - }))} - + disabled={saving || paymentsSetupAction != null} + loading={paymentsSetupAction === "defer"} + onClick={() => runAsynchronouslyWithAlert(deferPaymentsSetup)} > Do Later @@ -907,15 +937,9 @@ export function ProjectOnboardingWizard(props: { runAsynchronouslyWithAlert(() => runWithSaving(async () => { - const setup = await props.project.app.setupPayments(); - const redirectUrl = new URL(setup.url); - if (redirectUrl.protocol !== "https:") { - throw new Error("Payments setup redirect URL must use HTTPS."); - } - window.location.href = redirectUrl.toString(); - }))} + disabled={saving || paymentsSetupAction != null} + loading={paymentsSetupAction === "connect"} + onClick={() => runAsynchronouslyWithAlert(connectPaymentsSetup)} > Connect diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx index de728313e..e8048d3a2 100644 --- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx +++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx @@ -1970,8 +1970,8 @@ export function DonutChartDisplay({ }), [chartState, chartSegments, chartSegmentSeries]); const pieSize = compact - ? { innerRadius: 32, outerRadius: 48, className: "h-[140px]" } - : { innerRadius: 48, outerRadius: 72, className: "h-[180px]" }; + ? { innerRadius: 42, outerRadius: 56, className: "h-[140px]", showDateRange: false } + : { innerRadius: 62, outerRadius: 78, className: "h-[180px]", showDateRange: false }; return ( ) {formattedDate}
- + Revenue {formatUsdCompact(row.new_cents)}
- + Refunds {formatUsdCompact(row.refund_cents)} @@ -2541,6 +2541,8 @@ export function RevenueHoverChart({ const isHighlightedAvg = hoveredIndex != null && i <= hoveredIndex && i >= hoveredIndex - 6; return { ...p, + new_cents_square: p.refund_cents > 0 ? p.new_cents : 0, + new_cents_rounded: p.refund_cents > 0 ? 0 : p.new_cents, movingAvg, avg7d: sevenDayAvgs[i], highlightedAvg: isHighlightedAvg ? movingAvg : null, @@ -2576,13 +2578,27 @@ export function RevenueHoverChart({ allowEscapeViewBox={{ x: true, y: true }} wrapperStyle={{ zIndex: 9999, pointerEvents: 'none' }} /> - + {datapoints.map((entry, index) => { const baseOpacity = isWeekend(parseChartDate(entry.date)) ? 0.5 : 1; const isActiveBar = hoveredIndex === index; return ( + ); + })} + + + {datapoints.map((entry, index) => { + const baseOpacity = isWeekend(parseChartDate(entry.date)) ? 0.5 : 1; + const isActiveBar = hoveredIndex === index; + return ( + 0 ? primarySegmentSeries @@ -157,9 +162,31 @@ export function AnalyticsChartPie({ return config; }, [canonicalSeries, segmentColors]); - const activeRow = hoverKey + const activeRow = hoverKey != null ? legendRows.find((r) => r.key === hoverKey) ?? null : null; + const [centerDisplayKey, setCenterDisplayKey] = useState(null); + const [centerDisplayVisible, setCenterDisplayVisible] = useState(true); + const centerDisplayRow = centerDisplayKey != null + ? legendRows.find((r) => r.key === centerDisplayKey) ?? null + : null; + useEffect(() => { + const nextKey = activeRow?.key ?? null; + if (nextKey === centerDisplayKey) { + return; + } + + setCenterDisplayVisible(false); + const timeoutId = window.setTimeout(() => { + setCenterDisplayKey(nextKey); + setCenterDisplayVisible(true); + }, 120); + + return () => { + window.clearTimeout(timeoutId); + }; + }, [activeRow?.key, centerDisplayKey]); + const activeDelta = activeRow ? formatDelta(activeRow.value, activeRow.prevValue) : formatDelta(aggregatedPrimaryTotal, aggregatedCompareTotal); @@ -170,7 +197,7 @@ export function AnalyticsChartPie({ const outerData = legendRows.map((r) => ({ name: cssIdent(r.key), hoverKey: r.key, value: r.value, fill: r.fill })); const innerData = legendRows.map((r) => ({ name: cssIdent(r.key), hoverKey: r.key, value: r.prevValue, fill: r.fillCompare })); - const activeIdx = hoverKey ? legendRows.findIndex((r) => r.key === hoverKey) : -1; + const activeIdx = hoverKey != null ? legendRows.findIndex((r) => r.key === hoverKey) : -1; return (
setHoverKey(d.hoverKey)} onMouseLeave={() => setHoverKey(null)} /> @@ -253,6 +281,7 @@ export function AnalyticsChartPie({ key={`inner-${d.name}`} fill={`var(--color-compare-${d.name})`} opacity={inactive ? 0.22 : 0.95} + style={segmentTransitionStyle} onMouseEnter={() => setHoverKey(d.hoverKey)} onMouseLeave={() => setHoverKey(null)} /> @@ -263,24 +292,33 @@ export function AnalyticsChartPie({ -
- - {activeRow ? activeRow.label : strings.pieTotalCenter} +
+ + {centerDisplayRow ? centerDisplayRow.label : strings.pieTotalCenter} - - {fmtValue(activeRow ? activeRow.value : canonicalTotal, yFormatKind)} + + {fmtValue(centerDisplayRow ? centerDisplayRow.value : canonicalTotal, yFormatKind)}
-
- - {startLabel} – {endLabel} - - {showCompare && ( - - )} -
+ {(showDateRange || showCompare) && ( +
+ {showDateRange && ( + + {startLabel} – {endLabel} + + )} + {showCompare && ( + + )} +
+ )}
    @@ -297,7 +335,7 @@ export function AnalyticsChartPie({ onFocus={() => setHoverKey(r.key)} onBlur={() => setHoverKey(null)} className={cn( - "flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left transition-[background-color,opacity] duration-150 hover:bg-foreground/[0.04] hover:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/20", + "flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left transition-[background-color,opacity] duration-200 ease-out hover:bg-foreground/[0.04] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/20", isActive && "bg-foreground/[0.05]", dimmed && "opacity-50", )} diff --git a/packages/dashboard-ui-components/src/components/analytics-chart/types.ts b/packages/dashboard-ui-components/src/components/analytics-chart/types.ts index f2278656d..5708aaa60 100644 --- a/packages/dashboard-ui-components/src/components/analytics-chart/types.ts +++ b/packages/dashboard-ui-components/src/components/analytics-chart/types.ts @@ -189,6 +189,7 @@ export type AnalyticsChartPieProps = { compareInnerRadius?: number, compareOuterRadius?: number, className?: string, + showDateRange?: boolean, }; export type AnalyticsChartSegmentRamp = diff --git a/packages/template/src/lib/stack-app/apps/implementations/admin-app-impl.ts b/packages/template/src/lib/stack-app/apps/implementations/admin-app-impl.ts index 380b26d14..4fd0b5326 100644 --- a/packages/template/src/lib/stack-app/apps/implementations/admin-app-impl.ts +++ b/packages/template/src/lib/stack-app/apps/implementations/admin-app-impl.ts @@ -814,7 +814,9 @@ export class _StackAdminAppImplIncomplete { - return await this._interface.setupPayments(); + const result = await this._interface.setupPayments(); + await this._stripeAccountInfoCache.refresh([]); + return result; } async createStripeWidgetAccountSession(): Promise<{ client_secret: string }> { From 175b47b4f4babf693cb1760fc8fcb5c3b5ed5b10 Mon Sep 17 00:00:00 2001 From: Bilal Godil Date: Tue, 26 May 2026 18:46:37 -0700 Subject: [PATCH 2/2] chore(db): drop internal-project rename migration Removes the data migration that renamed the internal Project row's displayName/description from 'Stack Dashboard' to 'Hexclave Dashboard'. Fresh installs still get the new name via seed.ts; existing deployments will keep the old strings until renamed by hand or in a later PR. --- .../migration.sql | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100644 apps/backend/prisma/migrations/20260523000000_rename_internal_project_to_hexclave/migration.sql diff --git a/apps/backend/prisma/migrations/20260523000000_rename_internal_project_to_hexclave/migration.sql b/apps/backend/prisma/migrations/20260523000000_rename_internal_project_to_hexclave/migration.sql deleted file mode 100644 index b7e56ea2e..000000000 --- a/apps/backend/prisma/migrations/20260523000000_rename_internal_project_to_hexclave/migration.sql +++ /dev/null @@ -1,14 +0,0 @@ --- Rebrand: rename the internal-project display name and description from --- "Stack Dashboard" / "Stack's admin dashboard" to "Hexclave Dashboard" / --- "Hexclave's admin dashboard". Idempotent: only updates the row if it still --- holds the pre-rebrand defaults for BOTH fields, so any operator who renamed --- the internal project themselves (or even just one field) is left untouched. --- Re-running the migration after the rename is a no-op. Missing row (fresh --- install before seed) is also a no-op. - -UPDATE "Project" -SET "displayName" = 'Hexclave Dashboard', - "description" = 'Hexclave''s admin dashboard' -WHERE "id" = 'internal' - AND "displayName" = 'Stack Dashboard' - AND "description" = 'Stack''s admin dashboard';