@pisell/private-materials 6.3.15 → 6.4.2

package/es/components/checkout/components/WalletPassModule/components/WalletPassHeader/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { WalletPassHeaderProps } from '../../types';
+import './index.less';
+declare const WalletPassHeader: React.FC<WalletPassHeaderProps>;
+export default WalletPassHeader;

package/es/components/checkout/components/WalletPassModule/components/WalletPassHeader/index.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Icon } from '@pisell/materials';
+import { locales } from '@pisell/utils';
+import classnames from 'classnames';
+import "./index.less";
+var WalletPassHeader = function WalletPassHeader(_ref) {
+  var _locales$getText, _locales$getText2, _locales$getText3;
+  var customerName = _ref.customerName,
+    selectedCount = _ref.selectedCount,
+    expiredCount = _ref.expiredCount,
+    isCardMode = _ref.isCardMode,
+    onExpiredClick = _ref.onExpiredClick,
+    onBestSaving = _ref.onBestSaving,
+    onClearAll = _ref.onClearAll,
+    onToggleDisplayMode = _ref.onToggleDisplayMode;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wallet-pass-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wallet-pass-header-left"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "wallet-pass-module-customer-container",
+    dangerouslySetInnerHTML: {
+      __html: ((_locales$getText = locales.getText('wallet-pass-module-cards-vouchers-in-wallet')) === null || _locales$getText === void 0 ? void 0 : _locales$getText("<span class=\"theme-color wallet-pass-module-customer\">".concat(customerName, "</span>"))) || ''
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: classnames('theme-color')
+  }, (_locales$getText2 = locales.getText('wallet-pass-module-applied')) === null || _locales$getText2 === void 0 ? void 0 : _locales$getText2(selectedCount)), /*#__PURE__*/React.createElement("span", {
+    className: classnames('error-color', 'pointer', 'underline'),
+    onClick: onExpiredClick
+  }, (_locales$getText3 = locales.getText('wallet-pass-module-expired')) === null || _locales$getText3 === void 0 ? void 0 : _locales$getText3(expiredCount))), /*#__PURE__*/React.createElement("div", {
+    className: "wallet-pass-header-right"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classnames('theme-color', 'pointer', 'underline'),
+    onClick: onBestSaving
+  }, locales.getText('wallet-pass-module-best-saving')), /*#__PURE__*/React.createElement("span", {
+    className: classnames('error-color', 'pointer', 'underline'),
+    onClick: onClearAll
+  }, locales.getText('wallet-pass-module-clear-all')), /*#__PURE__*/React.createElement("div", {
+    onClick: onToggleDisplayMode,
+    className: "wallet-pass-header-right-icon-container"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "pisell2-chevron-up",
+    className: classnames('wallet-pass-header-right-icon', 'theme-color', 'pointer', {
+      rotated: !isCardMode
+    })
+  }))));
+};
+export default WalletPassHeader;

package/es/components/checkout/components/WalletPassModule/components/WalletPassHeader/index.less

@@ -0,0 +1,64 @@
+.wallet-pass-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.wallet-pass-header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  .wallet-pass-module-customer-container {
+    max-width: 340px;
+    display: flex;
+    gap: 6px;
+  }
+  .wallet-pass-module-customer {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.wallet-pass-header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.theme-color {
+  color: var(--theme-color, #7f56da);
+}
+
+.error-color {
+  color: var(--Error-500, #f04438);
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.wallet-pass-header-right-icon-container {
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.wallet-pass-header-right-icon {
+  color: var(--theme-color, #7f56da);
+  font-size: 24px;
+  transition: transform 0.3s ease;
+}
+
+.wallet-pass-header-right-icon.rotated {
+  transform: rotate(180deg);
+}

package/es/components/checkout/components/WalletPassModule/components/WalletPassTextMode/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { WalletPassTextModeProps } from '../../types';
+import './index.less';
+declare const WalletPassTextMode: React.FC<WalletPassTextModeProps>;
+export default WalletPassTextMode;

package/es/components/checkout/components/WalletPassModule/components/WalletPassTextMode/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import "./index.less";
+var WalletPassTextMode = function WalletPassTextMode(_ref) {
+  var cardData = _ref.cardData,
+    selectedWalletIds = _ref.selectedWalletIds;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wallet-pass-text-mode"
+  }, cardData && cardData.length > 0 ? cardData.filter(function (card) {
+    return selectedWalletIds.includes(card.id);
+  }).map(function (card) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: card.id,
+      className: "wallet-pass-text-item selected"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "wallet-pass-text-name"
+    }, card.name), /*#__PURE__*/React.createElement("span", {
+      className: "wallet-pass-text-amount"
+    }, "-", card.redeem ? "".concat(card.redeem) : '$0'));
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: "wallet-pass-text-empty"
+  }));
+};
+export default WalletPassTextMode;

package/es/components/checkout/components/WalletPassModule/components/WalletPassTextMode/index.less

@@ -0,0 +1,31 @@
+/* 文字模式样式 */
+.wallet-pass-text-mode {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.wallet-pass-text-item {
+  color: #7f56da;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  display: inline-block;
+}
+
+.wallet-pass-text-name {
+  margin-right: 6px;
+}
+
+.wallet-pass-text-amount {
+}
+
+.wallet-pass-text-empty {
+  //display: flex;
+  //align-items: center;
+  //justify-content: center;
+  //padding: 40px 20px;
+  //color: #9ca3af;
+  //font-size: 14px;
+  //text-align: center;
+}

package/es/components/checkout/components/WalletPassModule/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { WalletPassModuleProps, WalletPassModuleRef } from './types';
+import './index.less';
+declare const WalletPassModule: React.ForwardRefExoticComponent<WalletPassModuleProps & React.RefAttributes<WalletPassModuleRef>>;
+export default WalletPassModule;

package/es/components/checkout/components/WalletPassModule/index.js

@@ -0,0 +1,185 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState, forwardRef, useImperativeHandle, useEffect, useMemo } from 'react';
+import { PisellLoading } from '@pisell/materials';
+import { locales } from '@pisell/utils';
+import { useWalletPass } from "../../hooks/useWalletPass";
+import WalletPassHeader from "./components/WalletPassHeader";
+import WalletPassCardDisplay from "./components/WalletPassCardDisplay";
+import WalletModal from "./components/WalletModal";
+import DiscountWallet from "./components/DiscountWallet";
+import { formatMachineCodeServer2CardList } from "./utils";
+import { WALLET_PASS_CODE_ARRAY } from "../../constants";
+import "./index.less";
+var WalletPassModule = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _locales$getText;
+  var orderInfo = props.orderInfo,
+    onSelectChange = props.onSelectChange,
+    customAmount = props.customAmount,
+    paymentItems = props.paymentItems;
+  var _useWalletPass = useWalletPass({
+      onSelectChange: onSelectChange,
+      customAmount: customAmount
+    }),
+    handleSelectWallet = _useWalletPass.handleSelectWallet,
+    cardData = _useWalletPass.cardData,
+    selectedWalletIds = _useWalletPass.selectedWalletIds,
+    expiredWalletIds = _useWalletPass.expiredWalletIds,
+    expiredWalletData = _useWalletPass.expiredWalletData,
+    disabledWalletData = _useWalletPass.disabledWalletData,
+    clearAllSelectedWallet = _useWalletPass.clearAllSelectedWallet,
+    clearDisabledWalletData = _useWalletPass.clearDisabledWalletData,
+    handleBestSaving = _useWalletPass.handleBestSaving,
+    loading = _useWalletPass.loading,
+    handleSearchIdentificationCode = _useWalletPass.handleSearchIdentificationCode,
+    availableDiscountList = _useWalletPass.availableDiscountList,
+    selectedDiscountList = _useWalletPass.selectedDiscountList,
+    handleSelectDiscount = _useWalletPass.handleSelectDiscount,
+    customerName = _useWalletPass.customerName,
+    handleConfirmEditAmount = _useWalletPass.handleConfirmEditAmount,
+    handleBeforeEditAmount = _useWalletPass.handleBeforeEditAmount;
+
+  // 过期卡券弹窗状态
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    expiredModalVisible = _useState2[0],
+    setExpiredModalVisible = _useState2[1];
+
+  // 不可用卡券弹窗状态
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    disabledModalVisible = _useState4[0],
+    setDisabledModalVisible = _useState4[1];
+
+  // 显示模式状态：true为卡片模式，false为文字模式
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isCardMode = _useState6[0],
+    setIsCardMode = _useState6[1];
+
+  // 处理过期卡券点击事件
+  var handleExpiredClick = function handleExpiredClick() {
+    setExpiredModalVisible(true);
+  };
+
+  // 关闭过期卡券弹窗
+  var handleExpiredModalClose = function handleExpiredModalClose() {
+    setExpiredModalVisible(false);
+  };
+
+  // 关闭不可用卡券弹窗
+  var handleDisabledModalClose = function handleDisabledModalClose() {
+    setDisabledModalVisible(false);
+    // 清空不可用钱包数据，防止重复显示
+    clearDisabledWalletData();
+  };
+
+  // 切换显示模式
+  var toggleDisplayMode = function toggleDisplayMode() {
+    setIsCardMode(!isCardMode);
+  };
+  var handleDetail = function handleDetail(record, index) {};
+
+  // 格式化不可用钱包数据
+  var formattedDisabledWalletData = React.useMemo(function () {
+    return formatMachineCodeServer2CardList(disabledWalletData || [], [], {
+      error: true,
+      showStatus: false
+    });
+  }, [disabledWalletData]);
+
+  // 监听 disabledWalletData 变化，当有不可用钱包时自动显示弹窗
+  useEffect(function () {
+    if (disabledWalletData && disabledWalletData.length > 0) {
+      // 只有在弹窗未显示时才打开，避免重复打开
+      if (!disabledModalVisible) {
+        setDisabledModalVisible(true);
+      }
+    }
+  }, [disabledWalletData, disabledModalVisible]);
+  useImperativeHandle(ref, function () {
+    return {
+      handleSearchIdentificationCode: handleSearchIdentificationCode,
+      getWalletPassData: function getWalletPassData(select) {
+        return {
+          selectedWallet: select.length ? cardData.filter(function (card) {
+            return selectedWalletIds.includes(card.id);
+          }) : [],
+          availableDiscountList: availableDiscountList,
+          selectedDiscountList: selectedDiscountList
+        };
+      }
+    };
+  });
+  var disabledTitle = useMemo(function () {
+    if (disabledWalletData && disabledWalletData.length === 1) {
+      var _disabledWalletData$;
+      return ((_disabledWalletData$ = disabledWalletData[0]) === null || _disabledWalletData$ === void 0 || (_disabledWalletData$ = _disabledWalletData$.unified_messages) === null || _disabledWalletData$ === void 0 ? void 0 : _disabledWalletData$.title) || '';
+    }
+    return locales.getText('wallet-pass-module-disabled-modal-title');
+  }, [disabledWalletData]);
+  var selectedCount = useMemo(function () {
+    return selectedWalletIds.length + selectedDiscountList.length;
+  }, [selectedWalletIds.length, selectedDiscountList.length]);
+  var discountDisabled = useMemo(function () {
+    return !!(paymentItems !== null && paymentItems !== void 0 && paymentItems.some(function (item) {
+      return !WALLET_PASS_CODE_ARRAY.includes(item.code);
+    }));
+  }, [paymentItems]);
+  if (cardData.length === 0 && availableDiscountList.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wallet-pass-module-container"
+  }, /*#__PURE__*/React.createElement(PisellLoading, {
+    delay: 300,
+    loading: loading,
+    fullscreen: false,
+    mask: {
+      backgroundColor: 'rgba(255, 255, 255, 0.5)',
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wallet-pass-module"
+  }, /*#__PURE__*/React.createElement(WalletPassHeader, {
+    customerName: customerName,
+    selectedCount: selectedCount,
+    expiredCount: expiredWalletIds.length,
+    isCardMode: isCardMode,
+    onExpiredClick: handleExpiredClick,
+    onBestSaving: handleBestSaving,
+    onClearAll: clearAllSelectedWallet,
+    onToggleDisplayMode: toggleDisplayMode
+  }), /*#__PURE__*/React.createElement(WalletPassCardDisplay, {
+    isCardMode: isCardMode,
+    cardData: cardData,
+    selectedWalletIds: selectedWalletIds,
+    onSelectWallet: handleSelectWallet,
+    onDetail: handleDetail,
+    onConfirmEditAmount: handleConfirmEditAmount,
+    onBeforeEditAmount: handleBeforeEditAmount
+  }), /*#__PURE__*/React.createElement(DiscountWallet, {
+    isCardMode: isCardMode,
+    cardData: availableDiscountList,
+    selectedWalletIds: selectedDiscountList,
+    onSelectWallet: handleSelectDiscount,
+    onDetail: handleDetail,
+    discountDisabled: discountDisabled
+  }), /*#__PURE__*/React.createElement(WalletModal, {
+    visible: expiredModalVisible,
+    walletData: expiredWalletData,
+    onClose: handleExpiredModalClose,
+    title: (_locales$getText = locales.getText('wallet-pass-module-expired-modal-title')) === null || _locales$getText === void 0 ? void 0 : _locales$getText((expiredWalletData === null || expiredWalletData === void 0 ? void 0 : expiredWalletData.length) || 0)
+  }), /*#__PURE__*/React.createElement(WalletModal, {
+    visible: disabledModalVisible,
+    walletData: formattedDisabledWalletData,
+    onClose: handleDisabledModalClose,
+    title: disabledTitle
+  }))));
+});
+export default WalletPassModule;

package/es/components/checkout/components/WalletPassModule/index.less

@@ -0,0 +1,15 @@
+.wallet-pass-module-container {
+  .pisell-loading-wrapper {
+    overflow: hidden;
+  }
+}
+.wallet-pass-module {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-radius: 8px;
+  border: 1px solid var(--00_Pisell-pp, #7f56da);
+  background: #fff;
+  --theme-color: #7f56da;
+}

package/es/components/checkout/components/WalletPassModule/types.d.ts

@@ -0,0 +1,133 @@
+import { CurrentOrderInfo } from '../../types';
+export interface PisellWalletPassCardProps {
+    id: number;
+    /** 卡片样式 */
+    type: 'default' | 'mini';
+    /** 商品名称 */
+    name: string;
+    /** 二维码 */
+    qrCode: string;
+    /** 共享店铺名称 */
+    storeName: string;
+    /** 余额 */
+    balance?: number;
+    /** 识别码编号 */
+    code: string;
+    /** 有效期 */
+    validDate: string;
+    /** 使用金额 */
+    redeem?: number;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 禁用原因 */
+    disabledReason?: string;
+    /** 是否展示禁用原因 */
+    showDisabledReason?: boolean;
+    /** 封面图 */
+    cover?: string;
+    /** 余额标题文案 */
+    balanceTitle?: string;
+    /** 使用金额标题文案 */
+    redeemTitle?: string;
+    /** 是否选中 */
+    active?: boolean;
+    /** 是否展示商品名称 */
+    showName?: boolean;
+    /** 是否展示共享店铺名称 */
+    showStoreName?: boolean;
+    /** 是否展示使用金额 */
+    showRedeem?: boolean;
+    /** 是否展示余额 */
+    showBalance?: boolean;
+    /** 是否展示识别码编号 */
+    showCode?: boolean;
+    /** 是否展示有效期 */
+    showValidDate?: boolean;
+    /** 是否展示右上角详情按钮 */
+    showDetail?: boolean;
+    /** 是否展示qrCode */
+    showQrCode?: boolean;
+    /** 是否展示封面 */
+    showCover?: boolean;
+    /** 是否展示余额货币符号 */
+    showBalanceSymbol?: boolean;
+    /** 展示操作按钮 */
+    showActions?: boolean;
+    /** 操作按钮配置 */
+    actions?: {
+        /** 按钮展示方式 */
+        layout: 'expanded' | 'collapsed';
+        /** detail 按钮配置 */
+        detail?: {
+            visible: boolean;
+            iconColor: string;
+        };
+        /** edit按钮配置 */
+        edit?: {
+            visible: boolean;
+            iconColor: string;
+            dialogTitle: string;
+            enableDialog: boolean;
+            fields: {
+                name: string;
+                label: string;
+            };
+        };
+    };
+    /** 编辑编辑按钮后，弹窗展示之前 */
+    beforeEdit?: (value: any) => Promise<any> | boolean | void;
+    /** 编辑弹窗点击提交 */
+    onConfirmEdit?: (value: any) => void;
+    [key: string]: any;
+}
+export interface WalletPassModuleProps {
+    orderInfo?: CurrentOrderInfo;
+    onSelectChange?: (select: {
+        voucher_id: number;
+        amount: number;
+    }[]) => void;
+    paymentItems?: PaymentItem[];
+    customAmount?: string;
+}
+export interface WalletPassHeaderProps {
+    customerName: string;
+    selectedCount: number;
+    expiredCount: number;
+    isCardMode: boolean;
+    onExpiredClick: () => void;
+    onBestSaving: () => void;
+    onClearAll: () => void;
+    onToggleDisplayMode: () => void;
+}
+export interface WalletPassCardDisplayProps {
+    isCardMode: boolean;
+    cardData: PisellWalletPassCardProps[];
+    selectedWalletIds: number[];
+    onSelectWallet: (selectedIds: number[]) => void;
+    onDetail: (record: any, index: number) => void;
+    onConfirmEditAmount: (value: number, index: number, data: any) => void;
+    onBeforeEditAmount: (value: any, index: number, data: any) => Promise<any> | boolean | void;
+}
+export interface WalletPassTextModeProps {
+    cardData: any[];
+    selectedWalletIds: number[];
+}
+export interface WalletModalProps {
+    visible: boolean;
+    walletData: any[];
+    onClose: () => void;
+    title?: string;
+    emptyText?: string;
+}
+export interface WalletPassModuleRef {
+    handleSearchIdentificationCode: (value: string) => void;
+    getWalletPassData: (select: {
+        voucher_id: number;
+        amount: number;
+        code?: string;
+    }[]) => {
+        selectedWallet?: any[];
+        availableDiscountList?: any[];
+        selectedDiscountList?: number[];
+    };
+}

package/es/components/checkout/components/WalletPassModule/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/checkout/components/WalletPassModule/utils.d.ts

@@ -0,0 +1,23 @@
+declare type WalletPassDataType = Record<string, any>;
+export declare const getAvailableMaxAmount: (data: WalletPassDataType) => any;
+export declare const voucherTime: (data: WalletPassDataType, key?: string) => any;
+export declare const formatMachineCodeServer2CardList: (data: WalletPassDataType[], selectId?: number[], otherProps?: Record<string, any>) => any;
+export declare const formatDiscountWalletData: (data: any, selectId?: number[]) => any;
+export interface WalletPassUsageUnit {
+    lowest_limit_amount: number;
+    lowest_limit_amount_switch: number;
+    lowest_limit_value: number;
+    lowest_limit_value_switch: number;
+    maximum_value_per_order: number;
+    maximum_value_per_order_switch: number;
+    points: number;
+    price: number;
+    step_value: number;
+    step_value_switch: number;
+}
+/**
+ * 根据WalletPassUsage配置，将传入的WalletPass面额转换为货币金额
+ */
+export declare const getPointCardAmount: (walletPassValue: number, walletPassUsageUnit: WalletPassUsageUnit) => string;
+export declare const isSameContent: (arr1: any[], arr2: any[]) => boolean;
+export {};