@blocklet/payment-react 1.19.0 → 1.19.2

package/lib/payment/product-item.js

@@ -7,12 +7,14 @@ module.exports = ProductItem;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");
 var _react = require("react");
 var _status = _interopRequireDefault(require("../components/status"));
 var _switchButton = _interopRequireDefault(require("../components/switch-button"));
 var _util = require("../libs/util");
 var _productCard = _interopRequireDefault(require("./product-card"));
 var _dayjs = _interopRequireDefault(require("../libs/dayjs"));
+var _payment = require("../contexts/payment");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function ProductItem({
   item,
@@ -23,12 +25,20 @@ function ProductItem({
   mode = "normal",
   children = null,
   onUpsell,
-  onDownsell
+  onDownsell,
+  completed = false,
+  adjustableQuantity = {
+    enabled: false
+  },
+  onQuantityChange = () => {}
 }) {
   const {
     t,
     locale
   } = (0, _context.useLocaleContext)();
+  const {
+    settings
+  } = (0, _payment.usePaymentContext)();
   const pricing = (0, _util.formatLineItemPricing)(item, currency, {
     trialEnd,
     trialInDays
@@ -36,6 +46,65 @@ function ProductItem({
   const saving = (0, _util.formatUpsellSaving)(items, currency);
   const metered = item.price?.recurring?.usage_type === "metered" ? t("common.metered") : "";
   const canUpsell = mode === "normal" && items.length === 1;
+  const isCreditProduct = item.price.product?.type === "credit" && item.price.metadata?.credit_config?.credit_amount;
+  const creditAmount = isCreditProduct ? Number(item.price.metadata.credit_config.credit_amount) : 0;
+  const creditCurrency = isCreditProduct ? (0, _util.findCurrency)(settings.paymentMethods, item.price.metadata?.credit_config?.currency_id ?? "") : null;
+  const validDuration = item.price.metadata?.credit_config?.valid_duration_value;
+  const validDurationUnit = item.price.metadata?.credit_config?.valid_duration_unit || "days";
+  const [localQuantity, setLocalQuantity] = (0, _react.useState)(item.quantity);
+  const canAdjustQuantity = adjustableQuantity.enabled && mode === "normal";
+  const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
+  const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
+  const maxQuantity = Math.min(adjustableQuantity.maximum || 999, quantityAvailable || 999);
+  const handleQuantityChange = newQuantity => {
+    if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
+      setLocalQuantity(newQuantity);
+      if ((0, _util.formatQuantityInventory)(item.price, newQuantity, locale)) {
+        return;
+      }
+      onQuantityChange(item.price_id, newQuantity);
+    }
+  };
+  const handleQuantityIncrease = () => {
+    if (localQuantity < maxQuantity) {
+      handleQuantityChange(localQuantity + 1);
+    }
+  };
+  const handleQuantityDecrease = () => {
+    if (localQuantity > minQuantity) {
+      handleQuantityChange(localQuantity - 1);
+    }
+  };
+  const handleQuantityInputChange = event => {
+    const value = parseInt(event.target.value, 10);
+    if (!Number.isNaN(value)) {
+      handleQuantityChange(value);
+    }
+  };
+  const formatCreditInfo = () => {
+    if (!isCreditProduct) return null;
+    const isRecurring = item.price.type === "recurring";
+    const totalCredit = creditAmount * localQuantity;
+    let message = "";
+    if (isRecurring) {
+      message = t("payment.checkout.credit.recurringInfo", {
+        amount: totalCredit,
+        period: (0, _util.formatRecurring)(item.price.recurring, true, "per", locale)
+      });
+    } else {
+      message = t("payment.checkout.credit.oneTimeInfo", {
+        amount: totalCredit,
+        symbol: creditCurrency?.symbol || "Credits"
+      });
+    }
+    if (validDuration && validDuration > 0) {
+      message += `\uFF0C${t("payment.checkout.credit.expiresIn", {
+        duration: validDuration,
+        unit: t(`common.${validDurationUnit}`)
+      })}`;
+    }
+    return message;
+  };
   const primaryText = (0, _react.useMemo)(() => {
     const price = item.upsell_price || item.price || {};
     const isRecurring = price?.type === "recurring" && price?.recurring;
@@ -45,6 +114,7 @@ function ProductItem({
     }
     return pricing.primary;
   }, [trialInDays, trialEnd, pricing, item, locale]);
+  const quantityInventoryError = (0, _util.formatQuantityInventory)(item.price, localQuantity, locale);
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
     direction: "column",
     spacing: 1,
@@ -103,8 +173,8 @@ function ProductItem({
             children: pricing.secondary
           })]
         })]
-      }), (0, _util.formatQuantityInventory)(item.price, item.quantity, locale) ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
-        label: (0, _util.formatQuantityInventory)(item.price, item.quantity, locale),
+      }), quantityInventoryError ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+        label: quantityInventoryError,
         variant: "outlined",
         sx: {
           mt: 1,
@@ -112,7 +182,77 @@ function ProductItem({
           backgroundColor: "chip.error.background",
           color: "chip.error.text"
         }
-      }) : null, children]
+      }) : null, canAdjustQuantity && !completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          mt: 1,
+          p: 1
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          spacing: 1,
+          sx: {
+            alignItems: "center"
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            variant: "body2",
+            sx: {
+              color: "text.secondary",
+              minWidth: "fit-content"
+            },
+            children: [t("common.quantity"), ":"]
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+            size: "small",
+            onClick: handleQuantityDecrease,
+            disabled: localQuantity <= minQuantity,
+            sx: {
+              minWidth: 32,
+              width: 32,
+              height: 32
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Remove, {
+              fontSize: "small"
+            })
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+            size: "small",
+            value: localQuantity,
+            onChange: handleQuantityInputChange,
+            sx: {
+              width: 60
+            },
+            type: "number",
+            slotProps: {
+              htmlInput: {
+                min: minQuantity,
+                max: maxQuantity,
+                style: {
+                  textAlign: "center",
+                  padding: "4px"
+                }
+              }
+            }
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+            size: "small",
+            onClick: handleQuantityIncrease,
+            disabled: localQuantity >= maxQuantity,
+            sx: {
+              minWidth: 32,
+              width: 32,
+              height: 32
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Add, {
+              fontSize: "small"
+            })
+          })]
+        })
+      }), isCreditProduct && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
+        severity: "info",
+        sx: {
+          mt: 1,
+          fontSize: "0.875rem"
+        },
+        icon: false,
+        children: formatCreditInfo()
+      }), children]
     }), canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "row",
       className: "product-item-upsell",

package/lib/payment/summary.d.ts

@@ -8,6 +8,7 @@ type Props = {
     showStaking?: boolean;
     onUpsell?: Function;
     onDownsell?: Function;
+    onQuantityChange?: Function;
     onChangeAmount?: Function;
     onApplyCrossSell?: Function;
     onCancelCrossSell?: Function;
@@ -15,6 +16,7 @@ type Props = {
     crossSellBehavior?: string;
     donationSettings?: DonationSettings;
     action?: string;
+    completed?: boolean;
 };
-export default function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, trialEnd, ...rest }: Props): import("react").JSX.Element;
+export default function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onQuantityChange, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, trialEnd, completed, ...rest }: Props): import("react").JSX.Element;
 export {};

package/lib/payment/summary.js

@@ -90,6 +90,7 @@ function PaymentSummary({
   billingThreshold,
   onUpsell = _noop.default,
   onDownsell = _noop.default,
+  onQuantityChange = _noop.default,
   onApplyCrossSell = _noop.default,
   onCancelCrossSell = _noop.default,
   onChangeAmount = _noop.default,
@@ -99,6 +100,7 @@ function PaymentSummary({
   donationSettings = void 0,
   action = "",
   trialEnd = 0,
+  completed = false,
   ...rest
 }) {
   const {
@@ -138,6 +140,10 @@ function PaymentSummary({
     await onUpsell(from, to);
     runAsync();
   };
+  const handleQuantityChange = async (itemId, quantity) => {
+    await onQuantityChange(itemId, quantity);
+    runAsync();
+  };
   const handleDownsell = async from => {
     await onDownsell(from);
     runAsync();
@@ -196,6 +202,9 @@ function PaymentSummary({
         currency,
         onUpsell: handleUpsell,
         onDownsell: handleDownsell,
+        adjustableQuantity: x.adjustable_quantity,
+        completed,
+        onQuantityChange: handleQuantityChange,
         children: x.cross_sell && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
           sx: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.19.0",
+  "version": "1.19.2",
   "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.19.0",
+    "@blocklet/payment-types": "1.19.2",
     "@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": "2810263174bb900ebb5a431dc53930b08b4a8d6d"
+  "gitHead": "741c897204afc412721a942201516932bff59235"
 }

package/src/components/blockchain/tx.tsx

@@ -6,24 +6,20 @@ import { styled } from '@mui/system';
 
 import { getTxLink } from '../../libs/util';
 
-export default function TxLink(rawProps: {
+export default function TxLink({
+  details,
+  method,
+  mode = 'dashboard',
+  align = 'left',
+}: {
   details: PaymentDetails;
   method: TPaymentMethod;
   mode?: 'customer' | 'dashboard';
   align?: 'left' | 'right';
 }) {
-  const props = Object.assign(
-    {
-      mode: 'dashboard',
-      align: 'left',
-    },
-    rawProps
-  );
-
   const { t } = useLocaleContext();
 
-  // eslint-disable-next-line react/prop-types
-  if (!props.details || (props.mode === 'customer' && props.method.type === 'stripe')) {
+  if (!details || (mode === 'customer' && method.type === 'stripe')) {
     return (
       <Typography
         component="small"
@@ -35,8 +31,7 @@ export default function TxLink(rawProps: {
     );
   }
 
-  // eslint-disable-next-line react/prop-types
-  const { text, link } = getTxLink(props.method, props.details);
+  const { text, link } = getTxLink(method, details);
 
   if (link && text) {
     return (
@@ -44,8 +39,7 @@ export default function TxLink(rawProps: {
         <Root
           direction="row"
           alignItems="center"
-          // eslint-disable-next-line react/prop-types
-          justifyContent={props.align === 'left' ? 'flex-start' : 'flex-end'}
+          justifyContent={align === 'left' ? 'flex-start' : 'flex-end'}
           sx={{ color: 'text.link' }}
           spacing={1}>
           <Typography component="span" sx={{ color: 'text.link' }}>

package/src/components/country-select.tsx

@@ -7,7 +7,7 @@ import type { SlideProps, SxProps } from '@mui/material';
 import type { CountryIso2 } from 'react-international-phone';
 import { useMobile } from '../hooks/mobile';
 
-function Transition({ ref, ...props }: { ref: React.RefObject<unknown> } & SlideProps) {
+function Transition({ ref, ...props }: { ref: React.RefObject<unknown | null> } & SlideProps) {
   return <Slide direction="up" ref={ref} timeout={200} {...props} />;
 }
 
@@ -27,7 +27,7 @@ export default function CountrySelect({
   sx = {},
   showDialCode = false,
 }: CountrySelectProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.RefObject<HTMLDivElement | null>;
 }) {
   const { setValue } = useFormContext();
   const [open, setOpen] = useState(false);

package/src/components/date-range-picker.tsx

@@ -0,0 +1,310 @@
+/* eslint-disable @typescript-eslint/indent */
+import { useState, useRef } from 'react';
+import {
+  TextField,
+  Stack,
+  Typography,
+  useMediaQuery,
+  useTheme,
+  Popover,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Box,
+  IconButton,
+} from '@mui/material';
+import { DateRange, Close, Clear } from '@mui/icons-material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import FormLabel from './label';
+import { formatToDate } from '../libs/util';
+
+export interface DateRangeValue {
+  start: number | undefined;
+  end: number | undefined;
+}
+
+export interface DateRangePickerProps {
+  value: DateRangeValue;
+  onChange: (value: DateRangeValue) => void;
+  label?: string;
+  size?: 'small' | 'medium';
+  fullWidth?: boolean;
+  disabled?: boolean;
+}
+
+interface DatePickerContentProps {
+  tempValue: { startDate: string; endDate: string };
+  setTempValue: (
+    value:
+      | { startDate: string; endDate: string }
+      | ((prev: { startDate: string; endDate: string }) => { startDate: string; endDate: string })
+  ) => void;
+  handleCancel: () => void;
+  handleApply: () => void;
+  handleClear: () => void;
+}
+
+// 日期选择器内容组件
+function DatePickerContent({
+  tempValue,
+  setTempValue,
+  handleCancel,
+  handleApply,
+  handleClear,
+}: DatePickerContentProps) {
+  const { t } = useLocaleContext();
+  return (
+    <Box sx={{ p: 2, minWidth: 320 }}>
+      <Stack spacing={2}>
+        <Box>
+          <FormLabel>{t('common.startDate')}</FormLabel>
+          <TextField
+            type="date"
+            value={tempValue.startDate}
+            onChange={(e) => setTempValue((prev) => ({ ...prev, startDate: e.target.value }))}
+            size="small"
+            fullWidth
+            slotProps={{
+              inputLabel: { shrink: true },
+            }}
+          />
+        </Box>
+        <Box>
+          <FormLabel>{t('common.endDate')}</FormLabel>
+          <TextField
+            type="date"
+            value={tempValue.endDate}
+            onChange={(e) => setTempValue((prev) => ({ ...prev, endDate: e.target.value }))}
+            size="small"
+            fullWidth
+            slotProps={{
+              inputLabel: { shrink: true },
+            }}
+          />
+        </Box>
+
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            justifyContent: 'space-between',
+          }}>
+          <Button variant="text" onClick={handleClear} size="small" color="secondary" sx={{ px: 0.5, minWidth: 0 }}>
+            {t('common.clear')}
+          </Button>
+          <Stack direction="row" spacing={1}>
+            <Button variant="outlined" onClick={handleCancel} size="small">
+              {t('common.cancel')}
+            </Button>
+            <Button variant="contained" onClick={handleApply} size="small">
+              {t('common.confirm')}
+            </Button>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}
+
+const DateFormat = 'YYYY-MM-DD';
+
+export default function DateRangePicker({
+  value,
+  onChange,
+  label = '',
+  size = 'small',
+  fullWidth = false,
+  disabled = false,
+}: DateRangePickerProps) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const [open, setOpen] = useState(false);
+  const { t, locale } = useLocaleContext();
+  // 内部使用字符串格式的临时值
+  const [tempValue, setTempValue] = useState<{ startDate: string; endDate: string }>({
+    startDate: value.start ? formatToDate(value.start * 1000, locale, DateFormat) : '',
+    endDate: value.end ? formatToDate(value.end * 1000, locale, DateFormat) : '',
+  });
+  const anchorRef = useRef<HTMLDivElement>(null);
+
+  const formatDisplayValue = (startUnix: number | undefined, endUnix: number | undefined) => {
+    if (!startUnix || !endUnix) return t('common.selectTimeRange');
+    const start = formatToDate(startUnix * 1000, locale, DateFormat);
+    const end = formatToDate(endUnix * 1000, locale, DateFormat);
+    return `${start} ~ ${end}`;
+  };
+
+  const handleOpen = () => {
+    if (disabled) return;
+    setTempValue({
+      startDate: value.start ? formatToDate(value.start * 1000, locale, DateFormat) : '',
+      endDate: value.end ? formatToDate(value.end * 1000, locale, DateFormat) : '',
+    });
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleApply = () => {
+    const unixValue: DateRangeValue = {
+      start: tempValue.startDate ? Math.floor(new Date(`${tempValue.startDate}T00:00:00`).getTime() / 1000) : 0,
+      end: tempValue.endDate ? Math.floor(new Date(`${tempValue.endDate}T23:59:59`).getTime() / 1000) : 0,
+    };
+    onChange(unixValue);
+    setOpen(false);
+  };
+
+  const handleCancel = () => {
+    setTempValue({
+      startDate: value.start ? formatToDate(value.start * 1000, locale, DateFormat) : '',
+      endDate: value.end ? formatToDate(value.end * 1000, locale, DateFormat) : '',
+    });
+    setOpen(false);
+  };
+
+  const handleClear = () => {
+    const emptyValue: DateRangeValue = { start: undefined, end: undefined };
+    onChange(emptyValue);
+    setTempValue({ startDate: '', endDate: '' });
+    setOpen(false);
+  };
+
+  const hasValue = !!value.start && !!value.end;
+
+  return (
+    <>
+      <TextField
+        ref={anchorRef}
+        label={label}
+        value={formatDisplayValue(value.start, value.end)}
+        size={size}
+        fullWidth={fullWidth}
+        disabled={disabled}
+        sx={{
+          '& .MuiInputBase-input': {
+            cursor: disabled ? 'default' : 'pointer',
+          },
+        }}
+        onClick={handleOpen}
+        placeholder={t('common.selectTimeRange')}
+        slotProps={{
+          input: {
+            readOnly: true,
+            startAdornment: <DateRange fontSize="small" sx={{ mr: 1, color: 'text.secondary' }} />,
+            endAdornment: hasValue && !disabled && (
+              <IconButton
+                size="small"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleClear();
+                }}
+                sx={{
+                  color: 'text.secondary',
+
+                  '&:hover': { color: 'text.primary' },
+                }}>
+                <Clear fontSize="small" />
+              </IconButton>
+            ),
+          },
+
+          inputLabel: { shrink: true },
+        }}
+      />
+      {/* 桌面端使用 Popover */}
+      {!isMobile && (
+        <Popover
+          open={open}
+          anchorEl={anchorRef.current}
+          onClose={handleClose}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'left',
+          }}
+          sx={{
+            '& .MuiPaper-root': {
+              boxShadow: theme.shadows[8],
+              border: `1px solid ${theme.palette.divider}`,
+            },
+          }}>
+          <DatePickerContent
+            tempValue={tempValue}
+            setTempValue={setTempValue}
+            handleCancel={handleCancel}
+            handleApply={handleApply}
+            handleClear={handleClear}
+          />
+        </Popover>
+      )}
+      {/* 移动端使用 Dialog */}
+      {isMobile && (
+        <Dialog
+          open={open}
+          onClose={handleClose}
+          fullWidth
+          maxWidth="sm"
+          PaperProps={{
+            sx: {
+              m: 1,
+              maxHeight: 'calc(100% - 64px)',
+            },
+          }}>
+          <DialogTitle
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              pb: 1,
+            }}>
+            <Typography variant="h6">{t('common.selectTimeRange')}</Typography>
+            <IconButton edge="end" color="inherit" onClick={handleClose} aria-label="close" size="small">
+              <Close />
+            </IconButton>
+          </DialogTitle>
+          <DialogContent sx={{ pb: 1 }}>
+            <Stack spacing={2} sx={{ mt: 1 }}>
+              <FormLabel>{t('common.startDate')}</FormLabel>
+              <TextField
+                type="date"
+                value={tempValue.startDate}
+                onChange={(e) => setTempValue((prev) => ({ ...prev, startDate: e.target.value }))}
+                size="small"
+                fullWidth
+                slotProps={{
+                  inputLabel: { shrink: true },
+                }}
+              />
+              <FormLabel>{t('common.endDate')}</FormLabel>
+              <TextField
+                type="date"
+                value={tempValue.endDate}
+                onChange={(e) => setTempValue((prev) => ({ ...prev, endDate: e.target.value }))}
+                size="small"
+                fullWidth
+                slotProps={{
+                  inputLabel: { shrink: true },
+                }}
+              />
+            </Stack>
+          </DialogContent>
+          <DialogActions sx={{ px: 3, pb: 2 }}>
+            <Button onClick={handleCancel} color="inherit">
+              {t('common.cancel')}
+            </Button>
+            <Button onClick={handleApply} variant="contained">
+              {t('common.confirm')}
+            </Button>
+          </DialogActions>
+        </Dialog>
+      )}
+    </>
+  );
+}