fix(payment): show selector only for Philippines

e2e/fixtures/api-mocks.ts

@@ -2,6 +2,7 @@ import type { Page } from "@playwright/test";
 
 import { registerAuthMocks } from "./api/auth";
 import { registerChatMocks } from "./api/chat";
+import { registerCharacterMocks } from "./api/character";
 import { registerPaymentMocks } from "./api/payment";
 import { registerUserMocks } from "./api/user";
 
@@ -30,6 +31,7 @@ export async function mockCoreApis(page: Page, options: MockCoreApisOptions = {}
     isChatSendTokenExpired: () => chatState.hasExpiredChatSend,
     psidLoginFlow: chatOptions.psidLoginFlow,
   });
+  await registerCharacterMocks(page);
   await registerUserMocks(page);
   await registerChatMocks(page, chatOptions, chatState);
   await registerPaymentMocks(page);

e2e/fixtures/api/character.ts

@@ -0,0 +1,10 @@
+import type { Page } from "@playwright/test";
+
+import { apiEnvelope } from "../data/common";
+import { chatCharactersResponse } from "../data/character";
+
+export async function registerCharacterMocks(page: Page) {
+  await page.route("**/api/characters**", async (route) => {
+    await route.fulfill({ json: apiEnvelope(chatCharactersResponse) });
+  });
+}

e2e/fixtures/api/chat.ts

@@ -1,7 +1,7 @@
 import type { Page } from "@playwright/test";
 
 import { apiEnvelope } from "../data/common";
-import { chatSendResponse, createChatSendResponse, createPaidImageHistoryResponse, createWeeklyLimitChatSendResponse, emptyChatHistoryResponse, insufficientCreditsUnlockImageResponse, insufficientCreditsUnlockVoiceResponse, paidImageChatSendResponse, paidImageUnlockHistoryResponse, paidVoiceHistoryResponse } from "../data/chat";
+import { chatSendResponse, createChatSendResponse, createPaidImageHistoryResponse, createWeeklyLimitChatSendResponse, emptyChatHistoryResponse, emptyChatPreviewsResponse, insufficientCreditsUnlockImageResponse, insufficientCreditsUnlockVoiceResponse, paidImageChatSendResponse, paidImageUnlockHistoryResponse, paidVoiceHistoryResponse } from "../data/chat";
 
 export interface ChatMockOptions {
   chatLimitTriggerAt?: number;
@@ -31,6 +31,10 @@ export async function registerChatMocks(page: Page, options: ChatMockOptions, st
     await route.fulfill({ json: apiEnvelope(response) });
   });
 
+  await page.route("**/api/chat/previews", async (route) => {
+    await route.fulfill({ json: apiEnvelope(emptyChatPreviewsResponse) });
+  });
+
   await page.route("**/api/chat/send", async (route) => {
     sendCount += 1;
     const requestBody = route.request().postDataJSON() as { message?: unknown } | undefined;

e2e/fixtures/data/character.ts

@@ -0,0 +1,26 @@
+export const chatCharactersResponse = {
+  items: [
+    {
+      id: "elio",
+      displayName: "Elio Silvestri",
+      isActive: true,
+      capabilities: { chat: true, privateContent: true },
+      sortOrder: 10,
+    },
+    {
+      id: "maya-tan",
+      displayName: "Maya Tan",
+      isActive: true,
+      capabilities: { chat: true, privateContent: true },
+      sortOrder: 20,
+    },
+    {
+      id: "nayeli-cervantes",
+      displayName: "Nayeli Cervantes",
+      isActive: true,
+      capabilities: { chat: true, privateContent: true },
+      sortOrder: 30,
+    },
+  ],
+  defaultCharacterId: "elio",
+};

e2e/fixtures/data/chat.ts

@@ -9,6 +9,8 @@ export const emptyChatHistoryResponse = {
   privateCanViewFree: false,
 };
 
+export const emptyChatPreviewsResponse = { items: [] };
+
 export const chatSendResponse = {
   reply: "Hello from the E2E boyfriend.",
   audioUrl: "",

e2e/fixtures/helpers/auth.ts

@@ -11,7 +11,7 @@ export const splashStartChatButtonName = "Start Chatting";
 export const defaultCharacterSlug = "elio";
 export const defaultCharacterSplashPath = `/characters/${defaultCharacterSlug}/splash`;
 export const defaultCharacterChatPath = `/characters/${defaultCharacterSlug}/chat`;
-export const defaultCharacterSidebarPath = `/characters/${defaultCharacterSlug}/sidebar`;
+export const defaultCharacterSidebarPath = `/sidebar?returnTo=%2Fcharacters%2F${defaultCharacterSlug}%2Fchat`;
 export const defaultCharacterChatUrl = new RegExp(
   `/characters/${defaultCharacterSlug}/chat(?:\\?.*)?$`,
 );
@@ -34,6 +34,8 @@ export async function seedEmailSession(page: Page) {
   await page.goto(defaultCharacterSplashPath);
   await setEmailSessionStorage(page);
   await page.reload();
+  // Let the root auth provider hydrate the seeded session before navigation.
+  await page.waitForTimeout(750);
 }
 
 export async function switchToEmailSignIn(page: Page) {

e2e/specs/mock/auth/logout-from-sidebar.spec.ts

@@ -5,8 +5,11 @@ import {
   clearBrowserState,
   defaultCharacterSidebarPath,
   defaultCharacterSplashPath,
+  defaultCharacterChatUrl,
+  enterChatFromSplash,
   getSplashStartChatButton,
-  signInWithEmailAndOpenChat,
+  submitEmailLogin,
+  switchToEmailSignIn,
 } from "@e2e/fixtures/test-helpers";
 
 test.beforeEach(async ({ baseURL, context, page }) => {
@@ -17,11 +20,19 @@ test.beforeEach(async ({ baseURL, context, page }) => {
 test("user can log out from the sidebar after email login", async ({
   page,
 }) => {
-  await signInWithEmailAndOpenChat(page);
+  await enterChatFromSplash(page);
+  await page
+    .getByRole("button", { name: "Sign up to unlock more features" })
+    .click();
+  await expect(page).toHaveURL(/\/auth(?:\?.*)?$/);
+  await switchToEmailSignIn(page);
+  await submitEmailLogin(page, { expectedUrl: defaultCharacterChatUrl });
   await expect(page.getByRole("button", { name: "Menu" })).toBeVisible();
 
   await page.getByRole("button", { name: "Menu" }).click();
-  await expect(page).toHaveURL(new RegExp(`${defaultCharacterSidebarPath}$`));
+  await expect(page).toHaveURL(
+    new RegExp(defaultCharacterSidebarPath.replace("?", "\\?") + "$"),
+  );
 
   const logoutRequestPromise = page.waitForRequest("**/api/auth/logout");
   await page.getByRole("button", { name: /Log out/i }).click();

e2e/specs/mock/chat/chat-send-token-refresh-retry.spec.ts

@@ -3,7 +3,8 @@ import { expect, test, type Request } from "@playwright/test";
 import { mockCoreApis } from "@e2e/fixtures/api-mocks";
 import {
   clearBrowserState,
-  signInWithEmailAndOpenChat,
+  enterChatFromSplash,
+  setEmailSessionStorage,
 } from "@e2e/fixtures/test-helpers";
 
 test.beforeEach(async ({ baseURL, context, page }) => {
@@ -23,7 +24,8 @@ test("chat send refreshes an expired token, retries the request, and renders the
     }
   });
 
-  await signInWithEmailAndOpenChat(page);
+  await enterChatFromSplash(page);
+  await setEmailSessionStorage(page);
 
   const message = "token refresh retry test";
   const messageInput = page.getByRole("textbox", { name: "Message" });

src/app/_components/payment/__tests__/payment-method-selector.test.tsx

@@ -7,8 +7,12 @@ describe("PaymentMethodSelector", () => {
   it("orders the default channel first and renders page analytics", () => {
     const html = renderToStaticMarkup(
       <PaymentMethodSelector
+        config={{
+          canChoosePaymentMethod: true,
+          initialPayChannel: "ezpay",
+          showPaymentMethodSelector: true,
+        }}
         value="ezpay"
-        defaultChannel="ezpay"
         caption="GCash by default"
         analyticsKey="tip.payment_method"
         onChange={() => undefined}
@@ -40,6 +44,11 @@ describe("PaymentMethodSelector", () => {
   it("disables both payment methods while payment is busy", () => {
     const html = renderToStaticMarkup(
       <PaymentMethodSelector
+        config={{
+          canChoosePaymentMethod: true,
+          initialPayChannel: "stripe",
+          showPaymentMethodSelector: true,
+        }}
         value="stripe"
         disabled
         analyticsKey="subscription.payment_method"
@@ -52,4 +61,21 @@ describe("PaymentMethodSelector", () => {
       'data-analytics-key="subscription.payment_method"',
     );
   });
+
+  it("does not render when payment method selection is unavailable", () => {
+    const html = renderToStaticMarkup(
+      <PaymentMethodSelector
+        config={{
+          canChoosePaymentMethod: true,
+          initialPayChannel: "stripe",
+          showPaymentMethodSelector: false,
+        }}
+        value="stripe"
+        analyticsKey="tip.payment_method"
+        onChange={() => undefined}
+      />,
+    );
+
+    expect(html).toBe("");
+  });
 });

src/app/_components/payment/payment-method-selector.tsx

@@ -3,6 +3,7 @@
 import Image from "next/image";
 
 import type { PayChannel } from "@/data/schemas/payment";
+import type { PaymentMethodConfig } from "@/lib/payment/payment_method";
 
 const PAYMENT_METHODS: readonly {
   channel: PayChannel;
@@ -21,24 +22,28 @@ const PAYMENT_METHODS: readonly {
 ];
 
 export interface PaymentMethodSelectorProps {
+  config: PaymentMethodConfig;
   value: PayChannel;
-  defaultChannel?: PayChannel;
   disabled?: boolean;
   caption?: string;
+  className?: string;
   analyticsKey: string;
   onChange: (channel: PayChannel) => void;
 }
 
 export function PaymentMethodSelector({
+  config,
   value,
-  defaultChannel = "stripe",
   disabled = false,
   caption = "Stripe by default",
+  className,
   analyticsKey,
   onChange,
 }: PaymentMethodSelectorProps) {
+  if (!config.showPaymentMethodSelector) return null;
+
   const paymentMethods =
-    defaultChannel === "ezpay"
+    config.initialPayChannel === "ezpay"
       ? [...PAYMENT_METHODS].sort((a, b) =>
           a.channel === "ezpay" ? -1 : b.channel === "ezpay" ? 1 : 0,
         )
@@ -46,7 +51,7 @@ export function PaymentMethodSelector({
 
   return (
     <section
-      className="flex flex-col gap-[clamp(8px,1.852vw,10px)]"
+      className={`flex flex-col gap-[clamp(8px,1.852vw,10px)] ${className ?? ""}`.trim()}
       aria-labelledby="payment-method-title"
     >
       <div className="flex items-baseline justify-between gap-sm px-xs">

src/app/_hooks/__tests__/use-payment-method-selection.test.tsx

@@ -27,7 +27,11 @@ describe("usePaymentMethodSelection", () => {
   it("forces Stripe when payment method selection is unavailable", () => {
     const onChange = vi.fn();
     renderHarness(root, {
-      config: { canChoosePaymentMethod: false, initialPayChannel: "stripe" },
+      config: {
+        canChoosePaymentMethod: false,
+        initialPayChannel: "stripe",
+        showPaymentMethodSelector: false,
+      },
       currentPayChannel: "ezpay",
       onChange,
     });
@@ -40,6 +44,7 @@ describe("usePaymentMethodSelection", () => {
     const config = {
       canChoosePaymentMethod: true,
       initialPayChannel: "ezpay",
+      showPaymentMethodSelector: true,
     } as const;
     renderHarness(root, {
       config,
@@ -59,13 +64,21 @@ describe("usePaymentMethodSelection", () => {
   it("preserves an explicit return channel and pauses while payment is busy", () => {
     const onChange = vi.fn();
     renderHarness(root, {
-      config: { canChoosePaymentMethod: true, initialPayChannel: "ezpay" },
+      config: {
+        canChoosePaymentMethod: true,
+        initialPayChannel: "ezpay",
+        showPaymentMethodSelector: true,
+      },
       currentPayChannel: "stripe",
       requestedPayChannel: "stripe",
       onChange,
     });
     renderHarness(root, {
-      config: { canChoosePaymentMethod: false, initialPayChannel: "stripe" },
+      config: {
+        canChoosePaymentMethod: false,
+        initialPayChannel: "stripe",
+        showPaymentMethodSelector: false,
+      },
       currentPayChannel: "ezpay",
       isPaymentBusy: true,
       onChange,

src/app/subscription/subscription-screen.tsx

@@ -224,18 +224,15 @@ export function SubscriptionScreen({
           />
         </div>
 
-        {paymentMethodConfig.canChoosePaymentMethod ? (
-          <section className={styles.paymentMethodSlot}>
-            <PaymentMethodSelector
-              value={payment.payChannel}
-              defaultChannel={paymentMethodConfig.initialPayChannel}
-              disabled={isPaymentBusy}
-              caption="GCash by default in the Philippines"
-              analyticsKey="subscription.payment_method"
-              onChange={handlePaymentMethodChange}
-            />
-          </section>
-        ) : null}
+        <PaymentMethodSelector
+          config={paymentMethodConfig}
+          value={payment.payChannel}
+          disabled={isPaymentBusy}
+          caption="GCash by default in the Philippines"
+          className={styles.paymentMethodSlot}
+          analyticsKey="subscription.payment_method"
+          onChange={handlePaymentMethodChange}
+        />
 
         <div className={styles.ctaSlot}>
           <SubscriptionCheckoutButton

src/app/tip/__tests__/tip-coffee-tier-selector.test.tsx

@@ -20,13 +20,13 @@ const items: readonly TipCoffeeTierItem[] = [
   },
   {
     type: "medium",
-    displayName: "Golden Reserve",
+    displayName: "Gilded Heart",
     priceLabel: "US$ 9.99",
     unavailable: false,
   },
   {
     type: "large",
-    displayName: "Imperial Grand Cru",
+    displayName: "Crown Blossom",
     priceLabel: "US$ 19.99",
     unavailable: false,
   },
@@ -67,8 +67,8 @@ describe("TipCoffeeTierSelector", () => {
     act(() => root.render(<Harness />));
 
     expect(container.textContent).toContain("Velvet Espresso");
-    expect(container.textContent).toContain("Golden Reserve");
-    expect(container.textContent).toContain("Imperial Grand Cru");
+    expect(container.textContent).toContain("Gilded Heart");
+    expect(container.textContent).toContain("Crown Blossom");
     expect(
       container.querySelector<HTMLInputElement>('input[value="medium"]')
         ?.checked,

src/app/tip/tip-screen.tsx

@@ -284,18 +284,15 @@ export function TipScreen({
           />
         </section>
 
-        {paymentMethodConfig.canChoosePaymentMethod ? (
-          <section className={styles.paymentMethodSlot}>
-            <PaymentMethodSelector
-              value={payment.payChannel}
-              defaultChannel={paymentMethodConfig.initialPayChannel}
-              disabled={isPaymentBusy}
-              caption="GCash by default in the Philippines"
-              analyticsKey="tip.payment_method"
-              onChange={handlePaymentMethodChange}
-            />
-          </section>
-        ) : null}
+        <PaymentMethodSelector
+          config={paymentMethodConfig}
+          value={payment.payChannel}
+          disabled={isPaymentBusy}
+          caption="GCash by default in the Philippines"
+          className={styles.paymentMethodSlot}
+          analyticsKey="tip.payment_method"
+          onChange={handlePaymentMethodChange}
+        />
 
         {showMissingPlan ? (
           <p className={styles.statusMessage} role="alert">

src/lib/payment/__tests__/payment_method.test.ts

@@ -34,6 +34,7 @@ describe("payment method rules", () => {
     ).toEqual({
       canChoosePaymentMethod: false,
       initialPayChannel: "stripe",
+      showPaymentMethodSelector: false,
     });
   });
 
@@ -51,7 +52,7 @@ describe("payment method rules", () => {
     ).toBe("stripe");
   });
 
-  it("allows every user and keeps the requested channel outside production", () => {
+  it("keeps test channels but shows the selector only for Philippines", () => {
     vi.stubEnv("NEXT_PUBLIC_APP_ENV", "test");
 
     expect(canChoosePayChannel(null)).toBe(true);
@@ -61,5 +62,27 @@ describe("payment method rules", () => {
         requestedPayChannel: "ezpay",
       }),
     ).toBe("ezpay");
+    expect(
+      getPaymentMethodConfig({
+        countryCode: "HK",
+        requestedPayChannel: "ezpay",
+      }),
+    ).toEqual({
+      canChoosePaymentMethod: true,
+      initialPayChannel: "ezpay",
+      showPaymentMethodSelector: false,
+    });
+    expect(
+      getPaymentMethodConfig({
+        countryCode: " ph ",
+        requestedPayChannel: null,
+      }).showPaymentMethodSelector,
+    ).toBe(true);
+    expect(
+      getPaymentMethodConfig({
+        countryCode: undefined,
+        requestedPayChannel: null,
+      }).showPaymentMethodSelector,
+    ).toBe(false);
   });
 });

src/lib/payment/payment_method.ts

@@ -6,13 +6,14 @@ import { getDefaultPayChannelForCountryCode } from "./default_pay_channel";
 export interface PaymentMethodConfig {
   canChoosePaymentMethod: boolean;
   initialPayChannel: PayChannel;
+  showPaymentMethodSelector: boolean;
 }
 
 export function canChoosePayChannel(
   countryCode: string | null | undefined,
 ): boolean {
   if (!AppEnvUtil.isProduction()) return true;
-  return countryCode?.trim().toUpperCase() === "PH";
+  return isPhilippinesCountryCode(countryCode);
 }
 
 export function resolvePayChannel(input: {
@@ -33,5 +34,12 @@ export function getPaymentMethodConfig(input: {
   return {
     canChoosePaymentMethod: canChoosePayChannel(input.countryCode),
     initialPayChannel: resolvePayChannel(input),
+    showPaymentMethodSelector: isPhilippinesCountryCode(input.countryCode),
   };
 }
+
+function isPhilippinesCountryCode(
+  countryCode: string | null | undefined,
+): boolean {
+  return countryCode?.trim().toUpperCase() === "PH";
+}

src/lib/tip/__tests__/tip_coffee.test.ts

@@ -29,13 +29,13 @@ describe("tip coffee configuration", () => {
     });
     expect(getTipCoffeeOption("medium")).toMatchObject({
       amountCents: 999,
-      displayName: "Golden Reserve",
+      displayName: "Gilded Heart",
       image: { src: "/images/tip/medium.png", width: 1024, height: 1024 },
       planId: "tip_coffee_usd_9_99",
     });
     expect(getTipCoffeeOption("large")).toMatchObject({
       amountCents: 1999,
-      displayName: "Imperial Grand Cru",
+      displayName: "Crown Blossom",
       image: { src: "/images/tip/large.png", width: 1024, height: 1024 },
       planId: "tip_coffee_usd_19_99",
     });

src/lib/tip/tip_coffee.ts

@@ -32,7 +32,7 @@ const TIP_COFFEE_OPTION_BY_TYPE: Record<TipCoffeeType, TipCoffeeOption> = {
   medium: {
     type: "medium",
     amountCents: 999,
-    displayName: "Golden Reserve",
+    displayName: "Gilded Heart",
     image: {
       src: "/images/tip/medium.png",
       width: 1024,
@@ -43,7 +43,7 @@ const TIP_COFFEE_OPTION_BY_TYPE: Record<TipCoffeeType, TipCoffeeOption> = {
   large: {
     type: "large",
     amountCents: 1999,
-    displayName: "Imperial Grand Cru",
+    displayName: "Crown Blossom",
     image: {
       src: "/images/tip/large.png",
       width: 1024,