From 33fa90b90c90cd54a6978ee73e6f735d21782b32 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@jamesritchie.co.uk>
Date: Wed, 3 Jul 2024 15:36:48 +0100
Subject: [PATCH] =?UTF-8?q?Don=E2=80=99t=20highlight=20the=20plan=20on=20t?=
 =?UTF-8?q?he=20billing=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../route.tsx                                 |  1 +
 .../route.tsx                                 |  1 +
 ...ces.orgs.$organizationSlug.select-plan.tsx | 21 +++++++++++++------
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.billing/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.billing/route.tsx
index 1e10f3fc4..713b9283a 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.billing/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.billing/route.tsx
@@ -111,6 +111,7 @@ export default function ChoosePlanPage() {
               plans={plans}
               subscription={v3Subscription}
               organizationSlug={organizationSlug}
+              hasPromotedPlan={false}
             />
           </div>
         </div>
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 0c6b5657e..8ec94d04a 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
@@ -49,6 +49,7 @@ export default function ChoosePlanPage() {
         plans={plans}
         subscription={v3Subscription}
         organizationSlug={organizationSlug}
+        hasPromotedPlan
       />
     </div>
   );
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
index 1bbf46b16..eabae5447 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
@@ -133,9 +133,15 @@ type PricingPlansProps = {
   plans: Plans;
   subscription?: SubscriptionResult;
   organizationSlug: string;
+  hasPromotedPlan: boolean;
 };
 
-export function PricingPlans({ plans, subscription, organizationSlug }: PricingPlansProps) {
+export function PricingPlans({
+  plans,
+  subscription,
+  organizationSlug,
+  hasPromotedPlan,
+}: PricingPlansProps) {
   return (
     <div className="flex w-full flex-col">
       <div className="flex flex-col gap-3 lg:flex-row">
@@ -148,6 +154,7 @@ export function PricingPlans({ plans, subscription, organizationSlug }: PricingP
           plan={plans.hobby}
           organizationSlug={organizationSlug}
           subscription={subscription}
+          isHighlighted={hasPromotedPlan}
         />
         <TierPro plan={plans.pro} organizationSlug={organizationSlug} subscription={subscription} />
       </div>
@@ -321,10 +328,12 @@ export function TierHobby({
   plan,
   organizationSlug,
   subscription,
+  isHighlighted,
 }: {
   plan: PaidPlanDefinition;
   organizationSlug: string;
   subscription?: SubscriptionResult;
+  isHighlighted: boolean;
 }) {
   const location = useLocation();
   const navigation = useNavigation();
@@ -332,8 +341,8 @@ export function TierHobby({
   const isLoading = navigation.formAction === formAction;
 
   return (
-    <TierContainer isHighlighted>
-      <PricingHeader title={plan.title} isHighlighted cost={plan.tierPrice} />
+    <TierContainer isHighlighted={isHighlighted}>
+      <PricingHeader title={plan.title} isHighlighted={isHighlighted} cost={plan.tierPrice} />
       <TierLimit href="https://trigger.dev/pricing#computePricing">
         ${plan.limits.includedUsage / 100} usage included
       </TierLimit>
@@ -343,7 +352,7 @@ export function TierHobby({
           <input type="hidden" name="planCode" value={plan.code} />
           <input type="hidden" name="callerPath" value={location.pathname} />
           <Button
-            variant="primary/large"
+            variant={isHighlighted ? "primary/large" : "tertiary/large"}
             fullWidth
             className="text-md font-medium"
             disabled={
@@ -603,12 +612,12 @@ function FeatureItem({
       {checked ? (
         <CheckIcon
           className={cn(
-            "h-4 w-4 min-w-4",
+            "size-4 min-w-4",
             checkedColor === "primary" ? "text-primary" : "text-text-bright"
           )}
         />
       ) : (
-        <XMarkIcon className="h-4 w-4 text-charcoal-500" />
+        <XMarkIcon className="size-4 min-w-4 text-charcoal-500" />
       )}
       <div
         className={cn(