qt-public-ui/lib/PageHeader/books/FeatureGuide.js

新设计规范下业务组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _ = require("../..");
var _material = _interopRequireDefault(require("../../material"));
var _qtPublicUtils = require("qt-public-utils");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var dplusTrack = function dplusTrack(eventName, customize) {
  window.dplus && window.dplus.track(eventName, customize);
};
var showDoc = _material["default"].showDoc,
  showVideo = _material["default"].showVideo;
var _default = exports["default"] = function _default(props) {
  var _list$url, _list$docUrl, _list$videoUrl, _list$url2, _list$docUrl2, _list$videoUrl2, _list$qaList;
  var listUrl = props.listUrl,
    callbackName = props.callbackName,
    helpUrl = props.helpUrl,
    helpMethod = props.helpMethod,
    featureName = props.featureName,
    _props$visibleHelp = props.visibleHelp,
    visibleHelp = _props$visibleHelp === void 0 ? true : _props$visibleHelp;
  var _useContext = (0, _react.useContext)(_.UmProvider.globalContext),
    trackPrefix = _useContext.trackPrefix;
  var storage = window.localStorage;
  var _useState = (0, _react.useState)({
      featureId: 'loading'
    }),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    list = _useState2[0],
    setList = _useState2[1];
  var _useState3 = (0, _react.useState)(2),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    isHelp = _useState4[0],
    setIsHelp = _useState4[1];
  var _useState5 = (0, _react.useState)(true),
    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
    isHelpVisi = _useState6[0],
    setIsHelpVisi = _useState6[1];
  var _useState7 = (0, _react.useState)(false),
    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
    success = _useState8[0],
    setSuccess = _useState8[1];
  var _useState9 = (0, _react.useState)(''),
    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
    trackName = _useState10[0],
    setTrackName = _useState10[1];
  var _useContext2 = (0, _react.useContext)(_.UmProvider.axiosContext),
    fetch = _useContext2.globalFetchFn;
  var getListData = function getListData() {
    var jsonpOptions = {
      url: listUrl,
      callbackName: callbackName,
      onSuccess: function onSuccess(res) {
        if (res && res.length > 0) {
          res.forEach(function (item) {
            if (item.docUrl.length > 0) {
              item.docUrl.forEach(function (d) {
                d.type = 'doc';
                if (d.sections) {
                  d.sections = d.sections.split(',');
                }
              });
            }
            if (item.videoUrl.length > 0) {
              item.videoUrl.forEach(function (v) {
                v.type = 'video';
              });
            }
          });
          var filterData = res.filter(function (item) {
            return item.featureId === featureName;
          });
          if (filterData.length > 0) {
            setList(filterData[0]);
            setTrackName(filterData[0].featureTitle);
          } else {
            setList({});
          }
        } else {
          setList({});
        }
      }
    };
    (0, _qtPublicUtils.jsonp)(jsonpOptions);
  };
  (0, _react.useEffect)(function () {
    getListData();
  }, []);
  (0, _react.useEffect)(function () {
    var user = _qtPublicUtils.cookie.get('umplus_uc_loginid');
    var typeList = storage.getItem(user);
    if (typeList) {
      var typeAry = typeList.split(',');
      var filterType = typeAry.filter(function (t) {
        return t === featureName;
      });
      if (filterType.length > 0) {
        setIsHelpVisi(false);
      } else {
        setIsHelpVisi(true);
      }
    } else {
      setIsHelpVisi(true);
    }
  }, [featureName]);
  var handleSubmitIsHelp = function handleSubmitIsHelp(value) {
    var _fetchOptions$method;
    dplusTrack('ClickEvent', {
      PageHeader: "".concat(featureName, "click").concat(['No', 'Yes'][value]),
      productSource: trackPrefix
    });
    setIsHelp(value);
    var postData = {
      type: featureName,
      feedback: value === 1 ? '是' : '否',
      productSource: trackPrefix
    };
    var fetchOptions = {
      url: helpUrl,
      method: helpMethod || 'post'
    };
    if (((_fetchOptions$method = fetchOptions.method) === null || _fetchOptions$method === void 0 ? void 0 : _fetchOptions$method.toUpperCase()) === 'GET') {
      fetchOptions.params = postData;
    } else {
      fetchOptions.data = postData;
    }
    fetch(fetchOptions).then(function (res) {
      if (res.code === 200) {
        setSuccess(true);
        setTimeout(function () {
          setSuccess(false);
        }, 3000);
        if (value === 1) {
          dplusTrack('PageGuide', {
            Behaviour: 'Helpful-Yes',
            SectionName: trackName,
            productSource: trackPrefix
          });
        } else {
          dplusTrack('PageGuide', {
            Behaviour: 'Helpful-No',
            SectionName: trackName,
            productSource: trackPrefix
          });
        }
      } else {
        setSuccess(false);
      }
      setIsHelpVisi(false);
    });
    if (storage) {
      var user = _qtPublicUtils.cookie.get('umplus_uc_loginid') || '';
      if (storage.getItem(user)) {
        var helpList = storage.getItem(user).split(',');
        var filterList = helpList.filter(function (l) {
          return l === featureName;
        });
        if (filterList.length === 0) {
          // === 0 表示不存在，则是第一次
          helpList.push(featureName);
        }
        storage.setItem(user, helpList); // cxw觉得这里不合理
        // storage.setItem(user, helpList.toString());
      } else {
        storage.setItem(user, featureName);
      }
    }
  };
  var onHrefClick = function onHrefClick(e, item) {
    e.preventDefault();
    if (item.type === 'doc') {
      showDoc(item);
      dplusTrack('PageGuide', {
        Behaviour: 'Document',
        SectionName: trackName,
        productSource: trackPrefix
      });
      return;
    }
    if (item.type === 'video') {
      showVideo(item);
      dplusTrack('PageGuide', {
        Behaviour: 'Video',
        SectionName: trackName,
        productSource: trackPrefix
      });
      return;
    }
    window.open(item.url);
    if (item.title === '智能采集') {
      dplusTrack('PageGuide', {
        Behaviour: 'Usdc',
        SectionName: trackName,
        productSource: trackPrefix
      });
    }
  };
  var onHrefFaq = function onHrefFaq(e, item, type) {
    e.preventDefault();
    showDoc(item);
    if (type === 'title') {
      dplusTrack('PageGuide', {
        Behaviour: 'FAQ',
        SectionName: trackName,
        productSource: trackPrefix
      });
    } else if (type === 'detail') {
      dplusTrack('PageGuide', {
        Behaviour: 'FAQDetail',
        FAQName: item.title,
        productSource: trackPrefix
      });
    }
  };

  // const handleTrackRetention = (type) => {
  //   dplusTrack(`${trackPrefix}PageGuide`, {
  //     CustomRetention: 'HowToTrack',
  //     Type: type
  //   });
  // };

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-feature-tips"
  }, (list === null || list === void 0 ? void 0 : list.featureId) && (list === null || list === void 0 ? void 0 : list.featureId) !== 'loading' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-feature-tips-info"
  }, /*#__PURE__*/_react["default"].createElement("p", {
    dangerouslySetInnerHTML: {
      __html: list.overview
    }
  }), ((list === null || list === void 0 ? void 0 : (_list$url = list.url) === null || _list$url === void 0 ? void 0 : _list$url.length) > 0 || (list === null || list === void 0 ? void 0 : (_list$docUrl = list.docUrl) === null || _list$docUrl === void 0 ? void 0 : _list$docUrl.length) > 0 || (list === null || list === void 0 ? void 0 : (_list$videoUrl = list.videoUrl) === null || _list$videoUrl === void 0 ? void 0 : _list$videoUrl.length) > 0) && /*#__PURE__*/_react["default"].createElement("p", null, "\u70B9\u6211\u4E86\u89E3\uFF1A", (list === null || list === void 0 ? void 0 : (_list$url2 = list.url) === null || _list$url2 === void 0 ? void 0 : _list$url2.length) > 0 && (list === null || list === void 0 ? void 0 : list.url.map(function (item) {
    return /*#__PURE__*/_react["default"].createElement("a", {
      onClick: function onClick(e) {
        return onHrefClick(e, item);
      }
    }, item.title);
  })), (list === null || list === void 0 ? void 0 : (_list$docUrl2 = list.docUrl) === null || _list$docUrl2 === void 0 ? void 0 : _list$docUrl2.length) > 0 && (list === null || list === void 0 ? void 0 : list.docUrl.map(function (item) {
    return /*#__PURE__*/_react["default"].createElement("a", {
      onClick: function onClick(e) {
        return onHrefClick(e, item);
      }
    }, item.title);
  })), (list === null || list === void 0 ? void 0 : (_list$videoUrl2 = list.videoUrl) === null || _list$videoUrl2 === void 0 ? void 0 : _list$videoUrl2.length) > 0 && (list === null || list === void 0 ? void 0 : list.videoUrl.map(function (item) {
    return /*#__PURE__*/_react["default"].createElement("a", {
      onClick: function onClick(e) {
        return onHrefClick(e, item);
      }
    }, /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
      type: "umicon-play",
      style: {
        marginRight: 4
      }
    }), item.title);
  }))), visibleHelp && isHelpVisi && /*#__PURE__*/_react["default"].createElement("p", {
    style: {
      marginTop: '22px'
    }
  }, "\u4EE5\u4E0A\u5185\u5BB9\u662F\u5426\u5BF9\u60A8\u6709\u5E2E\u52A9\uFF1F", /*#__PURE__*/_react["default"].createElement("span", {
    className: "umui-tips-btn ".concat(isHelp === 1 ? 'umui-tips-btn-active' : ''),
    onClick: function onClick() {
      return handleSubmitIsHelp(1);
    }
  }, "\u662F"), /*#__PURE__*/_react["default"].createElement("span", {
    className: "umui-tips-btn ".concat(isHelp === 0 ? 'umui-tips-btn-active' : ''),
    onClick: function onClick() {
      return handleSubmitIsHelp(0);
    }
  }, "\u5426")), success && /*#__PURE__*/_react["default"].createElement("p", {
    style: {
      marginTop: '22px'
    }
  }, /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
    type: "umicon-success",
    style: {
      color: '#52c41a'
    }
  }), " \u611F\u8C22\u60A8\u7684\u53CD\u9988~")), (list === null || list === void 0 ? void 0 : (_list$qaList = list.qaList) === null || _list$qaList === void 0 ? void 0 : _list$qaList.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-feature-tips-qa"
  }, list.qaUrl ? /*#__PURE__*/_react["default"].createElement("h2", null, /*#__PURE__*/_react["default"].createElement("a", {
    href: "###",
    onClick: function onClick(e) {
      return onHrefFaq(e, {
        url: list.qaUrl
      }, 'title');
    }
  }, list.qaTitle || '常见问题FAQ', " >")) : /*#__PURE__*/_react["default"].createElement("h2", null, list.qaTitle || '常见问题FAQ'), /*#__PURE__*/_react["default"].createElement("ul", null, list.qaList.map(function (item) {
    return /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("a", {
      href: "###",
      onClick: function onClick(e) {
        return onHrefFaq(e, item, 'detail');
      }
    }, item.title));
  })))), !list.featureId && '敬请期待！');
};