@pisell/private-materials 3.3.26 → 3.3.27

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);

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

@@ -4,11 +4,12 @@
     margin-top: 8px;
     .wallet-pass-card-icon {
       font-size: 20px;
-      color: #344054;
+      color: #fff;
     }
     & > span {
       display: flex;
       align-items: center;
+      justify-content: center;
     }
   }
 
@@ -23,27 +24,45 @@
   .wallet-pass-card {
     margin-top: 20px;
     border-radius: 12px;
-    border: 1px solid var(--Gray-400, #98A2B3);
-    background: var(--Base-White, #FFF);
+    border: 1px solid var(--Gray-400, #98a2b3);
+    background: var(--Base-White, #fff);
+    .pisell-row-center {
+      width: 100%;
+    }
 
     .wallet-pass-card-title {
+      display: flex;
+      justify-content: space-between;
       color: var(--Gray-900, #101828);
       font-size: 16px;
-      font-style: normal;
       font-weight: 600;
       line-height: 20px;
+      gap: 6px;
+      .wallet-pass-card-title-left {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        .wallet-pass-card-title-left-icon {
+          font-size: 22px;
+        }
+      }
+      .wallet-pass-card-title-right {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        flex-shrink: 0;
+        .wallet-pass-card-title-right-icon {
+          font-size: 14px;
+        }
+      }
     }
 
     .wallet-pass-card-desc {
-      color: var(--Gray-600, #101828);
+      color: #757575;
       font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 20px;
-
-      .price {
-        color: var(--theme-color, #7F56D9);
-      }
+      font-weight: 500;
+      line-height: 20px; /* 142.857% */
+      margin: 4px 0 0;
     }
 
     //.wallet-pass-card-icon {
@@ -73,4 +92,54 @@
     line-height: 24px;
     /* 150% */
   }
-}
+
+  .wallet-pass-card-desc-wrap {
+    .wallet-pass-card-total-savings {
+      .wallet-pass-card-total-savings-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .wallet-pass-card-total-savings-title-left {
+          color: #009951;
+          font-size: 16px;
+          font-weight: 600;
+          line-height: 28px; /* 175% */
+        }
+        .wallet-pass-card-total-savings-title-right {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          color: #757575;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 20px; /* 166.667% */
+          padding: 7px 0 7px 0px;
+          .wallet-pass-card-total-savings-title-right-icon {
+            font-size: 18px;
+            color: #344054;
+            transition: transform 0.3s ease;
+            
+            &.is-rotate {
+              transform: rotate(180deg);
+            }
+          }
+        }
+      }
+
+      .wallet-pass-card-total-savings-desc {
+        overflow: hidden;
+        opacity: 0;
+        transition: all 0.3s ease-in-out;
+        will-change: height, opacity;
+
+        &[style*="height: 0"] {
+          opacity: 0;
+        }
+
+        &:not([style*="height: 0"]) {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}