@blocklet/payment-react 1.20.13 → 1.20.15

package/lib/payment/index.js

@@ -145,10 +145,7 @@ function PaymentInner({
   });
   const currency = (0, _util2.findCurrency)(paymentMethods, currencyId) || settings.baseCurrency;
   const method = paymentMethods.find(x => x.id === currency.payment_method_id);
-  (0, _react.useEffect)(() => {
-    if (onChange) {
-      onChange(methods.getValues());
-    }
+  const recalculatePromotion = () => {
     if (state.checkoutSession?.discounts?.length) {
       _api.default.post(`/api/checkout-sessions/${state.checkoutSession.id}/recalculate-promotion`, {
         currency_id: currencyId
@@ -156,6 +153,12 @@ function PaymentInner({
         onPromotionUpdate();
       });
     }
+  };
+  (0, _react.useEffect)(() => {
+    if (onChange) {
+      onChange(methods.getValues());
+    }
+    recalculatePromotion();
   }, [currencyId]);
   const onUpsell = async (from, to) => {
     try {
@@ -165,6 +168,10 @@ function PaymentInner({
         from,
         to
       });
+      if (data.discounts?.length) {
+        recalculatePromotion();
+        return;
+      }
       setState({
         checkoutSession: data
       });
@@ -180,6 +187,10 @@ function PaymentInner({
       } = await _api.default.put(`/api/checkout-sessions/${state.checkoutSession.id}/downsell`, {
         from
       });
+      if (data.discounts?.length) {
+        recalculatePromotion();
+        return;
+      }
       setState({
         checkoutSession: data
       });
@@ -195,6 +206,10 @@ function PaymentInner({
       } = await _api.default.put(`/api/checkout-sessions/${state.checkoutSession.id}/cross-sell`, {
         to
       });
+      if (data.discounts?.length) {
+        recalculatePromotion();
+        return;
+      }
       setState({
         checkoutSession: data
       });
@@ -211,6 +226,10 @@ function PaymentInner({
         itemId,
         quantity
       });
+      if (data.discounts?.length) {
+        recalculatePromotion();
+        return;
+      }
       setState({
         checkoutSession: data
       });
@@ -224,6 +243,10 @@ function PaymentInner({
       const {
         data
       } = await _api.default.delete(`/api/checkout-sessions/${state.checkoutSession.id}/cross-sell`);
+      if (data.discounts?.length) {
+        recalculatePromotion();
+        return;
+      }
       setState({
         checkoutSession: data
       });
@@ -243,6 +266,10 @@ function PaymentInner({
         priceId,
         amount: (0, _util.fromTokenToUnit)(amount, currency.decimal).toString()
       });
+      if (data.discounts?.length) {
+        recalculatePromotion();
+        return;
+      }
       setState({
         checkoutSession: data
       });

package/lib/payment/success.js

@@ -44,7 +44,7 @@ function PaymentSuccess({
         const response = await api.get((0, _ufo.joinURL)(prefix, `/api/vendors/order/${sessionId}/status`), {});
         const needCheckError = Date.now() - timerRef.current > 6 * 1e3;
         const allCompleted = response.data?.vendors?.every(vendor => vendor.progress >= 100);
-        const hasAnyFailed = response.data?.vendors?.some(vendor => vendor.status === "failed" || needCheckError && !!vendor.error);
+        const hasAnyFailed = response.data?.vendors?.some(vendor => vendor.status === "failed" || needCheckError && !!vendor.error && !!vendor.error_message);
         if (hasAnyFailed || allCompleted) {
           clearInterval(interval2);
         }

package/lib/payment/summary.js

@@ -44,11 +44,11 @@ const ExpandMore = (0, _styles.styled)(props => {
     duration: theme.transitions.duration.shortest
   })
 }));
-async function fetchCrossSell(id) {
+async function fetchCrossSell(id, skipError = true) {
   try {
     const {
       data
-    } = await _api.default.get(`/api/checkout-sessions/${id}/cross-sell`);
+    } = await _api.default.get(`/api/checkout-sessions/${id}/cross-sell?skipError=${skipError}`);
     if (!data.error) {
       return data;
     }
@@ -127,7 +127,7 @@ function PaymentSummary({
   const {
     data,
     runAsync
-  } = (0, _ahooks.useRequest)(() => checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null));
+  } = (0, _ahooks.useRequest)(skipError => checkoutSessionId ? fetchCrossSell(checkoutSessionId, skipError) : Promise.resolve(null));
   const sessionDiscounts = checkoutSession?.discounts || [];
   const allowPromotionCodes = !!checkoutSession?.allow_promotion_codes;
   const hasDiscounts = sessionDiscounts?.length > 0;
@@ -174,15 +174,15 @@ function PaymentSummary({
   }, []);
   const handleUpsell = async (from, to) => {
     await onUpsell(from, to);
-    runAsync();
+    runAsync(false);
   };
   const handleQuantityChange = async (itemId, quantity) => {
     await onQuantityChange(itemId, quantity);
-    runAsync();
+    runAsync(false);
   };
   const handleDownsell = async from => {
     await onDownsell(from);
-    runAsync();
+    runAsync(false);
   };
   const handleApplyCrossSell = async () => {
     if (data) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.20.13",
+  "version": "1.20.15",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.20.13",
+    "@blocklet/payment-types": "1.20.15",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -125,5 +125,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "0cbe918549f7d06561b5307fb947bfbbd2250984"
+  "gitHead": "d205c3b1ec7d2b819e375ed2eb8b70c9d48f0bcb"
 }

package/src/components/source-data-viewer.tsx

@@ -0,0 +1,295 @@
+// React not needed for this component
+import Empty from '@arcblock/ux/lib/Empty';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Box, Chip, Link, Stack, Typography } from '@mui/material';
+
+// 定义本地类型，避免依赖问题
+type LocalizedText = {
+  zh: string;
+  en: string;
+};
+
+// 简单格式适合大部分业务场景
+type SimpleSourceData = Record<string, string>;
+
+// 结构化格式适合复杂场景
+type StructuredSourceDataField = {
+  key: string;
+  label: string | LocalizedText;
+  value: string;
+  type?: 'text' | 'image' | 'url';
+  url?: string;
+  group?: string;
+};
+
+// 混合类型：支持渐进式接入
+type SourceData = SimpleSourceData | StructuredSourceDataField[];
+
+interface SourceDataViewerProps {
+  data: SourceData;
+  compact?: boolean;
+  maxItems?: number;
+  locale?: 'en' | 'zh';
+  showGroups?: boolean; // 是否显示分组
+}
+
+function SourceDataViewer({
+  data,
+  compact = false,
+  maxItems = undefined,
+  locale: propLocale = undefined,
+  showGroups = false,
+}: SourceDataViewerProps) {
+  const { locale: contextLocale, t } = useLocaleContext();
+  const currentLocale = propLocale || (contextLocale as 'en' | 'zh') || 'en';
+
+  if (
+    !data ||
+    (Array.isArray(data) && data.length === 0) ||
+    (typeof data === 'object' && Object.keys(data).length === 0)
+  ) {
+    return <Empty>{t('common.none')}</Empty>;
+  }
+
+  const getLocalizedText = (text: string | LocalizedText): string => {
+    if (typeof text === 'string') {
+      return text;
+    }
+    return text[currentLocale] || text.en || '';
+  };
+
+  /**
+   * Type guards
+   */
+  const isSimpleSourceData = (sourceData: SourceData): sourceData is SimpleSourceData => {
+    return typeof sourceData === 'object' && !Array.isArray(sourceData) && sourceData !== null;
+  };
+
+  /**
+   * Auto detect URL pattern
+   */
+  const isUrlLike = (str: string): boolean => {
+    try {
+      // eslint-disable-next-line no-new
+      new URL(str);
+      return true;
+    } catch {
+      return /^https?:\/\/.+/.test(str) || /^www\..+/.test(str);
+    }
+  };
+
+  /**
+   * Convert any format to normalized structured format with auto URL detection
+   */
+  const normalizeData = (inputData: SourceData): StructuredSourceDataField[] => {
+    if (isSimpleSourceData(inputData)) {
+      return Object.entries(inputData).map(([key, value]) => {
+        const stringValue = String(value);
+        const isUrl = isUrlLike(stringValue);
+        return {
+          key,
+          label: key.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase()),
+          value: stringValue,
+          type: isUrl ? ('url' as const) : ('text' as const),
+          url: isUrl ? stringValue : undefined,
+        };
+      });
+    }
+    return inputData;
+  };
+
+  /**
+   * Render field value based on type
+   */
+  const renderFieldValue = (field: StructuredSourceDataField) => {
+    const displayValue = field.value;
+
+    if (field.type === 'url') {
+      return (
+        <Link
+          href={field.url || field.value}
+          target="_blank"
+          rel="noopener noreferrer"
+          sx={{
+            color: 'primary.main',
+            textDecoration: 'none',
+            fontSize: '0.85rem',
+            fontWeight: 600,
+            lineHeight: 1.4,
+            '&:hover': {
+              textDecoration: 'underline',
+              color: 'primary.dark',
+            },
+            '&:visited': {
+              color: 'primary.main',
+            },
+          }}>
+          {displayValue}
+        </Link>
+      );
+    }
+
+    if (field.type === 'image') {
+      return (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+          }}>
+          <Box
+            component="img"
+            src={field.url || field.value}
+            alt={displayValue}
+            sx={{
+              width: 24,
+              height: 24,
+              borderRadius: 1,
+              objectFit: 'cover',
+            }}
+          />
+          <Typography variant="body2" sx={{ fontWeight: 500 }}>
+            {displayValue}
+          </Typography>
+        </Box>
+      );
+    }
+
+    return (
+      <Typography
+        variant="body2"
+        sx={{
+          fontWeight: 500,
+          color: 'text.primary',
+        }}>
+        {displayValue}
+      </Typography>
+    );
+  };
+
+  if (
+    !data ||
+    (Array.isArray(data) && data.length === 0) ||
+    (typeof data === 'object' && Object.keys(data).length === 0)
+  ) {
+    return null;
+  }
+
+  const normalizedData = normalizeData(data);
+  const displayItems = maxItems ? normalizedData.slice(0, maxItems) : normalizedData;
+
+  if (compact) {
+    return (
+      <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
+        {displayItems.map((field) => (
+          <Chip
+            key={field.key}
+            label={`${getLocalizedText(field.label)}: ${field.value}`}
+            size="small"
+            variant="outlined"
+            sx={{ maxWidth: 200 }}
+          />
+        ))}
+        {maxItems && normalizedData.length > maxItems && (
+          <Chip label={`+${normalizedData.length - maxItems} more`} size="small" color="primary" variant="outlined" />
+        )}
+      </Stack>
+    );
+  }
+
+  if (showGroups) {
+    // Group by group field
+    const groupedData = displayItems.reduce(
+      (acc, field) => {
+        const group = field.group || 'default';
+        if (!acc[group]) acc[group] = [];
+        acc[group].push(field);
+        return acc;
+      },
+      {} as Record<string, StructuredSourceDataField[]>
+    );
+
+    return (
+      <Stack spacing={2.5}>
+        {Object.entries(groupedData).map(([group, fields]) => (
+          <Box key={group}>
+            {group !== 'default' && (
+              <Typography
+                variant="subtitle2"
+                sx={{
+                  mb: 1.5,
+                  fontWeight: 700,
+                  color: 'text.primary',
+                  letterSpacing: '0.5px',
+                  borderBottom: '1px solid',
+                  borderColor: 'divider',
+                  pb: 0.5,
+                }}>
+                {group.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())}
+              </Typography>
+            )}
+            <Stack spacing={1.2} sx={{ pl: group !== 'default' ? 1 : 0 }}>
+              {fields.map((field) => (
+                <Box
+                  key={field.key}
+                  sx={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'flex-start',
+                    gap: 3,
+                    minHeight: 20,
+                  }}>
+                  <Typography
+                    variant="body2"
+                    color="text.secondary"
+                    sx={{
+                      fontSize: '0.8rem',
+                      minWidth: 100,
+                      fontWeight: 600,
+                      lineHeight: 1.4,
+                    }}>
+                    {getLocalizedText(field.label)}
+                  </Typography>
+                  <Box sx={{ flex: 1, minWidth: 0, wordBreak: 'break-all', whiteSpace: 'wrap' }}>
+                    {renderFieldValue(field)}
+                  </Box>
+                </Box>
+              ))}
+            </Stack>
+          </Box>
+        ))}
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack spacing={1.5}>
+      {displayItems.map((field) => (
+        <Box
+          key={field.key}
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            gap: 3,
+            minHeight: 20,
+          }}>
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{
+              fontSize: '0.8rem',
+              minWidth: 100,
+              fontWeight: 600,
+              lineHeight: 1.4,
+            }}>
+            {getLocalizedText(field.label)}
+          </Typography>
+          <Box sx={{ flex: 1, minWidth: 0 }}>{renderFieldValue(field)}</Box>
+        </Box>
+      ))}
+    </Stack>
+  );
+}
+
+export default SourceDataViewer;