Merge pull request #180 from kjannette/analy2

Analy2

src/Components/Home/HomePage.js

@@ -456,7 +456,7 @@ const HomePage = () => {
       </section>
       {showPromoModal ? (
         <ConfirmModal
-          titleText="Enter Promo Code"
+          titleText="Enter Code"
           onCancel={handleCancelModal}
           buttonLabelText="Enter Code"
           isPromoModal={true}

src/Components/Modals/ConfirmModal.js

@@ -23,8 +23,15 @@ const ConfirmModal = ({
   cancelButtonText,
 }) => {
   const [inputValue, setInputValue] = useState("");
+  const [codeError, setCodeError] = useState("");
   const title = titleText ? titleText : "Confirmation";
-
+  const handleConfirm = (code) => {
+    if (!code) {
+      setCodeError("Please enter a code");
+      return;
+    }
+    onConfirm(code);
+  };
   return (
     <Modal show="true" onHide={onCancel} size="lg">
       <Modal.Header closeButton>
@@ -61,10 +68,17 @@ const ConfirmModal = ({
                 inputValue
                   ? ""
                   : isPromoModal
-                  ? "Enter your promotional code"
+                  ? "Paste or type your code"
                   : "Description of issue"
               }
             />
+            <div className="confirm-error-box">
+              {codeError ? (
+                <p className="confirm-error-text">{codeError}</p>
+              ) : (
+                <></>
+              )}
+            </div>
           </div>
         ) : (
           <></>
@@ -80,7 +94,7 @@ const ConfirmModal = ({
         <Button
           disabled={isBusy}
           className="primary-button"
-          onClick={() => onConfirm(inputValue)}
+          onClick={() => handleConfirm(inputValue)}
           labelText={buttonLabelText}
         />
       </Modal.Footer>

src/styles/homepage.scss

@@ -134,7 +134,7 @@ section.section-1 {
   font-size: 19px;
   font-weight: 300;
   max-width: 370px;
-  line-height: 29px;
+  line-height: 1.5;
   text-align: justify;
   margin-top: -8px;
 }
@@ -166,7 +166,7 @@ p.text-block-1 {
   font-size: 26px;
   font-style: normal;
   font-weight: 300;
-  line-height: 1.5;
+  line-height: 1.4;
   width: 525px;
   margin-top: 24px;
 }

src/styles/modals.scss

@@ -34,7 +34,14 @@
     color: red;
   }
 }
-
+.confirm-error-box {
+  margin-top: -6px;
+}
+.confirm-error-text {
+  font-size: 14px;
+  color: red;
+  margin-left: 12px;
+}
 .upload-header-bold {
   font-weight: 500;
 }