Add scan Wechat qrcode to join group (#7098)

* 01 frontend support wechat entry

* 02 change backend settings

* 03 update icon

* 04 change wechat icon

frontend/src/components/main-side-nav-folded.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import ModalPortal from './modal-portal';
 import { Link } from '@gatsbyjs/reach-router';
-import { gettext, siteRoot, canInvitePeople, enableTC, sideNavFooterCustomHtml,
+import { gettext, siteRoot, canInvitePeople, enableTC, sideNavFooterCustomHtml, showWechatSupportGroup,
   isDocs, isPro, isDBSqlite3, customNavItems, mediaUrl, curNoteMsg } from '../utils/constants';
 import { SIDE_PANEL_FOLDED_WIDTH, SUB_NAV_ITEM_HEIGHT } from '../constants';
 import Tip from './side-nav-icon-tip';
@@ -13,6 +13,8 @@ import { Utils } from '../utils/utils';
 import Group from '../models/group';
 import toaster from './toast';
 import { FOLDED_SIDE_NAV_FILES, FOLDED_SIDE_NAV } from '../constants/zIndexes';
+import { isWorkWeixin } from './wechat/weixin-utils';
+import WechatDialog from './wechat/wechat-dialog';
 
 
 import '../css/main-side-nav-folded.css';
@@ -32,7 +34,9 @@ class MainSideNavFolded extends React.Component {
       groupItems: [],
       isFilesSubNavShown: false,
       isAboutDialogShow: false,
+      isShowWechatDialog: false,
     };
+    this.isWorkWeixin = isWorkWeixin(window.navigator.userAgent.toLowerCase());
   }
 
   componentDidMount() {
@@ -53,6 +57,11 @@ class MainSideNavFolded extends React.Component {
     this.unsubscribeHeaderEvent();
   }
 
+  toggleWechatDialog = () => {
+    this.setState({ isShowWechatDialog: !this.state.isShowWechatDialog });
+  };
+
+
   handleOutsideClick = (e) => {
     const { isFilesSubNavShown } = this.state;
     if (isFilesSubNavShown && !this.filesSubNav.contains(e.target)) {
@@ -236,6 +245,14 @@ class MainSideNavFolded extends React.Component {
                       <Tip target="main-side-nav-folded-about" text={gettext('About')} />
                     </a>
                   </li>
+                  {showWechatSupportGroup &&
+                  <li className='nav-item'>
+                    <a href="#" className="nav-link" onClick={this.toggleWechatDialog}>
+                      <span className="sf3-font-hi sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-wechat"></span>
+                      <Tip target="main-side-nav-folded-wechat" text={`加入 Seafile ${this.isWorkWeixin ? '企业' : ''}微信咨询群`} />
+                    </a>
+                  </li>
+                  }
                 </ul>
               }
               <div
@@ -252,6 +269,11 @@ class MainSideNavFolded extends React.Component {
             <AboutDialog onCloseAboutDialog={this.toggleAboutDialog} />
           </ModalPortal>
         )}
+        {this.state.isShowWechatDialog &&
+          <ModalPortal>
+            <WechatDialog toggleWechatDialog={this.toggleWechatDialog}/>
+          </ModalPortal>
+        }
       </Fragment>
     );
   }

frontend/src/components/main-side-nav.js

@@ -5,7 +5,7 @@ import { Link } from '@gatsbyjs/reach-router';
 import {
   gettext, siteRoot, canAddGroup, canAddRepo, canShareRepo,
   canGenerateShareLink, canGenerateUploadLink, canInvitePeople,
-  enableTC, sideNavFooterCustomHtml, enableShowAbout,
+  enableTC, sideNavFooterCustomHtml, enableShowAbout, showWechatSupportGroup,
   canViewOrg, isDocs, isPro, isDBSqlite3, customNavItems, mediaUrl
 } from '../utils/constants';
 import { seafileAPI } from '../utils/seafile-api';
@@ -16,6 +16,8 @@ import CreateGroupDialog from '../components/dialog/create-group-dialog';
 import AboutDialog from './dialog/about-dialog';
 import FilesSubNav from '../components/files-sub-nav';
 import { SUB_NAV_ITEM_HEIGHT } from '../constants';
+import { isWorkWeixin } from './wechat/weixin-utils';
+import WechatDialog from './wechat/wechat-dialog';
 
 const propTypes = {
   currentTab: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
@@ -33,11 +35,17 @@ class MainSideNav extends React.Component {
       sharedExtended: false,
       groupItems: [],
       isCreateGroupDialogOpen: false,
+      isShowWechatDialog: false,
     };
     this.adminHeight = 0;
     this.filesNavHeight = 0;
+    this.isWorkWeixin = isWorkWeixin(window.navigator.userAgent.toLowerCase());
   }
 
+  toggleWechatDialog = () => {
+    this.setState({ isShowWechatDialog: !this.state.isShowWechatDialog });
+  };
+
   shExtend = () => {
     this.setState({
       sharedExtended: !this.state.sharedExtended,
@@ -305,6 +313,16 @@ class MainSideNav extends React.Component {
                   </a>
                 </li>
                 }
+                {showWechatSupportGroup &&
+                <li className='nav-item'>
+                  <a href="#" className="nav-link" onClick={this.toggleWechatDialog}>
+                    <span className="sf3-font-hi sf3-font" aria-hidden="true"></span>
+                    <span className="nav-text">
+                      {`加入 Seafile ${this.isWorkWeixin ? '企业' : ''}微信咨询群`}
+                    </span>
+                  </a>
+                </li>
+                }
               </ul>
             )
             }
@@ -319,6 +337,11 @@ class MainSideNav extends React.Component {
             <AboutDialog onCloseAboutDialog={this.toggleAboutDialog} />
           </ModalPortal>
         )}
+        {this.state.isShowWechatDialog &&
+          <ModalPortal>
+            <WechatDialog toggleWechatDialog={this.toggleWechatDialog}/>
+          </ModalPortal>
+        }
       </Fragment>
     );
   }

frontend/src/components/wechat/wechat-dialog.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { mediaUrl } from '../../utils/constants';
+import { isWorkWeixin } from './weixin-utils';
+import '../../css/wechat-dialog.css';
+
+const propTypes = {
+  toggleWechatDialog: PropTypes.func.isRequired
+};
+
+class WechatDialog extends React.PureComponent {
+
+  toggle = () => {
+    this.props.toggleWechatDialog();
+  };
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.toggle} zIndex='1060'>
+        <ModalHeader toggle={this.toggle}>
+          加入咨询群
+        </ModalHeader>
+        <ModalBody>
+          <div className="wechat-dialog-body">
+            <img src={`${mediaUrl}img/wechat-QR-code.png`} width="150" alt="" />
+            <div className="wechat-dialog-message">
+              <p>扫描二维码</p>
+              <p>{`加入 Seafile ${isWorkWeixin(window.navigator.userAgent.toLowerCase()) ? '企业' : ''}微信咨询群`}</p>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+WechatDialog.propTypes = propTypes;
+
+export default WechatDialog;

frontend/src/components/wechat/weixin-utils.js

@@ -0,0 +1,6 @@
+export const isWorkWeixin = (ua) => {
+  if (ua.includes('micromessenger') && ua.includes('wxwork')) {
+    return true;
+  }
+  return false;
+};