feat(chat): show first recharge offer in header

2026-07-02 18:45:08 +08:00
parent efd89de0b0
commit 3592c6bb56
14 changed files with 427 additions and 350 deletions
@@ -0,0 +1,145 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+
+import type { LoginStatus } from "@/data/dto/auth";
+import { ROUTE_BUILDERS } from "@/router/routes";
+import { usePaymentDispatch, usePaymentState } from "@/stores/payment";
+import { useUserState } from "@/stores/user/user-context";
+import { getDefaultPayChannelForCountryCode } from "@/lib/payment/default_pay_channel";
+import {
+  getFirstRechargeOfferBannerDismissed,
+  recordFirstRechargeOfferBannerDismissed,
+} from "@/lib/chat/first_recharge_offer_banner";
+
+export interface FirstRechargeOfferBannerEligibility {
+  historyLoaded: boolean;
+  loginStatus: LoginStatus;
+  isFirstRecharge: boolean;
+  dismissed: boolean;
+}
+
+export interface UseFirstRechargeOfferBannerInput {
+  historyLoaded: boolean;
+  loginStatus: LoginStatus;
+}
+
+export interface UseFirstRechargeOfferBannerOutput {
+  visible: boolean;
+  discountPercent: number;
+  close: () => void;
+  claim: () => void;
+}
+
+interface DismissalState {
+  userId: string | null;
+  loaded: boolean;
+  dismissed: boolean;
+}
+
+export function shouldShowFirstRechargeOfferBanner(
+  input: FirstRechargeOfferBannerEligibility,
+): boolean {
+  if (!input.historyLoaded) return false;
+  if (input.loginStatus === "notLoggedIn" || input.loginStatus === "guest") {
+    return false;
+  }
+  if (!input.isFirstRecharge) return false;
+  return !input.dismissed;
+}
+
+export function useFirstRechargeOfferBanner({
+  historyLoaded,
+  loginStatus,
+}: UseFirstRechargeOfferBannerInput): UseFirstRechargeOfferBannerOutput {
+  const router = useRouter();
+  const payment = usePaymentState();
+  const paymentDispatch = usePaymentDispatch();
+  const userState = useUserState();
+  const isAuthenticatedUser =
+    loginStatus !== "notLoggedIn" && loginStatus !== "guest";
+  const userId = userState.currentUser?.id ?? null;
+  const hasUserIdentity = !isAuthenticatedUser || Boolean(userId);
+  const [dismissalState, setDismissalState] = useState<DismissalState>(() => ({
+    userId,
+    loaded: false,
+    dismissed: false,
+  }));
+  const discountPercent = payment.firstRechargeOffer?.discountPercent ?? 50;
+
+  useEffect(() => {
+    if (!isAuthenticatedUser) return;
+    if (payment.status !== "idle") return;
+    const defaultPayChannel = getDefaultPayChannelForCountryCode(
+      userState.currentUser?.countryCode,
+    );
+    paymentDispatch({ type: "PaymentInit", payChannel: defaultPayChannel });
+  }, [
+    payment.status,
+    paymentDispatch,
+    isAuthenticatedUser,
+    userState.currentUser?.countryCode,
+  ]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const loadDismissal = async () => {
+      const dismissed = await getFirstRechargeOfferBannerDismissed(userId);
+      if (cancelled) return;
+
+      setDismissalState({
+        userId,
+        loaded: true,
+        dismissed,
+      });
+    };
+
+    void loadDismissal();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [userId]);
+
+  const dismissalLoaded =
+    dismissalState.userId === userId && dismissalState.loaded;
+  const visible =
+    hasUserIdentity &&
+    dismissalLoaded &&
+    shouldShowFirstRechargeOfferBanner({
+      historyLoaded,
+      loginStatus,
+      isFirstRecharge: payment.isFirstRecharge,
+      dismissed: dismissalState.dismissed,
+    });
+
+  function close(): void {
+    setDismissalState({
+      userId,
+      loaded: true,
+      dismissed: true,
+    });
+    void recordFirstRechargeOfferBannerDismissed(userId);
+  }
+
+  function claim(): void {
+    const defaultPayChannel = getDefaultPayChannelForCountryCode(
+      userState.currentUser?.countryCode,
+    );
+    router.push(
+      ROUTE_BUILDERS.subscription("vip", {
+        payChannel: defaultPayChannel,
+        returnTo: "chat",
+      }),
+    );
+  }
+
+  return {
+    visible,
+    discountPercent,
+    close,
+    claim,
+  };
+}