fix(subscription): remove animations affecting stripe dialog

src/app/subscription/components/subscription-checkout-button.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/stores/payment/payment-context";
 import { AppEnvUtil, Logger, Result } from "@/utils";
 
+import { StripePaymentDialog } from "./stripe-payment-dialog";
 import dialogStyles from "./stripe-payment-dialog.module.css";
 import { SubscriptionCtaButton } from "./subscription-cta-button";
 import styles from "./subscription-cta-button.module.css";
@@ -34,6 +35,9 @@ export function SubscriptionCheckoutButton({
   const payment = usePaymentState();
   const paymentDispatch = usePaymentDispatch();
   const launchedNonceRef = useRef(0);
+  const [hiddenStripeClientSecret, setHiddenStripeClientSecret] = useState<
+    string | null
+  >(null);
   const [isConfirmingEzpay, setIsConfirmingEzpay] = useState(false);
 
   useEffect(() => {
@@ -94,7 +98,7 @@ export function SubscriptionCheckoutButton({
     payment.isCreatingOrder ||
     payment.isPollingOrder;
   const readyLabel =
-    subscriptionType === "topup" ? "Pay and Top Up" : "Pay and Activate";
+    subscriptionType === "topup" ? "Pay and Top Up" : "Pay and Activiate";
   const agreementLabel =
     subscriptionType === "topup"
       ? "Confirm the agreement and Top Up"
@@ -110,9 +114,32 @@ export function SubscriptionCheckoutButton({
   const handleClick = () => {
     if (disabled || isLoading) return;
     setIsConfirmingEzpay(false);
+    setHiddenStripeClientSecret(null);
     paymentDispatch({ type: "PaymentCreateOrderSubmitted" });
   };
 
+  const handleStripeClose = () => {
+    if (stripeClientSecret) {
+      setHiddenStripeClientSecret(stripeClientSecret);
+    }
+    if (payment.orderStatus !== "paid") {
+      paymentDispatch({ type: "PaymentReset" });
+    }
+  };
+
+  const handleStripeConfirmed = () => {
+    if (stripeClientSecret) {
+      setHiddenStripeClientSecret(stripeClientSecret);
+    }
+  };
+
+  const stripeClientSecret = payment.payParams
+    ? getStripeClientSecret(payment.payParams)
+    : null;
+  const shouldShowStripeDialog =
+    stripeClientSecret !== null &&
+    stripeClientSecret !== hiddenStripeClientSecret &&
+    !payment.isPaid;
   const ezpayPaymentUrl = payment.payParams
     ? getPaymentUrl(payment.payParams)
     : null;
@@ -181,6 +208,13 @@ export function SubscriptionCheckoutButton({
           onConfirm={handleEzpayConfirm}
         />
       ) : null}
+      {shouldShowStripeDialog ? (
+        <StripePaymentDialog
+          clientSecret={stripeClientSecret}
+          onClose={handleStripeClose}
+          onConfirmed={handleStripeConfirmed}
+        />
+      ) : null}
     </>
   );
 }
@@ -332,7 +366,7 @@ function EzpayRedirectConfirmDialog({
   );
 }
 
-export function getStripeClientSecret(
+function getStripeClientSecret(
   payParams: Record<string, unknown>,
 ): string | null {
   const provider = payParams.provider;