87 lines
4.5 KiB
TypeScript
87 lines
4.5 KiB
TypeScript
"use client";
|
|
|
|
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="fixed inset-0 z-220 flex items-center justify-center bg-[rgba(0,0,0,0.52)] pb-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-bottom,0))] pl-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-left,0))] pr-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-right,0))] pt-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-top,0))]"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="insufficient-credits-title"
|
|
>
|
|
<div className="w-full max-w-(--pwa-install-dialog-max-width,360px) rounded-(--responsive-card-radius,36px) border border-[rgba(246,87,160,0.16)] bg-(--color-page-background,#ffffff) px-(--responsive-card-padding,18px) pb-(--responsive-card-padding,18px) pt-(--responsive-card-padding-lg,24px) text-center shadow-[0_18px_46px_rgba(38,18,31,0.18)]">
|
|
<h2
|
|
id="insufficient-credits-title"
|
|
className="m-0 mb-2.5 text-(length:--responsive-page-title,var(--font-size-22,22px)) font-bold leading-[1.2] text-text-foreground"
|
|
>
|
|
Not enough credits
|
|
</h2>
|
|
<p className="mx-(--spacing-md,12px) mb-(--page-section-gap,18px) mt-0 text-(length:--responsive-body,var(--font-size-lg,16px)) leading-normal text-[#393939]">
|
|
Top up your credits to unlock this message and keep the moment going.
|
|
</p>
|
|
|
|
{showCreditDetail ? (
|
|
<dl className="mb-(--page-section-gap,18px) grid gap-(--spacing-sm,8px) rounded-(--responsive-card-radius-sm,22px) bg-[#fff4f9] p-(--spacing-md,12px)">
|
|
<div className="flex items-center justify-between gap-(--spacing-md,12px) text-(length:--responsive-caption,var(--font-size-md,14px)) leading-[1.3] text-[#4a3b43]">
|
|
<dt className="m-0 font-medium">Balance</dt>
|
|
<dd className="m-0 text-(length:--responsive-body,var(--font-size-lg,16px)) font-extrabold text-[#f657a0]">
|
|
{creditBalance}
|
|
</dd>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-(--spacing-md,12px) text-(length:--responsive-caption,var(--font-size-md,14px)) leading-[1.3] text-[#4a3b43]">
|
|
<dt className="m-0 font-medium">Required</dt>
|
|
<dd className="m-0 text-(length:--responsive-body,var(--font-size-lg,16px)) font-extrabold text-[#f657a0]">
|
|
{requiredCredits}
|
|
</dd>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-(--spacing-md,12px) text-(length:--responsive-caption,var(--font-size-md,14px)) leading-[1.3] text-[#4a3b43]">
|
|
<dt className="m-0 font-medium">Still needed</dt>
|
|
<dd className="m-0 text-(length:--responsive-body,var(--font-size-lg,16px)) font-extrabold text-[#f657a0]">
|
|
{shortfallCredits}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
) : null}
|
|
|
|
<div className="flex w-full gap-(--spacing-md,12px)">
|
|
<button
|
|
type="button"
|
|
className="flex min-h-(--pwa-button-height,44px) flex-auto cursor-pointer items-center justify-center rounded-bottom-sheet border-0 bg-(--color-text-secondary,#9e9e9e) text-(length:--responsive-body,var(--font-size-lg,16px)) font-bold text-(--color-pwa-button-text,#ffffff) focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]"
|
|
onClick={onClose}
|
|
>
|
|
Later
|
|
</button>
|
|
<button
|
|
type="button"
|
|
data-analytics-key="chat.topup"
|
|
data-analytics-label="Top up chat credits"
|
|
className="flex min-h-(--pwa-button-height,44px) flex-auto cursor-pointer items-center justify-center rounded-bottom-sheet border-0 bg-[linear-gradient(90deg,#ff67e0_0%,#ff52a2_100%)] text-(length:--responsive-body,var(--font-size-lg,16px)) font-bold text-(--color-pwa-button-text,#ffffff) shadow-[0_6px_14px_rgba(246,87,160,0.28)] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]"
|
|
onClick={onConfirm}
|
|
>
|
|
Top up now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|