revert(payment): remove unsupported Stripe and EzPay upgrade
This commit is contained in:
@@ -13,7 +13,6 @@ export interface MockCoreApisOptions {
|
|||||||
paidImageInsufficientCreditsFlow?: boolean;
|
paidImageInsufficientCreditsFlow?: boolean;
|
||||||
paidVoiceInsufficientCreditsFlow?: boolean;
|
paidVoiceInsufficientCreditsFlow?: boolean;
|
||||||
topUpHandoffFlow?: boolean;
|
topUpHandoffFlow?: boolean;
|
||||||
checkoutHandoffFlow?: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function mockCoreApis(page: Page, options: MockCoreApisOptions = {}) {
|
export async function mockCoreApis(page: Page, options: MockCoreApisOptions = {}) {
|
||||||
@@ -24,7 +23,6 @@ export async function mockCoreApis(page: Page, options: MockCoreApisOptions = {}
|
|||||||
paidImageInsufficientCreditsFlow: options.paidImageInsufficientCreditsFlow ?? false,
|
paidImageInsufficientCreditsFlow: options.paidImageInsufficientCreditsFlow ?? false,
|
||||||
paidVoiceInsufficientCreditsFlow: options.paidVoiceInsufficientCreditsFlow ?? false,
|
paidVoiceInsufficientCreditsFlow: options.paidVoiceInsufficientCreditsFlow ?? false,
|
||||||
topUpHandoffFlow: options.topUpHandoffFlow ?? false,
|
topUpHandoffFlow: options.topUpHandoffFlow ?? false,
|
||||||
checkoutHandoffFlow: options.checkoutHandoffFlow ?? false,
|
|
||||||
};
|
};
|
||||||
const chatState = { hasExpiredChatSend: false, paidImageRequested: false, paidImageUnlocked: false };
|
const chatState = { hasExpiredChatSend: false, paidImageRequested: false, paidImageUnlocked: false };
|
||||||
|
|
||||||
@@ -32,7 +30,6 @@ export async function mockCoreApis(page: Page, options: MockCoreApisOptions = {}
|
|||||||
chatSendTokenRefreshFlow: chatOptions.chatSendTokenRefreshFlow,
|
chatSendTokenRefreshFlow: chatOptions.chatSendTokenRefreshFlow,
|
||||||
isChatSendTokenExpired: () => chatState.hasExpiredChatSend,
|
isChatSendTokenExpired: () => chatState.hasExpiredChatSend,
|
||||||
topUpHandoffFlow: chatOptions.topUpHandoffFlow,
|
topUpHandoffFlow: chatOptions.topUpHandoffFlow,
|
||||||
checkoutHandoffFlow: chatOptions.checkoutHandoffFlow,
|
|
||||||
});
|
});
|
||||||
await registerCharacterMocks(page);
|
await registerCharacterMocks(page);
|
||||||
await registerUserMocks(page);
|
await registerUserMocks(page);
|
||||||
|
|||||||
@@ -1,24 +1,15 @@
|
|||||||
import type { Page } from "@playwright/test";
|
import type { Page } from "@playwright/test";
|
||||||
|
|
||||||
import { apiEnvelope } from "../data/common";
|
import { apiEnvelope } from "../data/common";
|
||||||
import { checkoutHandoffResponse, emailLoginResponse, guestLoginResponse, refreshedEmailLoginResponse, refreshedGuestLoginResponse, topUpHandoffResponse } from "../data/auth";
|
import { emailLoginResponse, guestLoginResponse, refreshedEmailLoginResponse, refreshedGuestLoginResponse, topUpHandoffResponse } from "../data/auth";
|
||||||
|
|
||||||
export interface AuthMockState {
|
export interface AuthMockState {
|
||||||
chatSendTokenRefreshFlow: boolean;
|
chatSendTokenRefreshFlow: boolean;
|
||||||
isChatSendTokenExpired: () => boolean;
|
isChatSendTokenExpired: () => boolean;
|
||||||
topUpHandoffFlow: boolean;
|
topUpHandoffFlow: boolean;
|
||||||
checkoutHandoffFlow: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function registerAuthMocks(page: Page, state: AuthMockState) {
|
export async function registerAuthMocks(page: Page, state: AuthMockState) {
|
||||||
await page.route("**/api/auth/handoff/checkout/consume", async (route) => {
|
|
||||||
if (!state.checkoutHandoffFlow) {
|
|
||||||
await route.continue();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
await route.fulfill({ json: apiEnvelope(checkoutHandoffResponse) });
|
|
||||||
});
|
|
||||||
|
|
||||||
await page.route("**/api/auth/handoff/topup/consume", async (route) => {
|
await page.route("**/api/auth/handoff/topup/consume", async (route) => {
|
||||||
if (!state.topUpHandoffFlow) {
|
if (!state.topUpHandoffFlow) {
|
||||||
await route.continue();
|
await route.continue();
|
||||||
|
|||||||
@@ -63,15 +63,3 @@ export const topUpHandoffResponse = {
|
|||||||
loginProvider: "facebook_messenger",
|
loginProvider: "facebook_messenger",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const checkoutHandoffResponse = {
|
|
||||||
token: "e2e-checkout-token",
|
|
||||||
refreshToken: "e2e-checkout-refresh-token",
|
|
||||||
loginStatus: "email",
|
|
||||||
user: e2eEmailUser,
|
|
||||||
checkoutIntent: {
|
|
||||||
planId: "vip_monthly",
|
|
||||||
autoRenew: true,
|
|
||||||
commercialOfferId: "13ec8a10-58d7-4d24-b66b-8db5699a1aa8",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|||||||
@@ -2,17 +2,18 @@ import { expect, type Page } from "@playwright/test";
|
|||||||
|
|
||||||
export async function completeVipPayment(page: Page) {
|
export async function completeVipPayment(page: Page) {
|
||||||
const checkoutButton = page.getByRole("button", { name: "Pay and Top Up" });
|
const checkoutButton = page.getByRole("button", { name: "Pay and Top Up" });
|
||||||
await expect(checkoutButton).toBeEnabled();
|
await expect(checkoutButton).toBeDisabled();
|
||||||
|
await page.getByRole("button", { name: /Monthly,/i }).click();
|
||||||
await checkoutButton.click();
|
|
||||||
const renewalDialog = page.getByRole("dialog", {
|
const renewalDialog = page.getByRole("dialog", {
|
||||||
name: "Automatic Renewal Confirmation",
|
name: "Automatic Renewal Confirmation",
|
||||||
});
|
});
|
||||||
await expect(renewalDialog).toBeVisible();
|
await expect(renewalDialog).toBeVisible();
|
||||||
|
await renewalDialog.getByRole("button", { name: "Confirm" }).click();
|
||||||
|
await expect(checkoutButton).toBeEnabled();
|
||||||
|
|
||||||
const createOrderRequestPromise = page.waitForRequest("**/api/payment/create-order");
|
const createOrderRequestPromise = page.waitForRequest("**/api/payment/create-order");
|
||||||
const orderStatusRequestPromise = page.waitForRequest("**/api/payment/order-status**");
|
const orderStatusRequestPromise = page.waitForRequest("**/api/payment/order-status**");
|
||||||
await renewalDialog.getByRole("button", { name: "Confirm" }).click();
|
await checkoutButton.click();
|
||||||
const createOrderRequest = await createOrderRequestPromise;
|
const createOrderRequest = await createOrderRequestPromise;
|
||||||
expect(createOrderRequest.postDataJSON()).toMatchObject({ planId: "vip_monthly", payChannel: "stripe" });
|
expect(createOrderRequest.postDataJSON()).toMatchObject({ planId: "vip_monthly", payChannel: "stripe" });
|
||||||
await orderStatusRequestPromise;
|
await orderStatusRequestPromise;
|
||||||
|
|||||||
@@ -1,105 +0,0 @@
|
|||||||
import { expect, test } from "@playwright/test";
|
|
||||||
|
|
||||||
import { mockCoreApis } from "@e2e/fixtures/api-mocks";
|
|
||||||
import { apiEnvelope } from "@e2e/fixtures/data/common";
|
|
||||||
import {
|
|
||||||
clearBrowserState,
|
|
||||||
seedEmailSession,
|
|
||||||
} from "@e2e/fixtures/test-helpers";
|
|
||||||
|
|
||||||
const facebookAndroidUserAgent =
|
|
||||||
"Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36 " +
|
|
||||||
"(KHTML, like Gecko) Version/4.0 Chrome/126.0.0.0 Mobile Safari/537.36 " +
|
|
||||||
"[FB_IAB/FB4A;FBAV/566.0.0.48.73;]";
|
|
||||||
const handoffToken = "checkout-handoff-token-that-is-at-least-32-characters";
|
|
||||||
|
|
||||||
test.use({
|
|
||||||
userAgent: facebookAndroidUserAgent,
|
|
||||||
viewport: { width: 390, height: 844 },
|
|
||||||
});
|
|
||||||
|
|
||||||
test.beforeEach(async ({ baseURL, context, page }) => {
|
|
||||||
await clearBrowserState(context, page, baseURL);
|
|
||||||
});
|
|
||||||
|
|
||||||
test("consumes the handoff, removes its token, and does not create an order", async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
await mockCoreApis(page, { checkoutHandoffFlow: true });
|
|
||||||
let createOrderRequests = 0;
|
|
||||||
page.on("request", (request) => {
|
|
||||||
if (request.url().includes("/api/payment/create-order")) {
|
|
||||||
createOrderRequests += 1;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const consumeRequest = page.waitForRequest(
|
|
||||||
"**/api/auth/handoff/checkout/consume",
|
|
||||||
);
|
|
||||||
|
|
||||||
await page.goto(
|
|
||||||
`/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&character=nayeli&commercialOfferId=.*&payChannel=stripe/,
|
|
||||||
);
|
|
||||||
expect(page.url()).not.toContain("handoffToken");
|
|
||||||
await expect.poll(() => createOrderRequests).toBe(0);
|
|
||||||
await expect
|
|
||||||
.poll(() =>
|
|
||||||
page.evaluate(() => ({
|
|
||||||
loginProvider: localStorage.getItem("cozsweet:login_provider"),
|
|
||||||
loginToken: localStorage.getItem("cozsweet:login_token"),
|
|
||||||
})),
|
|
||||||
)
|
|
||||||
.toEqual({ loginProvider: "email", loginToken: "e2e-checkout-token" });
|
|
||||||
});
|
|
||||||
|
|
||||||
test("offers the Facebook external-browser path before creating a Stripe order", async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
await mockCoreApis(page);
|
|
||||||
let createOrderRequests = 0;
|
|
||||||
page.on("request", (request) => {
|
|
||||||
if (request.url().includes("/api/payment/create-order")) {
|
|
||||||
createOrderRequests += 1;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
await page.route("**/api/auth/handoff/checkout", async (route) => {
|
|
||||||
await route.fulfill({
|
|
||||||
json: apiEnvelope({
|
|
||||||
externalUrl:
|
|
||||||
"https://cozsweet.com/external-entry?target=checkout&handoffToken=opaque-token",
|
|
||||||
expiresAt: "2026-07-28T16:00:00+00:00",
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
await seedEmailSession(page);
|
|
||||||
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({
|
|
||||||
planId: "vip_monthly",
|
|
||||||
autoRenew: true,
|
|
||||||
});
|
|
||||||
expect(createOrderRequests).toBe(0);
|
|
||||||
});
|
|
||||||
@@ -232,11 +232,19 @@ test("Indonesia VIP defaults to QRIS and completes after status polling", async
|
|||||||
"true",
|
"true",
|
||||||
);
|
);
|
||||||
const checkoutButton = page.getByRole("button", { name: "Pay and Top Up" });
|
const checkoutButton = page.getByRole("button", { name: "Pay and Top Up" });
|
||||||
await expect(checkoutButton).toBeEnabled();
|
await expect(checkoutButton).toBeDisabled();
|
||||||
await expectCheckoutButtonLayout(page);
|
await expectCheckoutButtonLayout(page);
|
||||||
await expect(
|
|
||||||
page.getByRole("dialog", { name: "Automatic Renewal Confirmation" }),
|
await page.getByRole("button", { name: /Monthly, 195900 IDR/i }).click();
|
||||||
).toHaveCount(0);
|
const renewalDialog = page.getByRole("dialog", {
|
||||||
|
name: "Automatic Renewal Confirmation",
|
||||||
|
});
|
||||||
|
await expect(renewalDialog).toBeVisible();
|
||||||
|
expect(payment.getCreateOrderCount()).toBe(0);
|
||||||
|
|
||||||
|
await renewalDialog.getByRole("button", { name: "Confirm" }).click();
|
||||||
|
await expect(renewalDialog).toBeHidden();
|
||||||
|
await expect(checkoutButton).toBeEnabled();
|
||||||
expect(payment.getCreateOrderCount()).toBe(0);
|
expect(payment.getCreateOrderCount()).toBe(0);
|
||||||
|
|
||||||
const orderId = await expectQrisOrder(
|
const orderId = await expectQrisOrder(
|
||||||
|
|||||||
@@ -1,23 +0,0 @@
|
|||||||
import { expect, test } from "@playwright/test";
|
|
||||||
|
|
||||||
test("serves the VIP membership benefits agreement from the same site", async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
const response = await page.goto("/legal/vip-membership-benefits.html");
|
|
||||||
|
|
||||||
expect(response?.status()).toBe(200);
|
|
||||||
await expect(
|
|
||||||
page.getByRole("heading", { name: "VIP Membership Benefits Agreement" }),
|
|
||||||
).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
test("serves the automatic renewal agreement from the same site", async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
const response = await page.goto("/legal/automatic-renewal.html");
|
|
||||||
|
|
||||||
expect(response?.status()).toBe(200);
|
|
||||||
await expect(
|
|
||||||
page.getByRole("heading", { name: "Automatic Renewal Agreement" }),
|
|
||||||
).toBeVisible();
|
|
||||||
});
|
|
||||||
@@ -1,65 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<meta name="color-scheme" content="light" />
|
|
||||||
<title>Automatic Renewal Agreement | Cozsweet</title>
|
|
||||||
<style>
|
|
||||||
:root { font-family: Georgia, "Times New Roman", serif; color: #2b1721; background: #fff8fb; }
|
|
||||||
* { box-sizing: border-box; }
|
|
||||||
body { margin: 0; padding: 24px 16px 48px; line-height: 1.65; }
|
|
||||||
main { width: min(100%, 760px); margin: 0 auto; padding: clamp(22px, 6vw, 48px); border: 1px solid #f3c6dc; border-radius: 24px; background: #fff; box-shadow: 0 18px 50px rgba(133, 45, 88, .1); }
|
|
||||||
h1 { margin: 0 0 8px; font-size: clamp(28px, 7vw, 42px); line-height: 1.12; }
|
|
||||||
h2 { margin: 28px 0 8px; font-size: 21px; }
|
|
||||||
p, li { font-family: Arial, Helvetica, sans-serif; color: #553d49; }
|
|
||||||
.meta { margin: 0 0 28px; color: #8c6176; font-size: 14px; }
|
|
||||||
.notice { padding: 14px 16px; border-radius: 14px; background: #fff0f7; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<main>
|
|
||||||
<h1>Automatic Renewal Agreement</h1>
|
|
||||||
<p class="meta">Effective date: July 29, 2026</p>
|
|
||||||
|
|
||||||
<p class="notice">
|
|
||||||
By selecting <strong>Confirm</strong> before payment, you authorize Cozsweet and its payment provider to renew the selected membership automatically under the terms shown below.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>1. When renewal applies</h2>
|
|
||||||
<p>
|
|
||||||
Automatic renewal applies only when the selected membership is identified as auto-renewing in the purchase flow. One-time credit purchases, tips, gifts, lifetime plans, and payment methods explicitly shown as one-time purchases do not automatically renew.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>2. Billing frequency</h2>
|
|
||||||
<p>
|
|
||||||
The plan renews at the end of the billing period shown at checkout, such as monthly, quarterly, or annually. Renewal continues until cancelled. Your payment method may be charged shortly before or on the start of the next period as permitted by the payment provider.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>3. Renewal amount</h2>
|
|
||||||
<p>
|
|
||||||
The initial charge and renewal amount are displayed before confirmation. A promotion may reduce the first charge without reducing later renewals. Unless another renewal amount is shown, renewal uses the applicable regular price for the selected plan, together with any taxes or fees required by law.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>4. Confirmation</h2>
|
|
||||||
<p>
|
|
||||||
Cozsweet asks for renewal confirmation when an account first attempts to pay for an automatically renewing membership in the current agreement version. Cancelling the confirmation does not create an order. Confirming records the acknowledgement in the current browser and continues to payment.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>5. Cancellation</h2>
|
|
||||||
<p>
|
|
||||||
You may cancel future renewal using a cancellation option made available in the product or by using the support/payment-issue path before the next renewal is processed. Cancellation takes effect for future billing; membership already paid for normally remains available until the end of the current term.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>6. Failed or disputed payments</h2>
|
|
||||||
<p>
|
|
||||||
A failed renewal can interrupt membership benefits. If you see a duplicate charge, a long-pending payment, or missing benefits, do not repeatedly submit payment. Use <strong>Payment issue?</strong> on the purchase page and keep the returned Feedback ID. Never provide passwords, full card numbers, security codes, verification codes, or access tokens.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>7. Material changes</h2>
|
|
||||||
<p>
|
|
||||||
If the renewal terms materially change, Cozsweet will update this agreement and request a new acknowledgement when required. The version effective for a payment is the version linked from its confirmation dialog.
|
|
||||||
</p>
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,66 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<meta name="color-scheme" content="light" />
|
|
||||||
<title>VIP Membership Benefits Agreement | Cozsweet</title>
|
|
||||||
<style>
|
|
||||||
:root { font-family: Georgia, "Times New Roman", serif; color: #2b1721; background: #fff8fb; }
|
|
||||||
* { box-sizing: border-box; }
|
|
||||||
body { margin: 0; padding: 24px 16px 48px; line-height: 1.65; }
|
|
||||||
main { width: min(100%, 760px); margin: 0 auto; padding: clamp(22px, 6vw, 48px); border: 1px solid #f3c6dc; border-radius: 24px; background: #fff; box-shadow: 0 18px 50px rgba(133, 45, 88, .1); }
|
|
||||||
h1 { margin: 0 0 8px; font-size: clamp(28px, 7vw, 42px); line-height: 1.12; }
|
|
||||||
h2 { margin: 28px 0 8px; font-size: 21px; }
|
|
||||||
p, li { font-family: Arial, Helvetica, sans-serif; color: #553d49; }
|
|
||||||
.meta { margin: 0 0 28px; color: #8c6176; font-size: 14px; }
|
|
||||||
a { color: #d8327c; }
|
|
||||||
.notice { padding: 14px 16px; border-radius: 14px; background: #fff0f7; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<main>
|
|
||||||
<h1>VIP Membership Benefits Agreement</h1>
|
|
||||||
<p class="meta">Effective date: July 29, 2026</p>
|
|
||||||
|
|
||||||
<p class="notice">
|
|
||||||
This agreement explains the VIP membership displayed on the Cozsweet purchase page. The plan name, price, currency, duration, credits, and benefits shown at checkout are the terms that apply to your purchase.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>1. Membership benefits</h2>
|
|
||||||
<p>
|
|
||||||
VIP may include the chat access, credits, private content access, or other benefits displayed for the selected plan. Benefits are available only for the membership period and account shown at checkout. A membership does not guarantee that every feature or item is free; some content can still require credits or a separate purchase when clearly shown in the product.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>2. Plan term and account</h2>
|
|
||||||
<p>
|
|
||||||
Membership is attached to the Cozsweet account used for payment. The selected monthly, quarterly, annual, lifetime, or other plan term is shown before payment. Do not share payment credentials or account access with another person.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>3. Automatic renewal</h2>
|
|
||||||
<p>
|
|
||||||
A plan marked as automatically renewing continues until cancelled. Before the first automatically renewing purchase, Cozsweet displays a separate confirmation. Please also read the <a href="/legal/automatic-renewal.html">Automatic Renewal Agreement</a>.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>4. Prices and promotions</h2>
|
|
||||||
<p>
|
|
||||||
The checkout page is the source of truth for the current amount and currency. A first-payment or limited promotion can apply only to the initial charge; the renewal amount may be the regular price displayed in the renewal notice. Cozsweet does not ask you to pay a price that is not shown in the checkout flow.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>5. Payment and access</h2>
|
|
||||||
<p>
|
|
||||||
Benefits are activated only after payment is confirmed and the order is fulfilled. A pending or failed payment does not activate membership. If payment is duplicated, remains pending, or benefits are missing, do not submit repeated payments; use the <strong>Payment issue?</strong> entry on the purchase page and retain the returned Feedback ID.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>6. Cancellation, refunds, and applicable rights</h2>
|
|
||||||
<p>
|
|
||||||
Cancellation stops future renewal but does not normally remove benefits already paid for during the current term. Refund rights depend on applicable law, the payment provider, and the circumstances of the order. Use the product support or payment-issue path for review; never send a password, card number, security code, verification code, or access token.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>7. Changes</h2>
|
|
||||||
<p>
|
|
||||||
If a material membership term changes, the updated version and effective date will be made available before it applies to a new purchase or renewal where required.
|
|
||||||
</p>
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,77 +0,0 @@
|
|||||||
import { act } from "react";
|
|
||||||
import { createRoot, type Root } from "react-dom/client";
|
|
||||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
||||||
|
|
||||||
const { createCheckoutHandoff, openUrlWithExternalBrowser } = vi.hoisted(
|
|
||||||
() => ({
|
|
||||||
createCheckoutHandoff: vi.fn(),
|
|
||||||
openUrlWithExternalBrowser: vi.fn(),
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
vi.mock("@/lib/auth/checkout_handoff", () => ({ createCheckoutHandoff }));
|
|
||||||
vi.mock("@/utils/url-launcher-util", () => ({
|
|
||||||
UrlLauncherUtil: { openUrlWithExternalBrowser },
|
|
||||||
}));
|
|
||||||
vi.mock("@/utils/browser-detect", () => ({
|
|
||||||
BrowserDetector: { isFacebookInAppBrowser: () => true },
|
|
||||||
}));
|
|
||||||
|
|
||||||
import { ExternalBrowserCheckoutButton } from "../external-browser-checkout-button";
|
|
||||||
|
|
||||||
describe("ExternalBrowserCheckoutButton", () => {
|
|
||||||
let container: HTMLDivElement;
|
|
||||||
let root: Root;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
vi.clearAllMocks();
|
|
||||||
createCheckoutHandoff.mockResolvedValue({
|
|
||||||
success: true,
|
|
||||||
data: {
|
|
||||||
externalUrl:
|
|
||||||
"https://cozsweet.com/external-entry?target=checkout&handoffToken=opaque",
|
|
||||||
expiresAt: "2026-07-28T16:00:00+00:00",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
|
|
||||||
.IS_REACT_ACT_ENVIRONMENT = true;
|
|
||||||
container = document.createElement("div");
|
|
||||||
document.body.appendChild(container);
|
|
||||||
root = createRoot(container);
|
|
||||||
});
|
|
||||||
|
|
||||||
afterEach(() => {
|
|
||||||
act(() => root.unmount());
|
|
||||||
container.remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("creates only a handoff before opening the external browser", async () => {
|
|
||||||
await act(async () => {
|
|
||||||
root.render(
|
|
||||||
<ExternalBrowserCheckoutButton
|
|
||||||
characterSlug="maya"
|
|
||||||
checkoutIntent={{
|
|
||||||
planId: "vip_monthly",
|
|
||||||
autoRenew: true,
|
|
||||||
commercialOfferId: "offer-1",
|
|
||||||
}}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
const button = container.querySelector("button");
|
|
||||||
expect(button?.textContent).toContain(
|
|
||||||
"Open in browser for more payment methods",
|
|
||||||
);
|
|
||||||
await act(async () => button?.click());
|
|
||||||
|
|
||||||
expect(createCheckoutHandoff).toHaveBeenCalledWith({
|
|
||||||
planId: "vip_monthly",
|
|
||||||
autoRenew: true,
|
|
||||||
commercialOfferId: "offer-1",
|
|
||||||
});
|
|
||||||
expect(openUrlWithExternalBrowser).toHaveBeenCalledWith(
|
|
||||||
"https://cozsweet.com/external-entry?target=checkout&handoffToken=opaque&character=maya",
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -18,8 +18,6 @@ const hiddenLaunch = {
|
|||||||
shouldShowQrisDialog: false,
|
shouldShowQrisDialog: false,
|
||||||
shouldShowStripeDialog: false,
|
shouldShowStripeDialog: false,
|
||||||
stripeClientSecret: null,
|
stripeClientSecret: null,
|
||||||
stripeCustomerSessionClientSecret: null,
|
|
||||||
savedPaymentMethodsEnabled: false,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
describe("PaymentLaunchDialogs", () => {
|
describe("PaymentLaunchDialogs", () => {
|
||||||
|
|||||||
@@ -2,57 +2,18 @@ import { act } from "react";
|
|||||||
import { createRoot, type Root } from "react-dom/client";
|
import { createRoot, type Root } from "react-dom/client";
|
||||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||||
|
|
||||||
const stripeConfirmPayment = vi.fn(async () => ({}));
|
import { StripePaymentDialogLoading } from "../lazy-stripe-payment-dialog";
|
||||||
const elementsSubmit = vi.fn(async () => ({}));
|
|
||||||
let capturedElementsOptions: Record<string, unknown> | null = null;
|
|
||||||
let capturedExpressProps: Record<string, unknown> | null = null;
|
|
||||||
let capturedPaymentProps: Record<string, unknown> | null = null;
|
|
||||||
|
|
||||||
vi.hoisted(() => {
|
|
||||||
process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY = "pk_test_checkout";
|
|
||||||
});
|
|
||||||
|
|
||||||
vi.mock("@stripe/stripe-js", () => ({
|
|
||||||
loadStripe: vi.fn(() => Promise.resolve({})),
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock("@stripe/react-stripe-js", () => ({
|
|
||||||
Elements: ({
|
|
||||||
children,
|
|
||||||
options,
|
|
||||||
}: {
|
|
||||||
children: React.ReactNode;
|
|
||||||
options: Record<string, unknown>;
|
|
||||||
}) => {
|
|
||||||
capturedElementsOptions = options;
|
|
||||||
return <>{children}</>;
|
|
||||||
},
|
|
||||||
ExpressCheckoutElement: (props: Record<string, unknown>) => {
|
|
||||||
capturedExpressProps = props;
|
|
||||||
return <div data-testid="express-checkout" />;
|
|
||||||
},
|
|
||||||
PaymentElement: (props: Record<string, unknown>) => {
|
|
||||||
capturedPaymentProps = props;
|
|
||||||
return <div data-testid="payment-element" />;
|
|
||||||
},
|
|
||||||
useElements: () => ({ submit: elementsSubmit }),
|
|
||||||
useStripe: () => ({ confirmPayment: stripeConfirmPayment }),
|
|
||||||
}));
|
|
||||||
|
|
||||||
import { StripePaymentDialog } from "../stripe-payment-dialog";
|
import { StripePaymentDialog } from "../stripe-payment-dialog";
|
||||||
|
|
||||||
describe("StripePaymentDialog", () => {
|
describe("Stripe payment portal states", () => {
|
||||||
let container: HTMLDivElement;
|
let container: HTMLDivElement;
|
||||||
let root: Root;
|
let root: Root;
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
vi.clearAllMocks();
|
|
||||||
capturedElementsOptions = null;
|
|
||||||
capturedExpressProps = null;
|
|
||||||
capturedPaymentProps = null;
|
|
||||||
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
|
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
|
||||||
.IS_REACT_ACT_ENVIRONMENT = true;
|
.IS_REACT_ACT_ENVIRONMENT = true;
|
||||||
container = document.createElement("div");
|
container = document.createElement("div");
|
||||||
|
container.style.transform = "translateX(50%)";
|
||||||
document.body.appendChild(container);
|
document.body.appendChild(container);
|
||||||
root = createRoot(container);
|
root = createRoot(container);
|
||||||
});
|
});
|
||||||
@@ -63,129 +24,40 @@ describe("StripePaymentDialog", () => {
|
|||||||
document.body.style.overflow = "";
|
document.body.style.overflow = "";
|
||||||
});
|
});
|
||||||
|
|
||||||
it("renders express methods and wallets before card with English Stripe copy", () => {
|
it("portals the unavailable state and keeps its explicit close action", () => {
|
||||||
|
const onClose = vi.fn();
|
||||||
|
|
||||||
act(() =>
|
act(() =>
|
||||||
root.render(
|
root.render(
|
||||||
<StripePaymentDialog
|
<StripePaymentDialog
|
||||||
clientSecret="pi_123_secret_payment"
|
clientSecret="client-secret"
|
||||||
customerSessionClientSecret="cuss_123_secret_saved"
|
onClose={onClose}
|
||||||
savedPaymentMethodsEnabled
|
|
||||||
onClose={vi.fn()}
|
|
||||||
/>,
|
/>,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(capturedElementsOptions).toMatchObject({
|
const dialog = document.body.querySelector('[role="alertdialog"]');
|
||||||
clientSecret: "pi_123_secret_payment",
|
expect(dialog).not.toBeNull();
|
||||||
customerSessionClientSecret: "cuss_123_secret_saved",
|
expect(container.contains(dialog)).toBe(false);
|
||||||
locale: "en",
|
expect(dialog?.textContent).toContain("Payment unavailable");
|
||||||
});
|
expect(dialog?.getAttribute("aria-labelledby")).toBeTruthy();
|
||||||
expect(capturedExpressProps?.options).toMatchObject({
|
expect(dialog?.getAttribute("aria-describedby")).toBeTruthy();
|
||||||
paymentMethodOrder: [
|
|
||||||
"link",
|
const okButton = Array.from(dialog?.querySelectorAll("button") ?? []).find(
|
||||||
"paypal",
|
(button) => button.textContent === "OK",
|
||||||
"amazon_pay",
|
);
|
||||||
"klarna",
|
act(() => okButton?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
|
||||||
],
|
expect(onClose).toHaveBeenCalledOnce();
|
||||||
paymentMethods: {
|
|
||||||
applePay: "never",
|
|
||||||
googlePay: "never",
|
|
||||||
link: "auto",
|
|
||||||
paypal: "auto",
|
|
||||||
amazonPay: "auto",
|
|
||||||
klarna: "auto",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
expect(capturedPaymentProps?.options).toMatchObject({
|
|
||||||
layout: { type: "accordion", defaultCollapsed: true },
|
|
||||||
paymentMethodOrder: ["wechat_pay", "alipay", "card"],
|
|
||||||
wallets: { applePay: "auto", googlePay: "auto", link: "never" },
|
|
||||||
});
|
|
||||||
const text = document.body.textContent ?? "";
|
|
||||||
expect(text).toContain("Choose a payment method");
|
|
||||||
const express = document.body.querySelector('[data-testid="express-checkout"]');
|
|
||||||
const card = document.body.querySelector('[data-testid="payment-element"]');
|
|
||||||
expect(express).not.toBeNull();
|
|
||||||
expect(card).not.toBeNull();
|
|
||||||
expect(
|
|
||||||
express!.compareDocumentPosition(card!) &
|
|
||||||
Node.DOCUMENT_POSITION_FOLLOWING,
|
|
||||||
).toBeTruthy();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it("keeps Payment Element wallet fallbacks when Express Checkout is unavailable", () => {
|
it("portals the lazy loading state", () => {
|
||||||
act(() =>
|
act(() => root.render(<StripePaymentDialogLoading />));
|
||||||
root.render(
|
|
||||||
<StripePaymentDialog
|
|
||||||
clientSecret="pi_123_secret_payment"
|
|
||||||
onClose={vi.fn()}
|
|
||||||
/>,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
const onReady = capturedExpressProps?.onReady as
|
const dialog = document.body.querySelector('[role="dialog"]');
|
||||||
| ((event: { availablePaymentMethods: undefined }) => void)
|
expect(dialog).not.toBeNull();
|
||||||
| undefined;
|
expect(container.contains(dialog)).toBe(false);
|
||||||
expect(onReady).toBeTypeOf("function");
|
expect(dialog?.textContent).toContain("Preparing secure payment");
|
||||||
act(() => onReady?.({ availablePaymentMethods: undefined }));
|
expect(dialog?.textContent).toContain("Loading payment methods...");
|
||||||
|
expect(dialog?.querySelector('[aria-busy="true"]')).not.toBeNull();
|
||||||
const expressSection = document.body.querySelector(
|
|
||||||
'[aria-label="Express payment methods"]',
|
|
||||||
);
|
|
||||||
expect(expressSection).toHaveProperty("hidden", true);
|
|
||||||
expect(
|
|
||||||
document.body.querySelector('[data-testid="payment-element"]'),
|
|
||||||
).not.toBeNull();
|
|
||||||
expect(capturedPaymentProps?.options).toMatchObject({
|
|
||||||
wallets: { applePay: "auto", googlePay: "auto", link: "never" },
|
|
||||||
paymentMethodOrder: ["wechat_pay", "alipay", "card"],
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("does not pass an invalid or disabled Customer Session secret", () => {
|
|
||||||
act(() =>
|
|
||||||
root.render(
|
|
||||||
<StripePaymentDialog
|
|
||||||
clientSecret="pi_123_secret_payment"
|
|
||||||
customerSessionClientSecret="invalid"
|
|
||||||
savedPaymentMethodsEnabled={false}
|
|
||||||
onClose={vi.fn()}
|
|
||||||
/>,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(capturedElementsOptions).not.toHaveProperty(
|
|
||||||
"customerSessionClientSecret",
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("uses the same confirmation path for an Express Checkout approval", async () => {
|
|
||||||
const onConfirmed = vi.fn();
|
|
||||||
act(() =>
|
|
||||||
root.render(
|
|
||||||
<StripePaymentDialog
|
|
||||||
clientSecret="pi_123_secret_payment"
|
|
||||||
onClose={vi.fn()}
|
|
||||||
onConfirmed={onConfirmed}
|
|
||||||
/>,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
const onConfirm = capturedExpressProps?.onConfirm as
|
|
||||||
| ((event: { paymentFailed: ReturnType<typeof vi.fn> }) => Promise<void>)
|
|
||||||
| undefined;
|
|
||||||
expect(onConfirm).toBeTypeOf("function");
|
|
||||||
await act(async () => {
|
|
||||||
await onConfirm?.({ paymentFailed: vi.fn() });
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(stripeConfirmPayment).toHaveBeenCalledTimes(1);
|
|
||||||
expect(stripeConfirmPayment).toHaveBeenCalledWith(
|
|
||||||
expect.objectContaining({
|
|
||||||
elements: expect.any(Object),
|
|
||||||
redirect: "if_required",
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
expect(onConfirmed).toHaveBeenCalledTimes(1);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,91 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useState, useSyncExternalStore } from "react";
|
|
||||||
|
|
||||||
import type { CheckoutIntent } from "@/data/schemas/auth";
|
|
||||||
import {
|
|
||||||
DEFAULT_CHARACTER_SLUG,
|
|
||||||
getCharacterBySlug,
|
|
||||||
} from "@/data/constants/character";
|
|
||||||
import { createCheckoutHandoff } from "@/lib/auth/checkout_handoff";
|
|
||||||
import { BrowserDetector } from "@/utils/browser-detect";
|
|
||||||
import { ExceptionHandler } from "@/core/errors";
|
|
||||||
import { Result } from "@/utils/result";
|
|
||||||
import { UrlLauncherUtil } from "@/utils/url-launcher-util";
|
|
||||||
|
|
||||||
export interface ExternalBrowserCheckoutButtonProps {
|
|
||||||
checkoutIntent: CheckoutIntent;
|
|
||||||
disabled?: boolean;
|
|
||||||
characterSlug?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ExternalBrowserCheckoutButton({
|
|
||||||
checkoutIntent,
|
|
||||||
disabled = false,
|
|
||||||
characterSlug = DEFAULT_CHARACTER_SLUG,
|
|
||||||
}: ExternalBrowserCheckoutButtonProps) {
|
|
||||||
const isFacebookBrowser = useSyncExternalStore(
|
|
||||||
() => () => undefined,
|
|
||||||
() => BrowserDetector.isFacebookInAppBrowser(),
|
|
||||||
() => false,
|
|
||||||
);
|
|
||||||
const [isOpening, setIsOpening] = useState(false);
|
|
||||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
|
||||||
|
|
||||||
if (!isFacebookBrowser) return null;
|
|
||||||
|
|
||||||
const handleOpen = async () => {
|
|
||||||
if (disabled || isOpening) return;
|
|
||||||
setIsOpening(true);
|
|
||||||
setErrorMessage(null);
|
|
||||||
const result = await createCheckoutHandoff(checkoutIntent);
|
|
||||||
if (Result.isErr(result)) {
|
|
||||||
setErrorMessage(
|
|
||||||
ExceptionHandler.message(
|
|
||||||
result.error,
|
|
||||||
"Could not open this checkout in your browser. Please sign in and try again.",
|
|
||||||
),
|
|
||||||
);
|
|
||||||
setIsOpening(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
const verifiedCharacter =
|
|
||||||
getCharacterBySlug(characterSlug)?.slug ?? DEFAULT_CHARACTER_SLUG;
|
|
||||||
const externalUrl = new URL(
|
|
||||||
result.data.externalUrl,
|
|
||||||
window.location.origin,
|
|
||||||
);
|
|
||||||
externalUrl.searchParams.set("character", verifiedCharacter);
|
|
||||||
UrlLauncherUtil.openUrlWithExternalBrowser(externalUrl.toString());
|
|
||||||
} catch (error) {
|
|
||||||
setErrorMessage(
|
|
||||||
ExceptionHandler.message(
|
|
||||||
error,
|
|
||||||
"Could not open this checkout in your browser. Please try again.",
|
|
||||||
),
|
|
||||||
);
|
|
||||||
setIsOpening(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mb-2 w-full text-center">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="min-h-11 w-full cursor-pointer rounded-full border border-black/15 bg-white px-4 py-2.5 text-sm font-semibold text-text-foreground disabled:cursor-not-allowed disabled:opacity-55"
|
|
||||||
disabled={disabled || isOpening}
|
|
||||||
onClick={() => void handleOpen()}
|
|
||||||
>
|
|
||||||
{isOpening
|
|
||||||
? "Opening browser..."
|
|
||||||
: "Open in browser for more payment methods"}
|
|
||||||
</button>
|
|
||||||
{errorMessage ? (
|
|
||||||
<p className="mt-2 text-sm text-[#c0392b]" role="alert">
|
|
||||||
{errorMessage}
|
|
||||||
</p>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -24,8 +24,6 @@ type PaymentLaunchDialogFlow = Pick<
|
|||||||
| "shouldShowQrisDialog"
|
| "shouldShowQrisDialog"
|
||||||
| "shouldShowStripeDialog"
|
| "shouldShowStripeDialog"
|
||||||
| "stripeClientSecret"
|
| "stripeClientSecret"
|
||||||
| "stripeCustomerSessionClientSecret"
|
|
||||||
| "savedPaymentMethodsEnabled"
|
|
||||||
>;
|
>;
|
||||||
|
|
||||||
export interface PaymentLaunchDialogsProps {
|
export interface PaymentLaunchDialogsProps {
|
||||||
@@ -66,10 +64,6 @@ export function PaymentLaunchDialogs({
|
|||||||
{launch.shouldShowStripeDialog && launch.stripeClientSecret ? (
|
{launch.shouldShowStripeDialog && launch.stripeClientSecret ? (
|
||||||
<LazyStripePaymentDialog
|
<LazyStripePaymentDialog
|
||||||
clientSecret={launch.stripeClientSecret}
|
clientSecret={launch.stripeClientSecret}
|
||||||
customerSessionClientSecret={
|
|
||||||
launch.stripeCustomerSessionClientSecret
|
|
||||||
}
|
|
||||||
savedPaymentMethodsEnabled={launch.savedPaymentMethodsEnabled}
|
|
||||||
returnPath={stripeReturnPath}
|
returnPath={stripeReturnPath}
|
||||||
onClose={launch.handleStripeClose}
|
onClose={launch.handleStripeClose}
|
||||||
onConfirmed={launch.handleStripeConfirmed}
|
onConfirmed={launch.handleStripeConfirmed}
|
||||||
|
|||||||
@@ -9,11 +9,6 @@ export const stripePaymentDialogStyles = {
|
|||||||
content:
|
content:
|
||||||
"m-0 text-(length:--responsive-body,14px) leading-normal text-[#393939]",
|
"m-0 text-(length:--responsive-body,14px) leading-normal text-[#393939]",
|
||||||
form: "flex flex-col gap-(--page-section-gap,18px)",
|
form: "flex flex-col gap-(--page-section-gap,18px)",
|
||||||
expressSection: "w-full empty:hidden",
|
|
||||||
cardSection:
|
|
||||||
"flex w-full flex-col gap-(--spacing-sm,8px) border-t border-black/10 pt-(--page-section-gap,18px)",
|
|
||||||
cardTitle:
|
|
||||||
"m-0 text-(length:--responsive-body,16px) font-semibold text-text-foreground",
|
|
||||||
error:
|
error:
|
||||||
"m-0 text-(length:--responsive-caption,13px) leading-[1.45] text-[#c0392b]",
|
"m-0 text-(length:--responsive-caption,13px) leading-[1.45] text-[#c0392b]",
|
||||||
actions: "flex w-full gap-(--spacing-md,12px)",
|
actions: "flex w-full gap-(--spacing-md,12px)",
|
||||||
|
|||||||
@@ -4,28 +4,19 @@
|
|||||||
*
|
*
|
||||||
* 后端当前返回 PaymentIntent clientSecret,因此这里直接用它完成前端确认。
|
* 后端当前返回 PaymentIntent clientSecret,因此这里直接用它完成前端确认。
|
||||||
*/
|
*/
|
||||||
import { useEffect, useId, useRef, useState, type FormEvent } from "react";
|
import { useId, useState, type FormEvent } from "react";
|
||||||
import {
|
import {
|
||||||
Elements,
|
Elements,
|
||||||
ExpressCheckoutElement,
|
|
||||||
PaymentElement,
|
PaymentElement,
|
||||||
useElements,
|
useElements,
|
||||||
useStripe,
|
useStripe,
|
||||||
} from "@stripe/react-stripe-js";
|
} from "@stripe/react-stripe-js";
|
||||||
import {
|
import { loadStripe } from "@stripe/stripe-js";
|
||||||
loadStripe,
|
|
||||||
type AvailablePaymentMethods,
|
|
||||||
type StripeExpressCheckoutElementConfirmEvent,
|
|
||||||
} from "@stripe/stripe-js";
|
|
||||||
|
|
||||||
import { ModalPortal } from "@/app/_components/core/modal-portal";
|
import { ModalPortal } from "@/app/_components/core/modal-portal";
|
||||||
import { ExceptionHandler } from "@/core/errors";
|
import { ExceptionHandler } from "@/core/errors";
|
||||||
import { ROUTES } from "@/router/routes";
|
import { ROUTES } from "@/router/routes";
|
||||||
import { Logger } from "@/utils/logger";
|
import { Logger } from "@/utils/logger";
|
||||||
import { BrowserDetector } from "@/utils/browser-detect";
|
|
||||||
import { PlatformDetector } from "@/utils/platform-detect";
|
|
||||||
import { getStripeCustomerSessionClientSecret } from "@/lib/payment/payment_launch";
|
|
||||||
import { behaviorAnalytics } from "@/lib/analytics";
|
|
||||||
|
|
||||||
import { stripePaymentDialogStyles as styles } from "./stripe-payment-dialog.styles";
|
import { stripePaymentDialogStyles as styles } from "./stripe-payment-dialog.styles";
|
||||||
|
|
||||||
@@ -35,16 +26,8 @@ const stripePromise = stripePublishableKey
|
|||||||
? loadStripe(stripePublishableKey)
|
? loadStripe(stripePublishableKey)
|
||||||
: null;
|
: null;
|
||||||
|
|
||||||
type ExpressAvailabilityValue = boolean | { available: boolean } | undefined;
|
|
||||||
|
|
||||||
function isExpressMethodAvailable(value: ExpressAvailabilityValue): boolean {
|
|
||||||
return value === true || (typeof value === "object" && value.available);
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface StripePaymentDialogProps {
|
export interface StripePaymentDialogProps {
|
||||||
clientSecret: string;
|
clientSecret: string;
|
||||||
customerSessionClientSecret?: string | null;
|
|
||||||
savedPaymentMethodsEnabled?: boolean;
|
|
||||||
returnPath?: string;
|
returnPath?: string;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
onConfirmed?: () => void;
|
onConfirmed?: () => void;
|
||||||
@@ -52,19 +35,12 @@ export interface StripePaymentDialogProps {
|
|||||||
|
|
||||||
export function StripePaymentDialog({
|
export function StripePaymentDialog({
|
||||||
clientSecret,
|
clientSecret,
|
||||||
customerSessionClientSecret = null,
|
|
||||||
savedPaymentMethodsEnabled = false,
|
|
||||||
returnPath = ROUTES.subscription + "/success",
|
returnPath = ROUTES.subscription + "/success",
|
||||||
onClose,
|
onClose,
|
||||||
onConfirmed,
|
onConfirmed,
|
||||||
}: StripePaymentDialogProps) {
|
}: StripePaymentDialogProps) {
|
||||||
const titleId = useId();
|
const titleId = useId();
|
||||||
const descriptionId = useId();
|
const descriptionId = useId();
|
||||||
const savedCardClientSecret = getStripeCustomerSessionClientSecret({
|
|
||||||
provider: "stripe",
|
|
||||||
customerSessionClientSecret,
|
|
||||||
savedPaymentMethodsEnabled,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!stripePromise) {
|
if (!stripePromise) {
|
||||||
return (
|
return (
|
||||||
@@ -124,10 +100,6 @@ export function StripePaymentDialog({
|
|||||||
stripe={stripePromise}
|
stripe={stripePromise}
|
||||||
options={{
|
options={{
|
||||||
clientSecret,
|
clientSecret,
|
||||||
locale: "en",
|
|
||||||
...(savedCardClientSecret
|
|
||||||
? { customerSessionClientSecret: savedCardClientSecret }
|
|
||||||
: {}),
|
|
||||||
appearance: {
|
appearance: {
|
||||||
theme: "stripe",
|
theme: "stripe",
|
||||||
variables: {
|
variables: {
|
||||||
@@ -160,20 +132,6 @@ function StripePaymentForm({
|
|||||||
const elements = useElements();
|
const elements = useElements();
|
||||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
const submittingRef = useRef(false);
|
|
||||||
const [hasExpressPaymentMethods, setHasExpressPaymentMethods] = useState<
|
|
||||||
boolean | null
|
|
||||||
>(null);
|
|
||||||
const [expressMaxColumns, setExpressMaxColumns] = useState(1);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (typeof window.matchMedia !== "function") return;
|
|
||||||
const query = window.matchMedia("(min-width: 640px)");
|
|
||||||
const updateColumns = () => setExpressMaxColumns(query.matches ? 2 : 1);
|
|
||||||
updateColumns();
|
|
||||||
query.addEventListener("change", updateColumns);
|
|
||||||
return () => query.removeEventListener("change", updateColumns);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleLoadError = (event: Parameters<
|
const handleLoadError = (event: Parameters<
|
||||||
NonNullable<React.ComponentProps<typeof PaymentElement>["onLoadError"]>
|
NonNullable<React.ComponentProps<typeof PaymentElement>["onLoadError"]>
|
||||||
@@ -192,118 +150,38 @@ function StripePaymentForm({
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const updateExpressAvailability = (
|
const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
|
||||||
availablePaymentMethods:
|
event.preventDefault();
|
||||||
| AvailablePaymentMethods
|
if (!stripe || !elements || isSubmitting) return;
|
||||||
| {
|
|
||||||
applePay?: { available: boolean };
|
|
||||||
googlePay?: { available: boolean };
|
|
||||||
link?: { available: boolean };
|
|
||||||
paypal?: { available: boolean };
|
|
||||||
amazonPay?: { available: boolean };
|
|
||||||
klarna?: { available: boolean };
|
|
||||||
}
|
|
||||||
| undefined,
|
|
||||||
) => {
|
|
||||||
const availability = {
|
|
||||||
applePay: isExpressMethodAvailable(availablePaymentMethods?.applePay),
|
|
||||||
googlePay: isExpressMethodAvailable(availablePaymentMethods?.googlePay),
|
|
||||||
link: isExpressMethodAvailable(availablePaymentMethods?.link),
|
|
||||||
paypal: isExpressMethodAvailable(availablePaymentMethods?.paypal),
|
|
||||||
amazonPay: isExpressMethodAvailable(availablePaymentMethods?.amazonPay),
|
|
||||||
klarna: isExpressMethodAvailable(availablePaymentMethods?.klarna),
|
|
||||||
};
|
|
||||||
setHasExpressPaymentMethods(Object.values(availability).some(Boolean));
|
|
||||||
const browser = BrowserDetector.isFacebookInAppBrowser()
|
|
||||||
? "facebook"
|
|
||||||
: BrowserDetector.getBrowserName() || "unknown";
|
|
||||||
const platform = PlatformDetector.getPlatform();
|
|
||||||
const metadata = {
|
|
||||||
browser,
|
|
||||||
platform,
|
|
||||||
availablePaymentMethods: availability,
|
|
||||||
};
|
|
||||||
log.info(
|
|
||||||
"[stripe-payment-dialog] Express Checkout availability",
|
|
||||||
metadata,
|
|
||||||
);
|
|
||||||
behaviorAnalytics.elementClick(
|
|
||||||
"stripe.express_checkout_availability",
|
|
||||||
"Stripe Express Checkout availability",
|
|
||||||
metadata,
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleExpressLoadError = (event: Parameters<
|
|
||||||
NonNullable<
|
|
||||||
React.ComponentProps<typeof ExpressCheckoutElement>["onLoadError"]
|
|
||||||
>
|
|
||||||
>[0]) => {
|
|
||||||
setHasExpressPaymentMethods(false);
|
|
||||||
log.warn("[stripe-payment-dialog] Express Checkout load failed", {
|
|
||||||
type: event.error.type,
|
|
||||||
code: event.error.code,
|
|
||||||
message: event.error.message,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const confirmPayment = async (
|
|
||||||
options: {
|
|
||||||
submitPaymentElement: boolean;
|
|
||||||
expressEvent?: StripeExpressCheckoutElementConfirmEvent;
|
|
||||||
},
|
|
||||||
) => {
|
|
||||||
if (!stripe || !elements || submittingRef.current) return;
|
|
||||||
|
|
||||||
submittingRef.current = true;
|
|
||||||
setIsSubmitting(true);
|
setIsSubmitting(true);
|
||||||
setErrorMessage(null);
|
setErrorMessage(null);
|
||||||
|
|
||||||
if (options.submitPaymentElement) {
|
const { error: submitError } = await elements.submit();
|
||||||
let submitError: unknown;
|
if (submitError) {
|
||||||
try {
|
setErrorMessage(
|
||||||
({ error: submitError } = await elements.submit());
|
ExceptionHandler.message(submitError, "Please check your payment info."),
|
||||||
} catch (error) {
|
);
|
||||||
submitError = error;
|
setIsSubmitting(false);
|
||||||
}
|
return;
|
||||||
if (submitError) {
|
|
||||||
setErrorMessage(
|
|
||||||
ExceptionHandler.message(
|
|
||||||
submitError,
|
|
||||||
"Please check your payment info.",
|
|
||||||
),
|
|
||||||
);
|
|
||||||
submittingRef.current = false;
|
|
||||||
setIsSubmitting(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const returnUrl = new URL(
|
const returnUrl = new URL(
|
||||||
returnPath ?? ROUTES.subscription + "/success",
|
returnPath ?? ROUTES.subscription + "/success",
|
||||||
window.location.origin,
|
window.location.origin,
|
||||||
);
|
);
|
||||||
let confirmationError: unknown;
|
const { error } = await stripe.confirmPayment({
|
||||||
try {
|
elements,
|
||||||
({ error: confirmationError } = await stripe.confirmPayment({
|
confirmParams: {
|
||||||
elements,
|
return_url: returnUrl.toString(),
|
||||||
confirmParams: {
|
},
|
||||||
return_url: returnUrl.toString(),
|
redirect: "if_required",
|
||||||
},
|
});
|
||||||
redirect: "if_required",
|
|
||||||
}));
|
|
||||||
} catch (error) {
|
|
||||||
confirmationError = error;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (confirmationError) {
|
if (error) {
|
||||||
const message = ExceptionHandler.message(
|
setErrorMessage(
|
||||||
confirmationError,
|
ExceptionHandler.message(error, "Payment confirmation failed."),
|
||||||
"Payment confirmation failed.",
|
|
||||||
);
|
);
|
||||||
setErrorMessage(message);
|
|
||||||
options.expressEvent?.paymentFailed({ reason: "fail", message });
|
|
||||||
submittingRef.current = false;
|
|
||||||
setIsSubmitting(false);
|
setIsSubmitting(false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -311,75 +189,9 @@ function StripePaymentForm({
|
|||||||
onConfirmed?.();
|
onConfirmed?.();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
|
|
||||||
event.preventDefault();
|
|
||||||
await confirmPayment({ submitPaymentElement: true });
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form className={styles.form} onSubmit={handleSubmit}>
|
<form className={styles.form} onSubmit={handleSubmit}>
|
||||||
<section
|
<PaymentElement onLoadError={handleLoadError} />
|
||||||
className={styles.expressSection}
|
|
||||||
hidden={hasExpressPaymentMethods === false}
|
|
||||||
aria-label="Express payment methods"
|
|
||||||
>
|
|
||||||
<ExpressCheckoutElement
|
|
||||||
options={{
|
|
||||||
paymentMethodOrder: [
|
|
||||||
"link",
|
|
||||||
"paypal",
|
|
||||||
"amazon_pay",
|
|
||||||
"klarna",
|
|
||||||
],
|
|
||||||
paymentMethods: {
|
|
||||||
applePay: "never",
|
|
||||||
googlePay: "never",
|
|
||||||
link: "auto",
|
|
||||||
paypal: "auto",
|
|
||||||
amazonPay: "auto",
|
|
||||||
klarna: "auto",
|
|
||||||
},
|
|
||||||
layout: {
|
|
||||||
maxColumns: expressMaxColumns,
|
|
||||||
maxRows: 6,
|
|
||||||
overflow: "never",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
onReady={(event) =>
|
|
||||||
updateExpressAvailability(event.availablePaymentMethods)
|
|
||||||
}
|
|
||||||
onAvailablePaymentMethodsChange={(event) =>
|
|
||||||
updateExpressAvailability(event.paymentMethods)
|
|
||||||
}
|
|
||||||
onLoadError={handleExpressLoadError}
|
|
||||||
onConfirm={(event) =>
|
|
||||||
void confirmPayment({
|
|
||||||
submitPaymentElement: false,
|
|
||||||
expressEvent: event,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</section>
|
|
||||||
<section
|
|
||||||
className={styles.cardSection}
|
|
||||||
aria-labelledby="payment-method-title"
|
|
||||||
>
|
|
||||||
<h3 id="payment-method-title" className={styles.cardTitle}>
|
|
||||||
Choose a payment method
|
|
||||||
</h3>
|
|
||||||
<PaymentElement
|
|
||||||
options={{
|
|
||||||
layout: { type: "accordion", defaultCollapsed: true },
|
|
||||||
paymentMethodOrder: ["wechat_pay", "alipay", "card"],
|
|
||||||
wallets: {
|
|
||||||
applePay: "auto",
|
|
||||||
googlePay: "auto",
|
|
||||||
link: "never",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
onLoadError={handleLoadError}
|
|
||||||
/>
|
|
||||||
</section>
|
|
||||||
{errorMessage ? (
|
{errorMessage ? (
|
||||||
<p
|
<p
|
||||||
role="alert"
|
role="alert"
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import { type Dispatch, useEffect, useRef, useState } from "react";
|
|||||||
|
|
||||||
import {
|
import {
|
||||||
getPaymentUrl,
|
getPaymentUrl,
|
||||||
getStripeCustomerSessionClientSecret,
|
|
||||||
getStripeClientSecret,
|
getStripeClientSecret,
|
||||||
isEzpayPayment,
|
isEzpayPayment,
|
||||||
launchEzpayRedirect,
|
launchEzpayRedirect,
|
||||||
@@ -62,8 +61,6 @@ export interface PaymentLaunchFlow {
|
|||||||
shouldShowQrisDialog: boolean;
|
shouldShowQrisDialog: boolean;
|
||||||
shouldShowStripeDialog: boolean;
|
shouldShowStripeDialog: boolean;
|
||||||
stripeClientSecret: string | null;
|
stripeClientSecret: string | null;
|
||||||
stripeCustomerSessionClientSecret: string | null;
|
|
||||||
savedPaymentMethodsEnabled: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface QrisPaymentDetails {
|
export interface QrisPaymentDetails {
|
||||||
@@ -170,9 +167,6 @@ export function usePaymentLaunchFlow({
|
|||||||
const stripeClientSecret = payment.payParams
|
const stripeClientSecret = payment.payParams
|
||||||
? getStripeClientSecret(payment.payParams)
|
? getStripeClientSecret(payment.payParams)
|
||||||
: null;
|
: null;
|
||||||
const stripeCustomerSessionClientSecret = payment.payParams
|
|
||||||
? getStripeCustomerSessionClientSecret(payment.payParams)
|
|
||||||
: null;
|
|
||||||
const ezpayLaunchTarget =
|
const ezpayLaunchTarget =
|
||||||
payment.payParams && isEzpayPayment(payment.payParams)
|
payment.payParams && isEzpayPayment(payment.payParams)
|
||||||
? resolveEzpayLaunchTarget(payment.payParams)
|
? resolveEzpayLaunchTarget(payment.payParams)
|
||||||
@@ -410,8 +404,5 @@ export function usePaymentLaunchFlow({
|
|||||||
shouldShowQrisDialog,
|
shouldShowQrisDialog,
|
||||||
shouldShowStripeDialog,
|
shouldShowStripeDialog,
|
||||||
stripeClientSecret,
|
stripeClientSecret,
|
||||||
stripeCustomerSessionClientSecret,
|
|
||||||
savedPaymentMethodsEnabled:
|
|
||||||
stripeCustomerSessionClientSecret !== null,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -22,7 +22,6 @@ export interface UsePaymentRouteFlowInput {
|
|||||||
characterId?: string;
|
characterId?: string;
|
||||||
initialCategory?: string | null;
|
initialCategory?: string | null;
|
||||||
initialPlanId?: string | null;
|
initialPlanId?: string | null;
|
||||||
initialAutoRenew?: boolean | null;
|
|
||||||
commercialOfferId?: string | null;
|
commercialOfferId?: string | null;
|
||||||
resumeOrderId?: string | null;
|
resumeOrderId?: string | null;
|
||||||
chatActionId?: string | null;
|
chatActionId?: string | null;
|
||||||
@@ -45,7 +44,6 @@ export function usePaymentRouteFlow({
|
|||||||
characterId,
|
characterId,
|
||||||
initialCategory = null,
|
initialCategory = null,
|
||||||
initialPlanId = null,
|
initialPlanId = null,
|
||||||
initialAutoRenew = null,
|
|
||||||
commercialOfferId = null,
|
commercialOfferId = null,
|
||||||
resumeOrderId = null,
|
resumeOrderId = null,
|
||||||
chatActionId = null,
|
chatActionId = null,
|
||||||
@@ -59,7 +57,6 @@ export function usePaymentRouteFlow({
|
|||||||
characterId ?? "",
|
characterId ?? "",
|
||||||
initialCategory ?? "",
|
initialCategory ?? "",
|
||||||
initialPlanId ?? "",
|
initialPlanId ?? "",
|
||||||
initialAutoRenew === null ? "" : String(initialAutoRenew),
|
|
||||||
commercialOfferId ?? "",
|
commercialOfferId ?? "",
|
||||||
chatActionId ?? "",
|
chatActionId ?? "",
|
||||||
].join(":");
|
].join(":");
|
||||||
@@ -81,9 +78,6 @@ export function usePaymentRouteFlow({
|
|||||||
...(characterId ? { characterId } : {}),
|
...(characterId ? { characterId } : {}),
|
||||||
...(initialCategory ? { category: initialCategory } : {}),
|
...(initialCategory ? { category: initialCategory } : {}),
|
||||||
...(initialPlanId ? { planId: initialPlanId } : {}),
|
...(initialPlanId ? { planId: initialPlanId } : {}),
|
||||||
...(initialAutoRenew === null
|
|
||||||
? {}
|
|
||||||
: { autoRenew: initialAutoRenew }),
|
|
||||||
...(commercialOfferId ? { commercialOfferId } : {}),
|
...(commercialOfferId ? { commercialOfferId } : {}),
|
||||||
...(chatActionId ? { chatActionId } : {}),
|
...(chatActionId ? { chatActionId } : {}),
|
||||||
});
|
});
|
||||||
@@ -95,7 +89,6 @@ export function usePaymentRouteFlow({
|
|||||||
chatActionId,
|
chatActionId,
|
||||||
initialCategory,
|
initialCategory,
|
||||||
initialPlanId,
|
initialPlanId,
|
||||||
initialAutoRenew,
|
|
||||||
initialPayChannel,
|
initialPayChannel,
|
||||||
paymentDispatch,
|
paymentDispatch,
|
||||||
]);
|
]);
|
||||||
|
|||||||
@@ -5,7 +5,6 @@ import { useRouter } from "next/navigation";
|
|||||||
|
|
||||||
import {
|
import {
|
||||||
persistExternalEntryPayload,
|
persistExternalEntryPayload,
|
||||||
resolveCheckoutIntentDestination,
|
|
||||||
resolveExternalEntryDestination,
|
resolveExternalEntryDestination,
|
||||||
resolveExternalEntryPromotionType,
|
resolveExternalEntryPromotionType,
|
||||||
resolveExternalEntryTarget,
|
resolveExternalEntryTarget,
|
||||||
@@ -23,7 +22,6 @@ import {
|
|||||||
import { Logger } from "@/utils/logger";
|
import { Logger } from "@/utils/logger";
|
||||||
import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
|
import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
|
||||||
import { consumeTopUpHandoff } from "@/lib/auth/top_up_handoff";
|
import { consumeTopUpHandoff } from "@/lib/auth/top_up_handoff";
|
||||||
import { consumeCheckoutHandoff } from "@/lib/auth/checkout_handoff";
|
|
||||||
import { Result } from "@/utils/result";
|
import { Result } from "@/utils/result";
|
||||||
import {
|
import {
|
||||||
isFavoriteEntryRequest,
|
isFavoriteEntryRequest,
|
||||||
@@ -63,9 +61,6 @@ export default function ExternalEntryPersist({
|
|||||||
const [hasPersisted, setHasPersisted] = useState(false);
|
const [hasPersisted, setHasPersisted] = useState(false);
|
||||||
const [handoffError, setHandoffError] = useState<string | null>(null);
|
const [handoffError, setHandoffError] = useState<string | null>(null);
|
||||||
const [handoffCompleted, setHandoffCompleted] = useState(false);
|
const [handoffCompleted, setHandoffCompleted] = useState(false);
|
||||||
const [checkoutDestination, setCheckoutDestination] = useState<string | null>(
|
|
||||||
null,
|
|
||||||
);
|
|
||||||
const hasNavigatedRef = useRef(false);
|
const hasNavigatedRef = useRef(false);
|
||||||
const handoffStartedRef = useRef(false);
|
const handoffStartedRef = useRef(false);
|
||||||
const targetRoute = resolveExternalEntryTarget({ target });
|
const targetRoute = resolveExternalEntryTarget({ target });
|
||||||
@@ -76,14 +71,11 @@ export default function ExternalEntryPersist({
|
|||||||
mode,
|
mode,
|
||||||
promotionType,
|
promotionType,
|
||||||
});
|
});
|
||||||
const normalizedTarget = target?.trim().toLowerCase() ?? "";
|
const isTopUpHandoff = targetRoute === ROUTES.subscription;
|
||||||
const isTopUpHandoff = normalizedTarget === "topup";
|
|
||||||
const isCheckoutHandoff = normalizedTarget === "checkout";
|
|
||||||
const isLoginHandoff = isTopUpHandoff || isCheckoutHandoff;
|
|
||||||
const displayedHandoffError =
|
const displayedHandoffError =
|
||||||
handoffError ??
|
handoffError ??
|
||||||
(isLoginHandoff && !hasValue(handoffToken)
|
(isTopUpHandoff && !hasValue(handoffToken)
|
||||||
? "This checkout link is invalid. Please return and request a new link."
|
? "This top-up link is invalid. Please request a new link in Messenger."
|
||||||
: null);
|
: null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -136,7 +128,7 @@ export default function ExternalEntryPersist({
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (hasNavigatedRef.current || !hasPersisted) return;
|
if (hasNavigatedRef.current || !hasPersisted) return;
|
||||||
|
|
||||||
if (isLoginHandoff) {
|
if (isTopUpHandoff) {
|
||||||
if (!authState.hasInitialized || authState.isLoading) return;
|
if (!authState.hasInitialized || authState.isLoading) return;
|
||||||
if (handoffCompleted) {
|
if (handoffCompleted) {
|
||||||
if (
|
if (
|
||||||
@@ -146,60 +138,25 @@ export default function ExternalEntryPersist({
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
hasNavigatedRef.current = true;
|
hasNavigatedRef.current = true;
|
||||||
router.replace(checkoutDestination ?? destination);
|
router.replace(destination);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (handoffStartedRef.current) return;
|
if (handoffStartedRef.current) return;
|
||||||
if (!hasValue(handoffToken)) return;
|
if (!hasValue(handoffToken)) return;
|
||||||
handoffStartedRef.current = true;
|
handoffStartedRef.current = true;
|
||||||
void (async () => {
|
void (async () => {
|
||||||
if (isCheckoutHandoff) {
|
const result = await consumeTopUpHandoff(handoffToken);
|
||||||
const result = await consumeCheckoutHandoff(handoffToken);
|
if (Result.isErr(result)) {
|
||||||
if (Result.isErr(result)) {
|
log.warn("[ExternalEntryPersist] top-up handoff failed", result.error);
|
||||||
log.warn(
|
|
||||||
"[ExternalEntryPersist] checkout handoff failed",
|
|
||||||
result.error,
|
|
||||||
);
|
|
||||||
window.history.replaceState(
|
|
||||||
window.history.state,
|
|
||||||
"",
|
|
||||||
"/external-entry?target=checkout",
|
|
||||||
);
|
|
||||||
setHandoffError(
|
|
||||||
"This checkout link is invalid, expired, or already used. Please return and request a new link.",
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
window.history.replaceState(
|
|
||||||
window.history.state,
|
|
||||||
"",
|
|
||||||
"/external-entry?target=checkout",
|
|
||||||
);
|
|
||||||
setCheckoutDestination(
|
|
||||||
resolveCheckoutIntentDestination(result.data, character),
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
const result = await consumeTopUpHandoff(handoffToken);
|
|
||||||
if (Result.isErr(result)) {
|
|
||||||
log.warn(
|
|
||||||
"[ExternalEntryPersist] top-up handoff failed",
|
|
||||||
result.error,
|
|
||||||
);
|
|
||||||
window.history.replaceState(
|
|
||||||
window.history.state,
|
|
||||||
"",
|
|
||||||
"/external-entry?target=topup",
|
|
||||||
);
|
|
||||||
setHandoffError(
|
|
||||||
"This top-up link is invalid or has expired. Please request a new link in Messenger.",
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
window.history.replaceState(
|
window.history.replaceState(
|
||||||
window.history.state,
|
window.history.state,
|
||||||
"",
|
"",
|
||||||
"/external-entry?target=topup",
|
"/external-entry?target=topup",
|
||||||
);
|
);
|
||||||
|
setHandoffError(
|
||||||
|
"This top-up link is invalid or has expired. Please request a new link in Messenger.",
|
||||||
|
);
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
setHandoffCompleted(true);
|
setHandoffCompleted(true);
|
||||||
authDispatch({ type: "AuthInit" });
|
authDispatch({ type: "AuthInit" });
|
||||||
@@ -234,12 +191,9 @@ export default function ExternalEntryPersist({
|
|||||||
authState.loginStatus,
|
authState.loginStatus,
|
||||||
character,
|
character,
|
||||||
destination,
|
destination,
|
||||||
checkoutDestination,
|
|
||||||
hasPersisted,
|
hasPersisted,
|
||||||
handoffCompleted,
|
handoffCompleted,
|
||||||
handoffToken,
|
handoffToken,
|
||||||
isCheckoutHandoff,
|
|
||||||
isLoginHandoff,
|
|
||||||
isTopUpHandoff,
|
isTopUpHandoff,
|
||||||
psid,
|
psid,
|
||||||
router,
|
router,
|
||||||
|
|||||||
@@ -8,7 +8,6 @@
|
|||||||
* `/external-entry?target=tip`
|
* `/external-entry?target=tip`
|
||||||
* `/external-entry?target=private-zone&character=nayeli`
|
* `/external-entry?target=private-zone&character=nayeli`
|
||||||
* `/external-entry?target=topup&handoffToken=<opaque-token>`
|
* `/external-entry?target=topup&handoffToken=<opaque-token>`
|
||||||
* `/external-entry?target=checkout&handoffToken=<opaque-token>`
|
|
||||||
*
|
*
|
||||||
* 页面不直接 `redirect()`,而是把数据交给 Client 组件先写入本地存储,
|
* 页面不直接 `redirect()`,而是把数据交给 Client 组件先写入本地存储,
|
||||||
* 再通过 `router.replace()` 清理 URL 并跳转到最终页面。
|
* 再通过 `router.replace()` 清理 URL 并跳转到最终页面。
|
||||||
|
|||||||
@@ -51,7 +51,6 @@ const mocks = vi.hoisted(() => {
|
|||||||
commercialOffer: null,
|
commercialOffer: null,
|
||||||
selectedPlanId: "vip_monthly",
|
selectedPlanId: "vip_monthly",
|
||||||
payChannel: "stripe" as const,
|
payChannel: "stripe" as const,
|
||||||
autoRenew: true,
|
|
||||||
agreed: true,
|
agreed: true,
|
||||||
currentOrderId: null,
|
currentOrderId: null,
|
||||||
isCreatingOrder: false,
|
isCreatingOrder: false,
|
||||||
@@ -101,9 +100,7 @@ vi.mock("@/hooks/use-has-hydrated", () => ({
|
|||||||
}));
|
}));
|
||||||
|
|
||||||
vi.mock("@/stores/user/user-context", () => ({
|
vi.mock("@/stores/user/user-context", () => ({
|
||||||
useUserState: () => ({
|
useUserState: () => ({ currentUser: { countryCode: "ID" } }),
|
||||||
currentUser: { id: "user-renewal-1", countryCode: "ID" },
|
|
||||||
}),
|
|
||||||
}));
|
}));
|
||||||
|
|
||||||
vi.mock("@/providers/character-catalog-provider", () => ({
|
vi.mock("@/providers/character-catalog-provider", () => ({
|
||||||
@@ -167,25 +164,26 @@ vi.mock("../components", () => ({
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
SubscriptionCheckoutButton: ({
|
SubscriptionCheckoutButton: ({ disabled }: { disabled: boolean }) => (
|
||||||
disabled,
|
<button type="button" data-testid="checkout" disabled={disabled}>
|
||||||
renewalPlan,
|
|
||||||
renewalConsentSubjectId,
|
|
||||||
}: {
|
|
||||||
disabled: boolean;
|
|
||||||
renewalPlan: { id: string } | null;
|
|
||||||
renewalConsentSubjectId: string | null;
|
|
||||||
}) => (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
data-testid="checkout"
|
|
||||||
data-renewal-plan={renewalPlan?.id ?? ""}
|
|
||||||
data-renewal-subject={renewalConsentSubjectId ?? ""}
|
|
||||||
disabled={disabled}
|
|
||||||
>
|
|
||||||
Pay and Top Up
|
Pay and Top Up
|
||||||
</button>
|
</button>
|
||||||
),
|
),
|
||||||
|
SubscriptionRenewalConfirmationDialog: ({
|
||||||
|
open,
|
||||||
|
onCancel,
|
||||||
|
onConfirm,
|
||||||
|
}: {
|
||||||
|
open: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
onConfirm: () => void;
|
||||||
|
}) =>
|
||||||
|
open ? (
|
||||||
|
<div role="dialog">
|
||||||
|
<button type="button" onClick={onCancel}>Cancel</button>
|
||||||
|
<button type="button" onClick={onConfirm}>Confirm</button>
|
||||||
|
</div>
|
||||||
|
) : null,
|
||||||
SubscriptionPaymentIssueDialog: () => null,
|
SubscriptionPaymentIssueDialog: () => null,
|
||||||
SubscriptionPaymentSuccessDialog: () => null,
|
SubscriptionPaymentSuccessDialog: () => null,
|
||||||
}));
|
}));
|
||||||
@@ -220,30 +218,66 @@ describe("SubscriptionScreen payment selection flow", () => {
|
|||||||
container.remove();
|
container.remove();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("allows immediate checkout and changes VIP plans without opening renewal confirmation", () => {
|
it("confirms VIP selection before enabling the separate checkout button", () => {
|
||||||
act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />));
|
act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />));
|
||||||
const checkout = container.querySelector<HTMLButtonElement>(
|
const checkout = container.querySelector<HTMLButtonElement>(
|
||||||
'[data-testid="checkout"]',
|
'[data-testid="checkout"]',
|
||||||
);
|
);
|
||||||
expect(checkout?.disabled).toBe(false);
|
expect(checkout?.disabled).toBe(true);
|
||||||
expect(checkout?.dataset.renewalPlan).toBe("vip_monthly");
|
|
||||||
expect(checkout?.dataset.renewalSubject).toBe("user-renewal-1");
|
|
||||||
|
|
||||||
act(() => clickButton(container, "vip_monthly"));
|
act(() => clickButton(container, "vip_monthly"));
|
||||||
|
expect(container.querySelector('[role="dialog"]')).not.toBeNull();
|
||||||
|
expect(mocks.paymentDispatch).not.toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({ type: "PaymentCreateOrderSubmitted" }),
|
||||||
|
);
|
||||||
|
|
||||||
|
act(() => clickButton(container, "Confirm"));
|
||||||
expect(mocks.paymentDispatch).toHaveBeenCalledWith({
|
expect(mocks.paymentDispatch).toHaveBeenCalledWith({
|
||||||
type: "PaymentPlanSelected",
|
type: "PaymentPlanSelected",
|
||||||
planId: "vip_monthly",
|
planId: "vip_monthly",
|
||||||
});
|
});
|
||||||
|
expect(mocks.paymentDispatch).not.toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({ type: "PaymentCreateOrderSubmitted" }),
|
||||||
|
);
|
||||||
|
expect(checkout?.disabled).toBe(false);
|
||||||
|
|
||||||
|
act(() => clickButton(container, "vip_monthly"));
|
||||||
expect(container.querySelector('[role="dialog"]')).toBeNull();
|
expect(container.querySelector('[role="dialog"]')).toBeNull();
|
||||||
|
|
||||||
act(() => clickButton(container, "vip_quarterly"));
|
act(() => clickButton(container, "vip_quarterly"));
|
||||||
|
expect(container.querySelector('[role="dialog"]')).not.toBeNull();
|
||||||
|
expect(mocks.payment.selectedPlanId).toBe("vip_monthly");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("keeps the original selection when VIP confirmation is cancelled", () => {
|
||||||
|
act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />));
|
||||||
|
act(() => clickButton(container, "vip_quarterly"));
|
||||||
|
expect(container.querySelector('[role="dialog"]')).not.toBeNull();
|
||||||
|
|
||||||
|
act(() => clickButton(container, "Cancel"));
|
||||||
|
|
||||||
expect(container.querySelector('[role="dialog"]')).toBeNull();
|
expect(container.querySelector('[role="dialog"]')).toBeNull();
|
||||||
expect(mocks.paymentDispatch).toHaveBeenCalledWith({
|
expect(mocks.payment.selectedPlanId).toBe("vip_monthly");
|
||||||
|
expect(mocks.paymentDispatch).not.toHaveBeenCalledWith({
|
||||||
type: "PaymentPlanSelected",
|
type: "PaymentPlanSelected",
|
||||||
planId: "vip_quarterly",
|
planId: "vip_quarterly",
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("requires VIP confirmation again after the page is remounted", () => {
|
||||||
|
act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />));
|
||||||
|
act(() => clickButton(container, "vip_monthly"));
|
||||||
|
act(() => clickButton(container, "Confirm"));
|
||||||
|
expect(container.querySelector('[role="dialog"]')).toBeNull();
|
||||||
|
|
||||||
|
act(() => root.unmount());
|
||||||
|
root = createRoot(container);
|
||||||
|
act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />));
|
||||||
|
act(() => clickButton(container, "vip_monthly"));
|
||||||
|
|
||||||
|
expect(container.querySelector('[role="dialog"]')).not.toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
it("selects a coin package without showing the renewal dialog", () => {
|
it("selects a coin package without showing the renewal dialog", () => {
|
||||||
act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />));
|
act(() => root.render(<SubscriptionScreen sourceCharacterSlug="elio" />));
|
||||||
act(() => clickButton(container, "coin_1000"));
|
act(() => clickButton(container, "coin_1000"));
|
||||||
|
|||||||
@@ -7,9 +7,11 @@ import {
|
|||||||
} from "@/data/schemas/payment";
|
} from "@/data/schemas/payment";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
canCheckoutSubscriptionPlan,
|
||||||
findSelectedSubscriptionPlan,
|
findSelectedSubscriptionPlan,
|
||||||
getDefaultSubscriptionPlanId,
|
getDefaultSubscriptionPlanId,
|
||||||
getFirstRechargeOfferView,
|
getFirstRechargeOfferView,
|
||||||
|
requiresVipPlanConfirmation,
|
||||||
toCoinsOfferPlanViews,
|
toCoinsOfferPlanViews,
|
||||||
toVipOfferPlanViews,
|
toVipOfferPlanViews,
|
||||||
} from "../subscription-screen.helpers";
|
} from "../subscription-screen.helpers";
|
||||||
@@ -278,4 +280,85 @@ describe("subscription screen helpers", () => {
|
|||||||
).toBeNull();
|
).toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("requires confirmation for each unconfirmed VIP plan", () => {
|
||||||
|
const vipPlans = [
|
||||||
|
{
|
||||||
|
id: "vip_monthly",
|
||||||
|
title: "Monthly",
|
||||||
|
price: "19.90",
|
||||||
|
currency: "usd",
|
||||||
|
originalPrice: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "vip_quarterly",
|
||||||
|
title: "Quarterly",
|
||||||
|
price: "49.90",
|
||||||
|
currency: "usd",
|
||||||
|
originalPrice: "",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
expect(
|
||||||
|
requiresVipPlanConfirmation({
|
||||||
|
planId: "vip_monthly",
|
||||||
|
vipPlans,
|
||||||
|
confirmedVipPlanIds: new Set(),
|
||||||
|
}),
|
||||||
|
).toBe(true);
|
||||||
|
expect(
|
||||||
|
requiresVipPlanConfirmation({
|
||||||
|
planId: "vip_monthly",
|
||||||
|
vipPlans,
|
||||||
|
confirmedVipPlanIds: new Set(["vip_monthly"]),
|
||||||
|
}),
|
||||||
|
).toBe(false);
|
||||||
|
expect(
|
||||||
|
requiresVipPlanConfirmation({
|
||||||
|
planId: "coin_1000",
|
||||||
|
vipPlans,
|
||||||
|
confirmedVipPlanIds: new Set(),
|
||||||
|
}),
|
||||||
|
).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("allows checkout only after the selected VIP plan is confirmed", () => {
|
||||||
|
const vipPlans = [
|
||||||
|
{
|
||||||
|
id: "vip_monthly",
|
||||||
|
title: "Monthly",
|
||||||
|
price: "19.90",
|
||||||
|
currency: "usd",
|
||||||
|
originalPrice: "",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
expect(
|
||||||
|
canCheckoutSubscriptionPlan({
|
||||||
|
selectedPlanId: "vip_monthly",
|
||||||
|
vipPlans,
|
||||||
|
confirmedVipPlanIds: new Set(),
|
||||||
|
}),
|
||||||
|
).toBe(false);
|
||||||
|
expect(
|
||||||
|
canCheckoutSubscriptionPlan({
|
||||||
|
selectedPlanId: "vip_monthly",
|
||||||
|
vipPlans,
|
||||||
|
confirmedVipPlanIds: new Set(["vip_monthly"]),
|
||||||
|
}),
|
||||||
|
).toBe(true);
|
||||||
|
expect(
|
||||||
|
canCheckoutSubscriptionPlan({
|
||||||
|
selectedPlanId: "coin_1000",
|
||||||
|
vipPlans,
|
||||||
|
confirmedVipPlanIds: new Set(),
|
||||||
|
}),
|
||||||
|
).toBe(true);
|
||||||
|
expect(
|
||||||
|
canCheckoutSubscriptionPlan({
|
||||||
|
selectedPlanId: "",
|
||||||
|
vipPlans,
|
||||||
|
confirmedVipPlanIds: new Set(),
|
||||||
|
}),
|
||||||
|
).toBe(false);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,244 +0,0 @@
|
|||||||
import { act } from "react";
|
|
||||||
import { createRoot, type Root } from "react-dom/client";
|
|
||||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
||||||
|
|
||||||
const mocks = vi.hoisted(() => ({
|
|
||||||
dispatch: vi.fn(),
|
|
||||||
handleQrisResume: vi.fn(),
|
|
||||||
hasHiddenQrisPayment: false,
|
|
||||||
resetLaunchState: vi.fn(),
|
|
||||||
payment: {
|
|
||||||
selectedPlanId: "vip_monthly",
|
|
||||||
autoRenew: true,
|
|
||||||
payChannel: "stripe" as "stripe" | "ezpay",
|
|
||||||
commercialOfferId: null,
|
|
||||||
chatActionId: null,
|
|
||||||
currentOrderId: null,
|
|
||||||
errorMessage: null,
|
|
||||||
isCreatingOrder: false,
|
|
||||||
isPollingOrder: false,
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock("@/stores/payment/payment-context", () => ({
|
|
||||||
usePaymentState: () => mocks.payment,
|
|
||||||
usePaymentDispatch: () => mocks.dispatch,
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock("@/app/_hooks/use-payment-launch-flow", () => ({
|
|
||||||
usePaymentLaunchFlow: () => ({
|
|
||||||
handleQrisResume: mocks.handleQrisResume,
|
|
||||||
hasHiddenQrisPayment: mocks.hasHiddenQrisPayment,
|
|
||||||
resetLaunchState: mocks.resetLaunchState,
|
|
||||||
launch: {},
|
|
||||||
}),
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock("@/app/_components/payment/payment-launch-dialogs", () => ({
|
|
||||||
PaymentLaunchDialogs: () => null,
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock("@/app/_components/payment/external-browser-checkout-button", () => ({
|
|
||||||
ExternalBrowserCheckoutButton: () => null,
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock("../subscription-cta-button", () => ({
|
|
||||||
SubscriptionCtaButton: ({
|
|
||||||
children,
|
|
||||||
disabled,
|
|
||||||
onClick,
|
|
||||||
}: {
|
|
||||||
children: React.ReactNode;
|
|
||||||
disabled?: boolean;
|
|
||||||
onClick?: () => void;
|
|
||||||
}) => (
|
|
||||||
<button type="button" disabled={disabled} onClick={onClick}>
|
|
||||||
{children}
|
|
||||||
</button>
|
|
||||||
),
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock("../subscription-renewal-confirmation-dialog", () => ({
|
|
||||||
SubscriptionRenewalConfirmationDialog: ({
|
|
||||||
open,
|
|
||||||
onCancel,
|
|
||||||
onConfirm,
|
|
||||||
}: {
|
|
||||||
open: boolean;
|
|
||||||
onCancel: () => void;
|
|
||||||
onConfirm: () => void;
|
|
||||||
}) =>
|
|
||||||
open ? (
|
|
||||||
<div role="dialog">
|
|
||||||
<button type="button" onClick={onCancel}>Cancel</button>
|
|
||||||
<button type="button" onClick={onConfirm}>Confirm</button>
|
|
||||||
</div>
|
|
||||||
) : null,
|
|
||||||
}));
|
|
||||||
|
|
||||||
import { SubscriptionCheckoutButton } from "../subscription-checkout-button";
|
|
||||||
|
|
||||||
const renewalPlan = {
|
|
||||||
id: "vip_monthly",
|
|
||||||
title: "Monthly",
|
|
||||||
price: "19.90",
|
|
||||||
currency: "usd",
|
|
||||||
originalPrice: "39.90",
|
|
||||||
};
|
|
||||||
|
|
||||||
describe("SubscriptionCheckoutButton renewal confirmation", () => {
|
|
||||||
let container: HTMLDivElement;
|
|
||||||
let root: Root;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
|
|
||||||
.IS_REACT_ACT_ENVIRONMENT = true;
|
|
||||||
localStorage.clear();
|
|
||||||
mocks.dispatch.mockClear();
|
|
||||||
mocks.handleQrisResume.mockClear();
|
|
||||||
mocks.hasHiddenQrisPayment = false;
|
|
||||||
mocks.resetLaunchState.mockClear();
|
|
||||||
mocks.payment.selectedPlanId = "vip_monthly";
|
|
||||||
mocks.payment.autoRenew = true;
|
|
||||||
mocks.payment.payChannel = "stripe";
|
|
||||||
mocks.payment.isCreatingOrder = false;
|
|
||||||
mocks.payment.isPollingOrder = false;
|
|
||||||
container = document.createElement("div");
|
|
||||||
document.body.appendChild(container);
|
|
||||||
root = createRoot(container);
|
|
||||||
});
|
|
||||||
|
|
||||||
afterEach(() => {
|
|
||||||
act(() => root.unmount());
|
|
||||||
container.remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("shows confirmation on the first auto-renewing VIP checkout and resumes after confirm", () => {
|
|
||||||
renderButton(root, "user-1");
|
|
||||||
|
|
||||||
act(() => clickButton(container, "Pay and Top Up"));
|
|
||||||
expect(container.querySelector('[role="dialog"]')).not.toBeNull();
|
|
||||||
expect(mocks.dispatch).not.toHaveBeenCalled();
|
|
||||||
|
|
||||||
act(() => clickButton(container, "Confirm"));
|
|
||||||
expect(container.querySelector('[role="dialog"]')).toBeNull();
|
|
||||||
expect(mocks.resetLaunchState).toHaveBeenCalledOnce();
|
|
||||||
expect(mocks.dispatch).toHaveBeenCalledWith({
|
|
||||||
type: "PaymentCreateOrderSubmitted",
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("does not ask the same user again after confirmation", () => {
|
|
||||||
renderButton(root, "user-1");
|
|
||||||
act(() => clickButton(container, "Pay and Top Up"));
|
|
||||||
act(() => clickButton(container, "Confirm"));
|
|
||||||
mocks.dispatch.mockClear();
|
|
||||||
mocks.resetLaunchState.mockClear();
|
|
||||||
|
|
||||||
act(() => root.unmount());
|
|
||||||
root = createRoot(container);
|
|
||||||
renderButton(root, "user-1");
|
|
||||||
act(() => clickButton(container, "Pay and Top Up"));
|
|
||||||
|
|
||||||
expect(container.querySelector('[role="dialog"]')).toBeNull();
|
|
||||||
expect(mocks.resetLaunchState).toHaveBeenCalledOnce();
|
|
||||||
expect(mocks.dispatch).toHaveBeenCalledWith({
|
|
||||||
type: "PaymentCreateOrderSubmitted",
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("keeps asking after cancel and isolates acknowledgement by user", () => {
|
|
||||||
renderButton(root, "user-1");
|
|
||||||
act(() => clickButton(container, "Pay and Top Up"));
|
|
||||||
act(() => clickButton(container, "Cancel"));
|
|
||||||
act(() => clickButton(container, "Pay and Top Up"));
|
|
||||||
expect(container.querySelector('[role="dialog"]')).not.toBeNull();
|
|
||||||
|
|
||||||
act(() => clickButton(container, "Confirm"));
|
|
||||||
mocks.dispatch.mockClear();
|
|
||||||
act(() => root.unmount());
|
|
||||||
root = createRoot(container);
|
|
||||||
renderButton(root, "user-2");
|
|
||||||
act(() => clickButton(container, "Pay and Top Up"));
|
|
||||||
|
|
||||||
expect(container.querySelector('[role="dialog"]')).not.toBeNull();
|
|
||||||
expect(mocks.dispatch).not.toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("skips confirmation for a non-renewing purchase", () => {
|
|
||||||
mocks.payment.autoRenew = false;
|
|
||||||
renderButton(root, "user-1", null);
|
|
||||||
|
|
||||||
act(() => clickButton(container, "Pay and Top Up"));
|
|
||||||
|
|
||||||
expect(container.querySelector('[role="dialog"]')).toBeNull();
|
|
||||||
expect(mocks.dispatch).toHaveBeenCalledWith({
|
|
||||||
type: "PaymentCreateOrderSubmitted",
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("skips confirmation for one-time EzPay membership checkout", () => {
|
|
||||||
mocks.payment.payChannel = "ezpay";
|
|
||||||
renderButton(root, "user-1");
|
|
||||||
|
|
||||||
act(() => clickButton(container, "Pay and Top Up"));
|
|
||||||
|
|
||||||
expect(container.querySelector('[role="dialog"]')).toBeNull();
|
|
||||||
expect(mocks.dispatch).toHaveBeenCalledWith({
|
|
||||||
type: "PaymentCreateOrderSubmitted",
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("reopens a hidden QRIS order without creating another order", () => {
|
|
||||||
mocks.payment.payChannel = "ezpay";
|
|
||||||
mocks.payment.isPollingOrder = true;
|
|
||||||
mocks.hasHiddenQrisPayment = true;
|
|
||||||
|
|
||||||
act(() =>
|
|
||||||
root.render(
|
|
||||||
<SubscriptionCheckoutButton
|
|
||||||
disabled
|
|
||||||
subscriptionType="topup"
|
|
||||||
sourceCharacterSlug="elio"
|
|
||||||
/>,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
const resumeButton = getButton(container, "Resume QRIS payment");
|
|
||||||
expect(resumeButton.disabled).toBe(false);
|
|
||||||
act(() => resumeButton.click());
|
|
||||||
|
|
||||||
expect(mocks.handleQrisResume).toHaveBeenCalledOnce();
|
|
||||||
expect(mocks.resetLaunchState).not.toHaveBeenCalled();
|
|
||||||
expect(mocks.dispatch).not.toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
function renderButton(
|
|
||||||
root: Root,
|
|
||||||
renewalConsentSubjectId: string,
|
|
||||||
plan: typeof renewalPlan | null = renewalPlan,
|
|
||||||
): void {
|
|
||||||
act(() =>
|
|
||||||
root.render(
|
|
||||||
<SubscriptionCheckoutButton
|
|
||||||
subscriptionType="vip"
|
|
||||||
sourceCharacterSlug="elio"
|
|
||||||
renewalPlan={plan}
|
|
||||||
renewalConsentSubjectId={renewalConsentSubjectId}
|
|
||||||
/>,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function clickButton(root: ParentNode, label: string): void {
|
|
||||||
getButton(root, label).click();
|
|
||||||
}
|
|
||||||
|
|
||||||
function getButton(root: ParentNode, label: string): HTMLButtonElement {
|
|
||||||
const button = Array.from(root.querySelectorAll("button")).find(
|
|
||||||
(item) => item.textContent?.trim() === label,
|
|
||||||
);
|
|
||||||
if (!button) throw new Error(`Expected ${label} button`);
|
|
||||||
return button;
|
|
||||||
}
|
|
||||||
@@ -71,14 +71,7 @@ describe("subscription payment dialogs", () => {
|
|||||||
expect(dialog?.textContent).toContain("Automatic Renewal Confirmation");
|
expect(dialog?.textContent).toContain("Automatic Renewal Confirmation");
|
||||||
expect(dialog?.textContent).toContain("Monthly");
|
expect(dialog?.textContent).toContain("Monthly");
|
||||||
expect(dialog?.textContent).toContain("19.90 usd");
|
expect(dialog?.textContent).toContain("19.90 usd");
|
||||||
expect(
|
expect(dialog?.querySelectorAll("a")).toHaveLength(2);
|
||||||
Array.from(dialog?.querySelectorAll("a") ?? []).map((link) =>
|
|
||||||
link.getAttribute("href"),
|
|
||||||
),
|
|
||||||
).toEqual([
|
|
||||||
"/legal/vip-membership-benefits.html",
|
|
||||||
"/legal/automatic-renewal.html",
|
|
||||||
]);
|
|
||||||
|
|
||||||
act(() => clickButton(dialog, "Confirm"));
|
act(() => clickButton(dialog, "Confirm"));
|
||||||
expect(onConfirm).toHaveBeenCalledOnce();
|
expect(onConfirm).toHaveBeenCalledOnce();
|
||||||
|
|||||||
@@ -4,17 +4,10 @@
|
|||||||
*
|
*
|
||||||
* 包装 `SubscriptionCtaButton` —— 通过 payment 状态机创建后端订单并拉起支付。
|
* 包装 `SubscriptionCtaButton` —— 通过 payment 状态机创建后端订单并拉起支付。
|
||||||
*/
|
*/
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
import { usePaymentLaunchFlow } from "@/app/_hooks/use-payment-launch-flow";
|
import { usePaymentLaunchFlow } from "@/app/_hooks/use-payment-launch-flow";
|
||||||
import { PaymentLaunchDialogs } from "@/app/_components/payment/payment-launch-dialogs";
|
import { PaymentLaunchDialogs } from "@/app/_components/payment/payment-launch-dialogs";
|
||||||
import { ExternalBrowserCheckoutButton } from "@/app/_components/payment/external-browser-checkout-button";
|
|
||||||
import { DEFAULT_CHARACTER_SLUG } from "@/data/constants/character";
|
import { DEFAULT_CHARACTER_SLUG } from "@/data/constants/character";
|
||||||
import type { SubscriptionReturnTo } from "@/lib/navigation/subscription_exit";
|
import type { SubscriptionReturnTo } from "@/lib/navigation/subscription_exit";
|
||||||
import {
|
|
||||||
hasAutomaticRenewalAcknowledgement,
|
|
||||||
rememberAutomaticRenewalAcknowledgement,
|
|
||||||
} from "@/lib/payment/automatic_renewal_acknowledgement";
|
|
||||||
import {
|
import {
|
||||||
usePaymentDispatch,
|
usePaymentDispatch,
|
||||||
usePaymentState,
|
usePaymentState,
|
||||||
@@ -22,19 +15,15 @@ import {
|
|||||||
import { Logger } from "@/utils/logger";
|
import { Logger } from "@/utils/logger";
|
||||||
|
|
||||||
import { SubscriptionCtaButton } from "./subscription-cta-button";
|
import { SubscriptionCtaButton } from "./subscription-cta-button";
|
||||||
import { SubscriptionRenewalConfirmationDialog } from "./subscription-renewal-confirmation-dialog";
|
|
||||||
import type { VipOfferPlanView } from "./subscription-vip-offer-section";
|
|
||||||
|
|
||||||
const log = new Logger("SubscriptionCheckoutButton");
|
const log = new Logger("SubscriptionCheckoutButton");
|
||||||
|
|
||||||
export interface SubscriptionCheckoutButtonProps {
|
export interface SubscriptionCheckoutButtonProps {
|
||||||
/** 是否可用(未选套餐、缺少角色来源或支付处理中为 false) */
|
/** 是否可用(未选套餐或 VIP 套餐尚未确认自动续费时为 false) */
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
subscriptionType: "vip" | "topup";
|
subscriptionType: "vip" | "topup";
|
||||||
returnTo?: SubscriptionReturnTo;
|
returnTo?: SubscriptionReturnTo;
|
||||||
sourceCharacterSlug?: string;
|
sourceCharacterSlug?: string;
|
||||||
renewalPlan?: VipOfferPlanView | null;
|
|
||||||
renewalConsentSubjectId?: string | null;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SubscriptionCheckoutButton({
|
export function SubscriptionCheckoutButton({
|
||||||
@@ -42,11 +31,7 @@ export function SubscriptionCheckoutButton({
|
|||||||
subscriptionType,
|
subscriptionType,
|
||||||
returnTo = null,
|
returnTo = null,
|
||||||
sourceCharacterSlug = DEFAULT_CHARACTER_SLUG,
|
sourceCharacterSlug = DEFAULT_CHARACTER_SLUG,
|
||||||
renewalPlan = null,
|
|
||||||
renewalConsentSubjectId = null,
|
|
||||||
}: SubscriptionCheckoutButtonProps) {
|
}: SubscriptionCheckoutButtonProps) {
|
||||||
const [showRenewalConfirmation, setShowRenewalConfirmation] =
|
|
||||||
useState(false);
|
|
||||||
const payment = usePaymentState();
|
const payment = usePaymentState();
|
||||||
const paymentDispatch = usePaymentDispatch();
|
const paymentDispatch = usePaymentDispatch();
|
||||||
const paymentLaunch = usePaymentLaunchFlow({
|
const paymentLaunch = usePaymentLaunchFlow({
|
||||||
@@ -71,54 +56,17 @@ export function SubscriptionCheckoutButton({
|
|||||||
? "Creating order..."
|
? "Creating order..."
|
||||||
: readyLabel;
|
: readyLabel;
|
||||||
|
|
||||||
const startCheckout = () => {
|
|
||||||
if (disabled || isLoading) return;
|
|
||||||
paymentLaunch.resetLaunchState();
|
|
||||||
paymentDispatch({ type: "PaymentCreateOrderSubmitted" });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClick = () => {
|
const handleClick = () => {
|
||||||
if (isResumingQris) {
|
if (isResumingQris) {
|
||||||
paymentLaunch.handleQrisResume();
|
paymentLaunch.handleQrisResume();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (disabled || isLoading) return;
|
if (disabled || isLoading) return;
|
||||||
if (
|
paymentLaunch.resetLaunchState();
|
||||||
payment.payChannel === "stripe" &&
|
paymentDispatch({ type: "PaymentCreateOrderSubmitted" });
|
||||||
payment.autoRenew &&
|
|
||||||
renewalPlan !== null &&
|
|
||||||
!hasAutomaticRenewalAcknowledgement(renewalConsentSubjectId)
|
|
||||||
) {
|
|
||||||
setShowRenewalConfirmation(true);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
startCheckout();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleRenewalConfirm = () => {
|
|
||||||
rememberAutomaticRenewalAcknowledgement(renewalConsentSubjectId);
|
|
||||||
setShowRenewalConfirmation(false);
|
|
||||||
startCheckout();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{payment.payChannel === "stripe" && payment.selectedPlanId ? (
|
|
||||||
<ExternalBrowserCheckoutButton
|
|
||||||
disabled={disabled || isLoading}
|
|
||||||
characterSlug={sourceCharacterSlug}
|
|
||||||
checkoutIntent={{
|
|
||||||
planId: payment.selectedPlanId,
|
|
||||||
autoRenew: payment.autoRenew,
|
|
||||||
...(payment.commercialOfferId
|
|
||||||
? { commercialOfferId: payment.commercialOfferId }
|
|
||||||
: {}),
|
|
||||||
...(payment.chatActionId
|
|
||||||
? { chatActionId: payment.chatActionId }
|
|
||||||
: {}),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
<SubscriptionCtaButton
|
<SubscriptionCtaButton
|
||||||
type="button"
|
type="button"
|
||||||
data-analytics-key="subscription.checkout"
|
data-analytics-key="subscription.checkout"
|
||||||
@@ -148,12 +96,6 @@ export function SubscriptionCheckoutButton({
|
|||||||
ezpayDescription="Your order has been created. Continue to the secure payment page to finish."
|
ezpayDescription="Your order has been created. Continue to the secure payment page to finish."
|
||||||
launch={paymentLaunch}
|
launch={paymentLaunch}
|
||||||
/>
|
/>
|
||||||
<SubscriptionRenewalConfirmationDialog
|
|
||||||
open={showRenewalConfirmation}
|
|
||||||
plan={renewalPlan}
|
|
||||||
onCancel={() => setShowRenewalConfirmation(false)}
|
|
||||||
onConfirm={handleRenewalConfirm}
|
|
||||||
/>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,7 +5,6 @@ import {
|
|||||||
} from "@/lib/analytics/payment_analytics_context";
|
} from "@/lib/analytics/payment_analytics_context";
|
||||||
import {
|
import {
|
||||||
getFirstPaymentSearchParam,
|
getFirstPaymentSearchParam,
|
||||||
parsePaymentAutoRenew,
|
|
||||||
parsePaymentReturnSearchParams,
|
parsePaymentReturnSearchParams,
|
||||||
parseSubscriptionReturnTo,
|
parseSubscriptionReturnTo,
|
||||||
type PaymentSearchParams,
|
type PaymentSearchParams,
|
||||||
@@ -56,7 +55,6 @@ export default async function SubscriptionPage({
|
|||||||
analyticsContext={analyticsContext}
|
analyticsContext={analyticsContext}
|
||||||
sourceCharacterSlug={sourceCharacterSlug}
|
sourceCharacterSlug={sourceCharacterSlug}
|
||||||
initialPlanId={initialPlanId}
|
initialPlanId={initialPlanId}
|
||||||
initialAutoRenew={parsePaymentAutoRenew(query.autoRenew)}
|
|
||||||
commercialOfferId={commercialOfferId}
|
commercialOfferId={commercialOfferId}
|
||||||
resumeOrderId={resumeOrderId}
|
resumeOrderId={resumeOrderId}
|
||||||
chatActionId={chatActionId}
|
chatActionId={chatActionId}
|
||||||
|
|||||||
@@ -105,6 +105,30 @@ export function findSelectedSubscriptionPlan(input: {
|
|||||||
return plans.find((plan) => plan.id === input.selectedPlanId) ?? null;
|
return plans.find((plan) => plan.id === input.selectedPlanId) ?? null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function requiresVipPlanConfirmation(input: {
|
||||||
|
planId: string;
|
||||||
|
vipPlans: readonly VipOfferPlanView[];
|
||||||
|
confirmedVipPlanIds: ReadonlySet<string>;
|
||||||
|
}): boolean {
|
||||||
|
return (
|
||||||
|
input.vipPlans.some((plan) => plan.id === input.planId) &&
|
||||||
|
!input.confirmedVipPlanIds.has(input.planId)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function canCheckoutSubscriptionPlan(input: {
|
||||||
|
selectedPlanId: string;
|
||||||
|
vipPlans: readonly VipOfferPlanView[];
|
||||||
|
confirmedVipPlanIds: ReadonlySet<string>;
|
||||||
|
}): boolean {
|
||||||
|
if (!input.selectedPlanId) return false;
|
||||||
|
return !requiresVipPlanConfirmation({
|
||||||
|
planId: input.selectedPlanId,
|
||||||
|
vipPlans: input.vipPlans,
|
||||||
|
confirmedVipPlanIds: input.confirmedVipPlanIds,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
export function getDefaultSubscriptionPlanId(input: {
|
export function getDefaultSubscriptionPlanId(input: {
|
||||||
canSubscribeVip: boolean;
|
canSubscribeVip: boolean;
|
||||||
selectedPlanId: string;
|
selectedPlanId: string;
|
||||||
|
|||||||
@@ -24,13 +24,16 @@ import {
|
|||||||
SubscriptionCoinsOfferSection,
|
SubscriptionCoinsOfferSection,
|
||||||
SubscriptionPaymentIssueDialog,
|
SubscriptionPaymentIssueDialog,
|
||||||
SubscriptionPaymentSuccessDialog,
|
SubscriptionPaymentSuccessDialog,
|
||||||
|
SubscriptionRenewalConfirmationDialog,
|
||||||
SubscriptionVipOfferSection,
|
SubscriptionVipOfferSection,
|
||||||
} from "./components";
|
} from "./components";
|
||||||
import styles from "./components/subscription-screen.module.css";
|
import styles from "./components/subscription-screen.module.css";
|
||||||
import {
|
import {
|
||||||
|
canCheckoutSubscriptionPlan,
|
||||||
findSelectedSubscriptionPlan,
|
findSelectedSubscriptionPlan,
|
||||||
getFirstRechargeOfferView,
|
getFirstRechargeOfferView,
|
||||||
getDefaultSubscriptionPlanId,
|
getDefaultSubscriptionPlanId,
|
||||||
|
requiresVipPlanConfirmation,
|
||||||
toCoinsOfferPlanViews,
|
toCoinsOfferPlanViews,
|
||||||
toVipOfferPlanViews,
|
toVipOfferPlanViews,
|
||||||
type SubscriptionType,
|
type SubscriptionType,
|
||||||
@@ -47,7 +50,6 @@ export interface SubscriptionScreenProps {
|
|||||||
analyticsContext?: PaymentAnalyticsContext;
|
analyticsContext?: PaymentAnalyticsContext;
|
||||||
sourceCharacterSlug?: string | null;
|
sourceCharacterSlug?: string | null;
|
||||||
initialPlanId?: string | null;
|
initialPlanId?: string | null;
|
||||||
initialAutoRenew?: boolean | null;
|
|
||||||
commercialOfferId?: string | null;
|
commercialOfferId?: string | null;
|
||||||
resumeOrderId?: string | null;
|
resumeOrderId?: string | null;
|
||||||
chatActionId?: string | null;
|
chatActionId?: string | null;
|
||||||
@@ -61,11 +63,14 @@ export function SubscriptionScreen({
|
|||||||
analyticsContext: providedAnalyticsContext,
|
analyticsContext: providedAnalyticsContext,
|
||||||
sourceCharacterSlug = null,
|
sourceCharacterSlug = null,
|
||||||
initialPlanId = null,
|
initialPlanId = null,
|
||||||
initialAutoRenew = null,
|
|
||||||
commercialOfferId = null,
|
commercialOfferId = null,
|
||||||
resumeOrderId = null,
|
resumeOrderId = null,
|
||||||
chatActionId = null,
|
chatActionId = null,
|
||||||
}: SubscriptionScreenProps) {
|
}: SubscriptionScreenProps) {
|
||||||
|
const [confirmedVipPlanIds, setConfirmedVipPlanIds] = useState<
|
||||||
|
ReadonlySet<string>
|
||||||
|
>(() => new Set());
|
||||||
|
const [pendingVipPlanId, setPendingVipPlanId] = useState<string | null>(null);
|
||||||
const [showPaymentIssueDialog, setShowPaymentIssueDialog] = useState(false);
|
const [showPaymentIssueDialog, setShowPaymentIssueDialog] = useState(false);
|
||||||
const [paymentIssueNotice, setPaymentIssueNotice] = useState<string | null>(
|
const [paymentIssueNotice, setPaymentIssueNotice] = useState<string | null>(
|
||||||
null,
|
null,
|
||||||
@@ -95,7 +100,6 @@ export function SubscriptionScreen({
|
|||||||
sourceCharacterSlug: sourceCharacter?.slug ?? null,
|
sourceCharacterSlug: sourceCharacter?.slug ?? null,
|
||||||
initialPayChannel: paymentMethodConfig.initialPayChannel,
|
initialPayChannel: paymentMethodConfig.initialPayChannel,
|
||||||
initialPlanId,
|
initialPlanId,
|
||||||
initialAutoRenew,
|
|
||||||
commercialOfferId,
|
commercialOfferId,
|
||||||
resumeOrderId,
|
resumeOrderId,
|
||||||
chatActionId,
|
chatActionId,
|
||||||
@@ -149,20 +153,49 @@ export function SubscriptionScreen({
|
|||||||
const isPaymentBusy =
|
const isPaymentBusy =
|
||||||
payment.isCreatingOrder ||
|
payment.isCreatingOrder ||
|
||||||
payment.isPollingOrder;
|
payment.isPollingOrder;
|
||||||
const selectedVipPlan =
|
const selectedPlanIsVip = vipOfferPlans.some(
|
||||||
vipOfferPlans.find((plan) => plan.id === payment.selectedPlanId) ?? null;
|
(plan) => plan.id === payment.selectedPlanId,
|
||||||
const selectedPlanIsVip = selectedVipPlan !== null;
|
);
|
||||||
const canActivate =
|
const canActivate =
|
||||||
sourceCharacter !== null &&
|
sourceCharacter !== null &&
|
||||||
selectedPlan !== null &&
|
selectedPlan !== null &&
|
||||||
|
canCheckoutSubscriptionPlan({
|
||||||
|
selectedPlanId: payment.selectedPlanId,
|
||||||
|
vipPlans: vipOfferPlans,
|
||||||
|
confirmedVipPlanIds,
|
||||||
|
}) &&
|
||||||
!isPaymentBusy;
|
!isPaymentBusy;
|
||||||
|
const pendingVipPlan =
|
||||||
|
vipOfferPlans.find((plan) => plan.id === pendingVipPlanId) ?? null;
|
||||||
|
|
||||||
const handleSelectPlan = (planId: string) => {
|
const handleSelectPlan = (planId: string) => {
|
||||||
const plan = payment.plans.find((item) => item.planId === planId);
|
const plan = payment.plans.find((item) => item.planId === planId);
|
||||||
if (plan) behaviorAnalytics.planClick(plan, analyticsContext);
|
if (plan) behaviorAnalytics.planClick(plan, analyticsContext);
|
||||||
|
if (
|
||||||
|
requiresVipPlanConfirmation({
|
||||||
|
planId,
|
||||||
|
vipPlans: vipOfferPlans,
|
||||||
|
confirmedVipPlanIds,
|
||||||
|
})
|
||||||
|
) {
|
||||||
|
setPendingVipPlanId(planId);
|
||||||
|
return;
|
||||||
|
}
|
||||||
paymentDispatch({ type: "PaymentPlanSelected", planId });
|
paymentDispatch({ type: "PaymentPlanSelected", planId });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleConfirmVipPlan = () => {
|
||||||
|
if (!pendingVipPlanId) return;
|
||||||
|
const planId = pendingVipPlanId;
|
||||||
|
setConfirmedVipPlanIds((current) => {
|
||||||
|
const next = new Set(current);
|
||||||
|
next.add(planId);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
paymentDispatch({ type: "PaymentPlanSelected", planId });
|
||||||
|
setPendingVipPlanId(null);
|
||||||
|
};
|
||||||
|
|
||||||
const handlePaymentMethodChange = (payChannel: PayChannel) => {
|
const handlePaymentMethodChange = (payChannel: PayChannel) => {
|
||||||
paymentDispatch({
|
paymentDispatch({
|
||||||
type: "PaymentPayChannelChanged",
|
type: "PaymentPayChannelChanged",
|
||||||
@@ -304,11 +337,16 @@ export function SubscriptionScreen({
|
|||||||
subscriptionType={subscriptionType}
|
subscriptionType={subscriptionType}
|
||||||
returnTo={returnTo}
|
returnTo={returnTo}
|
||||||
sourceCharacterSlug={sourceCharacter?.slug ?? DEFAULT_CHARACTER_SLUG}
|
sourceCharacterSlug={sourceCharacter?.slug ?? DEFAULT_CHARACTER_SLUG}
|
||||||
renewalPlan={selectedVipPlan}
|
|
||||||
renewalConsentSubjectId={userState.currentUser?.id || null}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<SubscriptionRenewalConfirmationDialog
|
||||||
|
open={pendingVipPlan !== null}
|
||||||
|
plan={pendingVipPlan}
|
||||||
|
onCancel={() => setPendingVipPlanId(null)}
|
||||||
|
onConfirm={handleConfirmVipPlan}
|
||||||
|
/>
|
||||||
|
|
||||||
{showPaymentIssueDialog ? (
|
{showPaymentIssueDialog ? (
|
||||||
<SubscriptionPaymentIssueDialog
|
<SubscriptionPaymentIssueDialog
|
||||||
open
|
open
|
||||||
|
|||||||
@@ -24,7 +24,6 @@ export interface UseSubscriptionPaymentFlowInput {
|
|||||||
initialPayChannel: PayChannel;
|
initialPayChannel: PayChannel;
|
||||||
sourceCharacterSlug?: string | null;
|
sourceCharacterSlug?: string | null;
|
||||||
initialPlanId?: string | null;
|
initialPlanId?: string | null;
|
||||||
initialAutoRenew?: boolean | null;
|
|
||||||
commercialOfferId?: string | null;
|
commercialOfferId?: string | null;
|
||||||
resumeOrderId?: string | null;
|
resumeOrderId?: string | null;
|
||||||
chatActionId?: string | null;
|
chatActionId?: string | null;
|
||||||
@@ -37,7 +36,6 @@ export function useSubscriptionPaymentFlow({
|
|||||||
initialPayChannel,
|
initialPayChannel,
|
||||||
sourceCharacterSlug = null,
|
sourceCharacterSlug = null,
|
||||||
initialPlanId = null,
|
initialPlanId = null,
|
||||||
initialAutoRenew = null,
|
|
||||||
commercialOfferId = null,
|
commercialOfferId = null,
|
||||||
resumeOrderId = null,
|
resumeOrderId = null,
|
||||||
chatActionId = null,
|
chatActionId = null,
|
||||||
@@ -51,7 +49,6 @@ export function useSubscriptionPaymentFlow({
|
|||||||
shouldResumePendingOrder,
|
shouldResumePendingOrder,
|
||||||
characterId: supportCharacter?.id,
|
characterId: supportCharacter?.id,
|
||||||
initialPlanId,
|
initialPlanId,
|
||||||
initialAutoRenew,
|
|
||||||
commercialOfferId,
|
commercialOfferId,
|
||||||
resumeOrderId,
|
resumeOrderId,
|
||||||
chatActionId,
|
chatActionId,
|
||||||
|
|||||||
@@ -359,8 +359,6 @@ function makePaymentState(
|
|||||||
selectedGiftCategory: giftCategory.category,
|
selectedGiftCategory: giftCategory.category,
|
||||||
isFirstRecharge: false,
|
isFirstRecharge: false,
|
||||||
commercialOffer: null,
|
commercialOffer: null,
|
||||||
commercialOfferId: null,
|
|
||||||
chatActionId: null,
|
|
||||||
selectedPlanId: giftPlan.planId,
|
selectedPlanId: giftPlan.planId,
|
||||||
payChannel: "stripe",
|
payChannel: "stripe",
|
||||||
autoRenew: false,
|
autoRenew: false,
|
||||||
|
|||||||
@@ -2,7 +2,6 @@
|
|||||||
|
|
||||||
import { usePaymentLaunchFlow } from "@/app/_hooks/use-payment-launch-flow";
|
import { usePaymentLaunchFlow } from "@/app/_hooks/use-payment-launch-flow";
|
||||||
import { PaymentLaunchDialogs } from "@/app/_components/payment/payment-launch-dialogs";
|
import { PaymentLaunchDialogs } from "@/app/_components/payment/payment-launch-dialogs";
|
||||||
import { ExternalBrowserCheckoutButton } from "@/app/_components/payment/external-browser-checkout-button";
|
|
||||||
import { useActiveCharacter } from "@/providers/character-provider";
|
import { useActiveCharacter } from "@/providers/character-provider";
|
||||||
import {
|
import {
|
||||||
usePaymentDispatch,
|
usePaymentDispatch,
|
||||||
@@ -68,19 +67,6 @@ export function TipCheckoutButton({
|
|||||||
>
|
>
|
||||||
{label}
|
{label}
|
||||||
</button>
|
</button>
|
||||||
{payment.payChannel === "stripe" && payment.selectedPlanId ? (
|
|
||||||
<ExternalBrowserCheckoutButton
|
|
||||||
disabled={disabled || isLoading}
|
|
||||||
checkoutIntent={{
|
|
||||||
planId: payment.selectedPlanId,
|
|
||||||
autoRenew: false,
|
|
||||||
recipientCharacterId: character.id,
|
|
||||||
...(payment.chatActionId
|
|
||||||
? { chatActionId: payment.chatActionId }
|
|
||||||
: {}),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
{payment.errorMessage ? (
|
{payment.errorMessage ? (
|
||||||
<p className={styles.checkoutError} role="alert">
|
<p className={styles.checkoutError} role="alert">
|
||||||
{payment.errorMessage}
|
{payment.errorMessage}
|
||||||
|
|||||||
@@ -13,11 +13,11 @@ export class AppConstants {
|
|||||||
|
|
||||||
/** 会员服务协议文档链接 */
|
/** 会员服务协议文档链接 */
|
||||||
static readonly membershipAgreementUrl =
|
static readonly membershipAgreementUrl =
|
||||||
"/legal/vip-membership-benefits.html";
|
"https://www.banlv-ai.com/cozsweet/membership-agreement.html";
|
||||||
|
|
||||||
/** 自动续费服务协议文档链接 */
|
/** 自动续费服务协议文档链接 */
|
||||||
static readonly autoRenewalAgreementUrl =
|
static readonly autoRenewalAgreementUrl =
|
||||||
"/legal/automatic-renewal.html";
|
"https://www.banlv-ai.com/cozsweet/auto-renewal-agreement.html";
|
||||||
|
|
||||||
/** 开发环境 APP 标题 */
|
/** 开发环境 APP 标题 */
|
||||||
static readonly appTitleDevelopment = "Develop";
|
static readonly appTitleDevelopment = "Develop";
|
||||||
|
|||||||
@@ -1,10 +1,6 @@
|
|||||||
import { ExceptionHandler } from "@/core/errors";
|
import { ExceptionHandler } from "@/core/errors";
|
||||||
import type { IAuthRepository } from "@/data/repositories/interfaces";
|
import type { IAuthRepository } from "@/data/repositories/interfaces";
|
||||||
import {
|
import {
|
||||||
CheckoutHandoffConsumeRequestSchema,
|
|
||||||
CheckoutHandoffCreateRequestSchema,
|
|
||||||
type CheckoutHandoffCreateResponse,
|
|
||||||
type CheckoutIntent,
|
|
||||||
FacebookIdentityRequestSchema,
|
FacebookIdentityRequestSchema,
|
||||||
FacebookLoginRequestSchema,
|
FacebookLoginRequestSchema,
|
||||||
FbIdLoginRequestSchema,
|
FbIdLoginRequestSchema,
|
||||||
@@ -280,30 +276,6 @@ export class AuthRepository implements IAuthRepository {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 创建订单前生成一次性外部浏览器支付交接链接。 */
|
|
||||||
async createCheckoutHandoff(
|
|
||||||
checkoutIntent: CheckoutIntent,
|
|
||||||
): Promise<Result<CheckoutHandoffCreateResponse>> {
|
|
||||||
return Result.wrap(() =>
|
|
||||||
this.api.createCheckoutHandoff(
|
|
||||||
CheckoutHandoffCreateRequestSchema.parse(checkoutIntent),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 消费支付交接凭证,保存后端签发的正式登录态并返回购买意图。 */
|
|
||||||
async consumeCheckoutHandoff(
|
|
||||||
handoffToken: string,
|
|
||||||
): Promise<Result<CheckoutIntent>> {
|
|
||||||
return Result.wrap(async () => {
|
|
||||||
const response = await this.api.consumeCheckoutHandoff(
|
|
||||||
CheckoutHandoffConsumeRequestSchema.parse({ handoffToken }),
|
|
||||||
);
|
|
||||||
await this._saveLoginData(response, response.loginStatus);
|
|
||||||
return response.checkoutIntent;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 刷新 token:先读本地的 refresh token,空则直接返回错误;
|
* 刷新 token:先读本地的 refresh token,空则直接返回错误;
|
||||||
* 调用 API 成功后写回新的 login token + refresh token。
|
* 调用 API 成功后写回新的 login token + refresh token。
|
||||||
|
|||||||
@@ -13,8 +13,6 @@
|
|||||||
|
|
||||||
import type { Result } from "@/utils/result";
|
import type { Result } from "@/utils/result";
|
||||||
import type {
|
import type {
|
||||||
CheckoutHandoffCreateResponse,
|
|
||||||
CheckoutIntent,
|
|
||||||
GuestLoginResponse,
|
GuestLoginResponse,
|
||||||
LoginStatus,
|
LoginStatus,
|
||||||
LoginResponse,
|
LoginResponse,
|
||||||
@@ -76,16 +74,6 @@ export interface IAuthRepository {
|
|||||||
/** 消费一次性充值登录凭证并建立正式会话。 */
|
/** 消费一次性充值登录凭证并建立正式会话。 */
|
||||||
consumeTopUpHandoff(handoffToken: string): Promise<Result<LoginStatus>>;
|
consumeTopUpHandoff(handoffToken: string): Promise<Result<LoginStatus>>;
|
||||||
|
|
||||||
/** 在创建订单前生成10分钟有效的外部浏览器支付链接。 */
|
|
||||||
createCheckoutHandoff(
|
|
||||||
checkoutIntent: CheckoutIntent,
|
|
||||||
): Promise<Result<CheckoutHandoffCreateResponse>>;
|
|
||||||
|
|
||||||
/** 消费单次支付交接凭证并保存正式登录态。 */
|
|
||||||
consumeCheckoutHandoff(
|
|
||||||
handoffToken: string,
|
|
||||||
): Promise<Result<CheckoutIntent>>;
|
|
||||||
|
|
||||||
/** 刷新 token:先读本地的 refresh token,空则返回错误。 */
|
/** 刷新 token:先读本地的 refresh token,空则返回错误。 */
|
||||||
refreshToken(): Promise<Result<RefreshTokenResponse>>;
|
refreshToken(): Promise<Result<RefreshTokenResponse>>;
|
||||||
|
|
||||||
|
|||||||
@@ -1,44 +0,0 @@
|
|||||||
import { describe, expect, it } from "vitest";
|
|
||||||
|
|
||||||
import {
|
|
||||||
CheckoutHandoffConsumeResponseSchema,
|
|
||||||
CheckoutHandoffCreateRequestSchema,
|
|
||||||
} from "../checkout_handoff";
|
|
||||||
|
|
||||||
describe("checkout handoff schemas", () => {
|
|
||||||
it("keeps only the minimal order-free purchase intent", () => {
|
|
||||||
expect(
|
|
||||||
CheckoutHandoffCreateRequestSchema.parse({
|
|
||||||
planId: "vip_monthly",
|
|
||||||
autoRenew: true,
|
|
||||||
recipientCharacterId: "elio",
|
|
||||||
price: 9.99,
|
|
||||||
}),
|
|
||||||
).toEqual({
|
|
||||||
planId: "vip_monthly",
|
|
||||||
autoRenew: true,
|
|
||||||
recipientCharacterId: "elio",
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("parses the formal session and checkout intent returned after consumption", () => {
|
|
||||||
const parsed = CheckoutHandoffConsumeResponseSchema.parse({
|
|
||||||
user: {
|
|
||||||
id: "00000000-0000-0000-0000-000000000123",
|
|
||||||
username: "checkout-user",
|
|
||||||
email: "checkout@example.com",
|
|
||||||
platform: "web",
|
|
||||||
},
|
|
||||||
token: "access-token",
|
|
||||||
refreshToken: "refresh-token",
|
|
||||||
loginStatus: "email",
|
|
||||||
checkoutIntent: {
|
|
||||||
planId: "vip_monthly",
|
|
||||||
autoRenew: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(parsed.checkoutIntent.planId).toBe("vip_monthly");
|
|
||||||
expect(parsed.loginStatus).toBe("email");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,58 +0,0 @@
|
|||||||
import { z } from "zod";
|
|
||||||
|
|
||||||
import { stringOrEmpty } from "../nullable-defaults";
|
|
||||||
import { UserSchema } from "../user/user";
|
|
||||||
|
|
||||||
export const CheckoutIntentSchema = z
|
|
||||||
.object({
|
|
||||||
planId: z.string().min(1).max(120),
|
|
||||||
autoRenew: z.boolean(),
|
|
||||||
recipientCharacterId: z.string().min(1).max(80).optional(),
|
|
||||||
commercialOfferId: z.string().min(1).max(80).optional(),
|
|
||||||
chatActionId: z.uuid().optional(),
|
|
||||||
})
|
|
||||||
.readonly();
|
|
||||||
|
|
||||||
export const CheckoutHandoffCreateRequestSchema = CheckoutIntentSchema;
|
|
||||||
|
|
||||||
export const CheckoutHandoffCreateResponseSchema = z
|
|
||||||
.object({
|
|
||||||
externalUrl: z.url(),
|
|
||||||
expiresAt: z.string().min(1),
|
|
||||||
})
|
|
||||||
.readonly();
|
|
||||||
|
|
||||||
export const CheckoutHandoffConsumeRequestSchema = z
|
|
||||||
.object({
|
|
||||||
handoffToken: z.string().min(32).max(512),
|
|
||||||
})
|
|
||||||
.readonly();
|
|
||||||
|
|
||||||
export const CheckoutHandoffConsumeResponseSchema = z
|
|
||||||
.object({
|
|
||||||
user: UserSchema,
|
|
||||||
token: z.string().min(1),
|
|
||||||
refreshToken: stringOrEmpty,
|
|
||||||
loginStatus: z.enum([
|
|
||||||
"email",
|
|
||||||
"google",
|
|
||||||
"facebook",
|
|
||||||
"facebookMessenger",
|
|
||||||
]),
|
|
||||||
checkoutIntent: CheckoutIntentSchema,
|
|
||||||
})
|
|
||||||
.readonly();
|
|
||||||
|
|
||||||
export type CheckoutIntent = z.output<typeof CheckoutIntentSchema>;
|
|
||||||
export type CheckoutHandoffCreateRequest = z.output<
|
|
||||||
typeof CheckoutHandoffCreateRequestSchema
|
|
||||||
>;
|
|
||||||
export type CheckoutHandoffCreateResponse = z.output<
|
|
||||||
typeof CheckoutHandoffCreateResponseSchema
|
|
||||||
>;
|
|
||||||
export type CheckoutHandoffConsumeRequest = z.output<
|
|
||||||
typeof CheckoutHandoffConsumeRequestSchema
|
|
||||||
>;
|
|
||||||
export type CheckoutHandoffConsumeResponse = z.output<
|
|
||||||
typeof CheckoutHandoffConsumeResponseSchema
|
|
||||||
>;
|
|
||||||
@@ -3,7 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
export * from "./facebook_user_data";
|
export * from "./facebook_user_data";
|
||||||
export * from "./checkout_handoff";
|
|
||||||
export * from "./login_status";
|
export * from "./login_status";
|
||||||
export * from "./request/facebook_identity_request";
|
export * from "./request/facebook_identity_request";
|
||||||
export * from "./request/facebook_login_request";
|
export * from "./request/facebook_login_request";
|
||||||
|
|||||||
@@ -6,8 +6,6 @@
|
|||||||
"facebookLogin": { "method": "post", "path": "/api/auth/login/facebook" },
|
"facebookLogin": { "method": "post", "path": "/api/auth/login/facebook" },
|
||||||
"facebookIdLogin": { "method": "post", "path": "/api/auth/login/facebook/by-id" },
|
"facebookIdLogin": { "method": "post", "path": "/api/auth/login/facebook/by-id" },
|
||||||
"topUpHandoffConsume": { "method": "post", "path": "/api/auth/handoff/topup/consume" },
|
"topUpHandoffConsume": { "method": "post", "path": "/api/auth/handoff/topup/consume" },
|
||||||
"checkoutHandoffCreate": { "method": "post", "path": "/api/auth/handoff/checkout" },
|
|
||||||
"checkoutHandoffConsume": { "method": "post", "path": "/api/auth/handoff/checkout/consume" },
|
|
||||||
"refresh": { "method": "post", "path": "/api/auth/refresh" },
|
"refresh": { "method": "post", "path": "/api/auth/refresh" },
|
||||||
"logout": { "method": "post", "path": "/api/auth/logout" },
|
"logout": { "method": "post", "path": "/api/auth/logout" },
|
||||||
"getCurrentUser": { "method": "get", "path": "/api/auth/me" },
|
"getCurrentUser": { "method": "get", "path": "/api/auth/me" },
|
||||||
|
|||||||
@@ -30,12 +30,6 @@ export class ApiPath {
|
|||||||
/** 消费一次性充值登录凭证 */
|
/** 消费一次性充值登录凭证 */
|
||||||
static readonly topUpHandoffConsume = apiContract.topUpHandoffConsume.path;
|
static readonly topUpHandoffConsume = apiContract.topUpHandoffConsume.path;
|
||||||
|
|
||||||
/** 创建一次性外部浏览器支付交接链接(创建订单前)。 */
|
|
||||||
static readonly checkoutHandoffCreate = apiContract.checkoutHandoffCreate.path;
|
|
||||||
|
|
||||||
/** 消费一次性外部浏览器支付交接凭证。 */
|
|
||||||
static readonly checkoutHandoffConsume = apiContract.checkoutHandoffConsume.path;
|
|
||||||
|
|
||||||
/** 刷新 Token */
|
/** 刷新 Token */
|
||||||
static readonly refresh = apiContract.refresh.path;
|
static readonly refresh = apiContract.refresh.path;
|
||||||
|
|
||||||
|
|||||||
@@ -7,12 +7,6 @@
|
|||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
CheckoutHandoffConsumeRequest,
|
|
||||||
CheckoutHandoffConsumeResponse,
|
|
||||||
CheckoutHandoffConsumeResponseSchema,
|
|
||||||
CheckoutHandoffCreateRequest,
|
|
||||||
CheckoutHandoffCreateResponse,
|
|
||||||
CheckoutHandoffCreateResponseSchema,
|
|
||||||
FacebookIdentityRequest,
|
FacebookIdentityRequest,
|
||||||
FacebookIdentityResponse,
|
FacebookIdentityResponse,
|
||||||
FacebookIdentityResponseSchema,
|
FacebookIdentityResponseSchema,
|
||||||
@@ -110,32 +104,6 @@ export class AuthApi {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 在创建支付订单前生成一次性外部浏览器交接链接。 */
|
|
||||||
async createCheckoutHandoff(
|
|
||||||
body: CheckoutHandoffCreateRequest,
|
|
||||||
): Promise<CheckoutHandoffCreateResponse> {
|
|
||||||
const env = await httpClient<ApiEnvelope<unknown>>(
|
|
||||||
ApiPath.checkoutHandoffCreate,
|
|
||||||
{ method: "POST", body },
|
|
||||||
);
|
|
||||||
return CheckoutHandoffCreateResponseSchema.parse(
|
|
||||||
unwrap(env) as Record<string, unknown>,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 消费一次性支付交接凭证并恢复正式登录态与购买意图。 */
|
|
||||||
async consumeCheckoutHandoff(
|
|
||||||
body: CheckoutHandoffConsumeRequest,
|
|
||||||
): Promise<CheckoutHandoffConsumeResponse> {
|
|
||||||
const env = await httpClient<ApiEnvelope<unknown>>(
|
|
||||||
ApiPath.checkoutHandoffConsume,
|
|
||||||
{ method: "POST", body },
|
|
||||||
);
|
|
||||||
return CheckoutHandoffConsumeResponseSchema.parse(
|
|
||||||
unwrap(env) as Record<string, unknown>,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 绑定 Facebook ASID / PSID 到当前用户
|
* 绑定 Facebook ASID / PSID 到当前用户
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -1,18 +0,0 @@
|
|||||||
import type {
|
|
||||||
CheckoutHandoffCreateResponse,
|
|
||||||
CheckoutIntent,
|
|
||||||
} from "@/data/schemas/auth";
|
|
||||||
import { getAuthRepository } from "@/data/repositories/auth_repository";
|
|
||||||
import type { Result } from "@/utils/result";
|
|
||||||
|
|
||||||
export function createCheckoutHandoff(
|
|
||||||
checkoutIntent: CheckoutIntent,
|
|
||||||
): Promise<Result<CheckoutHandoffCreateResponse>> {
|
|
||||||
return getAuthRepository().createCheckoutHandoff(checkoutIntent);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function consumeCheckoutHandoff(
|
|
||||||
handoffToken: string,
|
|
||||||
): Promise<Result<CheckoutIntent>> {
|
|
||||||
return getAuthRepository().consumeCheckoutHandoff(handoffToken);
|
|
||||||
}
|
|
||||||
@@ -3,41 +3,12 @@ import { describe, expect, it } from "vitest";
|
|||||||
import { getCharacterRoutes, ROUTES } from "@/router/routes";
|
import { getCharacterRoutes, ROUTES } from "@/router/routes";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
resolveCheckoutIntentDestination,
|
|
||||||
resolveExternalEntryDestination,
|
resolveExternalEntryDestination,
|
||||||
resolveExternalEntryPromotionType,
|
resolveExternalEntryPromotionType,
|
||||||
resolveExternalEntryTarget,
|
resolveExternalEntryTarget,
|
||||||
shouldBindExternalFacebookIdentity,
|
shouldBindExternalFacebookIdentity,
|
||||||
} from "../external_entry";
|
} from "../external_entry";
|
||||||
|
|
||||||
describe("checkout external browser destination", () => {
|
|
||||||
it("restores subscription intent without carrying the handoff token", () => {
|
|
||||||
expect(
|
|
||||||
resolveCheckoutIntentDestination(
|
|
||||||
{
|
|
||||||
planId: "vip_monthly",
|
|
||||||
autoRenew: true,
|
|
||||||
commercialOfferId: "offer-1",
|
|
||||||
chatActionId: "00000000-0000-0000-0000-000000000123",
|
|
||||||
},
|
|
||||||
"nayeli",
|
|
||||||
),
|
|
||||||
).toBe(
|
|
||||||
"/subscription?planId=vip_monthly&autoRenew=1&character=nayeli&commercialOfferId=offer-1&chatActionId=00000000-0000-0000-0000-000000000123&payChannel=stripe",
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("restores a character tip intent by canonical character id", () => {
|
|
||||||
expect(
|
|
||||||
resolveCheckoutIntentDestination({
|
|
||||||
planId: "maya_coffee",
|
|
||||||
autoRenew: false,
|
|
||||||
recipientCharacterId: "maya-tan",
|
|
||||||
}),
|
|
||||||
).toBe("/characters/maya/tip?planId=maya_coffee&payChannel=stripe");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const facebookBusinessEntryCases = [
|
const facebookBusinessEntryCases = [
|
||||||
["private-space", "elio", "chat", null, null, getCharacterRoutes("elio").chat, null],
|
["private-space", "elio", "chat", null, null, getCharacterRoutes("elio").chat, null],
|
||||||
["private-space", "maya", "chat", null, null, getCharacterRoutes("maya").chat, null],
|
["private-space", "maya", "chat", null, null, getCharacterRoutes("maya").chat, null],
|
||||||
|
|||||||
@@ -4,10 +4,8 @@ import { AuthStorage } from "@/data/storage/auth/auth_storage";
|
|||||||
import { UserStorage } from "@/data/storage/user/user_storage";
|
import { UserStorage } from "@/data/storage/user/user_storage";
|
||||||
import type { PendingChatPromotionType } from "@/data/storage/navigation";
|
import type { PendingChatPromotionType } from "@/data/storage/navigation";
|
||||||
import type { LoginStatus } from "@/data/schemas/auth";
|
import type { LoginStatus } from "@/data/schemas/auth";
|
||||||
import type { CheckoutIntent } from "@/data/schemas/auth";
|
|
||||||
import {
|
import {
|
||||||
DEFAULT_CHARACTER_SLUG,
|
DEFAULT_CHARACTER_SLUG,
|
||||||
getCharacterById,
|
|
||||||
getCharacterBySlug,
|
getCharacterBySlug,
|
||||||
} from "@/data/constants/character";
|
} from "@/data/constants/character";
|
||||||
import { getCharacterRoutes, ROUTES } from "@/router/routes";
|
import { getCharacterRoutes, ROUTES } from "@/router/routes";
|
||||||
@@ -102,34 +100,6 @@ export function resolveExternalEntryDestination({
|
|||||||
return routes.chat;
|
return routes.chat;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function resolveCheckoutIntentDestination(
|
|
||||||
intent: CheckoutIntent,
|
|
||||||
sourceCharacterSlug?: string | null,
|
|
||||||
): string {
|
|
||||||
const params = new URLSearchParams({ planId: intent.planId });
|
|
||||||
|
|
||||||
if (intent.recipientCharacterId) {
|
|
||||||
const character = getCharacterById(intent.recipientCharacterId);
|
|
||||||
const routes = getCharacterRoutes(
|
|
||||||
character?.slug ?? DEFAULT_CHARACTER_SLUG,
|
|
||||||
);
|
|
||||||
if (intent.chatActionId) params.set("chatActionId", intent.chatActionId);
|
|
||||||
params.set("payChannel", "stripe");
|
|
||||||
return `${routes.tip}?${params.toString()}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
params.set("autoRenew", intent.autoRenew ? "1" : "0");
|
|
||||||
const characterSlug =
|
|
||||||
getCharacterBySlug(sourceCharacterSlug)?.slug ?? DEFAULT_CHARACTER_SLUG;
|
|
||||||
params.set("character", characterSlug);
|
|
||||||
if (intent.commercialOfferId) {
|
|
||||||
params.set("commercialOfferId", intent.commercialOfferId);
|
|
||||||
}
|
|
||||||
if (intent.chatActionId) params.set("chatActionId", intent.chatActionId);
|
|
||||||
params.set("payChannel", "stripe");
|
|
||||||
return `${ROUTES.subscription}?${params.toString()}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function persistExternalEntryPayload({
|
export async function persistExternalEntryPayload({
|
||||||
deviceId,
|
deviceId,
|
||||||
asid,
|
asid,
|
||||||
@@ -168,7 +138,6 @@ function resolveTarget(
|
|||||||
return ROUTES.privateZone;
|
return ROUTES.privateZone;
|
||||||
}
|
}
|
||||||
if (target === "topup") return ROUTES.subscription;
|
if (target === "topup") return ROUTES.subscription;
|
||||||
if (target === "checkout") return ROUTES.subscription;
|
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import { describe, expect, it, vi } from "vitest";
|
|||||||
|
|
||||||
import {
|
import {
|
||||||
getPaymentUrl,
|
getPaymentUrl,
|
||||||
getStripeCustomerSessionClientSecret,
|
|
||||||
getStripeClientSecret,
|
getStripeClientSecret,
|
||||||
isEzpayPayment,
|
isEzpayPayment,
|
||||||
launchEzpayRedirect,
|
launchEzpayRedirect,
|
||||||
@@ -44,28 +43,6 @@ describe("payment launch helpers", () => {
|
|||||||
).toBeNull();
|
).toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("enables saved cards only with an explicit flag and a Customer Session secret", () => {
|
|
||||||
expect(
|
|
||||||
getStripeCustomerSessionClientSecret({
|
|
||||||
provider: "stripe",
|
|
||||||
customerSessionClientSecret: "cuss_123_secret_456",
|
|
||||||
savedPaymentMethodsEnabled: true,
|
|
||||||
}),
|
|
||||||
).toBe("cuss_123_secret_456");
|
|
||||||
expect(
|
|
||||||
getStripeCustomerSessionClientSecret({
|
|
||||||
customerSessionClientSecret: "cuss_123_secret_456",
|
|
||||||
savedPaymentMethodsEnabled: false,
|
|
||||||
}),
|
|
||||||
).toBeNull();
|
|
||||||
expect(
|
|
||||||
getStripeCustomerSessionClientSecret({
|
|
||||||
customerSessionClientSecret: "invalid-customer-session",
|
|
||||||
savedPaymentMethodsEnabled: true,
|
|
||||||
}),
|
|
||||||
).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("resolves Ezpay URL and QR launch parameters without treating QR data as a URL", () => {
|
it("resolves Ezpay URL and QR launch parameters without treating QR data as a URL", () => {
|
||||||
expect(
|
expect(
|
||||||
resolveEzpayLaunchTarget({
|
resolveEzpayLaunchTarget({
|
||||||
|
|||||||
@@ -1,33 +0,0 @@
|
|||||||
export const AUTOMATIC_RENEWAL_AGREEMENT_VERSION = "2026-07-29";
|
|
||||||
|
|
||||||
const STORAGE_PREFIX = "cozsweet.automatic-renewal-acknowledged";
|
|
||||||
|
|
||||||
function storageKey(subjectId: string | null | undefined): string | null {
|
|
||||||
const normalized = subjectId?.trim();
|
|
||||||
if (!normalized) return null;
|
|
||||||
return `${STORAGE_PREFIX}:${AUTOMATIC_RENEWAL_AGREEMENT_VERSION}:${encodeURIComponent(normalized)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function hasAutomaticRenewalAcknowledgement(
|
|
||||||
subjectId: string | null | undefined,
|
|
||||||
): boolean {
|
|
||||||
const key = storageKey(subjectId);
|
|
||||||
if (!key || typeof window === "undefined") return false;
|
|
||||||
try {
|
|
||||||
return window.localStorage.getItem(key) === "confirmed";
|
|
||||||
} catch {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function rememberAutomaticRenewalAcknowledgement(
|
|
||||||
subjectId: string | null | undefined,
|
|
||||||
): void {
|
|
||||||
const key = storageKey(subjectId);
|
|
||||||
if (!key || typeof window === "undefined") return;
|
|
||||||
try {
|
|
||||||
window.localStorage.setItem(key, "confirmed");
|
|
||||||
} catch {
|
|
||||||
// Storage can be unavailable in privacy-restricted in-app browsers.
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -143,27 +143,6 @@ export function getStripeClientSecret(
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getStripeCustomerSessionClientSecret(
|
|
||||||
payParams: Record<string, unknown>,
|
|
||||||
): string | null {
|
|
||||||
const provider = payParams.provider;
|
|
||||||
const isStripeProvider =
|
|
||||||
typeof provider !== "string" || provider.toLowerCase() === "stripe";
|
|
||||||
const enabled = payParams.savedPaymentMethodsEnabled === true;
|
|
||||||
const clientSecret = payParams.customerSessionClientSecret;
|
|
||||||
|
|
||||||
if (
|
|
||||||
isStripeProvider &&
|
|
||||||
enabled &&
|
|
||||||
typeof clientSecret === "string" &&
|
|
||||||
/^cuss_[^\s]+_secret_[^\s]+$/i.test(clientSecret)
|
|
||||||
) {
|
|
||||||
return clientSecret;
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface LaunchEzpayRedirectInput {
|
export interface LaunchEzpayRedirectInput {
|
||||||
orderId: string | null;
|
orderId: string | null;
|
||||||
paymentUrl: string;
|
paymentUrl: string;
|
||||||
|
|||||||
@@ -22,15 +22,6 @@ export function parsePaymentPayChannel(
|
|||||||
return channel === "ezpay" || channel === "stripe" ? channel : null;
|
return channel === "ezpay" || channel === "stripe" ? channel : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function parsePaymentAutoRenew(
|
|
||||||
value: PaymentSearchParamValue,
|
|
||||||
): boolean | null {
|
|
||||||
const autoRenew = getFirstPaymentSearchParam(value);
|
|
||||||
if (autoRenew === "1" || autoRenew === "true") return true;
|
|
||||||
if (autoRenew === "0" || autoRenew === "false") return false;
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function parseSubscriptionReturnTo(
|
export function parseSubscriptionReturnTo(
|
||||||
value: PaymentSearchParamValue,
|
value: PaymentSearchParamValue,
|
||||||
): AppSubscriptionReturnTo {
|
): AppSubscriptionReturnTo {
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ import {
|
|||||||
|
|
||||||
import {
|
import {
|
||||||
createTestPaymentMachine,
|
createTestPaymentMachine,
|
||||||
|
giftCatalog,
|
||||||
lifetimePlan,
|
lifetimePlan,
|
||||||
monthlyPlan,
|
monthlyPlan,
|
||||||
quarterlyPlan,
|
quarterlyPlan,
|
||||||
@@ -50,7 +51,7 @@ describe("payment catalog flow", () => {
|
|||||||
actor.stop();
|
actor.stop();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("restores a valid tip product across categories from checkout handoff", async () => {
|
it("restores a valid first-category product and rejects another category", async () => {
|
||||||
const actor = createActor(createTestPaymentMachine()).start();
|
const actor = createActor(createTestPaymentMachine()).start();
|
||||||
actor.send({
|
actor.send({
|
||||||
type: "PaymentInit",
|
type: "PaymentInit",
|
||||||
@@ -78,9 +79,8 @@ describe("payment catalog flow", () => {
|
|||||||
snapshot.context.requestedGiftPlanId === null,
|
snapshot.context.requestedGiftPlanId === null,
|
||||||
);
|
);
|
||||||
expect(actor.getSnapshot().context.selectedPlanId).toBe(
|
expect(actor.getSnapshot().context.selectedPlanId).toBe(
|
||||||
"tip_flowers_usd_12_99",
|
giftCatalog.plans[0]?.planId,
|
||||||
);
|
);
|
||||||
expect(actor.getSnapshot().context.selectedGiftCategory).toBe("flowers");
|
|
||||||
actor.stop();
|
actor.stop();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -50,23 +50,15 @@ export function hydrateGiftProductsState(
|
|||||||
const giftProducts = response.plans.filter(
|
const giftProducts = response.plans.filter(
|
||||||
(product) => product.characterId === characterId,
|
(product) => product.characterId === characterId,
|
||||||
);
|
);
|
||||||
const restoredProduct = restoredPlanId
|
const selectedGiftCategory = giftCategories[0]?.category ?? null;
|
||||||
? giftProducts.find((product) => product.planId === restoredPlanId)
|
|
||||||
: null;
|
|
||||||
const selectedGiftCategory =
|
|
||||||
restoredProduct?.category ??
|
|
||||||
(restoredCategory &&
|
|
||||||
giftCategories.some((category) => category.category === restoredCategory)
|
|
||||||
? restoredCategory
|
|
||||||
: (giftCategories[0]?.category ?? null));
|
|
||||||
const visibleProducts = selectedGiftCategory
|
const visibleProducts = selectedGiftCategory
|
||||||
? giftProducts.filter(
|
? giftProducts.filter(
|
||||||
(product) => product.category === selectedGiftCategory,
|
(product) => product.category === selectedGiftCategory,
|
||||||
)
|
)
|
||||||
: [];
|
: [];
|
||||||
const canRestoreSelection = visibleProducts.some(
|
const canRestoreSelection =
|
||||||
(product) => product.planId === restoredPlanId,
|
restoredCategory === selectedGiftCategory &&
|
||||||
);
|
visibleProducts.some((product) => product.planId === restoredPlanId);
|
||||||
const selectedPlanId = canRestoreSelection
|
const selectedPlanId = canRestoreSelection
|
||||||
? (restoredPlanId ?? "")
|
? (restoredPlanId ?? "")
|
||||||
: (visibleProducts[0]?.planId ?? "");
|
: (visibleProducts[0]?.planId ?? "");
|
||||||
|
|||||||
@@ -38,18 +38,14 @@ function initializeCatalogState(
|
|||||||
giftCharacterId !== context.giftCharacterId ||
|
giftCharacterId !== context.giftCharacterId ||
|
||||||
supportCharacterId !== context.supportCharacterId;
|
supportCharacterId !== context.supportCharacterId;
|
||||||
const selectionChanged =
|
const selectionChanged =
|
||||||
planCatalog === "tip"
|
planCatalog === "tip" &&
|
||||||
? (event.category ?? null) !== context.selectedGiftCategory ||
|
((event.category ?? null) !== context.selectedGiftCategory ||
|
||||||
(event.planId ?? null) !== (context.selectedPlanId || null)
|
(event.planId ?? null) !== (context.selectedPlanId || null));
|
||||||
: (event.planId ?? null) !== (context.selectedPlanId || null);
|
|
||||||
const commercialOfferId =
|
const commercialOfferId =
|
||||||
planCatalog === "default" ? (event.commercialOfferId ?? null) : null;
|
planCatalog === "default" ? (event.commercialOfferId ?? null) : null;
|
||||||
const offerChanged = commercialOfferId !== context.commercialOfferId;
|
const offerChanged = commercialOfferId !== context.commercialOfferId;
|
||||||
const chatActionId = event.chatActionId ?? null;
|
const chatActionId = event.chatActionId ?? null;
|
||||||
const chatActionChanged = chatActionId !== context.chatActionId;
|
const chatActionChanged = chatActionId !== context.chatActionId;
|
||||||
const initialAutoRenew =
|
|
||||||
planCatalog === "tip" ? false : (event.autoRenew ?? true);
|
|
||||||
const autoRenewChanged = initialAutoRenew !== context.autoRenew;
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
planCatalog,
|
planCatalog,
|
||||||
@@ -62,12 +58,7 @@ function initializeCatalogState(
|
|||||||
planCatalog === "tip" ? (event.category ?? null) : null,
|
planCatalog === "tip" ? (event.category ?? null) : null,
|
||||||
requestedGiftPlanId:
|
requestedGiftPlanId:
|
||||||
planCatalog === "tip" ? (event.planId ?? null) : null,
|
planCatalog === "tip" ? (event.planId ?? null) : null,
|
||||||
...(catalogChanged ||
|
...(catalogChanged || characterChanged || selectionChanged || offerChanged || chatActionChanged
|
||||||
characterChanged ||
|
|
||||||
selectionChanged ||
|
|
||||||
offerChanged ||
|
|
||||||
chatActionChanged ||
|
|
||||||
autoRenewChanged
|
|
||||||
? {
|
? {
|
||||||
...resetOrderState(),
|
...resetOrderState(),
|
||||||
plans: [],
|
plans: [],
|
||||||
@@ -78,7 +69,7 @@ function initializeCatalogState(
|
|||||||
planCatalog === "default" ? (event.planId ?? "") : "",
|
planCatalog === "default" ? (event.planId ?? "") : "",
|
||||||
isFirstRecharge: false,
|
isFirstRecharge: false,
|
||||||
commercialOffer: null,
|
commercialOffer: null,
|
||||||
autoRenew: initialAutoRenew,
|
autoRenew: planCatalog !== "tip",
|
||||||
}
|
}
|
||||||
: {}),
|
: {}),
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -20,8 +20,6 @@ export interface PaymentContextState {
|
|||||||
selectedGiftCategory: string | null;
|
selectedGiftCategory: string | null;
|
||||||
isFirstRecharge: MachineContext["isFirstRecharge"];
|
isFirstRecharge: MachineContext["isFirstRecharge"];
|
||||||
commercialOffer: MachineContext["commercialOffer"];
|
commercialOffer: MachineContext["commercialOffer"];
|
||||||
commercialOfferId: string | null;
|
|
||||||
chatActionId: string | null;
|
|
||||||
selectedPlanId: string;
|
selectedPlanId: string;
|
||||||
payChannel: MachineContext["payChannel"];
|
payChannel: MachineContext["payChannel"];
|
||||||
autoRenew: boolean;
|
autoRenew: boolean;
|
||||||
@@ -78,8 +76,6 @@ function selectPaymentState(state: PaymentSnapshot): PaymentContextState {
|
|||||||
selectedGiftCategory: state.context.selectedGiftCategory,
|
selectedGiftCategory: state.context.selectedGiftCategory,
|
||||||
isFirstRecharge: state.context.isFirstRecharge,
|
isFirstRecharge: state.context.isFirstRecharge,
|
||||||
commercialOffer: state.context.commercialOffer,
|
commercialOffer: state.context.commercialOffer,
|
||||||
commercialOfferId: state.context.commercialOfferId,
|
|
||||||
chatActionId: state.context.chatActionId,
|
|
||||||
selectedPlanId: state.context.selectedPlanId,
|
selectedPlanId: state.context.selectedPlanId,
|
||||||
payChannel: state.context.payChannel,
|
payChannel: state.context.payChannel,
|
||||||
autoRenew: state.context.autoRenew,
|
autoRenew: state.context.autoRenew,
|
||||||
|
|||||||
@@ -10,7 +10,6 @@ export type PaymentEvent =
|
|||||||
characterId?: string;
|
characterId?: string;
|
||||||
category?: string | null;
|
category?: string | null;
|
||||||
planId?: string | null;
|
planId?: string | null;
|
||||||
autoRenew?: boolean;
|
|
||||||
commercialOfferId?: string | null;
|
commercialOfferId?: string | null;
|
||||||
chatActionId?: string | null;
|
chatActionId?: string | null;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,33 +0,0 @@
|
|||||||
import { describe, expect, it } from "vitest";
|
|
||||||
|
|
||||||
import { Logger } from "../logger";
|
|
||||||
|
|
||||||
describe("Logger Stripe secret redaction", () => {
|
|
||||||
it("redacts nested Stripe secret fields and values before formatting", () => {
|
|
||||||
const output = Logger.formatValue({
|
|
||||||
payParams: {
|
|
||||||
clientSecret: "pi_123_secret_card",
|
|
||||||
nested: {
|
|
||||||
customerSessionClientSecret: "cuss_123_secret_saved",
|
|
||||||
handoffToken: "one-time-checkout-token",
|
|
||||||
safe: "order-123",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(output).toContain("order-123");
|
|
||||||
expect(output).not.toContain("secret_card");
|
|
||||||
expect(output).not.toContain("secret_saved");
|
|
||||||
expect(output).not.toContain("one-time-checkout-token");
|
|
||||||
expect(output.match(/\[REDACTED\]/g)?.length).toBeGreaterThanOrEqual(3);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("redacts a secret embedded in a serialized response string", () => {
|
|
||||||
const output = Logger.formatValue(
|
|
||||||
JSON.stringify({ customerSessionClientSecret: "cuss_1_secret_value" }),
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(output).not.toContain("secret_value");
|
|
||||||
expect(output).toContain("[REDACTED]");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
+16
-49
@@ -107,13 +107,9 @@ export class Logger {
|
|||||||
const trimmed = value.trim();
|
const trimmed = value.trim();
|
||||||
if (trimmed.length === 0) return "";
|
if (trimmed.length === 0) return "";
|
||||||
try {
|
try {
|
||||||
return JSON.stringify(
|
return JSON.stringify(JSON.parse(trimmed), null, 2);
|
||||||
Logger.toSerializableLogValue(JSON.parse(trimmed)),
|
|
||||||
null,
|
|
||||||
2,
|
|
||||||
);
|
|
||||||
} catch {
|
} catch {
|
||||||
return Logger.redactSensitiveString(value);
|
return value;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -153,31 +149,28 @@ export class Logger {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private write(level: LogLevel, args: LogArgs): void {
|
private write(level: LogLevel, args: LogArgs): void {
|
||||||
const safeArgs = args.map((value) =>
|
Logger.reportImportantProductionLog(level, this.component, args);
|
||||||
Logger.toSerializableLogValue(value),
|
|
||||||
);
|
|
||||||
Logger.reportImportantProductionLog(level, this.component, safeArgs);
|
|
||||||
|
|
||||||
if (Logger.shouldUseBrowserConsole()) {
|
if (Logger.shouldUseBrowserConsole()) {
|
||||||
Logger.writeBrowserConsole(level, this.component, safeArgs);
|
Logger.writeBrowserConsole(level, this.component, args);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (level) {
|
switch (level) {
|
||||||
case "debug":
|
case "debug":
|
||||||
this.logger.debug(...Logger.normalizeLogArgs(safeArgs));
|
this.logger.debug(...Logger.normalizeLogArgs(args));
|
||||||
return;
|
return;
|
||||||
case "info":
|
case "info":
|
||||||
this.logger.info(...Logger.normalizeLogArgs(safeArgs));
|
this.logger.info(...Logger.normalizeLogArgs(args));
|
||||||
return;
|
return;
|
||||||
case "warn":
|
case "warn":
|
||||||
this.logger.warn(...Logger.normalizeLogArgs(safeArgs));
|
this.logger.warn(...Logger.normalizeLogArgs(args));
|
||||||
return;
|
return;
|
||||||
case "error":
|
case "error":
|
||||||
this.logger.error(...Logger.normalizeLogArgs(safeArgs));
|
this.logger.error(...Logger.normalizeLogArgs(args));
|
||||||
return;
|
return;
|
||||||
case "fatal":
|
case "fatal":
|
||||||
this.logger.fatal(...Logger.normalizeLogArgs(safeArgs));
|
this.logger.fatal(...Logger.normalizeLogArgs(args));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -273,10 +266,6 @@ export class Logger {
|
|||||||
return value.map((item) => Logger.toSerializableLogValue(item, seen));
|
return value.map((item) => Logger.toSerializableLogValue(item, seen));
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof value === "string") {
|
|
||||||
return Logger.redactSensitiveString(value);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof value !== "object" || value === null) {
|
if (typeof value !== "object" || value === null) {
|
||||||
return value;
|
return value;
|
||||||
}
|
}
|
||||||
@@ -292,39 +281,19 @@ export class Logger {
|
|||||||
|
|
||||||
const output: Record<string, unknown> = {};
|
const output: Record<string, unknown> = {};
|
||||||
for (const [key, item] of Object.entries(value)) {
|
for (const [key, item] of Object.entries(value)) {
|
||||||
output[key] = Logger.isSensitiveLogKey(key)
|
output[key] = Logger.toSerializableLogValue(item, seen);
|
||||||
? "[REDACTED]"
|
|
||||||
: Logger.toSerializableLogValue(item, seen);
|
|
||||||
}
|
}
|
||||||
return output;
|
return output;
|
||||||
}
|
}
|
||||||
|
|
||||||
private static isSensitiveLogKey(key: string): boolean {
|
|
||||||
const normalized = key.replace(/[^a-z0-9]/gi, "").toLowerCase();
|
|
||||||
return (
|
|
||||||
normalized === "clientsecret" ||
|
|
||||||
normalized === "customersessionclientsecret" ||
|
|
||||||
normalized === "handofftoken" ||
|
|
||||||
normalized === "accesstoken" ||
|
|
||||||
normalized === "refreshtoken" ||
|
|
||||||
normalized === "authorization"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private static redactSensitiveString(value: string): string {
|
|
||||||
return /_secret_/i.test(value) ? "[REDACTED]" : value;
|
|
||||||
}
|
|
||||||
|
|
||||||
private static serializeError(
|
private static serializeError(
|
||||||
error: Error,
|
error: Error,
|
||||||
seen: WeakSet<object>,
|
seen: WeakSet<object>,
|
||||||
): Record<string, unknown> {
|
): Record<string, unknown> {
|
||||||
const output: Record<string, unknown> = {
|
const output: Record<string, unknown> = {
|
||||||
name: error.name,
|
name: error.name,
|
||||||
message: Logger.redactSensitiveString(error.message),
|
message: error.message,
|
||||||
stack: error.stack
|
stack: error.stack,
|
||||||
? Logger.redactSensitiveString(error.stack)
|
|
||||||
: undefined,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (seen.has(error)) {
|
if (seen.has(error)) {
|
||||||
@@ -334,12 +303,10 @@ export class Logger {
|
|||||||
|
|
||||||
for (const key of Object.getOwnPropertyNames(error)) {
|
for (const key of Object.getOwnPropertyNames(error)) {
|
||||||
if (key in output) continue;
|
if (key in output) continue;
|
||||||
output[key] = Logger.isSensitiveLogKey(key)
|
output[key] = Logger.toSerializableLogValue(
|
||||||
? "[REDACTED]"
|
(error as unknown as Record<string, unknown>)[key],
|
||||||
: Logger.toSerializableLogValue(
|
seen,
|
||||||
(error as unknown as Record<string, unknown>)[key],
|
);
|
||||||
seen,
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
return output;
|
return output;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user