From 706698549087c8160995b1a7b8d5817afd399c17 Mon Sep 17 00:00:00 2001 From: Jordan Willis <31868510+will0684@users.noreply.github.com> Date: Wed, 10 Jul 2024 13:56:09 -0400 Subject: [PATCH] Benefits Finder project page (#1067) * create Benefits Finder page, article page, rewrites * create BF project page and articles queries * create simple unit and integration test and mockdata * add default top margin to h3 in FragmentRender * add ContextualAlert to BF page * change homepage card order * update BN mock data * place ContextualAlert beneath heading * update h3 to h2 to fix a11y heading order --- __mocks__/benefits-finder.mockdata.js | 807 ++++++++++++++++++ __mocks__/mockStore.js | 353 +++++--- __tests__/pages/benefits-finder.test.js | 21 + components/molecules/ContextualAlert.js | 8 +- .../text_node_renderer/nodes/Header.jsx | 2 +- cypress/e2e/benefits-finder.cy.js | 16 + cypress/e2e/benefits-navigator.cy.js | 2 +- .../benefitsFinderArticlesQuery.graphql | 342 ++++++++ graphql/queries/benefitsFinderQuery.graphql | 519 +++++++++++ .../queries/benefitsNavigatorQuery.graphql | 19 +- next.config.js | 8 + pages/home.js | 5 +- pages/projects/benefits-finder/[id].js | 135 +++ pages/projects/benefits-finder/index.js | 388 +++++++++ pages/projects/benefits-navigator/index.js | 208 +++-- 15 files changed, 2577 insertions(+), 256 deletions(-) create mode 100644 __mocks__/benefits-finder.mockdata.js create mode 100644 __tests__/pages/benefits-finder.test.js create mode 100644 cypress/e2e/benefits-finder.cy.js create mode 100644 graphql/queries/benefitsFinderArticlesQuery.graphql create mode 100644 graphql/queries/benefitsFinderQuery.graphql create mode 100644 pages/projects/benefits-finder/[id].js create mode 100644 pages/projects/benefits-finder/index.js diff --git a/__mocks__/benefits-finder.mockdata.js b/__mocks__/benefits-finder.mockdata.js new file mode 100644 index 0000000000..769aa65cbe --- /dev/null +++ b/__mocks__/benefits-finder.mockdata.js @@ -0,0 +1,807 @@ +export const benefitsFinderMock = { + data: { + sclabsPageV1ByPath: { + item: { + scId: "PAGE-BENEFITS-FINDER", + scPageNameEn: "/en/projects/benefits-finder", + scPageNameFr: "/fr/projets/chercheur-prestations", + scTitleEn: "Benefits Finder", + scTitleFr: "Chercheur de prestations", + scShortTitleEn: null, + scShortTitleFr: null, + scLabProjectStage: ["gc:custom/decd-endc/project-stage/beta"], + scLabProjectSummaryEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "We're improving the Benefits Finder to make it easier for you to get the most accurate results when searching for benefits.", + }, + ], + }, + ], + }, + scLabProjectSummaryFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Nous améliorons le chercheur de prestations pour vous permettre d'obtenir plus facilement les meilleurs résultats lorsque vous recherchez des prestations.", + }, + ], + }, + ], + }, + scDescriptionEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "We're improving the Benefits Finder to make it easier for you to get the most accurate results when searching for benefits.", + }, + ], + }, + ], + }, + scDescriptionFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Nous améliorons le chercheur de prestations pour vous permettre d'obtenir plus facilement les meilleurs résultats lorsque vous recherchez des prestations.", + }, + ], + }, + ], + }, + scLabProjectUpdates: [], + scBreadcrumbParentPages: [ + { + scTitleEn: "Service Canada Labs", + scTitleFr: "Laboratoires de Service Canada", + scPageNameEn: "/en/home", + scPageNameFr: "/fr/accueil", + }, + ], + scSubject: ["gc:subjects/ec-economics-and-industry/benefits"], + scKeywordsEn: null, + scKeywordsFr: null, + scContentType: null, + scOwner: ["gc:institutions/service-canada"], + scDateModifiedOverwrite: "2024-07-04", + scAudience: null, + scRegion: null, + scSocialMediaImageEn: { + _path: + "/content/dam/decd-endc/images/sclabs/benefits-finder/benefits-finder-laptop.jpg", + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/benefits-finder/benefits-finder-laptop.jpg", + width: 900, + height: 600, + }, + scSocialMediaImageFr: { + _path: + "/content/dam/decd-endc/images/sclabs/benefits-finder/benefits-finder-laptop.jpg", + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/benefits-finder/benefits-finder-laptop.jpg", + width: 900, + height: 600, + }, + scSocialMediaImageAltTextEn: + "Laptop with magnifying glass to enlarge a photo and dollar signs.", + scSocialMediaImageAltTextFr: + "Ordinateur portable avec une loupe grossissant une photo et des signes de dollar.", + scNoIndex: false, + scNoFollow: false, + scFragments: [ + { + _model: { + title: "SCLabs-Content-v1", + }, + _path: + "/content/dam/decd-endc/content-fragments/sclabs/components/content/projects/benefits-finder/intro", + scId: "CONTENT-BF-INTRO", + scContentEn: { + json: [ + { + nodeType: "header", + style: "h1", + content: [ + { + nodeType: "text", + value: "Benefits Finder", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "The Benefits Finder helps you find government support for living expenses and major life events.", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "2023-10", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "Beta", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "We’re improving the Benefits Finder to make it easier for you to get the most accurate results when searching for benefits.", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Try the beta version of the new Benefits Finder and let us know what you think!", + format: { + variants: ["strong"], + }, + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "header", + style: "h1", + content: [ + { + nodeType: "text", + value: "Chercheur de prestations", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Le chercheur de prestations vous aide à trouver un soutien gouvernemental pour les frais de subsistance et les événements majeurs de la vie.", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "2023-10", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "Bêta", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Nous améliorons le chercheur de prestations pour vous permettre d'obtenir plus facilement les meilleurs résultats lorsque vous recherchez des prestations.", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Essayez la version bêta du nouveau chercheur de prestations et faites-nous part de vos commentaires!", + format: { + variants: ["strong"], + }, + }, + ], + }, + ], + }, + scFragments: [], + }, + { + _model: { + title: "Tooltip-v1", + }, + _path: + "/content/dam/decd-endc/content-fragments/sclabs/components/tooltips/information-beta", + scId: "INFORMATION-BETA-SCLABS", + scTitleEn: "Information", + scTitleFr: "Information", + scContentEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "Beta: ", + format: { + variants: ["strong"], + }, + }, + { + nodeType: "text", + value: + "Continuing to improve a usable tool or service while collecting feedback.", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "Bêta : ", + format: { + variants: ["strong"], + }, + }, + { + nodeType: "text", + value: + "Continuer d’améliorer un outil ou un service fonctionnel et obtenir de la rétroaction.", + }, + ], + }, + ], + }, + }, + { + _model: { + title: "SCLabs-Image-v1", + }, + scId: "IMAGE-BF-OVERVIEW", + scImageEn: { + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/benefits-finder/benefits-finder-laptop.jpg", + width: 900, + height: 600, + }, + scImageFr: { + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/benefits-finder/benefits-finder-laptop.jpg", + width: 900, + height: 600, + }, + scImageMobileEn: null, + scImageMobileFr: null, + scImageAltTextEn: + "Laptop with magnifying glass to enlarge a photo and dollar signs.", + scImageAltTextFr: + "Ordinateur portable avec une loupe grossissant une photo et des signes de dollar.", + scImageCaptionEn: { + json: null, + }, + scImageCaptionFr: { + json: null, + }, + }, + { + _model: { + title: "SCLabs-Button-v1", + }, + scId: "BUTTON-BF-GET-STARTED", + scTitleEn: "Get started", + scTitleFr: "Commencer", + scDestinationURLEn: + "https://www.canada.ca/en/services/benefits/finder/tool.html", + scDestinationURLFr: + "https://www.canada.ca/fr/services/prestations/chercheur/outil.html", + scButtonType: ["gc:custom/decd-endc/button-type/primary"], + }, + { + _model: { + title: "SCLabs-Content-v1", + }, + _path: + "/content/dam/decd-endc/content-fragments/sclabs/components/content/projects/benefits-finder/about", + scId: "CONTENT-BF-ABOUT", + scContentEn: { + json: [ + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "About the Benefits Finder", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "The Benefits Finder helps you discover benefits and services that you might qualify for from Canadian, provincial and territorial governments.", + }, + ], + }, + { + nodeType: "header", + style: "h3", + content: [ + { + nodeType: "text", + value: "How we’re improving the way people find benefits", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Over the years, many things have changed, including what Canadians need and expect from Canada.ca. While the Benefits Finder has undergone some updates, it's mostly stayed the same.", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "Our research revealed that:", + }, + ], + }, + { + nodeType: "unordered-list", + content: [ + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: "people often seek specific benefits ", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "people search for benefits related to life events ", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "people desire the ability to refine or edit responses without restarting ", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "provincial and territorial websites offer more current information on benefits and services ", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "people were puzzled by provincial and territorial benefits on a Government of Canada website ", + }, + ], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Based on our research findings, we’re building a new Benefits Finder that is updated, easy to use, and has a modern look and feel.", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "Key features include:", + }, + ], + }, + { + nodeType: "unordered-list", + content: [ + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: "benefit search functionality", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "refined results using filters like life events and topics", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: "summaries of the benefits", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: "exclusively federal benefits", + }, + ], + }, + ], + }, + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "Help design the new Benefits Finder", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "We’re working to make it easier to search for government benefits. To create a tool that meets your needs, we need your input.", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "We've already gathered feedback from Canadians on the current Benefits Finder. We're now looking for what you think of the new Benefits Finder.", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "À propos du chercheur de prestations", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Le chercheur de prestations vous aide à découvrir les prestations et les services auxquels vous pourriez avoir droit de la part des gouvernements canadien, provinciaux et territoriaux.", + }, + ], + }, + { + nodeType: "header", + style: "h3", + content: [ + { + nodeType: "text", + value: + "Comment nous améliorons la façon dont les gens trouvent des prestations", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Au fil des ans, plusieurs choses ont changé, y compris ce dont les Canadiens ont besoin et ce qu'ils attendent de Canada.ca. Bien qu’il ait subi quelques mises à jour, le chercheur de prestations est essentiellement resté le même.", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "Nos recherches ont révélé que :", + }, + ], + }, + { + nodeType: "unordered-list", + content: [ + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "les gens recherchent souvent des prestations précises;", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "les gens recherchent des prestations liées aux événements de la vie;", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "les gens souhaitent avoir la possibilité d'affiner ou de modifier leurs réponses sans avoir à redémarrer ;", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "les sites Web des provinces et des territoires offrent des renseignements plus récents sur les prestations et les services;", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "les gens sont perplexes de voir des prestations provinciales et territoriales sur un site Web du gouvernement du Canada..", + }, + ], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "En nous appuyant sur les résultats de nos recherches, nous concevons un nouveau chercheur de prestations à jour, facile à utiliser, et à l’aspect moderne.", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Les principales caractéristiques sont les suivantes :", + }, + ], + }, + { + nodeType: "unordered-list", + content: [ + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "la fonctionnalité de recherche de prestations;", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "des résultats affinés à l'aide de filtres tels que les événements de la vie et les thèmes;", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: "un résumé de chaque prestation;", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: "des prestations exclusivement fédérales.", + }, + ], + }, + ], + }, + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: + "Contribuez à la conception du nouveau chercheur de prestations", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Nous nous efforçons de faciliter la recherche de prestations gouvernementales. Pour créer un outil qui répond à vos besoins, il nous faut votre avis.", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Nous avons déjà recueilli les commentaires des Canadiens sur le chercheur de prestations actuel. Nous souhaitons maintenant savoir ce que vous pensez du nouvel outil.", + }, + ], + }, + ], + }, + scFragments: [], + }, + { + _model: { + title: "SCLabs-Button-v1", + }, + scId: "BUTTON-BF-TAKE-SURVEY", + scTitleEn: "Take survey", + scTitleFr: "Participer au sondage", + scDestinationURLEn: + "https://forms-formulaires.alpha.canada.ca/en/id/clwzf86mr03i2x8831c5r9zk6", + scDestinationURLFr: + "https://forms-formulaires.alpha.canada.ca/fr/id/clwzf86mr03i2x8831c5r9zk6", + scButtonType: ["gc:custom/decd-endc/button-type/secondary"], + }, + { + _model: { + title: "SCLabs-Content-v1", + }, + _path: + "/content/dam/decd-endc/content-fragments/sclabs/components/content/projects/benefits-finder/survey", + scId: "CONTENT-BF-SURVEY", + scContentEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "This survey is to give your feedback on the new Benefits Finder. If you need help with your government benefits, contact 1 800-O-Canada.", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Ce sondage a pour but de recueillir vos commentaires sur le nouveau chercheur de prestations. Si vous avez besoin d'aide concernant vos prestations gouvernementales, composez le 1 800-O-Canada.", + }, + ], + }, + ], + }, + scFragments: [], + }, + ], + }, + }, + }, +}; diff --git a/__mocks__/mockStore.js b/__mocks__/mockStore.js index 67e69eb72e..eedbefbbde 100644 --- a/__mocks__/mockStore.js +++ b/__mocks__/mockStore.js @@ -4986,7 +4986,7 @@ export const benefitsNavigatorData = { { nodeType: "text", value: - "Whether for yourself or someone else, this tool will make it easier for you to stay up to date and navigate government benefits.", + "This project is closed. Whether for yourself or someone else, this tool will make it easier for you to stay up to date and navigate government benefits.", }, ], }, @@ -5000,7 +5000,7 @@ export const benefitsNavigatorData = { { nodeType: "text", value: - "Que ce soit pour vous ou pour quelqu'un d'autre, cet outil vous permettra de rester informé et d'explorer plus facilement les prestations gouvernementales.", + "Ce projet est terminé. Que ce soit pour vous ou pour quelqu'un d'autre, cet outil vous permettra de rester informé et d'explorer plus facilement les prestations gouvernementales.", }, ], }, @@ -5062,6 +5062,162 @@ export const benefitsNavigatorData = { scNoFollow: false, scFragments: [], }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/pages/projects/benefits-navigator/updates/staying-informed-government-benefits-services", + scId: "PAGE-BN-STAYING-INFORMED-GOVERNMENT-BENEFITS-SERVICES", + scPageNameEn: + "/en/projects/benefits-navigator/staying-informed-government-benefits-services", + scPageNameFr: + "/fr/projets/navigateur-prestations/rester-informe-prestations-services-gouvernementaux", + scTitleEn: "Staying informed on government benefits and services", + scTitleFr: + "Rester informé sur les prestations et services gouvernementaux", + scShortTitleEn: null, + scShortTitleFr: null, + scBreadcrumbParentPages: [ + { + scTitleEn: "Service Canada Labs", + scTitleFr: "Laboratoires de Service Canada", + scPageNameEn: "/en/home", + scPageNameFr: "/fr/accueil", + }, + ], + scSubject: [ + "gc:subjects/gv-government-and-politics/government-services", + ], + scKeywordsEn: null, + scKeywordsFr: null, + scContentType: [ + "gc:content-types/promotional-material-featured-articles", + ], + scOwner: ["gc:institutions/service-canada"], + scDateModifiedOverwrite: "2024-06-21", + scAudience: null, + scRegion: null, + scSocialMediaImageEn: { + _path: + "/content/dam/decd-endc/images/sclabs/benefits-navigator/benefits-newsfeed.jpg", + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/benefits-navigator/benefits-newsfeed.jpg", + width: 900, + height: 600, + }, + scSocialMediaImageFr: { + _path: + "/content/dam/decd-endc/images/sclabs/benefits-navigator/benefits-newsfeed.jpg", + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/benefits-navigator/benefits-newsfeed.jpg", + width: 900, + height: 600, + }, + scSocialMediaImageAltTextEn: "People adding content to a web page", + scSocialMediaImageAltTextFr: + "Personnes qui ajoutent du contenu à une page Web", + scNoIndex: false, + scNoFollow: false, + scFragments: [ + { + scId: "IMAGE-BN-STAYING-INFORMED-NEWSFEED", + scImageEn: { + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/client-hub/bn-article-newsfeed-screen-en.jpg", + width: 1912, + height: 1249, + }, + scImageFr: { + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/client-hub/bn-article-newsfeed-screen-fr.jpg", + width: 1912, + height: 1322, + }, + scImageMobileEn: null, + scImageMobileFr: null, + scImageAltTextEn: "Benefits newsfeed", + scImageAltTextFr: "Fil d'actualité pour les prestations", + scImageCaptionEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "Image of the Benefits newsfeed", + }, + ], + }, + ], + }, + scImageCaptionFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Image du fil d'actualité pour les prestations", + }, + ], + }, + ], + }, + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/components/content/projects/benefits-navigator/updates/staying-informed-next", + scId: "CONTENT-BN-STAYING-INFORMED-NEXT", + scContentEn: { + json: [ + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "Next Steps", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "The Benefits newsfeed is just one idea to help people learn about government benefits. Other ideas that are being explored include improving the Canada Benefits Finder and exploring if artificial intelligence can provide personalized information about government benefits. You may see some of these ideas here on Service Canada Labs. Stay tuned!", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "Prochaines étapes", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Le fil d'actualité pour les prestations n'est qu'une idée parmi d'autres pour aider les gens à s'informer sur les prestations gouvernementales. D'autres idées sont à l'étude, comme l'amélioration du Chercheur de prestations du Canada et l'utilisation de l'intelligence artificielle pour fournir des informations personnalisées sur les prestations du gouvernement. Vous verrez peut-être certaines de ces idées ici, sur le site des laboratoires de Service Canada. Restez à l'écoute!", + }, + ], + }, + ], + }, + }, + ], + }, ], scBreadcrumbParentPages: [ { @@ -5079,7 +5235,7 @@ export const benefitsNavigatorData = { scKeywordsFr: null, scContentType: null, scOwner: null, - scDateModifiedOverwrite: "2023-07-04", + scDateModifiedOverwrite: "2024-07-11", scAudience: null, scRegion: null, scSocialMediaImageEn: { @@ -5105,6 +5261,64 @@ export const benefitsNavigatorData = { scNoIndex: false, scNoFollow: false, scFragments: [ + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/components/alerts/projects/benefits-navigator/project-closed", + scId: "ALERT-BN-PROJECT-CLOSED", + scTitleEn: "This project is closed", + scTitleFr: "Ce projet est terminé", + scContentEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "We're no longer collecting feedback. What we learned from this project will be used to improve the Canada ", + }, + { + nodeType: "link", + data: { + href: "/en/projects/benefits-finder", + }, + value: "Benefits Finder", + }, + { + nodeType: "text", + value: ".", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Nous ne recueillons plus de commentaires. Ce que nous avons appris dans le cadre de ce projet sera utilisé pour améliorer le ", + }, + { + nodeType: "link", + data: { + href: "/fr/projets/chercheur-prestations", + }, + value: "Chercheur de prestations", + }, + { + nodeType: "text", + value: " du Canada.", + }, + ], + }, + ], + }, + scAlertType: ["gc:custom/decd-endc/alert-type/warning"], + }, { scId: "OVERVIEW-IMAGE", scImageEn: { @@ -7322,139 +7536,6 @@ export const benefitsNavigatorData = { }, ], }, - { - _path: - "/content/dam/decd-endc/content-fragments/sclabs/components/content/projects/benefits-navigator/help-design", - scId: "BENEFITS-NAVIGATOR-HELP-DESIGN", - scContentEn: { - json: [ - { - nodeType: "header", - style: "h2", - content: [ - { - nodeType: "text", - value: "Help design the Benefits Navigator", - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "We’re working to make it easier to understand and apply for government benefits. To create a tool that meets your needs, we need your input.", - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "Do you find these features helpful? Would you like to see other ones? Email us at ", - }, - { - nodeType: "link", - data: { - href: "mailto:experience@servicecanada.gc.ca", - }, - value: "experience@servicecanada.gc.ca", - }, - { - nodeType: "text", - value: ".", - }, - { - nodeType: "line-break", - content: [], - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "This email address is to give your feedback on the Benefits Navigator. If you need help with your government benefits, contact 1-800-O-Canada. You will not receive a response if your e-mail is about your benefits.", - }, - { - nodeType: "line-break", - content: [], - }, - ], - }, - ], - }, - scContentFr: { - json: [ - { - nodeType: "header", - style: "h2", - content: [ - { - nodeType: "text", - value: - "Contribuez à la conception du Navigateur de prestations", - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "Nous nous efforçons de rendre les prestations gouvernementales plus faciles à comprendre et à demander. Pour créer un outil qui réponde à vos besoins, nous avons besoin de votre contribution.", - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "Trouvez-vous les fonctionnalités du navigateur utiles? Y a-t-il autre chose que vous aimeriez voir? Faites-nous part de vos commentaires en nous envoyant un courriel à ", - }, - { - nodeType: "link", - data: { - href: "mailto:experience@servicecanada.gc.ca", - }, - value: "experience@servicecanada.gc.ca", - }, - { - nodeType: "text", - value: ".", - }, - { - nodeType: "line-break", - content: [], - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "Cette adresse de courriel vous permet de donner votre avis sur le Navigateur de prestations. Si vous avez besoin d'aide concernant vos prestations gouvernementales, contactez le 1-800-O-Canada. Vous ne recevrez pas de réponse si votre courriel concerne vos prestations.", - }, - { - nodeType: "line-break", - content: [], - }, - ], - }, - ], - }, - scFragments: [], - }, ], }, }, diff --git a/__tests__/pages/benefits-finder.test.js b/__tests__/pages/benefits-finder.test.js new file mode 100644 index 0000000000..2d199bf97c --- /dev/null +++ b/__tests__/pages/benefits-finder.test.js @@ -0,0 +1,21 @@ +import { render } from "@testing-library/react"; +import BenefitsFinderOverview from "../../pages/projects/benefits-finder/index"; +import { + dictionaryData, + experimentsData, + benefitsNavigatorUpdatesData, +} from "../../__mocks__/mockStore"; +import { benefitsFinderMock } from "../../__mocks__/benefits-finder.mockdata.js"; + +describe("Benefits Finder", () => { + it("renders without crashing", () => { + render( + + ); + }); +}); diff --git a/components/molecules/ContextualAlert.js b/components/molecules/ContextualAlert.js index 7552cb757a..593291ef8a 100644 --- a/components/molecules/ContextualAlert.js +++ b/components/molecules/ContextualAlert.js @@ -50,12 +50,14 @@ export function ContextualAlert(props) { className={`overflow-auto border-l-6 ${alert_color} pl-[24px] py-[17px] leading-8`} > {asHtml ? ( -

) : ( -

{message_heading}

+

+ {message_heading} +

)} {asHtml ? (
{props.children} ); case "h3": - return

{props.children}

; + return

{props.children}

; case "h4": return

{props.children}

; case "h5": diff --git a/cypress/e2e/benefits-finder.cy.js b/cypress/e2e/benefits-finder.cy.js new file mode 100644 index 0000000000..cb67c09bfb --- /dev/null +++ b/cypress/e2e/benefits-finder.cy.js @@ -0,0 +1,16 @@ +describe("Home Page", () => { + beforeEach(() => { + cy.visit("/en/projects/benefits-finder"); + cy.injectAxe(); + }); + + it("has no a11y violations", () => { + cy.checkA11y(); + }); + + it("loads page",()=>{ + cy.url().should('equal',Cypress.config().baseUrl+'/en/projects/benefits-finder') + cy.get('button.info').click() + cy.get('h2.modal-title').should('have.text','Beta') + }) +}); diff --git a/cypress/e2e/benefits-navigator.cy.js b/cypress/e2e/benefits-navigator.cy.js index 3c0ed266cc..a0088db945 100644 --- a/cypress/e2e/benefits-navigator.cy.js +++ b/cypress/e2e/benefits-navigator.cy.js @@ -14,7 +14,7 @@ describe("Home Page", () => { cy.get('h2.modal-title').should('have.text','Alpha') }) - it("navigates to a project page", () => { + it("navigates to an article page", () => { cy.get("a[href*=difficulties-community]").click(); cy.url().should( "equal", diff --git a/graphql/queries/benefitsFinderArticlesQuery.graphql b/graphql/queries/benefitsFinderArticlesQuery.graphql new file mode 100644 index 0000000000..486b36f1ac --- /dev/null +++ b/graphql/queries/benefitsFinderArticlesQuery.graphql @@ -0,0 +1,342 @@ +query getBenefitsFinderArticles { + sclabsPageV1List( + filter: { + scContentType: { + _expressions: [ + { + value: "gc:content-types/promotional-material-featured-articles" + _operator: EQUALS + } + ] + } + _path: { + _expressions: [ + { + value: "/content/dam/decd-endc/content-fragments/sclabs/pages/projects/benefits-finder/updates/" + _operator: STARTS_WITH + } + ] + } + } + ) { + items { + _path + scId + scPageNameEn + scPageNameFr + scTitleEn + scTitleFr + scShortTitleEn + scShortTitleFr + scBreadcrumbParentPages { + ... on SclabsPageV1Model { + scTitleEn + scTitleFr + scPageNameEn + scPageNameFr + } + } + scSubject + scKeywordsEn + scKeywordsFr + scContentType + scOwner + scDateModifiedOverwrite + scAudience + scRegion + scSocialMediaImageEn { + ... on ImageRef { + _path + _publishUrl + width + height + } + ... on DocumentRef { + _path + _publishUrl + } + } + scSocialMediaImageFr { + ... on ImageRef { + _path + _publishUrl + width + height + } + ... on DocumentRef { + _path + _publishUrl + } + } + scSocialMediaImageAltTextEn + scSocialMediaImageAltTextFr + scNoIndex + scNoFollow + scFragments { + ... on SclabsCompContentV1Model { + _model { + ... on ModelInfo { + title + } + } + scId + scLabContent { + ... on SclabsContentV1Model { + scContentEn { + json + } + scContentFr { + json + } + } + } + scLabLayout + } + ... 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 { + json + } + scContentFr { + json + } + } + ... on SclabsImageV1Model { + _model { + ... on ModelInfo { + title + } + } + _path + 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 + } + scLongDescHeadingEn + scLongDescHeadingFr + scLongDescEn { + json + } + scLongDescFr { + json + } + } + ... on SclabsButtonV1Model { + _model { + ... on ModelInfo { + title + } + } + scId + scTitleEn + scTitleFr + scDestinationURLEn + scDestinationURLFr + scButtonType + } + ... on SclabsFeatureV1Model { + _model { + ... on ModelInfo { + title + } + } + scId + scTitleEn + scTitleFr + scContentEn { + json + } + scContentFr { + json + } + scImageEn { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scImageAltTextEn + scImageFr { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scImageAltTextFr + scFragments { + ... on SclabsAlertV1Model { + _path + scId + scTitleEn + scTitleFr + scContentEn { + json + } + scContentFr { + json + } + scAlertType + } + } + scImageAltTextEn + scImageAltTextFr + scLabsButton { + scId + scTitleEn + scTitleFr + scDestinationURLEn + scDestinationURLFr + scButtonType + } + } + ... on TooltipV1Model { + _model { + ... on ModelInfo { + title + } + } + _path + scId + scTitleEn + scTitleFr + scContentEn { + json + } + scContentFr { + json + } + } + } + } + } +} diff --git a/graphql/queries/benefitsFinderQuery.graphql b/graphql/queries/benefitsFinderQuery.graphql new file mode 100644 index 0000000000..062a8926e7 --- /dev/null +++ b/graphql/queries/benefitsFinderQuery.graphql @@ -0,0 +1,519 @@ +query getBenefitsFinderPage { + sclabsPageV1ByPath( + _path: "/content/dam/decd-endc/content-fragments/sclabs/pages/projects/benefits-finder/benefits-finder" + ) { + item { + scId + scPageNameEn + scPageNameFr + scTitleEn + scTitleFr + scShortTitleEn + scShortTitleFr + scLabProjectStage + scLabProjectSummaryEn { + json + } + scLabProjectSummaryFr { + json + } + scDescriptionEn { + json + } + scDescriptionFr { + json + } + scLabProjectUpdates { + ... on SclabsPageV1Model { + _path + scId + scPageNameEn + scPageNameFr + scTitleEn + scTitleFr + scShortTitleEn + scShortTitleFr + scBreadcrumbParentPages { + ... on SclabsPageV1Model { + scTitleEn + scTitleFr + scPageNameEn + scPageNameFr + } + } + scSubject + scKeywordsEn + scKeywordsFr + scContentType + scOwner + scDateModifiedOverwrite + scAudience + scRegion + scSocialMediaImageEn { + ... on ImageRef { + _path + _publishUrl + width + height + } + ... on DocumentRef { + _path + _publishUrl + } + } + scSocialMediaImageFr { + ... on ImageRef { + _path + _publishUrl + width + height + } + ... on DocumentRef { + _path + _publishUrl + } + } + scSocialMediaImageAltTextEn + scSocialMediaImageAltTextFr + scNoIndex + scNoFollow + scFragments { + ... on SclabsContentV1Model { + _path + scId + scContentEn { + json + } + scContentFr { + json + } + } + ... 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 + } + } + ... on SclabsButtonV1Model { + scId + scTitleEn + scTitleFr + scDestinationURLEn + scDestinationURLFr + scButtonType + } + ... on SclabsFeatureV1Model { + scId + scTitleEn + scTitleFr + scContentEn { + json + } + scContentFr { + json + } + scImageEn { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scImageFr { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scFragments { + ... on SclabsAlertV1Model { + _path + scId + scTitleEn + scTitleFr + scContentEn { + json + } + scContentFr { + json + } + scAlertType + } + } + scImageAltTextEn + scImageAltTextFr + scLabsButton { + scId + scTitleEn + scTitleFr + scDestinationURLEn + scDestinationURLFr + scButtonType + } + } + ... on TooltipV1Model { + _path + scId + scTitleEn + scTitleFr + scContentEn { + json + } + scContentFr { + json + } + } + } + } + } + scBreadcrumbParentPages { + ... on SclabsPageV1Model { + scTitleEn + scTitleFr + scPageNameEn + scPageNameFr + } + } + scSubject + scKeywordsEn + scKeywordsFr + scContentType + scOwner + scDateModifiedOverwrite + scAudience + scRegion + scSocialMediaImageEn { + ... on ImageRef { + _path + _publishUrl + width + height + } + ... on DocumentRef { + _path + _publishUrl + } + } + scSocialMediaImageFr { + ... on ImageRef { + _path + _publishUrl + width + height + } + ... on DocumentRef { + _path + _publishUrl + } + } + scSocialMediaImageAltTextEn + scSocialMediaImageAltTextFr + scNoIndex + scNoFollow + scFragments { + ... on SclabsContentV1Model { + _model { + ... on ModelInfo { + title + } + } + _path + scId + scContentEn { + json + } + scContentFr { + json + } + scFragments { + ... on SclabsContentV1Model { + _model { + ... on ModelInfo { + title + } + } + _path + scId + scContentEn { + json + } + scContentFr { + json + } + scFragments { + ... on SclabsImageV1Model { + _model { + ... on ModelInfo { + title + } + } + 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 + } + scLongDescHeadingEn + scLongDescHeadingFr + scLongDescEn { + json + } + scLongDescFr { + json + } + } + } + } + } + } + ... on SclabsImageV1Model { + _model { + ... on ModelInfo { + title + } + } + 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 + } + } + ... on SclabsButtonV1Model { + _model { + ... on ModelInfo { + title + } + } + scId + scTitleEn + scTitleFr + scDestinationURLEn + scDestinationURLFr + scButtonType + } + ... on SclabsFeatureV1Model { + _model { + ... on ModelInfo { + title + } + } + scId + scTitleEn + scTitleFr + scContentEn { + json + } + scContentFr { + json + } + scImageEn { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scImageFr { + ... on ImageRef { + _publishUrl + width + height + } + ... on DocumentRef { + _publishUrl + } + } + scFragments { + ... on SclabsAlertV1Model { + _model { + ... on ModelInfo { + title + } + } + _path + scId + scTitleEn + scTitleFr + scContentEn { + json + } + scContentFr { + json + } + scAlertType + } + } + scImageAltTextEn + scImageAltTextFr + scLabsButton { + scId + scTitleEn + scTitleFr + scDestinationURLEn + scDestinationURLFr + scButtonType + } + } + ... on TooltipV1Model { + _model { + ... on ModelInfo { + title + } + } + _path + scId + scTitleEn + scTitleFr + scContentEn { + json + } + scContentFr { + json + } + } + } + } + } +} diff --git a/graphql/queries/benefitsNavigatorQuery.graphql b/graphql/queries/benefitsNavigatorQuery.graphql index b35b1decb5..de0b994637 100644 --- a/graphql/queries/benefitsNavigatorQuery.graphql +++ b/graphql/queries/benefitsNavigatorQuery.graphql @@ -336,10 +336,10 @@ query getBenefitsNavigatorPage { scLongDescHeadingEn scLongDescHeadingFr scLongDescEn { - json + json } scLongDescFr { - json + json } } } @@ -473,7 +473,20 @@ query getBenefitsNavigatorPage { json } } + ... on SclabsAlertV1Model { + _path + scId + scTitleEn + scTitleFr + scContentEn { + json + } + scContentFr { + json + } + scAlertType + } } } } -} \ No newline at end of file +} diff --git a/next.config.js b/next.config.js index 24e5eee71c..e99a510b49 100644 --- a/next.config.js +++ b/next.config.js @@ -49,6 +49,14 @@ const REWRITES = [ source: "/projets/faciliter-obtention-prestations/:slug", destination: "/projects/making-easier-get-benefits/:slug", }, + { + source: "/projets/chercheur-prestations", + destination: "/projects/benefits-finder", + }, + { + source: "/projets/chercheur-prestations/:slug", + destination: "/projects/benefits-finder/:slug", + }, { source: "/rsdc-demander", destination: "/cdcp-apply" diff --git a/pages/home.js b/pages/home.js index 97beb1def4..f6fbce679d 100644 --- a/pages/home.js +++ b/pages/home.js @@ -22,11 +22,12 @@ export default function Home(props) { const sortedProjects = (objects) => { // Order to sort the projects const sortOrder = [ + "Benefits Finder", "Making it easier to get benefits", "Digital Standards Playbook", - "My Service Canada Account dashboard", - "Benefits Navigator", + "New dashboard for My Service Canada Account", "Old Age Security Benefits Estimator", + "Benefits Navigator", ]; // Create a lookup for efficient ordering const titleOrder = {}; diff --git a/pages/projects/benefits-finder/[id].js b/pages/projects/benefits-finder/[id].js new file mode 100644 index 0000000000..733e52ea06 --- /dev/null +++ b/pages/projects/benefits-finder/[id].js @@ -0,0 +1,135 @@ +import PageHead from "../../../components/fragment_renderer/PageHead"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { Layout } from "../../../components/organisms/Layout"; +import { useEffect, useState } from "react"; +import aemServiceInstance from "../../../services/aemServiceInstance"; +import { getAllUpdateIds } from "../../../lib/utils/getAllUpdateIds"; +import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs"; +import FragmentRender from "../../../components/fragment_renderer/FragmentRender"; +import { Heading } from "../../../components/molecules/Heading"; + +export default function BenefitFinderArticles(props) { + const [pageData] = useState(props.pageData); + const [dictionary] = useState(props.dictionary.items); + + useEffect(() => { + if (props.adobeAnalyticsUrl) { + window.adobeDataLayer = window.adobeDataLayer || []; + window.adobeDataLayer.push({ event: "pageLoad" }); + } + }, []); + + return ( + <> + + +
+
+ +
+

+ {props.locale === "en" + ? dictionary[13].scTermEn + : dictionary[13].scTermFr} +

+

+ {pageData.scDateModifiedOverwrite} +

+

+ {props.locale === "en" + ? dictionary[8].scTermEn + : dictionary[8].scTermFr} +

+

+ {pageData.scDateModifiedOverwrite} +

+
+
+ + {/* Main */} +
+ +
+
+ + + ); +} + +export async function getStaticPaths() { + // Get pages data + const { data } = await aemServiceInstance.getFragment( + "benefitsNavigatorArticlesQuery" + ); + // Get paths for dynamic routes from the page name data + const paths = getAllUpdateIds(data.sclabsPageV1List.items); + paths.map((path) => (path.params.id = path.params.id.split("/").at(-1))); + return { + paths, + fallback: "blocking", + }; +} + +export const getStaticProps = async ({ locale, params }) => { + // Get pages data + const { data } = await aemServiceInstance.getFragment( + "benefitsFinderArticlesQuery" + ); + // get dictionary + const { data: dictionary } = await aemServiceInstance.getFragment( + "dictionaryQuery" + ); + const pages = data.sclabsPageV1List.items; + // Return page data that matches the current page being built + const pageData = pages.filter((page) => { + return ( + (locale === "en" ? page.scPageNameEn : page.scPageNameFr) + .split("/") + .at(-1) === params.id + ); + }); + + if (!pageData || !pageData.length) { + return { + notFound: true, + }; + } + + return { + props: { + locale: locale, + pageData: pageData[0], + dictionary: dictionary.dictionaryV1List, + adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL ?? null, + ...(await serverSideTranslations(locale, ["common", "vc"])), + }, + revalidate: process.env.ISR_ENABLED === "true" ? 10 : false, + }; +}; diff --git a/pages/projects/benefits-finder/index.js b/pages/projects/benefits-finder/index.js new file mode 100644 index 0000000000..09fab92b31 --- /dev/null +++ b/pages/projects/benefits-finder/index.js @@ -0,0 +1,388 @@ +import Head from "next/head"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { Layout } from "../../../components/organisms/Layout"; +import { useEffect, useState } from "react"; +import aemServiceInstance from "../../../services/aemServiceInstance"; +import { ProjectInfo } from "../../../components/atoms/ProjectInfo"; +import Card from "../../../components/molecules/Card"; +import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs"; +import { Heading } from "../../../components/molecules/Heading"; +import Image from "next/image"; +import stageDictionary from "../../../lib/utils/stageDictionary"; +import { sortUpdatesByDate } from "../../../lib/utils/sortUpdatesByDate"; +import FragmentRender from "../../../components/fragment_renderer/FragmentRender"; + +export default function BenefitsFinderOverview(props) { + const [pageData] = useState(props.pageData.item); + const updatesData = sortUpdatesByDate(props.updatesData); + const [filteredDictionary] = useState( + props.dictionary.items.filter( + (item) => + item.scId === "STARTED" || + item.scId === "ENDED" || + item.scId === "PROJECT-STAGE" || + item.scId === "SUMMARY" + ) + ); + + const displayProjectUpdates = updatesData.map((update) => ( +
  • + +
    • + )); + + useEffect(() => { + if (props.adobeAnalyticsUrl) { + window.adobeDataLayer = window.adobeDataLayer || []; + window.adobeDataLayer.push({ event: "pageLoad" }); + } + }, []); + + return ( + <> + + + {/* Primary HTML Meta Tags */} + + {props.locale === "en" + ? `${pageData.scTitleEn} - Service Canada Labs` + : `${pageData.scTitleFr} - Laboratoires de Service Canada`} + + + + + + + + + {/* DCMI Meta Tags */} + + + + + + + + + + + + + {/* Open Graph / Facebook */} + + + + + + + + + {/* Twitter */} + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    + { +
    +
    +
    +

    + {props.locale === "en" + ? pageData.scFragments[0].scContentEn.json[1].content[0].value + : pageData.scFragments[0].scContentFr.json[1].content[0] + .value} +

    +
    + +
    + + {props.locale === "en" + ? pageData.scFragments[0].scContentEn.json[5].content[0].value + : pageData.scFragments[0].scContentFr.json[5].content[0] + .value} + +
    +
    +
    + + +
    + {updatesData.length === 0 ? null : ( +
    +

    + {props.locale === "en" + ? "Project updates" + : "Mises à jour du projet"} +

    +
      + {displayProjectUpdates} +
    +
    + )} +
    +     + + ); +} + +export const getStaticProps = async ({ locale }) => { + // get page data from AEM + const { data: pageData } = await aemServiceInstance.getFragment( + "benefitsFinderQuery" + ); + // get dictionary + const { data: dictionary } = await aemServiceInstance.getFragment( + "dictionaryQuery" + ); + + return { + props: { + locale: locale, + adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL ?? null, + pageData: pageData.sclabsPageV1ByPath, + updatesData: pageData.sclabsPageV1ByPath.item.scLabProjectUpdates, + dictionary: dictionary.dictionaryV1List, + ...(await serverSideTranslations(locale, ["common"])), + }, + revalidate: process.env.ISR_ENABLED === "true" ? 10 : false, + }; +}; diff --git a/pages/projects/benefits-navigator/index.js b/pages/projects/benefits-navigator/index.js index 21a23a1b0a..55fda721ee 100644 --- a/pages/projects/benefits-navigator/index.js +++ b/pages/projects/benefits-navigator/index.js @@ -12,6 +12,7 @@ import Image from "next/image"; import stageDictionary from "../../../lib/utils/stageDictionary"; import TextRender from "../../../components/text_node_renderer/TextRender"; import { sortUpdatesByDate } from "../../../lib/utils/sortUpdatesByDate"; +import { ContextualAlert } from "../../../components/molecules/ContextualAlert"; export default function BenefitsNavigatorOverview(props) { const [pageData] = useState(props.pageData.item); @@ -184,14 +185,14 @@ export default function BenefitsNavigatorOverview(props) { /> @@ -225,14 +226,14 @@ export default function BenefitsNavigatorOverview(props) { /> @@ -250,6 +251,28 @@ export default function BenefitsNavigatorOverview(props) { : pageData.scTitleFr } /> +
    + + } + alert_icon_alt_text="" + alert_icon_id="project-status-cta-icon" + /> +
    @@ -257,16 +280,16 @@ export default function BenefitsNavigatorOverview(props) { {

    {props.locale === "en" - ? pageData.scFragments[2].scContentEn.json[1].content[0].value - : pageData.scFragments[2].scContentFr.json[1].content[0] + ? pageData.scFragments[3].scContentEn.json[1].content[0].value + : pageData.scFragments[3].scContentFr.json[1].content[0] .value}

    @@ -299,26 +322,26 @@ export default function BenefitsNavigatorOverview(props) { : filteredDictionary[3].scTermFr } dateStarted={ - pageData.scFragments[2].scContentEn.json[2].content[0].value + pageData.scFragments[3].scContentEn.json[2].content[0].value } term={ props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[0].content[0] + ? pageData.scFragments[2].scContentEn.json[0].content[0] .value + " " - : pageData.scFragments[1].scContentFr.json[0].content[0] + : pageData.scFragments[2].scContentFr.json[0].content[0] .value + " " } definition={ props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[0].content[1] + ? pageData.scFragments[2].scContentEn.json[0].content[1] .value - : pageData.scFragments[1].scContentFr.json[0].content[1] + : pageData.scFragments[2].scContentFr.json[0].content[1] .value } information={ props.locale === "en" - ? pageData.scFragments[1].scTitleEn - : pageData.scFragments[1].scTitleFr + ? pageData.scFragments[2].scTitleEn + : pageData.scFragments[2].scTitleFr } stage={ props.locale === "en" @@ -327,9 +350,9 @@ export default function BenefitsNavigatorOverview(props) { } summary={ props.locale === "en" - ? pageData.scFragments[2].scContentEn.json[4].content[0] + ? pageData.scFragments[3].scContentEn.json[4].content[0] .value - : pageData.scFragments[2].scContentFr.json[4].content[0] + : pageData.scFragments[3].scContentFr.json[4].content[0] .value } /> @@ -339,52 +362,52 @@ export default function BenefitsNavigatorOverview(props) {

    {props.locale === "en" - ? pageData.scFragments[3].scContentEn.json[0].content[0].value - : pageData.scFragments[3].scContentFr.json[0].content[0].value} + ? pageData.scFragments[4].scContentEn.json[0].content[0].value + : pageData.scFragments[4].scContentFr.json[0].content[0].value}

    {props.locale === "en" - ? pageData.scFragments[3].scContentEn.json[1].content[0].value - : pageData.scFragments[3].scContentFr.json[1].content[0].value} + ? pageData.scFragments[4].scContentEn.json[1].content[0].value + : pageData.scFragments[4].scContentFr.json[1].content[0].value}

    {props.locale === "en" - ? pageData.scFragments[3].scContentEn.json[2].content[0].value - : pageData.scFragments[3].scContentFr.json[2].content[0].value} + ? pageData.scFragments[4].scContentEn.json[2].content[0].value + : pageData.scFragments[4].scContentFr.json[2].content[0].value}

    • {props.locale === "en" - ? pageData.scFragments[3].scContentEn.json[3].content[0] + ? pageData.scFragments[4].scContentEn.json[3].content[0] .content[0].value - : pageData.scFragments[3].scContentFr.json[3].content[0] + : pageData.scFragments[4].scContentFr.json[3].content[0] .content[0].value}
    • {props.locale === "en" - ? pageData.scFragments[3].scContentEn.json[3].content[1] + ? pageData.scFragments[4].scContentEn.json[3].content[1] .content[0].value - : pageData.scFragments[3].scContentFr.json[3].content[1] + : pageData.scFragments[4].scContentFr.json[3].content[1] .content[0].value}
    • {props.locale === "en" - ? pageData.scFragments[3].scContentEn.json[3].content[2] + ? pageData.scFragments[4].scContentEn.json[3].content[2] .content[0].value - : pageData.scFragments[3].scContentFr.json[3].content[2] + : pageData.scFragments[4].scContentFr.json[3].content[2] .content[0].value}

    {props.locale === "en" - ? pageData.scFragments[3].scContentEn.json[4].content[0].value - : pageData.scFragments[3].scContentFr.json[4].content[0].value} + ? pageData.scFragments[4].scContentEn.json[4].content[0].value + : pageData.scFragments[4].scContentFr.json[4].content[0].value}

    {props.locale === "en" - ? pageData.scFragments[4].scContentEn.json[0].content[0].value - : pageData.scFragments[4].scContentFr.json[0].content[0] + ? pageData.scFragments[5].scContentEn.json[0].content[0].value + : pageData.scFragments[5].scContentFr.json[0].content[0] .value}

    @@ -392,24 +415,24 @@ export default function BenefitsNavigatorOverview(props) { { @@ -434,18 +457,18 @@ export default function BenefitsNavigatorOverview(props) { id="image-text-collapse-1" title={ props.locale === "en" - ? pageData.scFragments[4].scFragments[0].scFragments[0] + ? pageData.scFragments[5].scFragments[0].scFragments[0] .scLongDescHeadingEn - : pageData.scFragments[4].scFragments[0].scFragments[0] + : pageData.scFragments[5].scFragments[0].scFragments[0] .scLongDescHeadingFr } children={ @@ -458,24 +481,24 @@ export default function BenefitsNavigatorOverview(props) { { @@ -500,18 +523,18 @@ export default function BenefitsNavigatorOverview(props) { id="image-text-collapse-2" title={ props.locale === "en" - ? pageData.scFragments[4].scFragments[1].scFragments[0] + ? pageData.scFragments[5].scFragments[1].scFragments[0] .scLongDescHeadingEn - : pageData.scFragments[4].scFragments[1].scFragments[0] + : pageData.scFragments[5].scFragments[1].scFragments[0] .scLongDescHeadingFr } children={ @@ -524,24 +547,24 @@ export default function BenefitsNavigatorOverview(props) { { @@ -566,18 +589,18 @@ export default function BenefitsNavigatorOverview(props) { id="image-text-collapse-3" title={ props.locale === "en" - ? pageData.scFragments[4].scFragments[2].scFragments[0] + ? pageData.scFragments[5].scFragments[2].scFragments[0] .scLongDescHeadingEn - : pageData.scFragments[4].scFragments[2].scFragments[0] + : pageData.scFragments[5].scFragments[2].scFragments[0] .scLongDescHeadingFr } children={ @@ -586,41 +609,6 @@ export default function BenefitsNavigatorOverview(props) {
    -
    -

    - {props.locale === "en" - ? pageData.scFragments[5].scContentEn.json[0].content[0].value - : pageData.scFragments[5].scContentFr.json[0].content[0] - .value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[5].scContentEn.json[1].content[0].value - : pageData.scFragments[5].scContentFr.json[1].content[0] - .value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[5].scContentEn.json[2].content[0].value - : pageData.scFragments[5].scContentFr.json[2].content[0] - .value} - - {pageData.scFragments[5].scContentEn.json[2].content[1].value} - -

    -

    - {props.locale === "en" - ? pageData.scFragments[5].scContentEn.json[3].content[0].value - : pageData.scFragments[5].scContentFr.json[3].content[0] - .value} -

    -
    {updatesData.length === 0 ? null : (