@blocklet/payment-react 1.25.10 → 1.26.0

package/src/checkout-v2/components/dialogs/checkout-dialogs.tsx

@@ -0,0 +1,134 @@
+import { Divider, Stack, Typography } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import {
+  useSessionContext,
+  usePaymentMethodContext,
+  useSubmitFeature,
+  useCustomerFormFeature,
+} from '@blocklet/payment-react-headless';
+import StripeForm from '../../../payment/form/stripe';
+import ConfirmDialog from '../../../components/confirm';
+import PriceChangeConfirm from '../../../components/price-change-confirm';
+import { formatTokenAmount } from '../../utils/format';
+
+function getRedirectUrl(session: any): string | undefined {
+  try {
+    const params = new URLSearchParams(window.location.search);
+    const redirect = params.get('redirect');
+    if (redirect) return decodeURIComponent(redirect);
+  } catch {
+    // ignore
+  }
+  if (session?.success_url) return session.success_url;
+  if (session?.payment_link?.after_completion?.redirect?.url) {
+    return session.payment_link.after_completion.redirect.url;
+  }
+  return undefined;
+}
+
+export default function CheckoutDialogs() {
+  const { t } = useLocaleContext();
+  const { session } = useSessionContext();
+  const { currency, stripe } = usePaymentMethodContext();
+  const submit = useSubmitFeature();
+  const form = useCustomerFormFeature();
+  const mode = session?.mode || 'payment';
+
+  // Stripe dialog
+  const stripeContext = submit.context?.type === 'stripe' ? submit.context : null;
+  const showStripeDialog = submit.status === 'waiting_stripe' && stripeContext?.clientSecret;
+
+  return (
+    <>
+      {/* Stripe Payment Dialog */}
+      {showStripeDialog && (
+        <StripeForm
+          clientSecret={stripeContext!.clientSecret}
+          intentType={stripeContext!.intentType || 'payment_intent'}
+          publicKey={stripe?.publishableKey || ''}
+          mode={mode}
+          customer={
+            {
+              name: form.values.customer_name,
+              email: form.values.customer_email,
+              phone: form.values.customer_phone,
+              address: form.values.billing_address,
+            } as any
+          }
+          returnUrl={getRedirectUrl(session)}
+          onConfirm={submit.stripeConfirm}
+          onCancel={submit.stripeCancel}
+        />
+      )}
+
+      {/* Price Change Confirmation Dialog — reuse V1's PriceChangeConfirm component */}
+      {submit.status === 'confirming_price' && submit.context?.type === 'price_change' && (
+        <PriceChangeConfirm
+          open
+          changePercent={submit.context.changePercent}
+          onConfirm={submit.confirm}
+          onCancel={submit.cancel}
+          loading={false}
+        />
+      )}
+
+      {/* Fast Pay Confirmation Dialog */}
+      {submit.status === 'confirming_fast_pay' && submit.context?.type === 'fast_pay' && (
+        <ConfirmDialog
+          onConfirm={submit.confirm}
+          onCancel={submit.cancel}
+          title={
+            submit.context.payType === 'credit'
+              ? t('payment.checkout.fastPay.credit.title')
+              : t('payment.checkout.fastPay.title')
+          }
+          message={
+            submit.context.payType === 'credit' ? (
+              <Typography>
+                {t('payment.checkout.fastPay.credit.meteringSubscriptionMessage', {
+                  available: `${formatTokenAmount(submit.context.amount || '0', currency)} ${currency?.symbol || ''}`,
+                })}
+              </Typography>
+            ) : (
+              <Stack>
+                <Typography>{t('payment.checkout.fastPay.autoPaymentReason')}</Typography>
+                <Divider sx={{ mt: 1.5, mb: 1.5 }} />
+                <Stack spacing={1}>
+                  <Stack sx={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                    <Typography sx={{ color: 'text.primary', whiteSpace: 'nowrap' }}>
+                      {t('payment.checkout.fastPay.payer')}
+                    </Typography>
+                    <Typography sx={{ color: 'text.secondary', fontSize: 14 }}>
+                      {submit.context.payer
+                        ? `${submit.context.payer.slice(0, 10)}...${submit.context.payer.slice(-6)}`
+                        : ''}
+                    </Typography>
+                  </Stack>
+                  <Stack sx={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                    <Typography sx={{ color: 'text.primary' }}>{t('payment.checkout.fastPay.amount')}</Typography>
+                    <Typography>
+                      {formatTokenAmount(submit.context.amount || '0', currency)} {currency?.symbol || ''}
+                    </Typography>
+                  </Stack>
+                </Stack>
+              </Stack>
+            )
+          }
+          loading={false}
+          color="primary"
+        />
+      )}
+
+      {/* Credit Insufficient Dialog (matches V1 ConfirmDialog) */}
+      {submit.status === 'credit_insufficient' && submit.context?.type === 'credit_insufficient' && (
+        <ConfirmDialog
+          onConfirm={submit.cancel}
+          onCancel={submit.cancel}
+          title={t('payment.checkout.fastPay.credit.insufficientTitle')}
+          message={<Typography>{t('payment.checkout.fastPay.credit.insufficientMessage')}</Typography>}
+          confirm={t('common.confirm')}
+        />
+      )}
+    </>
+  );
+}

package/src/checkout-v2/components/left/billing-toggle.tsx

@@ -0,0 +1,122 @@
+import TrendingDownIcon from '@mui/icons-material/TrendingDown';
+import { Box, CircularProgress, Stack, Typography } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { BillingIntervalData } from '@blocklet/payment-react-headless';
+import { INTERVAL_LOCALE_KEY } from '../../utils/format';
+
+interface BillingToggleProps {
+  billingInterval: BillingIntervalData | null;
+}
+
+export default function BillingToggle({ billingInterval }: BillingToggleProps) {
+  const { t } = useLocaleContext();
+
+  if (!billingInterval?.available?.length || billingInterval.available.length <= 1) {
+    return null;
+  }
+
+  const best = billingInterval.available.reduce((a: any, b: any) =>
+    Number(b.savings || 0) > Number(a.savings || 0) ? b : a
+  );
+
+  return (
+    <Stack direction="row" alignItems="center" spacing={2} sx={{ mb: 3 }}>
+      {/* Capsule container — design: bg-white p-1 rounded-full border-slate-200 shadow-sm */}
+      <Stack
+        direction="row"
+        alignItems="center"
+        sx={{
+          bgcolor: 'background.paper',
+          borderRadius: '9999px',
+          border: '1px solid',
+          borderColor: 'divider',
+          p: '4px',
+          display: 'inline-flex',
+          boxShadow: (theme) =>
+            theme.palette.mode === 'dark' ? '0 1px 2px 0 rgba(0,0,0,0.3)' : '0 1px 2px 0 rgba(0,0,0,0.05)',
+        }}>
+        {billingInterval.available.map((option) => {
+          const isSelected = option.interval === billingInterval.current;
+          const selectedSx = {
+            bgcolor: (th: any) => (th.palette.mode === 'dark' ? 'rgba(156,106,222,0.25)' : 'rgba(156,106,222,0.15)'),
+            color: 'primary.main',
+            backdropFilter: 'blur(8px)',
+            WebkitBackdropFilter: 'blur(8px)',
+            boxShadow: (th: any) =>
+              th.palette.mode === 'dark'
+                ? '0 2px 8px rgba(156,106,222,0.2), inset 0 1px 0 rgba(255,255,255,0.06)'
+                : '0 2px 8px rgba(156,106,222,0.15), inset 0 1px 0 rgba(255,255,255,0.5)',
+            border: '1px solid',
+            borderColor: (th: any) => (th.palette.mode === 'dark' ? 'rgba(156,106,222,0.3)' : 'rgba(156,106,222,0.2)'),
+          };
+          const unselectedSx = {
+            color: 'text.secondary',
+            border: '1px solid transparent',
+            '&:hover': { color: 'text.primary' },
+          };
+          return (
+            <Box
+              key={option.interval}
+              onClick={() => {
+                if (option.interval !== billingInterval.current && !billingInterval.switching) {
+                  billingInterval.switch(option.interval);
+                }
+              }}
+              sx={{
+                px: 3.5,
+                py: 1,
+                borderRadius: '9999px',
+                cursor: 'pointer',
+                transition: 'all 0.3s ease',
+                userSelect: 'none',
+                ...(isSelected ? selectedSx : unselectedSx),
+              }}>
+              {billingInterval.switching && isSelected ? (
+                <CircularProgress size={14} color="inherit" sx={{ my: '1px' }} />
+              ) : (
+                <Typography
+                  component="span"
+                  sx={{
+                    fontSize: 14,
+                    fontWeight: 700,
+                    color: 'inherit',
+                    lineHeight: 1,
+                  }}>
+                  {t(INTERVAL_LOCALE_KEY[option.interval] || option.interval)}
+                </Typography>
+              )}
+            </Box>
+          );
+        })}
+      </Stack>
+
+      {/* SAVE badge — design: bg-[#ebfef5] text-[#12b886] border-[#d3f9e8] trending_down icon */}
+      {best.savings && Number(best.savings) > 0 && (
+        <Stack
+          direction="row"
+          alignItems="center"
+          spacing={0.75}
+          sx={{
+            px: 1.5,
+            py: 0.75,
+            bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'rgba(18,184,134,0.1)' : '#ebfef5'),
+            color: '#12b886',
+            fontSize: 11,
+            fontWeight: 700,
+            borderRadius: '9999px',
+            border: '1px solid',
+            borderColor: (theme) => (theme.palette.mode === 'dark' ? 'rgba(18,184,134,0.2)' : '#d3f9e8'),
+            textTransform: 'uppercase',
+            letterSpacing: '0.05em',
+          }}>
+          <TrendingDownIcon sx={{ fontSize: 14 }} />
+          <Typography
+            component="span"
+            sx={{ fontSize: 'inherit', fontWeight: 'inherit', color: 'inherit', lineHeight: 1 }}>
+            SAVE {best.savings}%
+          </Typography>
+        </Stack>
+      )}
+    </Stack>
+  );
+}

package/src/checkout-v2/components/left/cross-sell-card.tsx

@@ -0,0 +1,170 @@
+import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
+import ShoppingCartCheckoutIcon from '@mui/icons-material/ShoppingCartCheckout';
+import { Avatar, Box, Button, Chip, Stack, Typography } from '@mui/material';
+import type { TPaymentCurrency, TPrice } from '@blocklet/payment-types';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { formatDynamicUnitPrice, tSafe, INTERVAL_LOCALE_KEY } from '../../utils/format';
+
+interface CrossSellCardProps {
+  crossSellItem: TPrice;
+  currency: TPaymentCurrency | null;
+  exchangeRate: string | null;
+  crossSellRequired: boolean;
+  onAdd: () => Promise<void>;
+}
+
+export default function CrossSellCard({
+  crossSellItem,
+  currency,
+  exchangeRate,
+  crossSellRequired,
+  onAdd,
+}: CrossSellCardProps) {
+  const { t } = useLocaleContext();
+  if (!crossSellItem) return null;
+
+  const { product } = crossSellItem as any;
+  const productImage = product?.images?.[0] || '';
+  const productName = product?.name || t('payment.checkout.cross_sell.add');
+  const { recurring } = crossSellItem as any;
+  const intervalKey = recurring?.interval ? INTERVAL_LOCALE_KEY[recurring.interval] : null;
+  // Show interval label (e.g. "monthly") instead of description when description repeats title
+  const rawDescription = product?.description || '';
+  const subtitle = (() => {
+    if (rawDescription && rawDescription !== productName) return rawDescription;
+    return intervalKey ? t(intervalKey) : '';
+  })();
+
+  return (
+    <Box sx={{ position: 'relative' }}>
+      {/* Recommended badge — top-right, matching product-item-card */}
+      {crossSellRequired && (
+        <Chip
+          label={tSafe(t, 'payment.checkout.cross_sell.recommended', 'RECOMMENDED')}
+          size="small"
+          sx={{
+            position: 'absolute',
+            top: 0,
+            right: 40,
+            transform: 'translateY(-50%)',
+            zIndex: 1,
+            height: 22,
+            fontSize: 9,
+            fontWeight: 900,
+            letterSpacing: '0.12em',
+            bgcolor: 'primary.main',
+            color: '#fff',
+            boxShadow: '0 4px 12px rgba(45,124,243,0.2)',
+            '& .MuiChip-label': { px: 1.5 },
+          }}
+        />
+      )}
+
+      <Box
+        sx={{
+          p: { xs: 2, md: 3 },
+          bgcolor: 'background.paper',
+          borderRadius: { xs: '16px', md: '24px' },
+          border: '2px dashed',
+          borderColor: (theme) => (theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.15)' : 'rgba(45,124,243,0.25)'),
+          boxShadow: (theme) =>
+            theme.palette.mode === 'dark' ? '0 12px 40px -8px rgba(0,0,0,0.3)' : '0 12px 40px -8px rgba(0,0,0,0.06)',
+          transition: 'all 0.3s ease',
+          cursor: 'pointer',
+          '&:hover': {
+            borderColor: 'primary.main',
+            boxShadow: '0 12px 40px -8px rgba(0,0,0,0.1)',
+          },
+        }}
+        onClick={onAdd}>
+        <Stack direction="row" spacing={{ xs: 1.5, md: 2.5 }} sx={{ alignItems: 'center', width: '100%' }}>
+          {/* Product avatar */}
+          {productImage ? (
+            <Avatar
+              src={productImage}
+              variant="rounded"
+              sx={{
+                width: { xs: 44, md: 64 },
+                height: { xs: 44, md: 64 },
+                borderRadius: { xs: '12px', md: '16px' },
+                flexShrink: 0,
+              }}
+            />
+          ) : (
+            <Avatar
+              variant="rounded"
+              sx={{
+                width: { xs: 44, md: 64 },
+                height: { xs: 44, md: 64 },
+                borderRadius: { xs: '12px', md: '16px' },
+                bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.06)' : '#eff6ff'),
+                flexShrink: 0,
+              }}>
+              <ShoppingCartCheckoutIcon sx={{ fontSize: { xs: 22, md: 28 }, color: 'primary.main', opacity: 0.45 }} />
+            </Avatar>
+          )}
+
+          <Box sx={{ flex: 1, minWidth: 0 }}>
+            <Stack direction="row" justifyContent="space-between" alignItems="flex-start" sx={{ mb: 0.25 }}>
+              <Typography
+                sx={{ fontWeight: 800, fontSize: { xs: 15, md: 18 }, color: 'text.primary', lineHeight: 1.3 }}>
+                {productName}
+              </Typography>
+              <Stack alignItems="flex-end" sx={{ flexShrink: 0, ml: { xs: 1, md: 2 } }}>
+                <Typography
+                  sx={{ fontWeight: 800, color: 'text.primary', whiteSpace: 'nowrap', fontSize: { xs: 15, md: 18 } }}>
+                  {formatDynamicUnitPrice(crossSellItem as any, currency, exchangeRate)} {currency?.symbol}
+                </Typography>
+                {exchangeRate && (crossSellItem as any).base_amount && (
+                  <Typography sx={{ fontSize: 10, color: 'text.disabled', fontWeight: 700, lineHeight: 1 }}>
+                    ≈ ${Number((crossSellItem as any).base_amount || 0).toFixed(2)}
+                  </Typography>
+                )}
+              </Stack>
+            </Stack>
+            {subtitle && (
+              <Typography
+                sx={{ fontSize: { xs: 12, md: 14 }, color: 'text.secondary', fontWeight: 500, lineHeight: 1.4 }}
+                noWrap>
+                {subtitle}
+              </Typography>
+            )}
+
+            <Box sx={{ pt: { xs: 1.5, md: 2 } }}>
+              <Button
+                size="small"
+                variant="outlined"
+                startIcon={<AddShoppingCartIcon sx={{ fontSize: '14px !important' }} />}
+                sx={{
+                  textTransform: 'none',
+                  fontSize: { xs: 11, md: 12 },
+                  fontWeight: 700,
+                  borderRadius: '8px',
+                  border: '1px solid',
+                  borderColor: 'divider',
+                  color: 'primary.main',
+                  bgcolor: 'background.paper',
+                  boxShadow: 1,
+                  px: 1.5,
+                  py: 0.5,
+                  transition: 'all 0.2s',
+                  '&:hover': {
+                    bgcolor: 'primary.main',
+                    color: '#fff',
+                    borderColor: 'primary.main',
+                  },
+                  '&:active': { transform: 'scale(0.95)' },
+                }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onAdd();
+                }}>
+                {tSafe(t, 'payment.checkout.cross_sell.addToOrder', 'Add to order')}
+              </Button>
+            </Box>
+          </Box>
+        </Stack>
+      </Box>
+    </Box>
+  );
+}