@fonixtree/magic-design 2.0.40 → 2.0.42

package/lib/composite-comp/bol/components/Wallet/mobile/index.js

@@ -0,0 +1,637 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactSlick = _interopRequireDefault(require("react-slick"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _components = require("../../../../../meta-comp/components");
+
+var _mobx = require("../../../../../mobx");
+
+var _coreUtil = require("../../../../../utils/coreUtil");
+
+var _commonUtil = require("../../../../../utils/commonUtil");
+
+var _Iconfont = _interopRequireDefault(require("../../../../../common/Iconfont"));
+
+var _constants = require("../../../../../constants");
+
+var _currencyUtil = require("../../../../../utils/currencyUtil");
+
+var _ConfigPanel = require("../../../../../core/Designer/ConfigPanel");
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
+var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
+  var _ = {
+    label: 0,
+    sent: function sent() {
+      if (t[0] & 1) throw t[1];
+      return t[1];
+    },
+    trys: [],
+    ops: []
+  },
+      f,
+      y,
+      t,
+      g;
+  return g = {
+    next: verb(0),
+    "throw": verb(1),
+    "return": verb(2)
+  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+    return this;
+  }), g;
+
+  function verb(n) {
+    return function (v) {
+      return step([n, v]);
+    };
+  }
+
+  function step(op) {
+    if (f) throw new TypeError("Generator is already executing.");
+
+    while (_) {
+      try {
+        if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+        if (y = 0, t) op = [op[0] & 2, t.value];
+
+        switch (op[0]) {
+          case 0:
+          case 1:
+            t = op;
+            break;
+
+          case 4:
+            _.label++;
+            return {
+              value: op[1],
+              done: false
+            };
+
+          case 5:
+            _.label++;
+            y = op[1];
+            op = [0];
+            continue;
+
+          case 7:
+            op = _.ops.pop();
+
+            _.trys.pop();
+
+            continue;
+
+          default:
+            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+              _ = 0;
+              continue;
+            }
+
+            if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+              _.label = op[1];
+              break;
+            }
+
+            if (op[0] === 6 && _.label < t[1]) {
+              _.label = t[1];
+              t = op;
+              break;
+            }
+
+            if (t && _.label < t[2]) {
+              _.label = t[2];
+
+              _.ops.push(op);
+
+              break;
+            }
+
+            if (t[2]) _.ops.pop();
+
+            _.trys.pop();
+
+            continue;
+        }
+
+        op = body.call(thisArg, _);
+      } catch (e) {
+        op = [6, e];
+        y = 0;
+      } finally {
+        f = t = 0;
+      }
+    }
+
+    if (op[0] & 5) throw op[1];
+    return {
+      value: op[0] ? op[1] : void 0,
+      done: true
+    };
+  }
+};
+
+var MOBILE_IMG_SIZE = {
+  2: {
+    maxW: 165,
+    maxH: 92,
+    gap: 12
+  },
+  3: {
+    maxW: 106,
+    maxH: 68,
+    gap: 12
+  }
+};
+
+var WalletMobile =
+/** @class */
+function (_super) {
+  __extends(WalletMobile, _super);
+
+  function WalletMobile() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      sliderIndex: 0,
+      userWalletData: {}
+    };
+    _this.sliderRef = null;
+    _this.destroy = null;
+
+    _this.getMyWalletData = function () {
+      return __awaiter(_this, void 0, void 0, function () {
+        var data, _a, userCreditResps, userCashbackValues, userBalance, userPoint, defaultShowWallet, defaultShowIndex_1, bnplObj, creditObj, B2BObj;
+
+        var _b;
+
+        return __generator(this, function (_c) {
+          switch (_c.label) {
+            case 0:
+              data = this.props.data;
+              return [4
+              /*yield*/
+              , (0, _commonUtil.commonFetch)('/designer/v1/h5/mywallet/list', {}, 'GET')];
+
+            case 1:
+              _a = _c.sent(), userCreditResps = _a.userCreditResps, userCashbackValues = _a.userCashbackValues, userBalance = _a.userBalance, userPoint = _a.userPoint, defaultShowWallet = _a.defaultShowWallet; // const { userCreditResps, userCashbackValues, userBalance, userPoint, defaultShowWallet } = {
+              //   userCreditResps: [
+              //     {
+              //       userCreditId: 1023,
+              //       creditId: 1,
+              //       partyType: null,
+              //       state: 'Pass',
+              //       isUrlExpired: false,
+              //       creditLimit: 150000,
+              //       usageAmount: 100000,
+              //       availableAmount: 1000,
+              //       comments: null,
+              //       userNearestBillDto: null,
+              //     },
+              //     {
+              //       userCreditId: 1026,
+              //       creditId: 2,
+              //       partyType: null,
+              //       state: 'Locked',
+              //       isUrlExpired: false,
+              //       creditLimit: 100000,
+              //       usageAmount: 100000,
+              //       availableAmount: 2000,
+              //       comments: null,
+              //       userNearestBillDto: null,
+              //     },
+              //     {
+              //       userCreditId: 1027,
+              //       creditId: 3,
+              //       partyType: 'I',
+              //       state: 'Pass',
+              //       isUrlExpired: false,
+              //       creditLimit: 100000000,
+              //       usageAmount: 0,
+              //       availableAmount: 3000,
+              //       comments: 'ty',
+              //       userNearestBillDto: null,
+              //     },
+              //   ],
+              //   userCashbackValues: 4000,
+              //   userBalance: 5000,
+              //   userPoint: 6000,
+              //   defaultShowWallet: 'Balance',
+              // };
+
+              if (data.customize.layout === 'layout2' && this.sliderRef) {
+                defaultShowIndex_1 = 0;
+                data.groupSource.forEach(function (f, i) {
+                  if (f.sourceType === defaultShowWallet) defaultShowIndex_1 = i;
+                });
+                this.sliderRef.slickGoTo(defaultShowIndex_1);
+              }
+
+              bnplObj = userCreditResps === null || userCreditResps === void 0 ? void 0 : userCreditResps.find(function (item) {
+                return item.creditId === 1 && [_constants.CREDIT_STATE.APPROVED.KEY, _constants.CREDIT_STATE.LOCKED.KEY].includes(item.state);
+              });
+              creditObj = userCreditResps === null || userCreditResps === void 0 ? void 0 : userCreditResps.find(function (item) {
+                return item.creditId === 2 && [_constants.CREDIT_STATE.APPROVED.KEY, _constants.CREDIT_STATE.LOCKED.KEY].includes(item.state);
+              });
+              B2BObj = userCreditResps === null || userCreditResps === void 0 ? void 0 : userCreditResps.find(function (item) {
+                return item.creditId === 3 && [_constants.CREDIT_STATE.APPROVED.KEY, _constants.CREDIT_STATE.LOCKED.KEY].includes(item.state);
+              });
+              this.setState({
+                userWalletData: (_b = {}, _b[_constants.walletType.BNPL] = {
+                  amount: userCreditResps === null ? '****' : bnplObj ? (0, _currencyUtil.formatCurrencyWithSymbol)(bnplObj.availableAmount) : 'APPLY'
+                }, _b[_constants.walletType.CREDIT] = {
+                  amount: userCreditResps === null ? '****' : creditObj ? (0, _currencyUtil.formatCurrencyWithSymbol)(creditObj.availableAmount) : 'APPLY'
+                }, _b[_constants.walletType.B2B] = {
+                  amount: userCreditResps === null ? '****' : B2BObj ? (0, _currencyUtil.formatCurrencyWithSymbol)(B2BObj.availableAmount) : 'APPLY',
+                  text: B2BObj ? 'Add ore products to your shop！' : '',
+                  btnText: 'Procure Product'
+                }, _b[_constants.walletType.CASHBACK] = {
+                  amount: userCashbackValues === null ? '****' : (0, _currencyUtil.formatCurrencyWithSymbol)(userCashbackValues)
+                }, _b[_constants.walletType.BALANCE] = {
+                  amount: userBalance === null ? '****' : (0, _currencyUtil.formatCurrencyWithSymbol)(userBalance),
+                  btnText: 'Social Commerce'
+                }, _b[_constants.walletType.CENDUIT] = {
+                  amount: userBalance === null ? '****' : (0, _currencyUtil.formatCurrencyWithSymbol)(userPoint),
+                  btnText: 'Cenduit Mall'
+                }, _b)
+              });
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    };
+
+    _this.mouseEnterBtn = function (e) {
+      var _a, _b;
+
+      var data = _this.props.data;
+
+      if ((_a = data.setting.navigation) === null || _a === void 0 ? void 0 : _a.hoverColor) {
+        e.target.style.color = data.setting.navigation.hoverColor;
+      }
+
+      if ((_b = data.setting.navigation) === null || _b === void 0 ? void 0 : _b.hoverSize) {
+        e.target.style.fontSize = data.setting.navigation.hoverSize;
+      }
+    };
+
+    _this.mouseLeaveBtn = function (e) {
+      var _a, _b;
+
+      var data = _this.props.data;
+
+      if ((_a = data.setting.navigation) === null || _a === void 0 ? void 0 : _a.color) {
+        e.target.style.color = data.setting.navigation.color;
+      }
+
+      if ((_b = data.setting.navigation) === null || _b === void 0 ? void 0 : _b.size) {
+        e.target.style.fontSize = data.setting.navigation.size;
+      }
+    };
+
+    _this.sliderGoTo = function (groupSource) {
+      var nextIndex = groupSource.findIndex(function (item) {
+        return item.id === _mobx.store.clickedGroup;
+      });
+
+      if (nextIndex != -1 && nextIndex != _this.state.sliderIndex) {
+        _this.sliderRef.slickGoTo(nextIndex);
+      }
+    };
+
+    return _this;
+  }
+
+  WalletMobile.prototype.componentDidMount = function () {
+    var _this = this;
+
+    this.getMyWalletData();
+    this.destroy = (0, _mobx.autorun)(function () {
+      if (_this.props.data.customize.layout === 'layout2' && _this.sliderRef) {
+        _this.sliderGoTo(_this.props.data.groupSource);
+        /** 设计器模式下 如果选中特定group 自动播放关闭 */
+
+
+        if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
+          _this.sliderRef.slickPause();
+        }
+      }
+    });
+  };
+
+  WalletMobile.prototype.componentWillReceiveProps = function (nextProps) {
+    if (nextProps.data.customize.layout === 'layout2' && this.sliderRef) {
+      this.sliderGoTo(nextProps.data.groupSource);
+
+      if (nextProps.data.setting.autoplay.open) {
+        this.sliderRef.slickPlay();
+      } else {
+        this.sliderRef.slickPause();
+      }
+    }
+  };
+
+  WalletMobile.prototype.render = function () {
+    var _this = this;
+
+    var data = this.props.data;
+    var sliderIndex = this.state.sliderIndex;
+    var colNum = data.customize.rowNum;
+    var autoplay = data.setting.autoplay.open;
+    /** 设计器模式下 如果选中特定group 自动播放关闭 */
+
+    if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
+      autoplay = false;
+    }
+
+    var settings = {
+      className: 'slider-wrap',
+      arrows: false,
+      dots: false,
+      autoplay: autoplay,
+      autoplaySpeed: data.setting.autoplay.interval * 1000,
+      speed: 500,
+      draggable: window.magicDesign.mode === 'renderer',
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      beforeChange: function beforeChange(oldIndex, newIndex) {
+        _this.setState({
+          sliderIndex: newIndex
+        });
+      }
+    };
+    var navStyle = {
+      fontSize: (0, _commonUtil.convertToRem)(data.setting.navigation.size),
+      color: data.setting.navigation.color
+    };
+
+    var getItemContent = function getItemContent(item, preItem, nextItem) {
+      var _a, _b, _c, _d, _e, _f, _g;
+
+      var data = _this.props.data;
+      var userWalletData = _this.state.userWalletData;
+      var GAData = (0, _commonUtil.getGAData)(data);
+      var _bgStyle = {};
+
+      if (item.background) {
+        if (item.background.bgType === 'color') {
+          _bgStyle.backgroundColor = item.background.color;
+          _bgStyle.opacity = item.background.opacity ? item.background.opacity : 1;
+        } else {
+          _bgStyle.backgroundImage = "url(" + item.background.image + ")";
+          _bgStyle.backgroundPosition = 'center';
+          _bgStyle.backgroundSize = 'cover';
+        }
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "text-content",
+        style: _bgStyle
+      }, item.title.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        className: "title",
+        data: item.title,
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        })
+      }), item.amount.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        className: "amount",
+        data: __assign(__assign({}, item.amount), {
+          text: (_a = userWalletData[item.sourceType]) === null || _a === void 0 ? void 0 : _a.amount
+        }),
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        }),
+        readonly: true
+      }), item.text.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        className: "text",
+        data: __assign(__assign({}, item.text), {
+          text: ((_b = userWalletData[item.sourceType]) === null || _b === void 0 ? void 0 : _b.text) || 'Make money and shop on Cendol!'
+        }),
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        }),
+        readonly: true
+      }), item.button.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+        className: "wallet-btn",
+        data: __assign(__assign({}, item.button), {
+          text: ((_c = userWalletData[item.sourceType]) === null || _c === void 0 ? void 0 : _c.btnText) || 'Lets Go!'
+        }),
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        })
+      }), data.customize.layout === 'layout2' && item.peek.open && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "peek left"
+      }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        data: __assign(__assign({}, item.peek), {
+          text: "" + (((_d = preItem === null || preItem === void 0 ? void 0 : preItem.title) === null || _d === void 0 ? void 0 : _d.text) || '')
+        }),
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        }),
+        readonly: true
+      }), /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        data: __assign(__assign({}, item.peek), {
+          text: "" + (((_e = userWalletData[preItem === null || preItem === void 0 ? void 0 : preItem.sourceType]) === null || _e === void 0 ? void 0 : _e.amount) || '')
+        }),
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        }),
+        readonly: true
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "peek right"
+      }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        data: __assign(__assign({}, item.peek), {
+          text: "" + (((_f = nextItem === null || nextItem === void 0 ? void 0 : nextItem.title) === null || _f === void 0 ? void 0 : _f.text) || '')
+        }),
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        }),
+        readonly: true
+      }), /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        data: __assign(__assign({}, item.peek), {
+          text: "" + (((_g = userWalletData[nextItem === null || nextItem === void 0 ? void 0 : nextItem.sourceType]) === null || _g === void 0 ? void 0 : _g.amount) || '')
+        }),
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        }),
+        readonly: true
+      }))));
+    };
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "m-Wallet-mobile"
+    }, data.title.headline.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      className: "headline",
+      data: data.title.headline
+    }), data.customize.layout === 'layout1' ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "column-layout column_" + colNum,
+      style: (0, _commonUtil.pxToRem)({
+        gap: MOBILE_IMG_SIZE[colNum].gap
+      })
+    }, data.groupSource.map(function (item, index) {
+      var preItem = index === 0 ? {} : data.groupSource[index - 1];
+      var nextItem = index === data.groupSource.length ? {} : data.groupSource[index + 1];
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: item.id,
+        className: "item-wrap",
+        style: (0, _commonUtil.pxToRem)({
+          width: "calc((100% - " + (0, _commonUtil.convertToRem)(MOBILE_IMG_SIZE[colNum].gap * (colNum - 1)) + ") / " + colNum + ")"
+        })
+      }, getItemContent(item, preItem, nextItem));
+    })) : /*#__PURE__*/_react["default"].createElement("div", {
+      className: "carousel-layout"
+    }, data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      className: "carousel-icon-left",
+      onClick: function onClick() {
+        return _this.sliderRef.slickPrev();
+      },
+      onMouseEnter: this.mouseEnterBtn,
+      onMouseLeave: this.mouseLeaveBtn,
+      style: navStyle,
+      type: "icon-left"
+    }), /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
+      ref: function ref(slider) {
+        return _this.sliderRef = slider;
+      }
+    }, settings), data.groupSource.map(function (item, index) {
+      var preItem = index === 0 ? {} : data.groupSource[index - 1];
+      var nextItem = index === data.groupSource.length ? {} : data.groupSource[index + 1];
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: item.id,
+        className: "item-wrap"
+      }, getItemContent(item, preItem, nextItem));
+    })), data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      className: "carousel-icon-right",
+      onClick: function onClick() {
+        return _this.sliderRef.slickNext();
+      },
+      onMouseEnter: this.mouseEnterBtn,
+      onMouseLeave: this.mouseLeaveBtn,
+      style: navStyle,
+      type: "icon-right"
+    }), data.setting.dots.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "swiper-ban"
+    }, data.groupSource.map(function (item, i) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: i,
+        className: (0, _classnames["default"])('ban', {
+          active: i == sliderIndex
+        }),
+        onClick: function onClick() {
+          return _this.sliderRef.slickGoTo(i);
+        },
+        style: (0, _commonUtil.pxToRem)({
+          backgroundColor: i == sliderIndex ? data.setting.dots.hoverColor : data.setting.dots.color,
+          fontSize: i == sliderIndex ? data.setting.dots.hoverSize : data.setting.dots.size
+        })
+      });
+    }))));
+  };
+
+  WalletMobile.defaultProps = {
+    data: {
+      groupSource: []
+    }
+  };
+  return WalletMobile;
+}(_react["default"].Component);
+
+var _default = WalletMobile;
+exports["default"] = _default;