fix(subscription): return chat paywalls after payment
This commit is contained in:
@@ -56,6 +56,9 @@ export function ChatScreen() {
|
||||
const inlineUpgradeCta = "Activate VIP to view private messages";
|
||||
|
||||
const externalBrowserPromptShownRef = useRef(false);
|
||||
const chatPaywallSubscriptionUrl = ROUTE_BUILDERS.subscription("vip", {
|
||||
returnTo: "chat",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!authState.hasInitialized || authState.isLoading) return;
|
||||
@@ -127,30 +130,27 @@ export function ChatScreen() {
|
||||
}
|
||||
|
||||
function handleUnlockPrivateMessage(): void {
|
||||
const subscriptionUrl = ROUTE_BUILDERS.subscription("vip");
|
||||
if (isGuest) {
|
||||
router.push(ROUTE_BUILDERS.authWithRedirect(subscriptionUrl));
|
||||
router.push(ROUTE_BUILDERS.authWithRedirect(chatPaywallSubscriptionUrl));
|
||||
return;
|
||||
}
|
||||
router.push(subscriptionUrl);
|
||||
router.push(chatPaywallSubscriptionUrl);
|
||||
}
|
||||
|
||||
function handleUnlockImagePaywall(): void {
|
||||
const subscriptionUrl = ROUTE_BUILDERS.subscription("vip");
|
||||
if (isGuest) {
|
||||
router.push(ROUTE_BUILDERS.authWithRedirect(subscriptionUrl));
|
||||
router.push(ROUTE_BUILDERS.authWithRedirect(chatPaywallSubscriptionUrl));
|
||||
return;
|
||||
}
|
||||
router.push(subscriptionUrl);
|
||||
router.push(chatPaywallSubscriptionUrl);
|
||||
}
|
||||
|
||||
function handleMessageLimitUnlock(): void {
|
||||
const subscriptionUrl = ROUTE_BUILDERS.subscription("vip");
|
||||
if (isGuest) {
|
||||
router.push(ROUTE_BUILDERS.authWithRedirect(subscriptionUrl));
|
||||
router.push(ROUTE_BUILDERS.authWithRedirect(chatPaywallSubscriptionUrl));
|
||||
return;
|
||||
}
|
||||
router.push(subscriptionUrl);
|
||||
router.push(chatPaywallSubscriptionUrl);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -24,11 +24,13 @@ export interface SubscriptionCheckoutButtonProps {
|
||||
/** 是否可用(未选套餐 / 未勾选协议 → false) */
|
||||
disabled?: boolean;
|
||||
subscriptionType: "vip" | "voice";
|
||||
returnTo?: "chat" | null;
|
||||
}
|
||||
|
||||
export function SubscriptionCheckoutButton({
|
||||
disabled = false,
|
||||
subscriptionType,
|
||||
returnTo = null,
|
||||
}: SubscriptionCheckoutButtonProps) {
|
||||
const payment = usePaymentState();
|
||||
const paymentDispatch = usePaymentDispatch();
|
||||
@@ -67,6 +69,7 @@ export function SubscriptionCheckoutButton({
|
||||
orderId: payment.currentOrderId,
|
||||
paymentUrl,
|
||||
subscriptionType,
|
||||
returnTo,
|
||||
onFailed: (errorMessage) =>
|
||||
paymentDispatch({ type: "PaymentLaunchFailed", errorMessage }),
|
||||
});
|
||||
@@ -87,6 +90,7 @@ export function SubscriptionCheckoutButton({
|
||||
payment.launchNonce,
|
||||
payment.payParams,
|
||||
paymentDispatch,
|
||||
returnTo,
|
||||
subscriptionType,
|
||||
]);
|
||||
|
||||
@@ -150,6 +154,7 @@ export function SubscriptionCheckoutButton({
|
||||
orderId: payment.currentOrderId,
|
||||
paymentUrl: ezpayPaymentUrl,
|
||||
subscriptionType,
|
||||
returnTo,
|
||||
onFailed: (errorMessage) => {
|
||||
setIsConfirmingEzpay(false);
|
||||
paymentDispatch({ type: "PaymentLaunchFailed", errorMessage });
|
||||
@@ -241,6 +246,7 @@ interface RedirectToEzpayInput {
|
||||
orderId: string | null;
|
||||
paymentUrl: string;
|
||||
subscriptionType: "vip" | "voice";
|
||||
returnTo?: "chat" | null;
|
||||
onFailed: (errorMessage: string) => void;
|
||||
}
|
||||
|
||||
@@ -248,6 +254,7 @@ async function launchEzpayRedirect({
|
||||
orderId,
|
||||
paymentUrl,
|
||||
subscriptionType,
|
||||
returnTo,
|
||||
onFailed,
|
||||
}: RedirectToEzpayInput): Promise<void> {
|
||||
log.debug("[subscription-checkout] launchEzpayRedirect START", {
|
||||
@@ -272,6 +279,7 @@ async function launchEzpayRedirect({
|
||||
orderId,
|
||||
payChannel: "ezpay",
|
||||
subscriptionType,
|
||||
...(returnTo ? { returnTo } : {}),
|
||||
createdAt: Date.now(),
|
||||
});
|
||||
if (Result.isErr(saveResult)) {
|
||||
|
||||
@@ -9,11 +9,15 @@ import { ROUTES } from "@/router/routes";
|
||||
|
||||
type ReturnStatus = "loading" | "missing";
|
||||
|
||||
function buildSubscriptionUrl(subscriptionType: "vip" | "voice"): string {
|
||||
function buildSubscriptionUrl(
|
||||
subscriptionType: "vip" | "voice",
|
||||
returnTo?: "chat",
|
||||
): string {
|
||||
const params = new URLSearchParams({
|
||||
type: subscriptionType,
|
||||
paymentReturn: "1",
|
||||
});
|
||||
if (returnTo) params.set("returnTo", returnTo);
|
||||
return `${ROUTES.subscription}?${params.toString()}`;
|
||||
}
|
||||
|
||||
@@ -29,7 +33,12 @@ export default function SubscriptionReturnPage() {
|
||||
if (cancelled) return;
|
||||
|
||||
if (result.success && result.data !== null) {
|
||||
router.replace(buildSubscriptionUrl(result.data.subscriptionType));
|
||||
router.replace(
|
||||
buildSubscriptionUrl(
|
||||
result.data.subscriptionType,
|
||||
result.data.returnTo,
|
||||
),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,15 +11,21 @@ function toSubscriptionType(value: string | null): SubscriptionType {
|
||||
return value === "voice" ? "voice" : "vip";
|
||||
}
|
||||
|
||||
function toReturnTo(value: string | null): "chat" | null {
|
||||
return value === "chat" ? "chat" : null;
|
||||
}
|
||||
|
||||
export function SubscriptionPageClient() {
|
||||
const searchParams = useSearchParams();
|
||||
const subscriptionType = toSubscriptionType(searchParams.get("type"));
|
||||
const shouldResumePendingOrder = searchParams.get("paymentReturn") === "1";
|
||||
const returnTo = toReturnTo(searchParams.get("returnTo"));
|
||||
|
||||
return (
|
||||
<SubscriptionScreen
|
||||
subscriptionType={subscriptionType}
|
||||
shouldResumePendingOrder={shouldResumePendingOrder}
|
||||
returnTo={returnTo}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
* 8. 协议复选框
|
||||
*/
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import { Checkbox, MobileShell } from "@/app/_components/core";
|
||||
import { AppConstants } from "@/core/app_constants";
|
||||
@@ -25,6 +26,7 @@ import {
|
||||
usePaymentState,
|
||||
} from "@/stores/payment/payment-context";
|
||||
import { useUserDispatch, useUserState } from "@/stores/user/user-context";
|
||||
import { ROUTES } from "@/router/routes";
|
||||
|
||||
import {
|
||||
SubscriptionBackLink,
|
||||
@@ -50,12 +52,15 @@ export type { SubscriptionType } from "./subscription-screen.helpers";
|
||||
export interface SubscriptionScreenProps {
|
||||
subscriptionType?: SubscriptionType;
|
||||
shouldResumePendingOrder?: boolean;
|
||||
returnTo?: "chat" | null;
|
||||
}
|
||||
|
||||
export function SubscriptionScreen({
|
||||
subscriptionType = "vip",
|
||||
shouldResumePendingOrder = false,
|
||||
returnTo = null,
|
||||
}: SubscriptionScreenProps) {
|
||||
const router = useRouter();
|
||||
const user = useUserState();
|
||||
const userDispatch = useUserDispatch();
|
||||
const payment = usePaymentState();
|
||||
@@ -176,6 +181,14 @@ export function SubscriptionScreen({
|
||||
? "Choose a voice package"
|
||||
: "Choose a subscription plan";
|
||||
|
||||
const handlePaymentSuccessClose = () => {
|
||||
setShowPaymentSuccessDialog(false);
|
||||
paymentDispatch({ type: "PaymentReset" });
|
||||
if (returnTo === "chat") {
|
||||
router.replace(ROUTES.chat);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (payment.isLoadingPlans || payment.plans.length === 0) return;
|
||||
if (selectedPlan !== null) return;
|
||||
@@ -272,6 +285,7 @@ export function SubscriptionScreen({
|
||||
<SubscriptionCheckoutButton
|
||||
disabled={!canActivate}
|
||||
subscriptionType={subscriptionType}
|
||||
returnTo={returnTo}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -312,7 +326,7 @@ export function SubscriptionScreen({
|
||||
<SubscriptionPaymentSuccessDialog
|
||||
open={showPaymentSuccessDialog}
|
||||
subscriptionType={subscriptionType}
|
||||
onClose={() => setShowPaymentSuccessDialog(false)}
|
||||
onClose={handlePaymentSuccessClose}
|
||||
/>
|
||||
</div>
|
||||
</MobileShell>
|
||||
|
||||
@@ -10,6 +10,7 @@ const PendingPaymentOrderSchema = z.object({
|
||||
orderId: z.string().min(1),
|
||||
payChannel: z.literal("ezpay"),
|
||||
subscriptionType: z.enum(["vip", "voice"]),
|
||||
returnTo: z.enum(["chat"]).optional(),
|
||||
createdAt: z.number(),
|
||||
});
|
||||
|
||||
|
||||
@@ -30,8 +30,14 @@ export type StaticRoute = (typeof ROUTES)[keyof typeof ROUTES];
|
||||
export const ROUTE_BUILDERS = {
|
||||
chatDeviceId: (deviceId: string): `/chat/deviceid/${string}` =>
|
||||
`/chat/deviceid/${encodeURIComponent(deviceId)}` as const,
|
||||
subscription: (type: "vip" | "voice"): `/subscription?type=${string}` =>
|
||||
`${ROUTES.subscription}?type=${encodeURIComponent(type)}` as const,
|
||||
subscription: (
|
||||
type: "vip" | "voice",
|
||||
options: { returnTo?: "chat" } = {},
|
||||
): `/subscription?${string}` => {
|
||||
const params = new URLSearchParams({ type });
|
||||
if (options.returnTo) params.set("returnTo", options.returnTo);
|
||||
return `${ROUTES.subscription}?${params.toString()}` as const;
|
||||
},
|
||||
authWithRedirect: (redirectTo: string): `/auth?redirect=${string}` =>
|
||||
`${ROUTES.auth}?redirect=${encodeURIComponent(redirectTo)}` as const,
|
||||
} as const;
|
||||
|
||||
Reference in New Issue
Block a user