Homepage popup

src/components/LandingPage/LandingPage.tsx

@@ -1,18 +1,23 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { z } from 'zod';
+import { Modal } from 'antd';
 
+import NewsletterForm from '../coming-soon/newsletter-form';
 import FooterPanel from './layout/FooterPanel';
 import Menu from './layout/Menu';
 import SectionContact from './sections/SectionContact';
 import { EnumSection } from './sections/sections';
+import { useSanity } from './content/content';
 import { getSection } from './utils';
 import Hero from './layout/Hero';
 import SectionGeneric from './sections/SectionGeneric';
 import PaddedBlock from './components/PaddedBlock';
 import SectionNews from './sections/SectionNews';
 import VerticalSpace from './components/VerticalSpace';
 import { classNames } from '@/util/utils';
+
 import AcceptInviteErrorDialog from '@/components/Invites/AcceptInviteErrorDialog';
 import { logError } from '@/util/logger';
 
@@ -25,8 +30,41 @@ export interface LandingPageProps {
   errorCode?: string;
 }
 
+export const comingSoonDataSchema = z.object({
+  title: z.string(),
+  introduction: z.string(),
+});
+
+export type ComingSoonData = z.infer<typeof comingSoonDataSchema>;
+
 export default function LandingPage({ className, section, errorCode }: LandingPageProps) {
   const scrollHasStarted = useScrollHasStarted();
+  const [popupOpen, setPopupOpen] = useState(false);
+  const [width, setWidth] = useState(0);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const handleResize = () => {
+      if (ref.current) setWidth(ref.current.getBoundingClientRect().width);
+    };
+    handleResize();
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const popUpData = useSanity(
+    `*[slug.current == "releasing-soon"][0]`,
+    (data): data is ComingSoonData => {
+      comingSoonDataSchema.parse(data);
+      return true;
+    }
+  );
+
+  useEffect(() => {
+    if (section === EnumSection.Home) setPopupOpen(localStorage.getItem('popupOpen') === null);
+  }, [section]);
 
   useEffect(() => {
     window.scrollTo({
@@ -35,16 +73,41 @@ export default function LandingPage({ className, section, errorCode }: LandingPa
     });
   }, [section]);
 
+  const handleClose = () => {
+    localStorage.setItem('popupOpen', 'false');
+    setPopupOpen(false);
+  };
+
   return (
     <>
-      <div className={classNames(className, styles.landingPage)}>
+      <div className={classNames(className, styles.landingPage)} ref={ref}>
         <Menu scrollHasStarted={scrollHasStarted} section={section} />
         <Hero section={section} />
         <PaddedBlock>{renderSection(section)}</PaddedBlock>
         <VerticalSpace height="30px" />
         <FooterPanel />
         {errorCode && <AcceptInviteErrorDialog errorCode={errorCode} />}
       </div>
+
+      <Modal
+        open={popupOpen && !!popUpData}
+        onCancel={handleClose}
+        footer={null}
+        centered
+        width={width < 800 ? '90%' : '40%'}
+      >
+        <div className="p-5">
+          <div
+            style={{ fontFamily: 'Gabarito serif' }}
+            className="text-5xl font-bold text-primary-9"
+          >
+            {popUpData?.title}
+          </div>
+          <div className="mt-5 font-semibold text-primary-9">{popUpData?.introduction}</div>
+          <NewsletterForm cls={{ container: 'p-0 md:p-0 mt-5' }} />
+        </div>
+      </Modal>
+
       {/* <MatomoAnalytics /> */}
     </>
   );

src/components/LandingPage/components/ProgressiveImage/ProgressiveImage.tsx

@@ -36,7 +36,7 @@ export default function ProgressiveImage({
     >
       <Image
         className={classNames(styles.image, loaded && styles.show)}
-        onLoadingComplete={() => {
+        onLoad={() => {
           setLoaded(true);
         }}
         src={src}

src/components/LandingPage/content/content.ts

@@ -1,8 +1,9 @@
 /* eslint-disable no-console */
-import React from 'react';
 import { createClient } from 'next-sanity';
 import imageUrlBuilder from '@sanity/image-url';
 import { SanityImageSource } from '@sanity/image-url/lib/types/types';
+import { atomFamily } from 'jotai/utils';
+import { atom, useAtomValue } from 'jotai';
 import { EnumSection } from '../sections/sections';
 import { getSection } from '../utils';
 import { ContentForRichText, isContentForRichText } from './types';
@@ -22,26 +23,29 @@ export const urlFor = (source: SanityImageSource) => {
   return builder.image(source);
 };
 
+const dataFamily = atomFamily(
+  ({ query, typeGuard }: { query: string; typeGuard: (data: unknown) => data is unknown }) =>
+    atom(async () => {
+      try {
+        return fetchSanity(query, typeGuard);
+      } catch (ex) {
+        logError('There was an exception in this Sanity query:', query);
+        logError(ex);
+        return null;
+      }
+    }),
+
+  (a, b) => a.query === b.query
+);
+
 /**
  * @returns The expected object, or:
  *
  * - `undefined` if the query has not finished yet.
  * - `null` if an error occured.
  */
-export function useSanity<T>(
-  query: string,
-  typeGuard: (data: unknown) => data is T
-): T | undefined | null {
-  const [data, setData] = React.useState<T | undefined | null>(undefined);
-  React.useEffect(() => {
-    fetchSanity(query, typeGuard)
-      .then(setData)
-      .catch((ex) => {
-        logError('There was an exception in this Sanity query:', query);
-        logError(ex);
-        setData(null);
-      });
-  }, [query, typeGuard]);
+export function useSanity<T>(query: string, typeGuard: (data: unknown) => data is T) {
+  const data = useAtomValue(dataFamily({ query, typeGuard })) as T | undefined | null;
   return data;
 }
 

src/components/LandingPage/layout/Hero/Hero.tsx

@@ -28,6 +28,7 @@ export default function Hero({ className, section }: HeroProps) {
     content,
     next,
   } = useSanityContentForHero(section);
+
   const [videoReady, setVideoReady] = React.useState(false);
   const height = useFullHeight();
   return (

src/components/LandingPage/utils.ts

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { EnumSection } from './sections/sections';
 import { DEFAULT_SECTION, ID_MENU, Section, SECTIONS } from './constants';
-import { basePath } from '@/config';
+import { basePath, isServer } from '@/config';
 import { isString } from '@/util/type-guards';
 
 /**
@@ -35,9 +35,11 @@ export function gotoSection(slugOrIndex: string | EnumSection) {
   window.location.href = url;
 }
 
-export function useResizeObserver(callback: ResizeObserverCallback): ResizeObserver {
+export function useResizeObserver(callback: ResizeObserverCallback): ResizeObserver | null {
   const ref = React.useRef<ResizeObserver | null>(null);
-  if (!ref.current) ref.current = new ResizeObserver(callback);
+
+  // ResizeObserver not available on server
+  if (!ref.current && !isServer) ref.current = new ResizeObserver(callback);
   return ref.current;
 }
 
@@ -51,6 +53,7 @@ export function useMenuHeight(): number {
   }, [setMenuHeight]);
   const observer = useResizeObserver(handleResize);
   React.useEffect(() => {
+    if (!observer) return;
     observer.observe(document.body);
     return () => observer.unobserve(document.body);
   }, [observer]);

src/components/LandingPage/widgets/PriceList/large-screen/large-screen.tsx

@@ -29,10 +29,10 @@ export default function LargeScreen() {
             <PlanHeader key={`${plan.title}/${index}`} plan={plan} />
           ))}
           {features.map((bloc, index) => (
-            <>
+            <React.Fragment key={`bloc/${index}`}>
               {index > 0 && <hr className={styles.fullWidth} />}
-              <FeatureBloc key={`bloc/${index}`} bloc={bloc} plans={plans} />
-            </>
+              <FeatureBloc bloc={bloc} plans={plans} />
+            </React.Fragment>
           ))}
         </div>
       </CenteredColumn>