42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import dynamic from "next/dynamic";
|
|
|
|
import type { StripePaymentDialogProps } from "./stripe-payment-dialog";
|
|
import { stripePaymentDialogStyles as styles } from "./stripe-payment-dialog.styles";
|
|
|
|
const StripePaymentDialog = dynamic(
|
|
() =>
|
|
import("./stripe-payment-dialog").then(
|
|
(module) => module.StripePaymentDialog,
|
|
),
|
|
{
|
|
ssr: false,
|
|
loading: StripePaymentDialogLoading,
|
|
},
|
|
);
|
|
|
|
export function LazyStripePaymentDialog(props: StripePaymentDialogProps) {
|
|
return <StripePaymentDialog {...props} />;
|
|
}
|
|
|
|
function StripePaymentDialogLoading() {
|
|
return (
|
|
<div
|
|
className={styles.overlay}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="stripe-payment-loading-title"
|
|
>
|
|
<div className={styles.dialog} aria-busy="true">
|
|
<div className={styles.header}>
|
|
<h2 id="stripe-payment-loading-title" className={styles.title}>
|
|
Preparing secure payment
|
|
</h2>
|
|
<p className={styles.content}>Loading payment methods...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|