78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
"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>
|
|
);
|
|
}
|