fix: correct membership back flow and add onboarding paywall

2026-08-10 11:14:31 +08:00
parent 8696eca022
commit a17ff258d8
7 changed files with 222 additions and 19 deletions
@@ -0,0 +1,138 @@
+"use client";
+
+import Link from "next/link";
+import { Gift, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import type { FormEvent } from "react";
+import { keepFocusWithin } from "@/lib/focus-trap";
+import { membershipHref, notifyBalanceChanged, redeemErrorMessage } from "@/lib/membership";
+
+type OnboardingRedeemPaywallProps = {
+  credits: number;
+  onClose: () => void;
+  onCreditsChanged: (credits: number) => void;
+};
+
+export function OnboardingRedeemPaywall({
+  credits,
+  onClose,
+  onCreditsChanged,
+}: OnboardingRedeemPaywallProps) {
+  const [code, setCode] = useState("");
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+  const [pending, setPending] = useState(false);
+  const [unlocked, setUnlocked] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const returnTarget = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const focusFrame = window.requestAnimationFrame(() => inputRef.current?.focus());
+    return () => {
+      window.cancelAnimationFrame(focusFrame);
+      window.requestAnimationFrame(() => returnTarget?.focus());
+    };
+  }, []);
+
+  function close() {
+    if (!pending) onClose();
+  }
+
+  async function redeem(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const trimmedCode = code.trim();
+    if (!trimmedCode || pending || unlocked) return;
+    setPending(true);
+    setError("");
+    setMessage("");
+    try {
+      const response = await fetch("/api/redeem", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ code: trimmedCode }),
+      });
+      const payload = await response.json().catch(() => null);
+      if (response.status === 401) {
+        window.location.assign("/login");
+        return;
+      }
+      if (!response.ok) throw new Error(redeemErrorMessage(response.status, payload));
+      const result = payload as { awardedCredits?: number; credits: number; message?: string };
+      const awarded = typeof result.awardedCredits === "number" ? result.awardedCredits : result.credits;
+      onCreditsChanged(result.credits);
+      setCode("");
+      setUnlocked(true);
+      setMessage(result.message || `已到账 ${awarded} 点，现在可以开始完整咨询。`);
+      notifyBalanceChanged(result.credits);
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : "兑换失败，请稍后重试");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="account-modal-overlay" onMouseDown={close}>
+      <section
+        className="account-modal paywall-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="onboarding-paywall-title"
+        onMouseDown={(event) => event.stopPropagation()}
+        onKeyDown={(event) => {
+          if (event.key === "Escape") close();
+          else keepFocusWithin(event.nativeEvent, event.currentTarget);
+        }}
+      >
+        <div className="dialog-header">
+          <h2 id="onboarding-paywall-title">解锁完整咨询</h2>
+          <button className="dialog-close" aria-label="关闭" type="button" onClick={close} disabled={pending}>
+            <X aria-hidden="true" />
+          </button>
+        </div>
+        <div className="paywall-intro">
+          <span className="paywall-mark" aria-hidden="true"><Gift /></span>
+          <div>
+            <b>入门问题已经准备好</b>
+            <p>填写兑换码，解锁后续咨询、生时校正与完整解读。</p>
+          </div>
+        </div>
+        <div className="redeem-balance">
+          <span>当前可用点数</span>
+          <strong>{credits} 点</strong>
+        </div>
+        <form className="redeem-form account-redeem-form" onSubmit={redeem}>
+          <label htmlFor="onboarding-redeem-code">兑换码</label>
+          <div>
+            <input
+              id="onboarding-redeem-code"
+              ref={inputRef}
+              autoComplete="off"
+              value={code}
+              onChange={(event) => {
+                setCode(event.target.value);
+                setError("");
+                setMessage("");
+                setUnlocked(false);
+              }}
+              placeholder="输入完整兑换码"
+            />
+            <button className="button-primary" type="submit" disabled={!code.trim() || pending || unlocked}>
+              {pending ? "兑换中" : unlocked ? "已解锁" : "兑换并继续"}
+            </button>
+          </div>
+          {error && <p className="form-error" role="alert">{error}</p>}
+          {message && <p className="form-success" role="status">{message}</p>}
+        </form>
+        <div className="paywall-footer">
+          <span>{unlocked ? "点数已到账，可以继续选择问题。" : "还没有兑换码？"}</span>
+          {unlocked ? (
+            <button className="button-primary" type="button" onClick={close}>开始咨询</button>
+          ) : (
+            <Link className="button-secondary" href={membershipHref("onboarding-paywall")}>查看套餐与会员</Link>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}