From d19e71c3dcd3e114c9a3e59f2510c46b57f4c01c Mon Sep 17 00:00:00 2001
From: trechriron <trechriron@gmail.com>
Date: Thu, 7 Dec 2023 20:58:42 -0800
Subject: [PATCH] Fixed form validation, updated text page.

---
 src/App/DevFormComponent.jsx | 62 +++++++++++++++++++++++++-----------
 src/App/DevResultText.jsx    | 29 +++++++++++++++--
 2 files changed, 70 insertions(+), 21 deletions(-)

diff --git a/src/App/DevFormComponent.jsx b/src/App/DevFormComponent.jsx
index 831b8ab..4acb733 100644
--- a/src/App/DevFormComponent.jsx
+++ b/src/App/DevFormComponent.jsx
@@ -73,24 +73,14 @@
             padding: "5px",
         }, 
     };
-    
-    const [formData, setFormData] = useState({
-        phase1: '',
-        phase2: '',
-        phase3: '',
-        phase4: '',
-        phase5: '',
-        checkbox1: false,
-        checkbox2: false,
-        checkbox3: false,
-        checkbox4: false,
-        checkbox5: false,
+
+    const checkboxLabels = {
         label1: 'Use Managed RPC Service (Enterprise)',
         label2: 'Use Private RPC Service',
         label3: 'Use Managed Indexer (Enterprise)',
         label4: 'Use Private Indexer',
         label5: 'Use Fast Auth Onboarding',
-    });
+    }
 
     const dropDownItems = [
         { value: "0", label: "Please select..." },
@@ -110,7 +100,21 @@
         { value: "250k", label: "250k calls per month" },
     ];
 
-    const [callValue, setCallValue] = useState("");
+const [bannerMessage, setBannerMessage] = useState(<div></div>);
+const [callValue, setCallValue] = useState("");
+const [formSuccess, setFormSuccess] = useState(false);
+const [formData, setFormData] = useState({
+    phase1: '',
+    phase2: '',
+    phase3: '',
+    phase4: '',
+    phase5: '',
+    checkbox1: false,
+    checkbox2: false,
+    checkbox3: false,
+    checkbox4: false,
+    checkbox5: false,
+});
 
 const handleChange = (e) => {
     const { name, value, type, checked } = e.target;
@@ -124,11 +128,26 @@ const handleChange = (e) => {
 };
 
   const handleSubmit = (e) => {
-    props.submitDeveloperProfile(formData);
-  }; 
+    const emptyValuesArray =  []
+    Object.entries(formData).map(([key, value]) => {
+        if (key.includes('phase') && value === '') {
+            emptyValuesArray.push(1);
+        };
+    });
+    if (emptyValuesArray.length > 0) {
+        setFormSuccess(false);
+        setBannerMessage(<h3 style={{fontWeight: "bold",color: "red"}}>Please select calls for all Phases!</h3>);
+    } else {
+        setFormSuccess(true);
+        props.submitDeveloperProfile(formData);
+    };
+
+  };
 
   console.log(formData);
   console.log(callValue);
+  console.log(formSuccess);
+
     return (
     <div>
         <div style={formStyles.row}>
@@ -145,14 +164,14 @@ const handleChange = (e) => {
                 </div>
             </div>
             <div style={formStyles.columnTextRight}>
-                <p style={formStyles.paragraph}>The number provided = the number of active users per minute. The pulldown lists have generic thresholds you can choose to get a close idea of what your expendentitures will be at common thresholds. You can break down your estimate into 5 phases.
+                <p style={formStyles.paragraph}>The number provided = the number of active users per minute. The pulldown lists have generic thresholds you can choose to get a close idea of what your expendentitures will be at common thresholds. You should choose values for all 5 phases for this demo.
                 </p>
                 <p style={formStyles.paragraph}>
                     Please check the boxes that apply to your project. If you are unsure, leave the box unchecked.
                 </p>
             </div>
         </div>
-
+        
         <form onSubmit={handleSubmit}>
         {/* Dropdown per phase */}
         <div style={formStyles.rowFields}>
@@ -190,11 +209,16 @@ const handleChange = (e) => {
                 checked={formData[`checkbox${index + 1}`]}
                 onChange={handleChange}
                 />
-                {formData[`label${index + 1}`]}
+                {checkboxLabels[`label${index + 1}`]}
             </label>
             </div>
         ))}
         </div>
+        
+        {/* Banner Alert */}
+        <div style={formStyles.rowFields}>
+        {bannerMessage}
+        </div>
 
         {/* Submit Button */}
         <div style={formStyles.rowFields}>
diff --git a/src/App/DevResultText.jsx b/src/App/DevResultText.jsx
index 17b44a0..316ed82 100644
--- a/src/App/DevResultText.jsx
+++ b/src/App/DevResultText.jsx
@@ -14,12 +14,37 @@ const devTextStyles = {
     },
 };
 
-const basicText = (<p style={devTextStyles.body}>Please enter the following information to estimate the cost of your project...</p>);
+const checkboxLabels = [
+    'Use Managed RPC Service (Enterprise)',
+    'Use Private RPC Service',
+    'Use Managed Indexer (Enterprise)',
+    'Use Private Indexer',
+    'Use Fast Auth Onboarding',
+];
+
+const developerProfile = props.developerProfile;
+
+const basicText = (<p style={devTextStyles.body}>Thank you for submitting your metrics. Following is a breakdown of projected costs across phases.</p>);
+
+const valuesText = Object.entries(developerProfile).map(([key, value]) => {
+    if (key.includes("phase") && value !=='') {
+        const phaseNumString = key.slice(-1);
+        const phaseString = `Phase ${phaseNumString}`;
+        return (<p id={key}>In {phaseString} you selected {value} calls per month.</p>);
+    }
+    if (key.includes("checkbox") && value === true) {
+        const checkboxNumString = key.slice(-1);
+        const index = parseInt(checkboxNumString) - 1;
+        const checkboxString = `Checkbox ${checkboxNumString}`;
+        return (<p id={key}>Because you selected {checkboxString} we are including costs for: {checkboxLabels[index]}.</p>);
+    }
+});
 
 return (
     <div>
         <div style={devTextStyles.body}>
-            {basicText}  
+            {basicText} 
+            {valuesText} 
         </div> 
     </div>
 );
\ No newline at end of file