Base PR: Projects Redesign

.eslintrc.js

@@ -4,7 +4,13 @@ module.exports = {
     browser: true,
     es2020: true,
   },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react/recommended', 'plugin:storybook/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:storybook/recommended',
+  ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
@@ -47,6 +53,7 @@ module.exports = {
     'import/extensions': 'off',
     'import/no-unresolved': 'off',
     'react/jsx-no-literals': 'off',
+    '@typescript-eslint/consistent-type-imports': 'warn',
     '@typescript-eslint/ban-types': 'off',
     '@typescript-eslint/no-empty-interface': 'off',
     '@typescript-eslint/no-empty-function': 'off',

package.json

@@ -24,7 +24,7 @@
     "prepare": "node ./husky-prepare.js"
   },
   "validate-branch-name": {
-    "pattern": "^(main|develop){1}$|^(feature|hotfix)/[a-z0-9-_]+$",
+    "pattern": "^(main|develop){1}$|^(feature|hotfix|projects-redesign)/[a-z0-9-_]+$",
     "errorMsg": "Invalid branch name. \n 1.Branch names can contain lowercase characters, numbers, hyphen and underscore. \n 2.Except for 'main' and 'develop', branch names must begin with 'feature/' or 'hotfix/' "
   },
   "engines": {
@@ -133,6 +133,7 @@
     "styled-jsx": "^5.0.0",
     "supercluster": "^8.0.1",
     "superjson": "^1.12.3",
+    "swiper": "^11.1.14",
     "uuid": "^8.3.2",
     "vizzuality-components": "^3.0.3",
     "xlsx": "^0.18.5",

pages/_app.tsx

@@ -3,13 +3,15 @@ import { CacheProvider, EmotionCache } from '@emotion/react';
 import createEmotionCache from '../src/createEmotionCache';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import 'mapbox-gl-compare/dist/mapbox-gl-compare.css';
-import React from 'react';
+import React, { ReactElement, ReactNode, useMemo } from 'react';
 import TagManager from 'react-gtm-module';
 import Router from 'next/router';
-import App, { AppProps, AppContext, AppInitialProps } from 'next/app';
+import App, { AppContext, AppInitialProps, AppProps } from 'next/app';
 import { Auth0Provider } from '@auth0/auth0-react';
+// NOTE - needs to be removed when old projects code is removed
 import '../src/features/projects/styles/MapPopup.scss';
 import '../src/theme/global.scss';
+// NOTE - needs to be removed when old projects code is removed
 import './../src/features/projects/styles/Projects.scss';
 import './../src/features/common/Layout/Navbar/Navbar.scss';
 import ThemeProvider from '../src/theme/themeContext';
@@ -32,6 +34,7 @@ import QueryParamsProvider from '../src/features/common/Layout/QueryParamsContex
 import { PlanetCashProvider } from '../src/features/common/Layout/PlanetCashContext';
 import { PayoutsProvider } from '../src/features/common/Layout/PayoutsContext';
 import { trpc } from '../src/utils/trpc';
+// NOTE - needs to be removed when old projects code is removed
 import MapHolder from '../src/features/projects/components/maps/MapHolder';
 import { TenantProvider } from '../src/features/common/Layout/TenantContext';
 import { CurrencyProvider } from '../src/features/common/Layout/CurrencyContext';
@@ -41,9 +44,9 @@ import {
   getTenantSlug,
 } from '../src/utils/multiTenancy/helpers';
 import { Tenant } from '@planet-sdk/common/build/types/tenant';
-import { NextIntlClientProvider } from 'next-intl';
-
-type AppOwnProps = { tenantConfig: Tenant };
+import { AbstractIntlMessages, NextIntlClientProvider } from 'next-intl';
+import { NextPage } from 'next';
+import { SetState } from '../src/features/common/types/common';
 
 const VideoContainer = dynamic(
   () => import('../src/features/common/LandingVideo'),
@@ -107,15 +110,40 @@ const onRedirectCallback = (appState: any) => {
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
 
-export interface MyAppProps extends AppProps {
+export type NextPageWithLayout<P = PageComponentProps, IP = P> = NextPage<
+  P,
+  IP
+> & {
+  getLayout?: (
+    page: ReactElement,
+    pageComponentProps: PageComponentProps
+  ) => ReactNode;
+};
+
+type AppPropsWithLayout = Omit<AppProps, 'pageProps'> & {
+  Component: NextPageWithLayout;
   emotionCache?: EmotionCache;
-}
+  pageProps: PageProps;
+};
+
+export type PageProps = {
+  tenantConfig: Tenant;
+  messages?: AbstractIntlMessages;
+  [key: string]: any;
+};
+
+export type PageComponentProps = {
+  pageProps: PageProps;
+  currencyCode: string;
+  setCurrencyCode: SetState<string>;
+  isMobile: boolean;
+};
 
 const PlanetWeb = ({
   Component,
   pageProps,
   emotionCache = clientSideEmotionCache,
-}: MyAppProps & AppOwnProps) => {
+}: AppPropsWithLayout) => {
   const router = useRouter();
   const [isMap, setIsMap] = React.useState(false);
   const [currencyCode, setCurrencyCode] = React.useState('');
@@ -164,10 +192,16 @@ const PlanetWeb = ({
     setBrowserCompatible(browserNotCompatible());
   }, []);
 
-  const ProjectProps = {
+  const isMobile = useMemo(() => {
+    if (typeof window === 'undefined') return false;
+    return window.innerWidth < 481;
+  }, [typeof window !== 'undefined' && window.innerWidth]);
+
+  const pageComponentProps = {
     pageProps,
     currencyCode,
     setCurrencyCode,
+    isMobile,
   };
 
   const [showVideo, setshowVideo] = React.useState(true);
@@ -206,6 +240,12 @@ const PlanetWeb = ({
     setshowVideo(localShowVideo);
   }, [localShowVideo]);
 
+  const getLayout = Component.getLayout ?? ((page) => page);
+  const pageContent = getLayout(
+    <Component {...pageComponentProps} />,
+    pageComponentProps
+  );
+
   if (browserCompatible) {
     return <BrowserNotSupported />;
   } else {
@@ -273,7 +313,7 @@ const PlanetWeb = ({
                                               setshowVideo={setshowVideo}
                                             />
                                           ) : null}
-                                          <Component {...ProjectProps} />
+                                          {pageContent}
                                         </AnalyticsProvider>
                                       </BulkCodeProvider>
                                     </ProjectPropsProvider>
@@ -300,7 +340,7 @@ const PlanetWeb = ({
 
 PlanetWeb.getInitialProps = async (
   context: AppContext
-): Promise<AppOwnProps & AppInitialProps> => {
+): Promise<AppInitialProps & { pageProps: PageProps }> => {
   const ctx = await App.getInitialProps(context);
 
   const _tenantSlug = await getTenantSlug(
@@ -311,12 +351,13 @@ PlanetWeb.getInitialProps = async (
 
   const tenantConfig = await getTenantConfig(tenantSlug);
 
-  const pageProps = {
-    ...ctx.pageProps,
-    tenantConfig,
+  return {
+    ...ctx,
+    pageProps: {
+      ...ctx.pageProps,
+      tenantConfig,
+    },
   };
-
-  return { ...ctx, pageProps } as AppOwnProps & AppInitialProps;
 };
 
 export default trpc.withTRPC(PlanetWeb);

pages/_document.tsx

@@ -25,12 +25,20 @@ class MyDocument extends Document {
     return (
       <Html lang="en">
         <Head>
-          <link rel="dns-prefetch" href="https://www.plant-for-the-planet.org/" />
+          <link
+            rel="dns-prefetch"
+            href="https://www.plant-for-the-planet.org/"
+          />
           <link
             rel="preconnect"
             href="https://fonts.googleapis.com/"
             crossOrigin="true"
           />
+          <link
+            rel="preload"
+            as="image"
+            href="/assets/images/project-contribution-default-landscape.png"
+          />
           {/* Commented code below to avoid inserting emotion css <style> tags above global/module scss */}
           {/* <meta name="emotion-insertion-point" content="" /> */}
           {this.props.styles}

pages/sites/[slug]/[locale]/[p].tsx

@@ -2,11 +2,11 @@ import { useRouter } from 'next/router';
 import React from 'react';
 import { ErrorHandlingContext } from '../../../../src/features/common/Layout/ErrorHandlingContext';
 import { useProjectProps } from '../../../../src/features/common/Layout/ProjectPropsContext';
-import Credits from '../../../../src/features/projects/components/maps/Credits';
+import Credits from '../../../../src/features/projectsV2/ProjectsMap/Credits';
 import SingleProjectDetails from '../../../../src/features/projects/screens/SingleProjectDetails';
 import { getRequest } from '../../../../src/utils/apiRequests/api';
 import getStoredCurrency from '../../../../src/utils/countryCurrency/getStoredCurrency';
-import GetProjectMeta from '../../../../src/utils/getMetaTags/GetProjectMeta';
+import ProjectDetailsMeta from '../../../../src/utils/getMetaTags/ProjectDetailsMeta';
 import { getAllPlantLocations } from '../../../../src/utils/maps/plantLocations';
 import { AbstractIntlMessages, useLocale } from 'next-intl';
 import {
@@ -205,7 +205,7 @@ export default function Donate({
 
   return pageProps.tenantConfig ? (
     <>
-      {project ? <GetProjectMeta project={project} /> : null}
+      {project ? <ProjectDetailsMeta project={project} /> : null}
       {project ? (
         <>
           <SingleProjectDetails />
@@ -223,7 +223,7 @@ export default function Donate({
 export const getStaticPaths = async () => {
   const subDomainPaths = await constructPathsForTenantSlug();
 
-  const paths = subDomainPaths.map((path) => {
+  const paths = subDomainPaths?.map((path) => {
     return {
       params: {
         slug: path.params.slug,

pages/sites/[slug]/[locale]/index.tsx

@@ -1,11 +1,11 @@
 import { useRouter } from 'next/router';
 import React from 'react';
 import ProjectsList from '../../../../src/features/projects/screens/Projects';
-import GetAllProjectsMeta from '../../../../src/utils/getMetaTags/GetAllProjectsMeta';
+import ProjectsListMeta from '../../../../src/utils/getMetaTags/ProjectsListMeta';
 import getStoredCurrency from '../../../../src/utils/countryCurrency/getStoredCurrency';
 import { getRequest } from '../../../../src/utils/apiRequests/api';
 import { useProjectProps } from '../../../../src/features/common/Layout/ProjectPropsContext';
-import Credits from '../../../../src/features/projects/components/maps/Credits';
+import Credits from '../../../../src/features/projectsV2/ProjectsMap/Credits';
 import Filters from '../../../../src/features/projects/components/projects/Filters';
 import { ErrorHandlingContext } from '../../../../src/features/common/Layout/ErrorHandlingContext';
 import DirectGift, {
@@ -149,7 +149,7 @@ export default function Donate({
     <>
       {filteredProjects !== null ? (
         <>
-          <GetAllProjectsMeta />
+          <ProjectsListMeta />
           <ProjectsList
             projects={filteredProjects}
             {...OtherProjectListProps}

pages/sites/[slug]/[locale]/login.tsx

@@ -86,7 +86,7 @@ export default function Login({ pageProps }: Props): ReactElement {
 export const getStaticPaths = async () => {
   const subDomainPaths = await constructPathsForTenantSlug();
 
-  const paths = subDomainPaths.map((path) => {
+  const paths = subDomainPaths?.map((path) => {
     return {
       params: {
         slug: path.params.slug,

pages/sites/[slug]/[locale]/prd/[p].tsx

@@ -0,0 +1,108 @@
+import type {
+  GetStaticProps,
+  GetStaticPropsContext,
+  GetStaticPropsResult,
+} from 'next/types';
+import type { ReactElement } from 'react';
+import type {
+  NextPageWithLayout,
+  PageComponentProps,
+  PageProps,
+} from '../../../../_app';
+
+import {
+  constructPathsForTenantSlug,
+  getTenantConfig,
+} from '../../../../../src/utils/multiTenancy/helpers';
+import { defaultTenant } from '../../../../../tenant.config';
+import getMessagesForPage from '../../../../../src/utils/language/getMessagesForPage';
+import { useRouter } from 'next/router';
+import { useTenant } from '../../../../../src/features/common/Layout/TenantContext';
+import { useEffect } from 'react';
+import { v4 } from 'uuid';
+import ProjectsLayout from '../../../../../src/features/common/Layout/ProjectsLayout';
+import MobileProjectsLayout from '../../../../../src/features/common/Layout/ProjectsLayout/MobileProjectsLayout';
+import ProjectDetails from '../../../../../src/features/projectsV2/ProjectDetails';
+
+const ProjectDetailsPage: NextPageWithLayout = ({
+  pageProps,
+  currencyCode,
+  isMobile,
+}) => {
+  const router = useRouter();
+  const { setTenantConfig } = useTenant();
+
+  useEffect(() => {
+    if (router.isReady) {
+      setTenantConfig(pageProps.tenantConfig);
+    }
+  }, [router.isReady]);
+
+  return <ProjectDetails currencyCode={currencyCode} isMobile={isMobile} />;
+};
+
+ProjectDetailsPage.getLayout = function getLayout(
+  page: ReactElement,
+  pageComponentProps: PageComponentProps
+): ReactElement {
+  const layoutProps = {
+    currencyCode: pageComponentProps.currencyCode,
+    setCurrencyCode: pageComponentProps.setCurrencyCode,
+    page: 'project-details',
+    isMobile: pageComponentProps.isMobile,
+  } as const;
+  return pageComponentProps.isMobile ? (
+    <MobileProjectsLayout {...layoutProps}>{page}</MobileProjectsLayout>
+  ) : (
+    <ProjectsLayout {...layoutProps}>{page}</ProjectsLayout>
+  );
+};
+
+export default ProjectDetailsPage;
+
+export const getStaticPaths = async () => {
+  const subDomainPaths = await constructPathsForTenantSlug();
+
+  const paths = subDomainPaths?.map((path) => {
+    return {
+      params: {
+        slug: path.params.slug,
+        p: v4(),
+        locale: 'en',
+      },
+    };
+  });
+
+  return {
+    paths,
+    fallback: 'blocking',
+  };
+};
+
+export const getStaticProps: GetStaticProps<PageProps> = async (
+  context: GetStaticPropsContext
+): Promise<GetStaticPropsResult<PageProps>> => {
+  const tenantConfig =
+    (await getTenantConfig(context.params?.slug as string)) ?? defaultTenant;
+
+  const messages = await getMessagesForPage({
+    locale: context.params?.locale as string,
+    filenames: [
+      'common',
+      'maps',
+      'allProjects',
+      'projectDetails',
+      'donate',
+      'country',
+      'project',
+      'me',
+    ],
+  });
+
+  return {
+    props: {
+      messages,
+      tenantConfig,
+    },
+  };
+};