From d8545cd664ea560cd0a5bc2cae22c7b715aa00b1 Mon Sep 17 00:00:00 2001
From: Alex Soloviev <alex.soloviev@gmail.com>
Date: Thu, 11 Apr 2024 13:49:07 -0300
Subject: [PATCH] ADO-171109: Fixed SEO issue and check if alpha/beta site to
 add correct breadcrumbs (#1043)

fixed SEO issue and check if alpha/beta site to add correct breadcrumbs
---
 components/Layout/Head.tsx  | 22 ++++-----
 components/Layout/index.tsx | 98 ++++++++++++++++++++-----------------
 2 files changed, 63 insertions(+), 57 deletions(-)

diff --git a/components/Layout/Head.tsx b/components/Layout/Head.tsx
index 023d0ba20..0f23ff0ed 100644
--- a/components/Layout/Head.tsx
+++ b/components/Layout/Head.tsx
@@ -9,12 +9,12 @@ export const Head: React.VFC<{ title: string }> = ({ title }) => {
   const tsln = useTranslation<WebTranslations>()
   const altLang = tsln._language === 'en' ? 'fr' : 'en'
 
-  const [isCanadaDotCa, setIsCanadaDotCa] = useState(false)
+  const [isAlpha, setIsAlpha] = useState(false)
 
   useEffect(() => {
     if (typeof window !== undefined) {
       const hostName = window.location.hostname
-      setIsCanadaDotCa(hostName.includes('.canada.ca'))
+      setIsAlpha(hostName.includes('.alpha.service'))
     }
   }, [])
 
@@ -35,18 +35,18 @@ export const Head: React.VFC<{ title: string }> = ({ title }) => {
       <link
         rel="canonical"
         href={
-          isCanadaDotCa
-            ? `https://estimateursv-oasestimator.service.canada.ca/${tsln._language}${router.pathname}`
-            : `http://ep-be.alpha.servicecanada.ca/${tsln._language}${router.pathname}`
+          isAlpha
+            ? `http://ep-be.alpha.service.canada.ca/${tsln._language}${router.pathname}`
+            : `https://estimateursv-oasestimator.service.canada.ca/${tsln._language}${router.pathname}`
         }
       />
       <link
         rel="alternate"
         lang={altLang}
         href={
-          isCanadaDotCa
-            ? `https://estimateursv-oasestimator.service.canada.ca/${altLang}${router.pathname}`
-            : `https://ep-be.alpha.service.canada.ca/${altLang}${router.pathname}`
+          isAlpha
+            ? `https://ep-be.alpha.service.canada.ca/${altLang}${router.pathname}`
+            : `https://estimateursv-oasestimator.service.canada.ca/${altLang}${router.pathname}`
         }
       />
 
@@ -54,9 +54,9 @@ export const Head: React.VFC<{ title: string }> = ({ title }) => {
         rel="alternate"
         lang={tsln._language}
         href={
-          isCanadaDotCa
-            ? `https://estimateursv-oasestimator.service.canada.ca/${tsln._language}${router.pathname}`
-            : `https://ep-be.alpha.service.canada.ca/${tsln._language}${router.pathname}`
+          isAlpha
+            ? `https://ep-be.alpha.service.canada.ca/${tsln._language}${router.pathname}`
+            : `https://estimateursv-oasestimator.service.canada.ca/${tsln._language}${router.pathname}`
         }
       />
       <meta name="keywords" content={tsln.meta.homeKeywords} />
diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
index 8935b14d9..994296b7a 100644
--- a/components/Layout/index.tsx
+++ b/components/Layout/index.tsx
@@ -14,6 +14,7 @@ export const Layout: React.VFC<{
   title: string
 }> = ({ children, title }) => {
   const router = useRouter()
+  const hostname = typeof window !== 'undefined' ? window.location.hostname : ''
 
   // basically returns 'results' or 'resultats' IF, otherwise index or questions in the other locale.
   const langToggleLink =
@@ -53,54 +54,59 @@ export const Layout: React.VFC<{
     onSubmit: () => {},
   }
 
-  const breadcrumbs =
-    process.env.APP_ENV === 'production'
-      ? [
-          {
-            text: tsln.breadcrumb1Title,
-            link: tsln.breadcrumb1URL,
-          },
-          {
-            text: tsln.breadcrumb2Title,
-            link: tsln.breadcrumb2URL,
-          },
-          {
-            text: tsln.breadcrumb3Title,
-            link: tsln.breadcrumb3URL,
-          },
-          {
-            text: tsln.breadcrumb4Title,
-            link: tsln.breadcrumb4URL,
-          },
-        ]
-      : [
-          {
-            text: tsln.breadcrumb1aTitle,
-            link: tsln.breadcrumb1aURL,
-          },
-          {
-            text: tsln.breadcrumb2aTitle,
-            link: tsln.breadcrumb2aURL,
-          },
-        ]
+  const getBreadcrumbs = () => {
+    const isBeta = !hostname.includes('.alpha.service')
+    const breadcrumbs =
+      process.env.APP_ENV === 'production' && isBeta
+        ? [
+            {
+              text: tsln.breadcrumb1Title,
+              link: tsln.breadcrumb1URL,
+            },
+            {
+              text: tsln.breadcrumb2Title,
+              link: tsln.breadcrumb2URL,
+            },
+            {
+              text: tsln.breadcrumb3Title,
+              link: tsln.breadcrumb3URL,
+            },
+            {
+              text: tsln.breadcrumb4Title,
+              link: tsln.breadcrumb4URL,
+            },
+          ]
+        : [
+            {
+              text: tsln.breadcrumb1aTitle,
+              link: tsln.breadcrumb1aURL,
+            },
+            {
+              text: tsln.breadcrumb2aTitle,
+              link: tsln.breadcrumb2aURL,
+            },
+          ]
 
-  if (router.pathname === '/questions') {
-    breadcrumbs.push({
-      text: tsln.breadcrumb6Title,
-      link: tsln.breadcrumb6URL,
-    })
-  } else if (
-    router.pathname === '/results' ||
-    router.pathname === '/resultats'
-  ) {
-    breadcrumbs.push({
-      text: tsln.breadcrumb6Title,
-      link: tsln.breadcrumb6URL,
-    }),
+    if (router.pathname === '/questions') {
       breadcrumbs.push({
-        text: tsln.breadcrumb7Title,
-        link: tsln.breadcrumb7URL,
+        text: tsln.breadcrumb6Title,
+        link: tsln.breadcrumb6URL,
       })
+    } else if (
+      router.pathname === '/results' ||
+      router.pathname === '/resultats'
+    ) {
+      breadcrumbs.push({
+        text: tsln.breadcrumb6Title,
+        link: tsln.breadcrumb6URL,
+      }),
+        breadcrumbs.push({
+          text: tsln.breadcrumb7Title,
+          link: tsln.breadcrumb7URL,
+        })
+    }
+
+    return breadcrumbs
   }
 
   const handleOnClick = () => {
@@ -122,7 +128,7 @@ export const Layout: React.VFC<{
             id="header"
             locale={router.locale}
             langUrl={langToggleLink}
-            breadcrumbItems={breadcrumbs}
+            breadcrumbItems={getBreadcrumbs()}
             topNavProps={topnavProps}
             headerText={{
               globalHeader: tsln.globalHeader,