diff --git a/src/components/Leaderboard.js b/src/components/Leaderboard.js index d9dec185..31920b72 100644 --- 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 && ( { 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%"