From 6ac8df7d05cc4ceb696f2bfad14f3b4751322bb6 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Sat, 7 Nov 2020 16:38:35 +0900
Subject: [PATCH] Disable submission when T&C is not checked

---
 src/css/additional-styles/theme.scss |  4 ++++
 src/partials/FormTemplate.js         | 12 ++++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/css/additional-styles/theme.scss b/src/css/additional-styles/theme.scss
index e14bb45..db30af4 100644
--- a/src/css/additional-styles/theme.scss
+++ b/src/css/additional-styles/theme.scss
@@ -30,6 +30,10 @@ button:focus,
     margin-left: 20px;
 }
 
+.not-allowed:hover {
+    cursor: not-allowed;
+}
+
 // Hamburger button
 .hamburger {
 
diff --git a/src/partials/FormTemplate.js b/src/partials/FormTemplate.js
index 33902a9..d72f691 100644
--- a/src/partials/FormTemplate.js
+++ b/src/partials/FormTemplate.js
@@ -66,7 +66,7 @@ const FormTemplate = () => {
                       lastName: '',
                       email: '',
                       emailConfirm: '',
-                      agreed: null,
+                      agreed: [],
                     }}
                     onSubmit={async (values) => {
                       if (values.agreed[0] === 'checked') {
@@ -84,7 +84,7 @@ const FormTemplate = () => {
                     }}
                     validate={validate}
                   >
-                    {({ errors, touched, isValidating }) => (
+                    {({ errors, touched, values }) => (
                       <Form>
                         {/* <label htmlFor="firstName">First Name</label> */}
                         <Field 
@@ -140,8 +140,12 @@ const FormTemplate = () => {
                           the <a className="a-links cta-hover" href="#">Affiliate Program Terms of Service</a>, 
                           and the <a className="a-links cta-hover" href="#">Privacy Policy</a>.
                         </p>
-
-                        <button type="submit" className="btn text-white bg-blue-600 hover:bg-blue-700 shadow mt-12">Submit</button>
+                        {console.log(values.agreed)}
+                        {values.agreed.length ? (
+                          <button type="submit" className="btn text-white bg-blue-600 hover:bg-blue-700 shadow mt-12">Submit</button>
+                        ) : (
+                          <button type="submit" disabled className="btn text-white bg-gray-600 not-allowed shadow mt-12">Submit</button>
+                        )}      
                       </Form>
                     )}
                   </Formik>