fix/add readme and support test mode

open-giving/README.md

@@ -1,36 +1,159 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Open Giving
+
+Open Giving is a platform that allows users to donate to various non-profits using different payment methods. This README provides information on how to set up the project, use the application, and contribute to its development.
+
+## Table of Contents
+
+- [Open Giving](#open-giving)
+  - [Table of Contents](#table-of-contents)
+  - [Getting Started](#getting-started)
+    - [Prerequisites](#prerequisites)
+    - [Installation](#installation)
+  - [Query Parameters](#query-parameters)
+  - [For Developers](#for-developers)
+    - [Project Structure](#project-structure)
+    - [Scripts](#scripts)
+    - [Linting and Formatting](#linting-and-formatting)
+    - [Environment Variables](#environment-variables)
+  - [For Users](#for-users)
+    - [Making a Donation](#making-a-donation)
+    - [Supported Payment Methods](#supported-payment-methods)
+  - [Contributing](#contributing)
+  - [License](#license)
 
 ## Getting Started
 
-First, run the development server:
+### Prerequisites
+
+Before you begin, ensure you have the following installed on your machine:
+
+- Node.js (>= 14.x)
+- npm (>= 6.x) or yarn (>= 1.x)
+
+### Installation
+
+1. Clone the repository:
+
+    ```sh
+    git clone https://github.com/your-username/open-giving.git
+    cd open-giving
+    ```
+
+2. Install the dependencies:
+
+    ```sh
+    npm install
+    # or
+    yarn install
+    ```
+
+3. Start the development server:
+
+    ```sh
+    npm start
+    # or
+    yarn start
+    ```
+
+    The application will be available at `http://localhost:3000`.
+
+## Query Parameters
+
+The application supports various query parameters to customize the user experience. Here are some of the key parameters:
+
+- `paymentMethod`: Specifies the payment method(s) to filter the non-profits by. Multiple methods can be separated by commas (e.g., `paypal,stripe`).
+- `npCode`: Specifies the code of a specific non-profit to display its details.
+- `page`: Specifies the page number for pagination.
+- `showQRCode`: If set, displays a QR code for the non-profit.
+- `useTestPaymentID`: If set, uses test payment IDs for the transactions.
+
+Example URL with query parameters:
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+```sh
+http://localhost:3000?paymentMethod=paypal,stripe&npCode=123&page=2&showQRCode=true&useTestPaymentIDs=true
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## For Developers
+
+### Project Structure
+
+The project is structured as follows:
+
+```
+open-giving/
+├── src/
+│   ├── components/
+│   │   ├── DonationForm.js
+│   │   ├── NonProfitCard.js
+│   │   └── QRCodeComponent.js
+│   ├── hooks/
+│   ├── pages/
+│   │   └── index.js
+│   ├── utils/
+│   └── ...
+├── .circleci/
+│   └── config.yml
+├── .editorconfig
+├── .eslintrc.json
+├── .cspell.json
+├── package.json
+├── tsconfig.json
+├── tsconfig.module.json
+└── README.md
+```
+
+### Scripts
+
+- `npm start` or `yarn start`: Starts the development server.
+- `npm run build` or `yarn build`: Builds the application for production.
+- `npm test` or `yarn test`: Runs the test suite.
+- `npm run lint` or `yarn lint`: Lints the codebase.
+
+### Linting and Formatting
+
+The project uses ESLint for linting and Prettier for code formatting. Ensure your code adheres to the defined rules before committing.
+
+### Environment Variables
+
+Create a `.env` file in the root directory to define environment variables. Example:
+
+```
+REACT_APP_API_URL=https://api.example.com
+```
+
+## For Users
+
+### Making a Donation
 
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+1. Visit the application URL.
+2. Select a non-profit organization from the list.
+3. Choose a payment method.
+4. Enter the donation amount and your email address.
+5. Click the "Donate" button to proceed with the payment.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+### Supported Payment Methods
 
-## Learn More
+- PayPal
+- Stripe
+- Venmo
+- CashApp
+- Airtime
+- Mobile Money
+- Stablecoin
+- Chimoney
+- Donation Link
 
-To learn more about Next.js, take a look at the following resources:
+## Contributing
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+We welcome contributions from the community! To contribute:
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+1. Fork the repository.
+2. Create a new branch for your feature or bugfix.
+3. Commit your changes and push the branch to your fork.
+4. Open a pull request with a detailed description of your changes.
 
-## Deploy on Vercel
+Please ensure your code adheres to the project's coding standards and passes all tests.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## License
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.

open-giving/src/components/DonationForm.js

@@ -25,6 +25,7 @@ const DonationForm = ({
   index,
   setSnackbarMessage,
   setSnackbarOpen,
+  useTestPaymentID,
 }) => {
   const {
     donationAmount,
@@ -61,6 +62,12 @@ const DonationForm = ({
   };
 
   const formattedMethodName = formatPaymentMethodName(method.type);
+  const formattedPaymentID =
+    method.paymentID && typeof method.paymentID !== 'undefined'
+      ? useTestPaymentID
+        ? method.paymentID.test
+        : method.paymentID.production
+      : method.paymentID;
 
   if (method.type === 'donation-link') {
     return (
@@ -88,13 +95,13 @@ const DonationForm = ({
           }
           secondary={
             <Link
-              href={method.paymentID}
+              href={formattedPaymentID}
               target="_blank"
               rel="noopener noreferrer"
               display="flex"
               alignItems="center"
             >
-              {method.paymentID}
+              {formattedPaymentID}
             </Link>
           }
         />
@@ -128,6 +135,9 @@ const DonationForm = ({
               handleDonateClick();
             }}
           >
+            <Typography variant="caption" color="textSecondary">
+              Will be deposited to {formattedPaymentID}.
+            </Typography>
             <TextField
               label="Amount"
               type="number"
@@ -197,7 +207,7 @@ const DonationForm = ({
                 alignItems: 'center',
                 cursor: 'pointer',
               }}
-              onClick={() => handleDonateClick(method.paymentID)}
+              onClick={() => handleDonateClick(formattedPaymentID)}
             >
               <span
                 style={{
@@ -214,7 +224,7 @@ const DonationForm = ({
           }
           secondary={
             <Typography display="flex" alignItems="center">
-              {method.paymentID}
+              {formattedPaymentID}
             </Typography>
           }
         />
@@ -228,7 +238,7 @@ const DonationForm = ({
         primary={
           <Typography
             style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}
-            onClick={() => handleDonateClick(method.paymentID)}
+            onClick={() => handleDonateClick(formattedPaymentID)}
           >
             <span
               style={{
@@ -245,7 +255,7 @@ const DonationForm = ({
         }
         secondary={
           <Typography display="flex" alignItems="center">
-            {method.paymentID}
+            {formattedPaymentID}
           </Typography>
         }
       />

open-giving/src/components/NonProfitCard.js

@@ -82,7 +82,7 @@ export default function NonProfitCard({ nonProfit, onLearnMore, showQRCode }) {
         <Box mt={2}>
           <QRCodeComponent
             link={generateQRCodeLink(nonProfit.npCode)}
-            cta={'Scan me to Donate'}
+            cta={'Scan to Donate'}
           />
         </Box>
       ) : (

open-giving/src/components/NonProfitDialog.js

@@ -27,6 +27,7 @@ const NonProfitDialog = ({
   setSnackbarMessage,
   setSnackbarOpen,
   defaultLogo,
+  useTestPaymentID,
 }) => {
   const [dialogImgSrc, setDialogImgSrc] = useState(
     nonProfit?.logo || defaultLogo
@@ -37,6 +38,18 @@ const NonProfitDialog = ({
   };
 
   if (!nonProfit) return null;
+  const getPaymentID = (method) => {
+    if (!method.paymentID) {
+      return true;
+    }
+    if (typeof method.paymentID !== 'string' || method.paymentID.length > 0) {
+      return true;
+    }
+    if (typeof method.paymentID === 'object') {
+      return method.paymentID[useTestPaymentID ? 'test' : 'production'];
+    }
+    return method.paymentID;
+  };
 
   return (
     <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
@@ -104,19 +117,15 @@ const NonProfitDialog = ({
                 <Typography variant="h6">Donation Methods</Typography>
                 <List>
                   {nonProfit.paymentMethods
-                    .filter(
-                      (method) =>
-                        method.paymentID &&
-                        (typeof method.paymentID !== 'string' ||
-                          method.paymentID.length > 0)
-                    )
+                    .filter((method) => getPaymentID(method))
                     .map((method, index) => (
                       <DonationForm
                         key={method.type}
                         method={method}
                         index={index}
                         setSnackbarMessage={setSnackbarMessage}
                         setSnackbarOpen={setSnackbarOpen}
+                        useTestPaymentID={useTestPaymentID}
                       />
                     ))}
                 </List>

open-giving/src/components/NonProfitGrid.js

@@ -3,7 +3,12 @@ import React from 'react';
 
 import NonProfitCard from './NonProfitCard';
 
-const NonProfitGrid = ({ nonProfits, onOpenDialog, showQRCode }) => (
+const NonProfitGrid = ({
+  nonProfits,
+  onOpenDialog,
+  showQRCode,
+  useTestPaymentID,
+}) => (
   <Grid container spacing={3}>
     {nonProfits.map((nonProfit) => (
       <Grid
@@ -18,6 +23,7 @@ const NonProfitGrid = ({ nonProfits, onOpenDialog, showQRCode }) => (
           nonProfit={nonProfit}
           onLearnMore={() => onOpenDialog(nonProfit)}
           showQRCode={showQRCode}
+          useTestPaymentID={useTestPaymentID}
         />
       </Grid>
     ))}

open-giving/src/components/QRCodeComponent.js

@@ -3,8 +3,6 @@ import { Box } from '@mui/material';
 import { QRCodeSVG } from 'qrcode.react';
 import React from 'react';
 
-
-
 const QRCodeComponent = ({ link, cta }) => {
   return (
     <Box marginBottom={2}>
@@ -17,11 +15,7 @@ const QRCodeComponent = ({ link, cta }) => {
         alignItems="center"
         height="100%"
       >
-        <QRCodeSVG
-          value={'https://www.google.com'}
-          bgColor="inherit"
-          fgColor="white"
-        />
+        <QRCodeSVG value={link} bgColor="inherit" fgColor="white" />
       </Box>
     </Box>
   );