fix(payment): inherit chat recipient without selector

src/app/subscription/subscription-screen.tsx

@@ -8,10 +8,7 @@ import { usePaymentMethodSelection } from "@/app/_hooks/use-payment-method-selec
 import { usePaymentPlanAnalytics } from "@/app/_hooks/use-payment-plan-analytics";
 import type { PayChannel } from "@/data/schemas/payment";
 import type { SubscriptionReturnTo } from "@/lib/navigation/subscription_exit";
-import {
-  DEFAULT_CHARACTER_SLUG,
-  getCharacterBySlug,
-} from "@/data/constants/character";
+import { DEFAULT_CHARACTER_SLUG } from "@/data/constants/character";
 import { useCharacterCatalog } from "@/providers/character-catalog-provider";
 import {
   behaviorAnalytics,
@@ -65,7 +62,7 @@ export function SubscriptionScreen({
   returnTo = null,
   initialPayChannel = null,
   analyticsContext: providedAnalyticsContext,
-  sourceCharacterSlug = DEFAULT_CHARACTER_SLUG,
+  sourceCharacterSlug = null,
   initialPlanId = null,
   initialAutoRenew = null,
   commercialOfferId = null,
@@ -81,14 +78,8 @@ export function SubscriptionScreen({
     null,
   );
   const characterCatalog = useCharacterCatalog();
-  const [selectedSupportCharacterSlug, setSelectedSupportCharacterSlug] =
-    useState<string | null>(() =>
-      getCharacterBySlug(sourceCharacterSlug)?.slug ?? null,
-    );
   const userState = useUserState();
-  const sourceCharacter = characterCatalog.getBySlug(
-    selectedSupportCharacterSlug,
-  );
+  const sourceCharacter = characterCatalog.getBySlug(sourceCharacterSlug);
   const hasHydrated = useHasHydrated();
   const countryCode = userState.currentUser?.countryCode;
   const paymentMethodConfig = getPaymentMethodConfig({
@@ -278,35 +269,6 @@ export function SubscriptionScreen({
           </p>
         ) : null}
 
-        <section className={styles.supportCharacterSelector}>
-          <h2>
-            {sourceCharacter
-              ? `Supporting ${sourceCharacter.shortName}`
-              : "Choose who you want to support"}
-          </h2>
-          <p>
-            Your VIP or credit purchase supports the character you choose, and
-            they will thank you after the payment and benefits are confirmed.
-          </p>
-          <div className={styles.supportCharacterOptions}>
-            {characterCatalog.characters.map((character) => (
-              <button
-                key={character.id}
-                type="button"
-                className={
-                  sourceCharacter?.id === character.id
-                    ? styles.supportCharacterOptionActive
-                    : styles.supportCharacterOption
-                }
-                aria-pressed={sourceCharacter?.id === character.id}
-                onClick={() => setSelectedSupportCharacterSlug(character.slug)}
-              >
-                {character.shortName}
-              </button>
-            ))}
-          </div>
-        </section>
-
         {chatActionId && sourceCharacter ? (
           <section
             className={styles.characterSupportBanner}