Merge branch 'main' into refactor_fund_cards

margaritahumanitarian · Aug 29, 2021 · 5a37a65 · 5a37a65
2 parents 5819182 + fa8323d
commit 5a37a65
Show file tree

Hide file tree

Showing 8 changed files with 179 additions and 106 deletions.
diff --git a/.github/ISSUE_TEMPLATE/idea-suggestion.md b/.github/ISSUE_TEMPLATE/idea-suggestion.md
@@ -1,8 +1,8 @@
 ---
 name: Idea suggestion
 about: Suggest an idea for this project
-title: "[Idea] "
-labels: enhancement
+title: ""
+labels: idea
 assignees: ''
 
 ---

diff --git a/components/MainDonationForm.js b/components/MainDonationForm.js
@@ -1,8 +1,24 @@
 import React from 'react';
 import { useRouter } from 'next/router';
 
+import Modal from './Modal';
+
 export default function MainDonationForm() {
   const router = useRouter();
+  const [modalText, setModalText] = React.useState('');
+  const [isModalOpen, setModalOpen] = React.useState(false);
+  const [amount, setAmount] = React.useState(0);
+
+  const hideModal = () => setModalOpen(false);
+
+  const showModal = (message) => {
+    setModalText(message);
+    setModalOpen(true);
+  };
+
+  const handleChangeAmount = (event) => {
+    setAmount(event.target.value);
+  };
 
   // isAnyoneInNeedToggled = stores the state of the "Anyone in need" toggle
   const [isAnyoneInNeedToggled, setIsAnyoneInNeedToggled] =
@@ -30,8 +46,8 @@ export default function MainDonationForm() {
     event.preventDefault();
 
     // Alert the user if they haven't selected a donation amount
-    if (+event.target.amount.value === 0) {
-      alert('Please choose an amount to give');
+    if (amount === 0) {
+      showModal('Please choose an amount to give');
       return;
     }
 
@@ -51,14 +67,14 @@ export default function MainDonationForm() {
     }
 
     if (selectedCauses.length === 0) {
-      alert('Please select a cause for donation');
+      showModal('Please select a cause for donation');
       return;
     }
 
     // Create the Stripe checkout session and forward to the checkout page
     const response = await fetch('/api/create-stripe-session', {
       body: JSON.stringify({
-        amount: event.target.amount.value * 100,
+        amount: amount * 100,
         cause: selectedCauses,
       }),
       headers: {
@@ -89,101 +105,111 @@ export default function MainDonationForm() {
   };
 
   return (
-    <form onSubmit={handleSubmit}>
-      <div className="p-6 mb-5 card bordered bg-base-100" data-theme="cupcake">
-        <h2 className="card-title" data-theme="light">
-          {'Help us develop programs for:'}
-        </h2>
-
-        <div className="form-control">
-          <label className="cursor-pointer label">
-            <span className="label-text">{'Anyone in Need'}</span>
-            <input
-              autoComplete="off"
-              checked={isAnyoneInNeedToggled}
-              className="toggle"
-              name="cause"
-              onChange={handleClick}
-              type="checkbox"
-              value="Anyone in Need"
-            />
-          </label>
-        </div>
-
-        {causes.map((item, index) => {
-          return (
-            <div
-              className="form-control"
-              key={index.toString()}
-              style={
-                isAnyoneInNeedToggled
-                  ? {
-                      display: 'none',
-                    }
-                  : {}
-              }
-            >
-              <label className="cursor-pointer label">
-                <span className="label-text">{item.text}</span>
-                <input
-                  // Prevents the browser from using cached checkbox states.
-                  // The use of cached values caused interaction issues that were
-                  // unintended.
-                  autoComplete="off"
-                  checked={item.isChecked}
-                  className="checkbox donate-form-checkbox"
-                  name="cause"
-                  onChange={() => {
-                    const data = [...causes];
-                    if (data[index].isChecked) {
-                      setIsAnyoneInNeedToggled(false);
-                    }
-                    data[index].isChecked = !data[index].isChecked;
-                    setCauses(data);
-                  }}
-                  type="checkbox"
-                  value={item.text}
-                />
-              </label>
-            </div>
-          );
-        })}
-
-        <div style={{ marginBottom: '10px' }} />
-
-        <select
-          className="select select-bordered select-info w-full max-w-xs text-white-700"
-          name="amount"
+    <>
+      <form onSubmit={handleSubmit}>
+        <div
+          className="p-6 mb-5 card bordered bg-base-100"
+          data-theme="cupcake"
         >
-          <option disabled="disabled" selected="selected" value="0">
-            {'Choose your donation amount'}
-          </option>
-          <option value="5">{'$5'}</option>
-          <option value="25">{'$25'}</option>
-          <option value="50">{'$50'}</option>
-          <option value="75">{'$75'}</option>
-          <option value="125">{'$125'}</option>
-          <option value="250">{'$250'}</option>
-          <option value="500">{'$500'}</option>
-          <option value="1000">{'$1,000'}</option>
-          <option value="5000">{'$5,000'}</option>
-          <option value="10000">{'$10,000'}</option>
-          <option value="25000">{'$25,000'}</option>
-        </select>
-
-        <div className="divider" />
-
-        {/* <div className="form-control">
-    <label className="cursor-pointer label">
-      <span className="label-text">Monthly Recurring?</span> 
-      <input type="checkbox" name="recurring" className="checkbox checkbox-primary"></input>
-    </label>
-  </div>   */}
-
-        <button className="btn btn-primary" type="submit">
-          {'Donate'}
-        </button>
-      </div>
-    </form>
+          <h2 className="card-title" data-theme="light">
+            {'Help us develop programs for:'}
+          </h2>
+
+          <div className="form-control">
+            <label className="cursor-pointer label">
+              <span className="label-text">{'Anyone in Need'}</span>
+              <input
+                autoComplete="off"
+                checked={isAnyoneInNeedToggled}
+                className="toggle"
+                name="cause"
+                onChange={handleClick}
+                type="checkbox"
+                value="Anyone in Need"
+              />
+            </label>
+          </div>
+
+          {causes.map((item, index) => {
+            return (
+              <div
+                className="form-control"
+                key={index.toString()}
+                style={
+                  isAnyoneInNeedToggled
+                    ? {
+                        display: 'none',
+                      }
+                    : {}
+                }
+              >
+                <label className="cursor-pointer label">
+                  <span className="label-text">{item.text}</span>
+                  <input
+                    // Prevents the browser from using cached checkbox states.
+                    // The use of cached values caused interaction issues that were
+                    // unintended.
+                    autoComplete="off"
+                    checked={item.isChecked}
+                    className="checkbox donate-form-checkbox"
+                    name="cause"
+                    onChange={() => {
+                      const data = [...causes];
+                      if (data[index].isChecked) {
+                        setIsAnyoneInNeedToggled(false);
+                      }
+                      data[index].isChecked = !data[index].isChecked;
+                      setCauses(data);
+                    }}
+                    type="checkbox"
+                    value={item.text}
+                  />
+                </label>
+              </div>
+            );
+          })}
+
+          <div style={{ marginBottom: '10px' }} />
+
+          <select
+            className="select select-bordered select-info w-full max-w-xs text-white-700"
+            name="amount"
+            onChange={handleChangeAmount}
+            value={amount}
+          >
+            <option disabled="disabled" value="0">
+              {'Choose your donation amount'}
+            </option>
+            <option value="5">{'$5'}</option>
+            <option value="25">{'$25'}</option>
+            <option value="50">{'$50'}</option>
+            <option value="75">{'$75'}</option>
+            <option value="125">{'$125'}</option>
+            <option value="250">{'$250'}</option>
+            <option value="500">{'$500'}</option>
+            <option value="1000">{'$1,000'}</option>
+            <option value="5000">{'$5,000'}</option>
+            <option value="10000">{'$10,000'}</option>
+            <option value="25000">{'$25,000'}</option>
+          </select>
+
+          <div className="divider" />
+
+          {/* <div className="form-control">
+  <label className="cursor-pointer label">
+    <span className="label-text">Monthly Recurring?</span> 
+    <input type="checkbox" name="recurring" className="checkbox checkbox-primary"></input>
+  </label>
+</div>   */}
+
+          <button className="btn btn-primary" type="submit">
+            {'Donate'}
+          </button>
+        </div>
+      </form>
+      <Modal isOpen={isModalOpen} onClose={hideModal}>
+        {modalText}
+      </Modal>
+    </>
   );
 }
diff --git a/components/Modal.js b/components/Modal.js
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+function Modal({ children, isOpen, onClose }) {
+  const [isMounted, setIsMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  const modalContent = isOpen ? (
+    <div className="modal modal-open">
+      <div className="modal-box">
+        {children}
+        <div className="modal-action">
+          <button className="btn" onClick={onClose} type="button">
+            {'OK'}
+          </button>
+        </div>
+      </div>
+    </div>
+  ) : null;
+
+  return isMounted
+    ? ReactDOM.createPortal(modalContent, document.getElementById('modal-root'))
+    : null;
+}
+
+Modal.propTypes = {
+  children: PropTypes.node,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default Modal;
diff --git a/components/PrimaryLayout.js b/components/PrimaryLayout.js
@@ -1,4 +1,5 @@
 import Head from 'next/head';
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import Footer from './Footer';
@@ -27,3 +28,7 @@ export default function PrimaryLayout({ children }) {
     </>
   );
 }
+
+PrimaryLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "@contentful/rich-text-react-renderer": "^15.2.0",
     "@contentful/rich-text-types": "^15.1.0",
     "contentful": "^8.5.0",
-    "daisyui": "^1.10.0",
+    "daisyui": "^1.14.0",
     "next": "latest",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",

diff --git a/pages/_document.js b/pages/_document.js
@@ -83,6 +83,7 @@ class MyDocument extends Document {
         <body>
           <Main />
           <NextScript />
+          <div id="modal-root" />
         </body>
       </Html>
     );

diff --git a/pages/give-devices.js b/pages/give-devices.js
@@ -102,6 +102,11 @@ export default function GiveYourTimePage() {
                             <option> {'United States'} </option>
                             <option> {'Canada'} </option>
                             <option> {'Mexico'} </option>
+                            <option> {'Germany'} </option>
+                            <option> {'Latvia'} </option>
+                            <option> {'India'} </option>
+                            <option> {'Bangladesh'} </option>
+                            <option> {'Philippines'} </option>
                           </select>
                         </div>
                         <div className="col-span-6">

diff --git a/yarn.lock b/yarn.lock
@@ -937,10 +937,10 @@ cssnano-simple@3.0.0:
   dependencies:
     cssnano-preset-simple "^3.0.0"
 
-daisyui@^1.10.0:
-  version "1.10.0"
-  resolved "https://registry.npmjs.org/daisyui/-/daisyui-1.10.0.tgz"
-  integrity sha512-rpmcOXpRG7upsjNx6krswKi6MfvMZSKRMqTrYvDUkE/xv07tc0LgeizcIUqbE1AfPSLLztmW+1NNnmv0kexlzQ==
+daisyui@^1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-1.14.0.tgz#1d63658c0dd87f9795d333e7068cedbb0b0a52a6"
+  integrity sha512-50ccXdJMi0TS7raItKfUOJppPRvluOUCO4m6i7QPOVOdDZVP6awjqUoGmLzqFepO6b6QpVotswDvaXIKSZ/2aw==
 
 damerau-levenshtein@^1.0.6:
   version "1.0.7"
-Original file line number
+Diff line change
@@ Expand Up / @@ -83,6 +83,7 @@ class MyDocument extends Document { @@
             <body>
               <Main />
               <NextScript />
+              <div id="modal-root" />
             </body>
           </Html>
         );
@@ Expand Down @@