Plant-for-the-Planet-org · sunilsabatp · Jan 23, 2025 · Jan 24, 2025 · Jan 24, 2025 · Jan 24, 2025
diff --git a/pages/sites/[slug]/[locale]/profile/donation-receipt/index.tsx b/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 ReceiptCardList from '../../../../../../src/features/user/DonorReceipt/ReceiptCardList';
+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('Donate.donationReceipt');
+  return (
+    <UserLayout>
+      <Head>
+        <title>{t('receipts')}</title>
+      </Head>
+      <ReceiptCardList />
+    </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', 'donate'],
+  });
+
+  return {
+    props: {
+      messages,
+      tenantConfig,
+    },
+  };
+};
diff --git a/pages/sites/[slug]/[locale]/profile/donation-receipt/modify-donor-data.tsx b/pages/sites/[slug]/[locale]/profile/donation-receipt/modify-donor-data.tsx
@@ -0,0 +1,72 @@
+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 DonorDataForm from '../../../../../../src/features/user/DonorReceipt/DonorDataForm';
+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('Donate.donationReceipt');
+  return (
+    <UserLayout>
+      <Head>{t('modifyDonorData')}</Head>
+      <DonorDataForm />
+    </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', 'donate'],
+  });
+
+  return {
+    props: {
+      messages,
+      tenantConfig,
+    },
+  };
+};
diff --git a/public/assets/images/icons/ContactIcon.tsx b/public/assets/images/icons/ContactIcon.tsx
@@ -0,0 +1,32 @@
+const ContactIcon = () => {
+  return (
+    <svg
+      width="45"
+      viewBox="0 0 45 45"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="45" height="45" rx="6" fill="#007A49" fillOpacity="0.1" />
+      <g clipPath="url(#clip0_5051_2356)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M31.9406 29.0656C32.4911 28.2704 32.9601 27.3936 33.3067 26.4557C33.7553 25.2119 34 23.8865 34 22.5C34 19.3191 32.7154 16.4441 30.6356 14.3644C28.5559 12.2846 25.6809 11 22.5 11C19.3191 11 16.4441 12.2846 14.3644 14.3644C12.2846 16.4441 11 19.3191 11 22.5C11 25.6809 12.2846 28.5559 14.3644 30.6356C16.4441 32.7154 19.3191 34 22.5 34C23.4379 34 24.3759 33.8777 25.2731 33.6534C26.0683 33.4699 26.8227 33.1844 27.5363 32.8378L32.5319 33.3475C32.8785 33.3883 33.2252 33.3067 33.5106 33.0824C34.0816 32.6339 34.1631 31.7979 33.7145 31.2473L31.9406 29.0656ZM24.3963 26.7411H19.9512C19.2376 26.7411 18.6463 26.1702 18.6463 25.4362C18.6463 24.7021 19.2376 24.1312 19.9512 24.1312H24.3963C25.1099 24.1312 25.7012 24.7225 25.7012 25.4362C25.7012 26.1498 25.1099 26.7411 24.3963 26.7411ZM26.1294 20.8688H18.2385C17.5248 20.8688 16.9335 20.2775 16.9335 19.5638C16.9335 18.8502 17.5248 18.2589 18.2385 18.2589H26.1294C26.8431 18.2589 27.4344 18.8502 27.4344 19.5638C27.4344 20.2775 26.8431 20.8688 26.1294 20.8688Z"
+          fill="#007A49"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5051_2356">
+          <rect
+            width="23"
+            height="23"
+            fill="white"
+            transform="translate(11 11)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default ContactIcon;
diff --git a/public/assets/images/icons/RedirectRightArrowIcon.tsx b/public/assets/images/icons/RedirectRightArrowIcon.tsx
@@ -0,0 +1,19 @@
+const RedirectRightArrowIcon = () => {
+  return (
+    <svg
+      width="41"
+      height="41"
+      viewBox="0 0 41 41"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="41" height="41" rx="20.5" fill="#007A49" />
+      <path
+        d="M31.7071 21.7071C32.0976 21.3166 32.0976 20.6834 31.7071 20.2929L25.3431 13.9289C24.9526 13.5384 24.3195 13.5384 23.9289 13.9289C23.5384 14.3195 23.5384 14.9526 23.9289 15.3431L29.5858 21L23.9289 26.6569C23.5384 27.0474 23.5384 27.6805 23.9289 28.0711C24.3195 28.4616 24.9526 28.4616 25.3431 28.0711L31.7071 21.7071ZM11 22H31V20H11V22Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default RedirectRightArrowIcon;
diff --git a/public/static/locales/en/donate.json b/public/static/locales/en/donate.json
@@ -112,6 +112,7 @@
     "filters": "Filters",
     "perM2": "per m²",
     "donationReceipt": {
+      "receipts": "Receipts",
       "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",
@@ -123,8 +124,13 @@
       "modifyContactInformation": "Modify Contact Information",
       "confirm": "Confirm",
       "download": "Download",
+      "viewAllTaxReceipts": "View All Tax Receipts",
+      "donationReceiptsManagementInfo": "Easily access and manage all your donation receipts. See issued receipts ready for download and track pending receipts still being processed.",
+      "contactSupportMessage": "For any questions or issues, please contact us",
+      "supportContactDetails": "<strong>Email:</strong> <supportLink>[email protected]</supportLink> <strong>Phone:</strong> +49 8808 9345",
       "donationAmount": "{currency, select, EUR {€} USD {$} other {}} {amount}",
-      "name": "{type, select, individual {Name} organization {Company Name} other {}}"
+      "name": "{type, select, individual {Name} organization {Company Name} other {}}",
+      "modifyDonorData": "Modify Donor Data"
     }
   }
 }
diff --git a/src/features/user/DonorReceipt/DonorDataForm.tsx b/src/features/user/DonorReceipt/DonorDataForm.tsx
@@ -0,0 +1,9 @@
+const DonorDataForm = () => {
+  return (
+    <section>
+      <div></div>
+    </section>
+  );
+};
+
+export default DonorDataForm;
diff --git a/src/features/user/DonorReceipt/ReceiptCardList.tsx b/src/features/user/DonorReceipt/ReceiptCardList.tsx
@@ -0,0 +1,9 @@
+const ReceiptCardList = () => {
+  return (
+    <section>
+      <div></div>
+    </section>
+  );
+};
+
+export default ReceiptCardList;
diff --git a/src/features/user/DonorReceipt/donationReceipt.module.scss b/src/features/user/DonorReceipt/donationReceipt.module.scss
@@ -66,6 +66,7 @@
   }
 }
 
+.receiptListRedirect,
 .receiptDataSection {
   width: 100%;
   border-radius: 16px;
@@ -179,3 +180,35 @@
   @include flex-layout(flex, null, center);
   margin-top: 40px;
 }
+
+.receiptListRedirectContainer {
+  @include flex-layout(flex, null, space-between);
+  background: rgba(242, 242, 242, 0.5);
+  border-radius: 9px;
+  padding: 8px;
+  .redirectButton {
+    cursor: pointer;
+  }
+
+  h3 {
+    font-weight: 600;
+    font-size: $fontSmall;
+  }
+
+  p {
+    font-size: $fontXSmall;
+    font-weight: 400;
+    color: rgba(51, 51, 51, 1);
+    max-width: 500px;
+  }
+}
+
+.contactInfo {
+  @include flex-layout(flex, null, null, null, 30px);
+  margin-top: 30px;
+
+  .contactSupportMessage {
+    font-weight: 400;
+    font-size: $fontSmall;
+  }
+}
diff --git a/src/features/user/DonorReceipt/microComponents/ReceiptActions.tsx b/src/features/user/DonorReceipt/microComponents/ReceiptActions.tsx
@@ -5,6 +5,7 @@ import EditIcon from '../../../../../public/assets/images/icons/EditIcon';
 import WebappButton from '../../../common/WebappButton';
 import styles from '../donationReceipt.module.scss';
 import DownloadIcon from '../../../../../public/assets/images/icons/projectV2/DownloadIcon';
+import { useCallback } from 'react';
 
 export type Operation = (typeof RECEIPT_STATUS)[keyof typeof RECEIPT_STATUS];
 
@@ -22,6 +23,10 @@ const ReceiptActions = ({
   const t = useTranslations('Donate.donationReceipt');
   const router = useRouter();
 
+  const redirectToUserDataForm = useCallback(() => {
+    router.push(`/profile/donation-receipt/modify-user-data`);
+  }, []);
+
   const showDowloadButton =
     operation === RECEIPT_STATUS.DOWNLOAD && downloadUrl !== null;
   return (
@@ -44,9 +49,7 @@ const ReceiptActions = ({
             text={t('modifyContactInformation')}
             elementType="button"
             icon={<EditIcon />}
-            onClick={() =>
-              router.push(`/profile/tax-receipt/modify-recipient-data`)
-            }
+            onClick={redirectToUserDataForm}
           />
           <WebappButton
             variant="primary"

diff --git a/src/features/user/DonorReceipt/microComponents/ReceiptListRedirect.tsx b/src/features/user/DonorReceipt/microComponents/ReceiptListRedirect.tsx
@@ -1,9 +1,57 @@
-const ReceiptFooterSection = () => {
+import { useCallback } from 'react';
+import ContactIcon from '../../../../../public/assets/images/icons/ContactIcon';
+import RedirectRightArrowIcon from '../../../../../public/assets/images/icons/RedirectRightArrowIcon';
+import styles from '../donationReceipt.module.scss';
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/router';
+
+const ReceiptListRedirect = () => {
+  const t = useTranslations('Donate.donationReceipt');
+  const router = useRouter();
+
+  const redirectToReceiptListPage = useCallback(() => {
+    router.push('/profile/donation-receipt');
+  }, []);
+
   return (
-    <section>
-      <div></div>
+    <section className={styles.receiptListRedirect}>
+      <div className={styles.receiptListRedirectContainer}>
+        <div>
+          <h3>{t('viewAllTaxReceipts')}</h3>
+          <p>{t('donationReceiptsManagementInfo')}</p>
+        </div>
+        <button
+          onClick={redirectToReceiptListPage}
+          className={styles.redirectButton}
+        >
+          <RedirectRightArrowIcon />
+        </button>
+      </div>
+      <div className={styles.contactInfo}>
+        <ContactIcon />
+        <div>
+          <div className={styles.contactSupportMessage}>
+            {t('contactSupportMessage')}
+          </div>
+          <span>
+            {t.rich('supportContactDetails', {
+              supportLink: (chunk) => (
+                <a
+                  className="planet-links"
+                  href="mailto:[email protected]"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {chunk}
+                </a>
+              ),
+              strong: (chunk) => <strong>{chunk}</strong>,
+            })}
+          </span>
+        </div>
+      </div>
     </section>
   );
 };
 
-export default ReceiptFooterSection;
+export default ReceiptListRedirect;