fix(coding-plans): drop Churnkey cancellation path

Keep Coding Plans on direct cancellation and include review-driven React state and render cleanup for the related subscription surfaces.

Author: jeanduplessis

apps/web/src/app/admin/coding-plans/CodingPlansOperationsContent.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useReducer, useState } from 'react';
 import { useTRPC } from '@/lib/trpc/utils';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Button } from '@/components/Button';
@@ -156,15 +156,54 @@ type InstalledKeyWarningAction =
   | { type: 'update'; keyId: string }
   | { type: 'delete'; keyId: string; providerName: string };
 
+type BYOKDialogState = {
+  isDialogOpen: boolean;
+  editingKeyId: string | null;
+  selectedProvider: string;
+  apiKey: string;
+  showApiKey: boolean;
+  awsCredentialError: string | null;
+  installedKeyWarningAction: InstalledKeyWarningAction | null;
+};
+
+const INITIAL_BYOK_DIALOG_STATE: BYOKDialogState = {
+  isDialogOpen: false,
+  editingKeyId: null,
+  selectedProvider: '',
+  apiKey: '',
+  showApiKey: false,
+  awsCredentialError: null,
+  installedKeyWarningAction: null,
+};
+
+function updateBYOKDialogState(state: BYOKDialogState, update: Partial<BYOKDialogState>) {
+  return { ...state, ...update };
+}
+
 export function BYOKKeysManager({ organizationId }: BYOKKeysManagerProps) {
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [editingKeyId, setEditingKeyId] = useState<string | null>(null);
-  const [selectedProvider, setSelectedProvider] = useState('');
-  const [apiKey, setApiKey] = useState('');
-  const [showApiKey, setShowApiKey] = useState(false);
-  const [awsCredentialError, setAwsCredentialError] = useState<string | null>(null);
-  const [installedKeyWarningAction, setInstalledKeyWarningAction] =
-    useState<InstalledKeyWarningAction | null>(null);
+  const [dialogState, updateDialogState] = useReducer(
+    updateBYOKDialogState,
+    INITIAL_BYOK_DIALOG_STATE
+  );
+  const {
+    isDialogOpen,
+    editingKeyId,
+    selectedProvider,
+    apiKey,
+    showApiKey,
+    awsCredentialError,
+    installedKeyWarningAction,
+  } = dialogState;
+  const setIsDialogOpen = (isDialogOpen: boolean) => updateDialogState({ isDialogOpen });
+  const setEditingKeyId = (editingKeyId: string | null) => updateDialogState({ editingKeyId });
+  const setSelectedProvider = (selectedProvider: string) => updateDialogState({ selectedProvider });
+  const setApiKey = (apiKey: string) => updateDialogState({ apiKey });
+  const setShowApiKey = (showApiKey: boolean) => updateDialogState({ showApiKey });
+  const setAwsCredentialError = (awsCredentialError: string | null) =>
+    updateDialogState({ awsCredentialError });
+  const setInstalledKeyWarningAction = (
+    installedKeyWarningAction: InstalledKeyWarningAction | null
+  ) => updateDialogState({ installedKeyWarningAction });
 
   const trpc = useTRPC();
   const queryClient = useQueryClient();

apps/web/src/components/organizations/byok/BYOKKeysManager.tsx

@@ -1,7 +1,8 @@
 import Link from 'next/link';
 import type { ReactNode } from 'react';
-import { ArrowRight } from 'lucide-react';
+import { ArrowRight, Check } from 'lucide-react';
 import { Card } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 
 export function AvailableProductCard({
@@ -16,9 +17,9 @@ export function AvailableProductCard({
 }: {
   icon: ReactNode;
   title: string;
-  price: ReactNode;
-  status?: ReactNode;
-  features?: ReactNode;
+  price: { amount: string; cadenceLabel: string };
+  status?: string;
+  features?: readonly string[];
   cta?: {
     label: string;
     href?: string;
@@ -52,12 +53,31 @@ export function AvailableProductCard({
           </div>
           <h3 className="truncate text-sm font-semibold">{title}</h3>
         </div>
-        {status}
+        {status ? (
+          <Badge variant="secondary-outline" className="text-muted-foreground rounded-full px-3">
+            {status}
+          </Badge>
+        ) : null}
       </div>
 
-      <div className="mt-3">{price}</div>
+      <div className="mt-3 flex items-baseline gap-1">
+        <span className="text-2xl font-semibold text-white tabular-nums">{price.amount}</span>
+        <span className="text-muted-foreground text-xs">{price.cadenceLabel}</span>
+      </div>
 
-      {features ? <div className="mt-4 flex-1">{features}</div> : null}
+      {features ? (
+        <ul className="mt-4 grid flex-1 gap-x-8 gap-y-2 lg:grid-cols-2" aria-label="Plan benefits">
+          {features.map(feature => (
+            <li
+              key={feature}
+              className="text-muted-foreground flex items-start gap-2 text-xs leading-5"
+            >
+              <Check className="mt-0.5 size-4 shrink-0 text-emerald-400" aria-hidden />
+              <span>{feature}</span>
+            </li>
+          ))}
+        </ul>
+      ) : null}
 
       <div className="mt-4 pt-2">
         {action ?? (cta?.href && button ? <Link href={cta.href}>{button}</Link> : button)}

apps/web/src/components/subscriptions/AvailableProductCard.tsx

@@ -3,7 +3,7 @@
 import Link from 'next/link';
 import { useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { Check, CircleCheck, Code2 } from 'lucide-react';
+import { CircleCheck, Code2 } from 'lucide-react';
 import { toast } from 'sonner';
 import {
   AlertDialog,
@@ -16,7 +16,6 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Badge } from '@/components/ui/badge';
 import { AvailableProductCard } from '@/components/subscriptions/AvailableProductCard';
 import { SubscriptionCard } from '@/components/subscriptions/SubscriptionCard';
 import { SubscriptionGroup } from '@/components/subscriptions/SubscriptionGroup';
@@ -302,34 +301,9 @@ function CodingPlanOfferCard({
     <AvailableProductCard
       icon={<CodingPlanIcon providerName={plan.providerName} />}
       title={`${plan.providerName} ${plan.name}`}
-      price={
-        <div className="flex items-baseline gap-1">
-          <span className="text-2xl font-semibold text-white tabular-nums">{price.amount}</span>
-          <span className="text-muted-foreground text-xs">{price.cadenceLabel}</span>
-        </div>
-      }
-      status={
-        isSoldOut ? (
-          <Badge variant="secondary-outline" className="text-muted-foreground rounded-full px-3">
-            Sold out
-          </Badge>
-        ) : null
-      }
-      features={
-        plan.planId === 'minimax-token-plan-plus' ? (
-          <ul className="grid gap-x-8 gap-y-2 lg:grid-cols-2" aria-label="Plan benefits">
-            {TOKEN_PLAN_PLUS_BENEFITS.map(benefit => (
-              <li
-                key={benefit}
-                className="text-muted-foreground flex items-start gap-2 text-xs leading-5"
-              >
-                <Check className="mt-0.5 size-4 shrink-0 text-emerald-400" aria-hidden />
-                <span>{benefit}</span>
-              </li>
-            ))}
-          </ul>
-        ) : null
-      }
+      price={price}
+      status={isSoldOut ? 'Sold out' : undefined}
+      features={plan.planId === 'minimax-token-plan-plus' ? TOKEN_PLAN_PLUS_BENEFITS : undefined}
       cta={
         isSoldOut
           ? {