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

新设计规范下业务组件库

import React, { useEffect, useState, useContext } from 'react';
import { UmProvider, IconSlim as Icon } from '../..';
import material from '../../material';
import { jsonp, cookie } from 'qt-public-utils';
var dplusTrack = function dplusTrack(eventName, customize) {
  window.dplus && window.dplus.track(eventName, customize);
};
var showDoc = material.showDoc,
  showVideo = material.showVideo;
export default (function (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 = useContext(UmProvider.globalContext),
    trackPrefix = _useContext.trackPrefix;
  var storage = window.localStorage;
  var _useState = useState({
      featureId: 'loading'
    }),
    list = _useState[0],
    setList = _useState[1];
  var _useState2 = useState(2),
    isHelp = _useState2[0],
    setIsHelp = _useState2[1];
  var _useState3 = useState(true),
    isHelpVisi = _useState3[0],
    setIsHelpVisi = _useState3[1];
  var _useState4 = useState(false),
    success = _useState4[0],
    setSuccess = _useState4[1];
  var _useState5 = useState(''),
    trackName = _useState5[0],
    setTrackName = _useState5[1];
  var _useContext2 = 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({});
        }
      }
    };
    jsonp(jsonpOptions);
  };
  useEffect(function () {
    getListData();
  }, []);
  useEffect(function () {
    var user = 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: featureName + "click" + ['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 = 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.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "umui-feature-tips-info"
  }, /*#__PURE__*/React.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.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.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.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.createElement("a", {
      onClick: function onClick(e) {
        return onHrefClick(e, item);
      }
    }, /*#__PURE__*/React.createElement(Icon, {
      type: "umicon-play",
      style: {
        marginRight: 4
      }
    }), item.title);
  }))), visibleHelp && isHelpVisi && /*#__PURE__*/React.createElement("p", {
    style: {
      marginTop: '22px'
    }
  }, "\u4EE5\u4E0A\u5185\u5BB9\u662F\u5426\u5BF9\u60A8\u6709\u5E2E\u52A9\uFF1F", /*#__PURE__*/React.createElement("span", {
    className: "umui-tips-btn " + (isHelp === 1 ? 'umui-tips-btn-active' : ''),
    onClick: function onClick() {
      return handleSubmitIsHelp(1);
    }
  }, "\u662F"), /*#__PURE__*/React.createElement("span", {
    className: "umui-tips-btn " + (isHelp === 0 ? 'umui-tips-btn-active' : ''),
    onClick: function onClick() {
      return handleSubmitIsHelp(0);
    }
  }, "\u5426")), success && /*#__PURE__*/React.createElement("p", {
    style: {
      marginTop: '22px'
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    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.createElement("div", {
    className: "umui-feature-tips-qa"
  }, list.qaUrl ? /*#__PURE__*/React.createElement("h2", null, /*#__PURE__*/React.createElement("a", {
    href: "###",
    onClick: function onClick(e) {
      return onHrefFaq(e, {
        url: list.qaUrl
      }, 'title');
    }
  }, list.qaTitle || '常见问题FAQ', " >")) : /*#__PURE__*/React.createElement("h2", null, list.qaTitle || '常见问题FAQ'), /*#__PURE__*/React.createElement("ul", null, list.qaList.map(function (item) {
    return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
      href: "###",
      onClick: function onClick(e) {
        return onHrefFaq(e, item, 'detail');
      }
    }, item.title));
  })))), !list.featureId && '敬请期待！');
});