@blocklet/payment-react 1.25.10 → 1.26.0

package/src/components/phone-field.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { Box, InputBase, InputAdornment, Typography } from '@mui/material';
+import { defaultCountries, usePhoneInput } from 'react-international-phone';
+import { useMount } from 'ahooks';
+
+import CountrySelect from './country-select';
+import { isValidCountry } from '../libs/util';
+import { getPhoneUtil } from '../libs/phone-validator';
+
+export interface PhoneFieldProps {
+  value: string;
+  country: string;
+  onChange: (phone: string) => void;
+  onCountryChange: (country: string) => void;
+  label: string;
+  error?: string;
+  onBlur?: () => void;
+}
+
+/**
+ * Phone input with country flag + dial code selector.
+ * Standalone version of V1 PhoneInput — no react-hook-form dependency.
+ */
+export default function PhoneField({
+  value,
+  country: externalCountry,
+  onChange,
+  onCountryChange,
+  label,
+  error = undefined,
+  onBlur = undefined,
+}: PhoneFieldProps) {
+  const isUpdatingRef = useRef(false);
+
+  const safeUpdate = useCallback((callback: () => void) => {
+    if (isUpdatingRef.current) return;
+    try {
+      isUpdatingRef.current = true;
+      callback();
+    } finally {
+      requestAnimationFrame(() => {
+        isUpdatingRef.current = false;
+      });
+    }
+  }, []);
+
+  const { phone, handlePhoneValueChange, inputRef, country, setCountry } = usePhoneInput({
+    defaultCountry: isValidCountry(externalCountry) ? externalCountry : 'us',
+    value: value || '',
+    countries: defaultCountries,
+    onChange: (data) => {
+      safeUpdate(() => {
+        onChange(data.phone);
+        onCountryChange(data.country);
+      });
+    },
+  });
+
+  // Preload phone validator (matches V1 behavior)
+  useMount(() => {
+    getPhoneUtil().catch((err) => {
+      console.error('Failed to preload phone validator:', err);
+    });
+  });
+
+  // Sync external country changes (e.g. from postal code CountrySelect)
+  useEffect(() => {
+    if (!externalCountry || externalCountry === country) return;
+    safeUpdate(() => {
+      setCountry(externalCountry);
+    });
+  }, [externalCountry, country, setCountry, safeUpdate]);
+
+  const handleCountryChange = useCallback(
+    (v: string) => {
+      safeUpdate(() => {
+        setCountry(v);
+        onCountryChange(v);
+      });
+    },
+    [setCountry, safeUpdate, onCountryChange]
+  );
+
+  return (
+    <Box sx={{ mb: 1.5 }}>
+      <Typography sx={{ fontSize: 13, fontWeight: 600, color: 'text.primary', mb: 0.5 }}>{label}</Typography>
+      <InputBase
+        fullWidth
+        value={phone}
+        onChange={handlePhoneValueChange}
+        onBlur={onBlur}
+        type="tel"
+        inputRef={inputRef}
+        startAdornment={
+          <InputAdornment position="start" sx={{ mr: 0.25, ml: -0.5 }}>
+            <CountrySelect
+              value={country}
+              onChange={handleCountryChange}
+              sx={{
+                '.MuiOutlinedInput-notchedOutline': { borderColor: 'transparent !important' },
+                '& .MuiSelect-select': { py: 0, pr: '20px !important' },
+              }}
+              showDialCode
+            />
+          </InputAdornment>
+        }
+        sx={{
+          bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'grey.50'),
+          borderRadius: '8px',
+          px: 1.5,
+          py: 0.75,
+          fontSize: 14,
+          '& .MuiInputBase-input': { p: 0 },
+        }}
+      />
+      {error && <Typography sx={{ fontSize: 12, color: 'error.main', mt: 0.25 }}>{error}</Typography>}
+    </Box>
+  );
+}

package/src/index.ts

@@ -46,6 +46,7 @@ import PromotionCode from './components/promotion-code';
 import SourceDataViewer from './components/source-data-viewer';
 import SlippageConfig from './components/slippage-config';
 import DynamicPricingUnavailable from './components/dynamic-pricing-unavailable';
+import { CheckoutV2 } from './checkout-v2';
 
 export { PaymentThemeProvider } from './theme';
 
@@ -116,8 +117,10 @@ export {
   DynamicPricingUnavailable,
   PromotionSection,
   TotalSection,
+  CheckoutV2,
 };
 
 export type { CountrySelectProps } from './components/country-select';
 export type { StripePaymentActionProps } from './components/stripe-payment-action';
 export type { SlippageConfigValue, SlippageConfigProps } from './components/slippage-config';
+export type { CheckoutV2Props } from './checkout-v2';

package/src/locales/en.tsx

@@ -21,6 +21,7 @@ export default flat({
     setup: 'Setup',
     amount: 'Amount',
     total: 'Total',
+    totalDue: 'Total Due',
     subtotal: 'Subtotal',
     status: 'Status',
     livemode: 'Test mode',
@@ -87,6 +88,7 @@ export default flat({
     viewConsumptionDetail: 'Consumption Detail',
     customer: 'Customer',
     currency: 'Currency',
+    network: 'Network',
     custom: 'Custom',
     description: 'Description',
     statementDescriptor: 'Statement descriptor',
@@ -282,11 +284,14 @@ export default flat({
       free: "{count} {interval}{count > 1 ? 's' : ''} free",
       least: 'continue with at least',
       completed: {
-        payment: 'Thanks for your purchase',
-        subscription: 'Thanks for subscribing',
-        setup: 'Thanks for subscribing',
-        donate: 'Thanks for your tip',
+        payment: 'Purchase successful',
+        subscription: 'Subscription successful',
+        setup: 'Subscription successful',
+        donate: 'Donation successful',
         tip: 'A payment to {payee} has been completed. You can view the details of this payment in your account.',
+        summary: {
+          paid: "You've paid {amount}",
+        },
       },
       vendor: {
         accountRequired: 'This action requires a unified account. Please switch accounts and try again.',
@@ -375,6 +380,7 @@ export default flat({
           periodic: 'Grant {amount} every {interval}.',
           withRefresh: 'Grant {amount} every {interval}; unused credits expire with the next grant.',
         },
+        topupDescription: 'Purchase {creditName} at {unitPrice} per credit.',
       },
       expired: {
         title: 'Expired Link',
@@ -390,9 +396,44 @@ export default flat({
         title: 'Nothing to show here',
         description: 'It seems this checkout session is not configured properly',
       },
+      error: {
+        title: 'Something went wrong',
+      },
       orderSummary: 'Order Summary',
+      orderSummarySubtitle: 'Items included in this purchase',
       paymentDetails: 'Payment Details',
       productListTotal: 'Includes {total} items',
+      headerTitle: {
+        subscribe: 'Subscribe to {name}',
+        purchase: 'Purchase {name}',
+      },
+      planFeatures: 'Plan Features',
+      typeBadge: {
+        subscription: 'SUBSCRIPTION',
+        topup: 'TOP-UP',
+        oneTime: 'ONE-TIME',
+      },
+      subtitle: {
+        subscriptionInterval: '{interval} subscription',
+        creditsTopup: 'Credits top-up',
+        addonFor: 'Add-on for {product}',
+        oneTime: 'One-time purchase',
+      },
+      creditTopup: {
+        title: 'Get {name}',
+        question: 'How many {symbol} do you want?',
+        credits: 'Credits',
+        increment: 'Increments of {step} {symbol}',
+        validFor: 'Credits are valid for {duration} {unit} after purchase.',
+        willReceive: "You'll receive",
+        packInfo: 'Includes {packs} credit packs ({perPack} per pack)',
+        autoMatch: "We'll automatically match the closest credit pack.",
+        autoMatchTooltip: '{symbol} are sold in packs of {step}',
+        pendingWarning:
+          'You have a usage overage of {pendingAmount}. You need at least {minCredits} to restore access.',
+        pendingEnough:
+          'You have a usage overage of {pendingAmount}. After covering the overage, your available balance will be {availableAmount}.',
+      },
       promotion: {
         add_code: 'Add promotion code',
         enter_code: 'Enter promotion code',

package/src/locales/zh.tsx

@@ -21,6 +21,7 @@ export default flat({
     accessDenied: '您无权访问其他客户的数据',
     amount: '金额',
     total: '总计',
+    totalDue: '应付总额',
     subtotal: '小计',
     status: '状态',
     livemode: '测试模式',
@@ -87,6 +88,7 @@ export default flat({
     viewConsumptionDetail: '消费详情',
     customer: '客户',
     currency: '币种',
+    network: '网络',
     custom: '自定义',
     description: '描述',
     statementDescriptor: '声明描述',
@@ -278,11 +280,14 @@ export default flat({
       free: '免费试用 {count} {interval}',
       least: '至少',
       completed: {
-        payment: '感谢您的购买',
-        subscription: '感谢您的订阅',
-        setup: '感谢您的订阅',
-        donate: '感谢您的支持',
+        payment: '购买成功',
+        subscription: '订阅成功',
+        setup: '订阅成功',
+        donate: '捐赠成功',
         tip: '向 {payee} 的付款已完成。您可以在您的账户中查看此付款的详细信息。',
+        summary: {
+          paid: '本次支付 {amount}',
+        },
       },
       vendor: {
         accountRequired: '您当前使用的是非统一账户登录，此服务需要您使用统一账户。请切换到统一账户登录后重试。',
@@ -405,14 +410,48 @@ export default flat({
           periodic: '每{interval}发放 {amount}。',
           withRefresh: '每{interval}发放 {amount}，未使用额度将在下次发放时过期。',
         },
+        topupDescription: '购买 {creditName}，单价 {unitPrice}/额度。',
       },
       emptyItems: {
         title: '没有任何购买项目',
         description: '可能这个付款链接没有正确配置',
       },
+      error: {
+        title: '出了点问题',
+      },
       orderSummary: '订单概览',
+      orderSummarySubtitle: '本次交易包含以下项目',
       paymentDetails: '支付信息',
       productListTotal: '包括 {total} 项',
+      headerTitle: {
+        subscribe: '订阅 {name}',
+        purchase: '购买 {name}',
+      },
+      planFeatures: '功能特性',
+      typeBadge: {
+        subscription: '订阅',
+        topup: '充值',
+        oneTime: '一次性购买',
+      },
+      subtitle: {
+        subscriptionInterval: '{interval}订阅',
+        creditsTopup: '余额充值',
+        addonFor: '{product} 的附加项',
+        oneTime: '一次性购买',
+      },
+      creditTopup: {
+        title: '购买 {name}',
+        question: '你需要多少 {symbol}？',
+        credits: '额度',
+        increment: '每次增减 {step} {symbol}',
+        validFor: '额度在购买后 {duration} {unit}内有效。',
+        willReceive: '你将获得',
+        packInfo: '包含 {packs} 个额度包（每包 {perPack}）',
+        autoMatch: '我们将自动匹配最接近的额度包。',
+        autoMatchTooltip: '{symbol} 按每包 {step} 个出售',
+        pendingWarning: '您有 {pendingAmount} 的使用超额，至少需要购买 {minCredits} 才能恢复访问。',
+        pendingEnough: '您有 {pendingAmount} 的使用超额，扣除后您的可用余额将为 {availableAmount}。',
+      },
       connectModal: {
         title: '{action}',
         scan: '使用以下方式完成本次支付',

package/src/payment/form/index.tsx

@@ -242,6 +242,9 @@ export default function PaymentForm({
   } = useFormContext();
   const errorRef = useRef<HTMLDivElement | null>(null);
   const processingRef = useRef(false);
+  // Stable idempotency key: reuse same Quote on retry (intent: "retry with same Quote")
+  const idempotencyKeyRef = useRef('');
+  const sessionFingerprintRef = useRef('');
   const quantityInventoryStatus = useMemo(() => {
     let status = true;
     for (const item of checkoutSession.line_items) {
@@ -975,10 +978,22 @@ export default function PaymentForm({
         checkoutSession.line_items?.find((item: TLineItemExpanded) => (item as any)?.exchange_rate)?.exchange_rate ||
         undefined;
 
+      // Stable idempotency key: only regenerate when payment context changes
+      // Same context retry → reuse Quote (intent: "Failed Payments don't invalidate Quote")
+      const items = (checkoutSession.line_items || []) as TLineItemExpanded[];
+      const itemsSig = items
+        .map((i: TLineItemExpanded) => `${(i as any).upsell_price_id || i.price_id}:${i.quantity}`)
+        .join('|');
+      const fingerprint = `${checkoutSession.id}-${paymentCurrency?.id}-${itemsSig}`;
+      if (fingerprint !== sessionFingerprintRef.current || !idempotencyKeyRef.current) {
+        sessionFingerprintRef.current = fingerprint;
+        idempotencyKeyRef.current = generateIdempotencyKey(checkoutSession.id, paymentCurrency?.id || '');
+      }
+
       const payload = {
         ...data,
         // Final Freeze: Include these for new quote creation at submit
-        idempotency_key: generateIdempotencyKey(checkoutSession.id, paymentCurrency?.id || ''),
+        idempotency_key: idempotencyKeyRef.current,
         preview_rate: (previewRate as unknown as string) || undefined,
         price_confirmed: state.priceChangeConfirm?.formData ? true : undefined,
       };