Feature/manage payouts

.eslintrc.js

@@ -21,6 +21,16 @@ module.exports = {
   },
   plugins: ['react', '@typescript-eslint', '@emotion', 'cypress'],
   rules: {
+    // note you must disable the base rule as it can report incorrect errors
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn', // or "error"
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
     'react/react-in-jsx-scope': 'off',
     'react/jsx-props-no-spreading': 'off',
     'no-use-before-define': 'off',

pages/_app.tsx

@@ -33,6 +33,7 @@ import { ThemeProvider as MuiThemeProvider } from '@mui/material';
 import materialTheme from '../src/theme/themeStyles';
 import QueryParamsProvider from '../src/features/common/Layout/QueryParamsContext';
 import { PlanetCashProvider } from '../src/features/common/Layout/PlanetCashContext';
+import { PayoutsProvider } from '../src/features/common/Layout/PayoutsContext';
 
 const VideoContainer = dynamic(
   () => import('../src/features/common/LandingVideo'),
@@ -223,32 +224,34 @@ export default function PlanetWeb({ Component, pageProps, err }: any) {
                   <QueryParamsProvider>
                     <UserPropsProvider>
                       <PlanetCashProvider>
-                        <Layout>
-                          <ProjectPropsProvider>
-                            <BulkCodeProvider>
-                              {isMap ? (
-                                <>
-                                  {project ? (
-                                    <MapLayout />
-                                  ) : projects ? (
-                                    <MapLayout />
-                                  ) : null}
-                                  <div
-                                    style={
-                                      config.tenantName === 'planet' ||
-                                      config.tenantName === 'ttc'
-                                        ? {}
-                                        : { display: 'none' }
-                                    }
-                                  >
-                                    <PlayButton setshowVideo={setshowVideo} />
-                                  </div>
-                                </>
-                              ) : null}
-                              <Component {...ProjectProps} />
-                            </BulkCodeProvider>
-                          </ProjectPropsProvider>
-                        </Layout>
+                        <PayoutsProvider>
+                          <Layout>
+                            <ProjectPropsProvider>
+                              <BulkCodeProvider>
+                                {isMap ? (
+                                  <>
+                                    {project ? (
+                                      <MapLayout />
+                                    ) : projects ? (
+                                      <MapLayout />
+                                    ) : null}
+                                    <div
+                                      style={
+                                        config.tenantName === 'planet' ||
+                                        config.tenantName === 'ttc'
+                                          ? {}
+                                          : { display: 'none' }
+                                      }
+                                    >
+                                      <PlayButton setshowVideo={setshowVideo} />
+                                    </div>
+                                  </>
+                                ) : null}
+                                <Component {...ProjectProps} />
+                              </BulkCodeProvider>
+                            </ProjectPropsProvider>
+                          </Layout>
+                        </PayoutsProvider>
                       </PlanetCashProvider>
                     </UserPropsProvider>
                   </QueryParamsProvider>

pages/profile/payouts/add-bank-details.tsx

@@ -0,0 +1,21 @@
+import React, { ReactElement } from 'react';
+import UserLayout from '../../../src/features/common/Layout/UserLayout/UserLayout';
+import Head from 'next/head';
+import ManagePayouts, {
+  ManagePayoutTabs,
+} from '../../../src/features/user/ManagePayouts';
+import i18next from '../../../i18n';
+
+const { useTranslation } = i18next;
+
+export default function AddBankDetailsPage(): ReactElement {
+  const { t, ready } = useTranslation('me');
+  return (
+    <UserLayout>
+      <Head>
+        <title>{ready ? t('managePayouts.titleAddBankDetails') : ''}</title>
+      </Head>
+      <ManagePayouts step={ManagePayoutTabs.ADD_BANK_DETAILS} />
+    </UserLayout>
+  );
+}

pages/profile/payouts/edit-bank-details/[id].tsx

@@ -0,0 +1,22 @@
+import React, { ReactElement } from 'react';
+import UserLayout from '../../../../src/features/common/Layout/UserLayout/UserLayout';
+import Head from 'next/head';
+import ManagePayouts, {
+  ManagePayoutTabs,
+} from '../../../../src/features/user/ManagePayouts';
+import i18next from '../../../../i18n';
+
+const { useTranslation } = i18next;
+
+export default function EditBankDetailsPage(): ReactElement {
+  const { t, ready } = useTranslation('me');
+
+  return (
+    <UserLayout>
+      <Head>
+        <title>{ready ? t('managePayouts.titleEditBankDetails') : ''}</title>
+      </Head>
+      <ManagePayouts step={ManagePayoutTabs.OVERVIEW} isEdit={true} />
+    </UserLayout>
+  );
+}

pages/profile/payouts/index.tsx

@@ -0,0 +1,34 @@
+import React, { ReactElement, useState } from 'react';
+import TopProgressBar from '../../../src/features/common/ContentLoaders/TopProgressBar';
+import UserLayout from '../../../src/features/common/Layout/UserLayout/UserLayout';
+import Head from 'next/head';
+import ManagePayouts, {
+  ManagePayoutTabs,
+} from '../../../src/features/user/ManagePayouts';
+import i18next from '../../../i18n';
+
+const { useTranslation } = i18next;
+
+export default function OverviewPage(): ReactElement {
+  const { t, ready } = useTranslation('me');
+  const [progress, setProgress] = useState(0);
+
+  return (
+    <>
+      {progress > 0 && (
+        <div className={'topLoader'}>
+          <TopProgressBar progress={progress} />
+        </div>
+      )}
+      <UserLayout>
+        <Head>
+          <title>{ready ? t('managePayouts.titleOverview') : ''}</title>
+        </Head>
+        <ManagePayouts
+          step={ManagePayoutTabs.OVERVIEW}
+          setProgress={setProgress}
+        />
+      </UserLayout>
+    </>
+  );
+}

pages/profile/payouts/schedule.tsx

@@ -0,0 +1,21 @@
+import React, { ReactElement } from 'react';
+import UserLayout from '../../../src/features/common/Layout/UserLayout/UserLayout';
+import Head from 'next/head';
+import ManagePayouts, {
+  ManagePayoutTabs,
+} from '../../../src/features/user/ManagePayouts';
+import i18next from '../../../i18n';
+
+const { useTranslation } = i18next;
+
+export default function PayoutSchedulePage(): ReactElement {
+  const { t, ready } = useTranslation('me');
+  return (
+    <UserLayout>
+      <Head>
+        <title>{ready ? t('managePayouts.titlePayoutSchedule') : ''}</title>
+      </Head>
+      <ManagePayouts step={ManagePayoutTabs.PAYOUT_SCHEDULE} />
+    </UserLayout>
+  );
+}

public/assets/images/icons/BankAccountLoader.tsx

@@ -0,0 +1,76 @@
+import React, { ReactElement } from 'react';
+
+function BankAccountListLoader(): ReactElement {
+  return (
+    <svg
+      role="img"
+      width="100%"
+      height="100%"
+      aria-labelledby="loading-aria"
+      viewBox="0 0 700 360"
+      preserveAspectRatio="none"
+    >
+      <title id="loading-aria">Loading...</title>
+      <rect
+        x="0"
+        y="0"
+        width="100%"
+        height="100%"
+        clipPath="url(#clipPath)"
+        style={{ fill: 'url("#fill")' }}
+      ></rect>
+      <defs>
+        <clipPath id="clipPath">
+          <rect x="20" y="20" rx="3" ry="3" width="160" height="20" />
+          <rect x="20" y="80" rx="3" ry="3" width="100" height="20" />
+          <rect x="360" y="80" rx="3" ry="3" width="100" height="20" />
+          <rect x="20" y="110" rx="3" ry="3" width="60" height="10" />
+          <rect x="360" y="110" rx="3" ry="3" width="60" height="10" />
+          <rect x="20" y="150" rx="3" ry="3" width="100" height="20" />
+          <rect x="360" y="150" rx="3" ry="3" width="100" height="20" />
+          <rect x="20" y="180" rx="3" ry="3" width="60" height="10" />
+          <rect x="360" y="180" rx="3" ry="3" width="60" height="10" />
+          <rect x="20" y="220" rx="3" ry="3" width="100" height="20" />
+          <rect x="360" y="220" rx="3" ry="3" width="100" height="20" />
+          <rect x="20" y="250" rx="3" ry="3" width="60" height="10" />
+          <rect x="360" y="250" rx="3" ry="3" width="60" height="10" />
+          <rect x="20" y="290" rx="3" ry="3" width="100" height="20" />
+          <rect x="360" y="290" rx="3" ry="3" width="100" height="20" />
+          <rect x="20" y="320" rx="3" ry="3" width="60" height="10" />
+          <rect x="360" y="320" rx="3" ry="3" width="60" height="10" />
+        </clipPath>
+        <linearGradient id="fill">
+          <stop offset="0.599964" stopColor="#f3f3f3" stopOpacity="1">
+            <animate
+              attributeName="offset"
+              values="-2; -2; 1"
+              keyTimes="0; 0.25; 1"
+              dur="2s"
+              repeatCount="indefinite"
+            ></animate>
+          </stop>
+          <stop offset="1.59996" stopColor="#ecebeb" stopOpacity="1">
+            <animate
+              attributeName="offset"
+              values="-1; -1; 2"
+              keyTimes="0; 0.25; 1"
+              dur="2s"
+              repeatCount="indefinite"
+            ></animate>
+          </stop>
+          <stop offset="2.59996" stopColor="#f3f3f3" stopOpacity="1">
+            <animate
+              attributeName="offset"
+              values="0; 0; 3"
+              keyTimes="0; 0.25; 1"
+              dur="2s"
+              repeatCount="indefinite"
+            ></animate>
+          </stop>
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
+
+export default BankAccountListLoader;

public/static/locales/en/managePayouts.json

@@ -0,0 +1,73 @@
+{
+  "title": "Manage Payouts",
+  "description": "Keep your payout information updated (e.g. schedule, bank details) to facilitate smooth payouts",
+  "tabPayoutSchedule": "Payout Schedule",
+  "tabAddBankDetails": "Add Bank Details",
+  "tabOverview": "Overview",
+  "payoutInformation1": "Payouts are processed automatically every year, or when an organization collects 30,000 EUR or its equivalent in other currency.",
+  "payoutInformation2": "Payouts are issued by Plant-for-the-Planet Foundation and its sister organizations eg: Plant-for-the-Planet US, Plant-for-the-Planet Switzerland etc.",
+  "payoutInformation3": "You can adjust the payout schedule and receive frequent payouts as long as you meet the 1,500 EUR minimum amount criteria.",
+  "supportInformation": "If you have an exceptional case, please contact<1></1><2>support@plant-for-the-planet.org</2>.",
+  "scheduleFrequencies": {
+    "monthly": "Monthly",
+    "quarterly": "Quarterly",
+    "semiannually": "Semi-Annual",
+    "annually": "Annual",
+    "manual": "Manual"
+  },
+  "defaultCurrency": "Default",
+  "labels": {
+    "currency": "Currency",
+    "scheduleFrequency": "Payment Frequency",
+    "payoutMinAmount": "Minimum Payout Amount",
+    "bankName": "Bank Name",
+    "bankAddress": "Bank Address",
+    "holderName": "Name of Account Holder",
+    "holderAddress": "Address of Account Holder",
+    "remarks": "Additional Details",
+    "accountNumber": "IBAN / Account Number",
+    "routingNumber": "ABA / Routing Number (US Only)",
+    "bic": "BIC / SWIFT",
+    "branchCode": "Branch Code"
+  },
+  "errors": {
+    "scheduleFrequencyRequired": "Payment frequency is required",
+    "payoutMinAmountRequired": "Minimum payout amount is required",
+    "payoutMinAmountTooLow": "Minimum payout amount should be at least {{currency}} {{minAmount}}",
+    "bankNameRequired": "Bank name is required.",
+    "bankAddressRequired": "Bank address is required.",
+    "holderNameRequired": "Holder name is required.",
+    "holderAddressRequired": "Holder address is required.",
+    "accountNumberRequired": "Account number is required.",
+    "bicRequired": "BIC / SWIFT code is required.",
+    "noAccountFound": "No account was retrieved"
+  },
+  "placeholders": {
+    "payoutMinAmount": "Should be at least {{currency}} {{minAmount}}",
+    "bankName": "e.g. Century Bank LLC",
+    "bankAddress": "e.g. 1 West St, Hamington Way, MA, 10311, USA",
+    "holderName": "e.g. John Doe",
+    "holderAddress": "e.g. 21 Penn Avenue, MA 10317 USA",
+    "remarks": "e.g. Please include ref acct=1237 on the transfer."
+  },
+  "helperText": {
+    "currency": "Select “Default” if this is your standard bank account, if you need to provide special details for a currency please select it here and provide the details. We will also use the standard minimum amounts for a payout.",
+    "remarks": "Provide additional details, for example Intermediary Bank Details, PCs (Purpose Codes) or other References here."
+  },
+  "saveButton": "Save",
+  "accountError": {
+    "min_amount_range": "The minimum payout amount must be at least {{currency}} {{min}}.",
+    "min_amount_forbidden": "You may not specify a payout minimum amount for the default account.",
+    "account_duplicate": "There is already a {{currency}} account.",
+    "default": "Something went wrong while creating an account. Please try after a while."
+  },
+  "accountCreationSuccess": "Your account details were successfully saved.",
+  "accountUpdationSuccess": "Your account details were successfully updated.",
+  "scheduleSaveSuccess": "Your payout schedule was successfully saved.",
+  "editAccountButton": "Edit Account",
+  "accountTitleText": "Transfer for {{currency}}",
+  "addBankDetailsButton": "Add Bank Details",
+  "noBankAccountText": "You haven't added any bank details yet.",
+  "editBankAccountTitle": "Edit Account",
+  "minPayoutText": "Min. Payout: {{amount}}"
+}

public/static/locales/en/manageProjects.json

@@ -189,5 +189,6 @@
   "onlyEnglish": "Please create/edit projects in English only. Translations of Projects are managed automatically by Plant-for-the-Planet.",
   "since": "since",
   "Since": "Since",
-  "and": "and"
+  "and": "and",
+  "managePayoutsButton": "Manage Payouts"
 }

public/static/locales/en/me.json

@@ -1,4 +1,11 @@
 {
+  "managePayouts": {
+    "menuText": "Manage Payouts",
+    "titleOverview": "Manage Payouts - Overview",
+    "titleAddBankDetails": "Manage Payouts - Add Bank Details",
+    "titlePayoutSchedule": "Manage Payouts - Schedule Payouts",
+    "titleEditBankDetails": "Manage Payouts - Edit Bank Details"
+  },
   "donationLinkTitle": "Build Donation Link",
   "planetcash": {
     "menuText": "PlanetCash",