Create Donation portal

.eslintrc.json

@@ -1,45 +1,42 @@
 {
-    "env": {
-        "browser": true,
-        "es6": true
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": ["airbnb"],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
     },
-    "extends": [
-        "airbnb"
-    ],
-    "globals": {
-        "Atomics": "readonly",
-        "SharedArrayBuffer": "readonly"
-    },
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "ecmaVersion": 2018,
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react",
-        "@typescript-eslint"
-    ],
-    // rules: 1 is warning, 2 is error, off is ignore
-    "rules": {
-        "import/extensions": "off",
-        "react/jsx-filename-extension": "off",
-        "no-alert": 1,
-        "import/no-duplicates": 1,
-        "import/no-unresolved": "off",
-        "max-len": "off",
-        "react/prefer-stateless-function": "off",
-        "react/sort-comp": 1,
-        "jsx-a11y/label-has-associated-control": 1,
-        "react/destructuring-assignment": 1,
-        "jsx-a11y/control-has-associated-label": 1,
-        "jsx-a11y/click-events-have-key-events": 1,
-        "jsx-a11y/no-static-element-interactions": 1,
-        "jsx-a11y/anchor-is-valid": 1,
-        "react/no-did-update-set-state": "off",
-        "max-classes-per-file": 1,
-        "no-unused-vars": "off" 
-    }
-}
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  // rules: 1 is warning, 2 is error, off is ignore
+  "rules": {
+    "import/extensions": "off",
+    "react/jsx-filename-extension": "off",
+    "no-alert": 1,
+    "import/no-duplicates": 1,
+    "import/no-unresolved": "off",
+    "max-len": "off",
+    "react/prefer-stateless-function": "off",
+    "react/sort-comp": 1,
+    "jsx-a11y/label-has-associated-control": 1,
+    "react/destructuring-assignment": 1,
+    "jsx-a11y/control-has-associated-label": 1,
+    "jsx-a11y/click-events-have-key-events": 1,
+    "jsx-a11y/no-static-element-interactions": 1,
+    "jsx-a11y/anchor-is-valid": 1,
+    "react/no-did-update-set-state": "off",
+    "max-classes-per-file": 1,
+    "no-unused-vars": "off",
+    "react/no-unused-prop-types": "off",
+    "react/prop-types": "off"
+  }
+}

package.json

@@ -12,6 +12,7 @@
     "@types/react": "^16.9.35",
     "@types/react-router-dom": "^5.1.5",
     "bootstrap": "^4.5.0",
+    "braintree-web": "^3.84.0",
     "file-loader": "5.0.2",
     "jquery": "^3.5.1",
     "jwt-decode": "^2.2.0",
@@ -170,7 +171,8 @@
         "s",
         "vh",
         "vw",
-        "deg"
+        "deg",
+        "fr"
       ]
     }
   }

src/App.tsx

@@ -8,6 +8,7 @@ import {
 import './static/styles/App.scss';
 import { Helmet } from 'react-helmet';
 import ReactGA from 'react-ga';
+import PropTypes from 'prop-types';
 import Header from './components/Header';
 import Error from './components/Error';
 import Footer from './components/Footer';
@@ -16,7 +17,10 @@ import AboutUs from './components/AboutUs';
 import ContactUs from './components/ContactUs';
 import Issue from './components/Issue';
 import Stories from './components/Stories';
-import AboutTeam from './components/AboutTeam';
+import Donation from './components/Donation';
+import ThankYouDonate from './components/ThankYouDonate';
+import Information from './components/Information';
+import SelectAmount from './components/SelectAmount';
 
 window.onload = () => {
   ReactGA.initialize('G-H1CSQJ6BGQ');
@@ -46,12 +50,12 @@ class App extends React.Component<{}, State, {}> {
               <Route path="/home" render={() => <Home />} />
               <Route path="/contact-us" render={() => <ContactUs />} />
               <Route path="/about-us" render={() => <AboutUs />} />
-              <Route path="/about-team" render={() => <AboutTeam />} />
               <Route path="/stories" render={() => <Stories />} />
-              <Route
-                path="/Issue"
-                render={() => <Issue />}
-              />
+              <Route path="/Issue" render={() => <Issue />} />
+              <Route path="/donate" render={() => <Donation />} />
+              <Route path="/ThankYouDonate" render={() => <ThankYouDonate />} />
+              <Route path="/Information" render={() => <Information />} />
+              <Route path="/SelectAmount" render={() => <SelectAmount />} />
               <Route path="/error">
                 <Error />
               </Route>

src/components/ContactUs.tsx

@@ -3,6 +3,7 @@ import MailchimpSubscribe from 'react-mailchimp-subscribe';
 import { Helmet } from 'react-helmet';
 import ReCAPTCHA from 'react-google-recaptcha';
 import { withAlert } from 'react-alert';
+import PropTypes from 'prop-types';
 import getServerURL from '../serverOverride';
 import { reCaptchaKey } from '../configVars';
 import { isValidEmail } from '../lib/Validations/Validations';
@@ -125,7 +126,8 @@ class ContactUs extends Component<Props, State, {}> {
     if (nameValidator === 'false') {
       return (
         <div className="invalid-feedback text-left">
-          Please enter a valid name. Include first and last if subscribing to our newsletter.
+          Please enter a valid name. Include first and last if subscribing to
+          our newsletter.
         </div>
       );
     }
@@ -204,7 +206,9 @@ class ContactUs extends Component<Props, State, {}> {
     let { description, recaptchaPayload } = this.state;
     // if user wanted to subscribe to email list
     if (checked && nameValidator === 'true') {
-      this.setState((prevState) => ({ submitButtonListener: !prevState.submitButtonListener }));
+      this.setState((prevState) => ({
+        submitButtonListener: !prevState.submitButtonListener,
+      }));
     }
     if (
       emailValidator !== 'true'
@@ -323,7 +327,11 @@ class ContactUs extends Component<Props, State, {}> {
                 </p>
                 {/* onSubmit={this.handleSubmitWithRecaptcha} */}
                 <form>
-                  <input type="hidden" name="u" value="9896e51b9ee0605d5e6745f82" />
+                  <input
+                    type="hidden"
+                    name="u"
+                    value="9896e51b9ee0605d5e6745f82"
+                  />
                   <input type="hidden" name="id" value="f16b440eb5" />
                   <input type="hidden" name="c" value="?" />
                   <div className="form-row form-group d-flex align-content-start pb-3">
@@ -389,8 +397,19 @@ class ContactUs extends Component<Props, State, {}> {
                     </label>
                   </div>
                   <div className="form-row form-group d-flex align-content-start pb-3 form-check">
-                    <label htmlFor="emailSubscribe" className="font-weight-bold form-check-label">
-                      <input id="emailSubscribe" type="checkbox" className="form-check-input" name="subscribe" onChange={(e) => { this.setState({ checked: e.target.checked }); }} />
+                    <label
+                      htmlFor="emailSubscribe"
+                      className="font-weight-bold form-check-label"
+                    >
+                      <input
+                        id="emailSubscribe"
+                        type="checkbox"
+                        className="form-check-input"
+                        name="subscribe"
+                        onChange={(e) => {
+                          this.setState({ checked: e.target.checked });
+                        }}
+                      />
                       Subscribe to our newsletter
                     </label>
                   </div>