[dev] [Marfuen] mariano/sale-63-trust-center-adoption

apps/api/src/trust-portal/is-trust-portal-configured.spec.ts

@@ -0,0 +1,45 @@
+import { isTrustPortalConfigured } from './is-trust-portal-configured';
+
+const DEFAULTS = {
+  domain: null,
+  contactEmail: null,
+  overviewContent: null,
+  favicon: null,
+  faqs: null,
+  frameworkFlags: [false, false, false],
+  documentCount: 0,
+  resourceCount: 0,
+  customLinkCount: 0,
+};
+
+describe('isTrustPortalConfigured', () => {
+  it('returns false for a fresh portal on all defaults', () => {
+    expect(isTrustPortalConfigured(DEFAULTS)).toBe(false);
+  });
+
+  it('returns false when faqs is an empty array', () => {
+    expect(isTrustPortalConfigured({ ...DEFAULTS, faqs: [] })).toBe(false);
+  });
+
+  it.each([
+    ['domain', { domain: 'trust.acme.com' }],
+    ['contactEmail', { contactEmail: 'security@acme.com' }],
+    ['overviewContent', { overviewContent: 'We are secure.' }],
+    ['favicon', { favicon: 'org/favicon.png' }],
+    ['faqs', { faqs: [{ question: 'q', answer: 'a', order: 0 }] }],
+    ['a framework flag', { frameworkFlags: [false, true, false] }],
+    ['a document', { documentCount: 1 }],
+    ['a compliance resource (certificate)', { resourceCount: 1 }],
+    ['a custom link', { customLinkCount: 1 }],
+  ])('returns true when %s is set', (_label, override) => {
+    expect(isTrustPortalConfigured({ ...DEFAULTS, ...override })).toBe(true);
+  });
+
+  it('ignores non-array faqs values', () => {
+    expect(isTrustPortalConfigured({ ...DEFAULTS, faqs: 'not-an-array' })).toBe(false);
+  });
+
+  it('returns false when frameworkFlags is an empty array', () => {
+    expect(isTrustPortalConfigured({ ...DEFAULTS, frameworkFlags: [] })).toBe(false);
+  });
+});

apps/api/src/trust-portal/is-trust-portal-configured.ts

@@ -0,0 +1,42 @@
+export interface TrustPortalConfiguredInput {
+  domain?: string | null;
+  contactEmail?: string | null;
+  overviewContent?: string | null;
+  favicon?: string | null;
+  /** Organization.trustPortalFaqs — Json?, expected to be an array when set. */
+  faqs?: unknown;
+  /**
+   * Raw Trust framework "enabled" boolean columns (soc2, soc2type1, soc2type2,
+   * soc3, iso27001, iso42001, nen7510, gdpr, hipaa, pci_dss, iso9001, pipeda,
+   * ccpa). Order is irrelevant — any `true` counts as configured. The caller is
+   * responsible for passing all of them; a dropped column silently weakens the
+   * signal. Distinct from `resourceCount` (uploaded certificate files).
+   */
+  frameworkFlags: boolean[];
+  documentCount: number;
+  resourceCount: number;
+  customLinkCount: number;
+}
+
+/**
+ * A Trust Portal is "configured" once the org has done anything beyond the
+ * shared-domain defaults. Used to decide whether to nudge the customer to set
+ * it up. Computed from RAW values (the settings endpoint substitutes a Context
+ * Hub default for overviewContent — do not pass the substituted value here).
+ */
+export function isTrustPortalConfigured(input: TrustPortalConfiguredInput): boolean {
+  const hasFaqs = Array.isArray(input.faqs) && input.faqs.length > 0;
+  const hasFramework = input.frameworkFlags.some(Boolean);
+
+  return Boolean(
+    input.domain ||
+      input.contactEmail ||
+      input.overviewContent ||
+      input.favicon ||
+      hasFaqs ||
+      hasFramework ||
+      input.documentCount > 0 ||
+      input.resourceCount > 0 ||
+      input.customLinkCount > 0,
+  );
+}

apps/api/src/trust-portal/trust-portal.service.ts

@@ -36,6 +36,7 @@ import {
   TrustDocumentUrlResponseDto,
   UploadTrustDocumentDto,
 } from './dto/trust-document.dto';
+import { isTrustPortalConfigured } from './is-trust-portal-configured';
 
 interface VercelDomainVerification {
   type: string;
@@ -1533,8 +1534,42 @@ export class TrustPortalService {
       defaultOverviewContent = missionContext?.answer ?? null;
     }
 
+    const [trustDocumentCount, trustResourceCount, trustCustomLinkCount] =
+      await Promise.all([
+        db.trustDocument.count({ where: { organizationId } }),
+        db.trustResource.count({ where: { organizationId } }),
+        db.trustCustomLink.count({ where: { organizationId } }),
+      ]);
+
+    const isConfigured = isTrustPortalConfigured({
+      domain: trust.domain,
+      contactEmail: trust.contactEmail,
+      overviewContent: trust.overviewContent, // raw column, not the Context fallback
+      favicon: trust.favicon,
+      faqs: org.trustPortalFaqs,
+      frameworkFlags: [
+        trust.soc2, // legacy column; folded into soc2type2 in the response but still a "configured" signal
+        trust.soc2type1,
+        trust.soc2type2,
+        trust.soc3,
+        trust.iso27001,
+        trust.iso42001,
+        trust.nen7510,
+        trust.gdpr,
+        trust.hipaa,
+        trust.pci_dss,
+        trust.iso9001,
+        trust.pipeda,
+        trust.ccpa,
+      ],
+      documentCount: trustDocumentCount,
+      resourceCount: trustResourceCount,
+      customLinkCount: trustCustomLinkCount,
+    });
+
     return {
       enabled: trust.status === 'published',
+      isConfigured,
       friendlyUrl: trust.friendlyUrl,
       domain: trust.domain ?? '',
       domainVerified: trust.domainVerified ?? false,

apps/app/src/app/(app)/[orgId]/overview/components/FrameworkUpdatesBanner.tsx → apps/app/src/app/(app)/[orgId]/overview/components/FrameworkUpdatesCard.tsx

@@ -15,7 +15,12 @@ import { ChevronUp, Upgrade } from '@trycompai/design-system/icons';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 
-export function FrameworkUpdatesBanner() {
+/**
+ * The framework-updates card, with NO outer layout wrapper — the host (e.g. the
+ * Overview nudge stack) owns width/spacing. Returns null when there are no
+ * updates, so it's safe to mount unconditionally.
+ */
+export function FrameworkUpdatesCard() {
   const { data: statuses } = useFrameworkUpdateStatuses();
   const { hasPermission } = usePermissions();
   const router = useRouter();
@@ -29,7 +34,6 @@ export function FrameworkUpdatesBanner() {
   const count = statuses.length;
 
   return (
-    <div className="mx-auto w-full max-w-[1200px] pb-8">
     <Collapsible open={open} onOpenChange={setOpen}>
       <div className="rounded-lg border bg-card">
         <div className="flex items-center justify-between rounded-t-lg bg-secondary px-4 py-3">
@@ -88,6 +92,5 @@ export function FrameworkUpdatesBanner() {
         </CollapsibleContent>
       </div>
     </Collapsible>
-    </div>
   );
 }

apps/app/src/app/(app)/[orgId]/overview/components/Overview.tsx

@@ -4,7 +4,6 @@ import { FrameworkEditorFramework, Policy, Task } from '@db';
 import type { FrameworkInstanceWithControls } from '@/lib/types/framework';
 import { ComplianceOverview } from './ComplianceOverview';
 import { FrameworksOverview } from './FrameworksOverview';
-import { OffboardingBanner } from './OffboardingBanner';
 import { ToDoOverview } from './ToDoOverview';
 import { FrameworkInstanceWithComplianceScore } from './types';
 
@@ -71,7 +70,6 @@ export const Overview = ({
 
   return (
     <div className="flex flex-col gap-6">
-      <OffboardingBanner />
       <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
         <ComplianceOverview
           organizationId={organizationId}

apps/app/src/app/(app)/[orgId]/overview/nudges/FrameworkUpdatesNudge.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useFrameworkUpdateStatuses } from '@/hooks/use-framework-update-statuses';
+import { FrameworkUpdatesCard } from '../components/FrameworkUpdatesCard';
+import type { NudgeState } from './types';
+
+export function useFrameworkUpdatesNudge(): NudgeState {
+  const { data: statuses, error } = useFrameworkUpdateStatuses();
+
+  return {
+    id: 'framework-updates',
+    // Last: after offboarding (10) and trust-portal-setup (20) — least urgent.
+    priority: 30,
+    // The card has no dismiss control; keep false so the id stays out of the
+    // host's persistableIds (no spurious localStorage read for an undismissable nudge).
+    persistDismissal: false,
+    // Only "not ready" while the fetch is genuinely in flight (mirrors offboarding).
+    ready: statuses !== undefined || error !== undefined,
+    // Eligible only when the fetch succeeded and there's at least one update.
+    eligible: !error && Array.isArray(statuses) && statuses.length > 0,
+    // The card keeps its own look and has no dismiss affordance, so ignore onDismiss.
+    render: () => <FrameworkUpdatesCard />,
+  };
+}

apps/app/src/app/(app)/[orgId]/overview/nudges/NudgeCenter.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { ChevronDown, ChevronUp } from '@trycompai/design-system/icons';
+import type { ReactNode } from 'react';
+
+const MAX_PEEK_LAYERS = 2;
+
+/**
+ * Groups multiple notification nudges. Collapsed, it renders the top nudge on a
+ * "pile" — a sliver of the cards behind it peeks out — with a toggle chip
+ * overlaid on the bottom edge to fan the whole stack open. Expanded, every
+ * nudge is shown in a vertical list.
+ */
+export function NudgeCenter({
+  count,
+  expanded,
+  onToggle,
+  children,
+}: {
+  count: number;
+  expanded: boolean;
+  onToggle: () => void;
+  children: ReactNode;
+}) {
+  const peekLayers = Math.min(count - 1, MAX_PEEK_LAYERS);
+
+  const toggle = (positionClass: string) => (
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-expanded={expanded}
+      className={`flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1 text-xs font-medium text-foreground shadow-lg transition-colors hover:bg-accent ${positionClass}`}
+    >
+      {expanded ? (
+        <>
+          <ChevronUp size={14} />
+          Show less
+        </>
+      ) : (
+        <>
+          <ChevronDown size={14} />
+          {count} notices
+        </>
+      )}
+    </button>
+  );
+
+  if (expanded) {
+    return (
+      <div className="flex flex-col items-center gap-2">
+        <div className="flex w-full flex-col gap-2">{children}</div>
+        {toggle('')}
+      </div>
+    );
+  }
+
+  // Collapsed: top nudge on a pile, with the toggle chip overlaid on the
+  // bottom-center edge. Padding reserves room for the peeks + the chip overhang.
+  return (
+    <div style={{ paddingBottom: Math.max(peekLayers * 12, 16) + 12 }}>
+      {/* `isolate` keeps the stack's own stacking context so the peek layers
+          sit just behind the top card (not behind an ancestor background). */}
+      <div className="relative isolate">
+        {Array.from({ length: peekLayers }).map((_, i) => {
+          const depth = i + 1;
+          return (
+            <div
+              key={depth}
+              aria-hidden
+              className="pointer-events-none absolute top-0 h-full rounded-lg border shadow-md"
+              style={{
+                // Each card behind is a little narrower than the one above it.
+                left: depth * 8,
+                right: depth * 8,
+                transform: `translateY(${depth * 12}px)`,
+                zIndex: MAX_PEEK_LAYERS - depth + 1,
+                // Opaque amber (warning mixed into the solid card color) so the
+                // stacked peeks read as solid cards, not translucent slivers.
+                backgroundColor: 'color-mix(in oklab, var(--warning) 25%, var(--card))',
+                borderColor: 'color-mix(in oklab, var(--warning) 45%, var(--card))',
+              }}
+            />
+          );
+        })}
+        <div className="relative z-10 rounded-lg shadow-lg">{children}</div>
+        {toggle(
+          'absolute bottom-0 left-1/2 z-20 -translate-x-1/2 translate-y-[65%]',
+        )}
+      </div>
+    </div>
+  );
+}