test(e2e): cover chat limit payment flow

e2e/fixtures/api-mocks.ts

@@ -3,12 +3,14 @@ import type { Page } from "@playwright/test";
 import {
   apiEnvelope,
   chatSendResponse,
+  createPaymentOrderResponse,
   createChatSendResponse,
   createWeeklyLimitChatSendResponse,
   e2eEmailUser,
   emptyChatHistoryResponse,
   emailLoginResponse,
   guestLoginResponse,
+  paidPaymentOrderStatusResponse,
   paymentPlansResponse,
   userEntitlementsResponse,
   vipStatusResponse,
@@ -66,6 +68,14 @@ export async function mockCoreApis(
     await route.fulfill({ json: apiEnvelope(paymentPlansResponse) });
   });
 
+  await page.route("**/api/payment/create-order", async (route) => {
+    await route.fulfill({ json: apiEnvelope(createPaymentOrderResponse) });
+  });
+
+  await page.route("**/api/payment/order-status**", async (route) => {
+    await route.fulfill({ json: apiEnvelope(paidPaymentOrderStatusResponse) });
+  });
+
   await page.route("**/api/payment/vip-status**", async (route) => {
     await route.fulfill({ json: apiEnvelope(vipStatusResponse) });
   });

e2e/fixtures/test-data.ts

@@ -165,6 +165,23 @@ export const paymentPlansResponse = {
   ],
 };
 
+export const paymentOrderId = "order_e2e_vip_monthly";
+
+export const createPaymentOrderResponse = {
+  orderId: paymentOrderId,
+  payParams: {
+    provider: "stripe",
+    clientSecret: "pi_e2e_secret_mock",
+  },
+};
+
+export const paidPaymentOrderStatusResponse = {
+  orderId: paymentOrderId,
+  status: "paid",
+  orderType: "vip_monthly",
+  planId: "vip_monthly",
+};
+
 export const vipStatusResponse = {
   isVip: false,
   expiresAt: null,

e2e/specs/mock/chat-quantity-limit.spec.ts

@@ -61,6 +61,8 @@ test("guest hits the chat quantity limit and can continue to login and subscript
       limitTriggeredAt = index;
       break;
     }
+
+    await page.waitForTimeout(1_000);
   }
 
   expect(limitTriggeredAt).not.toBeNull();
@@ -94,9 +96,30 @@ test("guest hits the chat quantity limit and can continue to login and subscript
 
   await page.getByRole("button", { name: "Login" }).click();
   await expect(page).toHaveURL(/\/subscription\?type=vip&returnTo=chat$/);
-  await expect(
-    page.getByRole("button", { name: /Activate/i }),
-  ).toBeVisible();
+
+  const createOrderRequestPromise = page.waitForRequest(
+    "**/api/payment/create-order",
+  );
+  const orderStatusRequestPromise = page.waitForRequest(
+    "**/api/payment/order-status**",
+  );
+  await page.getByRole("button", { name: /Pay and Activ/i }).click();
+
+  const createOrderRequest = await createOrderRequestPromise;
+  expect(createOrderRequest.postDataJSON()).toMatchObject({
+    planId: "vip_monthly",
+    payChannel: "stripe",
+  });
+  await orderStatusRequestPromise;
+
+  const paymentSuccessDialog = page.getByRole("alertdialog", {
+    name: "Payment successful",
+  });
+  await expect(paymentSuccessDialog).toBeVisible();
+  await paymentSuccessDialog.getByRole("button", { name: "OK" }).click();
+
+  await expect(page).toHaveURL(/\/chat$/);
+  await expect(page.getByRole("textbox", { name: "Message" })).toBeVisible();
 });
 
 async function isQuantityLimitVisible(