Fix : #2112 by including client side validation for donation amount. (#…

…2211) * fix the donate input bug * add the tests * fix the test * test clear of donate * prettier check * added translation for other languages * added the additional conditions as per review. * testcases passed * husky file unchanged * Revert * Final acc to discussion * fix the testcase --------- Co-authored-by: Vamshi Maskuri <117595548+varshith257@users.noreply.github.com>
PalisadoesFoundation · Sep 2, 2024 · 9869bde · 9869bde
1 parent fc346d2
commit 9869bde
Show file tree

Hide file tree

Showing 7 changed files with 153 additions and 6 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -854,7 +854,10 @@
     "yourPreviousDonations": "Your Previous Donations",
     "donate": "Donate",
     "nothingToShow": "Nothing to show here.",
-    "success": "Donation Successful"
+    "success": "Donation Successful",
+    "invalidAmount": "Please enter a numerical value for the donation amount.",
+    "donationAmountDescription": "Please enter the numerical value for the donation amount.",
+    "donationOutOfRange": "Donation amount must be between {{min}} and {{max}}."
   },
   "userEvents": {
     "title": "Events",

diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
@@ -854,7 +854,10 @@
     "yourPreviousDonations": "Vos dons précédents",
     "donate": "Faire un don",
     "nothingToShow": "Rien à montrer ici.",
-    "success": "Don réussi"
+    "success": "Don réussi",
+    "invalidAmount": "Veuillez saisir une valeur numérique pour le montant du don.",
+    "donationAmountDescription": "Veuillez saisir la valeur numérique du montant du don.",
+    "donationOutOfRange": "Le montant du don doit être compris entre {{min}} et {{max}}."
   },
   "userEvents": {
     "title": "Événements",

diff --git a/public/locales/hi/translation.json b/public/locales/hi/translation.json
@@ -854,7 +854,10 @@
     "yourPreviousDonations": "आपका पिछला दान",
     "donate": "दान करें",
     "nothingToShow": "यहां दिखाने के लिए कुछ भी नहीं है.",
-    "success": "दान सफल"
+    "success": "दान सफल",
+    "invalidAmount": "कृपया दान राशि के लिए संख्यात्मक मान दर्ज करें.",
+    "donationAmountDescription": "कृपया दान राशि के लिए संख्यात्मक मान दर्ज करें.",
+    "donationOutOfRange": "दान राशि {{min}} और {{max}} के बीच होनी चाहिए."
   },
   "userEvents": {
     "title": "ईवेंट",

diff --git a/public/locales/sp/translation.json b/public/locales/sp/translation.json
@@ -1063,7 +1063,10 @@
     "yourPreviousDonations": "Tus donaciones anteriores",
     "donate": "Donar",
     "nothingToShow": "Nada que mostrar aquí.",
-    "success": "Donación exitosa"
+    "success": "Donación exitosa",
+    "invalidAmount": "Ingrese un valor numérico para el monto de la donación.",
+    "donationAmountDescription": "Ingrese el valor numérico del monto de la donación.",
+    "donationOutOfRange": "El monto de la donación debe estar entre {{min}} y {{max}}."
   },
   "userEvents": {
     "title": "Eventos",

diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json
@@ -854,7 +854,10 @@
     "yourPreviousDonations": "您之前的捐款",
     "donate": "捐",
     "nothingToShow": "这里没有什么可显示的。",
-    "success": "捐赠成功"
+    "success": "捐赠成功",
+    "invalidAmount": "请输入捐赠金额的数值。",
+    "donationAmountDescription": "请输入捐款金额的数值。",
+    "donationOutOfRange": "捐款金额必须在 {{min}} 和 {{max}} 之间。"
   },
   "userEvents": {
     "title": "活动",

diff --git a/src/screens/UserPortal/Donate/Donate.test.tsx b/src/screens/UserPortal/Donate/Donate.test.tsx
@@ -16,6 +16,7 @@ import Donate from './Donate';
 import userEvent from '@testing-library/user-event';
 import useLocalStorage from 'utils/useLocalstorage';
 import { DONATE_TO_ORGANIZATION } from 'GraphQl/Mutations/mutations';
+import { toast } from 'react-toastify';
 
 const MOCKS = [
   {
@@ -136,6 +137,13 @@ jest.mock('react-router-dom', () => ({
   useParams: () => ({ orgId: '' }),
 }));
 
+jest.mock('react-toastify', () => ({
+  toast: {
+    error: jest.fn(),
+    success: jest.fn(),
+  },
+}));
+
 describe('Testing Donate Screen [User Portal]', () => {
   Object.defineProperty(window, 'matchMedia', {
     writable: true,
@@ -280,4 +288,103 @@ describe('Testing Donate Screen [User Portal]', () => {
     userEvent.click(screen.getByTestId('donateBtn'));
     await wait();
   });
+
+  test('displays error toast for donation amount below minimum', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Donate />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(screen.getByTestId('donationAmount'), '0.5');
+    userEvent.click(screen.getByTestId('donateBtn'));
+
+    await wait();
+
+    expect(toast.error).toHaveBeenCalledWith(
+      'Donation amount must be between 1 and 10000000.',
+    );
+  });
+
+  test('displays error toast for donation amount above maximum', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Donate />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(screen.getByTestId('donationAmount'), '10000001');
+    userEvent.click(screen.getByTestId('donateBtn'));
+
+    await wait();
+
+    expect(toast.error).toHaveBeenCalledWith(
+      'Donation amount must be between 1 and 10000000.',
+    );
+  });
+
+  test('displays error toast for empty donation amount', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Donate />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('donateBtn'));
+
+    await wait();
+
+    expect(toast.error).toHaveBeenCalledWith(
+      'Please enter a numerical value for the donation amount.',
+    );
+  });
+
+  test('displays error toast for invalid (non-numeric) donation amount', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Donate />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(screen.getByTestId('donationAmount'), 'abc');
+    userEvent.click(screen.getByTestId('donateBtn'));
+
+    await wait();
+
+    expect(toast.error).toHaveBeenCalledWith(
+      'Please enter a numerical value for the donation amount.',
+    );
+  });
 });
diff --git a/src/screens/UserPortal/Donate/Donate.tsx b/src/screens/UserPortal/Donate/Donate.tsx
@@ -128,14 +128,36 @@ export default function donate(): JSX.Element {
   }, [donationData]);
 
   const donateToOrg = (): void => {
+    // check if the amount is non empty and is a number
+    if (amount === '' || Number.isNaN(Number(amount))) {
+      toast.error(t(`invalidAmount`));
+      return;
+    }
+
+    // check if the amount is non negative and within the range
+    const minDonation = 1;
+    const maxDonation = 10000000;
+    if (
+      Number(amount) <= 0 ||
+      Number(amount) < minDonation ||
+      Number(amount) > maxDonation
+    ) {
+      toast.error(
+        t(`donationOutOfRange`, { min: minDonation, max: maxDonation }),
+      );
+      return;
+    }
+
+    const formattedAmount = Number(amount.trim());
+
     try {
       donate({
         variables: {
           userId,
           createDonationOrgId2: organizationId,
           payPalId: 'paypalId',
           nameOfUser: userName,
-          amount: Number(amount),
+          amount: formattedAmount,
           nameOfOrg: organizationDetails.name,
         },
       });
@@ -216,6 +238,9 @@ export default function donate(): JSX.Element {
                 />
               </InputGroup>
             </div>
+            <Form.Text className="text-muted">
+              {t('donationAmountDescription')}
+            </Form.Text>
             <div className={styles.donateActions}>
               <Button
                 size="sm"