feat(chat): prompt before credit top up

2026-07-01 13:01:35 +08:00
parent abc0faf197
commit d1ccf3631e
5 changed files with 237 additions and 35 deletions
@@ -0,0 +1,77 @@
+"use client";
+
+import styles from "./insufficient-credits-dialog.module.css";
+
+export interface InsufficientCreditsDialogProps {
+  open: boolean;
+  creditBalance: number;
+  requiredCredits: number;
+  shortfallCredits: number;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export function InsufficientCreditsDialog({
+  open,
+  creditBalance,
+  requiredCredits,
+  shortfallCredits,
+  onClose,
+  onConfirm,
+}: InsufficientCreditsDialogProps) {
+  if (!open) return null;
+
+  const showCreditDetail = requiredCredits > 0 || shortfallCredits > 0;
+
+  return (
+    <div
+      className={styles.overlay}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="insufficient-credits-title"
+    >
+      <div className={styles.dialog}>
+        <h2 id="insufficient-credits-title" className={styles.title}>
+          Not enough credits
+        </h2>
+        <p className={styles.content}>
+          Top up your credits to unlock this message and keep the moment going.
+        </p>
+
+        {showCreditDetail ? (
+          <dl className={styles.creditList}>
+            <div className={styles.creditItem}>
+              <dt>Balance</dt>
+              <dd>{creditBalance}</dd>
+            </div>
+            <div className={styles.creditItem}>
+              <dt>Required</dt>
+              <dd>{requiredCredits}</dd>
+            </div>
+            <div className={styles.creditItem}>
+              <dt>Still needed</dt>
+              <dd>{shortfallCredits}</dd>
+            </div>
+          </dl>
+        ) : null}
+
+        <div className={styles.actions}>
+          <button
+            type="button"
+            className={`${styles.button} ${styles.secondary}`}
+            onClick={onClose}
+          >
+            Later
+          </button>
+          <button
+            type="button"
+            className={`${styles.button} ${styles.primary}`}
+            onClick={onConfirm}
+          >
+            Top up now
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}