From 6101084439a22ecfd8b4e0a5c93a851180ef565f Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sun, 3 Dec 2023 12:10:25 +0000
Subject: [PATCH] Onboarding price selection working

---
 .../app/components/billing/PricingTiers.tsx   | 36 +++++++++++++------
 .../route.tsx                                 | 13 +++++--
 .../webapp/app/routes/_app.orgs.new/route.tsx | 19 +++++++---
 3 files changed, 52 insertions(+), 16 deletions(-)

diff --git a/apps/webapp/app/components/billing/PricingTiers.tsx b/apps/webapp/app/components/billing/PricingTiers.tsx
index 5726be8ab..342107a7d 100644
--- a/apps/webapp/app/components/billing/PricingTiers.tsx
+++ b/apps/webapp/app/components/billing/PricingTiers.tsx
@@ -5,7 +5,7 @@ import { Form, useActionData, useNavigation } from "@remix-run/react";
 import { ActiveSubscription, Plan, Plans, SetPlanBodySchema } from "@trigger.dev/billing";
 import { cn } from "~/utils/cn";
 import { DefinitionTip } from "../DefinitionTooltip";
-import { Button } from "../primitives/Buttons";
+import { Button, LinkButton } from "../primitives/Buttons";
 import { Paragraph } from "../primitives/Paragraph";
 import SegmentedControl from "../primitives/SegmentedControl";
 import { formatNumberCompact } from "~/utils/numberFormatter";
@@ -45,11 +45,13 @@ export function PricingTiers({
   plans,
   className,
   showActionText = true,
+  freeButtonPath,
 }: {
   organizationSlug: string;
   plans: Plans;
   className?: string;
   showActionText?: boolean;
+  freeButtonPath?: string;
 }) {
   const currentPlan = useCurrentPlan();
   //if they've canceled, we set the subscription to undefined so they can re-upgrade
@@ -70,6 +72,7 @@ export function PricingTiers({
         currentSubscription={currentSubscription}
         organizationSlug={organizationSlug}
         showActionText={showActionText}
+        buttonPath={freeButtonPath}
       />
       <TierPro
         plan={plans.paid}
@@ -87,11 +90,13 @@ export function TierFree({
   organizationSlug,
   showActionText,
   currentSubscription,
+  buttonPath,
 }: {
   plan: Plan;
   organizationSlug: string;
   showActionText: boolean;
   currentSubscription?: ActiveSubscription;
+  buttonPath?: string;
 }) {
   const lastSubmission = useActionData();
   const [form] = useForm({
@@ -133,15 +138,26 @@ export function TierFree({
           </DefinitionTip>
         </TierLimit>
         <input type="hidden" name="type" value="free" />
-        <Button
-          variant="secondary/large"
-          fullWidth
-          className="text-md my-6 font-medium"
-          disabled={isLoading || isCurrentPlan}
-          LeadingIcon={isLoading ? "spinner-white" : undefined}
-        >
-          {isLoading ? "Updating plan" : actionText}
-        </Button>
+        {buttonPath ? (
+          <LinkButton
+            variant="secondary/large"
+            fullWidth
+            className="text-md my-6 font-medium"
+            to={buttonPath}
+          >
+            {actionText}
+          </LinkButton>
+        ) : (
+          <Button
+            variant="secondary/large"
+            fullWidth
+            className="text-md my-6 font-medium"
+            disabled={isLoading || isCurrentPlan}
+            LeadingIcon={isLoading ? "spinner-white" : undefined}
+          >
+            {isLoading ? "Updating plan" : actionText}
+          </Button>
+        )}
         <ul className="flex flex-col gap-2.5">
           <FeatureItem checked>
             Up to {plan.runs?.freeAllowance ? formatNumberCompact(plan.runs.freeAllowance) : ""}{" "}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
index 045886112..a73df476e 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
@@ -15,7 +15,11 @@ import {
 } from "~/components/primitives/Sheet";
 import { featuresForRequest } from "~/features.server";
 import { OrgBillingPlanPresenter } from "~/presenters/OrgBillingPlanPresenter";
-import { OrganizationParamsSchema, organizationBillingPath } from "~/utils/pathBuilder";
+import {
+  OrganizationParamsSchema,
+  organizationBillingPath,
+  organizationPath,
+} from "~/utils/pathBuilder";
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
   const { organizationSlug } = OrganizationParamsSchema.parse(params);
@@ -40,7 +44,12 @@ export default function ChoosePlanPage() {
   return (
     <div className="mx-auto flex h-full w-full max-w-[80rem] flex-col items-center justify-center gap-12 overflow-y-auto px-12">
       <Header1>Subscribe for full access</Header1>
-      <PricingTiers organizationSlug={organizationSlug} plans={plans} showActionText={false} />
+      <PricingTiers
+        organizationSlug={organizationSlug}
+        plans={plans}
+        showActionText={false}
+        freeButtonPath={organizationPath({ slug: organizationSlug })}
+      />
 
       <Sheet>
         <SheetTrigger asChild>
diff --git a/apps/webapp/app/routes/_app.orgs.new/route.tsx b/apps/webapp/app/routes/_app.orgs.new/route.tsx
index fbb2f55a9..61b23c6da 100644
--- a/apps/webapp/app/routes/_app.orgs.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.new/route.tsx
@@ -17,12 +17,13 @@ import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
 import { RadioGroupItem } from "~/components/primitives/RadioButton";
+import { featuresForRequest } from "~/features.server";
 import { useFeatures } from "~/hooks/useFeatures";
 import { createOrganization } from "~/models/organization.server";
 import { NewOrganizationPresenter } from "~/presenters/NewOrganizationPresenter.server";
 import { commitCurrentProjectSession, setCurrentProjectId } from "~/services/currentProject.server";
 import { requireUserId } from "~/services/session.server";
-import { projectPath, rootPath } from "~/utils/pathBuilder";
+import { plansPath, projectPath, rootPath, selectPlanPath } from "~/utils/pathBuilder";
 
 const schema = z.object({
   orgName: z.string().min(3).max(50),
@@ -61,10 +62,20 @@ export const action: ActionFunction = async ({ request }) => {
     const project = organization.projects[0];
     const session = await setCurrentProjectId(project.id, request);
 
+    const { isManagedCloud } = featuresForRequest(request);
+
+    const headers = {
+      "Set-Cookie": await commitCurrentProjectSession(session),
+    };
+
+    if (isManagedCloud) {
+      return redirect(selectPlanPath(organization), {
+        headers,
+      });
+    }
+
     return redirect(projectPath(organization, project), {
-      headers: {
-        "Set-Cookie": await commitCurrentProjectSession(session),
-      },
+      headers,
     });
   } catch (error: any) {
     return json({ errors: { body: error.message } }, { status: 400 });