feat(app): improve payment and paywall UX

src/app/subscription/components/index.ts

@@ -8,6 +8,7 @@ export * from "./subscription-benefits-card";
 export * from "./subscription-checkout-button";
 export * from "./subscription-cta-button";
 export * from "./subscription-payment-method";
+export * from "./subscription-payment-success-dialog";
 export * from "./subscription-plan-card";
 export * from "./subscription-user-row";
 export * from "./stripe-payment-dialog";

src/app/subscription/components/subscription-payment-success-dialog.module.css

@@ -0,0 +1,72 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.dialog {
+  width: 100%;
+  max-width: 380px;
+  border-radius: 32px;
+  background: var(--color-page-background, #ffffff);
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
+  padding: 28px 20px 20px;
+  text-align: center;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 58px;
+  height: 58px;
+  margin-bottom: 16px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #ff67e0 0%, #f657a0 100%);
+  color: #ffffff;
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 1;
+  box-shadow: 0 8px 18px rgba(247, 89, 168, 0.28);
+}
+
+.title {
+  margin: 0 0 8px;
+  color: var(--color-text-foreground, #171717);
+  font-size: var(--font-size-22, 22px);
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.content {
+  margin: 0;
+  color: #393939;
+  font-size: var(--font-size-md, 14px);
+  line-height: 1.5;
+}
+
+.button {
+  width: 100%;
+  min-height: 48px;
+  margin-top: 22px;
+  border: 0;
+  border-radius: 999px;
+  background:
+    linear-gradient(269deg, #ff67e0 0%, rgba(254, 104, 224, 0.5) 20%, rgba(252, 105, 223, 0.79) 66%, #f96ade 100%),
+    linear-gradient(#f657a0, #f657a0);
+  background-blend-mode: normal, normal;
+  box-shadow: 0 5px 7px rgba(247, 89, 168, 0.31);
+  color: #ffffff;
+  cursor: pointer;
+  font-size: var(--font-size-lg, 16px);
+  font-weight: 700;
+}
+
+.button:active {
+  transform: translateY(1px);
+}

src/app/subscription/components/subscription-payment-success-dialog.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import styles from "./subscription-payment-success-dialog.module.css";
+
+export interface SubscriptionPaymentSuccessDialogProps {
+  open: boolean;
+  subscriptionType: "vip" | "voice";
+  onClose: () => void;
+}
+
+export function SubscriptionPaymentSuccessDialog({
+  open,
+  subscriptionType,
+  onClose,
+}: SubscriptionPaymentSuccessDialogProps) {
+  if (!open) return null;
+
+  const content =
+    subscriptionType === "voice"
+      ? "Your voice package purchase was completed successfully."
+      : "Your VIP membership has been activated successfully.";
+
+  return (
+    <div
+      className={styles.overlay}
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="subscription-payment-success-title"
+    >
+      <div className={styles.dialog}>
+        <div className={styles.badge} aria-hidden="true">
+          ✓
+        </div>
+        <h2 id="subscription-payment-success-title" className={styles.title}>
+          Payment successful
+        </h2>
+        <p className={styles.content}>{content}</p>
+        <button type="button" className={styles.button} onClick={onClose}>
+          OK
+        </button>
+      </div>
+    </div>
+  );
+}