Tax receipt/verification page

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

@@ -0,0 +1,84 @@
+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 DonorReceiptLayout from '../../../../src/features/user/DonorReceipt/DonorReceiptLayout';
+import { DonorReceiptProvider } from '../../../../src/features/common/Layout/DonorReceiptContext';
+
+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 (
+    <DonorReceiptProvider>
+      <DonorReceiptLayout />
+    </DonorReceiptProvider>
+  );
+}
+
+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', 'donate'],
+  });
+
+  return {
+    props: {
+      messages,
+      tenantConfig,
+    },
+  };
+};

public/static/locales/en/donate.json

@@ -110,6 +110,21 @@
     "projectType": "Project Type",
     "restoration": "Restoration",
     "filters": "Filters",
-    "perM2": "per m²"
+    "perM2": "per m²",
+    "donationReceipt": {
+      "verifyTaxHeaderPrimary": "Verify your data to download tax receipt",
+      "verifyTaxHeaderSecondary": "once the data is verified, it can not be changed again for this receipt",
+      "downloadTaxReceipt": "Download tax receipt",
+      "referenceNumber": "Reference Number",
+      "amountDonated": "Amount Donated",
+      "paymentDate": "Payment Date",
+      "recipientInfoHeader": "Receipt will be issued to",
+      "taxIdentificationNumber": "Tax Identification Number (TIN)",
+      "modifyContactInformation": "Modify Contact Information",
+      "confirm": "Confirm",
+      "download": "Download",
+      "donationAmount": "{currency, select, EUR {€} USD {$} other {}} {amount}",
+      "name": "{type, select, individual {Name} organization {Company Name} other {}}"
+    }
   }
 }

src/features/common/Layout/DonorReceiptContext.tsx

@@ -0,0 +1,54 @@
+import type { FC } from 'react';
+import type {
+  ReceiptData,
+  ReceiptDataAPI,
+} from '../../user/DonorReceipt/donorReceipt';
+
+import { useMemo, useState, createContext, useContext } from 'react';
+import { formatReceiptData } from '../../user/DonorReceipt/utils';
+
+interface DonorReceiptContextInterface {
+  donorReceiptData: ReceiptData | null;
+  updateDonorReceiptData: (data: Partial<ReceiptDataAPI>) => void;
+}
+
+const DonorReceiptContext = createContext<DonorReceiptContextInterface | null>(
+  null
+);
+
+export const DonorReceiptProvider: FC = ({ children }) => {
+  const [donorReceiptData, setDonorReceiptData] = useState<ReceiptData | null>(
+    null
+  );
+
+  const updateDonorReceiptData = (data: Partial<ReceiptDataAPI>) => {
+    const formattedData = formatReceiptData(data);
+    setDonorReceiptData((prevState) => ({
+      ...prevState,
+      ...formattedData,
+    }));
+  };
+
+  const value: DonorReceiptContextInterface = useMemo(
+    () => ({
+      donorReceiptData,
+      updateDonorReceiptData,
+    }),
+    [updateDonorReceiptData, donorReceiptData]
+  );
+
+  return (
+    <DonorReceiptContext.Provider value={value}>
+      {children}
+    </DonorReceiptContext.Provider>
+  );
+};
+
+export const useDonorReceipt = (): DonorReceiptContextInterface => {
+  const context = useContext(DonorReceiptContext);
+  if (!context)
+    throw new Error(
+      'DonorReceiptContext must be used within DonorReceiptProvider'
+    );
+  return context;
+};

src/features/user/DonorReceipt/DonorReceiptLayout.tsx

@@ -0,0 +1,74 @@
+import type { ReceiptDataAPI } from './donorReceipt';
+import type { APIError } from '@planet-sdk/common';
+
+import { useContext, useEffect, useState } from 'react';
+import { handleError } from '@planet-sdk/common';
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+import { useRouter } from 'next/router';
+import { useDonorReceipt } from '../../common/Layout/DonorReceiptContext';
+import styles from './donationReceipt.module.scss';
+import ReceiptDataSection from './microComponents/ReceiptDataSection';
+import ReceiptVerificationHeader from './microComponents/ReceiptVerificationHeader';
+import ReceiptListRedirect from './microComponents/ReceiptListRedirect';
+import { useTenant } from '../../common/Layout/TenantContext';
+import { getRequest } from '../../../utils/apiRequests/api';
+import { ErrorHandlingContext } from '../../common/Layout/ErrorHandlingContext';
+
+export const DonorReceiptLayout = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const { tenantConfig } = useTenant();
+  const { setErrors, redirect } = useContext(ErrorHandlingContext);
+  const router = useRouter();
+  const { dtn, year, challenge } = router.query;
+  const { updateDonorReceiptData, donorReceiptData } = useDonorReceipt();
+  const showReceipt = !isLoading && donorReceiptData !== null;
+
+  useEffect(() => {
+    if (!(dtn || year || challenge || router.isReady)) return;
+    if (
+      typeof dtn !== 'string' ||
+      typeof year !== 'string' ||
+      typeof challenge !== 'string'
+    )
+      return;
+    const fetchReceiptData = async () => {
+      setIsLoading(true);
+      try {
+        const data = await getRequest<ReceiptDataAPI>({
+          tenant: tenantConfig.id,
+          url: '/app/donationReceipt',
+          queryParams: {
+            dtn,
+            year,
+            challenge,
+          },
+        });
+        if (data) updateDonorReceiptData(data);
+      } catch (err) {
+        setErrors(handleError(err as APIError));
+        redirect('/');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchReceiptData();
+  }, [dtn, year, challenge, router.isReady]);
+
+  return showReceipt ? (
+    <div className={styles.donorReceiptLayout}>
+      <div className={styles.donorReceiptContainer}>
+        <ReceiptVerificationHeader operation={donorReceiptData.operation} />
+        <ReceiptDataSection donorReceiptData={donorReceiptData} />
+        <ReceiptListRedirect />
+      </div>
+    </div>
+  ) : (
+    <div className={styles.donorReceiptSkeleton}>
+      <Skeleton height={700} width={760} />
+    </div>
+  );
+};
+
+export default DonorReceiptLayout;