Got dynamic notifcations working for slot: upper-right

src/components/notification/Notification.js

@@ -0,0 +1,90 @@
+'use client'
+
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+
+const isBrowser = typeof window !== 'undefined'
+
+const sParams = {
+  NotificationOverride: null,
+}
+
+if (isBrowser) {
+  // eslint-disable-next-line no-undef
+  const p = new Proxy(new URLSearchParams(window.location.search), {
+    get: (searchParams, prop) => searchParams.get(prop),
+  })
+
+  sParams.NotificationOverride = p['notification-override'] || ''
+}
+
+// Example Overrides: ?notification-override=leaderboard-change-flat
+// Example Overrides: ?notification-override=leaderboard-change-down
+// Example Overrides: ?notification-override=leaderboard-change-up
+const Notification = ({ slot, user }) => {
+  const [show, setShow] = useState(true)
+  const [height, setHeight] = useState(0)
+
+  // User is not loaded yet.
+  if (!user) {
+    return null
+  }
+
+  if (typeof window === 'undefined') {
+    return null
+  }
+
+  // Function to handle received messages
+  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
+
+    // Do we want to show the notification?
+    if (event.data.show) {
+      setShow(true)
+      setHeight(event.data.height)
+    } else {
+      setShow(false)
+      setHeight(0)
+    }
+
+    // Log or use the received message
+    // console.log('Received message from child:', event.data, event.origin)
+  }
+
+  // Set up the event listener
+  // eslint-disable-next-line no-undef
+  window.addEventListener('message', receiveMessage, false)
+
+  return (
+    <>
+      {show && (
+        <iframe
+          src={`${process.env.NEXT_PUBLIC_API_ENDPOINT}/newtab/notifications?user_id=${user.userId}&slot=${slot}&override=${sParams.NotificationOverride}`}
+          title={`notification-${slot}`}
+          style={{ marginTop: '10px', marginBottom: '10px' }}
+          width="100%"
+          height={height}
+          frameBorder="0"
+        />
+      )}
+    </>
+  )
+}
+
+Notification.displayName = 'NotificationComponent'
+
+Notification.propTypes = {
+  slot: PropTypes.string.isRequired,
+
+  user: PropTypes.shape({
+    userId: PropTypes.string,
+  }).isRequired,
+}
+
+Notification.defaultProps = {}
+
+export default Notification

src/pages/index.js

@@ -97,8 +97,9 @@ import SearchbarSFACSellNotification from 'src/components/SearchbarSFACSellNotif
 import GroupImpactContainer from 'src/components/groupImpactComponents/GroupImpactContainer'
 import ShopFullPage from 'src/components/promos/ShopFullPage'
 import SearchFullPage from 'src/components/promos/SearchFullPage'
+import Notification from 'src/components/notification/Notification'
 
-// import Notification from 'src/components/Notification'
+// import NotificationOld from 'src/components/Notification'
 
 import AddShortcutPageContainer from 'src/components/AddShortcutPageContainer'
 import FrontpageShortcutListContainer from 'src/components/FrontpageShortcutListContainer'
@@ -975,6 +976,41 @@ const Index = ({ data: fallbackData, userAgent }) => {
              * that appear via the UserImpact component.
              */}
             <div className={classes.notificationsContainer}>
+              <Notification slot="top-right" user={user} />
+
+              {/* <NotificationOld
+                className={classes.notification}
+                text={
+                  <div className={classes.notificationText}>
+                    <Typography
+                      variant="h2"
+                      gutterBottom
+                      className={classes.notificationTitle}
+                    >
+                      Time for the 2023 Survey!
+                    </Typography>
+
+                    <Typography variant="body1" gutterBottom>
+                      Help decide what is next for Tab for a Cause by providing
+                      your feedback. Thanks for Tabbing!
+                    </Typography>
+                    <br />
+                    <Typography variant="body1" gutterBottom>
+                      Thanks for your help!
+                    </Typography>
+                  </div>
+                }
+                buttons={
+                  <div className={classes.notificationButtonsWrapper}>
+                    <Link
+                      to="https://docs.google.com/forms/d/e/1FAIpQLScnsvTq8s3oSOzD9jaCCYcsa-LbNPQyIZDU9lSVSJWIMPeNWg/viewform"
+                      target="_blank"
+                    ></Link>
+                  </div>
+                }
+                includeClose
+              /> */}
+
               {/* surveyNotif ? (
               <Notification
                 className={classes.notification}