From bd21e2ccfd249c10a984e531fee39c4307c2bffe Mon Sep 17 00:00:00 2001 From: Jordan Willis <31868510+will0684@users.noreply.github.com> Date: Mon, 10 Jun 2024 11:20:27 -0400 Subject: [PATCH] Explore Updates Section (#1038) * add colour for section background * update Card image container height * show 3 projects on homepage and add new section * create updates section component * fix dictionary entry used on project pages * modify Card.js to allow passing styling and html descriptions * allow excluding H1 nodes in FragmentRender * update homepage query * update homepage to use FragmentRender * add viewport to HEAD on all pages for tailwind * use grid ExploreUpdates.js * update homepage to use new query and fragments * add ExploreUpdates to home page and project pages * fix list styling on project pages * add margin for new sections on project pages * remove defaultprops throwing warnings * modify Card.js description to accept html * drill down for H1 in HeaderText.jsx * update mockdata * update home.test.js * revert dateModified * use js defaults in Link.js * create unit test and story for ExploreUpdates.js * add updates section to all article pages * rename filterProjects -> filterItems * sort updates by most recent on all pages * add missing ski link to homepage * add key to update pages to ensure proper navigation between update pages * update atoms/Link to support passing in next/link --- __mocks__/mockStore.js | 2673 +++++++++++++---- __tests__/pages/home.test.js | 4 +- components/atoms/Link.js | 85 +- .../fragment_renderer/FragmentRender.js | 6 +- .../fragment_components/BasicTextWithImage.js | 11 +- .../fragment_components/TextWithImage.js | 3 + components/molecules/Card.js | 19 +- components/organisms/ExploreUpdates.js | 64 + .../organisms/ExploreUpdates.stories.js | 258 ++ components/organisms/ExploreUpdates.test.js | 26 + components/organisms/Footer.js | 7 +- components/organisms/Layout.stories.js | 20 +- components/text_node_renderer/TextRecur.jsx | 4 +- .../nodes/{Header.jsx => HeaderText.jsx} | 10 +- cypress/e2e/home.cy.js | 4 +- graphql/queries/homePageQuery.graphql | 75 +- .../{filterProjects.js => filterItems.js} | 6 +- lib/utils/sortUpdatesByDate.js | 5 + pages/_app.js | 3 + pages/home.js | 1908 +++++++++++- pages/projects/benefits-navigator/[id].js | 40 +- pages/projects/benefits-navigator/index.js | 80 +- pages/projects/dashboard/[id].js | 39 +- pages/projects/dashboard/index.js | 49 +- .../digital-standards-playbook/[id].js | 40 +- .../digital-standards-playbook/index.js | 70 +- .../making-easier-get-benefits/[id].js | 40 +- .../making-easier-get-benefits/index.js | 64 +- pages/projects/oas-benefits-estimator/[id].js | 39 +- .../projects/oas-benefits-estimator/index.js | 68 +- tailwind.config.js | 1 + 31 files changed, 4768 insertions(+), 953 deletions(-) create mode 100644 components/organisms/ExploreUpdates.js create mode 100644 components/organisms/ExploreUpdates.stories.js create mode 100644 components/organisms/ExploreUpdates.test.js rename components/text_node_renderer/nodes/{Header.jsx => HeaderText.jsx} (61%) rename lib/utils/{filterProjects.js => filterItems.js} (53%) create mode 100644 lib/utils/sortUpdatesByDate.js diff --git a/__mocks__/mockStore.js b/__mocks__/mockStore.js index 1729b97850..bb06ffa723 100644 --- a/__mocks__/mockStore.js +++ b/__mocks__/mockStore.js @@ -564,15 +564,15 @@ export const error404Page = { export const homePageData = { data: { - scLabsPagev1ByPath: { + sclabsPageV1ByPath: { item: { - scId: "SCLABS-HOME-PAGE", + scId: "PAGES-HOME", scPageNameEn: "/en/home", scPageNameFr: "/fr/accueil", scTitleEn: "Service Canada Labs", scTitleFr: "Laboratoires de Service Canada", - scShortTitleEn: "Home - Service Canada Labs", - scShortTitleFr: "Accueil - Laboratoires de Service Canada", + scShortTitleEn: null, + scShortTitleFr: null, scDescriptionEn: { json: [ { @@ -609,227 +609,254 @@ export const homePageData = { scKeywordsFr: "services numériques", scContentType: null, scOwner: null, - scDateModifiedOverwrite: "2022-12-11", + scDateModifiedOverwrite: null, scAudience: null, scRegion: null, scSocialMediaImageEn: { + _path: "/content/dam/decd-endc/images/sclabs/homePage_image1.png", _publishUrl: "https://www.canada.ca/content/dam/decd-endc/images/sclabs/homePage_image1.png", width: 2932, height: 2078, }, scSocialMediaImageFr: { + _path: "/content/dam/decd-endc/images/sclabs/homePage_image1.png", _publishUrl: "https://www.canada.ca/content/dam/decd-endc/images/sclabs/homePage_image1.png", width: 2932, height: 2078, }, - scSocialMediaImageAltTextEn: null, - scSocialMediaImageAltTextFr: null, + scSocialMediaImageAltTextEn: "People adding icons to a mobile screen", + scSocialMediaImageAltTextFr: + "Personnes ajoutant des icônes à un écran mobile", scNoIndex: false, scNoFollow: false, scFragments: [ { - _path: - "/content/dam/decd-endc/content-fragments/sclabs/components/content/home---main-content", - scId: "SCLABS-HOMEPAGE-MAIN-CONTENT", - scContentEn: { - json: [ - { - nodeType: "header", - style: "h1", - content: [ - { - nodeType: "text", - value: "Service Canada Labs", - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "Help us make government digital services simple and easy to use.", - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "Service Canada Labs is an experimental corner of Canada.ca where we work on new ways of serving you. Here, you can explore projects in their early stages and help us improve them. We might even stop working on some ideas if we learn they’re not adding value and not meeting people’s needs. ", - }, - ], - }, - { - nodeType: "header", - style: "h2", - content: [ + _model: { + title: "SCLabs-Comp-Content-Image-v1", + }, + scId: "COMP-IMAGE-HOME-INTRO", + scLabContent: [ + { + scId: "CONTENT-HOME-MAIN", + scContentEn: { + json: [ { - nodeType: "text", - value: "Your feedback can shape tomorrow’s services", + nodeType: "header", + style: "h1", + content: [ + { + nodeType: "text", + value: "Service Canada Labs", + }, + ], }, - ], - }, - { - nodeType: "paragraph", - content: [ { - nodeType: "text", - value: "Here is how you can help:", + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Help us make government digital services simple and easy to use. ", + }, + ], }, - ], - }, - { - nodeType: "unordered-list", - content: [ { - nodeType: "list-item", + nodeType: "paragraph", content: [ { nodeType: "text", - value: "try out our projects", + value: + "Service Canada Labs is an experimental corner of Canada.ca where we work on new ways of serving you. Here, you can explore projects in their early stages and help us improve them. We might even stop working on some ideas if we learn they're not adding value and not meeting people's needs. ", + }, + { + nodeType: "line-break", + content: [], }, ], }, { - nodeType: "list-item", + nodeType: "header", + style: "h2", content: [ { nodeType: "text", - value: "give your feedback", + value: "Your feedback can shape tomorrow's services", }, ], }, - ], - }, - { - nodeType: "header", - style: "h2", - content: [ { - nodeType: "text", - value: "Explore our projects", + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "Here is how you can help:", + }, + ], }, - ], - }, - ], - }, - scContentFr: { - json: [ - { - nodeType: "header", - style: "h1", - content: [ { - nodeType: "text", - value: "Laboratoires de Service Canada", + nodeType: "unordered-list", + content: [ + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: "try out our projects", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: "provide your feedback", + }, + ], + }, + ], }, ], }, - { - nodeType: "paragraph", - content: [ + scContentFr: { + json: [ { - nodeType: "text", - value: - "Aidez-nous à rendre les services numériques gouvernementaux plus simples et faciles à utiliser.", + nodeType: "header", + style: "h1", + content: [ + { + nodeType: "text", + value: "Laboratoires de Service Canada", + }, + ], }, - ], - }, - { - nodeType: "paragraph", - content: [ { - nodeType: "text", - value: - "Les laboratoires de Service Canada sont un espace expérimental de Canada.ca où nous travaillons sur de nouvelles façons de vous servir. Vous pouvez y explorer des projets à leur stade initial et nous aider à les améliorer. Nous pourrions cesser de travailler sur certaines idées si nous découvrons qu'elles n'apportent pas de valeur ajoutée et ne répondent pas aux besoins des gens.", + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Aidez-nous à rendre les services numériques gouvernementaux plus simples et faciles à utiliser.", + }, + ], }, - ], - }, - { - nodeType: "header", - style: "h2", - content: [ { - nodeType: "text", - value: - "Vos commentaires peuvent façonner les services de demain", + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Les laboratoires de Service Canada sont un espace expérimental de Canada.ca où nous travaillons sur de nouvelles façons de vous servir. Vous pouvez y explorer des projets à leur stade initial et nous aider à les améliorer. Nous pourrions cesser de travailler sur certaines idées si nous découvrons qu'elles n'apportent pas de valeur ajoutée et ne répondent pas aux besoins des gens.", + }, + ], }, - ], - }, - { - nodeType: "paragraph", - content: [ { - nodeType: "text", - value: "Comment participer :", + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: + "Vos commentaires peuvent façonner les services de demain", + }, + ], }, - ], - }, - { - nodeType: "unordered-list", - content: [ { - nodeType: "list-item", + nodeType: "paragraph", content: [ { nodeType: "text", - value: "essayer nos projets", + value: "Comment participer :", }, ], }, { - nodeType: "list-item", + nodeType: "unordered-list", content: [ { - nodeType: "text", - value: "donner vos commentaires", + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: "essayer nos projets", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: "donner vos commentaires", + }, + ], }, ], }, ], }, + }, + ], + scLabImage: { + scId: "SCLABS-HOMEPAGE-IMAGE", + scImageEn: { + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/homePage_image1.png", + width: 2932, + height: 2078, + }, + scImageFr: { + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/homePage_image1.png", + width: 2932, + height: 2078, + }, + scImageMobileEn: null, + scImageMobileFr: null, + scImageAltTextEn: null, + scImageAltTextFr: null, + scImageCaptionEn: { + json: null, + }, + scImageCaptionFr: { + json: null, + }, + }, + scLabLayout: "default", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/components/content/home-explore-projects", + scId: "CONTENT-HOME-EXPLORE-PROJECTS", + scContentEn: { + json: [ { nodeType: "header", style: "h2", content: [ { nodeType: "text", - value: "Explorez nos projets", + value: "Explore our projects", }, ], }, ], }, - }, - { - scId: "SCLABS-HOMEPAGE-IMAGE", - scImageEn: { - _publishUrl: - "https://www.canada.ca/content/dam/decd-endc/images/sclabs/homePage_image1.png", - width: 2932, - height: 2078, - }, - scImageFr: { - _publishUrl: - "https://www.canada.ca/content/dam/decd-endc/images/sclabs/homePage_image1.png", - width: 2932, - height: 2078, - }, - scImageMobileEn: null, - scImageMobileFr: null, - scImageAltTextEn: null, - scImageAltTextFr: null, - scImageCaptionEn: { - json: null, - }, - scImageCaptionFr: { - json: null, + scContentFr: { + json: [ + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "Explorez nos projets", + }, + ], + }, + ], }, }, { @@ -887,17 +914,125 @@ export const homePageData = { ], }, }, - ], - }, - }, - }, -}; - -export const experimentsData = { - data: { - scLabsPagev1List: { - items: [ - { + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/components/content/home-see-all-projects", + scId: "CONTENT-HOME-SEE-ALL-PROJECTS", + scContentEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "link", + data: { + href: "/en/projects.html", + }, + value: "See all projects", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "link", + data: { + href: "/fr/projets.html", + }, + value: "Consulter tous les projets", + }, + ], + }, + ], + }, + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/components/content/home-read-updates", + scId: "CONTENT-HOME-READ-UPDATES", + scContentEn: { + json: [ + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "Read our latest project updates", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: + "Consultez les récentes mises à jour de nos projets", + }, + ], + }, + ], + }, + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/components/content/home-see-all-updates", + scId: "CONTENT-HOME-SEE-ALL-UPDATES", + scContentEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "link", + data: { + href: "/en/updates.html", + }, + value: "See all updates", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "link", + data: { + href: "/fr/mises-a-jour.html", + }, + value: "Consulter toutes les mises à jour", + }, + ], + }, + ], + }, + }, + ], + }, + }, + }, +}; + +export const experimentsData = { + data: { + scLabsPagev1List: { + items: [ + { _path: "/content/dam/decd-endc/content-fragments/sclabs/pages/projects/digital-centre", scId: "SCLABS-DIGITAL-CENTRE", @@ -1299,462 +1434,1755 @@ export const experimentsData = { export const projectUpdates = { data: { - scLabsPagev1ByPath: { - item: { - scId: "WHAT-WE-LEARNED-BUILDING-THE-SERVICE-CANADA-VIRTUAL-ASSISTANT", - scPageNameEn: - "what-we-learned-building-service-canada-virtual-assistant ", - scPageNameFr: - "ce-que-nous-avons-appris-en-creant-assistant-virtuel-service-canada", - scTitleEn: - "What we learned building the Service Canada Virtual Assistant", - scTitleFr: - "Ce que nous avons appris en créant l'assistant virtuel de Service Canada", - scShortTitleEn: null, - scShortTitleFr: null, - scDescriptionEn: { - json: null, - }, - scDescriptionFr: { - json: null, - }, - scSubject: null, - scKeywordsEn: null, - scKeywordsFr: null, - scContentType: null, - scOwner: null, - scDateModifiedOverwrite: "2022-12-18", - scAudience: null, - scRegion: null, - scSocialMediaImageEn: null, - scSocialMediaImageFr: null, - scSocialMediaImageAltTextEn: null, - scSocialMediaImageAltTextFr: null, - scNoIndex: false, - scNoFollow: false, - scFragments: [ - { + sclabsPageV1List: { + items: [ + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/pages/projects/oas-benefits-estimator/project-updates/how-feedback-is-shaping-the-estimator", + scId: "HOW-FEEDBACK-SHAPING-ESTIMATOR", + scPageNameEn: + "/en/projects/oas-benefits-estimator/how-feedback-shaping", + scPageNameFr: + "/fr/projets/estimateur-prestations-sv/faconner-grace-retroaction", + scTitleEn: "How feedback is shaping the estimator", + scTitleFr: "Façonner l’estimateur grâce à la rétroaction", + scShortTitleEn: null, + scShortTitleFr: null, + scBreadcrumbParentPages: [ + { + scTitleEn: "Service Canada Labs", + scTitleFr: "Laboratoires de Service Canada", + scPageNameEn: "/en/home", + scPageNameFr: "/fr/accueil", + }, + { + scTitleEn: "Old Age Security Benefits Estimator", + scTitleFr: + "Estimateur des prestations de la Sécurité de la vieillesse", + scPageNameEn: "/en/projects/oas-benefits-estimator", + scPageNameFr: "/fr/projets/estimateur-prestations-sv", + }, + ], + scSubject: [ + "gc:subjects/gv-government-and-politics/government-services", + ], + scKeywordsEn: "feedback, benefits, estimator", + scKeywordsFr: "rétroaction, prestations, estimateur", + scContentType: [ + "gc:content-types/promotional-material-featured-articles", + ], + scOwner: ["gc:institutions/service-canada"], + scDateModifiedOverwrite: "2023-12-12", + scAudience: null, + scRegion: null, + scSocialMediaImageEn: { _path: - "/content/dam/decd-endc/content-fragments/sclabs/components/content/projects/virtual-assistant/project-updates/va-update-1-content", - scId: "VA-UPDATE-1-CONTENT", - scContentEn: { - json: [ - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "# What we learned building the Service Canada Virtual Assistant", - }, - ], + "/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/feedback.jpg", + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/feedback.jpg", + width: 2670, + height: 1543, + }, + scSocialMediaImageFr: { + _path: + "/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/feedback.jpg", + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/feedback.jpg", + width: 2670, + height: 1543, + }, + scSocialMediaImageAltTextEn: + " Different kinds of feedback being gathered", + scSocialMediaImageAltTextFr: + " Un rassemblement de différents types de rétroaction", + scNoIndex: false, + scNoFollow: false, + scFragments: [ + { + _model: { + title: "SCLabs-Comp-Content-Image-v1", + }, + scId: "ESTIMATOR-REVIEWING-FEEDBACK", + scLabContent: [ + { + scId: "ESTIMATOR-REVIEWING-FEEDBACK", + scContentEn: { + json: [ + { + nodeType: "header", + style: "h1", + content: [ + { + nodeType: "text", + value: "How feedback is shaping the estimator ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "There are many ways to do usability research and use insights to improve client experience. In our beta phase, one of the ways we’re doing this is by collecting feedback from people who try the Old Age Security Benefits Estimator through a survey. ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "About 450 visitors have sent responses. This has allowed us to analyze feedback and prioritize changes that are important to our clients. We can see what works and what doesn’t in order to refine the estimator based on their needs. ", + }, + ], + }, + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "Reviewing feedback ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Every week, our product team meets for “Feedback Friday” to sort through all the new survey responses. We look at the ratings and comments people shared with us about their experience. ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "We then organize the survey responses by topic (this is called “affinity mapping”). This gives us a wide view of problem areas and their progression over time. If we see the same comment come up a few times, we know we should take a closer look at what we can do to resolve the issue.", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "header", + style: "h1", + content: [ + { + nodeType: "text", + value: + "Façonner l’estimateur grâce à la rétroaction ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Il y a de nombreuses façons de mener des recherches sur la convivialité et d’utiliser les résultats pour améliorer l’expérience client. Dans notre phase bêta, nous avons notamment recueilli la rétroaction des personnes qui essaient l’Estimateur des prestations de la Sécurité de la vieillesse au moyen d’un sondage. ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Environ 450 visiteurs y ont répondu. Cela nous a permis d’analyser la rétroaction et de prioriser les changements qui sont importants pour nos clients. Nous pouvons voir ce qui fonctionne et ce qui ne fonctionne pas afin d’améliorer l’estimateur en fonction de leurs besoins. ", + }, + ], + }, + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "Analyse de la rétroaction ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Chaque semaine, notre équipe de produit se réunit pour le ", + }, + { + nodeType: "span", + content: [ + { + nodeType: "text", + value: "« v", + }, + ], + data: { + class: "nowrap", + }, + }, + { + nodeType: "text", + value: "endredi rétroactio", + }, + { + nodeType: "span", + content: [ + { + nodeType: "text", + value: "n » ", + }, + ], + data: { + class: "nowrap", + }, + }, + { + nodeType: "text", + value: + "afin de trier toutes les nouvelles réponses au sondage. Nous regardons les évaluations et les commentaires que les gens ont partagés avec nous sur leur expérience. ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Nous organisons ensuite les commentaires par thème (c’est ce qu’on appelle la ", + }, + { + nodeType: "span", + content: [ + { + nodeType: "text", + value: "« c", + }, + ], + data: { + class: "nowrap", + }, + }, + { + nodeType: "text", + value: "artographie des affinité", + }, + { + nodeType: "span", + content: [ + { + nodeType: "text", + value: "s »", + }, + ], + data: { + class: "nowrap", + }, + }, + { + nodeType: "text", + value: + "). Cela nous permet d’avoir une vue d’ensemble des problèmes et de leur évolution dans le temps. Si le même commentaire revient plusieurs fois, nous savons que nous devrions examiner de plus près ce que nous pouvons faire pour résoudre le problème. ", + }, + ], + }, + ], + }, }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "The Virtual Assistant is a conversational chatbot designed to help Canadians overcome challenges they may face as they apply for and receive benefits.", - }, - { - nodeType: "line-break", - content: [], - }, - ], + ], + scLabImage: { + scId: "ESTIMATOR-HOW-FEEDBACK-SHAPING", + scImageEn: { + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/feedback.jpg", + width: 2670, + height: 1543, + }, + scImageFr: { + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/feedback.jpg", + width: 2670, + height: 1543, + }, + scImageMobileEn: null, + scImageMobileFr: null, + scImageAltTextEn: null, + scImageAltTextFr: null, + scImageCaptionEn: { + json: null, + }, + scImageCaptionFr: { + json: null, }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: "## Why was this project important to pursue?", - }, - { - nodeType: "line-break", - content: [], - }, - ], + }, + scLabLayout: "default", + }, + { + _model: { + title: "SCLabs-Content-v1", + }, + _path: + "/content/dam/decd-endc/content-fragments/sclabs/components/content/projects/oas-benefits-estimator/project-updates/how-feedback-shaping-estimator/using-feedback", + scId: "ESTIMATOR-USING-FEEDBACK", + scContentEn: { + json: [ + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "Using feedback", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "The estimator has proven to be user-friendly, but that didn't mean it was serving everyone’s needs. In fact, the initial feedback suggested there were specific things we needed to fix. Below, we show how we’ve used feedback with examples inspired by real survey responses. ", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "Utilisation de la rétroaction", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "L’estimateur a bien montré être convivial, mais cela ne veut pas dire qu’il répondait aux besoins de tout le monde. En effet, les commentaires initiaux suggéraient qu’il y avait des choses spécifiques que nous devions corriger. Nous montrons ci-dessous comment nous avons utilisé la rétroaction à l’aide d’exemples inspirés de vraies réponses au sondage. ", + }, + ], + }, + ], + }, + }, + { + _model: { + title: "SCLabs-Comp-Content-v1", + }, + scId: "ESTIMATOR-FUTURE-ESTIMATE-COMMENT-1", + scLabContent: [ + { + scContentEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "I didn’t like having to change my birth year to get an estimate", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Je n’aimais pas devoir changer mon année de naissance pour avoir une estimation", + }, + ], + }, + ], + }, }, { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "Our goal with the Virtual Assistant was to start with user needs and build a prototype that shows how a user-friendly chatbot experience could be. From there, we can work backwards to identify what else needs to be in place to make it possible.", - }, - { - nodeType: "line-break", - content: [], - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "Many chatbots surface general information, but the Virtual Assistant provides personalized support to those who are signed into their accounts.", - }, - { - nodeType: "line-break", - content: [], - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "By automating processes that recognize problems with applications, the four chatbot prototypes can help Canadians resolve issues with their EI or OAS applications on their own instead of having to call in for support.", - }, - { - nodeType: "line-break", - content: [], - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "## Were you able to do research with Canadians? What did you learn?", - }, - { - nodeType: "line-break", - content: [], - }, - ], + scContentEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "We now generate results that give future estimates to those who aren’t eligible yet. ", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Nous générons maintenant des résultats qui donnent des estimations futures aux personnes qui ne sont pas encore admissibles. ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + ], + }, }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "We were able to do usability testing on one of our early designs with actual employment insurance (EI) recipients. Research participants found the chatbot to be intuitive and easy to use.", - }, - { - nodeType: "line-break", - content: [], - }, - ], + ], + scLabLayout: "quote", + }, + { + _model: { + title: "SCLabs-Comp-Content-v1", + }, + scId: "ESTIMATOR-DEFERRED-AMOUNT-COMMENT-2", + scLabContent: [ + { + scContentEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "It should show the benefit to deferral if I start to receive after 65", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "On devrait montrer l’avantage d’un report si je commence à recevoir après 65 ans", + }, + ], + }, + ], + }, }, { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "We're hoping that future user research will provide us with more feedback on how we could further improve the Virtual Assistant.", - }, - { - nodeType: "line-break", - content: [], - }, - ], + scContentEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "We now automatically show a personalized deferred amount to everyone older than 65. ", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Nous affichons maintenant automatiquement un montant reporté personnalisé pour toutes les personnes âgées de plus de 65 ans.", + }, + ], + }, + ], + }, }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "## What has been the outcome of your work so far?", - }, - { - nodeType: "line-break", - content: [], - }, - ], + ], + scLabLayout: "quote", + }, + { + _model: { + title: "SCLabs-Content-v1", + }, + _path: + "/content/dam/decd-endc/content-fragments/sclabs/components/content/projects/oas-benefits-estimator/project-updates/how-feedback-shaping-estimator/using-feedback-2", + scId: "ESTIMATOR-USING-FEEDBACK-2", + scContentEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Having access to feedback and being able to make quick updates has allowed us to add features like these and improve where you told us it matters most. We still have a lot of work to do and can’t address every pain point. But by grouping the feedback by topic, we can identify the most common concerns and prioritize solutions. ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Here are examples of comments that represent common feedback themes and how we plan to address them: ", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "En ayant accès aux commentaires et en pouvant faire des mises à jour rapides, nous avons pu ajouter des fonctionnalités comme celles-ci et améliorer ce qui était le plus important pour vous. Nous avons encore beaucoup de travail à faire et nous ne pouvons pas résoudre toutes les difficultés. Mais en regroupant les commentaires par thème, nous pouvons identifier les problèmes les plus courants et prioriser les solutions. ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Voici des exemples de commentaires qui illustrent des thèmes communs de la rétroaction et comment nous comptons y répondr", + }, + { + nodeType: "span", + content: [ + { + nodeType: "text", + value: "e :", + }, + ], + data: { + class: "nowrap", + }, + }, + ], + }, + ], + }, + }, + { + _model: { + title: "SCLabs-Comp-Content-v1", + }, + scId: "ESTIMATOR-INCOME-QUESTION-COMMENT-3", + scLabContent: [ + { + scContentEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "The income question isn’t clear", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "La question du revenu n’est pas claire", + }, + ], + }, + ], + }, }, { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "We've paused work on the Virtual Assistant due to lack of funding and resources needed to address significant technical barriers to implementation.", - }, - { - nodeType: "line-break", - content: [], - }, - ], + scContentEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Our new question will clarify the types of income to include and calculate how much of your work income is exempted. ", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Notre nouvelle question clarifiera les types de revenus à inclure et calculera la part de votre revenu lié au travail qui est exemptée. ", + }, + ], + }, + ], + }, }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - 'For the Virtual Assistant to work, it needs to access data from many different applications. The most effective way for applications to share data is through "application programming interfaces" (APIs), which allow two programs to talk to each other.', - }, - { - nodeType: "line-break", - content: [], - }, - ], + ], + scLabLayout: "quote", + }, + { + _model: { + title: "SCLabs-Comp-Content-v1", + }, + scId: "ESTIMATOR-ESTIMATE-COMMENT-4", + scLabContent: [ + { + scContentEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "I wasn’t given an estimate", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "Je n’ai pas reçu d’estimation", + }, + ], + }, + ], + }, }, { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "Unfortunately, the technical systems in our department can't yet provide the APIs we need to build a working version of the Virtual Assistant and no one is available to work on it right now. As a result, the Virtual Assistant is on hold until it is technically possible to launch.", - }, - { - nodeType: "line-break", - content: [], - }, - ], + scContentEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "We’ve already added $0 amounts to estimates to remove ambiguity. We’re also going to be changing the look of the results to make information easier to find. ", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "Nous avons déjà ajouté des montants de ", + }, + { + nodeType: "span", + content: [ + { + nodeType: "text", + value: "0 $", + }, + ], + data: { + class: "nowrap", + }, + }, + { + nodeType: "text", + value: + " aux estimations afin de résoudre l’ambiguïté. Nous allons également modifier la présentation des résultats pour que les informations soient plus faciles à trouver. ", + }, + ], + }, + ], + }, }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "The Virtual Assistant is a benchmark of the type of service we aim to deliver to clients in the future, and we look forward to making it a reality.", - }, - { - nodeType: "line-break", - content: [], - }, - ], + ], + scLabLayout: "quote", + }, + { + _model: { + title: "SCLabs-Content-v1", + }, + _path: + "/content/dam/decd-endc/content-fragments/sclabs/components/content/projects/oas-benefits-estimator/project-updates/how-feedback-shaping-estimator/measuring-success", + scId: "ESTIMATOR-MEASURING-SUCCESS", + scContentEn: { + json: [ + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "Measuring success ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "After we implement solutions, we’re able to tell if an issue has been resolved through comments and ratings. If we’ve made the right improvements, we stop seeing the issue mentioned, and the ratings start showing positive trends. This allows us to measure the success of our new features and make sure that we’ve improved our clients’ experience. ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "For example, we can look at our data from before and after the 2 initial fixes mentioned above. If we compare survey ratings from July to those in October, we see that: ", + }, + ], + }, + { + nodeType: "unordered-list", + content: [ + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "20% more people felt that the tool provided the information they needed ", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "15% more people said that the tool made them more aware of the benefits available to them ", + }, + ], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "To make sure the estimator stays user-friendly as it evolves, we’re also tracking its ease of use, which has stayed roughly the same at 80%. ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "By looking at comments and analytics together, we can see how the changes were received and which pain points are resolved. ", + }, + ], + }, + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "What we’re doing next ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "We’ll keep monitoring our success indicators as we release updated versions of the estimator. In the meantime, keep sending us comments about your experience. We’re listening! ", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "Mesure du succès ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Après avoir mis en œuvre des solutions, nous pouvons savoir si un problème a été réglé grâce aux commentaires et aux évaluations. Si nous avons apporté les bonnes améliorations, le problème n’est plus mentionné et les évaluations montrent des tendances positives. Cela nous permet de mesurer le succès de nos nouvelles fonctionnalités et de nous assurer que nous avons amélioré l’expérience de nos clients. ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Par exemple, nous pouvons regarder nos données avant et après les ", + }, + { + nodeType: "span", + content: [ + { + nodeType: "text", + value: "2 premières", + }, + ], + data: { + class: "nowrap", + }, + }, + { + nodeType: "text", + value: + " corrections mentionnées ci-dessus. Si nous comparons les résultats du sondage de juillet à ceux d'octobre, nous constatons que : ", + }, + ], + }, + { + nodeType: "unordered-list", + content: [ + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "20 % plus de personnes ont trouvé que l’outil leur avait fourni les informations recherchées; ", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "15 % plus de personnes ont indiqué que l'outil les avait renseignés sur les prestations qui leur sont offertes. ", + }, + ], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Pour nous assurer que l’estimateur reste convivial à mesure qu’il évolue, nous surveillons également sa facilité d'utilisation, qui est restée stable à environ ", + }, + { + nodeType: "span", + content: [ + { + nodeType: "text", + value: "80 %", + }, + ], + data: { + class: "nowrap", + }, + }, + { + nodeType: "text", + value: ". ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "En tenant compte à la fois des commentaires et des données analytiques, nous pouvons voir comment les changements ont été reçus et quelles sources de difficultés ont été éliminées. ", + }, + ], + }, + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "Ce qui nous attend ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Nous surveillerons nos indicateurs de succès à mesure que nous publierons de nouvelles versions de l'estimateur. Entre-temps, continuez à nous envoyer des commentaires sur votre expérience. Nous sommes à l'écoute! ", + }, + ], + }, + ], + }, + }, + ], + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/pages/projects/oas-benefits-estimator/project-updates/what-we-learned", + scId: "WHAT-WE-LEARNED", + scPageNameEn: "/en/projects/oas-benefits-estimator/what-we-learned", + scPageNameFr: + "/fr/projets/estimateur-prestations-sv/ce-que-nous-avons-appris", + scTitleEn: + "What we learned on Service Canada Labs before going live on Canada.ca", + scTitleFr: + "Ce que nous avons appris dans les laboratoires avant notre lancement sur Canada.ca", + scShortTitleEn: null, + scShortTitleFr: null, + scBreadcrumbParentPages: [ + { + scTitleEn: "Service Canada Labs", + scTitleFr: "Laboratoires de Service Canada", + scPageNameEn: "/en/home", + scPageNameFr: "/fr/accueil", + }, + { + scTitleEn: "Old Age Security Benefits Estimator", + scTitleFr: + "Estimateur des prestations de la Sécurité de la vieillesse", + scPageNameEn: "/en/projects/oas-benefits-estimator", + scPageNameFr: "/fr/projets/estimateur-prestations-sv", + }, + ], + scSubject: null, + scKeywordsEn: null, + scKeywordsFr: null, + scContentType: [ + "gc:content-types/promotional-material-featured-articles", + ], + scOwner: null, + scDateModifiedOverwrite: "2023-07-02", + scAudience: null, + scRegion: null, + scSocialMediaImageEn: { + _path: + "/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/what-we-learned.jpg", + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/what-we-learned.jpg", + width: 2670, + height: 1543, + }, + scSocialMediaImageFr: { + _path: + "/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/what-we-learned.jpg", + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/what-we-learned.jpg", + width: 2670, + height: 1543, + }, + scSocialMediaImageAltTextEn: "People giving feedback", + scSocialMediaImageAltTextFr: + "Personnes qui donnent de la rétroaction", + scNoIndex: false, + scNoFollow: false, + scFragments: [ + { + _model: { + title: "SCLabs-Comp-Content-Image-v1", + }, + scId: "ESTIMATOR-WHAT-WE-LEARNED", + scLabContent: [ + { + scId: "OAS-BENEFITS-ESTIMATOR-WHAT-WE-LEARNED", + scContentEn: { + json: [ + { + nodeType: "header", + style: "h1", + content: [ + { + nodeType: "text", + value: + "What we learned on Service Canada Labs before going live on Canada.ca", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "On April 12, 2023, we released an alpha version of the Old Age Security Benefits Estimator to the public. The tool was still in an early development phase, but it was working. We knew the earlier we let everyone use it, the earlier we'd get real feedback.", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Since then, over 4,000 people tried it out, and around 200 provided feedback. Here’s what we learned from the feedback collected in our alpha phase, how it’s helping us improve our tool and what’s next for our beta phase.", + }, + ], + }, + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "Asking experts what they think ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Ideally, the estimator could save someone a trip or a call to Service Canada. That's why we wanted to know if it answered the most common questions about Old Age Security benefits. To find out, we asked Service Canada employees. ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "They confirmed that the estimator was able to give answers to common questions about: ", + }, + ], + }, + { + nodeType: "unordered-list", + content: [ + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: "who these benefits are for ", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: "how much they can expect to receive ", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "when they can expect to receive a letter from Service Canada ", + }, + ], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "They told us about other questions they get often, and if they found any missing information. Some even gave us ideas to make this tool even more useful for Canadians. We'll be assessing these during our beta phase and will use this information to continuously improve the estimator. ", + }, + ], + }, + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "Using data to improve questions ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "We were lucky enough to be able to use data from a similar tool while we were on Service Canada Labs. This helped us gather information about the questions we were asking. ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "In alpha, entering an income in the estimator was optional. We wanted to give clients a choice. However, we realized, through our survey, that people were looking for a precise amount in the results. Only providing the maximum income to receive a benefit wasn’t enough. ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "The other tool required clients to enter an income. So, we looked at their data. There was nothing to indicate that people didn’t want to do this. The question didn’t stop them from using the tool. ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "To give better results, we decided to require income in our beta estimator. This way, we can provide an amount to everyone whose income qualifies, while being confident that the tool is just as easy to use. ", + }, + ], + }, + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: + "Making improvements based on client feedback ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Our main goal for the alpha phase was to get people using the tool and get as much feedback as possible. Anyone who used our tool during our alpha phase could give us their thoughts through an anonymous feedback survey. ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "We read all the comments and ratings and found it very valuable. Through our survey, we found out that: ", + }, + ], + }, + { + nodeType: "unordered-list", + content: [ + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: "90% thought the tool was easy to use ", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "73% were more aware of the benefits available to them ", + }, + ], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Some were satisfied, some had questions, and others wanted to see different features. From the survey responses, we’ve identified the main improvements clients want to see. Many wanted: ", + }, + ], + }, + { + nodeType: "unordered-list", + content: [ + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "the ability to get an estimate from a younger age ", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "more clarity about which types of income affect benefits ", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "to have more information about their partner’s results ", + }, + ], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "We’ve already started working on these features and other adjustments. For example, in the beta version now on Canada.ca, we’ve added more detailed and visible results for partners. We’re looking forward to having this improvement and other tweaks make the tool better for Canadians. ", + }, + ], + }, + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "Share your feedback ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "We’re still collecting and addressing feedback! The estimator is still in active development and will be evolving to better meet your needs throughout the beta. Expect to see some changes! ", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "header", + style: "h1", + content: [ + { + nodeType: "text", + value: + "Ce que nous avons appris dans les laboratoires avant notre lancement sur Canada.ca ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Le 12 avril 2023, nous avons publié une version alpha de l’Estimateur des prestations de la Sécurité de la vieillesse. L’outil était encore dans une phase de développement préliminaire, mais il fonctionnait. Nous savions que nous pourrions obtenir de la véritable rétroaction plus tôt si nous permettions à tout le monde de l’utiliser. ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Depuis, plus de 4 000 personnes l’ont essayé et environ 200 ont donné leur rétroaction. Voici ce que nous avons appris des avis recueillis au cours de notre phase alpha, comment ils nous aident à améliorer notre outil et ce qui nous attend pour notre phase bêta. ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "Demander aux experts ce qu’ils en pensent ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Idéalement, l’estimateur pourrait épargner à quelqu’un un voyage ou un appel à Service Canada. Voilà pourquoi nous voulions savoir s’il répondait aux questions les plus fréquentes sur les prestations de la Sécurité de la vieillesse. Pour le savoir, nous avons consulté les employés de Service Canada. ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Ils ont confirmé que l’estimateur répondait aux questions les plus courantes concernant : ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "unordered-list", + content: [ + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: "à qui s’adressent ces prestations; ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "le montant qu’ils peuvent s’attendre à recevoir; ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "quand ils peuvent s’attendre à recevoir une lettre de Service Canada. ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Ils nous ont fait part d’autres questions qui leur sont souvent posées et nous ont dit s’ils avaient trouvé des informations manquantes. Certains nous ont même donné des idées pour rendre cet outil encore plus utile pour la population canadienne. Nous évaluerons ces idées au cours de notre phase bêta et nous utiliserons ces informations pour continuer à améliorer l’estimateur. ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: + "Utiliser des données pour améliorer les questions ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Nous avions la chance de pouvoir utiliser les données d’un outil similaire lorsque nous étions sur les laboratoires de Service Canada. Cela nous a permis de recueillir des informations sur nos questions. ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Dans la version alpha, il était facultatif de saisir un revenu dans I’estimateur. Nous voulions donner le choix aux clients. Cependant, nous nous sommes rendu compte, grâce à notre sondage, que les gens recherchaient un montant précis dans les résultats. Indiquer le revenu maximum pour recevoir une prestation n’était pas suffisant. ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "L’autre outil exigeait que les clients entrent un revenu. Nous avons donc examiné leurs données. Rien n’indiquait que les gens ne voulaient pas remplir ce champ. La question ne les empêchait pas d’utiliser l’outil. ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Pour fournir de meilleurs résultats, nous avons décidé d’exiger un revenu dans notre estimateur bêta. De cette manière, nous pouvons fournir un montant à toutes les personnes dont le revenu est admissible, tout en étant assurés que l’outil est tout aussi facile à utiliser. ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: + "Apporter des améliorations à partir de la rétroaction des clients ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Notre objectif principal pour la phase alpha était d’amener les gens à utiliser l’outil et de recevoir le plus de rétroaction possible. Toute personne ayant utilisé notre outil pendant la phase alpha pouvait nous faire part de ses impressions en répondant à un sondage anonyme. ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Nous avons lu tous les commentaires et évaluations et les avons trouvés très utiles. Notre sondage nous a permis de constater que : ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "unordered-list", + content: [ + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "90 % ont trouvé que l’outil était facile à utiliser; ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "73 % étaient plus conscients des prestations qui leur étaient offertes. ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Certains étaient satisfaits, certains avaient des questions et d’autres voulaient voir d’autres fonctionnalités. À partir des réponses au sondage, nous avons identifié les principales améliorations souhaitées par les clients. De nombreuses personnes voulaient : ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "unordered-list", + content: [ + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "pouvoir obtenir une estimation d’un plus jeune âge;   ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "plus de clarté sur les types de revenus qui affectent les prestations;  ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "avoir plus d’information sur les résultats de leur partenaire.   ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Nous avons déjà commencé à travailler sur ces fonctionnalités et sur d’autres ajustements. Par exemple, dans la version bêta actuellement disponible sur Canada.ca, nous avons ajouté des résultats plus détaillés et plus visibles pour les partenaires. Nous avons hâte de voir cette amélioration et d’autres mises à jour améliorer l’outil pour tous. ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "Partagez votre avis ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Nous continuons à recueillir et à intégrer la rétroaction! L’estimateur est encore en développement actif et évoluera pour mieux répondre à vos besoins tout au long de la version bêta. Attendez-vous à voir des changements! ", + }, + { + nodeType: "line-break", + content: [], + }, + ], + }, + ], + }, }, ], - }, - scContentFr: { - json: [ - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "# (FR) What we learned building the Service Canada Virtual Assistant", - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "The Virtual Assistant is a conversational chatbot designed to help Canadians overcome challenges they may face as they apply for and receive benefits.", - }, - { - nodeType: "line-break", - content: [], - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: "## Why was this project important to pursue?", - }, - { - nodeType: "line-break", - content: [], - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "Our goal with the Virtual Assistant was to start with user needs and build a prototype that shows how a user-friendly chatbot experience could be. From there, we can work backwards to identify what else needs to be in place to make it possible.", - }, - { - nodeType: "line-break", - content: [], - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "Many chatbots surface general information, but the Virtual Assistant provides personalized support to those who are signed into their accounts.", - }, - { - nodeType: "line-break", - content: [], - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "By automating processes that recognize problems with applications, the four chatbot prototypes can help Canadians resolve issues with their EI or OAS applications on their own instead of having to call in for support.", - }, - { - nodeType: "line-break", - content: [], - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "## Were you able to do research with Canadians? What did you learn?", - }, - { - nodeType: "line-break", - content: [], - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "We were able to do usability testing on one of our early designs with actual employment insurance (EI) recipients. Research participants found the chatbot to be intuitive and easy to use.", - }, - { - nodeType: "line-break", - content: [], - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "We're hoping that future user research will provide us with more feedback on how we could further improve the Virtual Assistant.", - }, - { - nodeType: "line-break", - content: [], - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "## What has been the outcome of your work so far?", - }, - { - nodeType: "line-break", - content: [], - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "We've paused work on the Virtual Assistant due to lack of funding and resources needed to address significant technical barriers to implementation.", - }, - { - nodeType: "line-break", - content: [], - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - 'For the Virtual Assistant to work, it needs to access data from many different applications. The most effective way for applications to share data is through "application programming interfaces" (APIs), which allow two programs to talk to each other.', - }, - { - nodeType: "line-break", - content: [], - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "Unfortunately, the technical systems in our department can't yet provide the APIs we need to build a working version of the Virtual Assistant and no one is available to work on it right now. As a result, the Virtual Assistant is on hold until it is technically possible to launch.", - }, - { - nodeType: "line-break", - content: [], - }, - ], - }, - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "The Virtual Assistant is a benchmark of the type of service we aim to deliver to clients in the future, and we look forward to making it a reality.", - }, - { - nodeType: "line-break", - content: [], - }, - ], + scLabImage: { + scId: "WHAT-WE-LEARNED", + scImageEn: { + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/what-we-learned.jpg", + width: 2670, + height: 1543, + }, + scImageFr: { + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/what-we-learned.jpg", + width: 2670, + height: 1543, + }, + scImageMobileEn: null, + scImageMobileFr: null, + scImageAltTextEn: null, + scImageAltTextFr: null, + scImageCaptionEn: { + json: null, + }, + scImageCaptionFr: { + json: null, }, - ], - }, - }, - { - scId: "EXPLORE-THE-VIRTUAL-ASSISTANT", - scTitleEn: "Explore the Virtual Assistant", - scTitleFr: "Découvrez l'assistant virtuel", - scContentEn: { - json: null, - }, - scContentFr: { - json: null, + }, + scLabLayout: "default", }, - scImageEn: null, - scImageFr: null, - scImageAltTextEn: null, - scImageAltTextFr: null, - scLabsButton: [ - { - scId: "EXPLORE-THE-VIRTUAL-ASSISTANT", - scTitleEn: "Explore the Virtual Assistant", - scTitleFr: "Découvrez l'assistant virtuel", - scDestinationURLEn: "/en/projects/virtual-assistant/try-it-out", - scDestinationURLFr: "/fr/projets/assistant-virtuel/lessayer", - scButtonType: ["gc:custom/decd-endc/button-type/primary"], + { + _model: { + title: "SCLabs-Button-v1", }, - ], - }, - ], - }, + scId: "GIVE-FEEDBACK-OAS-ESTIMATOR", + scTitleEn: "Give feedback", + scTitleFr: "Fournir des commentaires", + scDestinationURLEn: + "https://srv217.services.gc.ca/ihst4/Intro.aspx?cid=74938e05-8e91-42a9-8e9d-29daf79f6fe0&lc=eng", + scDestinationURLFr: + "https://srv217.services.gc.ca/ihst4/Intro.aspx?cid=74938e05-8e91-42a9-8e9d-29daf79f6fe0&lc=fra", + scButtonType: ["gc:custom/decd-endc/button-type/secondary"], + }, + ], + }, + ], }, }, }; @@ -1763,6 +3191,13 @@ export const dictionaryData = { data: { dictionaryV1List: { items: [ + { + _path: + "/content/dam/decd-endc/content-fragments/sch/dictionary/opens-in-a-new-tab", + scId: "opens-in-a-new-tab", + scTermEn: "(Opens in a new tab)", + scTermFr: "(S'ouvre dans un nouvel onglet)", + }, { _path: "/content/dam/decd-endc/content-fragments/sclabs/dictionary/all", @@ -1784,6 +3219,27 @@ export const dictionaryData = { scTermEn: "Filter by:", scTermFr: "Filtrer par :", }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/filter-by-project", + scId: "DICTIONARY-FILTER-BY-PROJECT", + scTermEn: "Filter by project", + scTermFr: "Filtrer par projet", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/filter-by-project-status", + scId: "DICTIONARY-FILTER-BY-PROJECT-STATUS", + scTermEn: "Filter by project status", + scTermFr: "Filtrer par état du projet", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/last-updated", + scId: "LAST-UPDATED", + scTermEn: "Last updated:", + scTermFr: "Dernière mise à jour :", + }, { _path: "/content/dam/decd-endc/content-fragments/sclabs/dictionary/on-this-page", @@ -1809,9 +3265,16 @@ export const dictionaryData = { _path: "/content/dam/decd-endc/content-fragments/sclabs/dictionary/paused", scId: "PAUSED", - scTermEn: "Paused", + scTermEn: "Paused:", scTermFr: "Interrompu :", }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/posted-on", + scId: "POSTED-ON", + scTermEn: "Posted on:", + scTermFr: "Publié le :", + }, { _path: "/content/dam/decd-endc/content-fragments/sclabs/dictionary/project-stage", @@ -1819,6 +3282,13 @@ export const dictionaryData = { scTermEn: "Project stage:", scTermFr: "Phase du projet :", }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/project-updates", + scId: "PROJECT-UPDATES", + scTermEn: "Project updates", + scTermFr: "Mises à jour du projet", + }, { _path: "/content/dam/decd-endc/content-fragments/sclabs/dictionary/required-information", @@ -1826,6 +3296,13 @@ export const dictionaryData = { scTermEn: "Required information", scTermFr: "Renseignements obligatoires", }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/see-all-updates-project", + scId: "DICTIONARY-SEE-ALL-UPDATES-PROJECT", + scTermEn: "See all updates about this project", + scTermFr: "Consulter toutes les mises à jour de ce projet", + }, { _path: "/content/dam/decd-endc/content-fragments/sclabs/dictionary/started", @@ -1837,7 +3314,7 @@ export const dictionaryData = { _path: "/content/dam/decd-endc/content-fragments/sclabs/dictionary/summary", scId: "SUMMARY", - scTermEn: "Summary", + scTermEn: "Summary:", scTermFr: "Résumé :", }, { diff --git a/__tests__/pages/home.test.js b/__tests__/pages/home.test.js index 3bb0f2c9b6..70ec73c5c0 100644 --- a/__tests__/pages/home.test.js +++ b/__tests__/pages/home.test.js @@ -5,13 +5,15 @@ import { render, screen } from "@testing-library/react"; import Home from "../../pages/home"; import { homePageData } from "../../__mocks__/mockStore"; import { experimentsData } from "../../__mocks__/mockStore"; +import { dictionaryData } from "../../__mocks__/mockStore"; describe("Home", () => { it("renders without crashing", () => { render( ); expect( diff --git a/components/atoms/Link.js b/components/atoms/Link.js index 62fa643450..2b0e12e394 100644 --- a/components/atoms/Link.js +++ b/components/atoms/Link.js @@ -3,10 +3,25 @@ import PropTypes from "prop-types"; // Use this component for Footer link and use Next.js // for all links within the site -export function Link(props) { +export function Link({ + href = "#", + target = "_self", + ariaLabel, + component = "a", + linkStyle, + disabled, + lang, + locale, + onClick, + id, + dataGcAnalyticsCustomClick, + text, + abbr, + ...rest +}) { //Styling for links based on Figma Design let basicStyle = ""; - switch (props.linkStyle) { + switch (linkStyle) { case "basicStyleWithEmphasis": basicStyle = "underline text-multi-blue-blue70b font-body text-browserh5 font-bold text-mobileh5 leading-33px hover:text-multi-blue-blue50b"; @@ -33,11 +48,11 @@ export function Link(props) { break; default: basicStyle = - "underline text-multi-blue-blue70b font-body text-browserh5 leading-33px hover:text-multi-blue-blue50b"; + "underline underline-offset-4 text-multi-blue-blue70b font-body text-browserh5 leading-33px hover:text-multi-blue-blue50b"; break; } - const Component = props.component || "a"; + const Component = component || "a"; function onKeyDown() { true; @@ -45,62 +60,34 @@ export function Link(props) { return Component !== "a" ? ( - - {/* */} - - {props.text} - - {/* */} - - {props.abbr} - - + {text} ) : ( - {/* */} - - {props.text} - - {/* */} - - {props.abbr} - + {text} ); } -Link.defaultProps = { - target: "_self", - href: "#", -}; - Link.propTypes = { /** * The text that Text Link will display diff --git a/components/fragment_renderer/FragmentRender.js b/components/fragment_renderer/FragmentRender.js index 7d0d69b5d0..047f882f24 100644 --- a/components/fragment_renderer/FragmentRender.js +++ b/components/fragment_renderer/FragmentRender.js @@ -17,7 +17,7 @@ const FRAGMENTS = { "SCLabs-Image-v1": ImageWithCollapse, }; -const mapFragmentsToProps = (fragmentData, fragmentName, locale) => { +const mapFragmentsToProps = (fragmentData, fragmentName, locale, excludeH1) => { switch (fragmentName) { case "SCLabs-Feature-v1": return { @@ -63,6 +63,7 @@ const mapFragmentsToProps = (fragmentData, fragmentName, locale) => { ? fragmentData.scLabContent[0].scContentEn.json : fragmentData.scLabContent[0].scContentFr.json, layout: fragmentData.scLabLayout, + excludeH1: excludeH1, }; case "SCLabs-Comp-Content-v1": @@ -146,7 +147,8 @@ export default function FragmentRender(props) { {...mapFragmentsToProps( fragmentData, fragmentData?._model.title, - props.locale + props.locale, + props.excludeH1 )} /> ); diff --git a/components/fragment_renderer/fragment_components/BasicTextWithImage.js b/components/fragment_renderer/fragment_components/BasicTextWithImage.js index bc8c6b5528..dee67fc2b6 100644 --- a/components/fragment_renderer/fragment_components/BasicTextWithImage.js +++ b/components/fragment_renderer/fragment_components/BasicTextWithImage.js @@ -1,7 +1,14 @@ import Image from "next/image"; import TextRender from "../../text_node_renderer/TextRender"; -export default function BasicTextWithImage({ src, alt, width, height, data }) { +export default function BasicTextWithImage({ + src, + alt, + width, + height, + data, + excludeH1, +}) { return (
@@ -19,7 +26,7 @@ export default function BasicTextWithImage({ src, alt, width, height, data }) {
- +
); diff --git a/components/fragment_renderer/fragment_components/TextWithImage.js b/components/fragment_renderer/fragment_components/TextWithImage.js index 9546e51bd2..45db32e216 100644 --- a/components/fragment_renderer/fragment_components/TextWithImage.js +++ b/components/fragment_renderer/fragment_components/TextWithImage.js @@ -8,6 +8,7 @@ export default function TextWithImage({ height, data, layout, + excludeH1, }) { switch (layout) { case "default": @@ -18,6 +19,7 @@ export default function TextWithImage({ width={width} height={height} data={data} + excludeH1={excludeH1} /> ); case "image-vertical-line-content": @@ -28,6 +30,7 @@ export default function TextWithImage({ width={width} height={height} data={data} + excludeH1={excludeH1} /> ); default: diff --git a/components/molecules/Card.js b/components/molecules/Card.js index cc60e79543..a36cdf0b98 100644 --- a/components/molecules/Card.js +++ b/components/molecules/Card.js @@ -22,7 +22,7 @@ export const Card = (props) => {
{ ) : ( "" )} -

- {props.description} -

+ {props.htmlDesc ? ( + props.htmlDesc + ) : ( +

+ {props.description} +

+ )} {props.showButton ? ( { + return ( +
  • + + +

    + {locale === "en" ? "Project:" : "Projet :"} +

    +

    {`${update.scDateModifiedOverwrite}`}

    +     + +

    + {locale === "en" + ? dictionary.items[11].scTermEn + : dictionary.items[11].scTermFr} +

    +

    {`${update.scDateModifiedOverwrite}`}

    +     +
    • + } + /> + + ); + }); + + return ( +
    +
    +
    +

    {heading}

    +
      {updatesCards}
    +
    +
    + +
    +
    +
    +
    +
    + ); +} diff --git a/components/organisms/ExploreUpdates.stories.js b/components/organisms/ExploreUpdates.stories.js new file mode 100644 index 0000000000..aee7d53cf6 --- /dev/null +++ b/components/organisms/ExploreUpdates.stories.js @@ -0,0 +1,258 @@ +import React from "react"; +import { ExploreUpdates } from "./ExploreUpdates"; + +export default { + title: "Components/organisms/ExploreUpdates", + component: ExploreUpdates, +}; + +const Template = (args) => ; + +export const Default = Template.bind({}); + +Default.args = { + locale: "en", + heading: "Explore more updates", + updatesData: [ + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/pages/projects/oas-benefits-estimator/project-updates/how-feedback-is-shaping-the-estimator", + scId: "HOW-FEEDBACK-SHAPING-ESTIMATOR", + scPageNameEn: "/en/projects/oas-benefits-estimator/how-feedback-shaping", + scPageNameFr: + "/fr/projets/estimateur-prestations-sv/faconner-grace-retroaction", + scTitleEn: "How feedback is shaping the estimator", + scTitleFr: "Façonner l’estimateur grâce à la rétroaction", + scBreadcrumbParentPages: [ + { + scTitleEn: "Service Canada Labs", + scTitleFr: "Laboratoires de Service Canada", + scPageNameEn: "/en/home", + scPageNameFr: "/fr/accueil", + }, + { + scTitleEn: "Old Age Security Benefits Estimator", + scTitleFr: + "Estimateur des prestations de la Sécurité de la vieillesse", + scPageNameEn: "/en/projects/oas-benefits-estimator", + scPageNameFr: "/fr/projets/estimateur-prestations-sv", + }, + ], + scSubject: ["gc:subjects/gv-government-and-politics/government-services"], + scKeywordsEn: "feedback, benefits, estimator", + scKeywordsFr: "rétroaction, prestations, estimateur", + scContentType: [ + "gc:content-types/promotional-material-featured-articles", + ], + scOwner: ["gc:institutions/service-canada"], + scDateModifiedOverwrite: "2023-12-12", + scSocialMediaImageEn: { + _path: + "/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/feedback.jpg", + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/feedback.jpg", + width: 2670, + height: 1543, + }, + scSocialMediaImageFr: { + _path: + "/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/feedback.jpg", + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/feedback.jpg", + width: 2670, + height: 1543, + }, + scSocialMediaImageAltTextEn: + " Different kinds of feedback being gathered", + scSocialMediaImageAltTextFr: + " Un rassemblement de différents types de rétroaction", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/pages/projects/oas-benefits-estimator/project-updates/what-we-learned", + scId: "WHAT-WE-LEARNED", + scPageNameEn: "/en/projects/oas-benefits-estimator/what-we-learned", + scPageNameFr: + "/fr/projets/estimateur-prestations-sv/ce-que-nous-avons-appris", + scTitleEn: + "What we learned on Service Canada Labs before going live on Canada.ca", + scTitleFr: + "Ce que nous avons appris dans les laboratoires avant notre lancement sur Canada.ca", + scBreadcrumbParentPages: [ + { + scTitleEn: "Service Canada Labs", + scTitleFr: "Laboratoires de Service Canada", + scPageNameEn: "/en/home", + scPageNameFr: "/fr/accueil", + }, + { + scTitleEn: "Old Age Security Benefits Estimator", + scTitleFr: + "Estimateur des prestations de la Sécurité de la vieillesse", + scPageNameEn: "/en/projects/oas-benefits-estimator", + scPageNameFr: "/fr/projets/estimateur-prestations-sv", + }, + ], + scContentType: [ + "gc:content-types/promotional-material-featured-articles", + ], + scDateModifiedOverwrite: "2023-07-02", + scSocialMediaImageEn: { + _path: + "/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/what-we-learned.jpg", + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/what-we-learned.jpg", + width: 2670, + height: 1543, + }, + scSocialMediaImageFr: { + _path: + "/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/what-we-learned.jpg", + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/what-we-learned.jpg", + width: 2670, + height: 1543, + }, + scSocialMediaImageAltTextEn: "People giving feedback", + scSocialMediaImageAltTextFr: "Personnes qui donnent de la rétroaction", + }, + ], + dictionary: { + items: [ + { + _path: + "/content/dam/decd-endc/content-fragments/sch/dictionary/opens-in-a-new-tab", + scId: "opens-in-a-new-tab", + scTermEn: "(Opens in a new tab)", + scTermFr: "(S'ouvre dans un nouvel onglet)", + }, + { + _path: "/content/dam/decd-endc/content-fragments/sclabs/dictionary/all", + scId: "ALL", + scTermEn: "All", + scTermFr: "Tous", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/ended", + scId: "ENDED", + scTermEn: "Ended", + scTermFr: "Fin", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/filter-by", + scId: "FILTER-BY", + scTermEn: "Filter by:", + scTermFr: "Filtrer par :", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/filter-by-project", + scId: "DICTIONARY-FILTER-BY-PROJECT", + scTermEn: "Filter by project", + scTermFr: "Filtrer par projet", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/filter-by-project-status", + scId: "DICTIONARY-FILTER-BY-PROJECT-STATUS", + scTermEn: "Filter by project status", + scTermFr: "Filtrer par état du projet", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/last-updated", + scId: "LAST-UPDATED", + scTermEn: "Last updated:", + scTermFr: "Dernière mise à jour :", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/on-this-page", + scId: "ON-THIS-PAGE", + scTermEn: "On this page", + scTermFr: "Sur cette page", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/optional-information", + scId: "OPTIONAL-INFORMATION", + scTermEn: "Optional information", + scTermFr: "Renseignements optionnels", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/past-projects", + scId: "PAST-PROJECTS", + scTermEn: "Past projects", + scTermFr: "Projets antérieurs", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/paused", + scId: "PAUSED", + scTermEn: "Paused:", + scTermFr: "Interrompu :", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/posted-on", + scId: "POSTED-ON", + scTermEn: "Posted on:", + scTermFr: "Publié le :", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/project-stage", + scId: "PROJECT-STAGE", + scTermEn: "Project stage:", + scTermFr: "Phase du projet :", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/project-updates", + scId: "PROJECT-UPDATES", + scTermEn: "Project updates", + scTermFr: "Mises à jour du projet", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/required-information", + scId: "REQUIRED-INFORMATION", + scTermEn: "Required information", + scTermFr: "Renseignements obligatoires", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/see-all-updates-project", + scId: "DICTIONARY-SEE-ALL-UPDATES-PROJECT", + scTermEn: "See all updates about this project", + scTermFr: "Consulter toutes les mises à jour de ce projet", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/started", + scId: "STARTED", + scTermEn: "Started:", + scTermFr: "Début :", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/summary", + scId: "SUMMARY", + scTermEn: "Summary:", + scTermFr: "Résumé :", + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/dictionary/upcoming-projects", + scId: "UPCOMING-PROJECTS", + scTermEn: "Upcoming projects", + scTermFr: "Projets à venir", + }, + ], + }, + href: "#", + linkLabel: "See more updates", +}; diff --git a/components/organisms/ExploreUpdates.test.js b/components/organisms/ExploreUpdates.test.js new file mode 100644 index 0000000000..3c07b06699 --- /dev/null +++ b/components/organisms/ExploreUpdates.test.js @@ -0,0 +1,26 @@ +import React from "react"; +import { render, screen } from "@testing-library/react"; +import { Default } from "./ExploreUpdates.stories.js"; +import { axe, toHaveNoViolations } from "jest-axe"; +import { ExploreUpdates } from "./ExploreUpdates"; + +expect.extend(toHaveNoViolations); + +describe("ExploreUpdates", () => { + test("renders properly with default props", async () => { + const { container } = render(); + expect(screen.getByText("Explore more updates")).toBeInTheDocument(); + expect( + screen.getByText("How feedback is shaping the estimator") + ).toBeInTheDocument(); + expect( + screen.getByText( + "What we learned on Service Canada Labs before going live on Canada.ca" + ) + ).toBeInTheDocument(); + expect(screen.getAllByText("Project:")[0]).toBeInTheDocument(); + expect(screen.getAllByText("Posted on:")[0]).toBeInTheDocument(); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/components/organisms/Footer.js b/components/organisms/Footer.js index c5367ba6ac..799b2c3ab1 100644 --- a/components/organisms/Footer.js +++ b/components/organisms/Footer.js @@ -38,7 +38,9 @@ export const Footer = ({ preFooterTitle, preFooterLink, preFooterLinkText, + contactLink = "https://www.canada.ca/en/contact.html", lang, + withMainBand = true, }) => { return (