show global modal for posts (#2022)

* show global modal for posts * remove extra line * readme bump --------- Co-authored-by: Robinnnnn <[email protected]>
gallery-so · Oct 18, 2023 · 16ceb5c · 16ceb5c
1 parent a204c08
commit 16ceb5c
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 130 deletions.
diff --git a/README.md b/README.md
@@ -74,3 +74,5 @@ Hit up a member of the core team!
 - `moon run web:typecheck` for checking type validity
 - `moon run web:synpress-run` to run e2e tests
 - `moon run web:synpress-open` to open cypress
+- `yarn fetch-schema` to pull graphql schema from production
+- `yarn fetch-schema-dev` to pull graphql schema from development
diff --git a/apps/web/pages/features/posts.tsx b/apps/web/pages/features/posts.tsx
@@ -11,43 +11,44 @@ export default function PostsFeatureRoute({ pageContent }: Props) {
   return <GalleryRoute element={<PostsFeaturePage pageContent={pageContent} />} navbar={false} />;
 }
 
-export const getServerSideProps = async () => {
-  const query = `
-  *[ _type == "featurePage" && id == "posts" ]{
-    ...,
-    "featureHighlights": featureHighlights[]->{
-      heading,
-      orientation,
-      body,
-      externalLink,
-      media{
-        mediaType,
-        image{
-          asset->{
-            url
-          },
-          alt
+export const featurePostsPageContentQuery = `
+*[ _type == "featurePage" && id == "posts" ]{
+  ...,
+  "featureHighlights": featureHighlights[]->{
+    heading,
+    orientation,
+    body,
+    externalLink,
+    media{
+      mediaType,
+      image{
+        asset->{
+          url
         },
-        video{
-          asset->{
-            url
-          }
+        alt
+      },
+      video{
+        asset->{
+          url
         }
       }
-    },
-    "faqModule": faqModule->{
-      title,
-      faqs
-    },
-    "splashImage": {
-      "asset": splashImage.asset->{
-        url
-      },
-      alt
     }
-  } | order(date desc)
+  },
+  "faqModule": faqModule->{
+    title,
+    faqs
+  },
+  "splashImage": {
+    "asset": splashImage.asset->{
+      url
+    },
+    alt
+  }
+} | order(date desc)
 `;
-  const content = await fetchSanityContent(query);
+
+export const getServerSideProps = async () => {
+  const content = await fetchSanityContent(featurePostsPageContentQuery);
 
   return {
     props: {

diff --git a/.../web/src/contexts/globalLayout/GlobalAnnouncementPopover/useGlobalAnnouncementPopover.tsx b/.../web/src/contexts/globalLayout/GlobalAnnouncementPopover/useGlobalAnnouncementPopover.tsx
@@ -1,12 +1,17 @@
 import { useRouter } from 'next/router';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFragment } from 'react-relay';
 import { graphql } from 'relay-runtime';
 
 import { useModalActions } from '~/contexts/modal/ModalContext';
 import { useGlobalAnnouncementPopoverFragment$key } from '~/generated/useGlobalAnnouncementPopoverFragment.graphql';
+import { featurePostsPageContentQuery } from '~/pages/features/posts';
+import { PostsFeaturePageContent } from '~/scenes/ContentPages/PostsFeaturePage';
+import useExperience from '~/utils/graphql/experiences/useExperience';
+import { fetchSanityContent } from '~/utils/sanity';
 
-import GlobalAnnouncementPopover from './GlobalAnnouncementPopover';
+// Keeping for future use
+// import GlobalAnnouncementPopover from './GlobalAnnouncementPopover';
 
 type Props = {
   queryRef: useGlobalAnnouncementPopoverFragment$key;
@@ -36,8 +41,8 @@ export default function useGlobalAnnouncementPopover({
             }
           }
         }
-        ...GlobalAnnouncementPopoverFragment
-        # ...useExperienceFragment
+        # ...GlobalAnnouncementPopoverFragment
+        ...useExperienceFragment
       }
     `,
     queryRef
@@ -48,14 +53,14 @@ export default function useGlobalAnnouncementPopover({
   const { asPath, query: urlQuery } = useRouter();
 
   // NOTE: next time we use global announcements, we'll need to set a new flag in the schema
-  const isGlobalAnnouncementExperienced = true;
-  // const [isGlobalAnnouncementExperienced, setGlobalAnnouncementExperienced] = useExperience({
-  //   type: 'YourGlobalAnnouncementFlagHere',
-  //   queryRef: query,
-  // })
-  // const handleDismissGlobalAnnouncement = useCallback(async () => {
-  //   return await setGlobalAnnouncementExperienced()
-  // }, [setGlobalAnnouncementExperienced])
+  // const isGlobalAnnouncementExperienced = true;
+  const [isGlobalAnnouncementExperienced, setGlobalAnnouncementExperienced] = useExperience({
+    type: 'PostsBetaAnnouncement',
+    queryRef: query,
+  });
+  const handleDismissGlobalAnnouncement = useCallback(async () => {
+    return await setGlobalAnnouncementExperienced();
+  }, [setGlobalAnnouncementExperienced]);
 
   // tracks dismissal on session, not persisted across refreshes
   const [dismissedOnSession, setDismissedOnSession] = useState(false);
@@ -94,27 +99,26 @@ export default function useGlobalAnnouncementPopover({
       if (dismissVariant === 'session' && dismissedOnSession) return;
       if (dismissVariant === 'global' && isGlobalAnnouncementExperienced) return;
 
-      // TEMPORARY: only display the white rhino launch popover on the homepage
-      if (asPath !== '/') {
-        return;
-      }
-
       if (authRequired && !isAuthenticated) return;
 
       if (shouldHidePopoverOnCurrentPath) return;
 
       // prevent font flicker on popover load
-      await handlePreloadFonts();
+      // await handlePreloadFonts();
+
+      const pageContent = await fetchSanityContent(featurePostsPageContentQuery);
+
+      if (!pageContent || !pageContent[0]) return;
 
       setTimeout(() => {
         showModal({
           id: 'global-announcement-popover',
-          content: <GlobalAnnouncementPopover queryRef={query} />,
+          content: <PostsFeaturePageContent pageContent={pageContent[0]} />,
           isFullPage: true,
           headerVariant: 'thicc',
         });
         setDismissedOnSession(true);
-        // handleDismissGlobalAnnouncement(true);
+        handleDismissGlobalAnnouncement();
       }, popoverDelayMs);
     }
 
@@ -130,6 +134,7 @@ export default function useGlobalAnnouncementPopover({
     dismissVariant,
     dismissedOnSession,
     shouldHidePopoverOnCurrentPath,
+    handleDismissGlobalAnnouncement,
   ]);
 
   useEffect(
@@ -144,26 +149,26 @@ export default function useGlobalAnnouncementPopover({
   );
 }
 
-async function handlePreloadFonts() {
-  const fontLight = new FontFace(
-    'GT Alpina Condensed',
-    'url(/fonts/GT-Alpina-Condensed-Light.otf)'
-  );
-  const fontLightItalic = new FontFace(
-    'GT Alpina Condensed',
-    'url(/fonts/GT-Alpina-Condensed-Light-Italic.otf)'
-  );
-  const fontLight2 = new FontFace(
-    'GT Alpina Condensed',
-    'url(/fonts/GT-Alpina-Condensed-Light.ttf)'
-  );
-  const fontLightItalic2 = new FontFace(
-    'GT Alpina Condensed',
-    'url(/fonts/GT-Alpina-Condensed-Light-Italic.ttf)'
-  );
-
-  await fontLight.load();
-  await fontLightItalic.load();
-  await fontLight2.load();
-  await fontLightItalic2.load();
-}
+// async function handlePreloadFonts() {
+//   const fontLight = new FontFace(
+//     'GT Alpina Condensed',
+//     'url(/fonts/GT-Alpina-Condensed-Light.otf)'
+//   );
+//   const fontLightItalic = new FontFace(
+//     'GT Alpina Condensed',
+//     'url(/fonts/GT-Alpina-Condensed-Light-Italic.otf)'
+//   );
+//   const fontLight2 = new FontFace(
+//     'GT Alpina Condensed',
+//     'url(/fonts/GT-Alpina-Condensed-Light.ttf)'
+//   );
+//   const fontLightItalic2 = new FontFace(
+//     'GT Alpina Condensed',
+//     'url(/fonts/GT-Alpina-Condensed-Light-Italic.ttf)'
+//   );
+
+//   await fontLight.load();
+//   await fontLightItalic.load();
+//   await fontLight2.load();
+//   await fontLightItalic2.load();
+// }
diff --git a/apps/web/src/contexts/globalLayout/GlobalLayoutContext.tsx b/apps/web/src/contexts/globalLayout/GlobalLayoutContext.tsx
@@ -31,8 +31,8 @@ import { PreloadQueryArgs } from '~/types/PageComponentPreloadQuery';
 import isTouchscreenDevice from '~/utils/isTouchscreenDevice';
 
 import { FEATURED_COLLECTION_IDS } from './GlobalAnnouncementPopover/GlobalAnnouncementPopover';
+import useGlobalAnnouncementPopover from './GlobalAnnouncementPopover/useGlobalAnnouncementPopover';
 import MobileBetaUpsell from './GlobalBanner/MobileBetaUpsell';
-// import useGlobalAnnouncementPopover from './GlobalAnnouncementPopover/useGlobalAnnouncementPopover';
 import GlobalSidebar, { GLOBAL_SIDEBAR_DESKTOP_WIDTH } from './GlobalSidebar/GlobalSidebar';
 import {
   FADE_TRANSITION_TIME_MS,
@@ -84,7 +84,7 @@ const GlobalLayoutContextQueryNode = graphql`
   query GlobalLayoutContextQuery {
     ...GlobalLayoutContextNavbarFragment
     # Keeping this around for the next time we want to use it
-    # ...useGlobalAnnouncementPopoverFragment
+    ...useGlobalAnnouncementPopoverFragment
   }
 `;
 
@@ -233,7 +233,7 @@ const GlobalLayoutContextProvider = memo(({ children, preloadedQuery }: Props) =
   );
 
   // Keeping this around for the next time we want to use it
-  // useGlobalAnnouncementPopover({ queryRef: query, authRequired: false, dismissVariant: 'global' });
+  useGlobalAnnouncementPopover({ queryRef: query, authRequired: false, dismissVariant: 'global' });
 
   const locationKey = useStabilizedRouteTransitionKey();
 

diff --git a/apps/web/src/contexts/modal/AnimatedModal.tsx b/apps/web/src/contexts/modal/AnimatedModal.tsx
@@ -8,6 +8,7 @@ import transitions, {
   ANIMATED_COMPONENT_TRANSITION_MS,
   ANIMATED_COMPONENT_TRANSLATION_PIXELS_LARGE,
 } from '~/components/core/transitions';
+import ErrorBoundary from '~/contexts/boundary/ErrorBoundary';
 import { useIsMobileOrMobileLargeWindowWidth } from '~/hooks/useWindowSize';
 import { DecoratedCloseIcon } from '~/icons/CloseIcon';
 import colors from '~/shared/theme/colors';
@@ -106,7 +107,9 @@ function AnimatedModal({
                 )}
               </StyledModalActions>
             </StyledHeader>
-            <StyledContent padding={padding}>{content}</StyledContent>
+            <ErrorBoundary>
+              <StyledContent padding={padding}>{content}</StyledContent>
+            </ErrorBoundary>
           </StyledContainer>
         </_ToggleTranslate>
       </StyledModal>

diff --git a/apps/web/src/scenes/ContentPages/PostsFeaturePage.tsx b/apps/web/src/scenes/ContentPages/PostsFeaturePage.tsx
@@ -24,58 +24,64 @@ export default function PostsFeaturePage({ pageContent }: Props) {
       <Head>
         <title>Gallery | Posts</title>
       </Head>
-      <StyledPage gap={96}>
-        <StyledContent align="center" gap={96}>
-          <StyledIntro gap={48} align="center">
-            <VStack gap={32}>
-              <VStack>
-                <StyledHeading>Introducing</StyledHeading>
-                <StyledHeading>
-                  <strong>Posts</strong>
-                </StyledHeading>
-              </VStack>
-              <StyledSubheading>{pageContent.introText}</StyledSubheading>
+      <PostsFeaturePageContent pageContent={pageContent} />
+    </>
+  );
+}
+
+export function PostsFeaturePageContent({ pageContent }: Props) {
+  return (
+    <StyledPage gap={96}>
+      <StyledContent align="center" gap={96}>
+        <StyledIntro gap={48} align="center">
+          <VStack gap={32}>
+            <VStack>
+              <StyledHeading>Introducing</StyledHeading>
+              <StyledHeading>
+                <strong>Posts</strong>
+              </StyledHeading>
             </VStack>
-            <GalleryLink
-              to={{ pathname: '/auth' }}
-              eventElementId="Posts Feature Page: Get Started"
-              eventName="Posts Feature Page: Get Started Click"
-              eventContext={contexts.Posts}
-              eventFlow={flows['Posts Beta Announcement']}
-            >
-              <GetStartedButton eventElementId={null} eventName={null} eventContext={null}>
-                <TitleDiatypeL color={colors.white}>Get Started</TitleDiatypeL>
-              </GetStartedButton>
-            </GalleryLink>
-          </StyledIntro>
-          <StyledSplashImage src={pageContent.splashImage.asset.url} />
-          <VStack gap={96}>
-            {pageContent.featureHighlights.map((highlight) => (
-              <FeatureHighlight key={highlight.heading} content={highlight} />
-            ))}
-          </VStack>
-          <VStack align="center" gap={32}>
-            {pageContent.externalLink && (
-              <StyledSubheading>
-                <Markdown text={pageContent.externalLink} eventContext={contexts.Posts} />
-              </StyledSubheading>
-            )}
-            <GalleryLink
-              to={{ pathname: '/auth' }}
-              eventElementId="Posts Feature Page: Get Started"
-              eventName="Posts Feature Page: Get Started Click"
-              eventContext={contexts.Posts}
-              eventFlow={flows['Posts Beta Announcement']}
-            >
-              <GetStartedButton eventElementId={null} eventName={null} eventContext={null}>
-                <TitleDiatypeL color={colors.white}>Get Started</TitleDiatypeL>
-              </GetStartedButton>
-            </GalleryLink>
+            <StyledSubheading>{pageContent.introText}</StyledSubheading>
           </VStack>
-        </StyledContent>
-        <Faq content={pageContent.faqModule} />
-      </StyledPage>
-    </>
+          <GalleryLink
+            to={{ pathname: '/auth' }}
+            eventElementId="Posts Feature Page: Get Started"
+            eventName="Posts Feature Page: Get Started Click"
+            eventContext={contexts.Posts}
+            eventFlow={flows['Posts Beta Announcement']}
+          >
+            <GetStartedButton eventElementId={null} eventName={null} eventContext={null}>
+              <TitleDiatypeL color={colors.white}>Get Started</TitleDiatypeL>
+            </GetStartedButton>
+          </GalleryLink>
+        </StyledIntro>
+        <StyledSplashImage src={pageContent.splashImage?.asset.url} />
+        <VStack gap={96}>
+          {pageContent.featureHighlights?.map((highlight) => (
+            <FeatureHighlight key={highlight.heading} content={highlight} />
+          ))}
+        </VStack>
+        <VStack align="center" gap={32}>
+          {pageContent.externalLink && (
+            <StyledSubheading>
+              <Markdown text={pageContent.externalLink} eventContext={contexts.Posts} />
+            </StyledSubheading>
+          )}
+          <GalleryLink
+            to={{ pathname: '/auth' }}
+            eventElementId="Posts Feature Page: Get Started"
+            eventName="Posts Feature Page: Get Started Click"
+            eventContext={contexts.Posts}
+            eventFlow={flows['Posts Beta Announcement']}
+          >
+            <GetStartedButton eventElementId={null} eventName={null} eventContext={null}>
+              <TitleDiatypeL color={colors.white}>Get Started</TitleDiatypeL>
+            </GetStartedButton>
+          </GalleryLink>
+        </VStack>
+      </StyledContent>
+      <Faq content={pageContent.faqModule} />
+    </StyledPage>
   );
 }