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

refactor(subscription): tighten payment flow boundaries

Browse Source
This commit is contained in:
chenhang
2026-06-30 15:36:49 +08:00
parent 61504050e5
commit 218df59345
9 changed files with 640 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/subscription/subscription-screen.tsx
+36 -172
View File
@@ -1,21 +1,9 @@
"use client";
import { useEffect, useMemo, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { useEffect, useMemo } from "react";
import { BackButton } from "@/app/_components";
import { Checkbox, MobileShell } from "@/app/_components/core";
import { AppConstants } from "@/core/app_constants";
import { consumePendingChatImageReturn } from "@/lib/navigation/chat_image_return_session";
import {
clearPendingPaymentOrder,
getPendingPaymentOrderForType,
} from "@/lib/payment/pending_payment_order";
import {
usePaymentDispatch,
usePaymentState,
} from "@/stores/payment/payment-context";
import { useUserDispatch } from "@/stores/user/user-context";
import { ROUTES } from "@/router/routes";
import {
SubscriptionCheckoutButton,
@@ -26,12 +14,13 @@ import {
} from "./components";
import styles from "./components/subscription-screen.module.css";
import {
isCreditPlan,
isVipPlan,
toCoinsOfferPlanView,
toVipOfferPlanView,
findSelectedSubscriptionPlan,
getDefaultSubscriptionPlanId,
toCoinsOfferPlanViews,
toVipOfferPlanViews,
type SubscriptionType,
} from "./subscription-screen.helpers";
import { useSubscriptionPaymentFlow } from "./use-subscription-payment-flow";
export type { SubscriptionType } from "./subscription-screen.helpers";
@@ -46,180 +35,55 @@ export function SubscriptionScreen({
shouldResumePendingOrder = false,
returnTo = null,
}: SubscriptionScreenProps) {
const router = useRouter();
const userDispatch = useUserDispatch();
const payment = usePaymentState();
const paymentDispatch = usePaymentDispatch();
const refreshedPaidOrderRef = useRef<string | null>(null);
const resumedPendingOrderRef = useRef<string | null>(null);
const successDialogShownOrderRef = useRef<string | null>(null);
const [showPaymentSuccessDialog, setShowPaymentSuccessDialog] =
useState(false);
const {
payment,
paymentDispatch,
showPaymentSuccessDialog,
handleBackClick,
handlePaymentSuccessClose,
} = useSubscriptionPaymentFlow({
subscriptionType,
shouldResumePendingOrder,
returnTo,
});
const canSubscribeVip = subscriptionType === "vip";
useEffect(() => {
if (payment.status === "idle") {
paymentDispatch({ type: "PaymentInit" });
}
}, [payment.status, paymentDispatch]);
useEffect(() => {
if (!payment.isPaid || !payment.currentOrderId) return;
if (refreshedPaidOrderRef.current === payment.currentOrderId) return;
refreshedPaidOrderRef.current = payment.currentOrderId;
userDispatch({ type: "UserFetch" });
}, [payment.currentOrderId, payment.isPaid, userDispatch]);
useEffect(() => {
if (!payment.isPaid || !payment.currentOrderId) return;
if (successDialogShownOrderRef.current === payment.currentOrderId) return;
successDialogShownOrderRef.current = payment.currentOrderId;
setShowPaymentSuccessDialog(true);
}, [payment.currentOrderId, payment.isPaid]);
useEffect(() => {
const canInspectPendingOrder =
payment.status === "ready" ||
(!shouldResumePendingOrder &&
(payment.isPollingOrder || payment.isPaid || payment.status === "failed"));
if (!canInspectPendingOrder) return;
let cancelled = false;
const handlePendingOrder = async () => {
const result = await getPendingPaymentOrderForType(subscriptionType);
if (cancelled || !result.success || result.data === null) return;
if (!shouldResumePendingOrder) {
await clearPendingPaymentOrder();
if (
payment.currentOrderId === result.data.orderId &&
(payment.isPollingOrder || payment.isPaid || payment.status === "failed")
) {
paymentDispatch({ type: "PaymentReset" });
}
return;
}
if (payment.currentOrderId === result.data.orderId) return;
if (resumedPendingOrderRef.current === result.data.orderId) return;
resumedPendingOrderRef.current = result.data.orderId;
paymentDispatch({
type: "PaymentReturned",
orderId: result.data.orderId,
createdAt: result.data.createdAt,
});
};
void handlePendingOrder();
return () => {
cancelled = true;
};
}, [
payment.currentOrderId,
payment.isPaid,
payment.isPollingOrder,
payment.status,
paymentDispatch,
shouldResumePendingOrder,
subscriptionType,
]);
useEffect(() => {
if (!payment.currentOrderId) return;
if (!payment.isPaid && payment.status !== "failed") return;
void clearPendingPaymentOrder();
}, [payment.currentOrderId, payment.isPaid, payment.status]);
const vipOfferPlans = useMemo(
() =>
payment.plans
.filter(isVipPlan)
.slice(0, 3)
.map(toVipOfferPlanView),
() => toVipOfferPlanViews(payment.plans),
[payment.plans],
);
const directCoinsPlans = useMemo(
() => payment.plans.filter(isCreditPlan).map(toCoinsOfferPlanView),
() => toCoinsOfferPlanViews(payment.plans),
[payment.plans],
);
const selectedPlan =
(canSubscribeVip
? [...vipOfferPlans, ...directCoinsPlans].find(
(plan) => plan.id === payment.selectedPlanId,
)
: directCoinsPlans.find((plan) => plan.id === payment.selectedPlanId)) ??
null;
const selectedPlan = findSelectedSubscriptionPlan({
canSubscribeVip,
selectedPlanId: payment.selectedPlanId,
vipPlans: vipOfferPlans,
coinPlans: directCoinsPlans,
});
const isPaymentBusy =
payment.isCreatingOrder ||
payment.isPollingOrder;
const canActivate =
selectedPlan !== null && payment.agreed && !isPaymentBusy;
const consumeSubscriptionExitUrl = (): string | null => {
const pendingImageReturn = consumePendingChatImageReturn();
if (pendingImageReturn) return pendingImageReturn.returnUrl;
return null;
};
const handleBackClick = () => {
router.replace(
consumeSubscriptionExitUrl() ??
(returnTo === "chat" ? ROUTES.chat : ROUTES.sidebar),
);
};
const finishPaymentSuccessClose = () => {
setShowPaymentSuccessDialog(false);
paymentDispatch({ type: "PaymentReset" });
const pendingExitUrl = consumeSubscriptionExitUrl();
if (pendingExitUrl) {
router.replace(pendingExitUrl);
return;
}
if (returnTo === "chat") {
router.replace(ROUTES.chat);
}
};
const handlePaymentSuccessClose = () => {
finishPaymentSuccessClose();
};
useEffect(() => {
if (canSubscribeVip) {
const firstVipPlanId = vipOfferPlans[0]?.id ?? "";
const hasSelectedVipPlan = vipOfferPlans.some(
(plan) => plan.id === payment.selectedPlanId,
);
const hasSelectedCoinsPlan = directCoinsPlans.some(
(plan) => plan.id === payment.selectedPlanId,
);
const canSelectPlan =
firstVipPlanId.length > 0 &&
(payment.status === "ready" ||
payment.status === "paid" ||
payment.status === "failed");
if (!canSelectPlan || hasSelectedVipPlan || hasSelectedCoinsPlan) return;
paymentDispatch({
type: "PaymentPlanSelected",
planId: firstVipPlanId,
});
return;
}
if (payment.isLoadingPlans || directCoinsPlans.length === 0) return;
if (selectedPlan !== null) return;
const defaultPlanId = getDefaultSubscriptionPlanId({
canSubscribeVip,
selectedPlanId: payment.selectedPlanId,
status: payment.status,
isLoadingPlans: payment.isLoadingPlans,
selectedPlan,
vipPlans: vipOfferPlans,
coinPlans: directCoinsPlans,
});
if (!defaultPlanId) return;
paymentDispatch({
type: "PaymentPlanSelected",
planId: directCoinsPlans[0]?.id ?? "",
planId: defaultPlanId,
});
}, [
canSubscribeVip,