cozsweet-frontend-nextjs/src/app/subscription/components/subscription-renewal-confirmation-dialog.tsx

"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>
  );
}