Merge pull request #1597 from Plant-for-the-Planet-org/develop

Release November 2nd, 2022

package.json

@@ -113,7 +113,7 @@
     "@storybook/testing-library": "^0.0.11",
     "@types/d3-ease": "^1.0.9",
     "@types/node": "^14.0.26",
-    "@types/react": "^16.9.43",
+    "@types/react": "^16.9.49",
     "@types/react-map-gl": "^5.2.7",
     "@types/styled-jsx": "^2.2.8",
     "@types/uuid": "^8.3.0",

pages/[p].tsx

@@ -4,12 +4,12 @@ import { ErrorHandlingContext } from '../src/features/common/Layout/ErrorHandlin
 import { ProjectPropsContext } from '../src/features/common/Layout/ProjectPropsContext';
 import Credits from '../src/features/projects/components/maps/Credits';
 import SingleProjectDetails from '../src/features/projects/screens/SingleProjectDetails';
-import { ThemeContext } from '../src/theme/themeContext';
 import { getRequest } from '../src/utils/apiRequests/api';
 import getStoredCurrency from '../src/utils/countryCurrency/getStoredCurrency';
 import GetProjectMeta from '../src/utils/getMetaTags/GetProjectMeta';
 import { getAllPlantLocations } from '../src/utils/maps/plantLocations';
 import i18next from '../i18n';
+import { SingleProjectGeojson } from '../src/features/common/types/project';
 
 const { useTranslation } = i18next;
 
@@ -27,12 +27,16 @@ export default function Donate({
   const router = useRouter();
   const [internalCurrencyCode, setInternalCurrencyCode] = React.useState('');
   const [internalLanguage, setInternalLanguage] = React.useState('');
-  const [open, setOpen] = React.useState(false);
-  const { theme } = React.useContext(ThemeContext);
+  const [_open, setOpen] = React.useState(false);
+
   const { i18n } = useTranslation();
   const {
+    geoJson,
     project,
+    setSelectedSite,
     setProject,
+    setSelectedPl,
+    plantLocations,
     setShowSingleProject,
     setZoomLevel,
     setPlantLocations,
@@ -116,6 +120,51 @@ export default function Donate({
       }
     }
   }, [router.asPath]);
+
+  React.useEffect(() => {
+    if (geoJson && !router.query.site && !router.query.ploc) {
+      router.push(
+        `/${project.slug}?site=${geoJson.features[0].properties.name}`,
+        undefined,
+        { shallow: true }
+      );
+    }
+  }, [router, geoJson]);
+
+  React.useEffect(() => {
+    //for selecting one of the site of project if user use link  to directly visit to site from home page
+    if (geoJson && router.query.site) {
+      const siteIndex: number = geoJson?.features.findIndex(
+        (singleSite: SingleProjectGeojson) => {
+          return router.query.site === singleSite?.properties.name;
+        }
+      );
+      if (siteIndex === -1) {
+        router.push(`/${project.slug}`);
+      } else {
+        setSelectedSite(siteIndex);
+      }
+    }
+  }, [setSelectedSite, geoJson]);
+
+  React.useEffect(() => {
+    //for selecting one of the plant location. if user use link  to directly visit to plantLocation from home page
+    if (geoJson && router.query.ploc && plantLocations) {
+      const singlePlantLocation: Treemapper.PlantLocation | undefined =
+        plantLocations?.find(
+          (dataOfSinglePlantLocation: Treemapper.PlantLocation) => {
+            return router.query.ploc === dataOfSinglePlantLocation?.hid;
+          }
+        );
+
+      if (singlePlantLocation === undefined) {
+        router.push(`/${project.slug}`);
+      } else {
+        setSelectedPl(singlePlantLocation);
+      }
+    }
+  }, [router, router.query.ploc, plantLocations, setSelectedPl, project]);
+
   return (
     <>
       {project ? <GetProjectMeta {...ProjectProps} /> : null}

pages/profile/giftfund/index.tsx

@@ -0,0 +1,20 @@
+import React, { ReactElement } from 'react';
+import UserLayout from '../../../src/features/common/Layout/UserLayout/UserLayout';
+import Head from 'next/head';
+import i18next from '../../../i18n';
+import GiftFunds from '../../../src/features/user/GiftFunds';
+
+const { useTranslation } = i18next;
+
+interface Props {}
+export default function Register({}: Props): ReactElement {
+  const { t } = useTranslation('me');
+  return (
+    <UserLayout>
+      <Head>
+        <title>{t('giftFund')}</title>
+      </Head>
+      <GiftFunds />
+    </UserLayout>
+  );
+}

public/assets/images/icons/Sidebar/NotionLinkIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const NotionLinkIcon = (props: any) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      enableBackground="new 0 0 24 24"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      fill="none"
+    >
+      <g>
+        <rect fill="none" height="24" width="24" />
+        <path
+          fill={props.color ? props.color : '#5f6368'}
+          d="M20.41,8.41l-4.83-4.83C15.21,3.21,14.7,3,14.17,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V9.83 C21,9.3,20.79,8.79,20.41,8.41z M7,7h7v2H7V7z M17,17H7v-2h10V17z M17,13H7v-2h10V13z"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default NotionLinkIcon;

public/static/locales/de/common.json

@@ -76,6 +76,7 @@
   "copiedToClipboard": "In die Zwischenablage kopiert!",
   "close": "Schließen",
   "logout": "Abmelden",
+  "document": "Plattform-Dokumentation (EN)",
   "featured": "Empfohlen",
   "treeMapper": "TreeMapper",
   "overview": "Übersicht",

public/static/locales/de/planet.json

@@ -1,5 +1,5 @@
 {
-  "treesDonated": "Gespendete Bäume seit 2019",
+  "treesDonated": "Gespendete Bäume seit dem Start der Plattform (2019)",
   "plantedByTPO": "Gepflanzt von den {{projects}}+ teilnehmenden Projekten",
   "plantedGlobally": "An uns gemeldete Bäume seit 2006",
   "forestLoss": "Netto-Waldverlust pro Jahr",

public/static/locales/en/common.json

@@ -76,6 +76,7 @@
   "copiedToClipboard": "Copied to clipboard!",
   "close": "Close",
   "logout": "Logout",
+  "document": "Platform Documentation (EN)",
   "featured": "Featured",
   "treeMapper": "TreeMapper",
   "overview": "Overview",

public/static/locales/en/giftfunds.json

@@ -0,0 +1,7 @@
+{
+    "title": "GiftFund",
+    "description1": "If you see this page, then you have balance in your GiftFund for your active PlanetCash account left. Check the information below.",
+    "description2": "In case of questions, please contact your Key Account Manager.",
+    "project": "Project",
+    "units": "Available Units"
+}

public/static/locales/en/me.json

@@ -246,5 +246,6 @@
   "apiKeyMessage1": "API Key is like a digital password that allows you to act as your profile in any application. It also allows applications to donate on your behalf, use PlanetCash and view transactions.",
   "apiKeyMessage2": "Once you generate an API Key, we will require a two factor authentication for your login. This you’ll be able to setup next time you log in.",
   "apiKeyMessage3": "Regenerating an API Key will invalidate your existing API Key immediately.",
-  "regenerateKey": "Regenerate Key"
+  "regenerateKey": "Regenerate Key",
+  "giftFund": "Gift Fund"
 }

src/features/common/CustomSnackbar/index.tsx

@@ -4,8 +4,9 @@ import { ReactElement } from 'react';
 import { styled } from '@mui/material/styles';
 
 interface SnackbarProps {
-  snackbarText: String;
+  snackbarText: string;
   isVisible: boolean;
+  /** Include operations that need to take place when the snackbar is closed */
   handleClose: () => void;
 }
 
@@ -15,6 +16,9 @@ const Alert = styled(MuiAlert)(({ theme }) => {
   };
 });
 
+/**
+ * Component that renders a temporary snackbar to indicate a success message
+ */
 export default function CustomSnackbar({
   snackbarText,
   isVisible,

src/features/common/Layout/BulkCodeContext.tsx

@@ -9,21 +9,6 @@ import {
 } from 'react';
 import { BulkCodeMethods } from '../../../utils/constants/bulkCodeConstants';
 
-export interface APISingleProject {
-  type: string;
-  geometry: unknown;
-  properties: {
-    [index: string]: unknown;
-    id: string;
-    name: string;
-    slug: string;
-    allowDonations: boolean;
-    purpose: string;
-    currency: string;
-    unitCost: number;
-  };
-}
-
 export interface PlanetCashAccount {
   guid: string;
   currency: string;

src/features/common/Layout/CenteredContainer/index.tsx

@@ -1,5 +1,8 @@
 import { styled } from '@mui/material';
 
+/**
+ * Returns a container with background and boxShadow, with centered content. Content is vertically arranged
+ */
 const CenteredContainer = styled('div')(({ theme }) => ({
   backgroundColor: theme.palette.background.default,
   padding: 24,
@@ -10,9 +13,15 @@ const CenteredContainer = styled('div')(({ theme }) => ({
   width: '100%',
   alignItems: 'center',
   justifyContent: 'center',
+  gap: 24,
+  // To create a small fixed height container
   '&.CenteredContainer--small': {
     height: 160,
   },
+  // To center text within a child element of the CenteredContainer
+  '& .centered-text': {
+    textAlign: 'center',
+  },
 }));
 
 export default CenteredContainer;

src/features/common/Layout/DashboardView/index.tsx

@@ -39,6 +39,9 @@ const DashboardGridContainer = styled(Box)(({ theme }) => ({
   },
 }));
 
+/**
+ * Returns a template layout for a Dashboard view with a `<header>` section and a `<main>` section
+ */
 export default function DashboardView({
   title,
   subtitle,

src/features/common/Layout/Forms/FormHeader.tsx

@@ -0,0 +1,17 @@
+import { styled } from '@mui/material';
+
+/**
+ * Header container to be placed above a html `<form>` element.
+ */
+const FormHeader = styled('header')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 16,
+  width: '100%',
+  '& .formTitle': {
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.h2.fontSize,
+  },
+}));
+
+export default FormHeader;

src/features/common/Layout/Forms/InlineFormDisplayGroup.tsx

@@ -1,15 +1,45 @@
 import { styled } from '@mui/material';
+import { ReactElement, ReactNode } from 'react';
 
-const InlineFormDisplayGroup = styled('div')({
+const InlineFormGroup = styled('div')({
   display: 'flex',
   justifyContent: 'space-between',
-  gap: '16px',
-  alignItems: 'center',
+  columnGap: 16,
+  rowGap: 24,
+  alignItems: 'flex-start',
   flexWrap: 'wrap',
-
-  '@media(max-width: 481px)': {
-    flexDirection: 'column',
+  '&.InlineFormGroup--other': {
+    alignItems: 'center',
+    flexWrap: 'nowrap',
+  },
+  '& .MuiTextField-root': {
+    flex: 1,
+    minWidth: 180,
   },
 });
 
+interface Props {
+  /** Use type='other' to specify inline groups that do not contain only text field elements */
+  type?: 'field' | 'other';
+  children: ReactNode;
+}
+
+/**
+ * Responsive element that groups fields/other form elements that need to be arranged in one line
+ */
+const InlineFormDisplayGroup = ({
+  type = 'field',
+  children,
+}: Props): ReactElement => {
+  return (
+    <InlineFormGroup
+      className={
+        type === 'field' ? 'InlineFormGroup--fields' : 'InlineFormGroup--other'
+      }
+    >
+      {children}
+    </InlineFormGroup>
+  );
+};
+
 export default InlineFormDisplayGroup;

src/features/common/Layout/DashboardView/SingleColumnView.tsx → src/features/common/Layout/SingleColumnView/index.tsx

@@ -1,23 +1,20 @@
 import { ReactElement } from 'react';
-import { Grid, styled } from '@mui/material';
-
-const FormContainer = styled('div')(({ theme }) => ({
-  backgroundColor: theme.palette.background.default,
-  padding: 24,
-  borderRadius: 9,
-  boxShadow: theme.shadows[1],
-}));
-
+import { Grid } from '@mui/material';
+import CenteredContainer from '../CenteredContainer';
 interface SingleColumnViewProps {
   children: React.ReactNode;
 }
 
+/**
+ * Renders a single column MUI grid container.
+ * Usually used within a `DashboardView` container
+ */
 export default function SingleColumnView({
   children,
 }: SingleColumnViewProps): ReactElement {
   return (
     <Grid container className="SingleColumnView">
-      <Grid item xs={12} md={9} component={FormContainer}>
+      <Grid item xs={12} md={9} component={CenteredContainer}>
         {children}
       </Grid>
     </Grid>

src/features/common/Layout/StyledForm/index.tsx

@@ -2,9 +2,10 @@ import { styled } from '@mui/material';
 
 /**
  * Returns an empty flex column display `<form>` with
- * styles defined for formButton and inputContainer
+ * styles defined for formButton, formTitle and inputContainer
  */
-const StyledForm = styled('form')(({ theme }) => ({
+const StyledForm = styled('form')(() => ({
+  width: '100%',
   display: 'flex',
   flexDirection: 'column',
   gap: 24,
@@ -19,10 +20,6 @@ const StyledForm = styled('form')(({ theme }) => ({
     gap: 24,
     width: '100%',
   },
-  '& .formTitle': {
-    color: theme.palette.text.secondary,
-    fontSize: theme.typography.h2.fontSize,
-  },
 }));
 
 export default StyledForm;

src/features/common/Layout/TabbedView/index.tsx

@@ -24,6 +24,11 @@ interface TabbedViewProps {
   tabItems: TabItem[];
 }
 
+/**
+ * Renders a two column MUI grid container.
+ * Column 1 = Tabs. Column 2 = Content
+ * Usually used within a `<DashboardView>` container
+ */
 export default function TabbedView({
   children,
   step,