From 340c554667a3f89e37c41313c898a23570e6f5e4 Mon Sep 17 00:00:00 2001
From: henryk1229 <henryk1229@gmail.com>
Date: Mon, 15 May 2023 12:52:09 -0400
Subject: [PATCH 1/2] feat(campaign-interaction-steps): add save button to top
 of section

closes #1547
---
 .../CampaignInteractionStepsForm/index.tsx    | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/containers/AdminCampaignEdit/sections/CampaignInteractionStepsForm/index.tsx b/src/containers/AdminCampaignEdit/sections/CampaignInteractionStepsForm/index.tsx
index c1925e06d..5893a01da 100644
--- a/src/containers/AdminCampaignEdit/sections/CampaignInteractionStepsForm/index.tsx
+++ b/src/containers/AdminCampaignEdit/sections/CampaignInteractionStepsForm/index.tsx
@@ -389,9 +389,22 @@ const CampaignInteractionStepsForm: React.FC<InnerProps> = (props) => {
         title="What do you want to discuss?"
         subtitle="You can add scripts and questions and your texters can indicate responses from your contacts. For example, you might want to collect RSVPs to an event or find out whether to follow up about a different volunteer activity."
       />
-      <Box m={2}>
-        <ScriptPreviewButton campaignId={campaignId} />
-      </Box>
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <Box m={2}>
+          <ScriptPreviewButton campaignId={campaignId} />
+        </Box>
+        <Box m={2}>
+          <Button
+            {...dataTest("interactionSubmit", true)}
+            variant="contained"
+            color="primary"
+            disabled={isSaveDisabled}
+            onClick={handleSave}
+          >
+            {finalSaveLabel}
+          </Button>
+        </Box>
+      </div>
       {renderInvalidScriptFields()}
       <InteractionStepCard
         interactionStep={finalFree}

From 0b29a5ebac6e35e4558088831c1bebb243a78c3b Mon Sep 17 00:00:00 2001
From: henryk1229 <henryk1229@gmail.com>
Date: Thu, 18 May 2023 11:11:05 -0400
Subject: [PATCH 2/2] refactor(campaign-interaction-steps): use mui Grid
 component, save instead of save and goto next

#1547
---
 .../CampaignInteractionStepsForm/index.tsx      | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/containers/AdminCampaignEdit/sections/CampaignInteractionStepsForm/index.tsx b/src/containers/AdminCampaignEdit/sections/CampaignInteractionStepsForm/index.tsx
index 5893a01da..66ea0be82 100644
--- a/src/containers/AdminCampaignEdit/sections/CampaignInteractionStepsForm/index.tsx
+++ b/src/containers/AdminCampaignEdit/sections/CampaignInteractionStepsForm/index.tsx
@@ -1,11 +1,11 @@
 import type { ApolloQueryResult } from "@apollo/client";
 import { gql } from "@apollo/client";
-import Box from "@material-ui/core/Box";
 import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogContentText from "@material-ui/core/DialogContentText";
+import Grid from "@material-ui/core/Grid";
 import type { CampaignVariablePage } from "@spoke/spoke-codegen";
 import produce from "immer";
 import isEqual from "lodash/isEqual";
@@ -321,6 +321,7 @@ const CampaignInteractionStepsForm: React.FC<InnerProps> = (props) => {
   const isSaveDisabled =
     isWorking || hasEmptyScripts || (!isNew && !hasPendingChanges);
   const finalSaveLabel = isWorking ? "Working..." : saveLabel;
+  const upperSaveLabel = isWorking ? "Working..." : "Save";
 
   const tree = makeTree(interactionSteps);
   const finalFree: InteractionStepWithChildren = isEqual(tree, {
@@ -389,11 +390,11 @@ const CampaignInteractionStepsForm: React.FC<InnerProps> = (props) => {
         title="What do you want to discuss?"
         subtitle="You can add scripts and questions and your texters can indicate responses from your contacts. For example, you might want to collect RSVPs to an event or find out whether to follow up about a different volunteer activity."
       />
-      <div style={{ display: "flex", justifyContent: "space-between" }}>
-        <Box m={2}>
+      <Grid container style={{ padding: "8px" }} justifyContent="space-between">
+        <Grid item xs={4}>
           <ScriptPreviewButton campaignId={campaignId} />
-        </Box>
-        <Box m={2}>
+        </Grid>
+        <Grid item xs={1}>
           <Button
             {...dataTest("interactionSubmit", true)}
             variant="contained"
@@ -401,10 +402,10 @@ const CampaignInteractionStepsForm: React.FC<InnerProps> = (props) => {
             disabled={isSaveDisabled}
             onClick={handleSave}
           >
-            {finalSaveLabel}
+            {upperSaveLabel}
           </Button>
-        </Box>
-      </div>
+        </Grid>
+      </Grid>
       {renderInvalidScriptFields()}
       <InteractionStepCard
         interactionStep={finalFree}