w3up-launch announcement banner shows on homepage when configured

web3-storage · Nov 8, 2023 · de2763e · de2763e
1 parent 8d0f5d9
commit de2763e
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 38 deletions.
diff --git a/packages/website/components/page-banner/page-banner-portal.js b/packages/website/components/page-banner/page-banner-portal.js
@@ -4,38 +4,37 @@
  */
 
 import clsx from 'clsx';
-import * as React from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 
 export const defaultPortalElementId = 'page-banner-portal';
-export const defaultContentsClassName = 'contents';
+export const defaultContentsClassName = 'page-banner-contents';
 export const defaultPortalQuerySelector = `#${defaultPortalElementId} .${defaultContentsClassName}`;
 
 /**
  * wrap children in stiles like a .message-banner (see ../messagebanner/messagebanner.scss)
  */
 export function MessageBannerStyled({ children }) {
   return (
-    <>
-      <div className={clsx('message-banner-wrapper')}>
-        <div className="message-banner-container" style={{ padding: '0.5em' }}>
-          <div className={clsx('message-banner-content', 'message-banner-underline-links', 'mb-reduced-fontsize')}>
-            {children}
-          </div>
+    <div className={clsx('message-banner-wrapper')}>
+      <div className="message-banner-container" style={{ padding: '0.5em' }}>
+        <div className={clsx('message-banner-content', 'message-banner-underline-links', 'mb-reduced-fontsize')}>
+          {children}
         </div>
       </div>
-    </>
+    </div>
   );
 }
 
 /**
  * component for an element across the top of page that can host banner messages on a per-page basis.
- * Other components will use React.createPortal() to render into this even though it isn't a child of
+ * Other components will use ReactDOM.createPortal() to render into this even though it isn't a child of
  * that component (since it needs to be atop the page).
  */
 export const PageBannerPortal = ({ id, contentsClassName = defaultContentsClassName }) => {
   return (
     <div id={id}>
-      <span className={contentsClassName}></span>
+      <div className={contentsClassName}></div>
     </div>
   );
 };
@@ -44,23 +43,17 @@ export const PageBannerPortal = ({ id, contentsClassName = defaultContentsClassN
  * render children into a PageBannerPortal at the top of the page
  */
 export const PageBanner = ({ children }) => {
-  const pageBannerPortal = document.querySelector(defaultPortalQuerySelector);
-  console.log('in PageBanner component', {
-    pageBannerPortal,
-    children,
-    defaultPortalQuerySelector,
-    found: document.querySelector(defaultPortalQuerySelector),
-  });
+  const pageBannerPortal = React.useMemo(() => {
+    if (!globalThis?.document) return;
+    return document.querySelector(defaultPortalQuerySelector);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [globalThis?.document]);
+  // const pageBannerPortal = globalThis?.document?.querySelector(defaultPortalQuerySelector);
   return (
     <>
       {pageBannerPortal &&
         children &&
-        React.createPortal(
-          <>
-            <MessageBannerStyled>{children}</MessageBannerStyled>
-          </>,
-          pageBannerPortal
-        )}
+        ReactDOM.createPortal(<MessageBannerStyled>{children}</MessageBannerStyled>, pageBannerPortal)}
     </>
   );
 };
diff --git a/packages/website/components/w3up-launch.js b/packages/website/components/w3up-launch.js
@@ -39,7 +39,6 @@ export const shouldShowSunsetAnnouncement = (at = new Date(), announcementStartD
  * copy for banner message across top of some web3.storage pages when w3up ships
  */
 export const W3upMigrationRecommendationCopy = () => {
-  console.log('rendering W3upMigrationRecommendationCopy', w3upLaunchContextDefaults);
   const createNewAccountHref = 'https://console.web3.storage/?intent=create-account';
   const learnWhatsNewHref = 'https://console.web3.storage/?intent=learn-new-web3storage-experience';
   const sunsetDateFormatter = new Intl.DateTimeFormat(undefined, { dateStyle: 'long' });

diff --git a/packages/website/pages/_app.js b/packages/website/pages/_app.js
@@ -42,17 +42,21 @@ const App = ({ Component, pageProps }) => {
             referrerPolicy="no-referrer-when-downgrade"
           />
         </noscript>
-        <div id="master-container" className={clsx(pageClass)}>
+
+        <div
+          style={{
+            // needed so this banner is above .corkscrew-background
+            zIndex: 1,
+            // must be positioned for zIndex to take effect
+            position: 'relative',
+          }}
+        >
+          <PageBannerPortal id={defaultPortalElementId}></PageBannerPortal>
+        </div>
+
+        <div id="master-container" className={clsx(pageClass)} style={{ zIndex: 0 }}>
           {productApp && <div className="corkscrew-background"></div>}
-          {/* use react-dom createPortal to render page-specific banners into this */}
-          <div
-            style={{
-              // needed so this banner is above .corkscrew-background
-              zIndex: 1,
-            }}
-          >
-            <PageBannerPortal id={defaultPortalElementId} />
-          </div>
+
           <MessageBanner />
           <Navigation isProductApp={productApp} breadcrumbs={pageProps.breadcrumbs} />
           <Component {...pageProps} />

diff --git a/packages/website/pages/account/index.js b/packages/website/pages/account/index.js
@@ -10,6 +10,8 @@ import FileUploader from '../../components/account/fileUploader/fileUploader';
 import GradientBackground from '../../components/gradientbackground/gradientbackground.js';
 import AppData from '../../content/pages/app/account.json';
 import GeneralPageData from '../../content/pages/general.json';
+import { W3upMigrationRecommendationCopy, shouldShowSunsetAnnouncement } from '../../components/w3up-launch.js';
+import * as PageBannerPortal from '../../components/page-banner/page-banner-portal.js';
 
 export const CTACardTypes = {
   API_TOKENS: 'API_TOKENS',
@@ -79,6 +81,11 @@ const Account = () => {
 
   return (
     <>
+      {shouldShowSunsetAnnouncement() && (
+        <PageBannerPortal.PageBanner>
+          <W3upMigrationRecommendationCopy />
+        </PageBannerPortal.PageBanner>
+      )}
       <div className="page-container account-container">
         <h1 className="table-heading">{dashboard.heading}</h1>
         <div className="account-content">

diff --git a/packages/website/pages/index.js b/packages/website/pages/index.js
@@ -1,9 +1,10 @@
 import { useEffect } from 'react';
 
 import IndexPageData from '../content/pages/index.json';
-import Scroll2Top from '../components/scroll2top/scroll2top.js';
 import BlockBuilder from '../components/blockbuilder/blockbuilder.js';
 import { initFloaterAnimations } from '../lib/floater-animations.js';
+import { W3upMigrationRecommendationCopy, shouldShowSunsetAnnouncement } from '../components/w3up-launch.js';
+import * as PageBannerPortal from '../components/page-banner/page-banner-portal.js';
 
 export default function Home() {
   const sections = IndexPageData.page_content;
@@ -23,13 +24,17 @@ export default function Home() {
 
   return (
     <>
+      {shouldShowSunsetAnnouncement() && (
+        <PageBannerPortal.PageBanner>
+          <W3upMigrationRecommendationCopy />
+        </PageBannerPortal.PageBanner>
+      )}
+
       <main className="page page-index">
         {sections.map((section, index) => (
           <BlockBuilder id={`section_${index + 1}`} key={`section_${index + 1}`} subsections={section} />
         ))}
       </main>
-
-      <Scroll2Top />
     </>
   );
 }