refactor(payment): share checkout dialogs

src/app/_components/payment/lazy-stripe-payment-dialog.tsx

@@ -0,0 +1,41 @@
+"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>
+  );
+}