chore(payment): update ezpay dev redirect notice
This commit is contained in:
@@ -17,7 +17,7 @@ import { StripePaymentDialog } from "./stripe-payment-dialog";
|
|||||||
import { SubscriptionCtaButton } from "./subscription-cta-button";
|
import { SubscriptionCtaButton } from "./subscription-cta-button";
|
||||||
import styles from "./subscription-cta-button.module.css";
|
import styles from "./subscription-cta-button.module.css";
|
||||||
|
|
||||||
const EZPAY_DEVELOPMENT_REDIRECT_DELAY_MS = 3000;
|
const EZPAY_DEVELOPMENT_REDIRECT_DELAY_MS = 5000;
|
||||||
|
|
||||||
export interface SubscriptionCheckoutButtonProps {
|
export interface SubscriptionCheckoutButtonProps {
|
||||||
/** 是否可用(未选套餐 / 未勾选协议 → false) */
|
/** 是否可用(未选套餐 / 未勾选协议 → false) */
|
||||||
@@ -149,6 +149,14 @@ export function SubscriptionCheckoutButton({
|
|||||||
stripeClientSecret !== null &&
|
stripeClientSecret !== null &&
|
||||||
stripeClientSecret !== hiddenStripeClientSecret &&
|
stripeClientSecret !== hiddenStripeClientSecret &&
|
||||||
!payment.isPaid;
|
!payment.isPaid;
|
||||||
|
const pendingEzpayRedirectOrderId =
|
||||||
|
AppEnvUtil.isDevelopment() &&
|
||||||
|
payment.payParams &&
|
||||||
|
isEzpayPayment(payment.payParams) &&
|
||||||
|
getPaymentUrl(payment.payParams) &&
|
||||||
|
payment.currentOrderId
|
||||||
|
? payment.currentOrderId
|
||||||
|
: null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -174,6 +182,16 @@ export function SubscriptionCheckoutButton({
|
|||||||
{payment.errorMessage}
|
{payment.errorMessage}
|
||||||
</p>
|
</p>
|
||||||
) : null}
|
) : null}
|
||||||
|
{pendingEzpayRedirectOrderId ? (
|
||||||
|
<div className={styles.pendingRedirect} role="status">
|
||||||
|
<span className={styles.pendingRedirectLabel}>
|
||||||
|
Ezpay order created. Redirecting in 3 seconds.
|
||||||
|
</span>
|
||||||
|
<span className={styles.pendingRedirectOrder}>
|
||||||
|
Order No. {pendingEzpayRedirectOrderId}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
{shouldShowStripeDialog ? (
|
{shouldShowStripeDialog ? (
|
||||||
<StripePaymentDialog
|
<StripePaymentDialog
|
||||||
clientSecret={stripeClientSecret}
|
clientSecret={stripeClientSecret}
|
||||||
|
|||||||
@@ -60,6 +60,32 @@
|
|||||||
animation: spin 0.8s linear infinite;
|
animation: spin 0.8s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pendingRedirect {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
margin-top: var(--spacing-sm);
|
||||||
|
padding: 10px 12px;
|
||||||
|
border: 1px solid rgba(246, 87, 160, 0.2);
|
||||||
|
border-radius: 14px;
|
||||||
|
background: #ffffff;
|
||||||
|
color: #3c3b3b;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pendingRedirectLabel {
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pendingRedirectOrder {
|
||||||
|
color: #1e1e1e;
|
||||||
|
font-size: var(--font-size-md);
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.3;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
to {
|
to {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
|
|||||||
Reference in New Issue
Block a user