From de2b66665d9fb5f56ac17a36f9353f58ba8596af Mon Sep 17 00:00:00 2001
From: Frank <48450599+Fbasham@users.noreply.github.com>
Date: Wed, 20 Sep 2023 14:27:46 -0400
Subject: [PATCH] [frontend] add recursive gql-node-renderer (#847)

* resolve merge conflicts

change fallback to blocking

* modify layout on article pages, add revalidate to article pages

* content spans 7 colummns, image spans 5 columns

---------

Co-authored-by: Jordan Willis <31868510+will0684@users.noreply.github.com>
Co-authored-by: Jordan <jordan.walcaraz@gmail.com>
---
 components/gql_node_renderer/Recur.jsx        |  50 ++++
 components/gql_node_renderer/Render.jsx       |  12 +
 components/gql_node_renderer/nodes/Header.jsx |  16 ++
 .../gql_node_renderer/nodes/LineBreak.jsx     |   3 +
 components/gql_node_renderer/nodes/Link.jsx   |   7 +
 .../gql_node_renderer/nodes/ListItem.jsx      |   3 +
 .../gql_node_renderer/nodes/OrderedList.jsx   |   3 +
 .../gql_node_renderer/nodes/Paragraph.jsx     |   3 +
 components/gql_node_renderer/nodes/Text.jsx   |  11 +
 .../gql_node_renderer/nodes/UnorderedList.jsx |   3 +
 package.json                                  |   3 +-
 pages/projects/benefits-navigator/[id].js     | 243 +++---------------
 pages/projects/oas-benefits-estimator/[id].js | 226 +++-------------
 yarn.lock                                     |   5 +
 14 files changed, 197 insertions(+), 391 deletions(-)
 create mode 100644 components/gql_node_renderer/Recur.jsx
 create mode 100644 components/gql_node_renderer/Render.jsx
 create mode 100644 components/gql_node_renderer/nodes/Header.jsx
 create mode 100644 components/gql_node_renderer/nodes/LineBreak.jsx
 create mode 100644 components/gql_node_renderer/nodes/Link.jsx
 create mode 100644 components/gql_node_renderer/nodes/ListItem.jsx
 create mode 100644 components/gql_node_renderer/nodes/OrderedList.jsx
 create mode 100644 components/gql_node_renderer/nodes/Paragraph.jsx
 create mode 100644 components/gql_node_renderer/nodes/Text.jsx
 create mode 100644 components/gql_node_renderer/nodes/UnorderedList.jsx

diff --git a/components/gql_node_renderer/Recur.jsx b/components/gql_node_renderer/Recur.jsx
new file mode 100644
index 0000000000..f82c691b54
--- /dev/null
+++ b/components/gql_node_renderer/Recur.jsx
@@ -0,0 +1,50 @@
+import { v4 as uuid } from "uuid";
+
+import Header from "./nodes/Header";
+import LineBreak from "./nodes/LineBreak";
+import ListItem from "./nodes/ListItem";
+import OrderedList from "./nodes/OrderedList";
+import Paragraph from "./nodes/Paragraph";
+import Text from "./nodes/Text";
+import UnorderedList from "./nodes/UnorderedList";
+import Link from "./nodes/Link";
+
+// todo: more components will like need to be added, but for now, these are the only ones returned in the aem json response
+const NODES = {
+  header: Header,
+  paragraph: Paragraph,
+  link: Link,
+  text: Text,
+  "unordered-list": UnorderedList,
+  "ordered-list": OrderedList,
+  "list-item": ListItem,
+  "line-break": LineBreak,
+};
+
+export default function Recur(props) {
+  const Node = NODES[props.node?.nodeType];
+  let content = props.node?.content;
+
+  if (
+    !Node ||
+    (props.excludeH1 &&
+      props.node?.nodeType === "header" &&
+      props.node?.style === "h1")
+  ) {
+    return;
+  }
+
+  return (
+    <>
+      {content && content.length ? (
+        <Node key={uuid()} node={props.node}>
+          {content.map((node) => (
+            <Recur key={uuid()} node={node} />
+          ))}
+        </Node>
+      ) : (
+        <Node key={uuid()} node={props.node}></Node>
+      )}
+    </>
+  );
+}
diff --git a/components/gql_node_renderer/Render.jsx b/components/gql_node_renderer/Render.jsx
new file mode 100644
index 0000000000..8a12bcba88
--- /dev/null
+++ b/components/gql_node_renderer/Render.jsx
@@ -0,0 +1,12 @@
+import Recur from "./Recur";
+import { v4 as uuid } from "uuid";
+
+export default function Render(props) {
+  return (
+    <>
+      {props.data.map((node) => (
+        <Recur key={uuid()} node={node} excludeH1={props.excludeH1} />
+      ))}
+    </>
+  );
+}
diff --git a/components/gql_node_renderer/nodes/Header.jsx b/components/gql_node_renderer/nodes/Header.jsx
new file mode 100644
index 0000000000..63df446603
--- /dev/null
+++ b/components/gql_node_renderer/nodes/Header.jsx
@@ -0,0 +1,16 @@
+export default function Header(props) {
+  switch (props.node.style) {
+    case "h1":
+      return <h1>{props.children}</h1>;
+    case "h2":
+      return <h2>{props.children}</h2>;
+    case "h3":
+      return <h3>{props.children}</h3>;
+    case "h4":
+      return <h4>{props.children}</h4>;
+    case "h5":
+      return <h5>{props.children}</h5>;
+    default:
+      return <h6>{props.children}</h6>;
+  }
+}
diff --git a/components/gql_node_renderer/nodes/LineBreak.jsx b/components/gql_node_renderer/nodes/LineBreak.jsx
new file mode 100644
index 0000000000..9f63d82a58
--- /dev/null
+++ b/components/gql_node_renderer/nodes/LineBreak.jsx
@@ -0,0 +1,3 @@
+export default function LineBreak() {
+  return <br />;
+}
diff --git a/components/gql_node_renderer/nodes/Link.jsx b/components/gql_node_renderer/nodes/Link.jsx
new file mode 100644
index 0000000000..e25ff0a50b
--- /dev/null
+++ b/components/gql_node_renderer/nodes/Link.jsx
@@ -0,0 +1,7 @@
+export default function Link(props) {
+  return (
+    <a href={props.node.data.href} className="underline">
+      {props.node.value}
+    </a>
+  );
+}
diff --git a/components/gql_node_renderer/nodes/ListItem.jsx b/components/gql_node_renderer/nodes/ListItem.jsx
new file mode 100644
index 0000000000..6fc838ebec
--- /dev/null
+++ b/components/gql_node_renderer/nodes/ListItem.jsx
@@ -0,0 +1,3 @@
+export default function ListItem(props) {
+  return <li>{props.children}</li>;
+}
diff --git a/components/gql_node_renderer/nodes/OrderedList.jsx b/components/gql_node_renderer/nodes/OrderedList.jsx
new file mode 100644
index 0000000000..58aa728139
--- /dev/null
+++ b/components/gql_node_renderer/nodes/OrderedList.jsx
@@ -0,0 +1,3 @@
+export default function UnorderedList(props) {
+  return <ol>{props.children}</ol>;
+}
diff --git a/components/gql_node_renderer/nodes/Paragraph.jsx b/components/gql_node_renderer/nodes/Paragraph.jsx
new file mode 100644
index 0000000000..3ae12ff344
--- /dev/null
+++ b/components/gql_node_renderer/nodes/Paragraph.jsx
@@ -0,0 +1,3 @@
+export default function Paragraph(props) {
+  return <p>{props.children}</p>;
+}
diff --git a/components/gql_node_renderer/nodes/Text.jsx b/components/gql_node_renderer/nodes/Text.jsx
new file mode 100644
index 0000000000..5fc5a9db8b
--- /dev/null
+++ b/components/gql_node_renderer/nodes/Text.jsx
@@ -0,0 +1,11 @@
+export default function Text(props) {
+  // todo: guessing on italic since I didn't see it, but I'm assuming it exists and will need to be updated
+  switch (props.node?.format?.variants?.[0]) {
+    case "strong":
+      return <strong>{props.node.value}</strong>;
+    case "emphasis":
+      return <em>{props.node.value}</em>;
+    default:
+      return <>{props.node.value}</>;
+  }
+}
diff --git a/components/gql_node_renderer/nodes/UnorderedList.jsx b/components/gql_node_renderer/nodes/UnorderedList.jsx
new file mode 100644
index 0000000000..ead5300b24
--- /dev/null
+++ b/components/gql_node_renderer/nodes/UnorderedList.jsx
@@ -0,0 +1,3 @@
+export default function UnorderedList(props) {
+  return <ul>{props.children}</ul>;
+}
diff --git a/package.json b/package.json
index 34eea1fa13..4e62bff6e4 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,8 @@
     "remark-breaks": "^3.0.3",
     "remark-html": "^15.0.1",
     "remark-parse": "^10.0.2",
-    "unified": "^10.1.2"
+    "unified": "^10.1.2",
+    "uuid": "^9.0.0"
   },
   "scripts": {
     "dev": "next dev",
diff --git a/pages/projects/benefits-navigator/[id].js b/pages/projects/benefits-navigator/[id].js
index bb4633d84f..bf32f1bf1b 100644
--- a/pages/projects/benefits-navigator/[id].js
+++ b/pages/projects/benefits-navigator/[id].js
@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import aemServiceInstance from "../../../services/aemServiceInstance";
 import { getAllUpdateIds } from "../../../lib/utils/getAllUpdateIds";
 import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs";
+import Render from "../../../components/gql_node_renderer/Render";
 import { Heading } from "../../../components/design-system/Heading";
 
 export default function DynamicBenefitNavigatorPage(props) {
@@ -123,14 +124,12 @@ export default function DynamicBenefitNavigatorPage(props) {
               props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
             }
           />
-          {/* <meta
+          <meta
             property="og:description"
             content={
-              props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[1].content[0].value
-                : pageData.scFragments[1].scContentFr.json[1].content[0].value
+              props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
             }
-          /> */}
+          />
           <meta
             property="og:image"
             content={pageData.scSocialMediaImageEn._publishUrl}
@@ -162,14 +161,12 @@ export default function DynamicBenefitNavigatorPage(props) {
             }
           />
           <meta name="twitter:creator" content="Service Canada" />
-          {/* <meta
+          <meta
             property="twitter:description"
             content={
-              props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[1].content[0].value
-                : pageData.scFragments[1].scContentFr.json[1].content[0].value
+              props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
             }
-          /> */}
+          />
           <meta
             property="twitter:image"
             content={pageData.scSocialMediaImageEn._publishUrl}
@@ -217,193 +214,33 @@ export default function DynamicBenefitNavigatorPage(props) {
           </div>
 
           {/* Main */}
-          <div id="mainContentSection" className="flex flex-row-reverse mt-12">
-            <div className="hidden md:block">
-              <img
-                src={pageData.scFragments[1].scImageEn._publishUrl}
-                alt=""
-                height={pageData.scFragments[1].scImageEn.height}
-                width={pageData.scFragments[1].scImageEn.width}
-              />
+          <div
+            id="mainContentSection"
+            className="grid grid-cols-12 gap-x-6 mt-12"
+          >
+            <div className="hidden lg:grid col-start-8 col-span-5 row-start-1 row-span-2">
+              <div className="flex justify-center">
+                <div className="h-auto">
+                  <img
+                    src={
+                      props.locale === "en"
+                        ? pageData.scFragments[1].scImageEn._publishUrl
+                        : pageData.scFragments[1].scImageFr._publishUrl
+                    }
+                    alt=""
+                  />
+                </div>
+              </div>
             </div>
-            <div className="w-[750px] grow">
-              <p>
-                {props.locale === "en"
-                  ? pageData.scFragments[0].scContentEn.json[1].content[0].value
-                  : pageData.scFragments[0].scContentFr.json[1].content[0]
-                      .value}
-              </p>
-              <p>
-                {props.locale === "en"
-                  ? pageData.scFragments[0].scContentEn.json[2].content[0].value
-                  : pageData.scFragments[0].scContentFr.json[2].content[0]
-                      .value}
-                <a
-                  className="underline underline-offset-4"
-                  href={
-                    props.locale === "en"
-                      ? pageData.scFragments[0].scContentEn.json[2].content[1]
-                          .data.href
-                      : pageData.scFragments[0].scContentFr.json[2].content[1]
-                          .data.href
-                  }
-                >
-                  {props.locale === "en"
-                    ? pageData.scFragments[0].scContentEn.json[2].content[1]
-                        .value
-                    : pageData.scFragments[0].scContentFr.json[2].content[1]
-                        .value}
-                </a>
-                <span className="text-lg pl-1">
-                  {props.locale === "en"
-                    ? pageData.scFragments[0].scContentEn.json[2].content[2]
-                        .value
-                    : pageData.scFragments[0].scContentFr.json[2].content[2]
-                        .value}
-                </span>
-              </p>
-
-              <p>
-                {props.locale === "en"
-                  ? pageData.scFragments[0].scContentEn.json[3].content[0].value
-                  : pageData.scFragments[0].scContentFr.json[3].content[0]
-                      .value}
-              </p>
-
-              <p>
-                {props.locale === "en"
-                  ? pageData.scFragments[0].scContentEn.json[4].content[0].value
-                  : pageData.scFragments[0].scContentFr.json[4].content[0]
-                      .value}
-              </p>
-
-              <p>
-                {props.locale === "en"
-                  ? pageData.scFragments[0].scContentEn.json[5].content[0].value
-                  : pageData.scFragments[0].scContentFr.json[5].content[0]
-                      .value}
-              </p>
-
-              <h2>
-                {props.locale === "en"
-                  ? pageData.scFragments[0].scContentEn.json[6].content[0].value
-                  : pageData.scFragments[0].scContentFr.json[6].content[0]
-                      .value}
-              </h2>
-              <p>
-                {props.locale === "en"
-                  ? pageData.scFragments[0].scContentEn.json[7].content[0].value
-                  : pageData.scFragments[0].scContentFr.json[7].content[0]
-                      .value}
-              </p>
-              <p>
-                {props.locale === "en"
-                  ? pageData.scFragments[0].scContentEn.json[8].content[0].value
-                  : pageData.scFragments[0].scContentFr.json[8].content[0]
-                      .value}
-              </p>
-
-              <h2>
-                {props.locale === "en"
-                  ? pageData.scFragments[0].scContentEn.json[9].content[0].value
-                  : pageData.scFragments[0].scContentFr.json[9].content[0]
-                      .value}
-              </h2>
-              <p>
-                {props.locale === "en"
-                  ? pageData.scFragments[0].scContentEn.json[10].content[0]
-                      .value
-                  : pageData.scFragments[0].scContentFr.json[10].content[0]
-                      .value}
-              </p>
-              <p>
-                {props.locale === "en"
-                  ? pageData.scFragments[0].scContentEn.json[11].content[0]
-                      .value
-                  : pageData.scFragments[0].scContentFr.json[11].content[0]
-                      .value}
-              </p>
-
-              <h2>
-                {props.locale === "en"
-                  ? pageData.scFragments[0].scContentEn.json[12].content[0]
-                      .value
-                  : pageData.scFragments[0].scContentFr.json[12].content[0]
-                      .value}
-              </h2>
-              <p>
-                {props.locale === "en"
-                  ? pageData.scFragments[0].scContentEn.json[13].content[0]
-                      .value
-                  : pageData.scFragments[0].scContentFr.json[13].content[0]
-                      .value}
-              </p>
-              <p>
-                {props.locale === "en"
-                  ? pageData.scFragments[0].scContentEn.json[14].content[0]
-                      .value
-                  : pageData.scFragments[0].scContentFr.json[14].content[0]
-                      .value}
-              </p>
-              <p>
-                {props.locale === "en"
-                  ? pageData.scFragments[0].scContentEn.json[15].content[0]
-                      .value
-                  : pageData.scFragments[0].scContentFr.json[15].content[0]
-                      .value}
-              </p>
-
-              <h2>
-                {props.locale === "en"
-                  ? pageData.scFragments[0].scContentEn.json[16].content[0]
-                      .value
-                  : pageData.scFragments[0].scContentFr.json[16].content[0]
-                      .value}
-              </h2>
-              <p>
-                {props.locale === "en"
-                  ? pageData.scFragments[0].scContentEn.json[17].content[0]
-                      .value
-                  : pageData.scFragments[0].scContentFr.json[17].content[0]
-                      .value}
-              </p>
-              <p>
-                {props.locale === "en"
-                  ? pageData.scFragments[0].scContentEn.json[18].content[0]
-                      .value
-                  : pageData.scFragments[0].scContentFr.json[18].content[0]
-                      .value}
-              </p>
-              <ul>
-                <li>
-                  {props.locale === "en"
-                    ? pageData.scFragments[0].scContentEn.json[19].content[0]
-                        .content[0].value
-                    : pageData.scFragments[0].scContentFr.json[19].content[0]
-                        .content[0].value}
-                </li>
-                <li>
-                  {props.locale === "en"
-                    ? pageData.scFragments[0].scContentEn.json[19].content[1]
-                        .content[0].value
-                    : pageData.scFragments[0].scContentFr.json[19].content[1]
-                        .content[0].value}
-                </li>
-                <li>
-                  {props.locale === "en"
-                    ? pageData.scFragments[0].scContentEn.json[19].content[2]
-                        .content[0].value
-                    : pageData.scFragments[0].scContentFr.json[19].content[2]
-                        .content[0].value}
-                </li>
-              </ul>
-              <p>
-                {props.locale === "en"
-                  ? pageData.scFragments[0].scContentEn.json[20].content[0]
-                      .value
-                  : pageData.scFragments[0].scContentFr.json[20].content[0]
-                      .value}
-              </p>
+            <div className="col-span-12 lg:col-span-7">
+              <Render
+                data={
+                  props.locale === "en"
+                    ? pageData.scFragments[0].scContentEn.json
+                    : pageData.scFragments[0].scContentFr.json
+                }
+                excludeH1={true}
+              />
             </div>
           </div>
         </section>
@@ -424,14 +261,10 @@ export async function getStaticPaths() {
   );
   // Get paths for dynamic routes from the page name data
   const paths = getAllUpdateIds(data.scLabsPagev1List.items);
-  paths.map((path) => {
-    path.locale === "en"
-      ? (path.params.id = path.params.id.slice(32))
-      : (path.params.id = path.params.id.slice(35));
-  });
+  paths.map((path) => (path.params.id = path.params.id.split("/").at(-1)));
   return {
     paths,
-    fallback: false,
+    fallback: "blocking",
   };
 }
 
@@ -448,8 +281,9 @@ export const getStaticProps = async ({ locale, params }) => {
   // Return page data that matches the current page being built
   const pageData = pages.filter((page) => {
     return (
-      page.scPageNameEn.slice(32) === params.id ||
-      page.scPageNameFr.slice(35) === params.id
+      (locale === "en" ? page.scPageNameEn : page.scPageNameFr)
+        .split("/")
+        .at(-1) === params.id
     );
   });
 
@@ -461,5 +295,6 @@ export const getStaticProps = async ({ locale, params }) => {
       adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL,
       ...(await serverSideTranslations(locale, ["common", "vc"])),
     },
+    revalidate: process.env.ENVIRONMENT === "development" ? 10 : false,
   };
 };
diff --git a/pages/projects/oas-benefits-estimator/[id].js b/pages/projects/oas-benefits-estimator/[id].js
index 5981068d28..f6306d4807 100644
--- a/pages/projects/oas-benefits-estimator/[id].js
+++ b/pages/projects/oas-benefits-estimator/[id].js
@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 import aemServiceInstance from "../../../services/aemServiceInstance";
 import { getAllUpdateIds } from "../../../lib/utils/getAllUpdateIds";
 import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs";
+import Render from "../../../components/gql_node_renderer/Render";
 import { CTA } from "../../../components/design-system/CTA";
 import { Heading } from "../../../components/design-system/Heading";
 
@@ -221,199 +222,54 @@ export default function OASUpdatePage(props) {
               {pageData.scDateModifiedOverwrite}
             </p>
           </div>
+
+          {/* Main */}
           <div
             id="mainContentSection"
-            className="grid grid-cols-12 pt-16 gap-x-2"
+            className="grid grid-cols-12 gap-x-6 mt-12"
           >
-            <p className="col-span-12 lg:col-span-8">
-              {props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[1].content[0].value
-                : pageData.scFragments[1].scContentFr.json[1].content[0].value}
-            </p>
-            <p className="col-span-12 lg:col-span-8">
-              {props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[2].content[0].value
-                : pageData.scFragments[1].scContentFr.json[2].content[0].value}
-            </p>
-            <div className="hidden lg:grid col-start-9 col-span-4 row-start-1 row-span-2">
+            <div className="hidden lg:grid col-start-8 col-span-5 row-start-1 row-span-2">
               <div className="flex justify-center">
-                <div className="h-auto max-w-xs">
+                <div className="h-auto">
                   <img
                     src={
                       props.locale === "en"
                         ? pageData.scFragments[0].scImageEn._publishUrl
                         : pageData.scFragments[0].scImageFr._publishUrl
                     }
-                    alt={
-                      props.locale === "en"
-                        ? pageData.scFragments[0].scImageAltTextEn
-                        : pageData.scFragments[0].scImageAltTextFr
-                    }
-                    width={468}
-                    height={462}
+                    alt=""
                   />
                 </div>
               </div>
             </div>
-            <h2 className="col-span-12">
-              {props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[3].content[0].value
-                : pageData.scFragments[1].scContentFr.json[3].content[0].value}
-            </h2>
-            <p className="col-span-12 lg:col-span-8">
-              {props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[4].content[0].value
-                : pageData.scFragments[1].scContentFr.json[4].content[0].value}
-            </p>
-            <p className="col-span-12 lg:col-span-8">
-              {props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[5].content[0].value
-                : pageData.scFragments[1].scContentFr.json[5].content[0].value}
-            </p>
-            <ul className="col-span-12 lg:col-span-8">
-              <li>
-                {props.locale === "en"
-                  ? pageData.scFragments[1].scContentEn.json[6].content[0]
-                      .content[0].value
-                  : pageData.scFragments[1].scContentFr.json[6].content[0]
-                      .content[0].value}
-              </li>
-              <li>
-                {props.locale === "en"
-                  ? pageData.scFragments[1].scContentEn.json[6].content[1]
-                      .content[0].value
-                  : pageData.scFragments[1].scContentFr.json[6].content[1]
-                      .content[0].value}
-              </li>
-              <li>
-                {props.locale === "en"
-                  ? pageData.scFragments[1].scContentEn.json[6].content[2]
-                      .content[0].value
-                  : pageData.scFragments[1].scContentFr.json[6].content[2]
-                      .content[0].value}
-              </li>
-            </ul>
-            <p className="col-span-12 lg:col-span-8">
-              {props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[7].content[0].value
-                : pageData.scFragments[1].scContentFr.json[7].content[0].value}
-            </p>
-            <h2 className="col-span-12">
-              {props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[8].content[0].value
-                : pageData.scFragments[1].scContentFr.json[8].content[0].value}
-            </h2>
-            <p className="col-span-12 lg:col-span-8">
-              {props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[9].content[0].value
-                : pageData.scFragments[1].scContentFr.json[9].content[0].value}
-            </p>
-            <p className="col-span-12 lg:col-span-8">
-              {props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[10].content[0].value
-                : pageData.scFragments[1].scContentFr.json[10].content[0].value}
-            </p>
-            <p className="col-span-12 lg:col-span-8">
-              {props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[11].content[0].value
-                : pageData.scFragments[1].scContentFr.json[11].content[0].value}
-            </p>
-            <p className="col-span-12 lg:col-span-8">
-              {props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[12].content[0].value
-                : pageData.scFragments[1].scContentFr.json[12].content[0].value}
-            </p>
-            <h2 className="col-span-12">
-              {props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[13].content[0].value
-                : pageData.scFragments[1].scContentFr.json[13].content[0].value}
-            </h2>
-            <p className="col-span-12 lg:col-span-8">
-              {props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[14].content[0].value
-                : pageData.scFragments[1].scContentFr.json[14].content[0].value}
-            </p>
-            <p className="col-span-12 lg:col-span-8">
-              {props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[15].content[0].value
-                : pageData.scFragments[1].scContentFr.json[15].content[0].value}
-            </p>
-            <ul className="col-span-12 lg:col-span-8">
-              <li className="text-[20px]">
-                {props.locale === "en"
-                  ? pageData.scFragments[1].scContentEn.json[16].content[0]
-                      .content[0].value
-                  : pageData.scFragments[1].scContentFr.json[16].content[0]
-                      .content[0].value}
-              </li>
-              <li className="text-[20px]">
-                {props.locale === "en"
-                  ? pageData.scFragments[1].scContentEn.json[16].content[1]
-                      .content[0].value
-                  : pageData.scFragments[1].scContentFr.json[16].content[1]
-                      .content[0].value}
-              </li>
-            </ul>
-            <p className="col-span-12 lg:col-span-8">
-              {props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[17].content[0].value
-                : pageData.scFragments[1].scContentFr.json[17].content[0].value}
-            </p>
-            <ul className="col-span-12 lg:col-span-8">
-              <li className="text-[20px]">
-                {props.locale === "en"
-                  ? pageData.scFragments[1].scContentEn.json[18].content[0]
-                      .content[0].value
-                  : pageData.scFragments[1].scContentFr.json[18].content[0]
-                      .content[0].value}
-              </li>
-              <li className="text-[20px]">
-                {props.locale === "en"
-                  ? pageData.scFragments[1].scContentEn.json[18].content[1]
-                      .content[0].value
-                  : pageData.scFragments[1].scContentFr.json[18].content[1]
-                      .content[0].value}
-              </li>
-              <li className="text-[20px]">
-                {props.locale === "en"
-                  ? pageData.scFragments[1].scContentEn.json[18].content[2]
-                      .content[0].value
-                  : pageData.scFragments[1].scContentFr.json[18].content[2]
-                      .content[0].value}
-              </li>
-            </ul>
-            <p className="col-span-12 lg:col-span-8">
-              {props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[19].content[0].value
-                : pageData.scFragments[1].scContentFr.json[19].content[0].value}
-            </p>
-            <h2 className="col-span-12">
-              {props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[20].content[0].value
-                : pageData.scFragments[1].scContentFr.json[20].content[0].value}
-            </h2>
-            <p className="col-span-12 lg:col-span-8">
-              {props.locale === "en"
-                ? pageData.scFragments[1].scContentEn.json[21].content[0].value
-                : pageData.scFragments[1].scContentFr.json[21].content[0].value}
-            </p>
-            <ActionButton
-              id="feedback-btn"
-              style="secondary"
-              custom="col-span-12 mt-8"
-              href={
-                props.locale === "en"
-                  ? pageData.scFragments[2].scDestinationURLEn
-                  : pageData.scFragments[2].scDestinationURLFr
-              }
-              text={
-                props.locale === "en"
-                  ? pageData.scFragments[2].scTitleEn
-                  : pageData.scFragments[2].scTitleFr
-              }
-              ariaExpanded={props.ariaExpanded}
-            />
+            <div className="col-span-12 lg:col-span-7">
+              <Render
+                data={
+                  props.locale === "en"
+                    ? pageData.scFragments[1].scContentEn.json
+                    : pageData.scFragments[1].scContentFr.json
+                }
+                excludeH1={true}
+              />
+            </div>
           </div>
+
+          <ActionButton
+            id="feedback-btn"
+            style="secondary"
+            custom="col-span-12 mt-8"
+            href={
+              props.locale === "en"
+                ? pageData.scFragments[2].scDestinationURLEn
+                : pageData.scFragments[2].scDestinationURLFr
+            }
+            text={
+              props.locale === "en"
+                ? pageData.scFragments[2].scTitleEn
+                : pageData.scFragments[2].scTitleFr
+            }
+            ariaExpanded={props.ariaExpanded}
+          />
         </section>
         <CTA
           heading={
@@ -459,14 +315,10 @@ export async function getStaticPaths() {
   // Get paths for dynamic routes from the page name data
   const paths = getAllUpdateIds(data.scLabsPagev1List.items);
   // Remove characters preceding the page name itself i.e. change "/en/projects/oas-benefits-estimator/what-we-learned" to "what-we-learned"
-  paths.map((path) => {
-    path.locale === "en"
-      ? (path.params.id = path.params.id.slice(36))
-      : (path.params.id = path.params.id.slice(38));
-  });
+  paths.map((path) => (path.params.id = path.params.id.split("/").at(-1)));
   return {
     paths,
-    fallback: false,
+    fallback: "blocking",
   };
 }
 
@@ -483,8 +335,9 @@ export const getStaticProps = async ({ locale, params }) => {
   // Return page data that matches the current page being built
   const pageData = pages.filter((page) => {
     return (
-      page.scPageNameEn.slice(36) === params.id ||
-      page.scPageNameFr.slice(38) === params.id
+      (locale === "en" ? page.scPageNameEn : page.scPageNameFr)
+        .split("/")
+        .at(-1) === params.id
     );
   });
   return {
@@ -495,5 +348,6 @@ export const getStaticProps = async ({ locale, params }) => {
       adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL,
       ...(await serverSideTranslations(locale, ["common", "vc"])),
     },
+    revalidate: process.env.ENVIRONMENT === "development" ? 10 : false,
   };
 };
diff --git a/yarn.lock b/yarn.lock
index f52e7b040d..a556b23215 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12303,6 +12303,11 @@ uuid@^8.3.0, uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uuid@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
+  integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
+
 uvu@^0.5.0:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df"