clean up PageBannerPortal and how /account/payment uses it

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

Hide file tree

Showing 4 changed files with 83 additions and 34 deletions.
diff --git a/packages/website/components/messagebanner/messagebanner.scss b/packages/website/components/messagebanner/messagebanner.scss
@@ -75,6 +75,10 @@
   }
 }
 
+.message-banner-underline-links *:link {
+  text-decoration: underline;
+}
+
 .message-banner-close-button {
   position: absolute;
   display: flex;

diff --git a/packages/website/components/page-banner/page-banner-portal.js b/packages/website/components/page-banner/page-banner-portal.js
@@ -4,22 +4,22 @@
  */
 
 import clsx from 'clsx';
+import * as React from 'react-dom';
 
 export const defaultPortalElementId = 'page-banner-portal';
 export const defaultContentsClassName = 'contents';
+export const defaultPortalQuerySelector = `#${defaultPortalElementId} .${defaultContentsClassName}`;
 
 /**
  * wrap children in stiles like a .message-banner (see ../messagebanner/messagebanner.scss)
  */
-function MessageBannerStyled({ children }) {
+export function MessageBannerStyled({ children }) {
   return (
     <>
       <div className={clsx('message-banner-wrapper')}>
-        <div className="grid-noGutter">
-          <div className="col">
-            <div className="message-banner-container">
-              <div className={clsx('message-banner-content', 'mb-reduced-fontsize')}>{children}</div>
-            </div>
+        <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>
@@ -35,9 +35,32 @@ function MessageBannerStyled({ children }) {
 export const PageBannerPortal = ({ id, contentsClassName = defaultContentsClassName }) => {
   return (
     <div id={id}>
-      <MessageBannerStyled>
-        <span className={contentsClassName}></span>
-      </MessageBannerStyled>
+      <span className={contentsClassName}></span>
     </div>
   );
 };
+
+/**
+ * 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),
+  });
+  return (
+    <>
+      {pageBannerPortal &&
+        children &&
+        React.createPortal(
+          <>
+            <MessageBannerStyled>{children}</MessageBannerStyled>
+          </>,
+          pageBannerPortal
+        )}
+    </>
+  );
+};
diff --git a/packages/website/components/w3up-launch.js b/packages/website/components/w3up-launch.js
@@ -1,26 +1,55 @@
 import * as React from 'react';
 
+const sunsetStartEnv = process.env.NEXT_PUBLIC_W3UP_LAUNCH_SUNSET_START ?? '2023-01-09T00:00:00Z';
+const sunsetStartDate = new Date(Date.parse(sunsetStartEnv));
+
+/**
+ * If this isn't set, no announcements will appear
+ */
+const sunsetAnnouncementStartEnv = process.env.NEXT_PUBLIC_W3UP_LAUNCH_SUNSET_ANNOUNCEMENT_START;
+
+/**
+ * after this datetime, show announcements that web3.storage is sunset
+ * and end-users should switch to w3up/console.web3.storage
+ */
+const sunsetAnnouncementStartDate = sunsetAnnouncementStartEnv
+  ? new Date(Date.parse(sunsetAnnouncementStartEnv))
+  : undefined;
+
+export const w3upLaunchContextDefaults = {
+  stages: {
+    sunsetAnnouncement: {
+      start: sunsetAnnouncementStartDate,
+    },
+  },
+};
+
+/**
+ * Return whether sunset announcements related to w3up-launch should be shown.
+ * An announcement date must be explicitly configured via env var, and now must be after that date.
+ * @param {Date} at - time at which to return whether to show the announcement
+ * @param {Date|undefined} [announcementStartDate] - when to begin showing announcements.
+ * If not provided, always return false.
+ */
+export const shouldShowSunsetAnnouncement = (at = new Date(), announcementStartDate = sunsetAnnouncementStartDate) => {
+  return announcementStartDate && at > announcementStartDate;
+};
+
 /**
  * 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' });
   return (
     <>
-      This web3.storage product will sunset on January 9, 2024. We recommend migrating your usage of web3.storage to the
-      new web3.storage. <a href={createNewAccountHref}>Click here to create a new account</a> and&nbsp;
+      This web3.storage product will sunset on {sunsetDateFormatter.format(sunsetStartDate)}. We recommend migrating
+      your usage of web3.storage to the new web3.storage.
+      <br />
+      <a href={createNewAccountHref}>Click here to create a new account</a> and&nbsp;
       <a href={learnWhatsNewHref}>here to read about what’s awesome</a> about the new web3.storage experience.
     </>
   );
 };
-
-const prelaunchStartEnv = process.env.NEXT_PUBLIC_W3UP_PRELAUNCH_START;
-
-export const w3upLaunchContextDefaults = {
-  stages: {
-    prelaunch: {
-      start: prelaunchStartEnv ? new Date(Date.parse(prelaunchStartEnv)) : undefined,
-    },
-  },
-};
diff --git a/packages/website/pages/account/payment.js b/packages/website/pages/account/payment.js
@@ -5,7 +5,6 @@
 import { parse as queryParse } from 'querystring';
 
 import { useState, useEffect, useMemo } from 'react';
-import { createPortal } from 'react-dom';
 import { Elements, ElementsConsumer } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
 
@@ -19,7 +18,7 @@ import { plans, freePlan } from '../../components/contexts/plansContext';
 import { userBillingSettings } from '../../lib/api';
 import GeneralPageData from '../../content/pages/general.json';
 import constants from '../../lib/constants.js';
-import { W3upMigrationRecommendationCopy } from '../../components/w3up-launch.js';
+import { W3upMigrationRecommendationCopy, shouldShowSunsetAnnouncement } from '../../components/w3up-launch.js';
 import * as PageBannerPortal from '../../components/page-banner/page-banner-portal.js';
 
 /**
@@ -126,19 +125,13 @@ const PaymentSettingsPage = props => {
   const savedPaymentMethod = useMemo(() => {
     return paymentSettings?.paymentMethod;
   }, [paymentSettings]);
-  const pageBannerPortal = document.querySelector(
-    `#${PageBannerPortal.defaultPortalElementId} .${PageBannerPortal.defaultContentsClassName}`
-  );
   return (
     <>
-      {pageBannerPortal &&
-        createPortal(
-          <>
-            <W3upMigrationRecommendationCopy />
-          </>,
-          pageBannerPortal
-        )}
-
+      {shouldShowSunsetAnnouncement() && (
+        <PageBannerPortal.PageBanner>
+          <W3upMigrationRecommendationCopy />
+        </PageBannerPortal.PageBanner>
+      )}
       <>
         <div className="page-container billing-container">
           <div className="">