The Team card rendered an extra '14-day free trial, then $150 / month' line between the price and the action button, which only trial plans have. That pushed Team's button about a line lower than Free's and Enterprise's, so the row of CTAs no longer lined up. Remove the blurb so every card has the same structure and the buttons share a baseline. The trial is still surfaced: the button itself reads "Start free trial".
Unified · Split
| @@ -66,12 +66,6 @@ const ACTION_LABELS: Record<string, string> = { · 65 unmodified lines | |||
| 66 | 66 | ||
| 67 | const PLAN_ORDER = ["free", "team", "enterprise"]; | 67 | const PLAN_ORDER = ["free", "team", "enterprise"]; |
| 68 | 68 | ||
| 69 | // "14-day free trial", "1-month free trial", etc. — reads the trial config | ||
| 70 | // synced from the repo-root autumn.config.ts so copy tracks the plan. The unit | ||
| 71 | // stays singular because it reads as a compound adjective ("14-day", "2-month"). | ||
| 72 | const trialLabel = (freeTrial: NonNullable<Plan["freeTrial"]>): string => | ||
| 73 | `${freeTrial.durationLength}-${freeTrial.durationType} free trial`; | ||
| 74 | |||
| 75 | function PlansPage() { | 69 | function PlansPage() { |
| 76 | const { attach, openCustomerPortal, isLoading: customerLoading } = useCustomer(); | 70 | const { attach, openCustomerPortal, isLoading: customerLoading } = useCustomer(); |
| 77 | const { data: plans, isLoading: plansLoading, isFetching } = useListPlans(); | 71 | const { data: plans, isLoading: plansLoading, isFetching } = useListPlans(); |
| @@ -186,14 +180,6 @@ function PlansPage() { · 108 unmodified lines | |||
| 186 | )} | 180 | )} |
| 187 | </div> | 181 | </div> |
| 188 | 182 | ||
| 189 | {trialOffered && freeTrial && ( | ||
| 190 | <p className="mt-2 text-xs font-medium text-primary"> | ||
| 191 | {trialLabel(freeTrial)} | ||
| 192 | {plan.price?.amount != null && | ||
| 193 | `, then $${plan.price.amount} / ${plan.price.interval ?? "month"}`} | ||
| 194 | </p> | ||
| 195 | )} | ||
| 196 | |||
| 197 | <div className="mt-4"> | 183 | <div className="mt-4"> |
| 198 | {(isCurrent && !isCanceling) || isScheduled ? ( | 184 | {(isCurrent && !isCanceling) || isScheduled ? ( |
| 199 | <div className="flex h-9 items-center justify-center rounded-md border border-border bg-muted/30 text-sm font-medium text-muted-foreground"> | 185 | <div className="flex h-9 items-center justify-center rounded-md border border-border bg-muted/30 text-sm font-medium text-muted-foreground"> |