From 6f3d5ac54b792c155606c162ef3f4eecfa089726 Mon Sep 17 00:00:00 2001
From: Akshit Arora <akshitarora9211@gmail.com>
Date: Sun, 3 Oct 2021 23:29:48 +0530
Subject: [PATCH 1/3] recaptcha added

---
 .env.example                   |  2 +-
 components/MainDonationForm.js | 13 +++++++++++++
 package.json                   |  1 +
 yarn.lock                      | 27 +++++++++++++++++++++++++--
 4 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/.env.example b/.env.example
index 89a9628a..a6fbf6ef 100644
--- a/.env.example
+++ b/.env.example
@@ -2,7 +2,7 @@ STRIPE_SECRET_KEY = "sk_test_51JJ3vNLOlCyqSHKrp2vu93c9YzrXxDq7otphDYZqQTE10eZ0Gs
 CANCEL_URL = "https://helpafamily.margaritahumanitarian.org/"
 SUCCESS_URL = "https://helpafamily.margaritahumanitarian.org/thank-you"
 NEXT_PUBLIC_GMAPS_JS_API_KEY = "<your Google Maps JavaScript API Key here>"
-
+REACT_APP_SITE_KEY='6LeSv6ccAAAAAGL98cTakxdX_lvAUe-D3SR06bXw'
 
 // Generate these values in the Firebase console:
 //    PROJECT SETTINGS > Firebase Admin SDK > Generate new private key
diff --git a/components/MainDonationForm.js b/components/MainDonationForm.js
index bb0b8a8c..1823eb0b 100644
--- a/components/MainDonationForm.js
+++ b/components/MainDonationForm.js
@@ -1,3 +1,4 @@
+import ReCaptchaV2 from 'react-google-recaptcha';
 import React from 'react';
 import clsx from 'clsx';
 
@@ -35,6 +36,7 @@ export default function MainDonationForm() {
   const [selectedCauses, setSelectedCauses] = React.useState({});
   const [isAnyoneInNeed, setIsAnyoneInNeed] = React.useState(true);
   const [cause, setCause] = React.useState('');
+  const [reCaptchaToken, setReCaptchaToken] = React.useState('');
   const [handleSubmit, isPending] = useStripeSession();
 
   React.useEffect(() => {
@@ -79,6 +81,11 @@ export default function MainDonationForm() {
       return;
     }
 
+    if (reCaptchaToken === '') {
+      showModal('Please submit the captcha');
+      return;
+    }
+
     handleSubmit({ amount, cause });
   };
 
@@ -115,6 +122,12 @@ export default function MainDonationForm() {
             options={AMOUNTS}
             value={amount}
           />
+          <ReCaptchaV2
+            id="captcha"
+            onChange={(token) => setReCaptchaToken(token)}
+            onExpired={() => setReCaptchaToken('')}
+            sitekey={'6LcjyaccAAAAAAjE2z6vBhs2tOdhC-t0F2OCMj7z'} //need to use env variables process.env.REACT_APP_SITE_KEY
+          />
           <button
             className={clsx('btn btn-primary', { loading: isPending })}
             type="submit"
diff --git a/package.json b/package.json
index b56096d0..f81f17c5 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-google-maps": "^9.4.5",
+    "react-google-recaptcha": "^2.1.0",
     "react-icons": "^4.2.0",
     "react-lottie": "^1.2.3",
     "stripe": "^8.168.0"
diff --git a/yarn.lock b/yarn.lock
index ec9e2866..4ec2c72c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3337,6 +3337,13 @@ hoist-non-react-statics@^2.3.1:
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
 
+hoist-non-react-statics@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hosted-git-info@^2.1.4:
   version "2.8.9"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@@ -5414,7 +5421,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.8, prop-types@^15.7.2:
+prop-types@^15.5.0, prop-types@^15.5.8, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -5575,6 +5582,14 @@ raw-body@2.4.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+react-async-script@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-async-script/-/react-async-script-1.2.0.tgz#ab9412a26f0b83f5e2e00de1d2befc9400834b21"
+  integrity sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==
+  dependencies:
+    hoist-non-react-statics "^3.3.0"
+    prop-types "^15.5.0"
+
 react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
@@ -5601,6 +5616,14 @@ react-google-maps@^9.4.5:
     scriptjs "^2.5.8"
     warning "^3.0.0"
 
+react-google-recaptcha@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz#9f6f4954ce49c1dedabc2c532347321d892d0a16"
+  integrity sha512-K9jr7e0CWFigi8KxC3WPvNqZZ47df2RrMAta6KmRoE4RUi7Ys6NmNjytpXpg4HI/svmQJLKR+PncEPaNJ98DqQ==
+  dependencies:
+    prop-types "^15.5.0"
+    react-async-script "^1.1.1"
+
 react-icons@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
@@ -5611,7 +5634,7 @@ react-is@17.0.2, "react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^16.8.1:
+react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

From 87393e9043186317e5a0379bde9aedc9734814f8 Mon Sep 17 00:00:00 2001
From: Akshit Arora <akshitarora9211@gmail.com>
Date: Mon, 4 Oct 2021 20:04:18 +0530
Subject: [PATCH 2/3] env fixed and updated .env.example

---
 .env.example                   | 2 +-
 components/MainDonationForm.js | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/.env.example b/.env.example
index a6fbf6ef..d4919322 100644
--- a/.env.example
+++ b/.env.example
@@ -2,7 +2,7 @@ STRIPE_SECRET_KEY = "sk_test_51JJ3vNLOlCyqSHKrp2vu93c9YzrXxDq7otphDYZqQTE10eZ0Gs
 CANCEL_URL = "https://helpafamily.margaritahumanitarian.org/"
 SUCCESS_URL = "https://helpafamily.margaritahumanitarian.org/thank-you"
 NEXT_PUBLIC_GMAPS_JS_API_KEY = "<your Google Maps JavaScript API Key here>"
-REACT_APP_SITE_KEY='6LeSv6ccAAAAAGL98cTakxdX_lvAUe-D3SR06bXw'
+NEXT_PUBLIC_SITE_KEY=6LcjyaccAAAAAAjE2z6vBhs2tOdhC-t0F2OCMj7z
 
 // Generate these values in the Firebase console:
 //    PROJECT SETTINGS > Firebase Admin SDK > Generate new private key
diff --git a/components/MainDonationForm.js b/components/MainDonationForm.js
index 1823eb0b..3a0fd2e2 100644
--- a/components/MainDonationForm.js
+++ b/components/MainDonationForm.js
@@ -39,6 +39,7 @@ export default function MainDonationForm() {
   const [reCaptchaToken, setReCaptchaToken] = React.useState('');
   const [handleSubmit, isPending] = useStripeSession();
 
+  console.log(process.env.NEXT_PUBLIC_SITE_KEY);
   React.useEffect(() => {
     const allSelected = Object.values(selectedCauses).filter(Boolean);
     if (allSelected.length === CAUSES.length) {
@@ -126,7 +127,7 @@ export default function MainDonationForm() {
             id="captcha"
             onChange={(token) => setReCaptchaToken(token)}
             onExpired={() => setReCaptchaToken('')}
-            sitekey={'6LcjyaccAAAAAAjE2z6vBhs2tOdhC-t0F2OCMj7z'} //need to use env variables process.env.REACT_APP_SITE_KEY
+            sitekey={process.env.NEXT_PUBLIC_SITE_KEY} //need to use env variables process.env.REACT_APP_SITE_KEY
           />
           <button
             className={clsx('btn btn-primary', { loading: isPending })}

From 795cad23e120b3e7878e8312f476dcdd22983bcc Mon Sep 17 00:00:00 2001
From: Akshit Arora <akshitarora9211@gmail.com>
Date: Thu, 7 Oct 2021 19:51:17 +0530
Subject: [PATCH 3/3] add steps to create site key in .env.example

---
 .env.example | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/.env.example b/.env.example
index d4919322..c6bf221c 100644
--- a/.env.example
+++ b/.env.example
@@ -2,11 +2,17 @@ STRIPE_SECRET_KEY = "sk_test_51JJ3vNLOlCyqSHKrp2vu93c9YzrXxDq7otphDYZqQTE10eZ0Gs
 CANCEL_URL = "https://helpafamily.margaritahumanitarian.org/"
 SUCCESS_URL = "https://helpafamily.margaritahumanitarian.org/thank-you"
 NEXT_PUBLIC_GMAPS_JS_API_KEY = "<your Google Maps JavaScript API Key here>"
+# generate NEXT_PUBLIC_SITE_KEY:
+# visit google reCaptcha website https://www.google.com/recaptcha/admin/
+# create a new reCaptcha using plus button on top.
+# select reCaptcha type as v2 and fill all the details
+# click on create and copy the site code and replace the below value.
+# video link: https://www.youtube.com/watch?v=s9gw5ArrEz4
 NEXT_PUBLIC_SITE_KEY=6LcjyaccAAAAAAjE2z6vBhs2tOdhC-t0F2OCMj7z
 
-// Generate these values in the Firebase console:
-//    PROJECT SETTINGS > Firebase Admin SDK > Generate new private key
-//    Creates a downloadable JSON FILE that contains these values
+# Generate these values in the Firebase console:
+# PROJECT SETTINGS > Firebase Admin SDK > Generate new private key
+# Creates a downloadable JSON FILE that contains these values
 FIREBASE_PROJECT_ID = "XYZ"
 FIREBASE_PRIVATE_KEY_ID = "XYZ"
 FIREBASE_PRIVATE_KEY = "XYZ"