Merge from 'develop' to salesforce branch

.env.local.example

@@ -22,4 +22,8 @@ NEXT_PUBLIC_DONATION_URL=https://donate.plant-for-the-planet.org
 CONFIG_URL=https://app.plant-for-the-planet.org/app/config
 VERCEL_URL=localhost
 
-DB_CONN_URL=
+DB_CONN_URL=
+
+#Redis
+REDIS_URL=
+REDIS_TOKEN=

.github/workflows/chromatic.yml

@@ -7,7 +7,7 @@ name: 'Chromatic'
 on:
   push:
     branches:
-      - feature/storybook-update
+      - hotfix/chromatic-build-issue
       - develop
 # List of jobs
 jobs:

.storybook/i18n.js

@@ -1,18 +1,102 @@
-import i18n from 'i18next';
-import Backend from 'i18next-http-backend';
-import LanguageDetector from 'i18next-browser-languagedetector';
-import { initReactI18next } from 'react-i18next';
+import bulkCodes from '../public/static/locales/en/bulkCodes.json';
+import common from '../public/static/locales/en/common.json';
+import country from '../public/static/locales/en/country.json';
+import donate from '../public/static/locales/en/donate.json';
+import donationLink from '../public/static/locales/en/donationLink.json';
+import editProfile from '../public/static/locales/en/editProfile.json';
+import giftfunds from '../public/static/locales/en/giftfunds.json';
+import leaderboard from '../public/static/locales/en/leaderboard.json';
+import managePayouts from '../public/static/locales/en/managePayouts.json';
+import manageProjects from '../public/static/locales/en/manageProjects.json';
+import maps from '../public/static/locales/en/maps.json';
+import me from '../public/static/locales/en/me.json';
+import planet from '../public/static/locales/en/planet.json';
+import planetcash from '../public/static/locales/en/planetcash.json';
+import profile from '../public/static/locales/en/profile.json';
+import project from '../public/static/locales/en/project.json';
+import redeem from '../public/static/locales/en/redeem.json';
+import registerTrees from '../public/static/locales/en/registerTrees.json';
+import tenants from '../public/static/locales/en/tenants.json';
+import treemapper from '../public/static/locales/en/treemapper.json';
+import treemapperAnalytics from '../public/static/locales/en/treemapperAnalytics.json';
 
-i18n
-  .use(Backend)
-  .use(LanguageDetector)
-  .use(initReactI18next)
-  .init({
-    fallbackLng: 'en',
-    debug: true,
-    backend: {
-      loadPath: '/static/locales/{{lng}}/{{ns}}.json',
-    },
-  });
+import bulkCodesDE from '../public/static/locales/de/bulkCodes.json';
+import commonDE from '../public/static/locales/de/common.json';
+import countryDE from '../public/static/locales/de/country.json';
+import donateDE from '../public/static/locales/de/donate.json';
+import donationLinkDE from '../public/static/locales/de/donationLink.json';
+import editProfileDE from '../public/static/locales/de/editProfile.json';
+import giftfundsDE from '../public/static/locales/de/giftfunds.json';
+import leaderboardDE from '../public/static/locales/de/leaderboard.json';
+import managePayoutsDE from '../public/static/locales/de/managePayouts.json';
+import manageProjectsDE from '../public/static/locales/de/manageProjects.json';
+import mapsDE from '../public/static/locales/de/maps.json';
+import meDE from '../public/static/locales/de/me.json';
+import planetDE from '../public/static/locales/de/planet.json';
+import planetcashDE from '../public/static/locales/de/planetcash.json';
+import profileDE from '../public/static/locales/de/profile.json';
+import projectDE from '../public/static/locales/de/project.json';
+import redeemDE from '../public/static/locales/de/redeem.json';
+import registerTreesDE from '../public/static/locales/de/registerTrees.json';
+import tenantsDE from '../public/static/locales/de/tenants.json';
+import treemapperDE from '../public/static/locales/de/treemapper.json';
+import treemapperAnalyticsDE from '../public/static/locales/de/treemapperAnalytics.json';
 
-export default i18n;
+import deepmerge from 'deepmerge';
+
+const messages_en = {
+  ...bulkCodes,
+  ...common,
+  ...country,
+  ...donate,
+  ...donationLink,
+  ...editProfile,
+  ...giftfunds,
+  ...leaderboard,
+  ...managePayouts,
+  ...manageProjects,
+  ...maps,
+  ...me,
+  ...planet,
+  ...planetcash,
+  ...profile,
+  ...project,
+  ...redeem,
+  ...registerTrees,
+  ...tenants,
+  ...treemapper,
+  ...treemapperAnalytics,
+};
+
+const messages_de = {
+  ...bulkCodesDE,
+  ...commonDE,
+  ...countryDE,
+  ...donateDE,
+  ...donationLinkDE,
+  ...editProfileDE,
+  ...giftfundsDE,
+  ...leaderboardDE,
+  ...managePayoutsDE,
+  ...manageProjectsDE,
+  ...mapsDE,
+  ...meDE,
+  ...planetDE,
+  ...planetcashDE,
+  ...profileDE,
+  ...projectDE,
+  ...redeemDE,
+  ...registerTreesDE,
+  ...tenantsDE,
+  ...treemapperDE,
+  ...treemapperAnalyticsDE,
+};
+
+const getMessages = (locale) => {
+  if (locale === 'de') {
+    return deepmerge(messages_en, messages_de);
+  }
+  return messages_en;
+};
+
+export default getMessages;

.storybook/main.js

@@ -34,4 +34,9 @@ module.exports = {
   docs: {
     autodocs: true,
   },
+
+  env: (config) => ({
+    ...config,
+    STORYBOOK_IS_STORYBOOK: true,
+  }),
 };

.storybook/preview.js

@@ -3,11 +3,14 @@ import './storybook.scss';
 import { ThemeProvider as MUIThemeProvider } from '@mui/material';
 import materialTheme from '../src/theme/themeStyles';
 import { ThemeProvider } from '@storybook/theming';
-import { I18nextProvider } from 'react-i18next';
-import i18n from './i18n';
-import { useEffect } from 'react';
+import getMessages from './i18n';
+import { NextIntlClientProvider } from 'next-intl';
+import { TenantProvider } from '../src/features/common/Layout/TenantContext';
+import { UserPropsProvider } from '../src/features/common/Layout/UserPropsContext';
+import { lazy } from 'react';
+import { useTheme } from '../src/theme/themeContext';
 
-// import { ThemeProvider } from 'emotion-theming';
+const globalStyles = lazy(() => import('../src/theme/theme'));
 
 /*
  * Global decorator to apply the styles to all stories
@@ -16,20 +19,28 @@ import { useEffect } from 'react';
  */
 export const decorators = [
   (Story, context) => {
-    const { locale } = context.globals;
-
-    useEffect(() => {
-      i18n.changeLanguage(locale);
-    }, [locale]);
+    const locale = context.globals.locale;
+    const { theme: themeType } = useTheme();
 
     return (
-      <I18nextProvider i18n={i18n}>
-        <MUIThemeProvider theme={materialTheme}>
-          <ThemeProvider theme={materialTheme}>
-            <Story />
-          </ThemeProvider>
-        </MUIThemeProvider>
-      </I18nextProvider>
+      <NextIntlClientProvider messages={getMessages(locale)} locale={locale}>
+        <style>{globalStyles}</style>
+        <div
+          className={`${themeType}`}
+          style={{ backgroundColor: 'transparent' }}
+        >
+          <MUIThemeProvider theme={materialTheme}>
+            {/* TenantProvider and UserPropsProvider are added for ProfileCard storybook to function properly */}
+            <TenantProvider>
+              <UserPropsProvider>
+                <ThemeProvider theme={materialTheme}>
+                  <Story />
+                </ThemeProvider>
+              </UserPropsProvider>
+            </TenantProvider>
+          </MUIThemeProvider>
+        </div>
+      </NextIntlClientProvider>
     );
   },
 ];
@@ -48,6 +59,7 @@ export const globalTypes = {
   locale: {
     name: 'Locale',
     description: 'Internationalization locale',
+    defaultValue: 'en',
     toolbar: {
       icon: 'globe',
       items: [

app.json

@@ -59,6 +59,11 @@
     "SITE_IMAGERY_API_URL": {
       "required": false,
       "description": "For showing vegetation change"
+    },
+    "WEBHOOK_URL": {
+      "required": true,
+      "description": "URL for webhooks of automation service",
+      "value": "https://automate.plant-for-the-planet.org/webhook"
     }
   },
   "formation": {

folderCrawler.js

@@ -0,0 +1,32 @@
+const fs = require('fs');
+const path = require('path');
+
+function crawlFolderStructure(rootDir) {
+  const files = [];
+  function crawlDirectory(dir) {
+    const items = fs.readdirSync(dir);
+
+    for (const item of items) {
+      const itemPath = path.join(dir, item);
+      const stats = fs.statSync(itemPath);
+
+      if (stats.isDirectory()) {
+        crawlDirectory(itemPath); // Recursive call for subdirectories
+      } else {
+        files.push(`/${path.relative(rootDir, itemPath).replace(/\[.*?\]/g, ':path').replace(/\/?index\.tsx?$/, '').replace(/\.tsx?$/, '')}`); // Add modified file path to the array
+      }
+    }
+  }
+  try {
+    crawlDirectory(rootDir);
+    return files;
+  } catch (error) {
+    console.error('Error while crawling:', error.message);
+    return [];
+  }
+}
+
+const scriptDir = __dirname;
+const rootPath = path.join(scriptDir, 'pages');
+const fileList = crawlFolderStructure(rootPath);
+console.log(fileList);

global.d.ts

@@ -0,0 +1,57 @@
+// Use type safe message keys with `next-intl`
+type MessagesBulkCodes =
+  typeof import('./public/static/locales/en/bulkCodes.json');
+type MessagesCommon = typeof import('./public/static/locales/en/common.json');
+type MessagesCountry = typeof import('./public/static/locales/en/country.json');
+type MessagesDonate = typeof import('./public/static/locales/en/donate.json');
+type MessagesDonationLink =
+  typeof import('./public/static/locales/en/donationLink.json');
+type MessagesEditProfile =
+  typeof import('./public/static/locales/en/editProfile.json');
+type MessagesGiftfunds =
+  typeof import('./public/static/locales/en/giftfunds.json');
+type MessagesLeaderboard =
+  typeof import('./public/static/locales/en/leaderboard.json');
+type MessagesManagePayouts =
+  typeof import('./public/static/locales/en/managePayouts.json');
+type MessagesManageProjects =
+  typeof import('./public/static/locales/en/manageProjects.json');
+type MessagesMaps = typeof import('./public/static/locales/en/maps.json');
+type MessagesMe = typeof import('./public/static/locales/en/me.json');
+type MessagesPlanet = typeof import('./public/static/locales/en/planet.json');
+type MessagesPlanetcash =
+  typeof import('./public/static/locales/en/planetcash.json');
+type MessagesProfile = typeof import('./public/static/locales/en/profile.json');
+type MessagesProject = typeof import('./public/static/locales/en/project.json');
+type MessagesRedeem = typeof import('./public/static/locales/en/redeem.json');
+type MessagesRegisterTrees =
+  typeof import('./public/static/locales/en/registerTrees.json');
+type MessagesTenants = typeof import('./public/static/locales/en/tenants.json');
+type MessagesTreemapper =
+  typeof import('./public/static/locales/en/treemapper.json');
+type MessagesTreemapperAnalytics =
+  typeof import('./public/static/locales/en/treemapperAnalytics.json');
+
+type Messages = MessagesBulkCodes &
+  MessagesCommon &
+  MessagesCountry &
+  MessagesDonate &
+  MessagesDonationLink &
+  MessagesEditProfile &
+  MessagesGiftfunds &
+  MessagesLeaderboard &
+  MessagesManagePayouts &
+  MessagesManageProjects &
+  MessagesMaps &
+  MessagesMe &
+  MessagesPlanet &
+  MessagesPlanetcash &
+  MessagesProfile &
+  MessagesProject &
+  MessagesRedeem &
+  MessagesRegisterTrees &
+  MessagesTenants &
+  MessagesTreemapper &
+  MessagesTreemapperAnalytics;
+
+declare interface IntlMessages extends Messages {}

i18n-config.ts

@@ -0,0 +1,7 @@
+// i18n config for next-intl
+export const i18nConfig = {
+  defaultLocale: 'en',
+  locales: ['en', 'de', 'cs', 'es', 'fr', 'it', 'pt-BR'],
+};
+
+export type Locale = (typeof i18nConfig)['locales'][number];