banlv/cozsweet-frontend-nextjs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(tip): allow checkout for all auth states

Browse Source
This commit is contained in:
chenhang
2026-07-20 18:36:44 +08:00
parent 1e13f94b5d
commit c187f0b817
5 changed files with 196 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/tip/__tests__/tip-screen.checkout.test.tsx
+191
View File
@@ -0,0 +1,191 @@
/* @vitest-environment jsdom */
import { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import {
PaymentPlanSchema,
type PaymentPlan,
} from "@/data/schemas/payment";
import type { PaymentContextState } from "@/stores/payment/payment-context";
const mocks = vi.hoisted(() => ({
payment: null as unknown as PaymentContextState,
paymentDispatch: vi.fn(),
planClick: vi.fn(),
}));
vi.mock("@/app/_components", () => ({
BackButton: () => null,
CharacterAvatar: () => null,
}));
vi.mock("@/app/_components/core", () => ({
MobileShell: ({ children }: { children: React.ReactNode }) => children,
}));
vi.mock("@/app/_components/payment/payment-method-selector", () => ({
PaymentMethodSelector: () => null,
}));
vi.mock("@/app/_hooks/use-payment-method-selection", () => ({
usePaymentMethodSelection: () => undefined,
}));
vi.mock("@/app/_hooks/use-payment-plan-analytics", () => ({
usePaymentPlanAnalytics: () => undefined,
}));
vi.mock("@/app/_hooks/use-payment-route-flow", () => ({
usePaymentRouteFlow: () => ({
payment: mocks.payment,
paymentDispatch: mocks.paymentDispatch,
}),
}));
vi.mock("@/lib/analytics", () => ({
behaviorAnalytics: { planClick: mocks.planClick },
}));
vi.mock("@/providers/character-provider", () => ({
useActiveCharacter: () => ({
id: "maya-tan",
displayName: "Maya Tan",
assets: {
avatar: "/images/avatar/maya.png",
cover: "/images/cover/maya.png",
},
copy: {
tipHeader: "Tip Maya",
tipTitle: "Buy Maya a coffee",
},
}),
useActiveCharacterRoutes: () => ({
splash: "/characters/maya/splash",
tip: "/characters/maya/tip",
}),
}));
vi.mock("@/stores/user/user-context", () => ({
useUserState: () => ({ currentUser: null }),
}));
vi.mock("../tip-checkout-button", () => ({
TipCheckoutButton: ({
disabled,
onOrder,
}: {
disabled?: boolean;
onOrder: () => void;
}) => (
<button
type="button"
data-testid="tip-checkout"
disabled={disabled}
onClick={onOrder}
>
Checkout
</button>
),
}));
vi.mock("../tip-coffee-tier-selector", () => ({
TipCoffeeTierSelector: () => null,
}));
import { TipScreen } from "../tip-screen";
const mediumPlan: PaymentPlan = PaymentPlanSchema.parse({
planId: "tip_coffee_usd_9_99",
planName: "Gilded Heart",
orderType: "tip",
vipDays: null,
dolAmount: null,
creditBalance: 0,
amountCents: 999,
originalAmountCents: null,
dailyPriceCents: null,
currency: "USD",
isFirstRechargeOffer: false,
mostPopular: false,
firstRechargeDiscountPercent: null,
promotionType: null,
});
describe("TipScreen checkout", () => {
let container: HTMLDivElement;
let root: Root;
beforeEach(() => {
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
.IS_REACT_ACT_ENVIRONMENT = true;
mocks.payment = makePaymentState();
mocks.paymentDispatch.mockReset();
mocks.planClick.mockReset();
container = document.createElement("div");
document.body.append(container);
root = createRoot(container);
});
afterEach(() => {
act(() => root.unmount());
container.remove();
});
it("creates a character-attributed order without an AuthProvider", () => {
renderScreen();
const checkout = getCheckoutButton();
expect(checkout.disabled).toBe(false);
act(() => checkout.click());
expect(mocks.planClick).toHaveBeenCalledWith(
mediumPlan,
expect.objectContaining({ entryPoint: "tip_page" }),
);
expect(mocks.paymentDispatch).toHaveBeenCalledWith({
type: "PaymentCreateOrderSubmitted",
recipientCharacterId: "maya-tan",
});
});
it.each([
["plans are loading", { isLoadingPlans: true }],
["the selected plan is missing", { plans: [], selectedPlanId: "" }],
["an order is being created", { isCreatingOrder: true }],
["an order is being polled", { isPollingOrder: true }],
["the order is paid", { isPaid: true }],
] as const)("disables checkout when %s", (_label, overrides) => {
mocks.payment = makePaymentState(overrides);
renderScreen();
expect(getCheckoutButton().disabled).toBe(true);
});
function renderScreen(): void {
act(() => root.render(<TipScreen />));
}
function getCheckoutButton(): HTMLButtonElement {
const button = container.querySelector<HTMLButtonElement>(
'[data-testid="tip-checkout"]',
);
if (!button) throw new Error("Missing Tip checkout button");
return button;
}
});
function makePaymentState(
overrides: Partial<PaymentContextState> = {},
): PaymentContextState {
return {
status: "ready",
plans: [mediumPlan],
isFirstRecharge: false,
selectedPlanId: mediumPlan.planId,
payChannel: "stripe",
autoRenew: false,
agreed: true,
currentOrderId: null,
payParams: null,
orderStatus: null,
errorMessage: null,
launchNonce: 0,
isLoadingPlans: false,
isCreatingOrder: false,
isPollingOrder: false,
isPaid: false,
...overrides,
};
}
src/app/tip/__tests__/tip-screen.helpers.test.ts
-7
View File
@@ -6,7 +6,6 @@ import type { PaymentPlanInput } from "@/data/schemas/payment/payment_plan";
import {
findTipCoffeePlan,
formatTipPrice,
isRealLoginStatus,
} from "../tip-screen.helpers";
function makePlan(input: Partial<PaymentPlanInput>): PaymentPlan {
@@ -74,10 +73,4 @@ describe("tip screen helpers", () => {
expect(formatTipPrice(null, "medium")).toBe("US$ 9.99");
expect(formatTipPrice(null, "large")).toBe("US$ 19.99");
});
it("treats guest and notLoggedIn as non-real login states", () => {
expect(isRealLoginStatus("guest")).toBe(false);
expect(isRealLoginStatus("notLoggedIn")).toBe(false);
expect(isRealLoginStatus("facebook")).toBe(true);
});
});
src/app/tip/tip-checkout-button.tsx
+1 -4
View File
@@ -17,7 +17,6 @@ const log = new Logger("TipCheckoutButton");
export interface TipCheckoutButtonProps {
coffeeType: TipCoffeeType;
disabled?: boolean;
isAuthLoading?: boolean;
onOrder: () => void;
returnPath: string;
}
@@ -25,7 +24,6 @@ export interface TipCheckoutButtonProps {
export function TipCheckoutButton({
coffeeType,
disabled = false,
isAuthLoading = false,
onOrder,
returnPath,
}: TipCheckoutButtonProps) {
@@ -42,8 +40,7 @@ export function TipCheckoutButton({
characterSlug: character.slug,
});
const isLoading =
isAuthLoading || payment.isCreatingOrder || payment.isPollingOrder;
const isLoading = payment.isCreatingOrder || payment.isPollingOrder;
const label = payment.isPollingOrder
? "Processing payment..."
: payment.isCreatingOrder
src/app/tip/tip-screen.helpers.ts
-5
View File
@@ -1,4 +1,3 @@
import type { LoginStatus } from "@/data/schemas/auth";
import type { PaymentPlan } from "@/data/schemas/payment";
import {
getTipCoffeeOption,
@@ -30,7 +29,3 @@ export function formatTipPrice(
if (currency.length > 0) return `${currency} ${formattedAmount}`;
return formattedAmount;
}
export function isRealLoginStatus(loginStatus: LoginStatus): boolean {
return loginStatus !== "notLoggedIn" && loginStatus !== "guest";
}
src/app/tip/tip-screen.tsx
+4 -20
View File
@@ -23,12 +23,10 @@ import {
TIP_COFFEE_OPTIONS,
type TipCoffeeType,
} from "@/lib/tip/tip_coffee";
import { useAppNavigator } from "@/router/use-app-navigator";
import {
useActiveCharacter,
useActiveCharacterRoutes,
} from "@/providers/character-provider";
import { useAuthState } from "@/stores/auth/auth-context";
import { useUserState } from "@/stores/user/user-context";
import { TipCheckoutButton } from "./tip-checkout-button";
@@ -39,7 +37,6 @@ import {
import {
findTipCoffeePlan,
formatTipPrice,
isRealLoginStatus,
} from "./tip-screen.helpers";
import styles from "./tip-screen.module.css";
@@ -59,10 +56,8 @@ export function TipScreen({
shouldResumePendingOrder = false,
initialPayChannel = null,
}: TipScreenProps) {
const navigator = useAppNavigator();
const character = useActiveCharacter();
const characterRoutes = useActiveCharacterRoutes();
const authState = useAuthState();
const userState = useUserState();
const paymentMethodConfig = getPaymentMethodConfig({
countryCode: userState.currentUser?.countryCode,
@@ -125,7 +120,6 @@ export function TipScreen({
payment.status === "ready" && !payment.isLoadingPlans && coffeePlan === null;
const isTierSelectionDisabled =
payment.status !== "ready" || payment.isLoadingPlans || isPaymentBusy;
const isAuthLoading = !authState.hasInitialized || authState.isLoading;
const handlePaymentMethodChange = (payChannel: PayChannel) => {
paymentDispatch({
@@ -176,16 +170,9 @@ export function TipScreen({
]);
const handleOrder = () => {
if (isAuthLoading) return;
if (coffeePlan) {
behaviorAnalytics.planClick(coffeePlan, TIP_ANALYTICS_CONTEXT);
}
if (!isRealLoginStatus(authState.loginStatus)) {
navigator.openAuth(returnPath);
return;
}
if (!canCreateOrder) return;
behaviorAnalytics.planClick(coffeePlan, TIP_ANALYTICS_CONTEXT);
paymentDispatch({
type: "PaymentCreateOrderSubmitted",
recipientCharacterId: character.id,
@@ -249,7 +236,8 @@ export function TipScreen({
{character.copy.tipTitle}
</h1>
<p className={styles.subtitle}>
Send a warm coffee tip and keep the private moments glowing.
❤️ Thank you for being here. If you&apos;d ever like to treat me to a
little coffee, I&apos;d really appreciate it. ☕
</p>
</section>
@@ -322,11 +310,7 @@ export function TipScreen({
<div className={styles.checkoutSlot}>
<TipCheckoutButton
coffeeType={selectedCoffeeType}
disabled={
showMissingPlan ||
(!canCreateOrder && isRealLoginStatus(authState.loginStatus))
}
isAuthLoading={isAuthLoading}
disabled={showMissingPlan || !canCreateOrder}
onOrder={handleOrder}
returnPath={returnPath}
/>