Spicer/opt in video (#583)

* Luanched optin video * Changes to allow opt in video to load on click. --------- Co-authored-by: Spicer Matthews <[email protected]>
gladly-team · Aug 20, 2024 · 2500a37 · 2500a37
1 parent 70234af
commit 2500a37
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git a/src/components/Leaderboard.js b/src/components/Leaderboard.js
@@ -21,6 +21,39 @@ const Leaderboard = ({ user, openWidgetFunc, onCloseFunc }) => {
     gtag('event', 'leaderboard_close')
   }
 
+  //
+  // Function to handle received messages from the iframe
+  //
+  function receiveMessage(event) {
+    // TODO(spicer): Add origin check for added security
+    // if (event.origin !== 'http://127.0.0.1:9000') return
+
+    // Check if the message is for us. If not, ignore it.
+    if (typeof event.data.show === 'undefined') return
+
+    // Check if the message is for us. If not, ignore it.
+    if (event.data.slot !== 'leaderboard') {
+      return
+    }
+
+    // If the message from iframe to close.
+    if (!event.data.show) {
+      onClose()
+    }
+  }
+
+  // Set up the event listener
+  if (typeof window !== 'undefined') {
+    // eslint-disable-next-line no-undef
+    window.addEventListener(
+      'message',
+      (event) => {
+        receiveMessage(event)
+      },
+      false
+    )
+  }
+
   // If you need to call the function automatically when the parent says so:
   useEffect(() => {
     if (openWidgetFunc) {
@@ -36,7 +69,7 @@ const Leaderboard = ({ user, openWidgetFunc, onCloseFunc }) => {
     <>
       {iframeUrl && (
         <Modal
-          id="momentum-modal"
+          id="leaderboard-modal"
           open={openWidget}
           style={{
             top: 10,

diff --git a/src/components/optinvideo/OptInVideo.js b/src/components/optinvideo/OptInVideo.js
@@ -84,11 +84,11 @@ const OptInVideo = ({ user }) => {
         open={showModal}
         style={{
           height: 650,
+          maxWidth: 1000,
           marginTop: 'auto',
           marginBottom: 'auto',
           marginLeft: 'auto',
           marginRight: 'auto',
-          maxWidth: 1000,
           position: 'absolute',
           backgroundColor: '#fff',
           zIndex: 100000000,
@@ -118,8 +118,6 @@ const OptInVideo = ({ user }) => {
               src={`${process.env.NEXT_PUBLIC_API_ENDPOINT}/v5/iframe/opt-in-video?user_id=${user.userId}&override=${sParams.NotificationOverride}`}
               title="optin-video-modal-iframe"
               style={{
-                marginTop: '10px',
-                marginBottom: '10px',
                 border: 'none',
               }}
               width="100%"