feat: Route to offline page based on flow status

theopensystemslab · May 29, 2024 · 05e665f · 05e665f
1 parent 37bf745
commit 05e665f
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 7 deletions.
diff --git a/e2e/tests/ui-driven/src/create-flow/create-flow.spec.ts b/e2e/tests/ui-driven/src/create-flow/create-flow.spec.ts
@@ -193,7 +193,9 @@ test.describe("Navigation", () => {
       `/${context.team.slug}/${serviceProps.slug}/published?analytics=false`,
     );
 
-    await expect(page.getByText("Not Found")).toBeVisible();
+    await expect(
+      page.getByRole("heading", { level: 1, name: "Offline" }),
+    ).toBeVisible();
   });
 
   test("Turn a flow online", async ({ browser }) => {

diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/shared.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/shared.ts
@@ -1,5 +1,6 @@
 import { CoreDomainClient } from "@opensystemslab/planx-core";
 import { Auth } from "@opensystemslab/planx-core/dist/requests/graphql";
+import { FlowStatus } from "@opensystemslab/planx-core/types";
 import { ROOT_NODE_KEY } from "@planx/graph";
 import { capitalize } from "lodash";
 import { removeSessionIdSearchParam } from "utils";
@@ -23,10 +24,12 @@ export interface SharedStore extends Store.Store {
     id,
     flow,
     flowSlug,
+    flowStatus,
   }: {
     id: string;
     flow: Store.flow;
     flowSlug: string;
+    flowStatus?: FlowStatus;
   }) => void;
   wasVisited: (id: Store.nodeId) => boolean;
   previewEnvironment: PreviewEnvironment;
@@ -88,9 +91,9 @@ export const sharedStore: StateCreator<
     removeSessionIdSearchParam();
   },
 
-  setFlow({ id, flow, flowSlug }) {
+  setFlow({ id, flow, flowSlug, flowStatus }) {
     this.setFlowNameFromSlug(flowSlug);
-    set({ id, flow, flowSlug });
+    set({ id, flow, flowSlug, flowStatus });
     get().initNavigationStore();
   },
 

diff --git a/editor.planx.uk/src/pages/OfflinePage.tsx b/editor.planx.uk/src/pages/OfflinePage.tsx
@@ -0,0 +1,11 @@
+import Typography from "@mui/material/Typography";
+import StatusPage from "pages/Preview/StatusPage";
+import React from "react";
+
+export const OfflinePage: React.FC = () => (
+  <StatusPage bannerHeading="Offline">
+    <Typography variant="body2">
+      This service is not currently available. Please check back later.
+    </Typography>
+  </StatusPage>
+);
diff --git a/editor.planx.uk/src/routes/published.tsx b/editor.planx.uk/src/routes/published.tsx
@@ -1,4 +1,6 @@
 import { compose, map, mount, route, withData, withView } from "navi";
+import { useStore } from "pages/FlowEditor/lib/store";
+import { OfflinePage } from "pages/OfflinePage";
 import ContentPage from "pages/Preview/ContentPage";
 import Questions from "pages/Preview/Questions";
 import React from "react";
@@ -25,7 +27,15 @@ const routes = compose(
 
   mount({
     "/": route({
-      view: <Questions previewEnvironment="standalone" />,
+      view: () => {
+        const isOnline = useStore.getState().flowStatus === "online";
+
+        return isOnline ? (
+          <Questions previewEnvironment="standalone" />
+        ) : (
+          <OfflinePage />
+        );
+      },
     }),
     "/pages/:page": map((req) => {
       return route({

diff --git a/editor.planx.uk/src/routes/views/published.tsx b/editor.planx.uk/src/routes/views/published.tsx
@@ -43,7 +43,12 @@ export const publishedView = async (req: NaviRequest) => {
   const state = useStore.getState();
   // XXX: necessary as long as not every flow is published; aim to remove dataMergedHotfix.ts in future
   // load pre-flattened published flow if exists, else load & flatten flow
-  state.setFlow({ id: flow.id, flow: publishedFlow, flowSlug });
+  state.setFlow({
+    id: flow.id,
+    flow: publishedFlow,
+    flowSlug,
+    flowStatus: flow.status,
+  });
   state.setGlobalSettings(data.globalSettings[0]);
   state.setFlowSettings(flow.settings);
   state.setTeam(flow.team);
@@ -94,6 +99,7 @@ export const fetchSettingsForPublishedView = async (
               boundaryBBox: boundary_bbox
             }
             settings
+            status
             publishedFlows: published_flows(
               limit: 1
               order_by: { created_at: desc }

diff --git a/editor.planx.uk/src/types.ts b/editor.planx.uk/src/types.ts
@@ -1,13 +1,14 @@
 import {
+  FlowStatus,
   GovUKPayment,
   NotifyPersonalisation,
   Team,
 } from "@opensystemslab/planx-core/types";
+import { OT } from "@planx/graph/types";
 import { useFormik } from "formik";
 
 import { Store } from "./pages/FlowEditor/lib/store/index";
 import { SharedStore } from "./pages/FlowEditor/lib/store/shared";
-import { OT } from "@planx/graph/types";
 
 export type Maybe<T> = T | undefined;
 
@@ -18,6 +19,7 @@ export interface Flow {
   slug: string;
   team: Team;
   settings?: FlowSettings;
+  status?: FlowStatus;
 }
 export interface GlobalSettings {
   footerContent?: { [key: string]: TextContent };
@@ -133,4 +135,4 @@ export interface Operation {
     lastName: string;
   };
   data: Array<OT.Op>;
-}
+}