diff --git a/apps/start/src/components/organization/billing.tsx b/apps/start/src/components/organization/billing.tsx
index 47ebf29b5..d956a18b7 100644
--- a/apps/start/src/components/organization/billing.tsx
+++ b/apps/start/src/components/organization/billing.tsx
@@ -1,4 +1,5 @@
import type { IServiceOrganization } from '@openpanel/db';
+import { getSubscriptionStateMeta } from '@openpanel/payments/subscription-state-meta';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { differenceInDays } from 'date-fns';
import { useQueryState } from 'nuqs';
@@ -16,7 +17,6 @@ import useWS from '@/hooks/use-ws';
import { useTRPC } from '@/integrations/trpc/react';
import { pushModal, useOnPushModal } from '@/modals';
import { formatDate } from '@/utils/date';
-import { getSubscriptionStateMeta } from '@openpanel/payments/subscription-state-meta';
type Props = {
organization: IServiceOrganization;
@@ -53,6 +53,25 @@ export default function Billing({ organization }: Props) {
})
);
+ const resumeMutation = useMutation(
+ trpc.subscription.resumeSubscription.mutationOptions({
+ onSuccess() {
+ queryClient.invalidateQueries(trpc.organization.pathFilter());
+ queryClient.invalidateQueries(trpc.subscription.pathFilter());
+ toast.success('Subscription resumed', {
+ description: 'It might take a few seconds to update',
+ });
+ },
+ onError(error) {
+ toast.error(error.message);
+ },
+ })
+ );
+
+ const isPauseState =
+ organization.subscriptionState === 'pausing' ||
+ organization.subscriptionState === 'paused';
+
useWS(`/live/organization/${organization.id}`, () => {
queryClient.invalidateQueries(trpc.organization.pathFilter());
queryClient.invalidateQueries(trpc.subscription.pathFilter());
@@ -65,7 +84,11 @@ export default function Billing({ organization }: Props) {
const products = useMemo(() => {
return (productsQuery.data || [])
.filter((product) => product.recurringInterval === recurringInterval)
- .filter((product) => product.prices.some((p) => p.amountType !== 'free'));
+ .filter((product) =>
+ // `free` no longer exists in the SDK's amountType union, but retired
+ // free-plan products can still come back from Polar's API.
+ product.prices.some((p) => (p.amountType as string) !== 'free')
+ );
}, [productsQuery.data, recurringInterval]);
const currentProduct = currentProductQuery.data ?? null;
@@ -73,10 +96,62 @@ export default function Billing({ organization }: Props) {
p.amountType === 'fixed' ? [p] : []
)[0];
+ // What the customer actually pays while a recurring discount applies. A
+ // `once` discount only hits the next invoice, so the header keeps the list
+ // price and the discount line below explains it.
+ const listPrice = currentPrice ? currentPrice.priceAmount / 100 : null;
+ const discountedPrice = (() => {
+ const active = organization.subscriptionDiscount;
+ if (!active || listPrice === null || active.duration === 'once') {
+ return null;
+ }
+ if (active.type === 'percentage' && active.basisPoints) {
+ return listPrice * (1 - active.basisPoints / 10_000);
+ }
+ if (active.type === 'fixed' && active.amount) {
+ return Math.max(0, listPrice - active.amount / 100);
+ }
+ return null;
+ })();
+
+ // Synced from Polar — covers the cancel-flow save offer and any discount
+ // code the customer redeemed. Without this line the card shows the full
+ // list price and an applied discount is invisible outside Polar's portal.
+ const discount = organization.subscriptionDiscount;
+ const renderDiscount = () => {
+ if (!discount) {
+ return null;
+ }
+ const value =
+ discount.type === 'percentage' && discount.basisPoints
+ ? `−${discount.basisPoints / 100}%`
+ : discount.amount
+ ? `−${number.currency(discount.amount / 100)}`
+ : null;
+ if (!value) {
+ return null;
+ }
+ const duration =
+ discount.duration === 'repeating' && discount.durationInMonths
+ ? `for the next ${discount.durationInMonths} months`
+ : discount.duration === 'forever'
+ ? 'on every invoice'
+ : 'on your next invoice';
+ // Deliberately no discount name here: names are often the redeemable code
+ // itself, and the save offer's name would advertise what the cancel flow
+ // grants. The value + duration is all the customer needs.
+ return (
+
+ {value} {duration}
+
+ );
+ };
+
const renderStatus = () => {
const meta = getSubscriptionStateMeta(organization.subscriptionState, {
endsAt: organization.subscriptionEndsAt,
canceledAt: organization.subscriptionCanceledAt,
+ resumesAt: organization.subscriptionResumesAt,
});
if (!meta.statusLine) {
@@ -86,7 +161,9 @@ export default function Billing({ organization }: Props) {
return (
{meta.statusLine.text}
@@ -117,8 +194,15 @@ export default function Billing({ organization }: Props) {
{currentProduct.name}
+ {discountedPrice !== null && (
+
+ {number.currency(currentPrice.priceAmount / 100)}
+
+ )}
- {number.currency(currentPrice.priceAmount / 100)}
+ {number.currency(
+ discountedPrice ?? currentPrice.priceAmount / 100
+ )}
{' / '}
@@ -128,6 +212,7 @@ export default function Billing({ organization }: Props) {
{renderStatus()}
+ {renderDiscount()}
{number.format(organization.subscriptionPeriodEventsCount)} /{' '}
@@ -173,19 +258,37 @@ export default function Billing({ organization }: Props) {
Customer portal
-
+
+ {isPauseState && (
+
+ )}
+
+
diff --git a/apps/start/src/components/organization/cancel-subscription-flow.tsx b/apps/start/src/components/organization/cancel-subscription-flow.tsx
new file mode 100644
index 000000000..eb45b0d75
--- /dev/null
+++ b/apps/start/src/components/organization/cancel-subscription-flow.tsx
@@ -0,0 +1,342 @@
+import type { IServiceOrganization } from '@openpanel/db';
+import type { ICancellationReason } from '@openpanel/validation';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { CheckIcon } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { ButtonContainer } from '@/components/button-container';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { useTRPC } from '@/integrations/trpc/react';
+import { ModalHeader } from '@/modals/Modal/Container';
+import { cn } from '@/utils/cn';
+import { formatDate } from '@/utils/date';
+import { op } from '@/utils/op';
+
+// The cancel flow lives inside the SelectBillingPlan modal as internal views
+// (no stacked modals): reason -> pause offer -> discount offer -> cancel.
+
+interface Props {
+ organization: IServiceOrganization;
+ // Back to the plan picker view.
+ onBack: () => void;
+ // A flow outcome happened (paused, discounted, or canceled) — close the modal.
+ onComplete: () => void;
+}
+
+const REASONS: { value: ICancellationReason; label: string }[] = [
+ { value: 'unused', label: "I'm not using it right now" },
+ { value: 'too_expensive', label: "It's too expensive" },
+ { value: 'missing_features', label: "It's missing features I need" },
+ { value: 'switched_service', label: 'I switched to another service' },
+ { value: 'too_complex', label: "It's too complicated" },
+ { value: 'low_quality', label: "Quality didn't meet my expectations" },
+ { value: 'customer_service', label: 'Unhappy with customer service' },
+ { value: 'other', label: 'Other' },
+];
+
+const PAUSE_MONTHS = [1, 2, 3] as const;
+
+type Step = 'reason' | 'pause' | 'discount';
+
+export default function CancelSubscriptionFlow({
+ organization,
+ onBack,
+ onComplete,
+}: Props) {
+ const trpc = useTRPC();
+ const queryClient = useQueryClient();
+ const [step, setStep] = useState('reason');
+ const [reason, setReason] = useState(null);
+ const [comment, setComment] = useState('');
+ const [pauseMonths, setPauseMonths] = useState<1 | 2 | 3>(1);
+
+ const discountAvailable = !organization.subscriptionSaveDiscountAppliedAt;
+
+ // Funnel instrumentation. Every step render emits a step_viewed event, and
+ // the unmount cleanup emits cancel_flow_abandoned when the flow closes with
+ // no recorded outcome (X, esc, click-outside, navigation) — that's the
+ // silent drop-off a decisions-only funnel can't see. Refs so the cleanup
+ // reads the latest values.
+ const outcomeRef = useRef<
+ 'paused' | 'discounted' | 'canceled' | 'kept' | null
+ >(null);
+ const stepRef = useRef('reason');
+ stepRef.current = step;
+ const reasonRef = useRef(null);
+ reasonRef.current = reason;
+
+ useEffect(() => {
+ op.track('cancel_flow_step_viewed', {
+ organizationId: organization.id,
+ step,
+ reason: reasonRef.current,
+ });
+ }, [step, organization.id]);
+
+ useEffect(
+ () => () => {
+ if (!outcomeRef.current) {
+ op.track('cancel_flow_abandoned', {
+ organizationId: organization.id,
+ step: stepRef.current,
+ reason: reasonRef.current,
+ });
+ }
+ },
+ [organization.id]
+ );
+
+ const invalidate = () => {
+ queryClient.invalidateQueries(trpc.organization.pathFilter());
+ queryClient.invalidateQueries(trpc.subscription.pathFilter());
+ };
+
+ const pauseMutation = useMutation(
+ trpc.subscription.pauseSubscription.mutationOptions({
+ onSuccess(data) {
+ outcomeRef.current = 'paused';
+ invalidate();
+ toast.success('Subscription paused', {
+ description: `Billing stops at the end of your current period and resumes on ${formatDate(data.resumesAt)}. Your events keep flowing in.`,
+ });
+ onComplete();
+ },
+ onError(error) {
+ toast.error(error.message);
+ },
+ })
+ );
+
+ const discountMutation = useMutation(
+ trpc.subscription.applySaveDiscount.mutationOptions({
+ onSuccess() {
+ outcomeRef.current = 'discounted';
+ invalidate();
+ toast.success('Discount applied', {
+ description:
+ '30% off for the next 12 months, starting with your next billing cycle.',
+ });
+ onComplete();
+ },
+ onError(error) {
+ toast.error(error.message);
+ },
+ })
+ );
+
+ const cancelMutation = useMutation(
+ trpc.subscription.cancelSubscription.mutationOptions({
+ onSuccess() {
+ outcomeRef.current = 'canceled';
+ invalidate();
+ toast.success('Subscription canceled', {
+ description: organization.subscriptionEndsAt
+ ? `Your subscription stays active until ${formatDate(organization.subscriptionEndsAt)}.`
+ : 'It might take a few seconds to update',
+ });
+ onComplete();
+ },
+ onError(error) {
+ toast.error(error.message);
+ },
+ })
+ );
+
+ const isPending =
+ pauseMutation.isPending ||
+ discountMutation.isPending ||
+ cancelMutation.isPending;
+
+ const cancelNow = () => {
+ if (!reason) {
+ return;
+ }
+ op.track('subscription_canceled', {
+ organizationId: organization.id,
+ reason,
+ });
+ cancelMutation.mutate({
+ organizationId: organization.id,
+ reason,
+ comment: comment.trim() || undefined,
+ });
+ };
+
+ if (step === 'reason') {
+ return (
+ <>
+
+
+
+ {REASONS.map((item) => (
+
+ ))}
+
+