Feature/dashboard maintenance refactor [IGNORE]

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": "^18.0.1",
     "@types/react-map-gl": "^5.2.7",
     "@types/styled-jsx": "^2.2.8",
     "@types/uuid": "^8.3.0",

pages/claim/[type]/[code].tsx

@@ -13,6 +13,7 @@ import { UserPropsContext } from '../../../src/features/common/Layout/UserPropsC
 import { ErrorHandlingContext } from '../../../src/features/common/Layout/ErrorHandlingContext';
 import ShareOptions from '../../../src/features/common/ShareOptions/ShareOptions';
 import { styled } from '@mui/material';
+import CancelIcon from '../../../public/assets/images/icons/CancelIcon';
 
 const { useTranslation } = i18next;
 
@@ -87,27 +88,26 @@ function ClaimDonation({}: Props): ReactElement {
     }
   }, [router]);
 
-  async function validateCode(code: any, type: any) {
+  async function redeemCode(code: string) {
     setIsUploadingData(true);
     const submitData = {
-      type: type,
+      // type: type,
       code: code,
     };
     if (contextLoaded && user) {
-      const userLang = localStorage.getItem('language') || 'en';
       postAuthenticatedRequest(
-        `/api/v1.3/${userLang}/validateCode`,
+        `/app/redeem`,
         submitData,
         token,
         handleError
       ).then((res) => {
-        if (res.code === 401) {
-          setErrorMessage(res.message);
+        if (res.error_code === 'already_redeemed') {
+          setErrorMessage(t('redeem:alreadyRedeemed'));
           setIsUploadingData(false);
-        } else if (res.status === 'error') {
-          setErrorMessage(res.errorText || t('me:wentWrong'));
+        } else if (res.error_code === 'invalid_code') {
+          setErrorMessage(t('redeem:invalidCode'));
           setIsUploadingData(false);
-        } else if (res.status === 'success') {
+        } else if (res.status === 'redeemed') {
           setCodeValidated(true);
           setValidCodeData(res);
           setIsUploadingData(false);
@@ -125,8 +125,8 @@ function ClaimDonation({}: Props): ReactElement {
     // From here user can go back to home by clicking X
     if (contextLoaded && user) {
       // validate code
-      if (routerReady && code && type) {
-        validateCode(code, type);
+      if (routerReady && code) {
+        redeemCode(code);
       }
     }
 
@@ -145,34 +145,34 @@ function ClaimDonation({}: Props): ReactElement {
     }
   }, [contextLoaded, user, code]);
 
-  async function redeemCode(code: any, type: any) {
-    setIsUploadingData(true);
-    const submitData = {
-      type: type,
-      code: code,
-    };
-    if (contextLoaded && user) {
-      const userLang = localStorage.getItem('language') || 'en';
-      postAuthenticatedRequest(
-        `/api/v1.3/${userLang}/convertCode`,
-        submitData,
-        token,
-        handleError
-      ).then((res) => {
-        if (res.code === 401) {
-          setErrorMessage(res.message);
-          setIsUploadingData(false);
-        } else if (!res.response || res.response.status === 'error') {
-          setErrorMessage(res.errorText || t('me:wentWrong'));
-          setIsUploadingData(false);
-        } else if (res.response.status === 'success') {
-          setCodeRedeemed(true);
-          setIsUploadingData(false);
-          setCodeValidated(false);
-        }
-      });
-    }
-  }
+  // async function redeemCode(code: any, type: any) {
+  //   setIsUploadingData(true);
+  //   const submitData = {
+  //     type: type,
+  //     code: code,
+  //   };
+  //   if (contextLoaded && user) {
+  //     const userLang = localStorage.getItem('language') || 'en';
+  //     postAuthenticatedRequest(
+  //       `/api/v1.3/${userLang}/convertCode`,
+  //       submitData,
+  //       token,
+  //       handleError
+  //     ).then((res) => {
+  //       if (res.code === 401) {
+  //         setErrorMessage(res.message);
+  //         setIsUploadingData(false);
+  //       } else if (!res.response || res.response.status === 'error') {
+  //         setErrorMessage(res.errorText || t('me:wentWrong'));
+  //         setIsUploadingData(false);
+  //       } else if (res.response.status === 'success') {
+  //         setCodeRedeemed(true);
+  //         setIsUploadingData(false);
+  //         setCodeValidated(false);
+  //       }
+  //     });
+  //   }
+  // }
 
   const closeRedeem = () => {
     setCodeValidated(false);
@@ -288,61 +288,58 @@ function ClaimDonation({}: Props): ReactElement {
           <div className={styles.modal}>
             {codeValidated && validCodeData ? (
               <>
-                {errorMessage && (
-                  <span className={styles.formErrors}>{errorMessage}</span>
-                )}
+                <div style={{ position: 'relative', left: '108px' }}>
+                  <button className={styles.crossButton}>
+                    <CancelIcon />
+                  </button>
+                </div>
 
                 <div className={styles.codeTreeCount}>
                   {getFormattedNumber(
                     i18n.language,
-                    Number(validCodeData.treeCount)
+                    Number(validCodeData.units)
                   )}
                   <span>
                     {t('common:tree', {
-                      count: Number(validCodeData.treeCount),
+                      count: Number(validCodeData.units),
                     })}
                   </span>
                 </div>
 
-                {validCodeData.tpos?.length > 0 && (
-                  <div className={styles.plantedBy}>
-                    <span>{t('common:plantedBy')}</span>
-                    <p>{validCodeData.tpos[0].tpoName}</p>
-                  </div>
-                )}
-
-                <div
-                  onClick={() => redeemCode(code, type)}
-                  className="primaryButton"
-                  style={{ maxWidth: '200px', marginTop: '24px' }}
-                >
-                  {isUploadingData ? (
-                    <div className={styles.spinner}></div>
-                  ) : (
-                    t('redeem:addToMyTrees')
-                  )}
+                <div className={styles.codeTreeCount}>
+                  <span>{t('redeem:successfullyRedeemed')}</span>
                 </div>
               </>
             ) : (
               <>
-                <div>
-                  {t('redeem:validating')} {code}
+                <div style={{ position: 'relative', left: '108px' }}>
+                  <button className={styles.crossButton} onClick={closeRedeem}>
+                    <CancelIcon />
+                  </button>
                 </div>
+                {errorMessage ? (
+                  <div style={{ fontWeight: 'bold' }}>{code}</div>
+                ) : (
+                  <div style={{ fontWeight: 'bold' }}>
+                    {t('redeem:redeeming')} {code}
+                  </div>
+                )}
 
-                {errorMessage && (
+                {errorMessage ? (
                   <span className={styles.formErrors}>{errorMessage}</span>
+                ) : (
+                  <div
+                    onClick={() => redeemCode(code)}
+                    className="primaryButton"
+                    style={{ maxWidth: '200px', marginTop: '24px' }}
+                  >
+                    {isUploadingData ? (
+                      <div className={styles.spinner}></div>
+                    ) : (
+                      t('redeem:redeemCode')
+                    )}
+                  </div>
                 )}
-                <div
-                  onClick={() => validateCode(code, type)}
-                  className="primaryButton"
-                  style={{ maxWidth: '200px', marginTop: '24px' }}
-                >
-                  {isUploadingData ? (
-                    <div className={styles.spinner}></div>
-                  ) : (
-                    t('redeem:validateCode')
-                  )}
-                </div>
               </>
             )}
           </div>

public/static/locales/en/redeem.json

@@ -5,6 +5,13 @@
   "addToMyTrees": "Add to my trees",
   "validateCode": "Validate Code",
   "enterRedeemCode": "Please enter a code to redeem",
-  "validating": "Validating",
-  "invalidType": "Invalid type, please check the link again"
+  "invalidType": "Invalid type, please check the link again",
+  "successfullyRedeemed": "Successfully Redeemed",
+  "exitToProfile": "Exit to Profile",
+  "redeemCode": "Redeem Code",
+  "alreadyRedeemed": "The code has already been redeemed",
+  "invalidCode": "This code is invalid",
+  "redeemAnotherCode": "Redeem Another Code",
+  "redeeming": "Redeeming:"
 }
+

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

@@ -1,6 +1,4 @@
-import React, { useEffect, useState } from 'react';
-import AppleIcon from '../../../../../public/assets/images/footer/AppStore';
-import GooglePlayIcon from '../../../../../public/assets/images/footer/GooglePlay';
+import React, { ReactElement, useEffect, useState } from 'react';
 import UNEPLogo from '../../../../../public/assets/images/footer/UNEPLogo';
 import World from '../../../../../public/assets/images/footer/World';
 import getLanguageName from '../../../../utils/language/getLanguageName';
@@ -15,7 +13,7 @@ import DarkModeSwitch from '../DarkModeSwitch.tsx';
 const { useTranslation } = i18next;
 
 // let styles = require('./Footer.module.css');
-export default function Footer() {
+export default function Footer(): ReactElement | null {
   const { t, i18n, ready } = useTranslation(['common']);
   const config = tenantConfig();
 
@@ -118,19 +116,6 @@ export default function Footer() {
                   {`${getLanguageName(language)} · ${selectedCurrency}`}
                 </p>
               </button>
-              <a href="https://play.google.com/store/apps/details?id=org.pftp">
-                <button id={'googleIcon'} className={styles.footer_button}>
-                  <GooglePlayIcon />
-                  <p className={styles.selected_language_bold}>Google Play</p>
-                </button>
-              </a>
-              <a href="https://apps.apple.com/us/app/plant-for-the-planet/id1444740626">
-                <button id={'appleIcon'} className={styles.footer_button}>
-                  <AppleIcon />
-                  <p className={styles.selected_language_bold}>App Store</p>
-                </button>
-              </a>
-
               <div className={styles.footer_social_container}>
                 <button id={'facebookIcon'}>
                   <a

src/features/common/Layout/ProjectPropsContext.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react';
+import { ParamsContext } from './QueryParamsContext';
 
 interface Props {}
 
@@ -109,6 +110,7 @@ function ProjectPropsProvider({ children }: any): ReactElement {
   const [filtersOpen, setFilterOpen] = React.useState(false);
   const [purpose, setPurpose] = React.useState('trees');
   const [plantLocationsLoaded, setPlantLocationsLoaded] = React.useState(false);
+  const { embed, showProjectList } = React.useContext(ParamsContext);
 
   const mapRef = React.useRef(null);
   const EMPTY_STYLE = {
@@ -123,7 +125,14 @@ function ProjectPropsProvider({ children }: any): ReactElement {
     minZoom: 1,
     maxZoom: 25,
   });
-  const defaultMapCenter = isMobile ? [22.54, 9.59] : [36.96, -28.5];
+  const isEmbed = embed === 'true' && showProjectList === 'false';
+  const defaultMapCenter = isMobile
+    ? isEmbed
+      ? [22.54, 0]
+      : [22.54, 9.59]
+    : isEmbed
+    ? [36.96, 0]
+    : [36.96, -28.5];
   const defaultZoom = isMobile ? 1 : 1.4;
   const [viewport, setViewPort] = React.useState({
     width: Number('100%'),

src/features/common/Layout/UserPropsContext.tsx

@@ -51,36 +51,37 @@ function UserPropsProvider({ children }: any): ReactElement {
     logout({ returnTo: returnUrl });
   };
 
-  React.useEffect(() => {
-    async function loadUser() {
-      setContextLoaded(false);
-      try {
-        const res = await getAccountInfo(token);
-        if (res.status === 200) {
-          const resJson = await res.json();
-          setUser(resJson);
-        } else if (res.status === 303) {
-          // if 303 -> user doesn not exist in db
-          setUser(null);
-          if (typeof window !== 'undefined') {
-            router.push('/complete-signup', undefined, { shallow: true });
-          }
-        } else if (res.status === 401) {
-          // in case of 401 - invalid token: signIn()
-          setUser(false);
-          setToken(null);
-          loginWithRedirect({
-            redirectUri: `${process.env.NEXTAUTH_URL}/login`,
-            ui_locales: localStorage.getItem('language') || 'en',
-          });
-        } else {
-          // any other error
+  async function loadUser() {
+    setContextLoaded(false);
+    try {
+      const res = await getAccountInfo(token);
+      if (res.status === 200) {
+        const resJson = await res.json();
+        setUser(resJson);
+      } else if (res.status === 303) {
+        // if 303 -> user doesn not exist in db
+        setUser(null);
+        if (typeof window !== 'undefined') {
+          router.push('/complete-signup', undefined, { shallow: true });
         }
-      } catch (err) {
-        console.log(err);
+      } else if (res.status === 401) {
+        // in case of 401 - invalid token: signIn()
+        setUser(false);
+        setToken(null);
+        loginWithRedirect({
+          redirectUri: `${process.env.NEXTAUTH_URL}/login`,
+          ui_locales: localStorage.getItem('language') || 'en',
+        });
+      } else {
+        // any other error
       }
-      setContextLoaded(true);
+    } catch (err) {
+      console.log(err);
     }
+    setContextLoaded(true);
+  }
+
+  React.useEffect(() => {
     if (token) loadUser();
   }, [token]);
 

src/features/projects/components/ProjectsMap.tsx

@@ -50,7 +50,7 @@ export default function ProjectsMap(): ReactElement {
   } = React.useContext(ProjectPropsContext);
 
   const { t } = useTranslation(['maps']);
-  const { embed } = React.useContext(ParamsContext);
+  const { embed, showProjectList } = React.useContext(ParamsContext);
   //Map
   const _onStateChange = (state: any) => setMapState({ ...state });
   const _onViewportChange = (view: any) => setViewPort({ ...view });
@@ -161,6 +161,17 @@ export default function ProjectsMap(): ReactElement {
     }
   }, [zoomLevel]);
 
+  React.useEffect(() => {
+    if (embed === 'true' && showProjectList === 'false') {
+      const newViewport = {
+        ...viewport,
+        latitude: 36.96,
+        longitude: 0,
+      };
+      setViewPort(newViewport);
+    }
+  }, [showProjectList]);
+
   return (
     <div
       className={