fix: Remove empty back bar from confirmation component (#2449)

* fix: Remove empty back bar from confirmation component * test: Remove redundant test case
theopensystemslab · Nov 28, 2023 · 385970d · 385970d
1 parent b024bc8
commit 385970d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 26 deletions.
diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/canGoBack.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/canGoBack.test.ts
@@ -108,24 +108,6 @@ describe("cannot go back if", () => {
     expect(getState().canGoBack(getState().currentCard())).toStrictEqual(false);
   });
 
-  test("it's the confirmation component", () => {
-    setState({
-      breadcrumbs: {
-        XYoJeox7F0: {
-          auto: false,
-          answers: ["VfJAj7agvC"],
-        },
-        "8ZSxuIfFYE": {
-          auto: true,
-        },
-        bmsSl3ScbV: {
-          auto: false,
-        },
-      },
-    });
-    expect(getState().canGoBack(getState().currentCard())).toStrictEqual(false);
-  });
-
   test("the applicant made a payment", () => {
     setState({
       breadcrumbs: {

diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/preview.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/preview.ts
@@ -43,6 +43,7 @@ export interface PreviewStore extends Store.Store {
     upcomingCardIds?: Store.nodeId[],
   ) => Store.nodeId | undefined;
   canGoBack: (node: Store.node | null) => boolean;
+  getType: (node: Store.node | null) => TYPES | undefined;
   computePassport: () => Readonly<Store.passport>;
   record: (id: Store.nodeId, userData?: Store.userData) => void;
   resultData: (
@@ -187,13 +188,15 @@ export const previewStore: StateCreator<
   canGoBack: (node: Store.node | null) => {
     // XXX: node is a required param until upcomingNodes().shift() is
     //      optimised/memoized, see related isFinalCard() comment below
-    const { flow, hasPaid, previousCard } = get();
-    return (
-      Boolean(node?.id) &&
-      flow[node!.id!]?.type !== TYPES.Confirmation &&
-      Boolean(previousCard(node)) &&
-      !hasPaid()
-    );
+    const { hasPaid, previousCard } = get();
+    return Boolean(node?.id) && Boolean(previousCard(node)) && !hasPaid();
+  },
+
+  getType: (node: Store.node | null) => {
+    const { flow } = get();
+    if (!node?.id) return;
+    const currentNodeType = flow[node.id]?.type;
+    return currentNodeType;
   },
 
   computePassport: () => {

diff --git a/editor.planx.uk/src/pages/Preview/Questions.tsx b/editor.planx.uk/src/pages/Preview/Questions.tsx
@@ -3,6 +3,7 @@ import Box from "@mui/material/Box";
 import ButtonBase from "@mui/material/ButtonBase";
 import Container from "@mui/material/Container";
 import { styled } from "@mui/material/styles";
+import { TYPES } from "@planx/components/types";
 import { getLocalFlow, setLocalFlow } from "lib/local";
 import * as NEW from "lib/local.new";
 import { useAnalyticsTracking } from "pages/FlowEditor/lib/analyticsProvider";
@@ -61,6 +62,7 @@ const Questions = ({ previewEnvironment }: QuestionsProps) => {
     govUkPayment,
     canGoBack,
     setPreviewEnvironment,
+    getType,
   ] = useStore((state) => [
     state.previousCard,
     state.record,
@@ -72,6 +74,7 @@ const Questions = ({ previewEnvironment }: QuestionsProps) => {
     state.govUkPayment,
     state.canGoBack,
     state.setPreviewEnvironment,
+    state.getType,
   ]);
   const isStandalone = previewEnvironment === "standalone";
   const { createAnalytics, node, trackBackwardsNavigationByNodeId } =
@@ -158,9 +161,14 @@ const Questions = ({ previewEnvironment }: QuestionsProps) => {
     [node?.id],
   );
 
+  const showBackBar = useMemo(
+    () => getType(node) !== TYPES.Confirmation,
+    [node, getType],
+  );
+
   return (
     <Box width="100%" role="main">
-      <BackBar>
+      <BackBar hidden={!showBackBar}>
         <Container maxWidth={false}>
           <BackButton hidden={!showBackButton} onClick={() => goBack()}>
             <ArrowBackIcon fontSize="small" />