From 19705ac3d394c1fc7cf783d66becbbf65323d1f6 Mon Sep 17 00:00:00 2001
From: Jordan Willis <31868510+will0684@users.noreply.github.com>
Date: Wed, 13 Dec 2023 10:14:22 -0500
Subject: [PATCH] Modify dynamic OAS article page to use template (#945)

* update OAS article queries to support new fragments

* update OAS article page to use template
---
 .../oasBenefitsEstimatorArticlesQuery.graphql | 102 ++++++-
 pages/projects/oas-benefits-estimator/[id].js | 279 +++---------------
 2 files changed, 147 insertions(+), 234 deletions(-)

diff --git a/graphql/queries/oasBenefitsEstimatorArticlesQuery.graphql b/graphql/queries/oasBenefitsEstimatorArticlesQuery.graphql
index e76ee9aae9..28c710cc18 100644
--- a/graphql/queries/oasBenefitsEstimatorArticlesQuery.graphql
+++ b/graphql/queries/oasBenefitsEstimatorArticlesQuery.graphql
@@ -1,5 +1,5 @@
 query getOASBenefitsEstimatorArticles {
-  sclabsPageV1List (
+  sclabsPageV1List(
     filter: {
       scContentType: {
         _expressions: [
@@ -69,7 +69,83 @@ query getOASBenefitsEstimatorArticles {
       scNoIndex
       scNoFollow
       scFragments {
+        ... on SclabsCompContentImageV1Model {
+          _model {
+            ... on ModelInfo {
+              title
+            }
+          }
+          scId
+          scLabContent {
+            scId
+            scContentEn {
+              json
+            }
+            scContentFr {
+              json
+            }
+          }
+          scLabImage {
+            ... on SclabsImageV1Model {
+              scId
+              scImageEn {
+                ... on ImageRef {
+                  _publishUrl
+                  width
+                  height
+                }
+                ... on DocumentRef {
+                  _publishUrl
+                }
+              }
+              scImageFr {
+                ... on ImageRef {
+                  _publishUrl
+                  width
+                  height
+                }
+                ... on DocumentRef {
+                  _publishUrl
+                }
+              }
+              scImageMobileEn {
+                ... on ImageRef {
+                  _publishUrl
+                  width
+                  height
+                }
+                ... on DocumentRef {
+                  _publishUrl
+                }
+              }
+              scImageMobileFr {
+                ... on ImageRef {
+                  _publishUrl
+                  width
+                  height
+                }
+                ... on DocumentRef {
+                  _publishUrl
+                }
+              }
+              scImageAltTextEn
+              scImageAltTextFr
+              scImageCaptionEn {
+                json
+              }
+              scImageCaptionFr {
+                json
+              }
+            }
+          }
+          scLabLayout
+        }
         ... on SclabsContentV1Model {
+          _model {
+            ... on ModelInfo {
+              title
+            }
+          }
           _path
           scId
           scContentEn {
@@ -80,6 +156,11 @@ query getOASBenefitsEstimatorArticles {
           }
         }
         ... on SclabsImageV1Model {
+          _model {
+            ... on ModelInfo {
+              title
+            }
+          }
           scId
           scImageEn {
             ... on ImageRef {
@@ -131,6 +212,11 @@ query getOASBenefitsEstimatorArticles {
           }
         }
         ... on SclabsButtonV1Model {
+          _model {
+            ... on ModelInfo {
+              title
+            }
+          }
           scId
           scTitleEn
           scTitleFr
@@ -139,6 +225,11 @@ query getOASBenefitsEstimatorArticles {
           scButtonType
         }
         ... on SclabsFeatureV1Model {
+          _model {
+            ... on ModelInfo {
+              title
+            }
+          }
           scId
           scTitleEn
           scTitleFr
@@ -158,6 +249,7 @@ query getOASBenefitsEstimatorArticles {
               _publishUrl
             }
           }
+          scImageAltTextEn
           scImageFr {
             ... on ImageRef {
               _publishUrl
@@ -168,6 +260,7 @@ query getOASBenefitsEstimatorArticles {
               _publishUrl
             }
           }
+          scImageAltTextFr
           scFragments {
             ... on SclabsAlertV1Model {
               _path
@@ -195,6 +288,11 @@ query getOASBenefitsEstimatorArticles {
           }
         }
         ... on TooltipV1Model {
+          _model {
+            ... on ModelInfo {
+              title
+            }
+          }
           _path
           scId
           scTitleEn
@@ -209,4 +307,4 @@ query getOASBenefitsEstimatorArticles {
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/pages/projects/oas-benefits-estimator/[id].js b/pages/projects/oas-benefits-estimator/[id].js
index 957ac279b2..114d679889 100644
--- a/pages/projects/oas-benefits-estimator/[id].js
+++ b/pages/projects/oas-benefits-estimator/[id].js
@@ -1,14 +1,12 @@
-import Head from "next/head";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useTranslation } from "next-i18next";
+import PageHead from "../../../components/fragment_renderer/PageHead";
 import { Layout } from "../../../components/organisms/Layout";
-import { ActionButton } from "../../../components/atoms/ActionButton";
 import { useEffect, useState } from "react";
 import aemServiceInstance from "../../../services/aemServiceInstance";
 import { getAllUpdateIds } from "../../../lib/utils/getAllUpdateIds";
 import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs";
-import TextRender from "../../../components/text_node_renderer/TextRender";
-import { CTA } from "../../../components/design-system/CTA";
+import FragmentRender from "../../../components/fragment_renderer/FragmentRender";
 import { Heading } from "../../../components/design-system/Heading";
 
 export default function OASUpdatePage(props) {
@@ -36,238 +34,55 @@ export default function OASUpdatePage(props) {
           props.locale
         )}
       >
-        <Head>
-          {props.adobeAnalyticsUrl ? (
-            <script src={props.adobeAnalyticsUrl} />
-          ) : (
-            ""
-          )}
-
-          {/* Primary HTML Meta Tags */}
-          <title>
-            {props.locale === "en"
-              ? `${pageData.scTitleEn} - Service Canada Labs`
-              : `${pageData.scTitleFr} - Laboratoires de Service Canada`}
-          </title>
-          <meta
-            name="description"
-            content={
-              props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
-            }
-          />
-          <meta name="author" content="Service Canada" />
-          <link rel="icon" href="/favicon.ico" />
-          <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
-          <meta
-            name="keywords"
-            content={
-              props.locale === "en"
-                ? pageData.scKeywordsEn
-                : pageData.scKeywordsFr
-            }
-          />
-
-          {/* DCMI Meta Tags */}
-          <meta
-            name="dcterms.title"
-            content={
-              props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
-            }
-          />
-          <meta
-            name="dcterms.language"
-            content={props.locale === "en" ? "eng" : "fra"}
-            title="ISO639-2/T"
-          />
-          <meta
-            name="dcterms.creator"
-            content={
-              props.locale === "en"
-                ? "Employment and Social Development Canada"
-                : "Emploi et Développement social Canada"
-            }
-          />
-          <meta name="dcterms.accessRights" content="2" />
-          <meta
-            name="dcterms.service"
-            content="ESDC-EDSC_SCLabs-LaboratoireSC"
-          />
-          <meta name="dcterms.issued" title="W3CDTF" content="2023-07-07" />
-
-          <meta name="dcterms.modified" title="W3CDTF" content="2023-07-07" />
-          <meta
-            name="dcterms.description"
-            content={
-              props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
-            }
-          />
-          <meta
-            name="dcterms.subject"
-            title="gccore"
-            content={pageData.scSubject}
-          />
-          <meta name="dcterms.spatial" content="Canada" />
-
-          {/* Open Graph / Facebook */}
-          <meta property="og:type" content="website" />
-          <meta property="og:locale" content={props.locale} />
-          <meta
-            property="og:url"
-            content={
-              "https://alpha.service.canada.ca" +
-              `${
-                props.locale === "en"
-                  ? pageData.scPageNameEn
-                  : pageData.scPageNameFr
-              }`
-            }
-          />
-          <meta
-            property="og:title"
-            content={
-              props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
-            }
-          />
-          <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
-            }
-          />
-          <meta
-            property="og:image"
-            content={pageData.scSocialMediaImageEn._publishUrl}
-          />
-          <meta
-            property="og:image:alt"
-            content={
-              props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
-            }
-          />
-
-          {/* Twitter */}
-          <meta property="twitter:card" content="summary_large_image" />
-          <meta
-            property="twitter:url"
-            content={
-              "https://alpha.service.canada.ca" +
-              `${
-                props.locale === "en"
-                  ? pageData.scPageNameEn
-                  : pageData.scPageNameFr
-              }`
-            }
-          />
-          <meta
-            property="twitter:title"
-            content={
-              props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
-            }
-          />
-          <meta name="twitter:creator" content="Service Canada" />
-          <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
-            }
-          />
-          <meta
-            property="twitter:image"
-            content={pageData.scSocialMediaImageEn._publishUrl}
-          />
-          <meta
-            property="twitter:image:alt"
-            content={
-              props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
-            }
-          />
-        </Head>
-        <section className="layout-container mb-12">
-          <Heading
-            tabIndex="-1"
-            id="pageMainTitle"
-            title={
-              props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
-            }
-          />
-          <div id="postedOnUpdatedOnSection" className="grid grid-cols-12">
-            <p
-              className={`col-span-6 sm:col-span-4 ${
-                props.locale === "en" ? "lg:col-span-2" : "lg:col-span-3"
-              } font-bold`}
-            >
-              {props.locale === "en"
-                ? dictionary[9].scTermEn
-                : dictionary[9].scTermFr}
-            </p>
-            <p className="col-span-6 col-start-7 sm:col-start-5 lg:col-span-2 md:col-start-5 mt-0">
-              {pageData.scDateModifiedOverwrite}
-            </p>
-            <p
-              className={`row-start-2 col-span-6 sm:col-span-4 mt-0 ${
-                props.locale === "en" ? "lg:col-span-2" : "lg:col-span-3"
-              } font-bold`}
-            >
-              {props.locale === "en"
-                ? dictionary[4].scTermEn
-                : dictionary[4].scTermFr}
-            </p>
-            <p className="row-start-2 col-span-6 col-start-7 sm:col-start-5 lg:col-span-2 md:col-start-5 mt-auto">
-              {pageData.scDateModifiedOverwrite}
-            </p>
+        <PageHead
+          pageData={pageData}
+          adobeAnalyticsUrl={props.adobeAnalyticsUrl}
+          locale={props.locale}
+        />
+        <section className="mb-12">
+          <div className="layout-container">
+            <Heading
+              tabIndex="-1"
+              id="pageMainTitle"
+              title={
+                props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+              }
+            />
+            <div id="postedOnUpdatedOnSection" className="grid grid-cols-12">
+              <p
+                className={`col-span-6 sm:col-span-4 ${
+                  props.locale === "en" ? "lg:col-span-2" : "lg:col-span-3"
+                } font-bold`}
+              >
+                {props.locale === "en"
+                  ? dictionary[9].scTermEn
+                  : dictionary[9].scTermFr}
+              </p>
+              <p className="col-span-6 col-start-7 sm:col-start-5 lg:col-span-2 md:col-start-5 mt-0">
+                {pageData.scDateModifiedOverwrite}
+              </p>
+              <p
+                className={`row-start-2 col-span-6 sm:col-span-4 mt-0 ${
+                  props.locale === "en" ? "lg:col-span-2" : "lg:col-span-3"
+                } font-bold`}
+              >
+                {props.locale === "en"
+                  ? dictionary[4].scTermEn
+                  : dictionary[4].scTermFr}
+              </p>
+              <p className="row-start-2 col-span-6 col-start-7 sm:col-start-5 lg:col-span-2 md:col-start-5 mt-auto">
+                {pageData.scDateModifiedOverwrite}
+              </p>
+            </div>
           </div>
 
           {/* Main */}
-          <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[0].scImageEn._publishUrl
-                        : pageData.scFragments[0].scImageFr._publishUrl
-                    }
-                    alt=""
-                  />
-                </div>
-              </div>
-            </div>
-            <div className="col-span-12 lg:col-span-7">
-              <TextRender
-                data={
-                  props.locale === "en"
-                    ? pageData.scFragments[1].scContentEn.json
-                    : pageData.scFragments[1].scContentFr.json
-                }
-                excludeH1={true}
-              />
-            </div>
+          <div id="mainContentSection">
+            <FragmentRender
+              fragments={props.pageData.scFragments}
+              locale={props.locale}
+            />
           </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>
       </Layout>
       {props.adobeAnalyticsUrl ? (