@pisell/private-materials 3.0.111 → 3.0.113

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

@@ -0,0 +1,72 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["className", "payGroup", "onWalletPassChange", "customer_id"];
+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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 } from '@pisell/materials';
+import classNames from 'classnames';
+import { locales } from '@pisell/utils';
+import WalletPass from "../PaymentMethods/WalletPass";
+import "./index.less";
+var WalletPassBlock = function WalletPassBlock(props) {
+  var _payGroup$walletPass4;
+  var className = props.className,
+    payGroup = props.payGroup,
+    onWalletPassChange = props.onWalletPassChange,
+    customer_id = props.customer_id,
+    others = _objectWithoutProperties(props, _excluded);
+  var walletPassRef = useRef(null);
+  var handleClick = function handleClick() {
+    var _walletPassRef$curren;
+    (_walletPassRef$curren = walletPassRef.current) === null || _walletPassRef$curren === void 0 ? 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 ? 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 ? void 0 : (_payGroup$walletPass3 = payGroup.walletPass) === null || _payGroup$walletPass3 === void 0 ? void 0 : _payGroup$walletPass3.amount,
+        className: "price"
+      }), ' ', locales.getText('tocPay.text.creditHaveBeen'));
+    }
+  }, [payGroup === null || payGroup === void 0 ? void 0 : (_payGroup$walletPass4 = payGroup.walletPass) === null || _payGroup$walletPass4 === void 0 ? void 0 : _payGroup$walletPass4.amount]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, others, {
+    className: classNames('wallet-pass-wrap', className)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "wallet-pass-title"
+  }, locales.getText('tocPay.text.howToPay')), /*#__PURE__*/React.createElement(PisellRow, {
+    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", {
+      className: "wallet-pass-card-desc"
+    }, centerContentDesc)),
+    rightContent: /*#__PURE__*/React.createElement(Iconfont, {
+      type: "pisell2-chevron-right",
+      className: "wallet-pass-card-icon"
+    }),
+    padding: 16,
+    gap: 4,
+    onClick: handleClick
+  }), ((payGroup === null || payGroup === void 0 ? void 0 : payGroup.wait_amount) || 0) == 0 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "wallet-pass-card-complete-title"
+  }, locales.getText('tocPay.text.walletPassCompleteTitle')), /*#__PURE__*/React.createElement("div", {
+    className: "wallet-pass-card-complete-no-extre-pay"
+  }, locales.getText('tocPay.text.walletPassNoExtraPay')))), /*#__PURE__*/React.createElement(WalletPass, {
+    ref: walletPassRef,
+    onWalletPassChange: onWalletPassChange,
+    walletPass: payGroup === null || payGroup === void 0 ? void 0 : payGroup.walletPass
+  }));
+};
+export default WalletPassBlock;

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

@@ -0,0 +1,65 @@
+.wallet-pass-wrap {
+  cursor: pointer;
+
+  .wallet-pass-title {
+    color: var(--Gray-900, #101828);
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 28px;
+  }
+
+  .wallet-pass-card {
+    margin-top: 20px;
+    border-radius: 12px;
+    border: 1px solid var(--Gray-200, #EAECF0);
+    background: var(--Base-White, #FFF);
+
+    .wallet-pass-card-title {
+      color: var(--Gray-700, #344054);
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px;
+    }
+
+    .wallet-pass-card-desc {
+      color: var(--Gray-600, #101828);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+
+      .price {
+        color: var(--theme-color, #7F56D9);
+      }
+    }
+
+    .wallet-pass-card-icon {
+      width: 24px;
+      height: 24px;
+      color: #667085;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+    }
+  }
+
+  .wallet-pass-card-complete-title {
+    margin-top: 20px;
+    color: var(--Gray-900, #101828);
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 28px;
+    /* 155.556% */
+  }
+
+  .wallet-pass-card-complete-no-extre-pay {
+    color: var(--Gray-700, #344054);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    /* 150% */
+  }
+}

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

@@ -0,0 +1,3 @@
+import './index.less';
+declare const _default: any;
+export default _default;