76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
"use client";
|
||
/**
|
||
* ChatInsufficientCreditsBanner 积分不足横幅
|
||
*
|
||
* 何时显示：
|
||
* - 后端返回 cannotSendReason="insufficient_credits"
|
||
*
|
||
* 视觉规格（与设计稿对齐）：
|
||
* - 粉→品红渐变背景（与 splash 渐变一致）
|
||
* - 大字号粉色/白色提示文案
|
||
* - 粉→品红渐变 pill 按钮 → 跳 /subscription?type=topup
|
||
*
|
||
* 业务关系：
|
||
* - 与订阅页 top up 入口行为一致
|
||
*
|
||
* 不做的事：
|
||
* - 不直接管理 state machine（chat 机器不感知 UI 层）
|
||
*/
|
||
import { useAppNavigator } from "@/router/use-app-navigator";
|
||
|
||
import styles from "./chat-insufficient-credits-banner.module.css";
|
||
|
||
export interface ChatInsufficientCreditsBannerProps {
|
||
title?: string;
|
||
ctaLabel?: string;
|
||
/**
|
||
* 自定义点击回调（不传则默认走统一订阅导航）
|
||
* - 测试时可传 mock
|
||
* - 嵌入其他场景时（如 nested overlay）可传自定义
|
||
*/
|
||
onUnlock?: () => void;
|
||
}
|
||
|
||
export function ChatInsufficientCreditsBanner({
|
||
title = "Insufficient credits\nTop up to continue chatting",
|
||
ctaLabel = "Top up credits to continue",
|
||
onUnlock,
|
||
}: ChatInsufficientCreditsBannerProps) {
|
||
const navigator = useAppNavigator();
|
||
const titleLines = title.split("\n");
|
||
|
||
const handleClick = () => {
|
||
if (onUnlock) {
|
||
onUnlock();
|
||
return;
|
||
}
|
||
navigator.openSubscription({ type: "topup", returnTo: "chat" });
|
||
};
|
||
|
||
return (
|
||
<div
|
||
className={styles.banner}
|
||
role="status"
|
||
aria-live="polite"
|
||
data-testid="chat-insufficient-credits-banner"
|
||
>
|
||
<p className={styles.text}>
|
||
{titleLines.map((line, index) => (
|
||
<span key={`${line}-${index}`}>
|
||
{line}
|
||
{index < titleLines.length - 1 ? <br /> : null}
|
||
</span>
|
||
))}
|
||
</p>
|
||
<button
|
||
type="button"
|
||
className={styles.cta}
|
||
onClick={handleClick}
|
||
aria-label={ctaLabel}
|
||
>
|
||
{ctaLabel}
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|