cds-snc / c19-benefits-node

Answer some questions to find which federal programs can help you https://covid-benefits.alpha.canada.ca/. - Répondez à quelques questions pour trouver quels programmes d’aide financière fédéraux s’offrent à vous https://covid-prestations.alpha.canada.ca/.

This repo is archived. Please use https://github.com/DTS-STN/c19-benefits-node instead.

La version française suit.

Find financial help during COVID-19

COVID-19 has had a severe financial impact on people living in Canada. The benefit landscape is hard to navigate and is changing quickly.

This product helps Canadians:

• Find existing and new individual benefits relevant to COVID-19,
• Anonymously answer a few simple questions to get a personalized list of benefits that could help them, and,
• Calculate how much financial assistance may be coming their way, and when, so they can plan accordingly.

Explore it here: https://covid-benefits.alpha.canada.ca.

Benefits and help included:

• Canada Emergency Response Benefit
• Canada Emergency Student Benefit (CESB)
• Work-Sharing
• Mortgage support
• Provincial help for renters
• Suspending repayment and interest on student and apprentice loans
• Canada Child Benefit
• One-time payments for OAS and GIS recipients
• Reduced minimum withdrawals for Registered Retirement Income Funds
• Financial aid for 2021 school year
• GST tax credit

This product is updated frequently. Notable updates are captured in the changelog.

Built with

This project is based on the CDS Node Starter and is built with:

• Node.js >= 10.x
• Express web framework
• Nunjucks view templates
• Sass (Syntactically Awesome Style Sheets) for reusable styles
• Tailwindcss a utility-first css framework for rapidly building custom designs
• PostCSS
• PurgeCSS

Running locally

Clone this repository

git clone https://github.com/cds-snc/c19-benefits-node.git

Install dependencies

cd c19-benefits-node
npm i

Run in development mode:

npm run dev

Browse application on http://localhost:3000

Configuration

There are some environment variables that can optionally be configured. You can see a list in .env.example.

Public vars

There is a .env.public file with a few non-sensitive environment variables. These can be kept in this file, or overridden by passing values through the runtime environment.

DOMAIN_EN=
DOMAIN_FR=
LAST_UPDATED=

DOMAIN_EN and DOMAIN_FR will be used by the language switcher to swap domains when changing languages. If not provided, language switching will only affect the url path.

LAST_UPDATED is used to display the Last Updated string on the Start screen.

Testing

There are Unit (Jest) and e2e (Cypress) tests available.

To run unit tests:

npm run test

To run Cypress tests:

npm run cypress:run:test

Feedback component

The feedback component can be configured to send results to either Notify or Airtable.

Notify integration

To send Feedback to an email address, you should configure the following environment variables:

NOTIFY_ENDPOINT=
NOTIFY_API_KEY=
FEEDBACK_EMAIL_TO=

Airtable integration

To send Feedback to an Airtable base, you should configure the following environment variables:

AIRTABLE_API_KEY=
AIRTABLE_BASE_ID=

Your airtable base should contain a table named Feedback with the following columns:

• date
• session
• version
• url
• problems
• language

Static Asset CDN

When deploying this to a production environment, you can optionally load static assets from a CDN. To do this, configure the CDN_PREFIX env variable. This should be the base url of the CDN where the assets are stored.

When referencing static assets (CSS, JS, images) in nunjucks templates, there is a helper available:

<img src="{{ asset('/img/sig-blk-en.svg') }}" alt="Government of Canada">

The asset() helper will return the path to the asset prefixed by the CDN_PREFIX if available, otherwise it will return a local path.

---------------------------------------------------------------------

Trouver de l’aide financière pendant la COVID-19

La COVID-19 a provoqué de graves répercussions financières sur la population canadienne. Les multiples programmes d’aide disponibles sont difficiles à naviguer et changent souvent et rapidement.

Ce produit permet aux canadiens:

• De trouver les programmes d’aide récemment annoncés ou déjà existant pour les particuliers en lien à la COVID-19
• De recevoir une liste pertinente et personnalisé de prestations pouvant les aider et
• De prévoir le montant des prestations et le moment où ils recevront celles-ci, afin de mieux planifier leurs dépenses et obligations financières.

Consulter l’outil ici: https://covid-prestations.alpha.canada.ca.

Prestations et programmes d’aide compris:

• Prestation canadienne d’urgence (PCU)
• Prestation canadienne d'urgence pour les étudiants (PCUE)
• Travail partagé
• Soutien hypothécaire
• Aide provinciale pour les locataires
• Suspension du remboursement des prêts d'études et aux apprentis et des intérêts applicables
• Allocation canadienne pour enfants
• Paiement unique pour les personnes reçevant la pension SV et le SRG
• Réduction du retrait minimal des FERR
• Aide financière aux études pour l’année scolaire 2021
• Crédit pour la TPS

Ce produit est mis-à-jour fréquemment. Les changements majeurs apparaissent dans le journal des modifications (anglais seulement).

Contributions

Ce projet est conçu sur la base CDS Node Starter et utilise les contributions suivantes :

• Node.js >= 10.x
• Environnement Web Express
• Gabarits Nunjucks
• Feuilles de styles Sass (Syntactically Awesome Style Sheets)
• Tailwindcss un environnement CSS modulaire accélérant la conception de pages web
• PostCSS
• PurgeCSS

Exécuter localement

Cloner ce référentiel

git clone https://github.com/cds-snc/c19-benefits-node.git

Installer les dépendances

cd c19-benefits-node
npm i

Exécuter en mode développement

npm run dev

Accéder à l’application au http://localhost:3000

Configuration

Certaines valeurs d'environnement peuvent être configurés. Cette étape est optionnelle. Consultez la liste des valeurs disponibles dans .env.example.

Variables publiques

Le fichier .env.public contient des variables d’environnement non-confidentielles. Ces valeurs peuvent être laissées telles-qu’elles, ou écrasées par par les variables d'environnement à l’exécution.

DOMAIN_EN=
DOMAIN_FR=
LAST_UPDATED=

DOMAIN_EN et DOMAIN_FR sont employées par le commutateur de langue afin d’échanger les domaines lorsque la langue passe du français à l’anglais, ou vice-versa. Si aucune valeur n’est donnée, le commutateur de langue n’affectera que le chemin de l’URL.

LAST_UPDATED est employée pour afficher la valeur Last Updated sur l’écran du début.

Tests

Des test unitaires (Jest) et bout-à-bout (e2e Cypress) sont disponibles.

Pour exécuter les tests :

npm run test

Pour exécuter les tests Cypress :

npm run cypress:run:test

Composant de rétroaction

Le module de rétroaction peut être configuré pour être envoyé par Notify ou Airtable.

Intégration avec Notify

Pour envoyer la rétroaction à une adresse courriel, vous devez configurer les variables suivantes :

NOTIFY_ENDPOINT=
NOTIFY_API_KEY=
FEEDBACK_EMAIL_TO=

Intégration avec Airtable

Pour envoyer la rétroaction à une base Airtable, vous devez configurer les variables suivantes :

AIRTABLE_API_KEY=
AIRTABLE_BASE_ID=

Votre base Airtable devrait contenir une table nommée Feedback avec les colonnes suivantes :

• date
• session
• version
• url
• problems
• language

Ressource statiques servies par réseau de diffusion de contenu (CDN)

Lors du déploiement vers un environnement de production, vous pouvez optionnellement charger les ressources statiques à partir d’un CDN. Pour ce faire, vous devez configurer la variable d’environnement CDN_PREFIX Celle-ci devrait être l’url de base du CDN où cette ressource est est stockée.

Pour lier des ressources statiques (CSS, JS, images) dans les gabarits nunjucks, vous pouvez utiliser la fonction d’aide suivante :

<img src="{{ asset('/img/sig-blk-en.svg') }}" alt="Government of Canada">

La fonction d’aide asset() renvoie le chemin de ressources statiques définie par CDN_PREFIX,ou le chemin local si cette variable n’est pas définie.

c19-benefits-node's Issues

Mobile View: French language toggle wraps

When the interface scales down, the French language toggle wraps to a new line

...should be enough room to keep it aligned like the designs

update start page content

Update the content on the start page (as seen in the figma designs)

Checking with @michellengaiCDS about where things should be linking out to

WxT it

• Import WxT? (possible issues with stylesheet collisions - particularly with the css resets)
• or implement mandatory elements with Tailwind.

Refactor benefit-results.njk macro.

modify the "preamble" (Why did I call it that it's post not pre...), so that we don't have to have css and html in the localization file.

Routing from/within non-linear routes

• RRIF
• Gross income
• Days stopped working

Remove unused routes

• Personal
• Confirmation

Setup a11y reporting

Spruce up the way back link works

As noted in #122 there are a few issues with the way back link is integrated. With out timeline, it works for now, but in the future, would be nice to find a better solution.

• If they come in in the middle of the app, the link won’t show
• If the session clears in the middle, it also won’t work
• It’s not perfect on the first language toggle (but I’m hesitant to put a solution for this in place until #97 is worked out)
• if a person errors, the referrer will become the same page

Purge CDN when deploying a new container

Add the service name and "start over" to question pages

Summary

Above the question, we want to put the service name and the "start over" link.

mockup	what we have now

SEMMLE LGTM integration

Let's add some SAST Testing as soon as this is open sourced.

Content width fix

Cleanup schemas

All the schemas in our current code aren't relevant/don't apply to our forms + flow. Remove unneeded ones, and add just a simple one for our current questions (which at this time are just required).

Make sure that an appropriate error message is present as well.

Results Includes

Once PR #39 is merged, will need to enter final content for results includes:

• CERB
• EI Regular
• EI Sickness
• EI Workshare
• CCB
• Mortgage deferral
• Rent help
• Student loan
• RRIF

Details/summary elements may be broken on Edge

Summary

We noticed a couple problems with rendering details/summary elements, as well as svgs in Edge. It looks like you don't have them at the moment, but if you start adding them, ping me and I'll test them out in browserstack.

More detail can be found here: cds-snc/cra-claim-tax-benefits#417

Webpack config

Bring over the notifications from CPPD

Content update: M2a, M2b, M2c - Your situation(s)

Update content per figma design

Capture errors in production.

We should not display 500 errors to users in production.

Bring over logging config from CRA

CRA had some really cool logging stuff. Let's use it.

Refactor getResults module

Was a quick cut, probably some ways to make more readable/testable.

Content update: M4, M5, M7 - Housing, CCB, Student Loans

Update content per figma design.

Results calculation and display

Figure out routing for non-linear flows

Start screen (and others) submit button styling

Big green button on Start, and buttons on the rest of the screens (probably just update the macro).

Set language by domain

Note for future: Terraform/Azure CDN Custom Domain Config

According to this issue custom domain support is not yet available for Azure CDN Endpoints in the terraform provider.

To get around this for now, adding custom domains through the Azure Portal.

Install Cypress and Cypress-Axe for e2e testing

...and then configure Cypress-Axe to connect to a11y-tracker (Dave has the API key)

Content update: M3a M8 - Income earned, RRIF

Update content per figma design.

When updating M3a, make sure to update routing in the Controller - M3b is being removed

Setup automated deployments

Github actions -> Test -> Build -> Deploy

3 steps

• Test
• Build
• Deploy

Loss of all income page not aligned with figma.

In app:

in figma:

Inner page redirect on missing session data

If someone somehow arrives on a question screen and they don't have any session data, they should probably be kicked back to the start.

Create a macro for displaying benefits

Add Session ID to logs

Would like to be able to track a user through the service. To do that, could add some kind of identifier to the log output.

That identifier could perhaps be a session ID? a GUID? a hashed IP?

Infrastructure work to align with ESDC Requirements

In order to hand this back to ESDC we will need to make some changes to align with ESDC Cloud Policies (Or at least what they were before covid-19).

• Follow naming convention for prefixes
  Example: https://github.com/cds-snc/cppd-infrastructure/blob/master/cppd_medical_report/locals.tf
  https://github.com/cds-snc/cppd-infrastructure/blob/master/cppd_medical_report/terraform.tfvars
• KeyVaullt to store secrets
  https://github.com/cds-snc/cppd-infrastructure/blob/master/cppd_medical_report/azure_key_vault_secrets.tf
• AppService should get passwords from KeyVault
  https://github.com/cds-snc/cppd-infrastructure/blob/bcbb1d88ddd214552d01017b9a5bda7235516f51/cppd_medical_report/app-service-docker.tf#L39
• Common tags for a project
  Example: https://github.com/cds-snc/cppd-infrastructure/blob/master/cppd_medical_report/locals.tf

Set default language by domain

We'll have two domains resolving to our service:

• covid-benefits.alpha.canada.ca
• covid-prestations.alpha.canada.ca

At minimum, users coming in on the French domain should default to french.

Additionally, we should probably also handle switching the subdomain when switching languages.

For discussion: what to do when the subdomain and url path don't match? ie, what to do if someone arrives at the url: https://covid-benefits.alpha.canada.ca/fr/debut?

• Do we redirect to https://covid-benefits.alpha.canada.ca/en/start?
• Do we redirect to https://covid-prestations.alpha.canada.ca/fr/debut?
• Do we just render based on the uri? (so the domain only matters when entering, but after that just the URI matters)

Also: should we (can we?) remove the /en and /fr prefixes from uri's?

Content update: Benefit cards - the rest

• ccb_payment (no changes)
• gst_credit
• mortgage_deferral
• rent_help
• rrif
• student_loan

Mobile view: content area width

Seems pretty narrow (see question wrapping):

Render a build identifier in the footer

To help identify what build is currently deployed, display some sort of build identifier. We've done this in the past with a git hash.

This can either be displayed in the footer, or in a hidden comment in the page layout.

Add back button to question screens

See updated designs in Figma. There is a new "Back" button above the page title that returns the user to the previous question. (Can this just hook into the browser history?)

Flesh out getResults test suite

Got some in there, could use more robust testing

Always display GST Credit.

We need to remove the page asking the question about the GST Credit and always display it to users.

Fix title and add links to benefits on results page.

Implement Cancel link

See new designs in Figma. The Start Over link on Q pages gets moved down underneath the Next button. This is functionally the same.

Include Start Over link on Results screen

According to design:

Content update: M0, M1 - Start and first question

Update content per Figma design

Content update: Benefit cards - all of the CERB and EI cards

• cerb
• ei_regular_cerb
• ei_regular
• ei_sickness_cerb
• ei_sickness
• ei_workshare

Remove steps: M6, M3b - Days worked, GST

These steps are being removed. Routing changes should be taken care of in other issues.

Add Heading element to all Questions

See new designs in Figma. The Question is no longer the <h1> element, there is a new heading element on the page.

PR #113 removes the <h1> from the radios macro.

Routing on Question 2 needs to be corrected

Made the wrong assumption that retired folks go straight to RRIF, but it's just that the result is added for them, and so that needs to be amended so they still get asked about mortgage, etc.

Will double check the routing and add the changes while at it

Testing conveniences

Let's setup some conveniences for our testers:

• Link/button to clear the session (building on #56 which adds a /clear route, let's make that link accessible for test facilitators - do we just tell them about the route? or add a link to the footer?)
• Save session data at the end (do we just save automatically when they hit the results screen? Do we add a button for the facilitator to save the session? Make sure we save the session id, so we can query the path they took in the logs)