feat(subscription): separate selection from payment and add issue feedback

2026-07-27 11:35:28 +08:00
parent 01c55f5630
commit fe9d31146b
15 changed files with 1339 additions and 74 deletions
@@ -0,0 +1,83 @@
+"use client";
+
+import { ModalPortal } from "@/app/_components/core/modal-portal";
+import { AppConstants } from "@/core/app_constants";
+
+import type { VipOfferPlanView } from "./subscription-vip-offer-section";
+import styles from "./subscription-dialog.module.css";
+
+export interface SubscriptionRenewalConfirmationDialogProps {
+  open: boolean;
+  plan: VipOfferPlanView | null;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export function SubscriptionRenewalConfirmationDialog({
+  open,
+  plan,
+  onCancel,
+  onConfirm,
+}: SubscriptionRenewalConfirmationDialogProps) {
+  return (
+    <ModalPortal
+      open={open && plan !== null}
+      onClose={onCancel}
+      scrimClassName={styles.scrim}
+      panelClassName={styles.panel}
+      scrimOpacity={0.56}
+      ariaLabel="Automatic Renewal Confirmation"
+    >
+      {plan ? (
+        <div className={styles.content}>
+          <h2 className={styles.title}>Automatic Renewal Confirmation</h2>
+          <p className={styles.description}>
+            You selected the <strong>{plan.title}</strong> plan for{" "}
+            <strong>
+              {plan.price} {plan.currency}
+            </strong>
+            . It will renew automatically at the applicable renewal price until
+            you cancel.
+          </p>
+          <p className={styles.description}>
+            By confirming, you agree to the{" "}
+            <a
+              href={AppConstants.membershipAgreementUrl}
+              target="_blank"
+              rel="noreferrer"
+              className={styles.link}
+            >
+              VIP Membership Benefits Agreement
+            </a>{" "}
+            and{" "}
+            <a
+              href={AppConstants.autoRenewalAgreementUrl}
+              target="_blank"
+              rel="noreferrer"
+              className={styles.link}
+            >
+              Automatic Renewal Agreement
+            </a>
+            .
+          </p>
+          <div className={styles.actions}>
+            <button
+              type="button"
+              className={styles.secondaryButton}
+              onClick={onCancel}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              className={styles.primaryButton}
+              onClick={onConfirm}
+            >
+              Confirm
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </ModalPortal>
+  );
+}