fix(payment): keep character and mobile actions visible

e2e/specs/mock/payment/checkout-handoff-external-browser.spec.ts

@@ -13,7 +13,10 @@ const facebookAndroidUserAgent =
   "[FB_IAB/FB4A;FBAV/566.0.0.48.73;]";
 const handoffToken = "checkout-handoff-token-that-is-at-least-32-characters";
 
-test.use({ userAgent: facebookAndroidUserAgent });
+test.use({
+  userAgent: facebookAndroidUserAgent,
+  viewport: { width: 390, height: 844 },
+});
 
 test.beforeEach(async ({ baseURL, context, page }) => {
   await clearBrowserState(context, page, baseURL);
@@ -34,12 +37,12 @@ test("consumes the handoff, removes its token, and does not create an order", as
   );
 
   await page.goto(
-    `/external-entry?target=checkout&handoffToken=${encodeURIComponent(handoffToken)}`,
+    `/external-entry?target=checkout&character=nayeli&handoffToken=${encodeURIComponent(handoffToken)}`,
   );
 
   expect((await consumeRequest).postDataJSON()).toEqual({ handoffToken });
   await expect(page).toHaveURL(
-    /\/subscription\?planId=vip_monthly&autoRenew=1&commercialOfferId=.*&payChannel=stripe/,
+    /\/subscription\?planId=vip_monthly&autoRenew=1&character=nayeli&commercialOfferId=.*&payChannel=stripe/,
   );
   expect(page.url()).not.toContain("handoffToken");
   await expect.poll(() => createOrderRequests).toBe(0);
@@ -74,17 +77,24 @@ test("offers the Facebook external-browser path before creating a Stripe order",
   });
 
   await seedEmailSession(page);
-  await page.goto(
-    "/subscription?type=vip&payChannel=stripe&character=elio",
-  );
+  await page.goto("/subscription?type=vip&payChannel=stripe&character=maya");
   await page.getByRole("button", { name: /Monthly,/i }).click();
   const externalButton = page.getByRole("button", {
     name: "Open in browser for more payment methods",
   });
+  const paymentButton = page.getByRole("button", { name: "Pay and Top Up" });
+  await expect(externalButton).toBeVisible();
   await expect(externalButton).toBeEnabled();
+  await expect(paymentButton).toBeVisible();
   await expect(
     page.getByRole("dialog", { name: "Automatic Renewal Confirmation" }),
   ).toHaveCount(0);
+  const externalBox = await externalButton.boundingBox();
+  const paymentBox = await paymentButton.boundingBox();
+  expect(externalBox).not.toBeNull();
+  expect(paymentBox).not.toBeNull();
+  expect(externalBox!.y).toBeLessThan(paymentBox!.y);
+  expect(paymentBox!.y + paymentBox!.height).toBeLessThanOrEqual(844);
   const handoffRequest = page.waitForRequest("**/api/auth/handoff/checkout");
   await externalButton.click();
   expect((await handoffRequest).postDataJSON()).toMatchObject({