From 0695ca421bb5fba4f7165f086f84948d8fcee991 Mon Sep 17 00:00:00 2001 From: MaheshtheDev <38828053+MaheshtheDev@users.noreply.github.com> Date: Thu, 13 Aug 2026 06:58:47 +0000 Subject: [PATCH] feat(web): take a card before the Company Brain trial starts (#1459) Onboarding now opens a trial step that collects a card through Stripe checkout before the brain is enabled, with a timeline showing today's $0, the day-12 reminder, and the day-14 charge. - Only leaves the card step once the API confirms the trial is live - Brain home shows a setup banner and dims what the trial unlocks - Recovers orgs that abandoned checkout instead of stranding them - Adds the organization ID to account settings, copyable from the label --- .../components/brain-home/brain-home-view.tsx | 21 +- .../brain-home/connections-board.tsx | 47 +++- apps/web/components/dashboard-view.tsx | 2 + .../company-brain-onboarding.tsx | 51 +++- .../onboarding-brain/research-action-rail.tsx | 2 +- .../onboarding-brain/step-trial.tsx | 239 ++++++++++++++++++ apps/web/components/settings/account.tsx | 19 +- apps/web/components/slack-connect-card.tsx | 24 +- apps/web/components/trial-setup-banner.tsx | 41 +++ apps/web/hooks/use-trial-status.ts | 34 +++ apps/web/lib/analytics.ts | 5 + 11 files changed, 451 insertions(+), 34 deletions(-) create mode 100644 apps/web/components/onboarding-brain/step-trial.tsx create mode 100644 apps/web/components/trial-setup-banner.tsx create mode 100644 apps/web/hooks/use-trial-status.ts diff --git a/apps/web/components/brain-home/brain-home-view.tsx b/apps/web/components/brain-home/brain-home-view.tsx index 06a00ba6f..3501c5e8f 100644 --- a/apps/web/components/brain-home/brain-home-view.tsx +++ b/apps/web/components/brain-home/brain-home-view.tsx @@ -8,6 +8,8 @@ import { ArrowRight, Check, FileText, Loader2, UserPlus } from "lucide-react" import { useQueryState } from "nuqs" import { useSettingsModal } from "@/components/settings/settings-modal" import { useBrainTrial } from "@/hooks/use-brain-trial" +import { TrialSetupBanner } from "@/components/trial-setup-banner" +import { useTrialStatus } from "@/hooks/use-trial-status" import { dmSans125ClassName } from "@/lib/fonts" import { useViewMode } from "@/lib/view-mode-context" import { @@ -170,6 +172,7 @@ export function BrainHomeView() { const o = useBrainOverview() const trial = useBrainTrial() const board = useConnectionsBoard() + const { needsSetup } = useTrialStatus() // Rows with no reported state (older orgs, pre-Slack) don't count or render. const milestones = [ ...(o.researchStatus != null ? [o.researchStatus === "done"] : []), @@ -186,6 +189,7 @@ export function BrainHomeView() { return (
+ - {board.slack && !board.slack.connected && } + {board.slack && !board.slack.connected && !needsSetup && }
{board.showBoard && } @@ -486,7 +490,7 @@ function BrainTimeline({ canInvite: boolean toolsCardVisible: boolean }) { - const trial = useBrainTrial() + const { needsSetup } = useTrialStatus() const { openSettings } = useSettingsModal() const { setViewMode } = useViewMode() const [, setInvite] = useQueryState("invite") @@ -532,12 +536,13 @@ function BrainTimeline({ title: slackConnected ? "Slack connected" : "Connect Slack", hint: slackConnected ? undefined - : trial.state === "trialing" - ? "Ask your brain from any channel." - : "Starts your 14-day free trial. No credit card needed.", - action: slackConnected - ? undefined - : { label: "Add", href: `${BACKEND}/brain/slack/oauth/install` }, + : needsSetup + ? "Starts with your trial." + : "Ask your brain from any channel.", + action: + slackConnected || needsSetup + ? undefined + : { label: "Add", href: `${BACKEND}/brain/slack/oauth/install` }, }, ...(rollout != null ? [ diff --git a/apps/web/components/brain-home/connections-board.tsx b/apps/web/components/brain-home/connections-board.tsx index 04ab056c8..3c79256e7 100644 --- a/apps/web/components/brain-home/connections-board.tsx +++ b/apps/web/components/brain-home/connections-board.tsx @@ -4,6 +4,7 @@ import { cn } from "@lib/utils" import { ArrowRight, Loader2 } from "lucide-react" import { useCallback, useEffect, useState } from "react" import { toast } from "sonner" +import { useTrialStatus } from "@/hooks/use-trial-status" import { dmSans125ClassName } from "@/lib/fonts" import { useViewMode } from "@/lib/view-mode-context" import { brainConnectorIcon, SlackMark } from "../brain-connector-icons" @@ -192,6 +193,7 @@ export const CONNECT_TOOLS_CARD_ID = "connect-tools" export function ConnectToolsCard({ board }: { board: ConnectionsBoardState }) { const { setViewMode } = useViewMode() const { loading, featured, overflow, busy, isConnected, connect } = board + const { needsSetup } = useTrialStatus() return (

- Give your Slack agent live access to the apps your team already uses. + {needsSetup + ? "Starts with your trial." + : "Give your Slack agent live access to the apps your team already uses."}

-
+
{loading ? ( Array.from({ length: 3 }).map((_, i) => ( @@ -248,6 +258,7 @@ export function ConnectToolsCard({ board }: { board: ConnectionsBoardState }) { export function AskInSlackCard({ board }: { board: ConnectionsBoardState }) { const { previewApps, isConnected, connectedCount } = board + const { needsSetup } = useTrialStatus() const prompts = previewApps .filter((a) => AGENT_PROMPTS[a.slug]) .slice(0, 6) @@ -275,12 +286,19 @@ export function AskInSlackCard({ board }: { board: ConnectionsBoardState }) {

- {connectedCount > 0 - ? "Things your agent can answer now:" - : "Connect a tool and your agent can answer:"} + {needsSetup + ? "Starts with your trial." + : connectedCount > 0 + ? "Things your agent can answer now:" + : "Connect a tool and your agent can answer:"}

-
+
{prompts.map((p, i) => ( diff --git a/apps/web/components/dashboard-view.tsx b/apps/web/components/dashboard-view.tsx index 93559ace7..12c76a86f 100644 --- a/apps/web/components/dashboard-view.tsx +++ b/apps/web/components/dashboard-view.tsx @@ -32,6 +32,7 @@ import { StaticGraphPreview } from "@/components/memory-graph/graph-card" import { Tooltip, TooltipContent, TooltipTrigger } from "@ui/components/tooltip" import { ChromeIcon, RaycastIcon } from "@/components/integration-icons" import { SlackConnectCard } from "@/components/slack-connect-card" +import { TrialSetupBanner } from "@/components/trial-setup-banner" import { GoogleDrive, Notion, MCPIcon } from "@ui/assets/icons" import { analytics } from "@/lib/analytics" import type { IntegrationParamValue } from "@/lib/search-params" @@ -1344,6 +1345,7 @@ export function DashboardView({ )} >
+ {headerNotice ?
{headerNotice}
: null} diff --git a/apps/web/components/onboarding-brain/company-brain-onboarding.tsx b/apps/web/components/onboarding-brain/company-brain-onboarding.tsx index e9a0673ac..3d69acb73 100644 --- a/apps/web/components/onboarding-brain/company-brain-onboarding.tsx +++ b/apps/web/components/onboarding-brain/company-brain-onboarding.tsx @@ -30,6 +30,9 @@ import { UserAvatar, } from "./step-about" import { ResearchActionRail } from "./research-action-rail" +import { CHECKOUT_RETURN_PARAM, StepTrial } from "./step-trial" +import { useTrialStatus } from "@/hooks/use-trial-status" +import { analytics } from "@/lib/analytics" import { type CompanyBrainConfirmResult, type CompanyBrainOrganizationChoice, @@ -52,7 +55,7 @@ interface CompanyBrainOnboardingProps { const BACKEND = process.env.NEXT_PUBLIC_BACKEND_URL ?? "https://api.supermemory.ai" -type Phase = "confirm" | "research" +type Phase = "confirm" | "trial" | "research" function normalizeDomain(input: string): string { const host = input @@ -82,6 +85,23 @@ export function CompanyBrainOnboarding({ onUsePersonal, }: CompanyBrainOnboardingProps) { const [phase, setPhase] = useState("confirm") + const { needsSetup } = useTrialStatus() + const resumedRef = useRef(false) + useEffect(() => { + if (resumedRef.current) return + const url = new URL(window.location.href) + if (url.searchParams.get(CHECKOUT_RETURN_PARAM) !== "complete") return + resumedRef.current = true + url.searchParams.delete(CHECKOUT_RETURN_PARAM) + window.history.replaceState({}, "", `${url.pathname}${url.search}`) + setPhase("research") + }, []) + useEffect(() => { + if (resumedRef.current || !needsSetup || phase !== "confirm") return + resumedRef.current = true + setPhase("trial") + analytics.brainTrialCardViewed() + }, [needsSetup, phase]) const [domain, setDomain] = useState(initialDomain) const [organizationChoices, setOrganizationChoices] = useState< CompanyBrainOrganizationChoice[] | null @@ -107,7 +127,8 @@ export function CompanyBrainOnboarding({ } setOrganizationChoices(null) setServerSchedulesResearch(result.serverSchedulesResearch) - setPhase("research") + setPhase("trial") + analytics.brainTrialCardViewed() } // New-org signup schedules research after provisioning; if that hook is slow @@ -203,9 +224,9 @@ export function CompanyBrainOnboarding({
{/* Persistent card: full confirm card, then morphs into a slim docked header. */} @@ -215,13 +236,25 @@ export function CompanyBrainOnboarding({ style={cardSurfaceStyle} className={cn( "w-full mx-auto rounded-[22px] bg-[#1B1F24]", - phase === "confirm" - ? "max-w-xl p-6 md:p-8" - : "max-w-7xl px-5 py-3 xl:max-w-[1360px]", + phase === "research" + ? "max-w-7xl px-5 py-3 xl:max-w-[1360px]" + : phase === "trial" + ? "max-w-4xl p-6 md:p-7" + : "max-w-xl p-6 md:p-8", )} > - {phase === "confirm" ? ( + {phase === "trial" ? ( + + setPhase("research")} /> + + ) : phase === "confirm" ? (

- Starts your 14-day free trial. No credit card needed. + Included in your 14-day trial.

) diff --git a/apps/web/components/onboarding-brain/step-trial.tsx b/apps/web/components/onboarding-brain/step-trial.tsx new file mode 100644 index 000000000..48bc18233 --- /dev/null +++ b/apps/web/components/onboarding-brain/step-trial.tsx @@ -0,0 +1,239 @@ +"use client" + +import { Gmail, GoogleDrive, Granola, MCPIcon, Notion } from "@ui/assets/icons" +import { GradientLogo } from "@ui/assets/Logo" +import { Button } from "@ui/components/button" +import { cn } from "@lib/utils" +import { ArrowRight, Loader2, ShieldCheck } from "lucide-react" +import { useState } from "react" +import { toast } from "sonner" +import { SlackMark } from "@/components/brain-connector-icons" +import { analytics } from "@/lib/analytics" +import { dmSans125ClassName } from "@/lib/fonts" + +const BACKEND = + process.env.NEXT_PUBLIC_BACKEND_URL ?? "https://api.supermemory.ai" + +export const CHECKOUT_RETURN_PARAM = "brainTrial" + +const TRIAL_DAYS = 14 +/** The only reminder that lands before the charge; 15 and 17 are post-trial. */ +const REMINDER_DAY = 12 +const MONTHLY_PRICE = "$100" + +function checkoutReturnUrl(): string { + const url = new URL(window.location.href) + url.searchParams.set(CHECKOUT_RETURN_PARAM, "complete") + return url.toString() +} + +function dayOffset(days: number): string { + const at = new Date(Date.now() + days * 24 * 60 * 60 * 1000) + return at.toLocaleDateString(undefined, { month: "short", day: "numeric" }) +} + +const ORBIT = [ + { key: "slack", r: 74, deg: 0, node: }, + { key: "gmail", r: 74, deg: 128, node: }, + { key: "notion", r: 74, deg: 236, node: }, + { key: "drive", r: 112, deg: 58, node: }, + { key: "granola", r: 112, deg: 172, node: }, + { key: "mcp", r: 112, deg: 296, node: }, +] + +const SPIN = "motion-safe:animate-[spin_44s_linear_infinite]" +const SPIN_BACK = "motion-safe:animate-[spin_44s_linear_infinite_reverse]" + +function BrainPanel() { + return ( +
+
+ ) +} + +function TimelineRow({ + date, + title, + value, + current, +}: { + date: string + title: string + value?: string + current?: boolean +}) { + return ( +
  • +
    • + ) +} + +export function StepTrial({ onActive }: { onActive: () => void }) { + const [starting, setStarting] = useState(false) + + const start = async () => { + if (starting) return + setStarting(true) + analytics.brainTrialCheckoutStarted() + try { + const res = await fetch(`${BACKEND}/brain/trial/start`, { + method: "POST", + credentials: "include", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ successUrl: checkoutReturnUrl() }), + }) + const data = (await res.json()) as { + checkoutUrl?: string | null + status?: string + error?: string + } + if (res.status === 409 || data.error === "trial_unavailable") { + throw new Error( + "This workspace has already used its free trial. Upgrade from billing to continue.", + ) + } + if (!res.ok) throw new Error(data.error ?? "Couldn't start the trial.") + if (data.checkoutUrl) { + window.location.href = data.checkoutUrl + return + } + if (data.status === "already_active" || data.status === "attached") { + onActive() + return + } + throw new Error("Couldn't start the trial.") + } catch (error) { + console.error("Failed to start trial:", error) + toast.error( + error instanceof Error ? error.message : "Couldn't start the trial.", + ) + setStarting(false) + } + } + + return ( +
    +
    +
    +

    + Start your {TRIAL_DAYS}-day trial +

    +

    + We take a card now so Company Brain keeps working when the trial + ends. Cancel any time before then and you won't be charged. +

    +
    + +
      +
    + +
    + +

    + + Secured by Stripe · Cancel in one click +

    +
    +
    + + +
    + ) +} diff --git a/apps/web/components/settings/account.tsx b/apps/web/components/settings/account.tsx index 99e9bf478..41d746345 100644 --- a/apps/web/components/settings/account.tsx +++ b/apps/web/components/settings/account.tsx @@ -23,6 +23,7 @@ import { Dialog, DialogContent, DialogTitle } from "@ui/components/dialog" import * as DialogPrimitive from "@radix-ui/react-dialog" import { useMutation, useQuery } from "@tanstack/react-query" import { + Copy, LoaderIcon, ChevronDown, Users, @@ -458,10 +459,26 @@ export default function Account({ Organization + {org?.id ? ( + + ) : null} {isEditingOrgName ? (
    (null) + const [trialActive, setTrialActive] = useState(true) const [loading, setLoading] = useState(true) useEffect(() => { @@ -58,10 +59,16 @@ export function SlackConnectCard() { let active = true ;(async () => { try { - const res = await fetch(`${BACKEND}/brain/slack/status`, { - credentials: "include", - }) - if (active && res.ok) setStatus((await res.json()) as SlackStatus) + const [slackRes, trialRes] = await Promise.all([ + fetch(`${BACKEND}/brain/slack/status`, { credentials: "include" }), + fetch(`${BACKEND}/brain/trial/status`, { credentials: "include" }), + ]) + if (!active) return + if (slackRes.ok) setStatus((await slackRes.json()) as SlackStatus) + if (trialRes.ok) { + const trial = (await trialRes.json()) as { active?: boolean } + setTrialActive(Boolean(trial.active)) + } } finally { if (active) setLoading(false) } @@ -92,7 +99,7 @@ export function SlackConnectCard() { Connected - ) : ( + ) : trialActive ? ( Add to Slack + ) : ( + + Finish setting up + )}
    ) diff --git a/apps/web/components/trial-setup-banner.tsx b/apps/web/components/trial-setup-banner.tsx new file mode 100644 index 000000000..b96e5c387 --- /dev/null +++ b/apps/web/components/trial-setup-banner.tsx @@ -0,0 +1,41 @@ +"use client" + +import { ArrowRight, CreditCard } from "lucide-react" +import Link from "next/link" +import { useTrialStatus } from "@/hooks/use-trial-status" + +export function TrialSetupBanner() { + const { needsSetup, data } = useTrialStatus() + if (!needsSetup) return null + + const endedTrial = data?.reason === "trial_ended" + + return ( +
    +
    + + + +
    +

    + {endedTrial + ? "Your Company Brain trial has ended" + : "Finish setting up Company Brain"} +

    +

    + {endedTrial + ? "Move to Max or Scale to switch the brain back on." + : "Add a card to start your 14-day trial. $0 today."} +

    +
    +
    + + {endedTrial ? "Upgrade" : "Add card"} + + +
    + ) +} diff --git a/apps/web/hooks/use-trial-status.ts b/apps/web/hooks/use-trial-status.ts new file mode 100644 index 000000000..78941199b --- /dev/null +++ b/apps/web/hooks/use-trial-status.ts @@ -0,0 +1,34 @@ +import { useQuery } from "@tanstack/react-query" +import { useHasCompanyBrain } from "@/hooks/use-company-brain" + +const BACKEND = + process.env.NEXT_PUBLIC_BACKEND_URL ?? "https://api.supermemory.ai" + +export type TrialStatus = { + active: boolean + reason: string | null +} + +/** Distinguishes a named Company Brain org from one whose trial is actually live. */ +export function useTrialStatus() { + const isCompanyBrain = useHasCompanyBrain() + + const query = useQuery({ + queryKey: ["brain", "trial-status"], + queryFn: async (): Promise => { + const res = await fetch(`${BACKEND}/brain/trial/status`, { + credentials: "include", + }) + if (!res.ok) throw new Error("Failed to load trial status") + const data = (await res.json()) as { active?: boolean; reason?: string } + return { active: Boolean(data.active), reason: data.reason ?? null } + }, + enabled: isCompanyBrain, + staleTime: 30 * 1000, + }) + + return { + ...query, + needsSetup: isCompanyBrain && query.data ? !query.data.active : false, + } +} diff --git a/apps/web/lib/analytics.ts b/apps/web/lib/analytics.ts index 5ffda827c..da1264f14 100644 --- a/apps/web/lib/analytics.ts +++ b/apps/web/lib/analytics.ts @@ -271,4 +271,9 @@ export const analytics = { }) => safeCapture("company_brain_promo_clicked", props), companyBrainPromoDismissed: () => safeCapture("company_brain_promo_dismissed"), + + brainTrialCardViewed: () => safeCapture("brain_trial_card_viewed"), + brainTrialCheckoutStarted: () => safeCapture("brain_trial_checkout_started"), + brainTrialCheckoutAbandoned: () => + safeCapture("brain_trial_checkout_abandoned"), }