Feat: Update Wizard Logic to Display Cancel Button and Info Copy (#1267)

bcgov · Mar 18, 2024 · 09a8140 · 09a8140
1 parent 12b2812
commit 09a8140
Showing 1 changed file with 40 additions and 17 deletions.
diff --git a/frontend/src/features/wizard/subcomponents/CompanyAndUserInfoSteps.tsx b/frontend/src/features/wizard/subcomponents/CompanyAndUserInfoSteps.tsx
@@ -117,7 +117,7 @@ export const CompanyAndUserInfoSteps = ({
   return (
     <>
       <input type="hidden" {...register("legalName")} />
-      {activeStep === totalSteps - 2 && (
+      {activeStep <= totalSteps - 1 && (
         <div className="create-profile-section create-profile-section--info">
           <Alert severity="info">
             <Typography>
@@ -204,22 +204,45 @@ export const CompanyAndUserInfoSteps = ({
         )}
         {activeStep === totalSteps - 1 && (
           <>
-            <Button
-              onClick={handleBack}
-              variant="contained"
-              color="secondary"
-              startIcon={<FontAwesomeIcon icon={faArrowLeft} />}
-              className="proceed-btn proceed-btn--prev"
-            >
-              Previous
-            </Button>
-            <Button
-              onClick={handleCreateProfileSubmit(onClickFinish)}
-              variant="contained"
-              className="proceed-btn proceed-btn--finish"
-            >
-              Finish
-            </Button>
+            <Stack direction="row" spacing={3}>
+              <Button
+                key="cancel-create-profile-button"
+                aria-label="Cancel Create Profile"
+                variant="contained"
+                color="secondary"
+                onClick={() => {
+                  // Go back
+                  navigate(-1);
+                }}
+                disableElevation
+                sx={{
+                  ":hover": {
+                    background: BC_COLOURS.bc_background_light_grey,
+                    border: `2px solid ${BC_COLOURS.bc_text_box_border_grey}`,
+                  },
+                  border: `2px solid ${BC_COLOURS.white}`,
+                  borderRadius: "4px",
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleBack}
+                variant="contained"
+                color="secondary"
+                startIcon={<FontAwesomeIcon icon={faArrowLeft} />}
+                className="proceed-btn proceed-btn--prev"
+              >
+                Previous
+              </Button>
+              <Button
+                onClick={handleCreateProfileSubmit(onClickFinish)}
+                variant="contained"
+                className="proceed-btn proceed-btn--finish"
+              >
+                Finish
+              </Button>
+            </Stack>
           </>
         )}
       </div>