Add Donation Receipt functionality and UI improvements

global.d.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+
 // Use type safe message keys with `next-intl`
 type MessagesAllProjects =
   typeof import('./public/static/locales/en/allProjects.json');
@@ -8,6 +10,8 @@ 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 MessagesDonationReceipt =
+  typeof import('./public/static/locales/en/donationReceipt.json');
 type MessagesEditProfile =
   typeof import('./public/static/locales/en/editProfile.json');
 type MessagesGiftfunds =
@@ -42,6 +46,7 @@ type Messages = MessagesAllProjects &
   MessagesCountry &
   MessagesDonate &
   MessagesDonationLink &
+  MessagesDonationReceipt &
   MessagesEditProfile &
   MessagesGiftfunds &
   MessagesLeaderboard &

i18n.ts

@@ -13,6 +13,8 @@ export default getRequestConfig(async ({ locale }) => {
     ...(await import(`./public/static/locales/${locale}/donate.json`)).default,
     ...(await import(`./public/static/locales/${locale}/donationLink.json`))
       .default,
+    ...(await import(`./public/static/locales/${locale}/donationReceipt.json`))
+      .default,
     ...(await import(`./public/static/locales/${locale}/editProfile.json`))
       .default,
     ...(await import(`./public/static/locales/${locale}/giftfunds.json`))
@@ -50,6 +52,8 @@ export default getRequestConfig(async ({ locale }) => {
     ...(await import(`./public/static/locales/en/country.json`)).default,
     ...(await import(`./public/static/locales/en/donate.json`)).default,
     ...(await import(`./public/static/locales/en/donationLink.json`)).default,
+    ...(await import(`./public/static/locales/en/donationReceipt.json`))
+      .default,
     ...(await import(`./public/static/locales/en/editProfile.json`)).default,
     ...(await import(`./public/static/locales/en/giftfunds.json`)).default,
     ...(await import(`./public/static/locales/en/leaderboard.json`)).default,

package.json

@@ -25,7 +25,7 @@
     "prepare": "node ./husky-prepare.js"
   },
   "validate-branch-name": {
-    "pattern": "^(main|develop){1}$|^(feature|hotfix|address-mgmt)/[a-z0-9-_]+$",
+    "pattern": "^(main|develop){1}$|^(feature|hotfix|tax-receipt)/[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": {

pages/_app.tsx

@@ -52,6 +52,7 @@
   getTenantSlug,
 } from '../src/utils/multiTenancy/helpers';
 import { NextIntlClientProvider } from 'next-intl';
+import { DonationReceiptProvider } from '../src/features/common/Layout/DonationReceiptContext';
 
 const VideoContainer = dynamic(
   () => import('../src/features/common/LandingVideo'),
@@ -144,30 +145,30 @@
   isMobile: boolean;
 };
 
 const PlanetWeb = ({
   Component,
   pageProps,
   emotionCache = clientSideEmotionCache,
 }: AppPropsWithLayout) => {
   const router = useRouter();
   const [isMap, setIsMap] = React.useState(false);
   const [currencyCode, setCurrencyCode] = React.useState('');
   const [browserCompatible, setBrowserCompatible] = React.useState(false);
 
   const { tenantConfig } = pageProps;
 
   const tagManagerArgs = {
     gtmId: process.env.NEXT_PUBLIC_GA_TRACKING_ID,
   };
 
   if (process.env.NODE_ENV !== 'production') {
     if (process.env.VERCEL_URL && typeof window !== 'undefined') {
       if (process.env.VERCEL_URL !== window.location.hostname) {
         router.replace(`https://${process.env.VERCEL_URL}`);
       }
     }
   }
 
   React.useEffect(() => {
     storeConfig(tenantConfig);
   }, []);
@@ -302,12 +303,14 @@
                                     <ProjectPropsProvider>
                                       <BulkCodeProvider>
                                         <AnalyticsProvider>
-                                          {isMap ? (
-                                            <MapHolder
-                                              setshowVideo={setshowVideo}
-                                            />
-                                          ) : null}
-                                          {pageContent}
+                                          <DonationReceiptProvider>
+                                            {isMap ? (
+                                              <MapHolder
+                                                setshowVideo={setshowVideo}
+                                              />
+                                            ) : null}
+                                            {pageContent}
+                                          </DonationReceiptProvider>
                                         </AnalyticsProvider>
                                       </BulkCodeProvider>
                                     </ProjectPropsProvider>

pages/sites/[slug]/[locale]/profile/donation-receipt/donor-contact-management.tsx

@@ -0,0 +1,74 @@
+import type {
+  GetStaticPaths,
+  GetStaticProps,
+  GetStaticPropsContext,
+  GetStaticPropsResult,
+} from 'next';
+import type { AbstractIntlMessages } from 'next-intl';
+import type { Tenant } from '@planet-sdk/common';
+
+import Head from 'next/head';
+import { useTranslations } from 'next-intl';
+import UserLayout from '../../../../../../src/features/common/Layout/UserLayout/UserLayout';
+import DonorContactManagement from '../../../../../../src/features/user/DonationReceipt/DonorContactManagement';
+import {
+  constructPathsForTenantSlug,
+  getTenantConfig,
+} from '../../../../../../src/utils/multiTenancy/helpers';
+import { defaultTenant } from '../../../../../../tenant.config';
+import getMessagesForPage from '../../../../../../src/utils/language/getMessagesForPage';
+
+export default function ModifyDonorData() {
+  const t = useTranslations('DonationReceipt');
+  return (
+    <UserLayout>
+      <Head>
+        <title>{t('donorContactManagement')}</title>
+      </Head>
+      <DonorContactManagement />
+    </UserLayout>
+  );
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const subDomainPaths = await constructPathsForTenantSlug();
+
+  const paths =
+    subDomainPaths?.map((path) => {
+      return {
+        params: {
+          slug: path.params.slug,
+          locale: 'en',
+        },
+      };
+    }) ?? [];
+
+  return {
+    paths,
+    fallback: 'blocking',
+  };
+};
+
+interface PageProps {
+  messages: AbstractIntlMessages;
+  tenantConfig: Tenant;
+}
+
+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', 'me', 'country', 'donationReceipt', 'editProfile'],
+  });
+
+  return {
+    props: {
+      messages,
+      tenantConfig,
+    },
+  };
+};

pages/sites/[slug]/[locale]/profile/donation-receipt/index.tsx

@@ -0,0 +1,74 @@
+import type {
+  GetStaticPaths,
+  GetStaticProps,
+  GetStaticPropsContext,
+  GetStaticPropsResult,
+} from 'next';
+import type { Tenant } from '@planet-sdk/common';
+import type { AbstractIntlMessages } from 'next-intl';
+
+import { useTranslations } from 'next-intl';
+import Head from 'next/head';
+import UserLayout from '../../../../../../src/features/common/Layout/UserLayout/UserLayout';
+import DonationReceipts from '../../../../../../src/features/user/DonationReceipt/DonationReceipts';
+import {
+  constructPathsForTenantSlug,
+  getTenantConfig,
+} from '../../../../../../src/utils/multiTenancy/helpers';
+import { defaultTenant } from '../../../../../../tenant.config';
+import getMessagesForPage from '../../../../../../src/utils/language/getMessagesForPage';
+
+export default function DonationReceiptsPage() {
+  const t = useTranslations('DonationReceipt');
+  return (
+    <UserLayout>
+      <Head>
+        <title>{t('receipts')}</title>
+      </Head>
+      <DonationReceipts />
+    </UserLayout>
+  );
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const subDomainPaths = await constructPathsForTenantSlug();
+
+  const paths =
+    subDomainPaths?.map((path) => {
+      return {
+        params: {
+          slug: path.params.slug,
+          locale: 'en',
+        },
+      };
+    }) ?? [];
+
+  return {
+    paths,
+    fallback: 'blocking',
+  };
+};
+
+interface PageProps {
+  messages: AbstractIntlMessages;
+  tenantConfig: Tenant;
+}
+
+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', 'me', 'country', 'donationReceipt'],
+  });
+
+  return {
+    props: {
+      messages,
+      tenantConfig,
+    },
+  };
+};

pages/sites/[slug]/[locale]/profile/donation-receipt/verify.tsx

@@ -0,0 +1,89 @@
+import type {
+  GetStaticPaths,
+  GetStaticProps,
+  GetStaticPropsContext,
+  GetStaticPropsResult,
+} from 'next';
+import type { Tenant } from '@planet-sdk/common';
+import { useTranslations, type AbstractIntlMessages } from 'next-intl';
+
+import Head from 'next/head';
+import UserLayout from '../../../../../../src/features/common/Layout/UserLayout/UserLayout';
+import {
+  constructPathsForTenantSlug,
+  getTenantConfig,
+} from '../../../../../../src/utils/multiTenancy/helpers';
+import { defaultTenant } from '../../../../../../tenant.config';
+import getMessagesForPage from '../../../../../../src/utils/language/getMessagesForPage';
+import { useTenant } from '../../../../../../src/features/common/Layout/TenantContext';
+import DonationReceiptAuthenticated from '../../../../../../src/features/user/DonationReceipt/DonationReceiptAuthenticated';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+export default function DonationReceiptPage({
+  pageProps: { tenantConfig },
+}: Props) {
+  const router = useRouter();
+  const { setTenantConfig } = useTenant();
+  const tReceipt = useTranslations('DonationReceipt');
+
+  useEffect(() => {
+    if (router.isReady) setTenantConfig(tenantConfig);
+  }, [router.isReady]);
+
+  return (
+    <UserLayout>
+      <Head>
+        <title>{tReceipt('receipts')}</title>
+      </Head>
+      <DonationReceiptAuthenticated />
+    </UserLayout>
+  );
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const subDomainPaths = await constructPathsForTenantSlug();
+
+  const paths =
+    subDomainPaths?.map((path) => {
+      return {
+        params: {
+          slug: path.params.slug,
+          locale: 'en',
+        },
+      };
+    }) ?? [];
+
+  return {
+    paths,
+    fallback: 'blocking',
+  };
+};
+
+interface PageProps {
+  messages: AbstractIntlMessages;
+  tenantConfig: Tenant;
+}
+
+interface Props {
+  pageProps: PageProps;
+}
+
+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', 'me', 'country', 'donationReceipt'],
+  });
+
+  return {
+    props: {
+      messages,
+      tenantConfig,
+    },
+  };
+};

pages/sites/[slug]/[locale]/verify-receipt-data.tsx

@@ -0,0 +1,79 @@
+import type {
+  GetStaticPaths,
+  GetStaticProps,
+  GetStaticPropsContext,
+  GetStaticPropsResult,
+} from 'next';
+import type { AbstractIntlMessages } from 'next-intl';
+import type { Tenant } from '@planet-sdk/common/build/types/tenant';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import {
+  constructPathsForTenantSlug,
+  getTenantConfig,
+} from '../../../../src/utils/multiTenancy/helpers';
+import getMessagesForPage from '../../../../src/utils/language/getMessagesForPage';
+import { defaultTenant } from '../../../../tenant.config';
+import { useTenant } from '../../../../src/features/common/Layout/TenantContext';
+import DonationReceiptUnauthenticated from '../../../../src/features/user/DonationReceipt/DonationReceiptUnauthenticated';
+
+interface PageProps {
+  messages: AbstractIntlMessages;
+  tenantConfig: Tenant;
+}
+
+interface Props {
+  pageProps: PageProps;
+}
+
+export default function DonationReceipt({
+  pageProps: { tenantConfig },
+}: Props) {
+  const router = useRouter();
+  const { setTenantConfig } = useTenant();
+
+  useEffect(() => {
+    if (router.isReady) setTenantConfig(tenantConfig);
+  }, [router.isReady]);
+
+  return <DonationReceiptUnauthenticated />;
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const subDomainPaths = await constructPathsForTenantSlug();
+
+  const paths =
+    subDomainPaths?.map((path) => {
+      return {
+        params: {
+          slug: path.params.slug,
+          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', 'me', 'country', 'donationReceipt'],
+  });
+
+  return {
+    props: {
+      messages,
+      tenantConfig,
+    },
+  };
+};