feat: Add Mini Program payment bridge for WeChat Pay

apps/web/src/modules/public/events/components/EventRegistrationForm.tsx

@@ -42,11 +42,13 @@ import type {
 } from "./types";
 import { PaymentModal, type PaymentOrderData } from "./PaymentModal";
 import { useTicketSelection } from "./useTicketSelection";
+import { MiniProgramUpgradePrompt } from "./MiniProgramUpgradePrompt";
 import { WeChatBindingPrompt } from "./WeChatBindingPrompt";
 import {
 	parseRegistrationErrorPayload,
 	resolveRegistrationErrorMessage,
 } from "./registrationErrorUtils";
+import { buildWechatPaymentClientContext } from "./wechat-payment-client-context";
 
 interface EventRegistrationFormProps {
 	event: {
@@ -102,6 +104,10 @@ export function EventRegistrationForm({
 	const [wechatBindingMessage, setWechatBindingMessage] = useState<
 		string | null
 	>(null);
+	const [miniProgramUpgradeOpen, setMiniProgramUpgradeOpen] = useState(false);
+	const [miniProgramUpgradeMessage, setMiniProgramUpgradeMessage] = useState<
+		string | null
+	>(null);
 	const [allowDigitalCardDisplay, setAllowDigitalCardDisplay] = useState<
 		boolean | null
 	>(null);
@@ -780,6 +786,7 @@ export function EventRegistrationForm({
 	const performPaidOrder = async () => {
 		try {
 			const ticketTypeId = resolveTicketTypeId();
+			const clientContext = await buildWechatPaymentClientContext();
 			const response = await fetch(`/api/events/${event.id}/orders`, {
 				method: "POST",
 				headers: {
@@ -797,6 +804,7 @@ export function EventRegistrationForm({
 							allowDigitalCardDisplay: allowDigitalCardDisplay,
 						}),
 					...(inviteCode ? { inviteCode } : {}),
+					clientContext,
 				}),
 			});
 
@@ -814,10 +822,18 @@ export function EventRegistrationForm({
 					setWechatBindingOpen(true);
 					return;
 				}
+				if (errorPayload.code === "MINI_PROGRAM_BRIDGE_REQUIRED") {
+					setMiniProgramUpgradeMessage(errorMessage);
+					setMiniProgramUpgradeOpen(true);
+					return;
+				}
 				throw new Error(errorMessage);
 			}
 
 			const result = await response.json();
+			if (result.data?.isExisting) {
+				toast.info(t("payment.existingOrderFound"));
+			}
 			setPaymentOrder(result.data as PaymentOrderData);
 			setPaymentOpen(true);
 		} catch (error) {
@@ -1183,6 +1199,16 @@ export function EventRegistrationForm({
 				}}
 				message={wechatBindingMessage}
 			/>
+			<MiniProgramUpgradePrompt
+				open={miniProgramUpgradeOpen}
+				onOpenChange={(open) => {
+					setMiniProgramUpgradeOpen(open);
+					if (!open) {
+						setMiniProgramUpgradeMessage(null);
+					}
+				}}
+				message={miniProgramUpgradeMessage}
+			/>
 		</>
 	);
 }

apps/web/src/modules/public/events/components/EventRegistrationModal.tsx

@@ -35,11 +35,16 @@ import type {
 } from "./types";
 import { PaymentModal, type PaymentOrderData } from "./PaymentModal";
 import { useTicketSelection } from "./useTicketSelection";
+import { MiniProgramUpgradePrompt } from "./MiniProgramUpgradePrompt";
 import { WeChatBindingPrompt } from "./WeChatBindingPrompt";
 import {
 	parseRegistrationErrorPayload,
 	resolveRegistrationErrorMessage,
 } from "./registrationErrorUtils";
+import {
+	buildWechatPaymentClientContext,
+	buildWechatPaymentClientContextQuery,
+} from "./wechat-payment-client-context";
 
 interface EventRegistrationModalProps {
 	isOpen: boolean;
@@ -87,6 +92,10 @@ export function EventRegistrationModal({
 	const [wechatBindingMessage, setWechatBindingMessage] = useState<
 		string | null
 	>(null);
+	const [miniProgramUpgradeOpen, setMiniProgramUpgradeOpen] = useState(false);
+	const [miniProgramUpgradeMessage, setMiniProgramUpgradeMessage] = useState<
+		string | null
+	>(null);
 	const [pendingOrderChecked, setPendingOrderChecked] = useState(false);
 	const [allowDigitalCardDisplay, setAllowDigitalCardDisplay] = useState<
 		boolean | null
@@ -194,10 +203,28 @@ export function EventRegistrationModal({
 
 		const fetchPendingOrder = async () => {
 			try {
+				const clientContext = await buildWechatPaymentClientContext();
+				const contextQuery =
+					buildWechatPaymentClientContextQuery(clientContext);
 				const response = await fetch(
-					`/api/events/${event.id}/orders/pending`,
+					`/api/events/${event.id}/orders/pending${
+						contextQuery ? `?${contextQuery}` : ""
+					}`,
 				);
 				if (!response.ok) {
+					if (response.status === 400) {
+						const errorPayload =
+							await parseRegistrationErrorPayload(
+								response,
+								defaultRegistrationError,
+							);
+						if (
+							errorPayload.code === "MINI_PROGRAM_BRIDGE_REQUIRED"
+						) {
+							setMiniProgramUpgradeMessage(errorPayload.message);
+							setMiniProgramUpgradeOpen(true);
+						}
+					}
 					return;
 				}
 				const result = await response.json();
@@ -729,6 +756,7 @@ export function EventRegistrationModal({
 
 	const performPaidOrder = async () => {
 		try {
+			const clientContext = await buildWechatPaymentClientContext();
 			const response = await fetch(`/api/events/${event.id}/orders`, {
 				method: "POST",
 				headers: {
@@ -746,6 +774,7 @@ export function EventRegistrationModal({
 							allowDigitalCardDisplay: allowDigitalCardDisplay,
 						}),
 					...(inviteCode ? { inviteCode } : {}),
+					clientContext,
 				}),
 			});
 
@@ -763,6 +792,11 @@ export function EventRegistrationModal({
 					setWechatBindingOpen(true);
 					return;
 				}
+				if (errorPayload.code === "MINI_PROGRAM_BRIDGE_REQUIRED") {
+					setMiniProgramUpgradeMessage(errorMessage);
+					setMiniProgramUpgradeOpen(true);
+					return;
+				}
 				throw new Error(errorMessage);
 			}
 
@@ -1034,6 +1068,16 @@ export function EventRegistrationModal({
 				}}
 				message={wechatBindingMessage}
 			/>
+			<MiniProgramUpgradePrompt
+				open={miniProgramUpgradeOpen}
+				onOpenChange={(open) => {
+					setMiniProgramUpgradeOpen(open);
+					if (!open) {
+						setMiniProgramUpgradeMessage(null);
+					}
+				}}
+				message={miniProgramUpgradeMessage}
+			/>
 		</>
 	);
 }

apps/web/src/modules/public/events/components/MiniProgramUpgradePrompt.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { Button } from "@community/ui/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@community/ui/ui/dialog";
+import { useTranslations } from "next-intl";
+
+interface MiniProgramUpgradePromptProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	message?: string | null;
+}
+
+export function MiniProgramUpgradePrompt({
+	open,
+	onOpenChange,
+	message,
+}: MiniProgramUpgradePromptProps) {
+	const t = useTranslations("events.registration.miniProgramUpgrade");
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="sm:max-w-md">
+				<DialogHeader>
+					<DialogTitle>{t("title")}</DialogTitle>
+					<DialogDescription>
+						{message?.trim() || t("description")}
+					</DialogDescription>
+				</DialogHeader>
+				<div className="rounded-md bg-muted/50 px-3 py-2 text-sm text-muted-foreground">
+					{t("note")}
+				</div>
+				<DialogFooter>
+					<Button onClick={() => onOpenChange(false)}>
+						{t("confirm")}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}