Merge pull request #108 from DTS-STN/beta-banner

Beta banner

__tests__/components/Layout.test.js

@@ -36,24 +36,25 @@ describe('Layout with default text', () => {
       keywords: '',
     },
   }
+  const display = { hideBanner: true }
 
   useRouter.mockImplementation(() => ({
     pathname: '/',
     asPath: '/',
   }))
 
   it('Layout contains Symbol of GoC', () => {
-    render(<Layout locale="en" meta={meta} />)
+    render(<Layout locale="en" meta={meta} display={display} />)
     expect(screen.getByAltText('Government of Canada')).toBeInTheDocument()
   })
 
   it('Layout contains "Skip to content" link', () => {
-    render(<Layout locale="fr" meta={meta} />)
+    render(<Layout locale="fr" meta={meta} display={display} />)
     expect(screen.getByText('Passer au contenu principal')).toBeInTheDocument()
   })
 
   it('Layout contains a Main tag', () => {
-    render(<Layout locale="en" meta={meta} />)
+    render(<Layout locale="en" meta={meta} display={display} />)
     expect(screen.getByRole('main')).toBeInTheDocument()
   })
 
@@ -68,7 +69,9 @@ describe('Layout with default text', () => {
   // })
 
   it('Layout contains no a11y violations', async () => {
-    const { container } = render(<Layout locale="en" meta={meta} />)
+    const { container } = render(
+      <Layout locale="en" meta={meta} display={display} />
+    )
     const results = await axe(container)
     expect(results).toHaveNoViolations()
   })

__tests__/pages/404.test.js

@@ -41,6 +41,7 @@ describe('404', () => {
             keywords: '',
           },
         },
+        hideBanner: true,
       },
     })
   })

__tests__/pages/my-dashboard.test.js

@@ -22,6 +22,14 @@ jest.mock('../../graphql/mappers/my-dashboard', () => ({
   },
 }))
 
+jest.mock('../../graphql/mappers/beta-banner-opt-out', () => ({
+  getBetaBannerContent: () => {
+    return new Promise(function (resolve, reject) {
+      resolve({ en: {}, fr: {} })
+    })
+  },
+}))
+
 jest.mock('../../components/Card', () => () => {
   return <mock-card data-testid="mock-card" />
 })
@@ -58,6 +66,7 @@ describe('My Dashboard page', () => {
     expect(props).toEqual({
       props: {
         content: {},
+        bannerContent: {},
         langToggleLink: '/fr/my-dashboard',
         locale: 'en',
         meta: {

components/Layout.js

@@ -25,13 +25,19 @@ export default function Layout(props) {
   return (
     <>
       <MetaData language={props.locale} data={props.meta}></MetaData>
-      <PhaseBanner
-        bannerBoldText={t.bannerBoldText}
-        bannerText={t.bannerText}
-        bannerLink={t.bannerLink}
-        bannerLinkHref={t.bannerLinkHref}
-        bannerButtonText={t.bannerButtonText}
-      ></PhaseBanner>
+      {props.display.hideBanner ? (
+        ''
+      ) : (
+        <PhaseBanner
+          bannerBoldText={props.bannerContent.bannerBoldText}
+          bannerText={props.bannerContent.bannerText}
+          bannerLink={props.bannerContent.bannerLink}
+          bannerLinkHref={props.bannerContent.bannerLinkHref}
+          bannerButtonText={props.bannerContent.bannerButtonText}
+          bannerButtonLink={props.bannerContent.bannerButtonLink}
+          icon={props.bannerContent.icon}
+        ></PhaseBanner>
+      )}
       <Header
         id="header"
         lang={props.locale}
@@ -104,6 +110,18 @@ Layout.propTypes = {
    * Title of the page
    */
   title: PropTypes.string,
+  /*
+   * bannerContent
+   */
+  bannerContent: PropTypes.shape({
+    bannerBoldText: PropTypes.string.isRequired,
+    bannerText: PropTypes.string.isRequired,
+    bannerLink: PropTypes.string.isRequired,
+    bannerLinkHref: PropTypes.string.isRequired,
+    bannerButtonText: PropTypes.string.isRequired,
+    bannerButtonLink: PropTypes.string.isRequired,
+    icon: PropTypes.string.isRequired,
+  }),
   /*
    * Link of the page in opposite language
    */
@@ -112,7 +130,7 @@ Layout.propTypes = {
     /*
      * Toggle use of Phase (default false)
      */
-    showPhase: PropTypes.bool,
+    hideBanner: PropTypes.bool,
     /*
      * Toggle use of DS header (default false)
      */

components/PhaseBanner.js

@@ -24,16 +24,20 @@ export default function PhaseBanner(props) {
             className="text-deep-blue-dark hover:text-blue-hover"
           >
             <span className="mr-2 underline">{props.bannerLink}</span>
-            <FontAwesomeIcon
-              icon={icon['arrow-up-right-from-square']}
-            ></FontAwesomeIcon>
+            <FontAwesomeIcon icon={icon[props.icon]}></FontAwesomeIcon>
           </a>
         </div>
-        <Button
-          styling="primary"
-          text={props.bannerButtonText}
-          className="max-h-11 my-auto text-sm w-full justify-center px-auto sm:w-auto"
-        ></Button>
+        <a
+          href={props.bannerButtonLink}
+          className="max-h-11 my-auto w-full justify-center px-auto sm:w-auto"
+        >
+          <Button
+            id="bannerButton"
+            styling="primary"
+            text={props.bannerButtonText}
+            className="text-sm"
+          ></Button>
+        </a>
       </div>
     </div>
   )
@@ -60,4 +64,12 @@ PhaseBanner.propTypes = {
    * Phasebanner Button Text
    */
   bannerButtonText: propTypes.string,
+  /**
+   * Phasebanner Button Href
+   */
+  bannerButtonHref: propTypes.string,
+  /**
+   * Icon Text
+   */
+  icon: propTypes.string,
 }

components/PhaseBanner.test.js

@@ -14,6 +14,8 @@ describe('PhaseBanner', () => {
         bannerLink={'bannerLink'}
         bannerLinkHref={'bannerLinkHref'}
         bannerButtonText={'bannerButtonText'}
+        bannerButtonLink={'bannerButtonLink'}
+        icon={'bell'}
       ></PhaseBanner>
     )
     const bannerBoldText = screen.getByText('bannerBoldText')
@@ -34,6 +36,8 @@ describe('PhaseBanner', () => {
         bannerLink={'bannerLink'}
         bannerLinkHref={'bannerLinkHref'}
         bannerButtonText={'bannerButtonText'}
+        bannerButtonLink={'bannerButtonLink'}
+        icon={'bell'}
       ></PhaseBanner>
     )
     const results = await axe(container)

cypress/e2e/PageObjects/dashboardPO.cy.js

@@ -141,7 +141,7 @@ function LearnMoreABtBetaLink() {
 }
 
 function ExitBetaButton() {
-  return cy.get("[data-cy ='topBanner']>button")
+  return cy.get("[data-cy ='topBanner']>a>button")
 }
 
 function FirstTaskLink() {

graphql/mappers/beta-banner-opt-out.js

@@ -0,0 +1,30 @@
+import clientQuery from '../client'
+
+export async function getBetaBannerContent() {
+  const queryOptOut = require('../queries/beta-banner-opt-out.graphql')
+  const resOptOut = await clientQuery(queryOptOut)
+
+  const resOptOutContent = resOptOut.data.schContentv1ByPath.item || {}
+
+  const mappedBanner = {
+    en: {
+      bannerBoldText: resOptOutContent.scContentEn.json[0].content[0].value,
+      bannerText: resOptOutContent.scContentEn.json[0].content[1].value,
+      bannerLink: resOptOutContent.scFragments[0].scLinkTextEn,
+      bannerLinkHref: resOptOutContent.scFragments[0].scDestinationURLEn,
+      bannerButtonText: resOptOutContent.scFragments[1].scLinkTextEn,
+      bannerButtonLink: resOptOutContent.scFragments[1].scDestinationURLFr,
+      icon: resOptOutContent.scFragments[0].scIconCSS,
+    },
+    fr: {
+      bannerBoldText: resOptOutContent.scContentFr.json[0].content[0].value,
+      bannerText: resOptOutContent.scContentFr.json[0].content[1].value,
+      bannerLink: resOptOutContent.scFragments[0].scLinkTextFr,
+      bannerLinkHref: resOptOutContent.scFragments[0].scDestinationURLFr,
+      bannerButtonText: resOptOutContent.scFragments[1].scLinkTextFr,
+      bannerButtonLink: resOptOutContent.scFragments[1].scDestinationURLFr,
+      icon: resOptOutContent.scFragments[0].scIconCSS,
+    },
+  }
+  return mappedBanner
+}

graphql/queries/beta-banner-opt-out.graphql

@@ -0,0 +1,28 @@
+{
+  schContentv1ByPath(
+    _path: "/content/dam/decd-endc/content-fragments/sch/content/beta-banner-opt-out"
+  ) {
+    item {
+      _path
+      scId
+      scContentEn {
+        json
+      }
+      scContentFr {
+        json
+      }
+      scFragments {
+        ... on SCHTaskv1Model {
+          scId
+          scDestinationURLEn
+          scDestinationURLFr
+          scIconCSS
+          scLinkTextEn
+          scLinkTextFr
+          scLinkTextAssistiveEn
+          scLinkTextAssistiveFr
+        }
+      }
+    }
+  }
+}

locales/en.js

@@ -10,12 +10,6 @@ export default {
   //
   // Header
   title: 'home',
-  // Banner
-  bannerBoldText: 'Beta version:',
-  bannerText: 'You are now using the My Service Canada Account beta version.',
-  bannerLink: 'Learn more about the beta version',
-  bannerLinkHref: '#',
-  bannerButtonText: 'Exit beta version',
   //
   //Heading
   pageHeading: {

locales/fr.js

@@ -10,13 +10,6 @@ export default {
   //
   // Header
   title: 'accueil',
-  // Banner
-  bannerBoldText: 'Version bêta:',
-  bannerText:
-    'Vous utilisez maintenant la version bêta de Mon Dossier Service Canada.',
-  bannerLink: 'En savoir plus sur la version bêta',
-  bannerLinkHref: '#',
-  bannerButtonText: 'Quitter la version bêta',
   //Heading
   pageHeading: {
     title: 'Mon tableau de bord',

pages/404.js

@@ -72,6 +72,6 @@ export async function getStaticProps({ locale }) {
   }
 
   return {
-    props: { locale, meta },
+    props: { locale, meta, hideBanner: true },
   }
 }

pages/_app.js

@@ -1,23 +1,23 @@
 import '../styles/globals.css'
 import Layout from '../components/Layout'
 
-function MyApp({ Component, pageProps }) {
+export default function MyApp({ Component, pageProps }) {
   /* istanbul ignore next */
   if (Component.getLayout) {
     return Component.getLayout(<Component {...pageProps} />)
   }
-
+  const display = { hideBanner: pageProps.hideBanner }
   /* istanbul ignore next */
   return (
     <Layout
       locale={pageProps.locale}
       meta={pageProps.meta}
       langToggleLink={pageProps.langToggleLink}
       breadCrumbItems={pageProps.breadCrumbItems}
+      bannerContent={pageProps.bannerContent}
+      display={display}
     >
       <Component {...pageProps} />
     </Layout>
   )
 }
-
-export default MyApp

pages/index.js

@@ -83,8 +83,6 @@ Index.getLayout = function PageLayout(page) {
 }
 
 export async function getStaticProps({ locale }) {
-  // const content = await fetchContent()
-
   /* Place-holder Meta Data Props */
   const meta = {
     data_en: {

pages/my-dashboard.js

@@ -4,6 +4,7 @@ import en from '../locales/en'
 import fr from '../locales/fr'
 import Card from '../components/Card'
 import { getMyDashboardContent } from '../graphql/mappers/my-dashboard'
+import { getBetaBannerContent } from '../graphql/mappers/beta-banner-opt-out'
 import logger from '../lib/logger'
 import BenefitTasks from './../components/BenefitTasks'
 import MostReqTasks from './../components/MostReqTasks'
@@ -93,6 +94,11 @@ export async function getServerSideProps({ res, locale }) {
     res.statusCode = 500
     throw error
   })
+  const bannerContent = await getBetaBannerContent().catch((error) => {
+    logger.error(error)
+    // res.statusCode = 500
+    throw error
+  })
 
   /* istanbul ignore next */
   const langToggleLink = locale === 'en' ? '/fr/my-dashboard' : '/my-dashboard'
@@ -119,6 +125,7 @@ export async function getServerSideProps({ res, locale }) {
       langToggleLink,
       content: locale === 'en' ? content.en : content.fr,
       meta,
+      bannerContent: locale === 'en' ? bannerContent.en : bannerContent.fr,
     },
   }
 }

pages/profile.js

@@ -5,6 +5,7 @@ import en from '../locales/en'
 import fr from '../locales/fr'
 import Card from '../components/Card'
 import { getProfileContent } from '../graphql/mappers/profile'
+import { getBetaBannerContent } from '../graphql/mappers/beta-banner-opt-out'
 import logger from '../lib/logger'
 import ProfileTasks from './../components/ProfileTasks'
 import Modal from 'react-modal'
@@ -89,6 +90,11 @@ export async function getStaticProps({ res, locale }) {
     //res.statusCode = 500
     throw error
   })
+  const bannerContent = await getBetaBannerContent().catch((error) => {
+    logger.error(error)
+    // res.statusCode = 500
+    throw error
+  })
 
   /* istanbul ignore next */
   const langToggleLink = locale === 'en' ? '/fr/profile' : '/profile'
@@ -125,6 +131,7 @@ export async function getStaticProps({ res, locale }) {
       content: locale === 'en' ? content.en : content.fr,
       meta,
       breadCrumbItems,
+      bannerContent: locale === 'en' ? bannerContent.en : bannerContent.fr,
     },
   }
 }