diff --git a/README.md b/README.md index e52cc36eb8..f4ac134be3 100644 --- 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 index 30af25b2c3..0f08281dde 100644 --- 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 } 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/apps/web/src/contexts/globalLayout/GlobalAnnouncementPopover/useGlobalAnnouncementPopover.tsx b/apps/web/src/contexts/globalLayout/GlobalAnnouncementPopover/useGlobalAnnouncementPopover.tsx index 73bd858232..60cdfc6119 100644 --- a/apps/web/src/contexts/globalLayout/GlobalAnnouncementPopover/useGlobalAnnouncementPopover.tsx +++ b/apps/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: , + content: , 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 index ce43d19cbe..81d237ff26 100644 --- 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 index 93dde43ef6..d62b0fea6b 100644 --- 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({ )} - {content} + + {content} + diff --git a/apps/web/src/scenes/ContentPages/PostsFeaturePage.tsx b/apps/web/src/scenes/ContentPages/PostsFeaturePage.tsx index aa0fb75f5a..970f8351b8 100644 --- 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) { Gallery | Posts - - - - - - Introducing - - Posts - - - {pageContent.introText} + + + ); +} + +export function PostsFeaturePageContent({ pageContent }: Props) { + return ( + + + + + + Introducing + + Posts + - - - Get Started - - - - - - {pageContent.featureHighlights.map((highlight) => ( - - ))} - - - {pageContent.externalLink && ( - - - - )} - - - Get Started - - + {pageContent.introText} - - - - + + + Get Started + + + + + + {pageContent.featureHighlights?.map((highlight) => ( + + ))} + + + {pageContent.externalLink && ( + + + + )} + + + Get Started + + + + + + ); } diff --git a/apps/web/tests/graphql/mockGlobalLayoutQuery.ts b/apps/web/tests/graphql/mockGlobalLayoutQuery.ts index 068b47e80d..462f51059d 100644 --- a/apps/web/tests/graphql/mockGlobalLayoutQuery.ts +++ b/apps/web/tests/graphql/mockGlobalLayoutQuery.ts @@ -13,8 +13,9 @@ export function mockGlobalLayoutQuery() { user: { __typename: 'GalleryUser', id: GALLERY_USER_ID, - // @ts-expect-error not sure what the issue is username: 'Test Gallery User', + // @ts-expect-error not sure what the issue is + userExperiences: [], wallets: [], roles: ['ADMIN'], primaryWallet: { diff --git a/schema.graphql b/schema.graphql index 2ece0ebf35..b513ebbc1d 100644 --- a/schema.graphql +++ b/schema.graphql @@ -2141,6 +2141,7 @@ enum UserExperienceType { MobileBetaUpsell UpsellMintMemento5 UpsellBanner + PostsBetaAnnouncement } type UserFollowedUsersFeedEventData implements FeedEventData {