react_hsbc_teller 0.7.1 → 0.7.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react_hsbc_teller",
-  "version": "0.7.1",
+  "version": "0.7.5",
   "description": "React",
   "private": false,
   "main": "lib/hsbc.js",

package/packages/pages/index.jsx

@@ -10,7 +10,7 @@ class Main extends Component {
       zh: {},
     }
   };
-
+  
   // 获取语言包
   updateLanguage = async () => {
     let res =  await API.selectLang()
@@ -32,7 +32,6 @@ class Main extends Component {
     // console.log(JSON.parse(localStorage.getItem("langData")))
     this.updateLanguage()
   }
-
   render() {
     const lang = this.props.lang
     

package/packages/pages/video/video.jsx

@@ -30,8 +30,14 @@ const LEAVE_TYPE = {
 let pictureInPictureVideo = ''
 @injectIntl
 class Video extends Component {
+  constructor(props) {
+    super(props)
+		// this.cancel = axios.CancelToken.source()
+	}
+  cancel = axios.CancelToken.source()
   signCanvas = React.createRef();
   state = {
+    sessionType: true,
     isWhiteboard: false,
     isSelect: '',
     loading: false,
@@ -43,6 +49,7 @@ class Video extends Component {
     employeeNumber: '',
     employeeName: '',
     isModalVisibleInvitation: false,
+    linkData: '',
     roomCustomerList: [],
     facialImg: '',
     isModalVisibleFacial: false,
@@ -106,7 +113,8 @@ class Video extends Component {
     cameraValue: '',
     microphoneValue: '',
     imStatus: false,
-    imJoinRoom: false
+    imJoinRoom: false,
+    analyserData: new Map(),
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -156,6 +164,9 @@ class Video extends Component {
       })
     } catch (err) {
       console.error(err);
+      this.setState({
+        sessionType: false
+      })
       this.props.createRoomCallback({
         type: 2,
         errorManage: '保存房间信息失败',
@@ -533,7 +544,12 @@ class Video extends Component {
     }
   };
   endSessionValue = () => {
-    this.test_controller.LeaveRoom()
+    if(this.state.sessionType) {
+      this.test_controller.LeaveRoom()
+    } else {
+      this.finishSession()
+    }
+    
   };
   // 画中画
   pictureInPicture = () => {
@@ -546,80 +562,93 @@ class Video extends Component {
         if (document.getElementById('video1').name) {
           list.push({
             name: 'video1',
-            title: this.state.videoOneName
+            title: this.state.videoOneName,
+            voice: 'voiceVideoOne'
           })
         }
         if (document.getElementById('publish_video1').name) {
           list.push({
             name: 'publish_video1',
-            title: '坐席'
+            title: this.props.meetingInfo.host ? this.props.meetingInfo.host : '坐席',
+            voice: 'voiceStatue'
           })
         }
         if (document.getElementById('video2').name) {
           list.push({
             name: 'video2',
-            title: this.state.videoTwoName
+            title: this.state.videoTwoName,
+            voice: 'voiceVideoTwo'
           })
         }
         if (document.getElementById('video3').name) {
           list.push({
             name: 'video3',
-            title: this.state.videoThreeName
+            title: this.state.videoThreeName,
+            voice: 'voiceVideoThree'
           })
         }
         if (document.getElementById('video4').name) {
           list.push({
             name: 'video4',
-            title: this.state.videoFourName
+            title: this.state.videoFourName,
+            voice: 'voiceVideoFour'
           })
         }
         if (document.getElementById('video5').name) {
           list.push({
             name: 'video5',
-            title: this.state.videoFiveName
+            title: this.state.videoFiveName,
+            voice: 'voiceVideoFive'
           })
         }
         if (document.getElementById('video6').name) {
           list.push({
             name: 'video6',
-            title: this.state.videoSixName
+            title: this.state.videoSixName,
+            voice: 'voiceVideoSix'
           })
         }
 
         if (document.getElementById('video7').name) {
           list.push({
             name: 'video7',
-            title: this.state.videoSevenName
+            title: this.state.videoSevenName,
+            voice: 'voiceVideoSeven'
           })
         }
         if (document.getElementById('video8').name) {
           list.push({
             name: 'video8',
-            title: this.state.videoEightName
+            title: this.state.videoEightName,
+            voice: 'voiceVideoEight'
           })
         }
         if (document.getElementById('video9').name) {
           list.push({
             name: 'video9',
-            title: this.state.videoNineName
+            title: this.state.videoNineName,
+            voice: 'voiceVideoNine'
           })
         }
         if (document.getElementById('video10').name) {
           list.push({
             name: 'video10',
-            title: this.state.videoTenName
+            title: this.state.videoTenName,
+            voice: 'voiceVideoTen'
           })
         }
         if (document.getElementById('video11').name) {
           list.push({
             name: 'video11',
-            title: this.state.videoElevenName
+            title: this.state.videoElevenName,
+            voice: 'voiceVideoEleven'
           })
         }
         if (document.getElementById('video12').name) {
           list.push({
             name: 'video12',
-            title: this.state.videoTwelveName
+            title: this.state.videoTwelveName,
+            voice: 'voiceVideoTwelve'
           })
         }
         console.log(list)
@@ -631,7 +660,7 @@ class Video extends Component {
         canvas.height = height;
 
         interval = setInterval(() => {
-          cobj.clearRect(0, 0, width, height);
+          // cobj.clearRect(0, 0, width, height);
           for (let i = 0; i < list.length; i++) {
 
             let videoId = list[i].name;
@@ -655,20 +684,20 @@ class Video extends Component {
             cobj.stroke();
             cobj.beginPath();
             cobj.font = "28px auto";
-            cobj.textAlign = 'center';
+            cobj.textAlign = 'left';
             cobj.lineWidth = 1;
             // 文字
             let str = list[i].title
             for (let k = 0; k < str.length; k++){
               // console.log(str.substring(0,k+1))
               // console.log(cobj.measureText(str.substring(0,k+1)).width)
-                  if (cobj.measureText(str.substring(0,k+1)).width>300){
+                  if (cobj.measureText(str.substring(0,k+1)).width>210){
                     str = str.substring(0,k-2)
                     str += '...'
                     break;
                   }
             }
-            cobj.strokeText(str, 150, 360 * (i + 1) - 20);
+            cobj.strokeText(str, 70, 360 * (i + 1) - 20);
             cobj.stroke();
             //左边框
             cobj.beginPath();
@@ -706,44 +735,60 @@ class Video extends Component {
             cobj.lineWidth = 5; //线的边框为10像素
             cobj.strokeStyle = '#d9363e';
             cobj.stroke(); //绘制定义的图形
+            
+            // 绘制话筒图标
+            let microphoneSize = 50
+            var img = document.getElementById("icon_huatong");
+            var img1 = document.getElementById("icon_huatong_close");
+            if(this.state[list[i].voice]) {
+              cobj.drawImage(img1, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
+            } else {
+              cobj.drawImage(img, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
+
+            // 绘制实时音量
+            let sid = document.getElementById(list[i].name).name
+            let analyser = this.state.analyserData.get(sid)
+            aou(analyser)
+            //  let sid = document.getElementById(list[i].name).name
+            //   let stream = this.test_controller.GetMediaInfo(sid).audio_
+            //   let acc = new AudioContext()
+            //   let mic = acc.createMediaStreamSource(stream)
+            //   let analyser = acc.createAnalyser()
+            //   analyser.fftSize = 256
+            //   mic.connect(analyser)
+            //   aou(analyser) 
+            //   let microphoneSize = 50
+            //   var img = document.getElementById("icon_huatong");
+            //   cobj.drawImage(img, 600, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
+            function aou(analyser){
+              let dataArray = new Uint8Array(analyser.frequencyBinCount);
+              analyser.getByteFrequencyData(dataArray);
+              let step = Math.round(dataArray.length / 60); //采样步长
+              // 以画布左上角为坐标原点
+              let drawArea = {
+                x1: 28/50 * microphoneSize + 10, // 波动范围右下角的点坐标
+                y1: 25/50 * microphoneSize + 360 * (i + 1) - 60, 
+                x2: 22/50 * microphoneSize + 10,  // 波动范围左上角的点坐标
+                y2: 10/50 * microphoneSize + 360 * (i + 1) - 60,
+              }
+              
+              
+              for (var j = 0; j < 40; j++) {
+                let energy = (dataArray[step * j] / 256.0) * 80;
+                cobj.beginPath();
+                cobj.fillStyle = "#0AE544";
+                const { x1,y1,x2,y2} = drawArea
+                let width = x1-x2;
+                let height = (energy>20?(energy-20):0) * (y1 - y2 ) / 70
+                let startX =  x2 // 绘制起始点x
+                let startY =  y1 - height  // 绘制起始点y
+                cobj.fillRect(startX, startY, width, height )
+              }
+              requestAnimationFrame(aou.bind(this, analyser));
 
-            // let sid = document.getElementById(list[i].name).name
-            // let stream = this.test_controller.GetMediaInfo(sid).audio_
-            // let acc = new AudioContext()
-            // let mic = acc.createMediaStreamSource(stream)
-            // let analyser = acc.createAnalyser()
-            // analyser.fftSize = 256
-            // mic.connect(analyser)
-            // aou(analyser)
-            // let microphoneSize = this.props.microphoneSize
-            // var img = document.getElementById("icon_huatong");
-            // cobj.drawImage(img, 600, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
-            // function aou(analyser){
-            //   let dataArray = new Uint8Array(analyser.frequencyBinCount);
-            //   analyser.getByteFrequencyData(dataArray);
-            // let step = Math.round(dataArray.length / 60); //采样步长
-            // // 以画布左上角为坐标原点
-            // let drawArea = {
-            //   x1: 28/50 * microphoneSize + 600, // 波动范围右下角的点坐标
-            //   y1: 25/50 * microphoneSize + 360 * (i + 1) - 60, 
-            //   x2: 22/50 * microphoneSize + 600,  // 波动范围左上角的点坐标
-            //   y2: 10/50 * microphoneSize + 360 * (i + 1) - 60,
-            // }
-
-            // for (var j = 0; j < 40; j++) {
-            //   let energy = (dataArray[step * j] / 256.0) * 80;
-            //   cobj.beginPath();
-            //   cobj.fillStyle = "#0AE544";
-            //   const { x1,y1,x2,y2} = drawArea
-            //   let width = x1-x2;
-            //   let height = (energy>20?(energy-20):0) * (y1 - y2 ) / 70
-            //   let startX =  x2 // 绘制起始点x
-            //   let startY =  y1 - height  // 绘制起始点y
-            //   cobj.fillRect(startX, startY, width, height )
-            // }
-            // requestAnimationFrame(aou.bind(this, analyser));
-
-            // }
+            }
+            }
+            
           }
         }, 100);
         const captureStream = canvas.captureStream();
@@ -1045,6 +1090,9 @@ class Video extends Component {
     window.IMOpenfire = msg =>{
       console.log('im登录', msg)
       if(!msg) {
+        this.setState({
+          sessionType: false
+        })
         this.roomCallBack(2, 'im建立连接失败',-7)
       } else {
         this.setState({
@@ -1080,6 +1128,7 @@ class Video extends Component {
           console.log('deviceId' + devicesInfo[i].deviceId);
 
           b.actionid = devicesInfo[i].deviceId;
+          b.groupId = devicesInfo[i].groupId;
           if (
             devicesInfo[i].label === '' ||
             devicesInfo[i].label === undefined ||
@@ -1093,6 +1142,7 @@ class Video extends Component {
         } else if (devicesInfo[i].kind === 'audioinput') {
           // 麦克风
           b.actionid = devicesInfo[i].deviceId;
+          b.groupId = devicesInfo[i].groupId;
           if (
             devicesInfo[i].label === '' ||
             devicesInfo[i].label === undefined ||
@@ -1106,6 +1156,7 @@ class Video extends Component {
         } else if (devicesInfo[i].kind === 'audiooutput') {
           // 喇叭
           b.actionid = devicesInfo[i].deviceId;
+          b.groupId = devicesInfo[i].groupId;
           if (
             devicesInfo[i].label === '' ||
             devicesInfo[i].label === undefined ||
@@ -1118,12 +1169,36 @@ class Video extends Component {
           obj2.push(b)
         }
       }
+      const objList = []
+      const arr = {}
+      const objList1 = []
+      const arr1 = {}
+      const objList2 = []
+      const arr2 = {}
+      for(var i =0; i<obj.length; i++){
+              if(!arr[obj[i].groupId]){
+                objList.push(obj[i]);
+                 arr[obj[i].groupId] = true;
+             }
+         }
+         for(var i =0; i<obj1.length; i++){
+          if(!arr1[obj1[i].groupId]){
+            objList1.push(obj1[i]);
+             arr1[obj1[i].groupId] = true;
+         }
+     }
+     for(var i =0; i<obj2.length; i++){
+      if(!arr2[obj2[i].groupId]){
+        objList2.push(obj2[i]);
+         arr2[obj2[i].groupId] = true;
+     }
+ }
       this.setState({
-        cameraList: obj,
-        microphoneList: obj1,
-        speakerList: obj2
+        cameraList: objList,
+        microphoneList: objList1,
+        speakerList: [objList2[0]]
       })
-      if (!this.state.appId) {
+      if (!this.state.appId && this.state.sessionType) {
         this.mpaasSig(data);
         this.setState({
           cameraValue: obj[0].actionid,
@@ -1139,6 +1214,9 @@ class Video extends Component {
     // 获取设备失败
     this.test_controller.OnGetDevicesFailed = (code, msg) => {
       console.log('获取设备失败', code, msg)
+      this.setState({
+        sessionType: false
+      })
       this.messageClick('获取设备失败，请检查摄像头设备是否可用或是否禁用摄像头','error')
       this.roomCallBack(2, '获取设备失败',-1)
     };
@@ -1149,6 +1227,9 @@ class Video extends Component {
     };
     this.test_controller.OnConnectFailed = (code, msg) => {
       console.log('建立连接失败', code, msg)
+      this.setState({
+        sessionType: false
+      })
       this.roomCallBack(2, '连接失败',-2)
     };
     // 断开连接回调
@@ -1163,6 +1244,9 @@ class Video extends Component {
     // 初始化房间失败
     this.test_controller.OnInitRoomConfigFail = (err_code, err_msg) => {
       console.log('初始化房间失败', err_code, err_msg)
+      this.setState({
+        sessionType: false
+      })
       this.roomCallBack(2, '初始化失败',-3)
     };
     // 初始化成功回调
@@ -1189,6 +1273,9 @@ class Video extends Component {
     // 创建房间失败
     this.test_controller.OnCreateRoomFailed = (err_code, err_msg) => {
       console.log('创建房间失败', err_code, err_msg)
+      this.setState({
+        sessionType: false
+      })
       this.roomCallBack(2, '创建房间失败',-4)
     };
     // 初始化⾳视频成功
@@ -1211,6 +1298,9 @@ class Video extends Component {
     // 加入房间失败
     this.test_controller.OnJoinRoomFailed = (err_code, err_msg) => {
       console.log('加入房间失败', err_code, err_msg)
+      this.setState({
+        sessionType: false
+      })
       this.roomCallBack(2, '加入失败',-5)
     };
     // 发布媒体流成功
@@ -1231,6 +1321,9 @@ class Video extends Component {
     // 发布媒体流失败
     this.test_controller.OnPublishFailed = (sid, err_code, err_msg) => {
       console.log('发布媒体流失败', sid, err_code, err_msg)
+      this.setState({
+        sessionType: false
+      })
       this.roomCallBack(2, '发布失败',-6)
     };
     // 订阅媒体流成功
@@ -1412,6 +1505,21 @@ class Video extends Component {
     // 推送“有新发布”给与会者
     this.test_controller.OnNewPublish = (feed) => {
       console.log('有新发布者', feed);
+      // callNimIM('sendChatMsg', {
+      //   customId: feed.uid,
+      //   content: JSON.stringify({
+      //     'typeId': 1014,
+      //     'sessionId': this.state.sessionId,
+      //     'meetingInfo': {
+      //       'title': this.props.meetingInfo.title,
+      //       'host': this.props.meetingInfo.host,
+      //       'customers': this.props.meetingInfo.customers
+      //     }
+
+      //   })
+      // }, function (code, message, data) {
+      // })
+      
       callNimIM('sendCustomCmdMsg', {
         customId: this.state.imRoomId,
         content: JSON.stringify({
@@ -1767,6 +1875,7 @@ class Video extends Component {
       exitType
     ) => {
       console.log('退出房间者', participant, exitType)
+      this.messageClick(this.props.customLeaveRoom,'error')
     };
     // 弱网回调
     this.test_controller.OnNetworkWeak = (bpsSend, bpsRecv, sid) => {
@@ -2038,6 +2147,11 @@ class Video extends Component {
         ctx.fillRect(startX, startY, width, height)
       }
       requestAnimationFrame(this.test_controller.OnVolumeAnalyser.bind(this, sid, analyser));
+      
+      this.state.analyserData.set(sid, analyser)
+      this.setState({
+        analyserData: this.state.analyserData
+      })
     }
     // 停止共享
     this.test_controller.OnDesktopDisplayClosed = () => {
@@ -2072,7 +2186,7 @@ class Video extends Component {
   finishSession = async () => {
 
 
-    if (this.state.roomCustomerList.length == 0) {
+    if (this.state.roomCustomerList.length == 0 && this.state.sessionType) {
       try {
         let result = await API.finishSession({
           sessionId: this.state.sessionId,
@@ -2086,7 +2200,8 @@ class Video extends Component {
       isWhiteboard: false,
       isPictureInPicture: false,
       imStatus: false,
-      imJoinRoom: false
+      imJoinRoom: false,
+      sessionType: true
     });
     this.props.onLeaveRoom({
       code: LEAVE_TYPE.TELLER_EXIT,
@@ -2123,8 +2238,12 @@ class Video extends Component {
     axios.get(this.props.resourcePath + "/beauty/beauty.js")
     .then(response => this.addToScriptClick()).catch(function (error) {
       console.log(error);
+      this.setState({
+        sessionType: false
+      })
       this.roomCallBack(2, '创建房间失败',-4)
       
+      
   })
     
   }
@@ -2195,6 +2314,12 @@ class Video extends Component {
       }
     }
   }
+  componentWillUnmount() {
+    this.setState = (state, callback) => {
+      return
+    }
+    this.cancel = ''
+  }
   componentWillMount() {
     if (this.props.sessionId) {
       this.getRoomStatus({
@@ -2513,7 +2638,8 @@ class Video extends Component {
       isModalVisibleInvitation: true,
       employeeNumber: '',
       employeeName: '',
-      employeeError: ''
+      employeeError: '',
+      linkData: ''
     })
 
   }
@@ -2710,6 +2836,11 @@ class Video extends Component {
           employeeName: result.data.staffName,
           employeeError: result.data.staffName ? '' : '查无此人',
         })
+        if(result.data.staffName){
+          this.setState({
+            linkData:'https://wp-staff-gateway.wealth-platform.uat.ali.cloud.cn.hsbc/meeting-ui/OHB/CN/HSBC?chnlID=OHB&locale=zh_CN&chnlCC=CN&chnlGMC=HSBC&targetFunc=supervisorMeeting&sourceFunc=rmMeeting&appointmentID='+ this.props.businessNumber + '&staffID='+this.state.employeeNumber+'&staffName='+ encodeURIComponent(result.data.staffName)
+          })
+        }
       } else {
         this.messageClick('查询失败','error')
       }
@@ -2976,11 +3107,11 @@ class Video extends Component {
                         <label className='labelClass'>{meetingInfo.title}</label>
                       </li>
                       <li>
-                        <span>客户：</span>
+                        <span>客户经理：</span>
                         <label className='labelClass'>{meetingInfo.host}</label>
                       </li>
                       <li>
-                        <span>参会人：</span>
+                        <span>参会者：</span>
                         {customerNameList}
                       </li>
                     </ul>
@@ -3014,7 +3145,7 @@ class Video extends Component {
                     />
                   }
                   <canvas style={{ display: (!this.state.voiceStatue) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>坐席</div>
+                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>{this.props.meetingInfo.host ? this.props.meetingInfo.host : '坐席'}</div>
                   </div>
                 </div>
 
@@ -3357,6 +3488,7 @@ class Video extends Component {
 
             </div>
             <img id="icon_huatong" style={{ display: 'none' }} src={require("../../assets/img/icon_huatong.png").default}></img>
+            <img id="icon_huatong_close" style={{ display: 'none' }} src={require("../../assets/img/jingyin.png").default}></img>
           </div>
           </div>
           <Foot
@@ -3422,7 +3554,12 @@ class Video extends Component {
           <Modal className="modelClass" title="新增预约" closable={false} centered={true} visible={this.state.isModalVisibleInvitation} footer={[
              <div key='invitation'>
             <Button className="modelButtonCancel" onClick={this.handleCancelInvitation}>取消</Button>
-            <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkInvitation}>确定</Button>
+            {
+              this.state.employeeName &&<Button className='modelButtonOk'type="primary" danger onClick={this.handleOkInvitation}>确定</Button>
+            }
+            {
+              !this.state.employeeName &&<Button className='modelButtonCancelOne' type="primary" danger >确定</Button>
+            }
             </div>
           ]}>
             <div>
@@ -3434,6 +3571,9 @@ class Video extends Component {
               <div className="invitationDiv">
               <span className="modalSpan">&nbsp;&nbsp;&nbsp;姓名：</span><span>{this.state.employeeName}</span>
               </div>
+              <div className='linkClass'>
+                <span>{this.state.linkData}</span>
+              </div>
             </div>
             {
               this.state.employeeError && <div className='errorClassInvitation'>
@@ -3499,6 +3639,7 @@ Video.defaultProps = {
   fontSize: '14',
   fontFamily: 'auto',
   menus: ['SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP'],
+  customLeaveRoom: '客户离开房间',
   meetingInfo: {
     title: '测试',
     host: 'wmz',

package/packages/pages/video/video.less

@@ -312,6 +312,15 @@
   border: 1px #5C5C5C solid!important;
   border-spacing: 20px!important;
 }
+.modelButtonCancelOne{
+  width: 100px!important;
+  height: 40px!important;
+  font-size: 16px!important;
+  color: #5C5C5C!important;
+  border: 1px #5C5C5C solid!important;
+  border-spacing: 20px!important;
+  background: #d9d9d9!important;
+}
 .modelButtonOk{
   width: 100px!important;
   height: 40px!important;
@@ -434,4 +443,9 @@
       width: 18px;
     height: 18px;
     }
+}
+.linkClass{
+  margin: 20px 40px;
+  font-size: 14px;
+  word-break: break-all;
 }

package/packages/utils/cell.js

@@ -24,8 +24,8 @@ function callNimIM(method, json, callback) {
   const callId = _generateId()
 
   callbackRegister.set(callId, fn)
-  if (method == 'sendGroupMsg') {
-    sendMessage(json.groupId, (JSON.parse(window.sessionStorage.getItem('sigData')).account + '@' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname), 'groupchat', json.content)
+  if (method == 'sendChatMsg') {
+    sendMessage(json.customId, (JSON.parse(window.sessionStorage.getItem('sigData')).account + '@' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname), 'chat', json.content)
   } else if (method == 'sendCustomCmdMsg') {
     sendMessage(json.customId, (JSON.parse(window.sessionStorage.getItem('sigData')).account + '@' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname), 'groupchat', json.content)
   } else if (method == 'transfer' || method == 'transferreject' || method == 'transferagree') {

package/src/index.js

@@ -2,8 +2,8 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "./index.less";
 import '@babel/polyfill';
-// import { HSBC } from "../lib/hsbc";
-import {HSBC} from "../packages";
+import { HSBC } from "../lib/hsbc";
+// import {HSBC} from "../packages";
 
 ReactDOM.render(
   <div className="hsbc"><HSBC></HSBC></div>,