Merge pull request #52 from InstaNode-dev/feat/billing-page-redesign-2months-free-fresh

BillingPage: 4-tier grid + Annual-default + 2 months free + Most Popular badge + collapse promo (per pricing research)

Author: mastermanas805

src/components/PricingGrid.tsx

@@ -0,0 +1,375 @@
+// PricingGrid — research-backed 4-tier pricing surface.
+//
+// Renders Free / Hobby / Pro / Team side-by-side as a 4-column grid that
+// collapses to 2x2 on tablet (≤ 880px) and a single stack on mobile
+// (≤ 540px). Pro gets the "Most Popular" badge + raised treatment.
+// The user's current tier shows a "Your plan" pill in place of its CTA;
+// every other tier shows a tier-aware action.
+//
+// Why a separate component:
+//   - The BillingPage owns the auth/billing/usage state. This is a pure
+//     pricing-surface presenter: take a current tier + frequency state +
+//     a CTA handler, render the grid.
+//   - The marketing /pricing page can (and probably should) compose the
+//     same component so the in-product and public surfaces don't fork.
+//     PricingPage.tsx remains its own implementation today — wiring that
+//     up is a follow-up — but the props shape here is designed for both
+//     use cases (`embedded` flag toggles the in-product frequency-toggle
+//     row vs the marketing-page layout).
+//
+// Research references:
+//   - 4-tier with Team as anchor → +25–60% mid-tier conversion.
+//   - Annual default → +19–35% annual adoption.
+//   - "2 months free" framing → Athenic +342% annual signups, +62% LTV.
+//   - Most Popular badge → +158% middle-tier conversion in one cited study.
+
+import type { ReactNode } from 'react'
+import { TierCard, type Frequency, type TierKey } from './TierCard'
+
+// PLAN_DATA — canonical labels + features for each tier. Mirrors the
+// PLANS map in BillingPage (kept for the Usage panel / limits panel)
+// but trimmed to what the pricing grid actually renders. Numbers + copy
+// stay byte-identical so a hobby user sees the same description on the
+// marketing page, the in-product grid, and the limits table.
+export interface TierFeature {
+  text: string
+  comingSoon?: boolean
+}
+
+interface TierDefinition {
+  key: TierKey
+  label: string
+  // Per-frequency price + subtext + savings. Free has no yearly variant
+  // (the "$0 forever" headline doesn't need a frequency toggle), so we
+  // store a single block that's reused regardless of toggle state.
+  monthly: { price: string; sub: string }
+  yearly?: { price: string; sub: string; savings: string; yearlyTotal: string }
+  features: TierFeature[]
+  // The next-tier slug — used when this tier is the *current* one and
+  // we need a CTA target. Free → hobby, hobby → pro, pro → team, team
+  // → null. Drives the "Upgrade to Team" copy on the Pro card when the
+  // user is already on Pro.
+  upgradesTo?: TierKey
+  highlight?: boolean
+}
+
+// Numbers are USD and come from api/plans.yaml. "2 months free" framing
+// is enforced visually: yearly price = monthly * 10, savings = monthly * 2.
+//   Hobby   $9/mo → $90/yr  ($7.50/mo)  · save $18
+//   Pro    $49/mo → $490/yr ($40.83/mo) · save $98
+//   Team  $199/mo → $1990/yr ($165.83/mo) · save $398
+export const PRICING_GRID_TIERS: TierDefinition[] = [
+  {
+    key: 'free',
+    label: 'Free',
+    monthly: { price: '$0', sub: 'forever' },
+    // Free has no yearly variant — leave yearly undefined so the
+    // grid renders the monthly block in both modes (no fake savings).
+    features: [
+      { text: '10 MB Postgres · 24h TTL' },
+      { text: '5 MB Redis · 24h TTL' },
+      { text: '5 MB MongoDB · 24h TTL' },
+      { text: '100 stored webhooks' },
+      { text: 'agent-only access' },
+    ],
+    upgradesTo: 'hobby',
+  },
+  {
+    key: 'hobby',
+    label: 'Hobby',
+    monthly: { price: '$9', sub: '/mo' },
+    yearly: {
+      price: '$7.50',
+      sub: '/mo, billed yearly',
+      savings: '$90/yr · save $18',
+      yearlyTotal: '$90/yr',
+    },
+    features: [
+      { text: '1 GB Postgres · 8 conn' },
+      { text: '50 MB Redis' },
+      { text: '100 MB MongoDB · 5 conn' },
+      { text: '1 small deployment' },
+      { text: '20 vault entries · production env' },
+      { text: '1,000 stored webhooks' },
+    ],
+    upgradesTo: 'pro',
+  },
+  {
+    key: 'pro',
+    label: 'Pro',
+    monthly: { price: '$49', sub: '/mo' },
+    yearly: {
+      price: '$40.83',
+      sub: '/mo, billed yearly',
+      savings: '$490/yr · save $98',
+      yearlyTotal: '$490/yr',
+    },
+    features: [
+      { text: '5 GB Postgres · 20 conn' },
+      { text: '256 MB Redis' },
+      { text: '2 GB MongoDB · 20 conn' },
+      { text: '10 medium deployments' },
+      { text: '200 vault entries · multi-env' },
+      { text: 'custom domain · 10k stored webhooks' },
+    ],
+    upgradesTo: 'team',
+    highlight: true,
+  },
+  {
+    key: 'team',
+    label: 'Team',
+    monthly: { price: '$199', sub: '/mo' },
+    yearly: {
+      price: '$165.83',
+      sub: '/mo, billed yearly',
+      savings: '$1990/yr · save $398',
+      yearlyTotal: '$1990/yr',
+    },
+    features: [
+      { text: 'Everything in Pro, with larger limits', comingSoon: true },
+      { text: 'Multi-seat · RBAC + audit log', comingSoon: true },
+      { text: 'SSO / SAML · 99.9% SLA', comingSoon: true },
+      { text: 'Dedicated node pools', comingSoon: true },
+    ],
+  },
+]
+
+// Tier-aware CTA copy. Returns the label the user sees on each tier's
+// button, given the user's current tier and the active frequency.
+//   - Free + current: no CTA (returns null).
+//   - Free + not-current (e.g. anonymous viewing pricing page): "Start Free".
+//   - Hobby: "Start Hobby — $7.50/mo" (annual) or "$9/mo" (monthly).
+//   - Pro: "Get Pro — $40.83/mo" (annual) or "$49/mo" (monthly).
+//   - Team: "Contact sales" (always — the surface is comingSoon).
+//
+// Returns null when the tier is the current one (the card renders the
+// "Your plan" pill instead) or when there's no sensible CTA target.
+export function buildCtaLabel(
+  tier: TierKey,
+  currentTier: TierKey,
+  frequency: Frequency,
+): string | null {
+  if (tier === currentTier) return null
+  if (tier === 'free') return 'Stay on Free'
+  if (tier === 'team') return 'Contact sales'
+  const def = PRICING_GRID_TIERS.find((t) => t.key === tier)
+  if (!def) return null
+  const useYearly = frequency === 'yearly' && !!def.yearly
+  const price = useYearly ? def.yearly!.price : def.monthly.price
+  // "Get Pro — $7.50/mo" / "Start Hobby — $9/mo"
+  // "Get" reads as the action you take on an upgrade you actively want
+  // (Pro). "Start" reads gentler for the cheapest paid step-up (Hobby).
+  // Both end in the price so research's "verb + outcome + anchored price"
+  // pattern is preserved.
+  const verb = tier === 'pro' ? 'Get' : 'Start'
+  return `${verb} ${def.label} — ${price}/mo`
+}
+
+// Map a tier definition + frequency to the TierCard.pricing prop shape.
+function pricingFor(t: TierDefinition, frequency: Frequency) {
+  if (frequency === 'yearly' && t.yearly) {
+    return {
+      headline: t.yearly.price,
+      subtext: t.yearly.sub,
+      savings: t.yearly.savings,
+    }
+  }
+  return { headline: t.monthly.price, subtext: t.monthly.sub }
+}
+
+export interface PricingGridProps {
+  currentTier: TierKey
+  frequency: Frequency
+  onFrequencyChange: (f: Frequency) => void
+  // Called when a non-current tier's CTA fires. Pro's CTA is special-cased
+  // (composes UpgradeButton via `proCtaSlot`); every other CTA routes here.
+  onSelectTier: (target: TierKey) => void
+  // Per-tier disabled flag (e.g. while checkout is in flight).
+  ctaDisabled?: boolean
+  // Optional slot for the Pro tier's CTA. Lets the parent inject the
+  // P1 A/B-variant UpgradeButton without forking this component to
+  // know about experiments. When omitted, Pro falls back to the same
+  // <button> as the other tiers.
+  proCtaSlot?: ReactNode
+  // Heading + intro renderer hook — used so embedded BillingPage and
+  // standalone PricingPage can each provide their own copy. Defaults
+  // to a compact in-product heading.
+  heading?: ReactNode
+  // Show / hide the frequency toggle. Defaults to true — set false on
+  // surfaces that drive the toggle externally.
+  showFrequencyToggle?: boolean
+  // Optional testid override on the wrapper.
+  testId?: string
+}
+
+export function PricingGrid({
+  currentTier,
+  frequency,
+  onFrequencyChange,
+  onSelectTier,
+  ctaDisabled = false,
+  proCtaSlot,
+  heading,
+  showFrequencyToggle = true,
+  testId = 'pricing-grid',
+}: PricingGridProps) {
+  return (
+    <section data-testid={testId} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+      <PricingGridStyles />
+      {heading}
+      {showFrequencyToggle && (
+        <FrequencyToggle frequency={frequency} onChange={onFrequencyChange} />
+      )}
+      <div className="pricing-grid-cards" data-testid="pricing-grid-cards">
+        {PRICING_GRID_TIERS.map((t) => {
+          const isCurrent = t.key === currentTier
+          const ctaLabel = isCurrent ? null : buildCtaLabel(t.key, currentTier, frequency)
+          return (
+            <TierCard
+              key={t.key}
+              tier={t.key}
+              label={t.label}
+              pricing={pricingFor(t, frequency)}
+              features={t.features}
+              highlight={!!t.highlight}
+              isCurrent={isCurrent}
+              ctaLabel={ctaLabel ?? undefined}
+              onCta={() => onSelectTier(t.key)}
+              ctaDisabled={ctaDisabled}
+              ctaSlot={t.key === 'pro' && !isCurrent ? proCtaSlot : undefined}
+              ctaTestId={`tier-cta-${t.key}`}
+            />
+          )
+        })}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * FrequencyToggle — segmented [Monthly] [Annual — 2 months free] control.
+ * Annual is shown as the right-hand option and carries the "2 months free"
+ * inline copy per the Athenic finding. Visually identical to the marketing
+ * page's toggle so in-product and public surfaces feel continuous.
+ */
+function FrequencyToggle({
+  frequency,
+  onChange,
+}: {
+  frequency: Frequency
+  onChange: (f: Frequency) => void
+}) {
+  return (
+    <div
+      data-testid="billing-frequency-toggle"
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+        margin: '4px 0 2px',
+        flexWrap: 'wrap',
+      }}
+    >
+      <span
+        style={{
+          fontFamily: 'var(--font-mono)',
+          fontSize: 10.5,
+          letterSpacing: '0.06em',
+          textTransform: 'uppercase',
+          color: 'var(--text-faint)',
+        }}
+      >
+        billing cycle
+      </span>
+      <div
+        role="radiogroup"
+        aria-label="Billing cycle"
+        style={{
+          display: 'inline-flex',
+          border: '1px solid var(--border-hi, var(--border))',
+          borderRadius: 999,
+          padding: 2,
+          background: 'var(--elevated, var(--surface))',
+        }}
+      >
+        <button
+          type="button"
+          role="radio"
+          aria-checked={frequency === 'monthly'}
+          data-testid="frequency-monthly"
+          onClick={() => onChange('monthly')}
+          style={{
+            borderRadius: 999,
+            padding: '5px 14px',
+            fontSize: 12,
+            background: frequency === 'monthly' ? 'var(--accent)' : 'transparent',
+            color: frequency === 'monthly' ? 'var(--ink)' : 'var(--text)',
+            border: 'none',
+            cursor: 'pointer',
+          }}
+        >
+          Monthly
+        </button>
+        <button
+          type="button"
+          role="radio"
+          aria-checked={frequency === 'yearly'}
+          data-testid="frequency-yearly"
+          onClick={() => onChange('yearly')}
+          style={{
+            borderRadius: 999,
+            padding: '5px 14px',
+            fontSize: 12,
+            background: frequency === 'yearly' ? 'var(--accent)' : 'transparent',
+            color: frequency === 'yearly' ? 'var(--ink)' : 'var(--text)',
+            border: 'none',
+            cursor: 'pointer',
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 6,
+          }}
+        >
+          <span>Annual</span>
+          <span
+            data-testid="frequency-2-months-free"
+            style={{
+              fontFamily: 'var(--font-mono)',
+              fontSize: 10.5,
+              letterSpacing: '0.04em',
+              color: frequency === 'yearly' ? 'var(--ink)' : 'var(--accent)',
+              opacity: frequency === 'yearly' ? 0.9 : 1,
+            }}
+          >
+            — 2 months free
+          </span>
+        </button>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Grid layout styles — kept inline as a <style> tag so the BillingPage and
+ * a hypothetical marketing reuse don't both need to pull a global stylesheet.
+ * Breakpoints:
+ *   - default: 4 columns
+ *   - ≤ 1100px: 2x2
+ *   - ≤ 640px: single stack
+ */
+function PricingGridStyles() {
+  return (
+    <style>{`
+      .pricing-grid-cards {
+        display: grid;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        gap: 12px;
+      }
+      @media (max-width: 1100px) {
+        .pricing-grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+      }
+      @media (max-width: 640px) {
+        .pricing-grid-cards { grid-template-columns: 1fr; }
+      }
+    `}</style>
+  )
+}