fix: restrict individual plans to upgrade only (#1900)

Prevent users from creating a separate organisation for individual
plans. Only applies to users who have 1 personal organisation and are
subscribing to the "Individual" plan.

The reason for this change is to keep the layout in the "Personal" mode
which means it doesn't show a bunch of unusable "organisation" related
UI.

apps/remix/app/components/dialogs/organisation-create-dialog.tsx

@@ -19,6 +19,7 @@ import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
 import { parseMessageDescriptorMacro } from '@documenso/lib/utils/i18n';
+import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { ZCreateOrganisationRequestSchema } from '@documenso/trpc/server/organisation-router/create-organisation.types';
 import { cn } from '@documenso/ui/lib/utils';
@@ -46,6 +47,8 @@ import { SpinnerBox } from '@documenso/ui/primitives/spinner';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { IndividualPersonalLayoutCheckoutButton } from '../general/billing-plans';
+
 export type OrganisationCreateDialogProps = {
   trigger?: React.ReactNode;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
@@ -59,10 +62,11 @@ export type TCreateOrganisationFormSchema = z.infer<typeof ZCreateOrganisationFo
 export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCreateDialogProps) => {
   const { t } = useLingui();
   const { toast } = useToast();
-  const { refreshSession } = useSession();
+  const { refreshSession, organisations } = useSession();
 
   const [searchParams] = useSearchParams();
   const updateSearchParams = useUpdateSearchParams();
+  const isPersonalLayoutMode = isPersonalLayout(organisations);
 
   const actionSearchParam = searchParams?.get('action');
 
@@ -133,6 +137,13 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
     form.reset();
   }, [open, form]);
 
+  const isIndividualPlan = (priceId: string) => {
+    return (
+      plansData?.plans[INTERNAL_CLAIM_ID.INDIVIDUAL]?.monthlyPrice?.id === priceId ||
+      plansData?.plans[INTERNAL_CLAIM_ID.INDIVIDUAL]?.yearlyPrice?.id === priceId
+    );
+  };
+
   return (
     <Dialog
       {...props}
@@ -177,9 +188,15 @@ export const OrganisationCreateDialog = ({ trigger, ...props }: OrganisationCrea
                     <Trans>Cancel</Trans>
                   </Button>
 
-                  <Button type="submit" onClick={() => setStep('create')}>
-                    <Trans>Continue</Trans>
-                  </Button>
+                  {isIndividualPlan(selectedPriceId) && isPersonalLayoutMode ? (
+                    <IndividualPersonalLayoutCheckoutButton priceId={selectedPriceId}>
+                      <Trans>Checkout</Trans>
+                    </IndividualPersonalLayoutCheckoutButton>
+                  ) : (
+                    <Button type="submit" onClick={() => setStep('create')}>
+                      <Trans>Continue</Trans>
+                    </Button>
+                  )}
                 </DialogFooter>
               </fieldset>
             </>
@@ -306,7 +323,11 @@ const BillingPlanForm = ({
   }, [value]);
 
   const onBillingPeriodChange = (billingPeriod: 'monthlyPrice' | 'yearlyPrice') => {
-    const plan = dynamicPlans.find((plan) => plan[billingPeriod]?.id === value);
+    const plan = dynamicPlans.find(
+      (plan) =>
+        // Purposely using the opposite billing period to get the correct plan.
+        plan[billingPeriod === 'monthlyPrice' ? 'yearlyPrice' : 'monthlyPrice']?.id === value,
+    );
 
     setBillingPeriod(billingPeriod);
 

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

@@ -10,7 +10,9 @@ import { useForm } from 'react-hook-form';
 import type { InternalClaimPlans } from '@documenso/ee/server-only/stripe/get-internal-claim-plans';
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
+import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent, CardTitle } from '@documenso/ui/primitives/card';
@@ -49,8 +51,12 @@ export type BillingPlansProps = {
 export const BillingPlans = ({ plans }: BillingPlansProps) => {
   const isMounted = useIsMounted();
 
+  const { organisations } = useSession();
+
   const [interval, setInterval] = useState<'monthlyPrice' | 'yearlyPrice'>('yearlyPrice');
 
+  const isPersonalLayoutMode = isPersonalLayout(organisations);
+
   const pricesToDisplay = useMemo(() => {
     const prices = [];
 
@@ -126,12 +132,18 @@ export const BillingPlans = ({ plans }: BillingPlansProps) => {
 
                 <div className="flex-1" />
 
-                <BillingDialog
-                  priceId={price.id}
-                  planName={price.product.name}
-                  memberCount={price.memberCount}
-                  claim={price.claim}
-                />
+                {isPersonalLayoutMode && price.claim === INTERNAL_CLAIM_ID.INDIVIDUAL ? (
+                  <IndividualPersonalLayoutCheckoutButton priceId={price.id}>
+                    <Trans>Subscribe</Trans>
+                  </IndividualPersonalLayoutCheckoutButton>
+                ) : (
+                  <BillingDialog
+                    priceId={price.id}
+                    planName={price.product.name}
+                    memberCount={price.memberCount}
+                    claim={price.claim}
+                  />
+                )}
               </CardContent>
             </MotionCard>
           ))}
@@ -315,3 +327,48 @@ const BillingDialog = ({
     </Dialog>
   );
 };
+
+/**
+ * Custom checkout button for individual organisations in personal layout mode.
+ *
+ * This is so they don't create an additional organisation which is not needed since
+ * it will clutter up the UI for them with unnecessary organisations.
+ */
+export const IndividualPersonalLayoutCheckoutButton = ({
+  priceId,
+  children,
+}: {
+  priceId: string;
+  children: React.ReactNode;
+}) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+  const { organisations } = useSession();
+
+  const { mutateAsync: createSubscription, isPending } =
+    trpc.billing.subscription.create.useMutation();
+
+  const onSubscribeClick = async () => {
+    try {
+      const createSubscriptionResponse = await createSubscription({
+        organisationId: organisations[0].id,
+        priceId,
+        isPersonalLayoutMode: true,
+      });
+
+      window.location.href = createSubscriptionResponse.redirectUrl;
+    } catch (_err) {
+      toast({
+        title: t`Something went wrong`,
+        description: t`An error occurred while trying to create a checkout session.`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Button loading={isPending} onClick={() => void onSubscribeClick()}>
+      {children}
+    </Button>
+  );
+};