@pisell/private-materials 6.0.25 → 6.1.1

package/es/components/pay/toC/WalletPassBlock/components/WalletAvailable/index.less

@@ -0,0 +1,38 @@
+.toc-pay-wallet-available-modal {
+  .pisell-lowcode-modal-title {
+    margin-right: 44px;
+  }
+  .toc-pay-wallet-available-modal-icon {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+    font-size: 36px;
+  }
+  .toc-pay-wallet-available-modal-title {
+    color: var(--Gray-900, #101828);
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 28px; /* 175% */
+    text-align: center;
+    margin-bottom: 10px;
+  }
+
+  .toc-pay-wallet-available-modal-describe {
+    color: var(--Gray-900, #101828);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+    text-align: center;
+  }
+
+  .pisell-lowcode-modal-footer {
+    flex-direction: column-reverse;
+    button {
+      span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+      }
+    }
+  }
+}

package/es/components/pay/toC/WalletPassBlock/components/WalletBestValueFound/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { PayGroup } from '../../../model';
+import './index.less';
+interface WalletBestValueFoundProps {
+    onEdit: () => void;
+    payGroup?: PayGroup;
+    walletSetting: {
+        name: string;
+        popup_status: 0 | 1;
+    };
+    onUnused: () => void;
+}
+export declare type WalletBestValueFoundRef = {
+    open: () => void;
+};
+declare const _default: React.ForwardRefExoticComponent<WalletBestValueFoundProps & React.RefAttributes<WalletBestValueFoundRef>>;
+export default _default;

package/es/components/pay/toC/WalletPassBlock/components/WalletBestValueFound/index.js

@@ -0,0 +1,98 @@
+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, { forwardRef, useImperativeHandle, useState } from 'react';
+import { PisellModal, Icon, PisellText } from '@pisell/materials';
+import { Button } from 'antd';
+import { locales } from '@pisell/utils';
+import WalletUseList from "../WalletUseList";
+import "./index.less";
+var WalletBestValueFound = function WalletBestValueFound(props, ref) {
+  var _payGroup$walletPass, _payGroup$walletPass2;
+  var onEdit = props.onEdit,
+    walletSetting = props.walletSetting,
+    payGroup = props.payGroup,
+    onUnused = props.onUnused;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  useImperativeHandle(ref, function () {
+    return {
+      open: function open() {
+        setOpen(true);
+      }
+    };
+  });
+  var handleEdit = function handleEdit() {
+    setOpen(false);
+    onEdit();
+  };
+  return /*#__PURE__*/React.createElement(PisellModal, {
+    title: locales.getText('tocPay.text.bestValueFound'),
+    open: open,
+    footer: null,
+    headerDivider: false,
+    closable: true,
+    onCancel: function onCancel() {
+      return setOpen(false);
+    },
+    onOk: function onOk() {
+      return setOpen(false);
+    },
+    wrapClassName: "toc-pay-wallet-best-value-found-modal",
+    mobileModalHeight: "auto"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "toc-pay-wallet-best-value-found-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "toc-pay-wallet-best-value-found-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "toc-pay-wallet-best-value-found-wallet-icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "pisell2-a-wallet-021",
+    className: "toc-pay-wallet-best-value-found-icon"
+  })), /*#__PURE__*/React.createElement("h3", {
+    className: "toc-pay-wallet-best-value-found-subtitle"
+  }, locales.getText('tocPay.text.welcomeToUseWalletPass')(walletSetting.name))), /*#__PURE__*/React.createElement("div", {
+    className: "toc-pay-wallet-best-value-found-savings-card"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "toc-pay-wallet-best-value-found-savings-row"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "toc-pay-wallet-best-value-found-label"
+  }, locales.getText('tocPay.text.totalSavings')), /*#__PURE__*/React.createElement("span", {
+    className: "toc-pay-wallet-best-value-found-amount"
+  }, /*#__PURE__*/React.createElement(PisellText.Amount, {
+    value: payGroup === null || payGroup === void 0 || (_payGroup$walletPass = payGroup.walletPass) === null || _payGroup$walletPass === void 0 ? void 0 : _payGroup$walletPass.amount
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "toc-pay-wallet-best-value-found-description"
+  }, locales.getText('tocPay.text.bestCombination')(walletSetting.name))), /*#__PURE__*/React.createElement("div", {
+    className: "toc-pay-wallet-best-value-found-recommended-section"
+  }, /*#__PURE__*/React.createElement("h4", {
+    className: "toc-pay-wallet-best-value-found-section-title"
+  }, locales.getText('tocPay.text.recommended')), /*#__PURE__*/React.createElement("div", {
+    className: "toc-pay-wallet-best-value-found-option-list"
+  }, /*#__PURE__*/React.createElement(WalletUseList, {
+    walletPass: (payGroup === null || payGroup === void 0 || (_payGroup$walletPass2 = payGroup.walletPass) === null || _payGroup$walletPass2 === void 0 ? void 0 : _payGroup$walletPass2.cards) || []
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "toc-pay-wallet-best-value-found-actions"
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "toc-pay-wallet-best-value-found-edit-button",
+    onClick: handleEdit
+  }, locales.getText('tocPay.text.edit')), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    className: "toc-pay-wallet-best-value-found-confirm-button",
+    onClick: function onClick() {
+      return setOpen(false);
+    }
+  }, locales.getText('tocPay.text.confirm'))), /*#__PURE__*/React.createElement("div", {
+    className: "toc-pay-wallet-best-value-found-footer",
+    onClick: function onClick() {
+      setOpen(false);
+      onUnused();
+    }
+  }, locales.getText('tocPay.text.unusedAndContinueToPayment'))));
+};
+export default /*#__PURE__*/forwardRef(WalletBestValueFound);

package/es/components/pay/toC/WalletPassBlock/components/WalletBestValueFound/index.less

@@ -0,0 +1,133 @@
+
+.toc-pay-wallet-best-value-found-modal {
+  .pisell-lowcode-modal-body{
+    padding: 0 !important;
+  }
+}
+
+.toc-pay-wallet-best-value-found-container {
+
+}
+
+.toc-pay-wallet-best-value-found-header {
+  text-align: center;
+  margin: 0 24px 12px;
+}
+
+.toc-pay-wallet-best-value-found-wallet-icon {
+  margin: 0 auto 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.toc-pay-wallet-best-value-found-icon {
+  font-size: 32px;
+}
+
+.toc-pay-wallet-best-value-found-subtitle {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 28px; /* 175% */
+}
+
+.toc-pay-wallet-best-value-found-savings-card {
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 4px;
+  border-radius: 12px;
+  border: 1px solid var(--Gray-300, #D0D5DD);
+  margin: 0 24px 12px;
+}
+
+.toc-pay-wallet-best-value-found-savings-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  color: #009951;
+
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 28px; /* 175% */
+}
+
+.toc-pay-wallet-best-value-found-description {
+  color: #757575;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px; /* 142.857% */
+}
+
+.toc-pay-wallet-best-value-found-recommended-section {
+  margin: 0 24px 16px;
+}
+
+.toc-pay-wallet-best-value-found-section-title {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 28px; /* 175% */
+  margin-bottom: 6px;
+}
+
+.toc-pay-wallet-best-value-found-option-list {
+  .toc-pay-wallet-best-value-found-option-item {
+    color: #757575;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px; /* 166.667% */
+
+    display: flex;
+    align-items: center;
+    margin-bottom: 6px;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}
+
+.toc-pay-wallet-best-value-found-option-icon {
+  font-size: 20px;
+  margin-right: 12px;
+}
+
+.toc-pay-wallet-best-value-found-option-name {
+  flex: 1;
+}
+
+.toc-pay-wallet-best-value-found-option-amount {
+  font-weight: 500;
+}
+
+.toc-pay-wallet-best-value-found-actions {
+  display: flex;
+  gap: 16px;
+  border-top: 1px solid var(--Gray-200, #EAECF0);
+  padding: 24px 24px 6px;
+}
+
+.toc-pay-wallet-best-value-found-edit-button {
+  flex: 1;
+}
+
+.toc-pay-wallet-best-value-found-confirm-button {
+  flex: 1;
+}
+
+.toc-pay-wallet-best-value-found-footer {
+  color: #444444;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px; /* 171.429% */
+  text-align: center;
+  margin-bottom: 12px;
+  padding: 12px 0;
+}

package/es/components/pay/toC/WalletPassBlock/components/WalletUseList/index.d.ts

@@ -0,0 +1,7 @@
+import { WalletPassDataType } from '../../../PaymentMethods/WalletPass/serve';
+import './index.less';
+interface WalletUseListProps {
+    walletPass: WalletPassDataType[];
+}
+declare const WalletUseList: (props: WalletUseListProps) => JSX.Element;
+export default WalletUseList;

package/es/components/pay/toC/WalletPassBlock/components/WalletUseList/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { PisellText, Icon } from '@pisell/materials';
+import "./index.less";
+import { getAvailableMaxAmount } from "../../../utils";
+var iconMaps = {
+  // 代金券
+  product_voucher: "pisell2-daijinquan",
+  // 积分卡
+  point_card: "pisell2-jifenka",
+  // 充值卡
+  gift_card: "pisell2-chongzhika",
+  customer_wallet: "pisell2-qianbao"
+};
+var WalletUseList = function WalletUseList(props) {
+  var _props$walletPass = props.walletPass,
+    walletPass = _props$walletPass === void 0 ? [] : _props$walletPass;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "toc-pay-wallet-use-list"
+  }, walletPass.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "toc-pay-wallet-use-list-item"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "toc-pay-wallet-use-list-item-name"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: iconMaps[item.tag] || "pisell2-daijinquan",
+      className: "toc-pay-wallet-use-list-item-icon"
+    }), item.product_name), /*#__PURE__*/React.createElement("span", {
+      className: "toc-pay-wallet-use-list-item-amount"
+    }, "-", /*#__PURE__*/React.createElement(PisellText.Amount, {
+      value: getAvailableMaxAmount(item)
+    })));
+  }));
+};
+export default WalletUseList;

package/es/components/pay/toC/WalletPassBlock/components/WalletUseList/index.less

@@ -0,0 +1,23 @@
+.toc-pay-wallet-use-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  .toc-pay-wallet-use-list-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--sds-color-border-default-secondary);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
+    .toc-pay-wallet-use-list-item-icon {
+      font-size: 20px;
+      color: #667085;
+    }
+    .toc-pay-wallet-use-list-item-name {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+}

package/es/components/pay/toC/WalletPassBlock/index.d.ts

@@ -9,6 +9,13 @@ export interface WalletPassBlockProps extends React.HTMLAttributes<HTMLDivElemen
         amount: number;
     }) => void;
     customer_id?: number;
+    walletSetting: {
+        name: string;
+        popup_status: 0 | 1;
+    };
 }
-declare const WalletPassBlock: (props: WalletPassBlockProps) => JSX.Element;
-export default WalletPassBlock;
+export interface WalletPassBlockRef {
+    open: () => void;
+}
+declare const _default: React.ForwardRefExoticComponent<WalletPassBlockProps & React.RefAttributes<WalletPassBlockRef>>;
+export default _default;

package/es/components/pay/toC/WalletPassBlock/index.js

@@ -1,46 +1,91 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["className", "payGroup", "onWalletPassChange", "customer_id"];
+var _excluded = ["className", "payGroup", "onWalletPassChange", "customer_id", "walletSetting"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useMemo, useRef } from 'react';
-import { PisellRow, Iconfont, PisellText, Button } from '@pisell/materials';
+import React, { useMemo, useRef, forwardRef, useImperativeHandle, useState, useEffect } from 'react';
+import { PisellRow, Iconfont, PisellText, Button, Icon } from '@pisell/materials';
 import classNames from 'classnames';
 import { locales } from '@pisell/utils';
 import WalletPass from "../PaymentMethods/WalletPass";
+import WalletAvailable from "./components/WalletAvailable";
+import WalletBestValueFound from "./components/WalletBestValueFound";
+import WalletUseList from "./components/WalletUseList";
 import "./index.less";
-var WalletPassBlock = function WalletPassBlock(props) {
-  var _payGroup$walletPass4;
+import { CaretRightOutlined } from '@ant-design/icons';
+var WalletPassBlock = function WalletPassBlock(props, ref) {
+  var _payGroup$walletPass, _payGroup$walletPass4, _payGroup$walletPass5, _payGroup$walletPass6, _payGroup$walletPass7;
   var className = props.className,
     payGroup = props.payGroup,
     onWalletPassChange = props.onWalletPassChange,
     customer_id = props.customer_id,
+    walletSetting = props.walletSetting,
     others = _objectWithoutProperties(props, _excluded);
   var walletPassRef = useRef(null);
+  var walletAvailableRef = useRef(null);
+  var walletBestValueFoundRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isViewDetail = _useState2[0],
+    setIsViewDetail = _useState2[1];
+  var contentRef = useRef(null);
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    contentHeight = _useState4[0],
+    setContentHeight = _useState4[1];
+  useEffect(function () {
+    if (contentRef.current) {
+      var scrollHeight = contentRef.current.scrollHeight;
+      setContentHeight(isViewDetail ? scrollHeight : 0);
+    }
+  }, [isViewDetail, payGroup === null || payGroup === void 0 || (_payGroup$walletPass = payGroup.walletPass) === null || _payGroup$walletPass === void 0 ? void 0 : _payGroup$walletPass.cards]);
   var handleClick = function handleClick() {
     var _walletPassRef$curren;
+    setIsViewDetail(false);
     (_walletPassRef$curren = walletPassRef.current) === null || _walletPassRef$curren === void 0 || _walletPassRef$curren.init(_objectSpread(_objectSpread({}, payGroup), {}, {
       customer_id: customer_id
     }));
   };
-  var centerContentDesc = useMemo(function () {
-    var _payGroup$walletPass, _payGroup$walletPass2;
-    // 没有钱包金额或为0
-    if (!(payGroup !== null && payGroup !== void 0 && (_payGroup$walletPass = payGroup.walletPass) !== null && _payGroup$walletPass !== void 0 && _payGroup$walletPass.amount) || (payGroup === null || payGroup === void 0 || (_payGroup$walletPass2 = payGroup.walletPass) === null || _payGroup$walletPass2 === void 0 ? void 0 : _payGroup$walletPass2.amount) == 0) {
-      return locales.getText('tocPay.text.walletCanPay');
-    } else {
-      var _payGroup$walletPass3;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, locales.getText('tocPay.text.congrats'), ' ', /*#__PURE__*/React.createElement(PisellText.Amount, {
-        value: payGroup === null || payGroup === void 0 || (_payGroup$walletPass3 = payGroup.walletPass) === null || _payGroup$walletPass3 === void 0 ? void 0 : _payGroup$walletPass3.amount,
-        className: "price"
-      }), ' ', locales.getText('tocPay.text.creditHaveBeen'));
-    }
+
+  // 没有钱包金额或为0
+  var hasNoWalletPassAmount = useMemo(function () {
+    var _payGroup$walletPass2, _payGroup$walletPass3;
+    return !(payGroup !== null && payGroup !== void 0 && (_payGroup$walletPass2 = payGroup.walletPass) !== null && _payGroup$walletPass2 !== void 0 && _payGroup$walletPass2.amount) || (payGroup === null || payGroup === void 0 || (_payGroup$walletPass3 = payGroup.walletPass) === null || _payGroup$walletPass3 === void 0 ? void 0 : _payGroup$walletPass3.amount) == 0;
   }, [payGroup === null || payGroup === void 0 || (_payGroup$walletPass4 = payGroup.walletPass) === null || _payGroup$walletPass4 === void 0 ? void 0 : _payGroup$walletPass4.amount]);
+  useImperativeHandle(ref, function () {
+    return {
+      open: function open() {
+        if (hasNoWalletPassAmount) {
+          var _walletAvailableRef$c;
+          (_walletAvailableRef$c = walletAvailableRef.current) === null || _walletAvailableRef$c === void 0 || _walletAvailableRef$c.open();
+        } else {
+          var _walletBestValueFound;
+          (_walletBestValueFound = walletBestValueFoundRef.current) === null || _walletBestValueFound === void 0 || _walletBestValueFound.open();
+        }
+      }
+    };
+  });
+  var handleViewDetail = function handleViewDetail(e) {
+    e.stopPropagation();
+    setIsViewDetail(!isViewDetail);
+  };
+  var handleUnused = function handleUnused() {
+    onWalletPassChange === null || onWalletPassChange === void 0 || onWalletPassChange({
+      cards: [],
+      amount: 0
+    });
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, others, {
     className: classNames('wallet-pass-wrap', className)
   }), /*#__PURE__*/React.createElement("div", {
@@ -49,16 +94,57 @@ var WalletPassBlock = function WalletPassBlock(props) {
     className: "wallet-pass-card",
     centerContent: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       className: "wallet-pass-card-title"
-    }, locales.getText('tocPay.text.walletPass')), /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "wallet-pass-card-title-left"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "pisell2-a-wallet-021",
+      className: "wallet-pass-card-title-left-icon"
+    }), walletSetting.name), walletSetting.popup_status === 1 && /*#__PURE__*/React.createElement("div", {
+      className: "wallet-pass-card-title-right"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "wallet-pass-card-title-right-amount"
+    }, "-", /*#__PURE__*/React.createElement(PisellText.Amount, {
+      value: payGroup === null || payGroup === void 0 || (_payGroup$walletPass5 = payGroup.walletPass) === null || _payGroup$walletPass5 === void 0 ? void 0 : _payGroup$walletPass5.amount
+    })), /*#__PURE__*/React.createElement(CaretRightOutlined, {
+      className: "wallet-pass-card-title-right-icon"
+    }))), walletSetting.popup_status === 0 && /*#__PURE__*/React.createElement("div", {
+      className: "wallet-pass-card-desc-wrap"
+    }, /*#__PURE__*/React.createElement("div", {
       className: "wallet-pass-card-desc"
-    }, centerContentDesc), /*#__PURE__*/React.createElement(Button, {
+    }, hasNoWalletPassAmount ? locales.getText('tocPay.text.hasNoWalletPassAmount') : locales.getText('tocPay.text.bestValueFound')), !hasNoWalletPassAmount && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "wallet-pass-card-total-savings"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "wallet-pass-card-total-savings-title"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "wallet-pass-card-total-savings-title-left"
+    }, locales.getText('tocPay.text.totalSavings'), ":", /*#__PURE__*/React.createElement(PisellText.Amount, {
+      value: payGroup === null || payGroup === void 0 || (_payGroup$walletPass6 = payGroup.walletPass) === null || _payGroup$walletPass6 === void 0 ? void 0 : _payGroup$walletPass6.amount
+    })), /*#__PURE__*/React.createElement("span", {
+      className: "wallet-pass-card-total-savings-title-right",
+      onClick: handleViewDetail
+    }, locales.getText('tocPay.text.viewDetail'), /*#__PURE__*/React.createElement(Icon, {
+      type: "pisell2-chevron-down",
+      className: classNames('wallet-pass-card-total-savings-title-right-icon', {
+        'is-rotate': isViewDetail
+      })
+    }))), /*#__PURE__*/React.createElement("div", {
+      ref: contentRef,
+      className: "wallet-pass-card-total-savings-desc",
+      style: {
+        height: contentHeight
+      }
+    }, /*#__PURE__*/React.createElement(WalletUseList, {
+      walletPass: (payGroup === null || payGroup === void 0 || (_payGroup$walletPass7 = payGroup.walletPass) === null || _payGroup$walletPass7 === void 0 ? void 0 : _payGroup$walletPass7.cards) || []
+    })))), /*#__PURE__*/React.createElement(Button, {
       size: "large",
       className: "wallet-pass-card-to-use",
+      type: "primary",
+      block: true,
       rightIcon: /*#__PURE__*/React.createElement(Iconfont, {
         type: "pisell2-arrow-right",
         className: "wallet-pass-card-icon"
       })
-    }, locales.getText('tocPay.text.toUse')))
+    }, locales.getText(hasNoWalletPassAmount ? 'tocPay.text.useWalletPass' : 'tocPay.text.editWalletPass')(walletSetting.name))))
     // rightContent={
     //   <Iconfont
     //     type="pisell2-chevron-right"
@@ -75,8 +161,20 @@ var WalletPassBlock = function WalletPassBlock(props) {
     className: "wallet-pass-card-complete-no-extre-pay"
   }, locales.getText('tocPay.text.walletPassNoExtraPay')))), /*#__PURE__*/React.createElement(WalletPass, {
     ref: walletPassRef,
+    walletSetting: walletSetting,
     onWalletPassChange: onWalletPassChange,
     walletPass: payGroup === null || payGroup === void 0 ? void 0 : payGroup.walletPass
+  }), /*#__PURE__*/React.createElement(WalletAvailable, {
+    ref: walletAvailableRef,
+    walletSetting: walletSetting,
+    payGroup: payGroup,
+    onOk: handleClick
+  }), /*#__PURE__*/React.createElement(WalletBestValueFound, {
+    ref: walletBestValueFoundRef,
+    walletSetting: walletSetting,
+    payGroup: payGroup,
+    onEdit: handleClick,
+    onUnused: handleUnused
   }));
 };
-export default WalletPassBlock;
+export default /*#__PURE__*/forwardRef(WalletPassBlock);