feat: add direct marketing to billing subscription flow

.gitignore

@@ -53,3 +53,7 @@ yarn-error.log*
 
 # logs
 logs.json
+
+# claude
+.claude
+CLAUDE.md

apps/remix/app/components/general/billing-plans.tsx

@@ -44,12 +44,22 @@ const MotionCard = motion(Card);
 
 export type BillingPlansProps = {
   plans: InternalClaimPlans;
+  selectedPlan?: string | null;
+  selectedCycle?: 'monthly' | 'yearly' | null;
+  isFromPricingPage?: boolean;
 };
 
-export const BillingPlans = ({ plans }: BillingPlansProps) => {
+export const BillingPlans = ({
+  plans,
+  selectedPlan,
+  selectedCycle,
+  isFromPricingPage,
+}: BillingPlansProps) => {
   const isMounted = useIsMounted();
 
-  const [interval, setInterval] = useState<'monthlyPrice' | 'yearlyPrice'>('yearlyPrice');
+  const [interval, setInterval] = useState<'monthlyPrice' | 'yearlyPrice'>(
+    selectedCycle === 'monthly' ? 'monthlyPrice' : 'yearlyPrice',
+  );
 
   const pricesToDisplay = useMemo(() => {
     const prices = [];
@@ -85,12 +95,17 @@ export const BillingPlans = ({ plans }: BillingPlansProps) => {
 
       <div className="mt-8 grid gap-8 lg:grid-cols-2 2xl:grid-cols-3">
         <AnimatePresence mode="wait">
-          {pricesToDisplay.map((price) => (
+          {pricesToDisplay.map((price) => {
+            const planId = price.claim.toLowerCase().replace('claim_', '');
+            const isSelected = selectedPlan && planId === selectedPlan;
+
+            return (
               <MotionCard
                 key={price.id}
                 initial={{ opacity: isMounted ? 0 : 1, y: isMounted ? 20 : 0 }}
                 animate={{ opacity: 1, y: 0, transition: { duration: 0.3 } }}
                 exit={{ opacity: 0, transition: { duration: 0.3 } }}
+                className={isSelected ? 'ring-primary ring-2' : ''}
               >
                 <CardContent className="flex h-full flex-col p-6">
                   <CardTitle>{price.product.name}</CardTitle>
@@ -131,10 +146,14 @@ export const BillingPlans = ({ plans }: BillingPlansProps) => {
                     planName={price.product.name}
                     memberCount={price.memberCount}
                     claim={price.claim}
+                    isSelected={isSelected || false}
+                    isFromPricingPage={isFromPricingPage}
+                    interval={interval}
                   />
                 </CardContent>
               </MotionCard>
-          ))}
+            );
+          })}
         </AnimatePresence>
       </div>
     </div>
@@ -145,13 +164,19 @@ const BillingDialog = ({
   priceId,
   planName,
   claim,
+  isSelected,
+  isFromPricingPage,
+  interval,
 }: {
   priceId: string;
   planName: string;
   memberCount: number;
   claim: string;
+  isSelected?: boolean;
+  isFromPricingPage?: boolean;
+  interval: 'monthlyPrice' | 'yearlyPrice';
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(isSelected && isFromPricingPage);
 
   const { t } = useLingui();
   const { toast } = useToast();
@@ -227,11 +252,13 @@ const BillingDialog = ({
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
-            <Trans>Subscribe</Trans>
+            <Trans>
+              Subscribe to {planName} {interval === 'monthlyPrice' ? '(Monthly)' : '(Yearly)'}
+            </Trans>
           </DialogTitle>
 
           <DialogDescription>
-            <Trans>You are about to subscribe to the {planName}</Trans>
+            <Trans>Choose how to proceed with your subscription</Trans>
           </DialogDescription>
         </DialogHeader>
 

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.billing.tsx

@@ -1,6 +1,7 @@
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
+import { useSearchParams } from 'react-router';
 import type Stripe from 'stripe';
 import { match } from 'ts-pattern';
 
@@ -19,9 +20,14 @@ export function meta() {
 
 export default function TeamsSettingBillingPage() {
   const { _, i18n } = useLingui();
+  const [searchParams] = useSearchParams();
 
   const organisation = useCurrentOrganisation();
 
+  const selectedPlan = searchParams.get('plan');
+  const selectedCycle = searchParams.get('cycle') as 'monthly' | 'yearly' | null;
+  const source = searchParams.get('source');
+
   const { data: subscriptionQuery, isLoading: isLoadingSubscription } =
     trpc.billing.subscription.get.useQuery({
       organisationId: organisation.id,
@@ -48,8 +54,21 @@ export default function TeamsSettingBillingPage() {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     (stripeSubscription?.items.data[0].price.product as Stripe.Product | undefined)?.name;
 
+  const isFromPricingPage = source === 'pricing';
+
   return (
     <div>
+      {isFromPricingPage && selectedPlan && !subscription && (
+        <div className="bg-muted mb-4 rounded-lg p-4">
+          <p className="text-sm">
+            <Trans>
+              Select a plan below to upgrade <strong>{organisation.name}</strong> to the{' '}
+              {selectedPlan} plan
+            </Trans>
+          </p>
+        </div>
+      )}
+
       <div className="flex flex-row items-end justify-between">
         <div>
           <h3 className="text-2xl font-semibold">
@@ -134,7 +153,14 @@ export default function TeamsSettingBillingPage() {
 
       <hr className="my-4" />
 
-      {!subscription && canManageBilling && <BillingPlans plans={plans} />}
+      {!subscription && canManageBilling && (
+        <BillingPlans
+          plans={plans}
+          selectedPlan={selectedPlan}
+          selectedCycle={selectedCycle}
+          isFromPricingPage={source === 'pricing'}
+        />
+      )}
 
       <section className="mt-6">
         <OrganisationBillingInvoicesTable

apps/remix/app/routes/billing-redirect.tsx

@@ -0,0 +1,47 @@
+import { redirect } from 'react-router';
+
+import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
+import { isPersonalLayout } from '@documenso/lib/utils/organisations';
+import { getOrganisations } from '@documenso/trpc/server/organisation-router/get-organisations';
+
+import type { Route } from './+types/billing-redirect';
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const session = await getOptionalSession(request);
+  if (!session.isAuthenticated) {
+    throw redirect('/signin');
+  }
+
+  const url = new URL(request.url);
+  const plan = url.searchParams.get('plan');
+  const cycle = url.searchParams.get('cycle');
+  const source = url.searchParams.get('source');
+
+  const queryParams = new URLSearchParams();
+  if (plan) {
+    queryParams.set('plan', plan);
+  }
+  if (cycle) {
+    queryParams.set('cycle', cycle);
+  }
+  if (source) {
+    queryParams.set('source', source);
+  }
+  const queryString = queryParams.toString() ? `?${queryParams.toString()}` : '';
+
+  const organisations = await getOrganisations({ userId: session.user.id });
+  if (isPersonalLayout(organisations)) {
+    return redirect(`/settings/billing${queryString}`);
+  }
+
+  const personalOrg = organisations.find((org) => org.type === 'PERSONAL') || organisations[0];
+  if (personalOrg) {
+    return redirect(`/o/${personalOrg.url}/settings/billing${queryString}`);
+  }
+
+  return redirect('/settings/profile');
+}
+
+export default function BillingRedirect() {
+  return null;
+}