From 27b88426e2cd3ef18902418e98f1233b88b78556 Mon Sep 17 00:00:00 2001 From: Jakob Wennberg <149234542+jakobwennberg@users.noreply.github.com> Date: Tue, 7 Jul 2026 10:01:44 +0200 Subject: [PATCH] fix(entitlements): show paid features as gated upsells instead of dead ends (#913) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(entitlements): show paid features as gated upsells instead of dead ends Post-cutover, non-payers still saw fully interactive UI for paid features (bank picker, agent-build hero, SKV VAT submission) that silently failed or 403'd on the server gate. Every surface now stays visible as a conversion surface but is explicitly gated: - new shared components/billing/UpgradeNote (lock icon + billing link) - agent-build hero (dashboard + new-user checklist): routes to /settings/billing with upgrade copy when the ai capability is missing - bank connect: BankingSettingsPanel and the import-page PSD2 wizard swap the bank list for an upgrade note; the import selection card swaps the "Rekommenderat" chip for "Kräver abonnemang" - VAT report SkatteverketPanel: gated state renders before the connection check, so trial-connected companies see the upsell instead of action buttons that would 403; manual-filing framing kept - SkatteverketConnectPanel: skahmst consent note hidden while gated (irrelevant until the consent page is reachable) Co-Authored-By: Claude Opus 4.7 * test(ne-bilaga): fix time-of-day flake in SRU field-code assertion The bare substrings '7310'/'7350' also match the #SKAPAD HHMMSS timestamp when CI runs at 07:31/07:35, so the assertion now requires the full '#UPPGIFT ' prefix. Co-Authored-By: Claude Opus 4.7 --------- Co-authored-by: Claude Opus 4.7 --- app/(dashboard)/import/page.tsx | 38 ++++++++++++++----- components/billing/UpgradeNote.tsx | 28 ++++++++++++++ components/dashboard/DashboardContent.tsx | 13 +++++-- components/onboarding/NewUserChecklist.tsx | 13 +++++-- components/reports/SkatteverketPanel.tsx | 31 +++++++++++++++ .../settings/SkatteverketConnectPanel.tsx | 22 +++++------ .../components/BankingSettingsPanel.tsx | 18 ++++++++- .../ne-bilaga/__tests__/sru-generator.test.ts | 7 +++- messages/en.json | 1 + messages/sv.json | 1 + 10 files changed, 141 insertions(+), 31 deletions(-) create mode 100644 components/billing/UpgradeNote.tsx diff --git a/app/(dashboard)/import/page.tsx b/app/(dashboard)/import/page.tsx index d1097e71..0acf6734 100644 --- a/app/(dashboard)/import/page.tsx +++ b/app/(dashboard)/import/page.tsx @@ -12,7 +12,9 @@ import { getErrorMessage } from '@/lib/errors/get-error-message' import { ArrowLeftRight, ArrowRightLeft, FileText, ArrowLeft, Landmark, Loader2, Info, ChevronRight, FileSpreadsheet, Download, AlertTriangle } from 'lucide-react' import { cn, formatDate } from '@/lib/utils' import { createClient } from '@/lib/supabase/client' -import { useCompany } from '@/contexts/CompanyContext' +import { useCompany, useCapability } from '@/contexts/CompanyContext' +import { CAPABILITY } from '@/lib/entitlements/keys' +import { UpgradeNote } from '@/components/billing/UpgradeNote' import { BankSelector, type Bank } from '@/extensions/general/enable-banking/components/BankSelector' import { BankConnectionStatus } from '@/extensions/general/enable-banking/components/BankConnectionStatus' import { DestructiveConfirmDialog, useDestructiveConfirm } from '@/components/ui/destructive-confirm-dialog' @@ -1910,6 +1912,7 @@ function PSD2ConnectWizard() { const supabase = createClient() const { dialogProps, confirm } = useDestructiveConfirm() const { company } = useCompany() + const hasBankSync = useCapability(CAPABILITY.bank_sync) const [bankConnections, setBankConnections] = useState([]) const [syncingConnectionId, setSyncingConnectionId] = useState(null) @@ -2069,7 +2072,8 @@ function PSD2ConnectWizard() { )} - {/* Connect new bank */} + {/* Connect new bank. Non-payers see the card but the bank list is + replaced by an upgrade note: the server gate would 403 the connect. */} Anslut din bank @@ -2078,11 +2082,18 @@ function PSD2ConnectWizard() { - + {!hasBankSync ? ( + + Automatisk banksynk kräver ett abonnemang. Du kan fortfarande importera + transaktioner manuellt via bankfiler nedan. + + ) : ( + + )} @@ -2106,6 +2117,7 @@ export default function ImportPage() { const t = useTranslations('import') const router = useRouter() const hasCloudBackup = ENABLED_EXTENSION_IDS.has('cloud-backup') + const hasBankSync = useCapability(CAPABILITY.bank_sync) // Fetch authenticated user ID and sandbox status useEffect(() => { @@ -2225,9 +2237,15 @@ export default function ImportPage() {

{t('psd2_title')}

- - {t('psd2_recommended')} - + {hasBankSync ? ( + + {t('psd2_recommended')} + + ) : ( + + {t('psd2_requires_subscription')} + + )}

{t('psd2_description')} diff --git a/components/billing/UpgradeNote.tsx b/components/billing/UpgradeNote.tsx new file mode 100644 index 00000000..3357846d --- /dev/null +++ b/components/billing/UpgradeNote.tsx @@ -0,0 +1,28 @@ +import Link from 'next/link' +import { Lock } from 'lucide-react' +import { cn } from '@/lib/utils' + +/** + * Inline paywall note for a feature that is visible but not entitled. + * The feature stays on screen (conversion surface: never hide, disable + * with an upsell), this note explains why it's disabled and links to + * /settings/billing. Copy mirrors CAPABILITY_BLOCKED_MESSAGE_SV. + */ +export function UpgradeNote({ children, className }: { children?: React.ReactNode; className?: string }) { + return ( +

+ + + {children ?? 'Den här funktionen kräver ett abonnemang.'}{' '} + + Uppgradera + + +
+ ) +} diff --git a/components/dashboard/DashboardContent.tsx b/components/dashboard/DashboardContent.tsx index 4fe7d37f..1e099b21 100644 --- a/components/dashboard/DashboardContent.tsx +++ b/components/dashboard/DashboardContent.tsx @@ -8,6 +8,8 @@ import { Badge } from '@/components/ui/badge' import { cn, formatCurrency } from '@/lib/utils' import { UpcomingDeadlinesWidget } from '@/components/deadlines/UpcomingDeadlinesWidget' import { TaxTodoWidget } from '@/components/deadlines/TaxTodoWidget' +import { useCapability } from '@/contexts/CompanyContext' +import { CAPABILITY } from '@/lib/entitlements/keys' import NewUserChecklist from '@/components/onboarding/NewUserChecklist' import AttGoraSection from '@/components/dashboard/AttGoraSection' import { @@ -51,6 +53,7 @@ interface DashboardContentProps { export default function DashboardContent({ companyId, summary, worklist, suggestedMatches, onboardingProgress, agentBuilt = true }: DashboardContentProps) { const t = useTranslations('dashboard') + const hasAi = useCapability(CAPABILITY.ai) // The setup gate exists to nudge brand-new users into a data-import step // before they hit the dashboard. Once the assistant is built we treat the @@ -121,7 +124,9 @@ export default function DashboardContent({ companyId, summary, worklist, suggest has a single CTA surface instead of two that point at the same work. */} {!agentBuilt && (
- + {/* Non-payers keep seeing the hero (conversion surface) but it + routes to billing instead of a build flow that would 403. */} +
@@ -133,11 +138,13 @@ export default function DashboardContent({ companyId, summary, worklist, suggest Beta

- Några frågor om din verksamhet kalibrerar en assistent som föreslår bokföring åt dig. + {hasAi + ? 'Några frågor om din verksamhet kalibrerar en assistent som föreslår bokföring åt dig.' + : 'Ingår i abonnemanget: en assistent som föreslår bokföring åt dig.'}

- Kom igång + {hasAi ? 'Kom igång' : 'Uppgradera'}
diff --git a/components/onboarding/NewUserChecklist.tsx b/components/onboarding/NewUserChecklist.tsx index e0fb4dd9..8bfe2942 100644 --- a/components/onboarding/NewUserChecklist.tsx +++ b/components/onboarding/NewUserChecklist.tsx @@ -17,6 +17,8 @@ import { Button } from '@/components/ui/button' import { cn } from '@/lib/utils' import { ENABLED_EXTENSION_IDS } from '@/lib/extensions/_generated/enabled-extensions' import { getBranding } from '@/lib/branding/service' +import { useCapability } from '@/contexts/CompanyContext' +import { CAPABILITY } from '@/lib/entitlements/keys' const branding = getBranding() @@ -46,6 +48,7 @@ export default function NewUserChecklist({ const hasMigration = ENABLED_EXTENSION_IDS.has('arcim-migration') const hasBanking = ENABLED_EXTENSION_IDS.has('enable-banking') const hasSkatteverket = ENABLED_EXTENSION_IDS.has('skatteverket') + const hasAi = useCapability(CAPABILITY.ai) return (
@@ -304,7 +307,7 @@ export default function NewUserChecklist({
) : (
@@ -316,10 +319,14 @@ export default function NewUserChecklist({

Bygg din bokföringsassistent

- Beta + + {hasAi ? 'Beta' : 'Abonnemang'} +

- Några frågor om din verksamhet kalibrerar tonalitet, signatur och vad assistenten kan. Ju mer du delar, desto bättre förstår den dig. + {hasAi + ? 'Några frågor om din verksamhet kalibrerar tonalitet, signatur och vad assistenten kan. Ju mer du delar, desto bättre förstår den dig.' + : 'Ingår i abonnemanget: en assistent som föreslår bokföring åt dig. Uppgradera för att komma igång.'}

diff --git a/components/reports/SkatteverketPanel.tsx b/components/reports/SkatteverketPanel.tsx index 91c94d04..0c2359ac 100644 --- a/components/reports/SkatteverketPanel.tsx +++ b/components/reports/SkatteverketPanel.tsx @@ -29,6 +29,9 @@ import { } from '@/lib/reports/vat-declaration-checks' import type { RcBasisGap } from '@/lib/reports/rc-basis-gaps' import { formatDate } from '@/lib/utils' +import { useCapability } from '@/contexts/CompanyContext' +import { CAPABILITY } from '@/lib/entitlements/keys' +import { UpgradeNote } from '@/components/billing/UpgradeNote' interface SkatteverketStatus { connected: boolean @@ -88,6 +91,7 @@ export function SkatteverketPanel(props: SkatteverketPanelProps) { } function SkatteverketPanelInner({ periodType, year, period, hasData, rutor }: SkatteverketPanelProps) { + const hasSkvCapability = useCapability(CAPABILITY.skatteverket) const [status, setStatus] = useState(null) const [loading, setLoading] = useState(true) const [actionLoading, setActionLoading] = useState(null) @@ -517,6 +521,33 @@ function SkatteverketPanelInner({ periodType, year, period, hasData, rutor }: Sk ) } + // Paywall: direct API submission is the paid convenience; manual filing at + // skatteverket.se stays free and is described in the card above this panel. + // Rendered BEFORE the connected check so a company that connected during + // trial sees the upsell instead of action buttons that would 403. + if (!hasSkvCapability) { + return ( + + + + + Skicka direkt till Skatteverket (valfritt) + + + +

+ Deklarationen är redan klar att lämnas in manuellt hos Skatteverket + (se ovan). Med ett abonnemang kan du ansluta med BankID och skicka + den direkt härifrån, samt validera, spara utkast och signera. +

+ + Direktinlämning till Skatteverket kräver ett abonnemang. + + + + ) + } + // Not connected. The momsdeklaration is already complete and can be filed // manually at skatteverket.se with no connection (see the manual-filing card // rendered above this panel). Connecting is an optional convenience for diff --git a/components/settings/SkatteverketConnectPanel.tsx b/components/settings/SkatteverketConnectPanel.tsx index 2bd6c5d1..4c680b45 100644 --- a/components/settings/SkatteverketConnectPanel.tsx +++ b/components/settings/SkatteverketConnectPanel.tsx @@ -8,6 +8,7 @@ import { Badge } from '@/components/ui/badge' import { useToast } from '@/components/ui/use-toast' import { useCapability } from '@/contexts/CompanyContext' import { CAPABILITY } from '@/lib/entitlements/keys' +import { UpgradeNote } from '@/components/billing/UpgradeNote' import { CheckCircle2, ExternalLink, ShieldOff, FlaskConical, ShieldAlert } from 'lucide-react' type Environment = 'test' | 'prod' @@ -118,19 +119,18 @@ export function SkatteverketConnectPanel() {

{t('connect_intro')}

-
- {t.rich('skahmst_note', { - code: (chunks) => {chunks}, - })} -
- {!hasSkatteverket && ( -
- Anslutning till Skatteverket kräver ett abonnemang.{' '} - - Uppgradera - + {/* The skahmst consent-page note only matters when the user can + actually reach that page: hidden while the feature is gated. */} + {hasSkatteverket && ( +
+ {t.rich('skahmst_note', { + code: (chunks) => {chunks}, + })}
)} + {!hasSkatteverket && ( + Anslutning till Skatteverket kräver ett abonnemang. + )}