Redesign of Donations Page (PalisadoesFoundation#1846)

* Removed `jest-enzyme` package

* Adding check for

* Added CommunityProfile page

* Added tests for CommunityProfile page

* Fixed formatting errors

* Format fix

* Merge branch 'develop' of https://github.com/git-init-priyanshu/talawa-admin-clone into priyanshu

* Fixed merge conflicts

* Format fix

* Fix typecheck error

* Added language support

* Lint error fix

* Integrated APIs

* Revert changes

* Fixed Failing Test

* FIxed failing  test

* Fixed LoginPage failing tests

* Full code coverage

* Redesigned the Donations page

* Added Tests

* Fixed formatting errors

public/locales/en.json

@@ -889,11 +889,14 @@
     "joined": "Joined"
   },
   "donate": {
-    "donateTo": "Donate to",
+    "donations": "Donations",
+    "searchDonations": "Search donations",
+    "donateForThe": "Donate for the",
     "amount": "Amount",
     "yourPreviousDonations": "Your Previous Donations",
     "donate": "Donate",
-    "nothingToShow": "Nothing to show here."
+    "nothingToShow": "Nothing to show here.",
+    "success": "Donation Successful"
   },
   "userEvents": {
     "nothingToShow": "Nothing to show here.",

public/locales/fr.json

@@ -889,11 +889,14 @@
     "joined": "Rejoint"
   },
   "donate": {
-    "donateTo": "Faire un don à",
+    "donations": "Des dons",
+    "searchDonations": "Rechercher des dons",
+    "donateForThe": "Faites un don pour le",
     "amount": "Montante",
     "yourPreviousDonations": "Vos dons précédents",
     "donate": "Donner",
-    "nothingToShow": "Rien à montrer ici."
+    "nothingToShow": "Rien à montrer ici.",
+    "success": "Don réussi"
   },
   "userEvents": {
     "nothingToShow": "Rien à montrer ici.",

public/locales/hi.json

@@ -893,11 +893,15 @@
     "joined": "शामिल हुआ"
   },
   "donate": {
+    "donations": "दान",
+    "searchDonations": "दान खोजें",
+    "donateForThe": "के लिए दान करें",
     "donateTo": "दान दें",
     "amount": "मात्रा",
     "yourPreviousDonations": "आपका पिछला दान",
     "donate": "दान",
-    "nothingToShow": "यहां दिखाने के लिए कुछ भी नहीं है."
+    "nothingToShow": "यहां दिखाने के लिए कुछ भी नहीं है.",
+    "success": "दान सफल"
   },
   "userEvents": {
     "nothingToShow": "यहां दिखाने के लिए कुछ भी नहीं है.",

public/locales/sp.json

@@ -890,11 +890,15 @@
     "joined": "Unido"
   },
   "donate": {
+    "donations": "Donaciones",
+    "searchDonations": "Buscar donaciones",
+    "donateForThe": "Donar para el",
     "donateTo": "Donar a",
     "amount": "Cantidad",
     "yourPreviousDonations": "Tus donaciones anteriores",
     "donate": "Donar",
-    "nothingToShow": "Nada que mostrar aquí."
+    "nothingToShow": "Nada que mostrar aquí.",
+    "success": "Donación exitosa"
   },
   "userEvents": {
     "nothingToShow": "No hay nada que mostrar aquí.",

public/locales/zh.json

@@ -891,11 +891,15 @@
     "joined": "加入"
   },
   "donate": {
+    "donations": "捐款",
+    "searchDonations": "搜索捐款",
+    "donateForThe": "为",
     "donateTo": "捐贈給",
     "amount": "數量",
     "yourPreviousDonations": "您之前的捐款",
     "donate": "捐",
-    "nothingToShow": "這裡沒有什麼可顯示的。"
+    "nothingToShow": "這裡沒有什麼可顯示的。",
+    "success": "捐赠成功"
   },
   "userEvents": {
     "nothingToShow": "這裡沒有什麼可顯示的。",

src/GraphQl/Mutations/mutations.ts

@@ -664,6 +664,31 @@ export const RESET_COMMUNITY = gql`
   }
 `;
 
+export const DONATE_TO_ORGANIZATION = gql`
+  mutation donate(
+    $userId: ID!
+    $createDonationOrgId2: ID!
+    $payPalId: ID!
+    $nameOfUser: String!
+    $amount: Float!
+    $nameOfOrg: String!
+  ) {
+    createDonation(
+      userId: $userId
+      orgId: $createDonationOrgId2
+      payPalId: $payPalId
+      nameOfUser: $nameOfUser
+      amount: $amount
+      nameOfOrg: $nameOfOrg
+    ) {
+      _id
+      amount
+      nameOfUser
+      nameOfOrg
+    }
+  }
+`;
+
 // Create and Update Action Item Categories
 export {
   CREATE_ACTION_ITEM_CATEGORY_MUTATION,

src/GraphQl/Queries/Queries.ts

@@ -606,6 +606,7 @@ export const ORGANIZATION_DONATION_CONNECTION_LIST = gql`
       amount
       userId
       payPalId
+      updatedAt
     }
   }
 `;

src/components/UserPortal/DonationCard/DonationCard.module.css

@@ -1,19 +1,38 @@
 .mainContainer {
-  width: 100%;
+  width: 49%;
+  height: 8rem;
+  min-width: max-content;
   display: flex;
-  flex-direction: row;
-  padding: 10px;
-  cursor: pointer;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem;
   background-color: white;
+  border: 1px solid #dddddd;
   border-radius: 10px;
-  box-shadow: 2px 2px 8px 0px #c8c8c8;
   overflow: hidden;
 }
 
+.img {
+  height: 100%;
+  aspect-ratio: 1/1;
+  background-color: rgba(49, 187, 107, 12%);
+}
+
+.btn {
+  display: flex;
+  align-items: flex-end;
+}
+
+.btn button {
+  padding-inline: 2rem !important;
+  border-radius: 5px;
+}
+
 .personDetails {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  min-width: max-content;
 }
 
 .personImage {

src/components/UserPortal/DonationCard/DonationCard.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { act, render } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import DonationCard from './DonationCard';
+import { type InterfaceDonationCardProps } from 'screens/UserPortal/Donate/Donate';
+
+const link = new StaticMockLink([], true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const props: InterfaceDonationCardProps = {
+  id: '1',
+  name: 'John Doe',
+  amount: '20',
+  userId: '1234',
+  payPalId: 'id',
+  updatedAt: String(new Date()),
+};
+
+describe('Testing ContactCard Component [User Portal]', () => {
+  test('Component should be rendered properly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <DonationCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+});

src/components/UserPortal/DonationCard/DonationCard.tsx

@@ -1,21 +1,31 @@
 import React from 'react';
 import styles from './DonationCard.module.css';
-
-interface InterfaceDonationCardProps {
-  id: string;
-  name: string;
-  amount: string;
-  userId: string;
-  payPalId: string;
-}
+import { type InterfaceDonationCardProps } from 'screens/UserPortal/Donate/Donate';
+import { Button } from 'react-bootstrap';
 
 function donationCard(props: InterfaceDonationCardProps): JSX.Element {
+  const date = new Date(props.updatedAt);
+  const formattedDate = new Intl.DateTimeFormat('en-US', {
+    weekday: 'short',
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  }).format(date);
+
   return (
-    <div className={styles.mainContainer}>
+    <div className={`${styles.mainContainer}`}>
+      <div className={styles.img}></div>
       <div className={styles.personDetails}>
-        <b>{props.name}</b>
+        <span>
+          <b data-testid="DonorName">{props.name}</b>
+        </span>
         <span>Amount: {props.amount}</span>
-        <span>PayPal Id: {props.payPalId}</span>
+        <span>Date: {formattedDate}</span>
+      </div>
+      <div className={styles.btn}>
+        <Button size="sm" variant="success">
+          View
+        </Button>
       </div>
     </div>
   );

src/screens/UserPortal/Donate/Donate.module.css

@@ -5,20 +5,37 @@
 .mainContainer {
   width: 50%;
   flex-grow: 3;
-  padding: 20px;
+  padding: 1rem;
   max-height: 100%;
   overflow: auto;
   display: flex;
   flex-direction: column;
+  background-color: #f2f7ff;
+}
+
+.inputContainer {
+  margin-top: 3rem;
+  flex: 1;
+  position: relative;
+}
+.input {
+  width: 70%;
+  position: relative;
+  box-shadow: 5px 5px 4px 0px #31bb6b1f;
 }
 
 .box {
   width: auto;
   /* height: 200px; */
   background-color: white;
-  margin: 20px;
+  margin-top: 1rem;
   padding: 20px;
-  border-radius: 20px;
+  border: 1px solid #dddddd;
+  border-radius: 10px;
+}
+
+.heading {
+  font-size: 1.1rem;
 }
 
 .donationInputContainer {
@@ -27,25 +44,45 @@
   margin-top: 20px;
 }
 
+.donateBtn {
+  padding-inline: 1rem !important;
+}
+
+.dropdown {
+  min-width: 6rem;
+}
+
+.inputArea {
+  border: none;
+  outline: none;
+  background-color: #f1f3f6;
+}
+
 .maxWidth {
   width: 100%;
 }
 
 .donateActions {
-  margin-top: 40px;
+  margin-top: 1rem;
   width: 100%;
   display: flex;
   flex-direction: row-reverse;
 }
 
 .donationsContainer {
-  margin: 20px;
-  padding-top: 20px;
+  padding-top: 4rem;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
 }
 
+.donationCardsContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  --bs-gutter-x: 0;
+}
+
 .colorLight {
   background-color: #f5f5f5;
 }