fix: Handle S&R by adding layout wrapper

editor.planx.uk/src/pages/layout/OfflineLayout.tsx

@@ -0,0 +1,16 @@
+import { useStore } from "pages/FlowEditor/lib/store";
+import { OfflinePage } from "pages/OfflinePage";
+import React, { PropsWithChildren } from "react";
+
+const OfflineLayout = ({ children }: PropsWithChildren) => {
+  const isFlowOnline = useStore.getState().flowStatus === "online";
+  const searchParams = new URLSearchParams(window.location.search);
+  const isUserResuming = Boolean(searchParams.get("sessionId"));
+
+  // Allow users to complete Save & Return journeys, even if a flow is offline
+  const isFlowAccessible = isFlowOnline || isUserResuming;
+
+  return isFlowAccessible ? children : <OfflinePage />;
+};
+
+export default OfflineLayout;

editor.planx.uk/src/routes/published.tsx

@@ -1,6 +1,4 @@
 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";
@@ -26,21 +24,9 @@ const routes = compose(
   }),
 
   mount({
-    "/": route((req) => ({
-      view: () => {
-        const isFlowOnline = useStore.getState().flowStatus === "online";
-        const isUserResuming = Boolean(req.params.sessionId);
-
-        // Allow users to complete Save & Return journeys, even if a flow is offline
-        const isFlowAccessible = isFlowOnline || isUserResuming;
-
-        return isFlowAccessible ? (
-          <Questions previewEnvironment="standalone" />
-        ) : (
-          <OfflinePage />
-        );
-      },
-    })),
+    "/": route({
+      view: <Questions previewEnvironment="standalone" />,
+    }),
     "/pages/:page": map((req) => {
       return route({
         view: () => <ContentPage page={req.params.page} />,

editor.planx.uk/src/routes/views/published.tsx

@@ -4,6 +4,7 @@ import { NaviRequest } from "navi";
 import { NotFoundError } from "navi";
 import { useStore } from "pages/FlowEditor/lib/store";
 import { Store } from "pages/FlowEditor/lib/store";
+import OfflineLayout from "pages/layout/OfflineLayout";
 import PublicLayout from "pages/layout/PublicLayout";
 import SaveAndReturnLayout from "pages/layout/SaveAndReturnLayout";
 import React from "react";
@@ -55,9 +56,11 @@ export const publishedView = async (req: NaviRequest) => {
 
   return (
     <PublicLayout>
-      <SaveAndReturnLayout>
-        <View />
-      </SaveAndReturnLayout>
+      <OfflineLayout>
+        <SaveAndReturnLayout>
+          <View />
+        </SaveAndReturnLayout>
+      </OfflineLayout>
     </PublicLayout>
   );
 };