From ffc7ba08e8dbb9d383bcdb76e4c18a98dcd7a690 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Thu, 15 Aug 2024 16:09:33 +0100
Subject: [PATCH 01/24] add store values to ServiceSettings

---
 .../components/Settings/ServiceSettings.tsx   | 26 ++++++++++++++-----
 .../src/pages/FlowEditor/lib/store/team.ts    |  5 ++++
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
index 0e4ef6f895..b4dfdd599a 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -5,6 +5,7 @@ import Container from "@mui/material/Container";
 import FormControlLabel, {
   formControlLabelClasses,
 } from "@mui/material/FormControlLabel";
+import Link from "@mui/material/Link";
 import Snackbar from "@mui/material/Snackbar";
 import Switch, { SwitchProps } from "@mui/material/Switch";
 import Typography from "@mui/material/Typography";
@@ -81,13 +82,23 @@ const TextInput: React.FC<{
 };
 
 const ServiceSettings: React.FC = () => {
-  const [flowSettings, updateFlowSettings, flowStatus, updateFlowStatus] =
-    useStore((state) => [
-      state.flowSettings,
-      state.updateFlowSettings,
-      state.flowStatus,
-      state.updateFlowStatus,
-    ]);
+  const [
+    flowSettings,
+    updateFlowSettings,
+    flowStatus,
+    updateFlowStatus,
+    flowSlug,
+    getTeam,
+    isFlowPublished,
+  ] = useStore((state) => [
+    state.flowSettings,
+    state.updateFlowSettings,
+    state.flowStatus,
+    state.updateFlowStatus,
+    state.flowSlug,
+    state.getTeam,
+    state.isFlowPublished,
+  ]);
 
   const [isAlertOpen, setIsAlertOpen] = useState(false);
 
@@ -280,6 +291,7 @@ const ServiceSettings: React.FC = () => {
             </p>
             <p>Offline services can still be edited and published as normal.</p>
           </SettingsDescription>
+
           <Box>
             <Button
               type="submit"
diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts
index 824e6cb93b..99238abce5 100644
--- a/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts
+++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts
@@ -17,6 +17,7 @@ export interface TeamStore {
   teamSettings: TeamSettings;
   teamSlug: string;
   teamTheme: TeamTheme;
+  teamDomain: string;
 
   setTeam: (team: Team) => void;
   getTeam: () => Team;
@@ -40,6 +41,7 @@ export const teamStore: StateCreator<
   teamSettings: {} as TeamSettings,
   teamSlug: "",
   teamTheme: {} as TeamTheme,
+  teamDomain: "",
 
   setTeam: (team) => {
     set({
@@ -49,6 +51,7 @@ export const teamStore: StateCreator<
       teamSettings: team.settings,
       teamSlug: team.slug,
       teamTheme: team.theme,
+      teamDomain: team.domain,
     });
 
     if (team.theme?.favicon) {
@@ -64,6 +67,7 @@ export const teamStore: StateCreator<
     settings: get().teamSettings,
     slug: get().teamSlug,
     theme: get().teamTheme,
+    domain: get().teamDomain,
   }),
 
   createTeam: async (newTeam) => {
@@ -84,6 +88,7 @@ export const teamStore: StateCreator<
             id
             name
             slug
+            domain
             flows(order_by: { updated_at: desc }) {
               slug
               updated_at

From ab190a03106af65214db84f1a8f096875490e524 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Fri, 16 Aug 2024 09:28:30 +0100
Subject: [PATCH 02/24] framework for add component link logic

---
 .../components/Settings/ServiceSettings.tsx   | 39 +++++++++++++++++--
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
index b4dfdd599a..8cf9681495 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -12,6 +12,7 @@ import Typography from "@mui/material/Typography";
 import { FlowStatus } from "@opensystemslab/planx-core/types";
 import { useFormik } from "formik";
 import React, { useState } from "react";
+import { rootFlowPath } from "routes/utils";
 import { FONT_WEIGHT_BOLD } from "theme";
 import InputGroup from "ui/editor/InputGroup";
 import InputLegend from "ui/editor/InputLegend";
@@ -25,6 +26,26 @@ import InputRowItem from "ui/shared/InputRowItem";
 import type { FlowSettings } from "../../../../types";
 import { useStore } from "../../lib/store";
 
+const TitledLinkComponent: React.FC<{
+  title: string;
+  link: string;
+  isActive: boolean;
+}> = () => {
+  return <></>;
+};
+
+const PublicLink: React.FC<{
+  isFlowPublished: boolean;
+  status: string;
+  subdomain: string;
+  link: string;
+}> = ({ isFlowPublished, status, subdomain, link }) => {
+  const isFlowPublic = isFlowPublished && status === "online";
+  const hasSubdomain = Boolean(subdomain);
+
+  return <></>;
+};
+
 const TextInput: React.FC<{
   title: string;
   richText?: boolean;
@@ -88,7 +109,7 @@ const ServiceSettings: React.FC = () => {
     flowStatus,
     updateFlowStatus,
     flowSlug,
-    getTeam,
+    teamDomain,
     isFlowPublished,
   ] = useStore((state) => [
     state.flowSettings,
@@ -96,7 +117,7 @@ const ServiceSettings: React.FC = () => {
     state.flowStatus,
     state.updateFlowStatus,
     state.flowSlug,
-    state.getTeam,
+    state.teamDomain,
     state.isFlowPublished,
   ]);
 
@@ -154,6 +175,15 @@ const ServiceSettings: React.FC = () => {
     },
   });
 
+  const removeLinkEndSlash = (link: string) =>
+    link[link.length - 1] === "/" ? link.slice(0, -1) : link;
+
+  const publishedLink = `${window.location.origin}${rootFlowPath(
+    false,
+  )}/published`;
+
+  const subdomainLink = `${removeLinkEndSlash(teamDomain)}/${flowSlug}`;
+
   return (
     <Container maxWidth="formWrap">
       <Box component="form" onSubmit={elementsForm.handleSubmit} mb={2}>
@@ -291,7 +321,10 @@ const ServiceSettings: React.FC = () => {
             </p>
             <p>Offline services can still be edited and published as normal.</p>
           </SettingsDescription>
-
+          <SettingsDescription>
+            <Typography variant="h4">Your public link</Typography>
+            <Link>{teamDomain ? subdomainLink : publishedLink}</Link>
+          </SettingsDescription>
           <Box>
             <Button
               type="submit"

From f1132cb1394bf1de1f86c051aee9770855d2e7f0 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Fri, 16 Aug 2024 11:04:54 +0100
Subject: [PATCH 03/24] init comp add to settings form

---
 .../components/Settings/ServiceSettings.tsx   | 80 ++++++++++++++++---
 1 file changed, 71 insertions(+), 9 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
index 8cf9681495..7c58f64aab 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -30,19 +30,75 @@ const TitledLinkComponent: React.FC<{
   title: string;
   link: string;
   isActive: boolean;
-}> = () => {
-  return <></>;
+}> = ({ title, link, isActive }) => {
+  return (
+    <Box paddingBottom={0.5}>
+      <Typography mb={1} variant="h4">
+        {title}
+      </Typography>
+      {isActive ? (
+        <Link href={link}>{link}</Link>
+      ) : (
+        <Typography variant="body3">{link}</Typography>
+      )}
+    </Box>
+  );
 };
 
 const PublicLink: React.FC<{
   isFlowPublished: boolean;
   status: string;
   subdomain: string;
-  link: string;
-}> = ({ isFlowPublished, status, subdomain, link }) => {
+  publishedLink: string;
+}> = ({ isFlowPublished, status, subdomain, publishedLink }) => {
   const isFlowPublic = isFlowPublished && status === "online";
   const hasSubdomain = Boolean(subdomain);
 
+  console.log({ isFlowPublic, hasSubdomain });
+
+  // Passing both subdomain and publishedLink into this component...
+  // means we have the flexibility to display one or both...
+  // and means we need to do less upfront work in the ServiceSettings component
+  // the logic is contained within this one component with context around it
+
+  switch (true) {
+    case isFlowPublic && hasSubdomain:
+      console.log("Flow Public and Subdomain true");
+      return (
+        <TitledLinkComponent
+          title={"Your public link"}
+          link={subdomain}
+          isActive={true}
+        />
+      );
+    case isFlowPublic && !hasSubdomain:
+      console.log("Flow Public and Subdomain false");
+      return (
+        <TitledLinkComponent
+          title={"Your public link"}
+          link={publishedLink}
+          isActive={true}
+        />
+      );
+    case !isFlowPublic && hasSubdomain:
+      console.log("Flow private and Subdomain true");
+      return (
+        <TitledLinkComponent
+          title={"Your public link"}
+          link={subdomain}
+          isActive={true}
+        />
+      );
+    case !isFlowPublic && !hasSubdomain:
+      console.log("Flow private and Subdomain false");
+      return (
+        <TitledLinkComponent
+          title={"Your public link"}
+          link={publishedLink}
+          isActive={true}
+        />
+      );
+  }
   return <></>;
 };
 
@@ -182,7 +238,9 @@ const ServiceSettings: React.FC = () => {
     false,
   )}/published`;
 
-  const subdomainLink = `${removeLinkEndSlash(teamDomain)}/${flowSlug}`;
+  const subdomainLink = teamDomain
+    ? `${removeLinkEndSlash(teamDomain)}/${flowSlug}`
+    : teamDomain;
 
   return (
     <Container maxWidth="formWrap">
@@ -321,10 +379,14 @@ const ServiceSettings: React.FC = () => {
             </p>
             <p>Offline services can still be edited and published as normal.</p>
           </SettingsDescription>
-          <SettingsDescription>
-            <Typography variant="h4">Your public link</Typography>
-            <Link>{teamDomain ? subdomainLink : publishedLink}</Link>
-          </SettingsDescription>
+
+          <PublicLink
+            isFlowPublished={isFlowPublished}
+            status={flowStatus || statusForm.values.status}
+            subdomain={subdomainLink}
+            publishedLink={publishedLink}
+          />
+
           <Box>
             <Button
               type="submit"

From 7a78fbe0191e7c5d06459d822e2af83cbd0d0348 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Fri, 16 Aug 2024 11:09:32 +0100
Subject: [PATCH 04/24] simplify titled link comp

---
 .../components/Settings/ServiceSettings.tsx   | 39 ++++---------------
 1 file changed, 7 insertions(+), 32 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
index 7c58f64aab..0951f5b4a5 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -27,14 +27,13 @@ import type { FlowSettings } from "../../../../types";
 import { useStore } from "../../lib/store";
 
 const TitledLinkComponent: React.FC<{
-  title: string;
   link: string;
   isActive: boolean;
-}> = ({ title, link, isActive }) => {
+}> = ({ link, isActive }) => {
   return (
-    <Box paddingBottom={0.5}>
+    <Box paddingBottom={0.5} mt={1}>
       <Typography mb={1} variant="h4">
-        {title}
+        Your public link
       </Typography>
       {isActive ? (
         <Link href={link}>{link}</Link>
@@ -64,40 +63,16 @@ const PublicLink: React.FC<{
   switch (true) {
     case isFlowPublic && hasSubdomain:
       console.log("Flow Public and Subdomain true");
-      return (
-        <TitledLinkComponent
-          title={"Your public link"}
-          link={subdomain}
-          isActive={true}
-        />
-      );
+      return <TitledLinkComponent link={subdomain} isActive={true} />;
     case isFlowPublic && !hasSubdomain:
       console.log("Flow Public and Subdomain false");
-      return (
-        <TitledLinkComponent
-          title={"Your public link"}
-          link={publishedLink}
-          isActive={true}
-        />
-      );
+      return <TitledLinkComponent link={publishedLink} isActive={true} />;
     case !isFlowPublic && hasSubdomain:
       console.log("Flow private and Subdomain true");
-      return (
-        <TitledLinkComponent
-          title={"Your public link"}
-          link={subdomain}
-          isActive={true}
-        />
-      );
+      return <TitledLinkComponent link={subdomain} isActive={false} />;
     case !isFlowPublic && !hasSubdomain:
       console.log("Flow private and Subdomain false");
-      return (
-        <TitledLinkComponent
-          title={"Your public link"}
-          link={publishedLink}
-          isActive={true}
-        />
-      );
+      return <TitledLinkComponent link={publishedLink} isActive={false} />;
   }
   return <></>;
 };

From e51cb1ad422e47cd408074f8150e9bc9d014047e Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Fri, 16 Aug 2024 11:10:43 +0100
Subject: [PATCH 05/24] make inactive link text grey

---
 .../pages/FlowEditor/components/Settings/ServiceSettings.tsx  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
index 0951f5b4a5..a4664a96f0 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -38,7 +38,9 @@ const TitledLinkComponent: React.FC<{
       {isActive ? (
         <Link href={link}>{link}</Link>
       ) : (
-        <Typography variant="body3">{link}</Typography>
+        <Typography style={{ color: "GrayText" }} variant="body3">
+          {link}
+        </Typography>
       )}
     </Box>
   );

From 5092dc4f22abefed4dc22c495ac162ca68d2cf0d Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Fri, 16 Aug 2024 11:13:49 +0100
Subject: [PATCH 06/24] refine comp props and text size

---
 .../components/Settings/ServiceSettings.tsx       | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
index a4664a96f0..d2bbe33b01 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -36,9 +36,11 @@ const TitledLinkComponent: React.FC<{
         Your public link
       </Typography>
       {isActive ? (
-        <Link href={link}>{link}</Link>
+        <Link variant="body2" href={link}>
+          {link}
+        </Link>
       ) : (
-        <Typography style={{ color: "GrayText" }} variant="body3">
+        <Typography style={{ color: "GrayText" }} variant="body2">
           {link}
         </Typography>
       )}
@@ -65,18 +67,17 @@ const PublicLink: React.FC<{
   switch (true) {
     case isFlowPublic && hasSubdomain:
       console.log("Flow Public and Subdomain true");
-      return <TitledLinkComponent link={subdomain} isActive={true} />;
+      return <TitledLinkComponent isActive={true} link={subdomain} />;
     case isFlowPublic && !hasSubdomain:
       console.log("Flow Public and Subdomain false");
-      return <TitledLinkComponent link={publishedLink} isActive={true} />;
+      return <TitledLinkComponent isActive={true} link={publishedLink} />;
     case !isFlowPublic && hasSubdomain:
       console.log("Flow private and Subdomain true");
-      return <TitledLinkComponent link={subdomain} isActive={false} />;
+      return <TitledLinkComponent isActive={false} link={subdomain} />;
     case !isFlowPublic && !hasSubdomain:
       console.log("Flow private and Subdomain false");
-      return <TitledLinkComponent link={publishedLink} isActive={false} />;
+      return <TitledLinkComponent isActive={false} link={publishedLink} />;
   }
-  return <></>;
 };
 
 const TextInput: React.FC<{

From 74474327e6fae440d0c425a0a25eabef71498a74 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Fri, 16 Aug 2024 11:22:40 +0100
Subject: [PATCH 07/24] add copy button

---
 .../components/Settings/ServiceSettings.tsx   | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
index d2bbe33b01..61d9d7a78f 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -1,3 +1,4 @@
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import Alert from "@mui/material/Alert";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
@@ -5,9 +6,11 @@ import Container from "@mui/material/Container";
 import FormControlLabel, {
   formControlLabelClasses,
 } from "@mui/material/FormControlLabel";
+import IconButton from "@mui/material/IconButton";
 import Link from "@mui/material/Link";
 import Snackbar from "@mui/material/Snackbar";
 import Switch, { SwitchProps } from "@mui/material/Switch";
+import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { FlowStatus } from "@opensystemslab/planx-core/types";
 import { useFormik } from "formik";
@@ -26,6 +29,34 @@ import InputRowItem from "ui/shared/InputRowItem";
 import type { FlowSettings } from "../../../../types";
 import { useStore } from "../../lib/store";
 
+const CopyButton = (props: { link: string }) => {
+  const [copyMessage, setCopyMessage] = useState<"copy" | "copied">("copy");
+  return (
+    <Tooltip title={copyMessage}>
+      <Button
+        component={"button"}
+        variant="help"
+        onMouseLeave={() => {
+          setTimeout(() => {
+            setCopyMessage("copy");
+          }, 500);
+        }}
+        onClick={() => {
+          setCopyMessage("copied");
+          navigator.clipboard.writeText(props.link);
+        }}
+      >
+        <IconButton sx={{ marginLeft: 0.5 }} color="primary" size="small">
+          <ContentCopyIcon style={{ width: "18px", height: "18px" }} />
+          <Typography ml={0.5} variant="body3">
+            {copyMessage}
+          </Typography>
+        </IconButton>
+      </Button>
+    </Tooltip>
+  );
+};
+
 const TitledLinkComponent: React.FC<{
   link: string;
   isActive: boolean;
@@ -34,6 +65,7 @@ const TitledLinkComponent: React.FC<{
     <Box paddingBottom={0.5} mt={1}>
       <Typography mb={1} variant="h4">
         Your public link
+        <CopyButton link={link} />
       </Typography>
       {isActive ? (
         <Link variant="body2" href={link}>

From 316fce3fbefab3d31c533379ca4b33259fffa18b Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Fri, 16 Aug 2024 11:27:20 +0100
Subject: [PATCH 08/24] refactor flowstatus use

---
 .../components/Settings/ServiceSettings.tsx   | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
index 61d9d7a78f..eed11e68cf 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -13,6 +13,7 @@ import Switch, { SwitchProps } from "@mui/material/Switch";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { FlowStatus } from "@opensystemslab/planx-core/types";
+import { isActive } from "@tiptap/core";
 import { useFormik } from "formik";
 import React, { useState } from "react";
 import { rootFlowPath } from "routes/utils";
@@ -29,11 +30,12 @@ import InputRowItem from "ui/shared/InputRowItem";
 import type { FlowSettings } from "../../../../types";
 import { useStore } from "../../lib/store";
 
-const CopyButton = (props: { link: string }) => {
+const CopyButton = (props: { link: string; isActive: boolean }) => {
   const [copyMessage, setCopyMessage] = useState<"copy" | "copied">("copy");
   return (
     <Tooltip title={copyMessage}>
       <Button
+        disabled={!props.isActive}
         component={"button"}
         variant="help"
         onMouseLeave={() => {
@@ -45,13 +47,12 @@ const CopyButton = (props: { link: string }) => {
           setCopyMessage("copied");
           navigator.clipboard.writeText(props.link);
         }}
+        sx={{ marginLeft: 0.5 }}
       >
-        <IconButton sx={{ marginLeft: 0.5 }} color="primary" size="small">
-          <ContentCopyIcon style={{ width: "18px", height: "18px" }} />
-          <Typography ml={0.5} variant="body3">
-            {copyMessage}
-          </Typography>
-        </IconButton>
+        <ContentCopyIcon style={{ width: "18px", height: "18px" }} />
+        <Typography ml={0.5} variant="body3">
+          {copyMessage}
+        </Typography>
       </Button>
     </Tooltip>
   );
@@ -65,7 +66,7 @@ const TitledLinkComponent: React.FC<{
     <Box paddingBottom={0.5} mt={1}>
       <Typography mb={1} variant="h4">
         Your public link
-        <CopyButton link={link} />
+        <CopyButton isActive={isActive} link={link} />
       </Typography>
       {isActive ? (
         <Link variant="body2" href={link}>
@@ -172,7 +173,6 @@ const ServiceSettings: React.FC = () => {
   const [
     flowSettings,
     updateFlowSettings,
-    flowStatus,
     updateFlowStatus,
     flowSlug,
     teamDomain,
@@ -180,7 +180,6 @@ const ServiceSettings: React.FC = () => {
   ] = useStore((state) => [
     state.flowSettings,
     state.updateFlowSettings,
-    state.flowStatus,
     state.updateFlowStatus,
     state.flowSlug,
     state.teamDomain,
@@ -392,7 +391,7 @@ const ServiceSettings: React.FC = () => {
 
           <PublicLink
             isFlowPublished={isFlowPublished}
-            status={flowStatus || statusForm.values.status}
+            status={statusForm.values.status}
             subdomain={subdomainLink}
             publishedLink={publishedLink}
           />

From ce5410ef961165ddebed3e2725a0f8a32bcbd3e8 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Fri, 16 Aug 2024 11:28:07 +0100
Subject: [PATCH 09/24] add flow status from store

---
 .../pages/FlowEditor/components/Settings/ServiceSettings.tsx    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
index eed11e68cf..03583f9310 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -173,6 +173,7 @@ const ServiceSettings: React.FC = () => {
   const [
     flowSettings,
     updateFlowSettings,
+    flowStatus,
     updateFlowStatus,
     flowSlug,
     teamDomain,
@@ -180,6 +181,7 @@ const ServiceSettings: React.FC = () => {
   ] = useStore((state) => [
     state.flowSettings,
     state.updateFlowSettings,
+    state.flowStatus,
     state.updateFlowStatus,
     state.flowSlug,
     state.teamDomain,

From 0ba44e5aa440f33a286aac29edeef3b683ed69d9 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Fri, 16 Aug 2024 11:30:12 +0100
Subject: [PATCH 10/24] remove console log and comments

---
 .../components/Settings/ServiceSettings.tsx           | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
index 03583f9310..dcc67605ee 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -90,25 +90,14 @@ const PublicLink: React.FC<{
   const isFlowPublic = isFlowPublished && status === "online";
   const hasSubdomain = Boolean(subdomain);
 
-  console.log({ isFlowPublic, hasSubdomain });
-
-  // Passing both subdomain and publishedLink into this component...
-  // means we have the flexibility to display one or both...
-  // and means we need to do less upfront work in the ServiceSettings component
-  // the logic is contained within this one component with context around it
-
   switch (true) {
     case isFlowPublic && hasSubdomain:
-      console.log("Flow Public and Subdomain true");
       return <TitledLinkComponent isActive={true} link={subdomain} />;
     case isFlowPublic && !hasSubdomain:
-      console.log("Flow Public and Subdomain false");
       return <TitledLinkComponent isActive={true} link={publishedLink} />;
     case !isFlowPublic && hasSubdomain:
-      console.log("Flow private and Subdomain true");
       return <TitledLinkComponent isActive={false} link={subdomain} />;
     case !isFlowPublic && !hasSubdomain:
-      console.log("Flow private and Subdomain false");
       return <TitledLinkComponent isActive={false} link={publishedLink} />;
   }
 };

From 4008f0aecd5b781033c96fed8b518b34e1acf12f Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Fri, 16 Aug 2024 11:32:16 +0100
Subject: [PATCH 11/24] harmonising flowStatus type use

---
 .../pages/FlowEditor/components/Settings/ServiceSettings.tsx  | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
index dcc67605ee..f18f7a16d1 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -6,14 +6,12 @@ import Container from "@mui/material/Container";
 import FormControlLabel, {
   formControlLabelClasses,
 } from "@mui/material/FormControlLabel";
-import IconButton from "@mui/material/IconButton";
 import Link from "@mui/material/Link";
 import Snackbar from "@mui/material/Snackbar";
 import Switch, { SwitchProps } from "@mui/material/Switch";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { FlowStatus } from "@opensystemslab/planx-core/types";
-import { isActive } from "@tiptap/core";
 import { useFormik } from "formik";
 import React, { useState } from "react";
 import { rootFlowPath } from "routes/utils";
@@ -83,7 +81,7 @@ const TitledLinkComponent: React.FC<{
 
 const PublicLink: React.FC<{
   isFlowPublished: boolean;
-  status: string;
+  status: FlowStatus;
   subdomain: string;
   publishedLink: string;
 }> = ({ isFlowPublished, status, subdomain, publishedLink }) => {

From bdc268882498086a35e0a9b8093b005d0849a23d Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Fri, 16 Aug 2024 12:16:32 +0100
Subject: [PATCH 12/24] alter help text

---
 .../components/Settings/ServiceSettings.tsx   | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
index f18f7a16d1..b257a08afa 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -56,7 +56,7 @@ const CopyButton = (props: { link: string; isActive: boolean }) => {
   );
 };
 
-const TitledLinkComponent: React.FC<{
+const TitledLink: React.FC<{
   link: string;
   isActive: boolean;
 }> = ({ link, isActive }) => {
@@ -90,13 +90,13 @@ const PublicLink: React.FC<{
 
   switch (true) {
     case isFlowPublic && hasSubdomain:
-      return <TitledLinkComponent isActive={true} link={subdomain} />;
+      return <TitledLink isActive={true} link={subdomain} />;
     case isFlowPublic && !hasSubdomain:
-      return <TitledLinkComponent isActive={true} link={publishedLink} />;
+      return <TitledLink isActive={true} link={publishedLink} />;
     case !isFlowPublic && hasSubdomain:
-      return <TitledLinkComponent isActive={false} link={subdomain} />;
+      return <TitledLink isActive={false} link={subdomain} />;
     case !isFlowPublic && !hasSubdomain:
-      return <TitledLinkComponent isActive={false} link={publishedLink} />;
+      return <TitledLink isActive={false} link={publishedLink} />;
   }
 };
 
@@ -229,6 +229,20 @@ const ServiceSettings: React.FC = () => {
     },
   });
 
+  const publicLinkHelpText = () => {
+    const isFlowOnline = Boolean(statusForm.values.status === "online");
+    switch (true) {
+      case isFlowPublished && isFlowOnline:
+        return "";
+      case !isFlowPublished && isFlowOnline:
+        return "Publish your flow to activate the public link";
+      case isFlowPublished && !isFlowOnline:
+        return "Switch your flow to 'online' to activate the public link";
+      case !isFlowPublished && !isFlowOnline:
+        return "Publish your flow and switch it to 'online' to activate the public link";
+    }
+  };
+
   const removeLinkEndSlash = (link: string) =>
     link[link.length - 1] === "/" ? link.slice(0, -1) : link;
 
@@ -376,6 +390,7 @@ const ServiceSettings: React.FC = () => {
               enable analytics gathering.
             </p>
             <p>Offline services can still be edited and published as normal.</p>
+            <p>{publicLinkHelpText()}</p>
           </SettingsDescription>
 
           <PublicLink

From e311375e05dd0e9921c513b10875b6ebb4c093b0 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Fri, 16 Aug 2024 14:53:54 +0100
Subject: [PATCH 13/24] move help text, remove redundant fn, props, and
 Boolean()

---
 .../components/Settings/ServiceSettings.tsx   | 89 ++++++++++++-------
 1 file changed, 59 insertions(+), 30 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
index b257a08afa..2b6fa5c538 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -34,7 +34,6 @@ const CopyButton = (props: { link: string; isActive: boolean }) => {
     <Tooltip title={copyMessage}>
       <Button
         disabled={!props.isActive}
-        component={"button"}
         variant="help"
         onMouseLeave={() => {
           setTimeout(() => {
@@ -59,19 +58,31 @@ const CopyButton = (props: { link: string; isActive: boolean }) => {
 const TitledLink: React.FC<{
   link: string;
   isActive: boolean;
-}> = ({ link, isActive }) => {
+  helpText: string | undefined;
+}> = ({ link, isActive, helpText }) => {
   return (
     <Box paddingBottom={0.5} mt={1}>
-      <Typography mb={1} variant="h4">
+      <Typography mb={0.5} variant="h4">
         Your public link
         <CopyButton isActive={isActive} link={link} />
       </Typography>
+      <SettingsDescription>
+        <Typography variant="body2">{helpText}</Typography>
+      </SettingsDescription>
       {isActive ? (
-        <Link variant="body2" href={link}>
+        <Link
+          variant="body2"
+          href={link}
+          target={"_blank"}
+          rel={"noopener noreferrer"}
+        >
           {link}
         </Link>
       ) : (
-        <Typography style={{ color: "GrayText" }} variant="body2">
+        <Typography
+          style={{ color: "GrayText", textDecoration: "underline" }}
+          variant="body2"
+        >
           {link}
         </Typography>
       )}
@@ -88,15 +99,53 @@ const PublicLink: React.FC<{
   const isFlowPublic = isFlowPublished && status === "online";
   const hasSubdomain = Boolean(subdomain);
 
+  const publicLinkHelpText = () => {
+    const isFlowOnline = status === "online";
+    switch (true) {
+      case isFlowPublished && isFlowOnline:
+        return undefined;
+      case !isFlowPublished && isFlowOnline:
+        return "Publish your flow to activate the public link";
+      case isFlowPublished && !isFlowOnline:
+        return "Switch your flow to 'online' to activate the public link";
+      case !isFlowPublished && !isFlowOnline:
+        return "Publish your flow and switch it to 'online' to activate the public link";
+    }
+  };
+
   switch (true) {
     case isFlowPublic && hasSubdomain:
-      return <TitledLink isActive={true} link={subdomain} />;
+      return (
+        <TitledLink
+          helpText={publicLinkHelpText()}
+          isActive={true}
+          link={subdomain}
+        />
+      );
     case isFlowPublic && !hasSubdomain:
-      return <TitledLink isActive={true} link={publishedLink} />;
+      return (
+        <TitledLink
+          helpText={publicLinkHelpText()}
+          isActive={true}
+          link={publishedLink}
+        />
+      );
     case !isFlowPublic && hasSubdomain:
-      return <TitledLink isActive={false} link={subdomain} />;
+      return (
+        <TitledLink
+          helpText={publicLinkHelpText()}
+          isActive={false}
+          link={subdomain}
+        />
+      );
     case !isFlowPublic && !hasSubdomain:
-      return <TitledLink isActive={false} link={publishedLink} />;
+      return (
+        <TitledLink
+          helpText={publicLinkHelpText()}
+          isActive={false}
+          link={publishedLink}
+        />
+      );
   }
 };
 
@@ -229,30 +278,11 @@ const ServiceSettings: React.FC = () => {
     },
   });
 
-  const publicLinkHelpText = () => {
-    const isFlowOnline = Boolean(statusForm.values.status === "online");
-    switch (true) {
-      case isFlowPublished && isFlowOnline:
-        return "";
-      case !isFlowPublished && isFlowOnline:
-        return "Publish your flow to activate the public link";
-      case isFlowPublished && !isFlowOnline:
-        return "Switch your flow to 'online' to activate the public link";
-      case !isFlowPublished && !isFlowOnline:
-        return "Publish your flow and switch it to 'online' to activate the public link";
-    }
-  };
-
-  const removeLinkEndSlash = (link: string) =>
-    link[link.length - 1] === "/" ? link.slice(0, -1) : link;
-
   const publishedLink = `${window.location.origin}${rootFlowPath(
     false,
   )}/published`;
 
-  const subdomainLink = teamDomain
-    ? `${removeLinkEndSlash(teamDomain)}/${flowSlug}`
-    : teamDomain;
+  const subdomainLink = teamDomain && `https://${teamDomain}/${flowSlug}`;
 
   return (
     <Container maxWidth="formWrap">
@@ -390,7 +420,6 @@ const ServiceSettings: React.FC = () => {
               enable analytics gathering.
             </p>
             <p>Offline services can still be edited and published as normal.</p>
-            <p>{publicLinkHelpText()}</p>
           </SettingsDescription>
 
           <PublicLink

From 196b246cfa07467685255ad989378c0356ca9c80 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Fri, 16 Aug 2024 14:54:33 +0100
Subject: [PATCH 14/24] add punctuation to help txt

---
 .../FlowEditor/components/Settings/ServiceSettings.tsx      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
index 2b6fa5c538..d2543447e7 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -105,11 +105,11 @@ const PublicLink: React.FC<{
       case isFlowPublished && isFlowOnline:
         return undefined;
       case !isFlowPublished && isFlowOnline:
-        return "Publish your flow to activate the public link";
+        return "Publish your flow to activate the public link.";
       case isFlowPublished && !isFlowOnline:
-        return "Switch your flow to 'online' to activate the public link";
+        return "Switch your flow to 'online' to activate the public link.";
       case !isFlowPublished && !isFlowOnline:
-        return "Publish your flow and switch it to 'online' to activate the public link";
+        return "Publish your flow and switch it to 'online' to activate the public link.";
     }
   };
 

From 86525648080a246cfdcce60dabbd940c1161c019 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Mon, 19 Aug 2024 11:43:50 +0100
Subject: [PATCH 15/24]  add init test files and switch status variable to
 store variable

---
 .../FlowEditor/components/Settings/ServiceSettings.tsx     | 2 +-
 .../Settings/tests/ServiceSettings.PublicLinks.test.tsx    | 0
 .../Settings/tests/helpers/setupServiceSettingsScreen.tsx  | 7 +++++++
 3 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
 create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
index d2543447e7..e277dbddb4 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -424,7 +424,7 @@ const ServiceSettings: React.FC = () => {
 
           <PublicLink
             isFlowPublished={isFlowPublished}
-            status={statusForm.values.status}
+            status={flowStatus || "offline"}
             subdomain={subdomainLink}
             publishedLink={publishedLink}
           />
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx
new file mode 100644
index 0000000000..cdc4edb258
--- /dev/null
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+import ServiceSettings from "../../ServiceSettings";
+
+export default function setupServiceSettingsScreen() {
+  return <ServiceSettings />;
+}

From d78a1a62a0237a9172ea846bbc5f561306da1179 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Mon, 19 Aug 2024 15:54:25 +0100
Subject: [PATCH 16/24] first test describe/it

---
 .../components/Settings/ServiceSettings.tsx   |  8 ++--
 .../ServiceSettings.PublicLinks.test.tsx      | 39 +++++++++++++++++++
 .../helpers/setupServiceSettingsScreen.tsx    | 35 ++++++++++++++++-
 3 files changed, 75 insertions(+), 7 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
index e277dbddb4..0709e23070 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -228,7 +228,7 @@ const ServiceSettings: React.FC = () => {
 
   const handleClose = (
     _event?: React.SyntheticEvent | Event,
-    reason?: string,
+    reason?: string
   ) => {
     if (reason === "clickaway") {
       return;
@@ -279,7 +279,7 @@ const ServiceSettings: React.FC = () => {
   });
 
   const publishedLink = `${window.location.origin}${rootFlowPath(
-    false,
+    false
   )}/published`;
 
   const subdomainLink = teamDomain && `https://${teamDomain}/${flowSlug}`;
@@ -405,9 +405,7 @@ const ServiceSettings: React.FC = () => {
                 onChange={() =>
                   statusForm.setFieldValue(
                     "status",
-                    statusForm.values.status === "online"
-                      ? "offline"
-                      : "online",
+                    statusForm.values.status === "online" ? "offline" : "online"
                   )
                 }
               />
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
index e69de29bb2..ad44f9a486 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
@@ -0,0 +1,39 @@
+import { useStore } from "pages/FlowEditor/lib/store";
+import ServiceSettings from "../ServiceSettings";
+import setupServiceSettingsScreen, {
+  mockWindowLocationObject,
+} from "./helpers/setupServiceSettingsScreen";
+import { screen } from "@testing-library/react";
+import { rootFlowPath } from "routes/utils";
+
+const { getState, setState } = useStore;
+
+describe("Check when service is offline and published, the team has a subdomain", () => {
+  beforeEach(async () => {
+    // setup state values that <ServiceSettings/> depends on
+    setState({
+      flowSettings: {},
+      flowStatus: "offline",
+      teamDomain: "mockedteamdomain.com",
+      teamName: "mockTeam",
+      isFlowPublished: true,
+      flowSlug: "mock-planning-permish",
+    });
+
+    // render the <ServiceSettings/> comp
+    setupServiceSettingsScreen();
+
+    // Mocking window.location.origin
+    jest
+      .spyOn(window, "location", "get")
+      .mockReturnValue(mockWindowLocationObject);
+  });
+
+  it("public link should be the current published url", async () => {
+    expect(
+      await screen.findByText(
+        `https://mockedteamdomain.com/mock-planning-permish`
+      )
+    ).toBe;
+  });
+});
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx
index cdc4edb258..961c4440c7 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx
@@ -1,7 +1,38 @@
 import React from "react";
 
 import ServiceSettings from "../../ServiceSettings";
+import { setup } from "testUtils";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { screen } from "@testing-library/react";
 
-export default function setupServiceSettingsScreen() {
-  return <ServiceSettings />;
+export default async function setupServiceSettingsScreen() {
+  const { user } = setup(
+    <DndProvider backend={HTML5Backend}>
+      <ServiceSettings />
+    </DndProvider>
+  );
+  await screen.findByText("Your public Link");
+  return user;
 }
+
+export const mockWindowLocationObject = {
+  origin: "https://mocked-origin.com",
+  hash: "",
+  host: "dummy.com",
+  port: "80",
+  protocol: "http:",
+  hostname: "dummy.com",
+  href: "http://dummy.com?page=1&name=testing",
+  pathname: "",
+  search: "",
+  assign: jest.fn(),
+  reload: jest.fn(),
+  replace: jest.fn(),
+  ancestorOrigins: {
+    length: 0,
+    contains: () => true,
+    item: () => null,
+    [Symbol.iterator]: jest.fn(),
+  },
+};

From 90464a2b48f53b70fb9efd801db872332e95f8d8 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Mon, 19 Aug 2024 16:07:40 +0100
Subject: [PATCH 17/24] offline/published test added

---
 .../tests/ServiceSettings.PublicLinks.test.tsx     | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
index ad44f9a486..3c182d9cfd 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
@@ -29,11 +29,13 @@ describe("Check when service is offline and published, the team has a subdomain"
       .mockReturnValue(mockWindowLocationObject);
   });
 
-  it("public link should be the current published url", async () => {
-    expect(
-      await screen.findByText(
-        `https://mockedteamdomain.com/mock-planning-permish`
-      )
-    ).toBe;
+  it("public link should be the current published url in a <p> tag", async () => {
+    const publicLink = await screen.findByText(
+      `https://mockedteamdomain.com/mock-planning-permish`
+    );
+
+    const copyButton = await screen.findByText(`copy`);
+    expect(publicLink.tagName).toBe("P");
+    expect(copyButton.tagName).toBe("SPAN");
   });
 });

From b212f9ba247ea1fffb73344fcb44a7585b7efc78 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Mon, 19 Aug 2024 16:53:29 +0100
Subject: [PATCH 18/24] add standard fns for checking inactive links and copy
 buttons

---
 .../ServiceSettings.PublicLinks.test.tsx      | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
index 3c182d9cfd..ee4e02280b 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
@@ -8,7 +8,20 @@ import { rootFlowPath } from "routes/utils";
 
 const { getState, setState } = useStore;
 
-describe("Check when service is offline and published, the team has a subdomain", () => {
+const disabledCopyCheck = () => {
+  const copyButton = screen.getByRole("button", { name: `copy` });
+  expect(copyButton).toBeDisabled();
+};
+
+const inactiveLinkCheck = async () => {
+  const publicLink = await screen.findByText(
+    `https://mockedteamdomain.com/mock-planning-permish`
+  );
+
+  expect(publicLink.tagName).toBe("P");
+};
+
+describe("A team with a subdomain has an offline, published service. ", () => {
   beforeEach(async () => {
     // setup state values that <ServiceSettings/> depends on
     setState({
@@ -29,13 +42,9 @@ describe("Check when service is offline and published, the team has a subdomain"
       .mockReturnValue(mockWindowLocationObject);
   });
 
-  it("public link should be the current published url in a <p> tag", async () => {
-    const publicLink = await screen.findByText(
-      `https://mockedteamdomain.com/mock-planning-permish`
-    );
-
-    const copyButton = await screen.findByText(`copy`);
-    expect(publicLink.tagName).toBe("P");
-    expect(copyButton.tagName).toBe("SPAN");
-  });
+  it(
+    "has a public link with the subdomain url in a <p> tag",
+    inactiveLinkCheck
+  );
+  it("has a disabled copy button", disabledCopyCheck);
 });

From eb7265cfb7d8ed8d2ce3d6be0b978d62f584aa62 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Tue, 20 Aug 2024 11:59:25 +0100
Subject: [PATCH 19/24] expand testing to other situations

---
 .../ServiceSettings.PublicLinks.test.tsx      | 225 +++++++++++++++++-
 .../helpers/setupServiceSettingsScreen.tsx    |   4 +-
 2 files changed, 219 insertions(+), 10 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
index ee4e02280b..3865b3f527 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
@@ -8,19 +8,32 @@ import { rootFlowPath } from "routes/utils";
 
 const { getState, setState } = useStore;
 
+const publishedUrl = `${mockWindowLocationObject.origin}/${mockWindowLocationObject.pathname}/published`;
+
 const disabledCopyCheck = () => {
   const copyButton = screen.getByRole("button", { name: `copy` });
   expect(copyButton).toBeDisabled();
 };
 
-const inactiveLinkCheck = async () => {
-  const publicLink = await screen.findByText(
-    `https://mockedteamdomain.com/mock-planning-permish`
-  );
+const enabledCopyCheck = () => {
+  const copyButton = screen.getByRole("button", { name: `copy` });
+  expect(copyButton).toBeEnabled();
+};
+
+const checkCopyFunction = () => {};
+
+const inactiveLinkCheck = async (link: string) => {
+  const publicLink = await screen.findByText(`${link}`);
 
   expect(publicLink.tagName).toBe("P");
 };
 
+const activeLinkCheck = async (link: string) => {
+  const publicLink = await screen.findByText(`${link}`);
+
+  expect(publicLink.tagName).toBe("A");
+};
+
 describe("A team with a subdomain has an offline, published service. ", () => {
   beforeEach(async () => {
     // setup state values that <ServiceSettings/> depends on
@@ -42,9 +55,205 @@ describe("A team with a subdomain has an offline, published service. ", () => {
       .mockReturnValue(mockWindowLocationObject);
   });
 
-  it(
-    "has a public link with the subdomain url in a <p> tag",
-    inactiveLinkCheck
-  );
+  it("has a public link with the subdomain url in a <p> tag", async () => {
+    const flowSlug = getState().flowSlug;
+    const teamDomain = getState().teamDomain;
+    const teamName = getState().teamName;
+
+    inactiveLinkCheck(`https://${teamDomain}/${teamName}/${flowSlug}`);
+  });
+  it("has a disabled copy button", disabledCopyCheck);
+});
+
+describe("A team with a subdomain has an online, unpublished service. ", () => {
+  beforeEach(async () => {
+    // setup state values that <ServiceSettings/> depends on
+    setState({
+      flowSettings: {},
+      flowStatus: "online",
+      teamDomain: "mockedteamdomain.com",
+      teamName: "mockTeam",
+      isFlowPublished: false,
+      flowSlug: "mock-planning-permish",
+    });
+
+    // render the <ServiceSettings/> comp
+    setupServiceSettingsScreen();
+
+    // Mocking window.location.origin
+    jest
+      .spyOn(window, "location", "get")
+      .mockReturnValue(mockWindowLocationObject);
+  });
+
+  it("has a public link with the subdomain url in a <p> tag", async () => {
+    const flowSlug = getState().flowSlug;
+    const teamDomain = getState().teamDomain;
+    const teamName = getState().teamName;
+
+    inactiveLinkCheck(`https://${teamDomain}/${teamName}/${flowSlug}`);
+  });
+  it("has a disabled copy button", disabledCopyCheck);
+});
+
+describe("A team with a subdomain has an online, published service. ", () => {
+  beforeEach(async () => {
+    // setup state values that <ServiceSettings/> depends on
+    setState({
+      flowSettings: {},
+      flowStatus: "online",
+      teamDomain: "mockedteamdomain.com",
+      teamName: "mockTeam",
+      isFlowPublished: true,
+      flowSlug: "mock-planning-permish",
+    });
+
+    // render the <ServiceSettings/> comp
+    const user = await setupServiceSettingsScreen();
+
+    // Mocking window.location.origin
+    jest
+      .spyOn(window, "location", "get")
+      .mockReturnValue(mockWindowLocationObject);
+
+    const copyButton = screen.getByRole("button", { name: `copy` });
+    user.click(copyButton);
+  });
+
+  it("has a public link with the subdomain url in an <a> tag", async () => {
+    // render the <ServiceSettings/> comp
+    const { flowSlug, teamDomain, teamName } = getState();
+
+    activeLinkCheck(`https://${teamDomain}/${teamName}/${flowSlug}`);
+  });
+  it("has an enabled copy button", async () => {
+    // render the <ServiceSettings/> comp
+    enabledCopyCheck();
+  });
+});
+
+describe("A team with a subdomain has an online, published service. ", () => {
+  beforeEach(async () => {
+    // setup state values that <ServiceSettings/> depends on
+    setState({
+      flowSettings: {},
+      flowStatus: "online",
+      teamDomain: "mockedteamdomain.com",
+      teamName: "mockTeam",
+      isFlowPublished: true,
+      flowSlug: "mock-planning-permish",
+    });
+
+    // render the <ServiceSettings/> comp
+    const user = await setupServiceSettingsScreen();
+
+    const copyButton = screen.getByRole("button", { name: `copy` });
+    user.click(copyButton);
+
+    // Mocking window.location.origin
+    jest
+      .spyOn(window, "location", "get")
+      .mockReturnValue(mockWindowLocationObject);
+  });
+
+  it("copies the right link to the clipboard", async () => {
+    const { flowSlug, teamDomain, teamName } = getState();
+
+    expect(await navigator.clipboard.readText()).toEqual(
+      `https://${teamDomain}/${teamName}/${flowSlug}`
+    );
+  });
+});
+
+describe("A team without a subdomain has an offline, published service. ", () => {
+  beforeEach(async () => {
+    // setup state values that <ServiceSettings/> depends on
+    setState({
+      flowSettings: {},
+      flowStatus: "offline",
+      teamDomain: undefined,
+      teamName: "mockTeam",
+      isFlowPublished: true,
+      flowSlug: "mock-planning-permish",
+    });
+
+    // render the <ServiceSettings/> comp
+    setupServiceSettingsScreen();
+
+    // Mocking window.location.origin
+    jest
+      .spyOn(window, "location", "get")
+      .mockReturnValue(mockWindowLocationObject);
+  });
+
+  it("has a public link without the subdomain url in a <p> tag", async () => {
+    const flowSlug = getState().flowSlug;
+    const teamDomain = getState().teamDomain;
+    const teamName = getState().teamName;
+
+    inactiveLinkCheck(publishedUrl);
+  });
   it("has a disabled copy button", disabledCopyCheck);
 });
+
+describe("A team without a subdomain has an online, unpublished service. ", () => {
+  beforeEach(async () => {
+    // setup state values that <ServiceSettings/> depends on
+    setState({
+      flowSettings: {},
+      flowStatus: "online",
+      teamDomain: undefined,
+      teamName: "mockTeam",
+      isFlowPublished: false,
+      flowSlug: "mock-planning-permish",
+    });
+
+    // render the <ServiceSettings/> comp
+    setupServiceSettingsScreen();
+
+    // Mocking window.location.origin
+    jest
+      .spyOn(window, "location", "get")
+      .mockReturnValue(mockWindowLocationObject);
+  });
+
+  it("has a public link with the subdomain url in a <p> tag", async () => {
+    const flowSlug = getState().flowSlug;
+    const teamDomain = getState().teamDomain;
+    const teamName = getState().teamName;
+
+    inactiveLinkCheck(publishedUrl);
+  });
+  it("has a disabled copy button", disabledCopyCheck);
+});
+
+describe("A team without a subdomain has an online, published service. ", () => {
+  beforeEach(async () => {
+    // setup state values that <ServiceSettings/> depends on
+    setState({
+      flowSettings: {},
+      flowStatus: "online",
+      teamDomain: undefined,
+      teamName: "mockTeam",
+      isFlowPublished: true,
+      flowSlug: "mock-planning-permish",
+    });
+
+    // render the <ServiceSettings/> comp
+    setupServiceSettingsScreen();
+
+    // Mocking window.location.origin
+    jest
+      .spyOn(window, "location", "get")
+      .mockReturnValue(mockWindowLocationObject);
+  });
+
+  it("has a public link with the subdomain url in an <a> tag", async () => {
+    const flowSlug = getState().flowSlug;
+    const teamDomain = getState().teamDomain;
+    const teamName = getState().teamName;
+
+    activeLinkCheck(publishedUrl);
+  });
+  it("has a disabled copy button", enabledCopyCheck);
+});
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx
index 961c4440c7..c564bbcbb9 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx
@@ -12,7 +12,7 @@ export default async function setupServiceSettingsScreen() {
       <ServiceSettings />
     </DndProvider>
   );
-  await screen.findByText("Your public Link");
+
   return user;
 }
 
@@ -24,7 +24,7 @@ export const mockWindowLocationObject = {
   protocol: "http:",
   hostname: "dummy.com",
   href: "http://dummy.com?page=1&name=testing",
-  pathname: "",
+  pathname: "/mockTeam/mock-planning-permish",
   search: "",
   assign: jest.fn(),
   reload: jest.fn(),

From 650370f6ec3ddce979a1390306f8562bc63c8c33 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Tue, 20 Aug 2024 13:05:53 +0100
Subject: [PATCH 20/24] refactor test obj and findByText fns

---
 .../ServiceSettings.PublicLinks.test.tsx      | 188 ++++++++----------
 .../helpers/setupServiceSettingsScreen.tsx    |   1 +
 2 files changed, 87 insertions(+), 102 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
index 3865b3f527..ba27460b2e 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
@@ -1,14 +1,26 @@
 import { useStore } from "pages/FlowEditor/lib/store";
-import ServiceSettings from "../ServiceSettings";
 import setupServiceSettingsScreen, {
   mockWindowLocationObject,
 } from "./helpers/setupServiceSettingsScreen";
-import { screen } from "@testing-library/react";
-import { rootFlowPath } from "routes/utils";
+import { fireEvent, screen } from "@testing-library/react";
+import { exp } from "mathjs";
 
 const { getState, setState } = useStore;
 
-const publishedUrl = `${mockWindowLocationObject.origin}/${mockWindowLocationObject.pathname}/published`;
+const subdomainStateData = {
+  flowSettings: {},
+  teamDomain: "mockedteamdomain.com",
+  flowSlug: "mock-planning-permish",
+};
+
+const nonSubdomainStateData = {
+  flowSettings: {},
+  teamDomain: undefined,
+  teamName: "mockTeam",
+  flowSlug: "mock-planning-permish",
+};
+
+const publishedUrl = `${mockWindowLocationObject.origin}${mockWindowLocationObject.pathname}/published`;
 
 const disabledCopyCheck = () => {
   const copyButton = screen.getByRole("button", { name: `copy` });
@@ -20,11 +32,8 @@ const enabledCopyCheck = () => {
   expect(copyButton).toBeEnabled();
 };
 
-const checkCopyFunction = () => {};
-
 const inactiveLinkCheck = async (link: string) => {
-  const publicLink = await screen.findByText(`${link}`);
-
+  const publicLink = await screen.findByText(link);
   expect(publicLink.tagName).toBe("P");
 };
 
@@ -38,29 +47,19 @@ describe("A team with a subdomain has an offline, published service. ", () => {
   beforeEach(async () => {
     // setup state values that <ServiceSettings/> depends on
     setState({
-      flowSettings: {},
-      flowStatus: "offline",
-      teamDomain: "mockedteamdomain.com",
-      teamName: "mockTeam",
+      ...subdomainStateData,
       isFlowPublished: true,
-      flowSlug: "mock-planning-permish",
+      flowStatus: "offline",
     });
 
     // render the <ServiceSettings/> comp
     setupServiceSettingsScreen();
-
-    // Mocking window.location.origin
-    jest
-      .spyOn(window, "location", "get")
-      .mockReturnValue(mockWindowLocationObject);
   });
 
   it("has a public link with the subdomain url in a <p> tag", async () => {
-    const flowSlug = getState().flowSlug;
-    const teamDomain = getState().teamDomain;
-    const teamName = getState().teamName;
+    const { flowSlug, teamDomain } = getState();
 
-    inactiveLinkCheck(`https://${teamDomain}/${teamName}/${flowSlug}`);
+    await inactiveLinkCheck(`https://${teamDomain}/${flowSlug}`);
   });
   it("has a disabled copy button", disabledCopyCheck);
 });
@@ -69,29 +68,19 @@ describe("A team with a subdomain has an online, unpublished service. ", () => {
   beforeEach(async () => {
     // setup state values that <ServiceSettings/> depends on
     setState({
-      flowSettings: {},
-      flowStatus: "online",
-      teamDomain: "mockedteamdomain.com",
-      teamName: "mockTeam",
+      ...subdomainStateData,
       isFlowPublished: false,
-      flowSlug: "mock-planning-permish",
+      flowStatus: "online",
     });
 
     // render the <ServiceSettings/> comp
     setupServiceSettingsScreen();
-
-    // Mocking window.location.origin
-    jest
-      .spyOn(window, "location", "get")
-      .mockReturnValue(mockWindowLocationObject);
   });
 
   it("has a public link with the subdomain url in a <p> tag", async () => {
-    const flowSlug = getState().flowSlug;
-    const teamDomain = getState().teamDomain;
-    const teamName = getState().teamName;
+    const { flowSlug, teamDomain } = getState();
 
-    inactiveLinkCheck(`https://${teamDomain}/${teamName}/${flowSlug}`);
+    await inactiveLinkCheck(`https://${teamDomain}/${flowSlug}`);
   });
   it("has a disabled copy button", disabledCopyCheck);
 });
@@ -100,39 +89,43 @@ describe("A team with a subdomain has an online, published service. ", () => {
   beforeEach(async () => {
     // setup state values that <ServiceSettings/> depends on
     setState({
-      flowSettings: {},
-      flowStatus: "online",
-      teamDomain: "mockedteamdomain.com",
-      teamName: "mockTeam",
+      ...subdomainStateData,
       isFlowPublished: true,
-      flowSlug: "mock-planning-permish",
+      flowStatus: "online",
     });
+    // mock navigator.clipboard fn
+    jest
+      .spyOn(navigator.clipboard, "writeText")
+      .mockImplementation(() => Promise.resolve());
 
     // render the <ServiceSettings/> comp
     const user = await setupServiceSettingsScreen();
-
-    // Mocking window.location.origin
-    jest
-      .spyOn(window, "location", "get")
-      .mockReturnValue(mockWindowLocationObject);
-
-    const copyButton = screen.getByRole("button", { name: `copy` });
-    user.click(copyButton);
   });
 
   it("has a public link with the subdomain url in an <a> tag", async () => {
     // render the <ServiceSettings/> comp
-    const { flowSlug, teamDomain, teamName } = getState();
+    const { flowSlug, teamDomain } = getState();
 
-    activeLinkCheck(`https://${teamDomain}/${teamName}/${flowSlug}`);
+    await activeLinkCheck(`https://${teamDomain}/${flowSlug}`);
   });
   it("has an enabled copy button", async () => {
     // render the <ServiceSettings/> comp
     enabledCopyCheck();
   });
+  it("can be copied to the clipboard", async () => {
+    const copyButton = screen.getByRole("button", { name: `copy` });
+
+    fireEvent.click(copyButton);
+
+    const { flowSlug, teamDomain } = getState();
+
+    expect(navigator.clipboard.writeText).toBeCalledWith(
+      `https://${teamDomain}/${flowSlug}`
+    );
+  });
 });
 
-describe("A team with a subdomain has an online, published service. ", () => {
+describe("An active link is", () => {
   beforeEach(async () => {
     // setup state values that <ServiceSettings/> depends on
     setState({
@@ -145,22 +138,22 @@ describe("A team with a subdomain has an online, published service. ", () => {
     });
 
     // render the <ServiceSettings/> comp
-    const user = await setupServiceSettingsScreen();
+    await setupServiceSettingsScreen();
 
-    const copyButton = screen.getByRole("button", { name: `copy` });
-    user.click(copyButton);
-
-    // Mocking window.location.origin
     jest
-      .spyOn(window, "location", "get")
-      .mockReturnValue(mockWindowLocationObject);
+      .spyOn(navigator.clipboard, "writeText")
+      .mockImplementation(() => Promise.resolve());
   });
 
-  it("copies the right link to the clipboard", async () => {
-    const { flowSlug, teamDomain, teamName } = getState();
+  it("copied to the clipboard", async () => {
+    const copyButton = screen.getByRole("button", { name: `copy` });
+
+    fireEvent.click(copyButton);
+
+    const { flowSlug, teamDomain } = getState();
 
-    expect(await navigator.clipboard.readText()).toEqual(
-      `https://${teamDomain}/${teamName}/${flowSlug}`
+    expect(navigator.clipboard.writeText).toBeCalledWith(
+      `https://${teamDomain}/${flowSlug}`
     );
   });
 });
@@ -169,29 +162,22 @@ describe("A team without a subdomain has an offline, published service. ", () =>
   beforeEach(async () => {
     // setup state values that <ServiceSettings/> depends on
     setState({
-      flowSettings: {},
+      ...nonSubdomainStateData,
       flowStatus: "offline",
-      teamDomain: undefined,
-      teamName: "mockTeam",
       isFlowPublished: true,
-      flowSlug: "mock-planning-permish",
     });
 
-    // render the <ServiceSettings/> comp
-    setupServiceSettingsScreen();
-
     // Mocking window.location.origin
     jest
       .spyOn(window, "location", "get")
       .mockReturnValue(mockWindowLocationObject);
-  });
 
-  it("has a public link without the subdomain url in a <p> tag", async () => {
-    const flowSlug = getState().flowSlug;
-    const teamDomain = getState().teamDomain;
-    const teamName = getState().teamName;
+    // render the <ServiceSettings/> comp
+    setupServiceSettingsScreen();
+  });
 
-    inactiveLinkCheck(publishedUrl);
+  it("has a public link with the url in a <p> tag", async () => {
+    await inactiveLinkCheck(publishedUrl);
   });
   it("has a disabled copy button", disabledCopyCheck);
 });
@@ -200,29 +186,22 @@ describe("A team without a subdomain has an online, unpublished service. ", () =
   beforeEach(async () => {
     // setup state values that <ServiceSettings/> depends on
     setState({
-      flowSettings: {},
+      ...nonSubdomainStateData,
       flowStatus: "online",
-      teamDomain: undefined,
-      teamName: "mockTeam",
       isFlowPublished: false,
-      flowSlug: "mock-planning-permish",
     });
 
-    // render the <ServiceSettings/> comp
-    setupServiceSettingsScreen();
-
     // Mocking window.location.origin
     jest
       .spyOn(window, "location", "get")
       .mockReturnValue(mockWindowLocationObject);
-  });
 
-  it("has a public link with the subdomain url in a <p> tag", async () => {
-    const flowSlug = getState().flowSlug;
-    const teamDomain = getState().teamDomain;
-    const teamName = getState().teamName;
+    // render the <ServiceSettings/> comp
+    setupServiceSettingsScreen();
+  });
 
-    inactiveLinkCheck(publishedUrl);
+  it("has a public link with the url in a <p> tag", async () => {
+    await inactiveLinkCheck(publishedUrl);
   });
   it("has a disabled copy button", disabledCopyCheck);
 });
@@ -231,29 +210,34 @@ describe("A team without a subdomain has an online, published service. ", () =>
   beforeEach(async () => {
     // setup state values that <ServiceSettings/> depends on
     setState({
-      flowSettings: {},
+      ...nonSubdomainStateData,
       flowStatus: "online",
-      teamDomain: undefined,
-      teamName: "mockTeam",
       isFlowPublished: true,
-      flowSlug: "mock-planning-permish",
     });
-
-    // render the <ServiceSettings/> comp
-    setupServiceSettingsScreen();
-
     // Mocking window.location.origin
     jest
       .spyOn(window, "location", "get")
       .mockReturnValue(mockWindowLocationObject);
+
+    // mock navigator.clipboard fn
+    jest
+      .spyOn(navigator.clipboard, "writeText")
+      .mockImplementation(() => Promise.resolve());
+
+    // render the <ServiceSettings/> comp
+    setupServiceSettingsScreen();
   });
 
   it("has a public link with the subdomain url in an <a> tag", async () => {
-    const flowSlug = getState().flowSlug;
-    const teamDomain = getState().teamDomain;
-    const teamName = getState().teamName;
+    await activeLinkCheck(publishedUrl);
+  });
+  it("has a enabled copy button", enabledCopyCheck);
+
+  it("can be copied to the clipboard", async () => {
+    const copyButton = screen.getByRole("button", { name: `copy` });
+
+    fireEvent.click(copyButton);
 
-    activeLinkCheck(publishedUrl);
+    expect(navigator.clipboard.writeText).toBeCalledWith(publishedUrl);
   });
-  it("has a disabled copy button", enabledCopyCheck);
 });
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx
index c564bbcbb9..1efeaac90b 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx
@@ -13,6 +13,7 @@ export default async function setupServiceSettingsScreen() {
     </DndProvider>
   );
 
+  await screen.findByText("Your public link");
   return user;
 }
 

From c48d088c28618467176a99eb219e978029b96d37 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Tue, 20 Aug 2024 13:14:47 +0100
Subject: [PATCH 21/24] refact fireEvent to userEvent

---
 .../tests/ServiceSettings.PublicLinks.test.tsx  | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
index ba27460b2e..fde7019f31 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
@@ -4,6 +4,7 @@ import setupServiceSettingsScreen, {
 } from "./helpers/setupServiceSettingsScreen";
 import { fireEvent, screen } from "@testing-library/react";
 import { exp } from "mathjs";
+import userEvent from "@testing-library/user-event";
 
 const { getState, setState } = useStore;
 
@@ -223,21 +224,27 @@ describe("A team without a subdomain has an online, published service. ", () =>
     jest
       .spyOn(navigator.clipboard, "writeText")
       .mockImplementation(() => Promise.resolve());
-
-    // render the <ServiceSettings/> comp
-    setupServiceSettingsScreen();
   });
 
   it("has a public link with the subdomain url in an <a> tag", async () => {
+    // render the <ServiceSettings/> comp
+    setupServiceSettingsScreen();
     await activeLinkCheck(publishedUrl);
   });
-  it("has a enabled copy button", enabledCopyCheck);
+  it("has a enabled copy button", () => {
+    // render the <ServiceSettings/> comp
+    setupServiceSettingsScreen();
+    enabledCopyCheck();
+  });
 
   it("can be copied to the clipboard", async () => {
+    // render the <ServiceSettings/> comp
+    const user = await setupServiceSettingsScreen();
     const copyButton = screen.getByRole("button", { name: `copy` });
 
-    fireEvent.click(copyButton);
+    user.click(copyButton);
 
+    expect(await screen.findByText("copied")).toBeVisible();
     expect(navigator.clipboard.writeText).toBeCalledWith(publishedUrl);
   });
 });

From 50e9ccb6ea97a7b54de3cf6a45f79732d59d4956 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Tue, 20 Aug 2024 13:16:13 +0100
Subject: [PATCH 22/24] remove unused imports

---
 .../Settings/tests/ServiceSettings.PublicLinks.test.tsx         | 2 --
 .../Settings/tests/helpers/setupServiceSettingsScreen.tsx       | 1 -
 2 files changed, 3 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
index fde7019f31..9acc653696 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
@@ -3,8 +3,6 @@ import setupServiceSettingsScreen, {
   mockWindowLocationObject,
 } from "./helpers/setupServiceSettingsScreen";
 import { fireEvent, screen } from "@testing-library/react";
-import { exp } from "mathjs";
-import userEvent from "@testing-library/user-event";
 
 const { getState, setState } = useStore;
 
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx
index 1efeaac90b..57060f858e 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/helpers/setupServiceSettingsScreen.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-
 import ServiceSettings from "../../ServiceSettings";
 import { setup } from "testUtils";
 import { DndProvider } from "react-dnd";

From cdd2315068278c71fd5fdd21fce42bbeb912504c Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Tue, 20 Aug 2024 13:22:45 +0100
Subject: [PATCH 23/24] remove second firEvent in favour of userEvent

---
 .../ServiceSettings.PublicLinks.test.tsx      | 43 +++----------------
 1 file changed, 6 insertions(+), 37 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
index 9acc653696..8ed977efd4 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
@@ -2,7 +2,7 @@ import { useStore } from "pages/FlowEditor/lib/store";
 import setupServiceSettingsScreen, {
   mockWindowLocationObject,
 } from "./helpers/setupServiceSettingsScreen";
-import { fireEvent, screen } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 
 const { getState, setState } = useStore;
 
@@ -96,61 +96,30 @@ describe("A team with a subdomain has an online, published service. ", () => {
     jest
       .spyOn(navigator.clipboard, "writeText")
       .mockImplementation(() => Promise.resolve());
-
-    // render the <ServiceSettings/> comp
-    const user = await setupServiceSettingsScreen();
   });
 
   it("has a public link with the subdomain url in an <a> tag", async () => {
     // render the <ServiceSettings/> comp
     const { flowSlug, teamDomain } = getState();
 
+    await setupServiceSettingsScreen();
     await activeLinkCheck(`https://${teamDomain}/${flowSlug}`);
   });
   it("has an enabled copy button", async () => {
     // render the <ServiceSettings/> comp
+    await setupServiceSettingsScreen();
     enabledCopyCheck();
   });
   it("can be copied to the clipboard", async () => {
-    const copyButton = screen.getByRole("button", { name: `copy` });
-
-    fireEvent.click(copyButton);
-
     const { flowSlug, teamDomain } = getState();
-
-    expect(navigator.clipboard.writeText).toBeCalledWith(
-      `https://${teamDomain}/${flowSlug}`
-    );
-  });
-});
-
-describe("An active link is", () => {
-  beforeEach(async () => {
-    // setup state values that <ServiceSettings/> depends on
-    setState({
-      flowSettings: {},
-      flowStatus: "online",
-      teamDomain: "mockedteamdomain.com",
-      teamName: "mockTeam",
-      isFlowPublished: true,
-      flowSlug: "mock-planning-permish",
-    });
-
     // render the <ServiceSettings/> comp
-    await setupServiceSettingsScreen();
-
-    jest
-      .spyOn(navigator.clipboard, "writeText")
-      .mockImplementation(() => Promise.resolve());
-  });
+    const user = await setupServiceSettingsScreen();
 
-  it("copied to the clipboard", async () => {
     const copyButton = screen.getByRole("button", { name: `copy` });
 
-    fireEvent.click(copyButton);
-
-    const { flowSlug, teamDomain } = getState();
+    user.click(copyButton);
 
+    expect(await screen.findByText("copied")).toBeVisible();
     expect(navigator.clipboard.writeText).toBeCalledWith(
       `https://${teamDomain}/${flowSlug}`
     );

From 29594c478bf0c2a5a97ccdcbf6cf45c5a1494564 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Tue, 20 Aug 2024 15:31:28 +0100
Subject: [PATCH 24/24] refactor file structure and fix typo

---
 .../PublicLinks.test.tsx}                     | 47 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 2 deletions(-)
 rename editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/{ServiceSettings.PublicLinks.test.tsx => ServiceSettings/PublicLinks.test.tsx} (82%)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings/PublicLinks.test.tsx
similarity index 82%
rename from editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
rename to editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings/PublicLinks.test.tsx
index 8ed977efd4..e8e9770561 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings.PublicLinks.test.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/tests/ServiceSettings/PublicLinks.test.tsx
@@ -1,7 +1,7 @@
 import { useStore } from "pages/FlowEditor/lib/store";
 import setupServiceSettingsScreen, {
   mockWindowLocationObject,
-} from "./helpers/setupServiceSettingsScreen";
+} from "../helpers/setupServiceSettingsScreen";
 import { screen } from "@testing-library/react";
 
 const { getState, setState } = useStore;
@@ -125,7 +125,26 @@ describe("A team with a subdomain has an online, published service. ", () => {
     );
   });
 });
+describe("A team with a subdomain has an offline, unpublished service. ", () => {
+  beforeEach(async () => {
+    // setup state values that <ServiceSettings/> depends on
+    setState({
+      ...subdomainStateData,
+      isFlowPublished: false,
+      flowStatus: "offline",
+    });
+
+    // render the <ServiceSettings/> comp
+    setupServiceSettingsScreen();
+  });
 
+  it("has a public link with the subdomain url in a <p> tag", async () => {
+    const { flowSlug, teamDomain } = getState();
+
+    await inactiveLinkCheck(`https://${teamDomain}/${flowSlug}`);
+  });
+  it("has a disabled copy button", disabledCopyCheck);
+});
 describe("A team without a subdomain has an offline, published service. ", () => {
   beforeEach(async () => {
     // setup state values that <ServiceSettings/> depends on
@@ -198,7 +217,7 @@ describe("A team without a subdomain has an online, published service. ", () =>
     setupServiceSettingsScreen();
     await activeLinkCheck(publishedUrl);
   });
-  it("has a enabled copy button", () => {
+  it("has an enabled copy button", () => {
     // render the <ServiceSettings/> comp
     setupServiceSettingsScreen();
     enabledCopyCheck();
@@ -215,3 +234,27 @@ describe("A team without a subdomain has an online, published service. ", () =>
     expect(navigator.clipboard.writeText).toBeCalledWith(publishedUrl);
   });
 });
+
+describe("A team without a subdomain has an offline, unpublished service. ", () => {
+  beforeEach(async () => {
+    // setup state values that <ServiceSettings/> depends on
+    setState({
+      ...nonSubdomainStateData,
+      flowStatus: "offline",
+      isFlowPublished: false,
+    });
+
+    // Mocking window.location.origin
+    jest
+      .spyOn(window, "location", "get")
+      .mockReturnValue(mockWindowLocationObject);
+
+    // render the <ServiceSettings/> comp
+    setupServiceSettingsScreen();
+  });
+
+  it("has a public link with the url in a <p> tag", async () => {
+    await inactiveLinkCheck(publishedUrl);
+  });
+  it("has a disabled copy button", disabledCopyCheck);
+});