From 4541152b5675ed20ea22201fb3cb78ec791450e5 Mon Sep 17 00:00:00 2001
From: Alec Li <smartspot2@gmail.com>
Date: Sat, 9 Mar 2024 18:31:58 -0800
Subject: [PATCH] Rework save/submit button logic

---
 .../coordinator/CreateStage.tsx               | 44 +++++++++++++------
 1 file changed, 31 insertions(+), 13 deletions(-)

diff --git a/csm_web/frontend/src/components/enrollment_automation/coordinator/CreateStage.tsx b/csm_web/frontend/src/components/enrollment_automation/coordinator/CreateStage.tsx
index 7ca7cc80..2d0b74fd 100644
--- a/csm_web/frontend/src/components/enrollment_automation/coordinator/CreateStage.tsx
+++ b/csm_web/frontend/src/components/enrollment_automation/coordinator/CreateStage.tsx
@@ -622,9 +622,11 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
           </div>
         </div>
         <div className="matcher-sidebar-tiling-bottom">
-          <button className="secondary-btn" onClick={saveTiledEvents}>
-            Save
-          </button>
+          {curCreatedTimes.length > 0 && (
+            <button className="primary-btn" onClick={saveTiledEvents}>
+              Save
+            </button>
+          )}
         </div>
       </div>
     );
@@ -677,12 +679,12 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
         </div>
         <div className="matcher-sidebar-create-bottom">
           <div className="matcher-sidebar-create-bottom-row">
-            <button className="secondary-btn" onClick={saveEvent}>
-              Save
-            </button>
             <button className="secondary-btn" onClick={cancelEvent}>
               Cancel
             </button>
+            <button className="primary-btn" onClick={saveEvent}>
+              Save
+            </button>
           </div>
           <div className="matcher-sidebar-create-bottom-row">
             <button className="danger-btn" onClick={deleteEvent}>
@@ -746,9 +748,6 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
               <input type="checkbox" onChange={toggleCreatingTiledEvents} ref={tileRefs.toggle} />
               Create tiled events
             </label>
-            <button className="primary-btn" onClick={() => setShowConfirmModal(true)}>
-              Submit
-            </button>
           </div>
         </div>
         <div className="coordinator-sidebar-right">
@@ -767,11 +766,30 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
       </div>
       <div className="matcher-body-footer-right">
         <div className="matcher-unsaved-changes-container">
-          {edited && <span className="matcher-unsaved-changes">You have unsaved changes!</span>}
+          {edited && curCreatedTimes.length === 0 && (
+            <button className="primary-btn" onClick={() => setShowConfirmModal(true)}>
+              Submit
+            </button>
+          )}
         </div>
-        <button className="primary-btn" onClick={nextStage} disabled={edited}>
-          Continue
-        </button>
+        {edited || curCreatedTimes.length > 0 ? (
+          <div className="matcher-tooltip-container">
+            <Tooltip
+              placement="top"
+              source={
+                <button className="primary-btn" disabled={true}>
+                  Continue
+                </button>
+              }
+            >
+              <div className="matcher-tiling-tooltip-body">You have unsaved changes!</div>
+            </Tooltip>
+          </div>
+        ) : (
+          <button className="primary-btn" onClick={nextStage}>
+            Continue
+          </button>
+        )}
       </div>
       {showConfirmModal && slotConfirmModal}
     </React.Fragment>