fix(subscription): remove animations affecting stripe dialog

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

@@ -2,26 +2,17 @@
   position: fixed;
   inset: 0;
   z-index: 70;
-  display: block;
+  display: flex;
-  height: 100dvh;
+  align-items: center;
-  padding:
+  justify-content: center;
-    max(24px, env(safe-area-inset-top))
+  padding: 20px;
-    20px
-    max(20px, env(safe-area-inset-bottom));
-  overflow-y: auto;
   background: rgba(0, 0, 0, 0.5);
-  overscroll-behavior: contain;
 }
 
 .dialog {
   width: 100%;
   max-width: 420px;
-  max-height: calc(
+  max-height: calc(100vh - 40px);
-    100dvh
-    - max(48px, env(safe-area-inset-top))
-    - max(20px, env(safe-area-inset-bottom))
-  );
-  margin: clamp(0px, 6dvh, 48px) auto 0;
   overflow-y: auto;
   border-radius: 32px;
   background: var(--color-page-background, #ffffff);

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;

src/app/subscription/components/subscription-screen.module.css

@@ -6,7 +6,6 @@
     radial-gradient(circle at 8% 4%, rgba(255, 255, 255, 0.95) 0 90px, transparent 160px),
     linear-gradient(180deg, #fff9fb 0%, #fcf3f4 52%, #fffefe 100%);
   padding: 18px 20px 10px;
-  animation: pageEnter 360ms ease-out both;
 }
 
 .header {
@@ -24,7 +23,6 @@
   flex-direction: column;
   gap: 18px;
   margin-top: 14px;
-  animation: stackEnter 420ms ease-out 80ms both;
 }
 
 .userSlot {
@@ -70,12 +68,10 @@
 
 .paymentMethodSlot {
   margin-top: 22px;
-  animation: stackEnter 420ms ease-out 150ms both;
 }
 
 .ctaSlot {
   margin-top: 22px;
-  animation: stackEnter 420ms ease-out 190ms both;
 }
 
 .agreementSlot {
@@ -96,27 +92,3 @@
 .agreementLink:hover {
   text-decoration: underline;
 }
-
-@keyframes pageEnter {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes stackEnter {
-  from {
-    opacity: 0;
-    transform: translateY(14px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}

src/app/subscription/subscription-screen.tsx

@@ -13,14 +13,12 @@ import { useUserDispatch } from "@/stores/user/user-context";
 import { ROUTES } from "@/router/routes";
 
 import {
-  getStripeClientSecret,
   SubscriptionBackLink,
   SubscriptionCheckoutButton,
   SubscriptionCoinsOfferSection,
   SubscriptionPaymentMethod,
   SubscriptionPaymentSuccessDialog,
   SubscriptionVipOfferSection,
-  StripePaymentDialog,
 } from "./components";
 import styles from "./components/subscription-screen.module.css";
 import {
@@ -51,9 +49,6 @@ export function SubscriptionScreen({
   const refreshedPaidOrderRef = useRef<string | null>(null);
   const resumedPendingOrderRef = useRef<string | null>(null);
   const successDialogShownOrderRef = useRef<string | null>(null);
-  const [hiddenStripeDialogKey, setHiddenStripeDialogKey] = useState<
-    string | null
-  >(null);
   const [showPaymentSuccessDialog, setShowPaymentSuccessDialog] =
     useState(false);
   const canSubscribeVip = subscriptionType === "vip";
@@ -161,16 +156,6 @@ export function SubscriptionScreen({
     payment.isPollingOrder;
   const canActivate =
     selectedPlan !== null && payment.agreed && !isPaymentBusy;
-  const stripeClientSecret = payment.payParams
-    ? getStripeClientSecret(payment.payParams)
-    : null;
-  const stripeDialogKey = stripeClientSecret
-    ? `${payment.launchNonce}:${stripeClientSecret}`
-    : null;
-  const shouldShowStripeDialog =
-    stripeClientSecret !== null &&
-    stripeDialogKey !== hiddenStripeDialogKey &&
-    !payment.isPaid;
 
   const finishPaymentSuccessClose = () => {
     setShowPaymentSuccessDialog(false);
@@ -184,21 +169,6 @@ export function SubscriptionScreen({
     finishPaymentSuccessClose();
   };
 
-  const handleStripeClose = () => {
-    if (stripeDialogKey) {
-      setHiddenStripeDialogKey(stripeDialogKey);
-    }
-    if (payment.orderStatus !== "paid") {
-      paymentDispatch({ type: "PaymentReset" });
-    }
-  };
-
-  const handleStripeConfirmed = () => {
-    if (stripeDialogKey) {
-      setHiddenStripeDialogKey(stripeDialogKey);
-    }
-  };
-
   useEffect(() => {
     if (canSubscribeVip) {
       const firstVipPlanId = vipOfferPlans[0]?.id ?? "";
@@ -242,28 +212,16 @@ export function SubscriptionScreen({
   ]);
 
   return (
-    <>
+    <MobileShell>
-      <MobileShell>
+      <div className={styles.shell}>
-        <div className={styles.shell}>
+        <header className={styles.header}>
-          <header className={styles.header}>
+          <SubscriptionBackLink className={styles.backSlot} />
-            <SubscriptionBackLink className={styles.backSlot} />
+        </header>
-          </header>
 
-          <div className={styles.offerStack}>
+        <div className={styles.offerStack}>
-            {canSubscribeVip ? (
+          {canSubscribeVip ? (
-              <SubscriptionVipOfferSection
+            <SubscriptionVipOfferSection
-                plans={vipOfferPlans}
+              plans={vipOfferPlans}
-                selectedPlanId={payment.selectedPlanId || selectedPlan?.id || null}
-                onSelectPlan={(planId) =>
-                  paymentDispatch({
-                    type: "PaymentPlanSelected",
-                    planId,
-                  })
-                }
-              />
-            ) : null}
-            <SubscriptionCoinsOfferSection
-              plans={directCoinsPlans}
               selectedPlanId={payment.selectedPlanId || selectedPlan?.id || null}
               onSelectPlan={(planId) =>
                 paymentDispatch({
@@ -272,78 +230,80 @@ export function SubscriptionScreen({
                 })
               }
             />
-          </div>
+          ) : null}
-
+          <SubscriptionCoinsOfferSection
-          <section className={styles.paymentMethodSlot}>
+            plans={directCoinsPlans}
-            <SubscriptionPaymentMethod
+            selectedPlanId={payment.selectedPlanId || selectedPlan?.id || null}
-              value={payment.payChannel}
+            onSelectPlan={(planId) =>
-              disabled={isPaymentBusy}
+              paymentDispatch({
-              onChange={(payChannel) =>
+                type: "PaymentPlanSelected",
-                paymentDispatch({
+                planId,
-                  type: "PaymentPayChannelChanged",
+              })
-                  payChannel,
+            }
-                })
-              }
-            />
-          </section>
-
-          <div className={styles.ctaSlot}>
-            <SubscriptionCheckoutButton
-              disabled={!canActivate}
-              subscriptionType={subscriptionType}
-              returnTo={returnTo}
-            />
-          </div>
-
-          <div className={styles.agreementSlot}>
-            <Checkbox
-              checked={payment.agreed}
-              onChange={(agreed) =>
-                paymentDispatch({
-                  type: "PaymentAgreementChanged",
-                  agreed,
-                })
-              }
-              label={
-                <span className={styles.agreementLabel}>
-                  I agree to the{" "}
-                  <a
-                    href={AppConstants.privacyPolicyUrl}
-                    target="_blank"
-                    rel="noreferrer"
-                    className={styles.agreementLink}
-                  >
-                    VIP Membership Benefits Agreement
-                  </a>{" "}
-                  and{" "}
-                  <a
-                    href={AppConstants.termsOfServiceUrl}
-                    target="_blank"
-                    rel="noreferrer"
-                    className={styles.agreementLink}
-                  >
-                    Automatic renewal Agreement
-                  </a>
-                </span>
-              }
-            />
-          </div>
-
-          <SubscriptionPaymentSuccessDialog
-            open={showPaymentSuccessDialog}
-            subscriptionType={subscriptionType}
-            onClose={handlePaymentSuccessClose}
           />
         </div>
-      </MobileShell>
 
-      {shouldShowStripeDialog ? (
+        <section className={styles.paymentMethodSlot}>
-        <StripePaymentDialog
+          <SubscriptionPaymentMethod
-          clientSecret={stripeClientSecret}
+            value={payment.payChannel}
-          onClose={handleStripeClose}
+            disabled={isPaymentBusy}
-          onConfirmed={handleStripeConfirmed}
+            onChange={(payChannel) =>
+              paymentDispatch({
+                type: "PaymentPayChannelChanged",
+                payChannel,
+              })
+            }
+          />
+        </section>
+
+        <div className={styles.ctaSlot}>
+          <SubscriptionCheckoutButton
+            disabled={!canActivate}
+            subscriptionType={subscriptionType}
+            returnTo={returnTo}
+          />
+        </div>
+
+        <div className={styles.agreementSlot}>
+          <Checkbox
+            checked={payment.agreed}
+            onChange={(agreed) =>
+              paymentDispatch({
+                type: "PaymentAgreementChanged",
+                agreed,
+              })
+            }
+            label={
+              <span className={styles.agreementLabel}>
+                I agree to the{" "}
+                <a
+                  href={AppConstants.privacyPolicyUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  className={styles.agreementLink}
+                >
+                  VIP Membership Benefits Agreement
+                </a>{" "}
+                and{" "}
+                <a
+                  href={AppConstants.termsOfServiceUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  className={styles.agreementLink}
+                >
+                  Automatic renewal Agreement
+                </a>
+              </span>
+            }
+          />
+        </div>
+
+        <SubscriptionPaymentSuccessDialog
+          open={showPaymentSuccessDialog}
+          subscriptionType={subscriptionType}
+          onClose={handlePaymentSuccessClose}
         />
-      ) : null}
+      </div>
-    </>
+    </MobileShell>
   );
 }