Handler messages from the iframe

Emurgo · Aug 8, 2022 · e8798b9 · e8798b9
1 parent 89715c5
commit e8798b9
Showing 1 changed file with 43 additions and 28 deletions.
diff --git a/packages/yoroi-extension/app/components/widgets/Support.js b/packages/yoroi-extension/app/components/widgets/Support.js
@@ -3,51 +3,66 @@ import { Component } from 'react';
 import type { Node } from 'react';
 import { ReactComponent as SupportIcon } from '../../assets/images/support.inline.svg';
 import { IconButton } from '@mui/material';
+import { Box } from '@mui/system';
 
 type Props = {||}
+type State = {|
+  open: boolean,
+|}
+export default class Support extends Component <Props, State> {
 
-export default class Support extends Component <Props> {
+  state: State = {
+    open: false,
+  }
+
+  messageHandler = (event: any) => {
+    console.log(event)
+    if (event.origin === 'null') {
+      return
+    }
 
-  loadScript(src: string, id: string): void {
-      const script = document.createElement('script')
-      script.src = src
-      script.id = id
-      document.body?.appendChild(script)
+    const eventType = event.data;
+    if (eventType === 'close') {
+      this.setState({ open: false })
+    }
   }
 
   componentDidMount() {
-      this.loadScript('https://static.zdassets.com/ekr/snippet.js?key=68b95d72-6354-4343-8a64-427979a6f5d6', 'ze-snippet');
-
-      const interval = setInterval(()=>{
-        if (typeof window.zE !== 'undefined' && typeof window.zE.hide === 'function') {
-          window.zE.hide()
-          if (interval) {
-            clearInterval(interval)
-          }
-        }
-      }, 500);
+    window.addEventListener('message', this.messageHandler, false);
   }
 
-  openChatBoxSupport(){
-    if (typeof window.zE !== 'undefined') {
-        window.zE.activate()
-      }
+  componentWillUnmount() {
+    window.removeEventListener('message', this.messageHandler);
   }
 
   render(): Node {
-      return (
+    const { open } = this.state;
+    return (
+      <Box
+        sx={{
+          position: 'absolute',
+          bottom: '24px',
+          right: '30px',
+          zIndex: '9999',
+        }}
+      >
+        {open === false &&
         <IconButton
           sx={{
-            position: 'absolute',
-            bottom: '24px',
-            right: '30px',
-            zIndex: '9999', // Support button should be on top of every component including models!
             padding: '3px',
           }}
-          onClick={this.openChatBoxSupport.bind(this)}
+          onClick={() => this.setState({ open: true })}
         >
           <SupportIcon />
-        </IconButton>
-      )
+        </IconButton>}
+        <iframe
+          style={{ marginRight: '-20px', marginBottom: '-30px' }}
+          width={open ? '375px' : '0px'}
+          height={open ? '560px': '0px'}
+          src="https://emurgo.github.io/yoroi-support/?extensionId=lenadjbonljinhejgofjblhkkopjmmfn&source=chrome"
+          title='Zendesk'
+        />
+      </Box>
+    )
   }
 }