Function TierPro

apps/webapp/app/components/billing/PricingTiers.tsx:222–371

({
  plan,
  organizationSlug,
  showActionText,
  currentSubscription,
}: {
  plan: Plan;
  organizationSlug: string;
  showActionText: boolean;
  currentSubscription?: ActiveSubscription;
})

}

export function TierPro({
  plan,
  organizationSlug,
  showActionText,
  currentSubscription,
}: {
  plan: Plan;
  organizationSlug: string;
  showActionText: boolean;
  currentSubscription?: ActiveSubscription;
}) {
  const lastSubmission = useActionData();
  const [form] = useForm({
    id: "subscribe",
    // TODO: type this
    lastSubmission: lastSubmission as any,
    onValidate({ formData }) {
      return parse(formData, { schema: SetPlanBodySchema });
    },
  });

  const navigation = useNavigation();
  const isLoading =
    (navigation.state === "submitting" || navigation.state === "loading") &&
    navigation.formData?.get("planCode") === plan.code;

  const currentConcurrencyTier = currentSubscription?.plan.concurrentRuns.pricing?.code;
  const [concurrentBracketCode, setConcurrentBracketCode] = useState(
    currentConcurrencyTier ?? plan.concurrentRuns?.pricing?.tiers[0].code
  );

  const concurrencyTiers = plan.concurrentRuns?.pricing?.tiers ?? [];
  const selectedTier = concurrencyTiers.find((c) => c.code === concurrentBracketCode);

  const freeRunCount = plan.runs?.pricing?.brackets[0].upto ?? 0;
  const mostExpensiveRunCost = plan.runs?.pricing?.brackets[1]?.unitCost ?? 0;

  const isCurrentPlan = currentConcurrencyTier === concurrentBracketCode;

  let actionText = "Select plan";

  if (showActionText) {
    if (isCurrentPlan) {
      actionText = "Current Plan";
    } else {
      const currentTierIndex = concurrencyTiers.findIndex((c) => c.code === currentConcurrencyTier);
      const selectedTierIndex = concurrencyTiers.findIndex((c) => c.code === concurrentBracketCode);
      actionText = currentTierIndex < selectedTierIndex ? "Upgrade" : "Downgrade";
    }
  }

  return (
    <TierContainer isHighlighted>
      <Form action={`/resources/${organizationSlug}/subscribe`} method="post" {...form.props}>
        <Header title={plan.title} isHighlighted cost={selectedTier?.tierCost} />

        <div className="mb-2 mt-6 font-sans text-sm font-normal text-text-bright">
          <DefinitionTip