@fonixtree/magic-design 0.2.3 → 0.2.6

package/es/composite-comp/ashita/components/WalletAshita/mobile/index.js

@@ -0,0 +1,613 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _locale = require("../../../../../locale");
+
+var _components = require("../../../../../meta-comp/components");
+
+var _mobx = require("../../../../../mobx");
+
+var _coreUtil = require("../../../../../utils/coreUtil");
+
+var _commonUtil = require("../../../../../utils/commonUtil");
+
+var _common = require("../../../../../common");
+
+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 }; }
+
+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.carouselRef = /*#__PURE__*/_react["default"].createRef();
+    _this.state = {
+      sliderIndex: 0,
+      userWalletData: {}
+    };
+    _this.destroy = null;
+
+    _this.getMyWalletData = function () {
+      return __awaiter(_this, void 0, void 0, function () {
+        var data, _a, userCreditResps, userCashbackValues, userBalance, userPoint, defaultShowWallet, bnplObj, creditObj, B2BObj;
+
+        var _b;
+
+        var _this = this;
+
+        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;
+              bnplObj = userCreditResps === null || userCreditResps === void 0 ? void 0 : userCreditResps.find(function (item) {
+                return item.creditId === 1;
+              });
+              creditObj = userCreditResps === null || userCreditResps === void 0 ? void 0 : userCreditResps.find(function (item) {
+                return item.creditId === 2;
+              });
+              B2BObj = userCreditResps === null || userCreditResps === void 0 ? void 0 : userCreditResps.find(function (item) {
+                return item.creditId === 3;
+              });
+              this.setState({
+                userWalletData: (_b = {}, _b[_constants.walletType.BNPL] = {
+                  amount: userCreditResps === null ? '****' : bnplObj ? (0, _currencyUtil.formatCurrencyWithSymbol)(bnplObj.availableAmount) : (0, _locale.i18n)('APPLY'),
+                  show: userCreditResps === null || [_constants.CREDIT_STATE.APPROVED.KEY].includes(bnplObj === null || bnplObj === void 0 ? void 0 : bnplObj.state)
+                }, _b[_constants.walletType.CREDIT] = {
+                  amount: userCreditResps === null ? '****' : creditObj ? (0, _currencyUtil.formatCurrencyWithSymbol)(creditObj.availableAmount) : (0, _locale.i18n)('APPLY'),
+                  show: userCreditResps === null || [_constants.CREDIT_STATE.APPROVED.KEY].includes(creditObj === null || creditObj === void 0 ? void 0 : creditObj.state)
+                }, _b[_constants.walletType.B2B] = {
+                  amount: userCreditResps === null ? '****' : B2BObj ? (0, _currencyUtil.formatCurrencyWithSymbol)(B2BObj.availableAmount) : (0, _locale.i18n)('APPLY'),
+                  text: B2BObj ? (0, _locale.i18n)('ADD_MORE_PRODUCTS_TO_YOUR_SHOP') : '',
+                  btnText: B2BObj ? (0, _locale.i18n)('PROCURE_PRODUCT') : '',
+                  show: userCreditResps === null || [_constants.CREDIT_STATE.APPROVED.KEY].includes(B2BObj === null || B2BObj === void 0 ? void 0 : B2BObj.state)
+                }, _b[_constants.walletType.CASHBACK] = {
+                  amount: userCashbackValues === null ? '****' : (0, _currencyUtil.formatCurrencyWithSymbol)(userCashbackValues),
+                  show: true
+                }, _b[_constants.walletType.BALANCE] = {
+                  amount: userBalance === null ? '****' : (0, _currencyUtil.formatCurrencyWithSymbol)(userBalance),
+                  btnText: userBalance ? (0, _locale.i18n)('SOCIAL_COMMERCE') : '',
+                  show: true
+                }, _b[_constants.walletType.CENDUIT] = {
+                  amount: userPoint === null ? '****' : userPoint,
+                  btnText: userPoint ? (0, _locale.i18n)('CENDUIT_MALL') : '',
+                  show: true
+                }, _b)
+              }, function () {
+                var _a;
+
+                if (data.customize.layout === 'layout2' && _this.carouselRef) {
+                  var userWalletData_1 = _this.state.userWalletData;
+
+                  var _groupSource = data.groupSource.filter(function (f) {
+                    var _a;
+
+                    return (_a = userWalletData_1[f.sourceType]) === null || _a === void 0 ? void 0 : _a.show;
+                  });
+
+                  var defaultShowIndex_1 = 0;
+
+                  _groupSource.forEach(function (f, i) {
+                    if (f.sourceType === defaultShowWallet) defaultShowIndex_1 = i;
+                  });
+
+                  (_a = _this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.slideTo(defaultShowIndex_1);
+                }
+              });
+              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.carouselRef.current.slideTo(nextIndex);
+      }
+    };
+
+    return _this;
+  }
+
+  WalletMobile.prototype.componentDidMount = function () {
+    var _this = this;
+
+    this.getMyWalletData();
+    this.destroy = (0, _mobx.autorun)(function () {
+      var _a;
+
+      if (_this.props.data.customize.layout === 'layout2' && _this.carouselRef) {
+        _this.sliderGoTo(_this.props.data.groupSource);
+        /** 设计器模式下 如果选中特定group 自动播放关闭 */
+
+
+        if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
+          (_a = _this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.stopPlay();
+        }
+      }
+    });
+  };
+
+  WalletMobile.prototype.componentWillReceiveProps = function (nextProps) {
+    var _a, _b;
+
+    if (nextProps.data.customize.layout === 'layout2' && this.carouselRef) {
+      this.sliderGoTo(nextProps.data.groupSource);
+
+      if (nextProps.data.setting.autoplay.open) {
+        (_a = this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.startPlay();
+      } else {
+        (_b = this.carouselRef.current) === null || _b === void 0 ? void 0 : _b.stopPlay();
+      }
+    }
+  };
+
+  WalletMobile.prototype.render = function () {
+    var _this = this;
+
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+
+    var data = this.props.data;
+    var _j = this.state,
+        sliderIndex = _j.sliderIndex,
+        userWalletData = _j.userWalletData;
+    var colNum = data.customize.rowNum;
+    var autoplay = (_b = (_a = data.setting) === null || _a === void 0 ? void 0 : _a.autoplay) === null || _b === void 0 ? void 0 : _b.open;
+
+    var _groupSource = data.groupSource.filter(function (f) {
+      var _a;
+
+      return (_a = userWalletData[f.sourceType]) === null || _a === void 0 ? void 0 : _a.show;
+    });
+    /** 设计器模式下 如果选中特定group 自动播放关闭 */
+
+
+    if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
+      autoplay = false;
+    }
+
+    var navStyle = {
+      fontSize: (0, _commonUtil.convertToRem)((_d = (_c = data.setting) === null || _c === void 0 ? void 0 : _c.navigation) === null || _d === void 0 ? void 0 : _d.size),
+      color: (_f = (_e = data.setting) === null || _e === void 0 ? void 0 : _e.navigation) === null || _f === void 0 ? void 0 : _f.color
+    };
+
+    var getItemContent = function getItemContent(item, preItem, nextItem) {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+
+      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';
+        }
+      }
+
+      item.text.text = ((_a = userWalletData[item.sourceType]) === null || _a === void 0 ? void 0 : _a.text) || (0, _locale.i18n)('MAKE_MONEY_AND_SHOP_ON_CENDOL');
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "text-content",
+        style: _bgStyle
+      }, ((_b = item.title) === null || _b === void 0 ? void 0 : _b.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)
+        })
+      }), ((_c = item.amount) === null || _c === void 0 ? void 0 : _c.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        className: "amount",
+        data: __assign(__assign({}, item.amount), {
+          text: (_d = userWalletData[item.sourceType]) === null || _d === void 0 ? void 0 : _d.amount
+        }),
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        }),
+        readonly: true
+      }), ((_e = item.text) === null || _e === void 0 ? void 0 : _e.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        className: "text",
+        data: item.text,
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        })
+      }), ((_f = item.button) === null || _f === void 0 ? void 0 : _f.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+        className: "wallet-btn",
+        data: __assign(__assign({}, item.button), {
+          text: ((_g = userWalletData[item.sourceType]) === null || _g === void 0 ? void 0 : _g.btnText) || (0, _locale.i18n)('LETS_GO')
+        }),
+        GAData: __assign(__assign({}, GAData), {
+          groupId: item.id,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        })
+      }), data.customize.layout === 'layout2' && ((_h = item.peek) === null || _h === void 0 ? void 0 : _h.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: "" + (((_j = preItem === null || preItem === void 0 ? void 0 : preItem.title) === null || _j === void 0 ? void 0 : _j.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: "" + (((_k = userWalletData[preItem === null || preItem === void 0 ? void 0 : preItem.sourceType]) === null || _k === void 0 ? void 0 : _k.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: "" + (((_l = nextItem === null || nextItem === void 0 ? void 0 : nextItem.title) === null || _l === void 0 ? void 0 : _l.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: "" + (((_m = userWalletData[nextItem === null || nextItem === void 0 ? void 0 : nextItem.sourceType]) === null || _m === void 0 ? void 0 : _m.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
+      })
+    }, _groupSource.map(function (item) {
+      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));
+    })) : /*#__PURE__*/_react["default"].createElement("div", {
+      className: "carousel-layout"
+    }, data.setting.navigation.open && _groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      className: "carousel-icon-left",
+      onClick: function onClick() {
+        return _this.carouselRef.current.toPrev();
+      },
+      onMouseEnter: this.mouseEnterBtn,
+      onMouseLeave: this.mouseLeaveBtn,
+      style: navStyle,
+      type: "icon-left"
+    }), /*#__PURE__*/_react["default"].createElement(_common.CardCarousel, {
+      ref: this.carouselRef,
+      autoplay: autoplay,
+      delay: ((_h = (_g = data.setting) === null || _g === void 0 ? void 0 : _g.autoplay) === null || _h === void 0 ? void 0 : _h.interval) * 1000,
+      onChange: function onChange(index) {
+        return _this.setState({
+          sliderIndex: index
+        });
+      }
+    }, _groupSource.map(function (item, index) {
+      var preItemFirst = _groupSource.length > 1 ? _groupSource[_groupSource.length - 1] : null;
+      var preItemLast = _groupSource.length > 1 ? _groupSource[0] : null;
+      var preItem = index === 0 ? preItemFirst : _groupSource[index - 1];
+      var nextItem = index === _groupSource.length - 1 ? preItemLast : _groupSource[index + 1];
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: item.id,
+        className: "item-wrap"
+      }, getItemContent(item, preItem, nextItem));
+    })), data.setting.navigation.open && _groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      className: "carousel-icon-right",
+      onClick: function onClick() {
+        return _this.carouselRef.current.toNext();
+      },
+      onMouseEnter: this.mouseEnterBtn,
+      onMouseLeave: this.mouseLeaveBtn,
+      style: navStyle,
+      type: "icon-right"
+    }), data.setting.dots.open && _groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "swiper-ban"
+    }, _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.carouselRef.current.slideTo(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;