From b1ae7966a25cf8e8aead7df401c628cd9971dcb9 Mon Sep 17 00:00:00 2001
From: Khalid Adan <KhalidAdan@users.noreply.github.com>
Date: Tue, 1 Mar 2022 09:32:09 -0500
Subject: [PATCH 1/5] bold fixes (#195)

* Updated bold to be less harsh
---
 components/FAQ/index-e.tsx                 |  4 ++--
 components/FAQ/index-f.tsx                 |  7 +++++--
 components/Forms/CurrencyField.tsx         |  4 +++-
 components/Forms/NumberField.tsx           |  4 +++-
 components/Forms/Radio.tsx                 |  4 +++-
 components/Forms/Select.tsx                |  4 +++-
 components/Forms/TextField.tsx             |  4 ++--
 components/Forms/validation/ErrorLabel.tsx |  2 +-
 components/Layout/index.tsx                |  2 +-
 components/ResultsTable/index.tsx          | 10 +++++-----
 styles/globals.css                         | 12 ++++++------
 11 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/components/FAQ/index-e.tsx b/components/FAQ/index-e.tsx
index c0e3f84c0..009a02411 100644
--- a/components/FAQ/index-e.tsx
+++ b/components/FAQ/index-e.tsx
@@ -39,7 +39,7 @@ export const FAQE = () => (
           relationship.
         </p>
         <ul className="list-disc">
-          <p className="font-bold mb-4"> Proof of marriage can include:</p>
+          <p className="font-semibold mb-4"> Proof of marriage can include:</p>
           <li className="ml-12">A marriage certificate</li>
           <li className="ml-12">
             An official copy or extract of the church, synagogue, mosque,
@@ -57,7 +57,7 @@ export const FAQE = () => (
           </li>
         </ul>
         <ul className="list-disc">
-          <p className="font-bold mb-4">
+          <p className="font-semibold mb-4">
             Proof of common-law union can include:
           </p>
           <li className="ml-12">
diff --git a/components/FAQ/index-f.tsx b/components/FAQ/index-f.tsx
index ba86cc0eb..5ebe55758 100644
--- a/components/FAQ/index-f.tsx
+++ b/components/FAQ/index-f.tsx
@@ -43,7 +43,10 @@ export const FAQF = () => (
           de fait et une autre preuve de la relation.
         </p>
         <ul className="list-disc">
-          <p className="font-bold mb-4"> La preuve de mariage peut inclure:</p>
+          <p className="font-semibold mb-4">
+            {' '}
+            La preuve de mariage peut inclure:
+          </p>
           <li className="ml-12">un certificat de mariage;</li>
           <li className="ml-12">
             une copie officielle ou un extrait officiel des registres de
@@ -62,7 +65,7 @@ export const FAQF = () => (
           </li>
         </ul>
         <ul className="list-disc">
-          <p className="font-bold mb-4">
+          <p className="font-semibold mb-4">
             La preuve de l&apos;union de fait peut inclure:
           </p>
           <li className="ml-12">
diff --git a/components/Forms/CurrencyField.tsx b/components/Forms/CurrencyField.tsx
index 8e968faef..c56da3712 100644
--- a/components/Forms/CurrencyField.tsx
+++ b/components/Forms/CurrencyField.tsx
@@ -44,7 +44,9 @@ export const CurrencyField: React.VFC<CurrencyFieldProps> = observer(
         >
           {required && <span className="text-danger">*</span>} {label}
           {required && (
-            <span className="text-danger font-bold ml-2">({requiredText})</span>
+            <span className="text-danger font-semibold ml-2">
+              ({requiredText})
+            </span>
           )}
           <Tooltip field={name} />
         </label>
diff --git a/components/Forms/NumberField.tsx b/components/Forms/NumberField.tsx
index a9e96af48..303f07cfd 100644
--- a/components/Forms/NumberField.tsx
+++ b/components/Forms/NumberField.tsx
@@ -43,7 +43,9 @@ export const NumberField: React.VFC<NumberFieldProps> = observer((props) => {
       >
         {required && <span className="text-danger">*</span>} {label}
         {required && (
-          <span className="text-danger font-bold ml-2">({requiredText})</span>
+          <span className="text-danger font-semibold ml-2">
+            ({requiredText})
+          </span>
         )}
         <Tooltip field={name} />
       </label>
diff --git a/components/Forms/Radio.tsx b/components/Forms/Radio.tsx
index 45209669a..0beb53d0d 100644
--- a/components/Forms/Radio.tsx
+++ b/components/Forms/Radio.tsx
@@ -35,7 +35,9 @@ export const Radio: React.VFC<InputProps> = observer((props) => {
             className="mb-1.5 text-content font-semibold question-link"
             dangerouslySetInnerHTML={{ __html: label }}
           ></span>
-          <span className="text-danger font-bold ml-2">({requiredText})</span>
+          <span className="text-danger font-semibold ml-2">
+            ({requiredText})
+          </span>
           <Tooltip field={name} />
         </label>
         {error && <ErrorLabel errorMessage={error} />}
diff --git a/components/Forms/Select.tsx b/components/Forms/Select.tsx
index 38f64addb..7a6fe5f62 100644
--- a/components/Forms/Select.tsx
+++ b/components/Forms/Select.tsx
@@ -44,7 +44,9 @@ export const FormSelect: React.VFC<SelectProps> = observer(
           <span className="mb-1.5 font-semibold text-content">
             {field.label}
           </span>
-          <span className="text-danger font-bold ml-2">({requiredText})</span>
+          <span className="text-danger font-semibold ml-2">
+            ({requiredText})
+          </span>
           <Tooltip field={field.key} />
         </label>
         {error && <ErrorLabel errorMessage={error} />}
diff --git a/components/Forms/TextField.tsx b/components/Forms/TextField.tsx
index 8cc6046d4..7dc99e4d8 100644
--- a/components/Forms/TextField.tsx
+++ b/components/Forms/TextField.tsx
@@ -34,11 +34,11 @@ export const TextField: React.VFC<TextFieldProps> = observer((props) => {
         htmlFor={name}
         aria-label={name}
         data-testid="text-input-label"
-        className="text-content font-bold inline-block mb-1.5"
+        className="text-content font-semibold inline-block mb-1.5"
       >
         {required && <span className="text-danger">*</span>} {label}
         {required && (
-          <span className="text-danger font-bold ml-2">(required)</span>
+          <span className="text-danger font-semibold ml-2">(required)</span>
         )}
         <Tooltip field={name} />
       </label>
diff --git a/components/Forms/validation/ErrorLabel.tsx b/components/Forms/validation/ErrorLabel.tsx
index 500b5dbbc..7475f355b 100644
--- a/components/Forms/validation/ErrorLabel.tsx
+++ b/components/Forms/validation/ErrorLabel.tsx
@@ -3,7 +3,7 @@ export const ErrorLabel: React.VFC<{ errorMessage: string }> = ({
 }) => (
   <div
     role="alert"
-    className={`border-l-4 border-[#b6070a] opacity-90 px-3 py-1 bg-[#F3E9E8] font-bold -mt-1 mb-2`}
+    className={`border-l-4 border-[#b6070a] opacity-90 px-3 py-1 bg-[#F3E9E8] font-semibold -mt-1 mb-2`}
   >
     {errorMessage}
   </div>
diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
index a747c2d84..3d80ff3b4 100644
--- a/components/Layout/index.tsx
+++ b/components/Layout/index.tsx
@@ -39,7 +39,7 @@ export const Layout: React.VFC<{
           <Header />
           <div className="bg-primary -mx-4">
             <div className="flex flex-row justify-between items-center sm:container mx-auto">
-              <h3 className="text-h3 py-3 text-white font-bold px-4 md:px-0">
+              <h3 className="text-h3 py-3 text-white font-semibold px-4 md:px-0">
                 {tsln.menuTitle}
               </h3>
               <p></p>
diff --git a/components/ResultsTable/index.tsx b/components/ResultsTable/index.tsx
index 7bb69d0a9..dc62cf667 100644
--- a/components/ResultsTable/index.tsx
+++ b/components/ResultsTable/index.tsx
@@ -80,7 +80,7 @@ export const ResultsTable = observer(() => {
       </table>
       <div className="block md:hidden">
         <div className="mb-4">
-          <p className="bg-[#E8F2F4] font-bold px-1.5 py-2 border-b border-muted">
+          <p className="bg-[#E8F2F4] font-semibold px-1.5 py-2 border-b border-muted">
             {tsln.oas}
           </p>
           <p className="px-1.5 py-1.5">
@@ -93,7 +93,7 @@ export const ResultsTable = observer(() => {
           </p>
         </div>
         <div className="mb-4">
-          <p className="bg-[#E8F2F4] font-bold px-1.5 py-2 border-b border-muted">
+          <p className="bg-[#E8F2F4] font-semibold px-1.5 py-2 border-b border-muted">
             {tsln.gis}
           </p>
           <p className="px-1.5 py-1.5">
@@ -108,7 +108,7 @@ export const ResultsTable = observer(() => {
           </p>
         </div>
         <div className="mb-4">
-          <p className="bg-[#E8F2F4] font-bold px-1.5 py-2 border-b border-muted">
+          <p className="bg-[#E8F2F4] font-semibold px-1.5 py-2 border-b border-muted">
             {tsln.alw}
           </p>
           <p className="px-1.5 py-1.5">
@@ -121,7 +121,7 @@ export const ResultsTable = observer(() => {
           </p>
         </div>
         <div className="mb-4">
-          <p className="bg-[#E8F2F4] font-bold px-1.5 py-2 border-b border-muted">
+          <p className="bg-[#E8F2F4] font-semibold px-1.5 py-2 border-b border-muted">
             {tsln.afs}
           </p>
           <p className="px-1.5 py-1.5">
@@ -134,7 +134,7 @@ export const ResultsTable = observer(() => {
           </p>
         </div>
         <div className="mb-4">
-          <p className="bg-[#E8F2F4] font-bold px-1.5 py-2 border-b border-muted">
+          <p className="bg-[#E8F2F4] font-semibold px-1.5 py-2 border-b border-muted">
             {tsln.resultsPage.tableTotalAmount}
           </p>
           <p className="px-1.5 py-1.5 font-bold">
diff --git a/styles/globals.css b/styles/globals.css
index 1a87156bd..4bcdf0cf1 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -45,22 +45,22 @@
 
   /* typography gc overrides */
   .h1 {
-    @apply text-h1 font-bold mb-[15px] font-header-gc border-b border-header-rule;
+    @apply text-h1 font-semibold mb-[15px] font-header-gc border-b border-header-rule;
   }
   .h2 {
-    @apply text-h2 font-bold mb-[15px] font-header-gc;
+    @apply text-h2 font-semibold mb-[15px] font-header-gc;
   }
   .h3 {
-    @apply text-h3 font-bold mb-[15px] font-header-gc;
+    @apply text-h3 font-semibold mb-[15px] font-header-gc;
   }
   .h4 {
-    @apply text-h4 font-bold mb-[15px] font-header-gc;
+    @apply text-h4 font-semibold mb-[15px] font-header-gc;
   }
   .h5 {
-    @apply font-bold mb-[15px] font-header-gc;
+    @apply font-semibold mb-[15px] font-header-gc;
   }
   .h6 {
-    @apply text-h6 font-bold mb-[15px] font-header-gc;
+    @apply text-h6 font-semibold mb-[15px] font-header-gc;
   }
 
   /* form controls */

From b12a37970f8515c0b6a7953d4c5cfb3b707d698a Mon Sep 17 00:00:00 2001
From: Jeremy Kennedy <jerekennedy@deloitte.ca>
Date: Tue, 1 Mar 2022 11:46:41 -0500
Subject: [PATCH 2/5] fix privacy disclaimer (#201)

---
 pages/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index ede650465..baeaa6e9b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -62,7 +62,10 @@ const Home: NextPage = (props) => {
             {tsln.privacyDiscTitle}
           </summary>
           <div className="p-4">
-            <p>{tsln.privacyDisc}</p>
+            <p
+              className="summary-link"
+              dangerouslySetInnerHTML={{ __html: tsln.privacyDisc }}
+            />
           </div>
         </details>
 

From 08a4361e64ae0023f8dc680d2b64fe85114461c5 Mon Sep 17 00:00:00 2001
From: Khalid Adan <KhalidAdan@users.noreply.github.com>
Date: Tue, 1 Mar 2022 15:01:11 -0500
Subject: [PATCH 3/5] Feature/feb28 design updates (#202)

* remove redundant FAQ text on French under results table

* dangerous HTML on Summary Box so bold formatting works

* remove progress bar

* 'Get Results' instead of 'Estimate'

* Estimate over clear and back; Add stacked buttons for apply links with
no header

* updated buttons to match the proposed solution

* Fixing list styles for lists
---
 __tests__/components/ProgressBar.test.tsx | 155 ----------------------
 components/ConditionalLinks/index.tsx     |   6 +-
 components/ContactCTA/index.tsx           |   4 +-
 components/Forms/ComponentFactory.tsx     |  68 ++--------
 components/Forms/CurrencyField.tsx        |  14 +-
 components/Forms/FormButtons/index.tsx    |  89 +++++++++++++
 components/Layout/NeedHelpList.tsx        |   2 +-
 components/ProgressBar/index.tsx          | 114 ----------------
 components/ResultsPage/index.tsx          |   9 --
 i18n/web/en.ts                            |   2 +-
 i18n/web/fr.ts                            |   4 +-
 i18n/web/index.ts                         |   2 +-
 12 files changed, 115 insertions(+), 354 deletions(-)
 delete mode 100644 __tests__/components/ProgressBar.test.tsx
 create mode 100644 components/Forms/FormButtons/index.tsx
 delete mode 100644 components/ProgressBar/index.tsx

diff --git a/__tests__/components/ProgressBar.test.tsx b/__tests__/components/ProgressBar.test.tsx
deleted file mode 100644
index a7a52f5dc..000000000
--- a/__tests__/components/ProgressBar.test.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import '@testing-library/jest-dom'
-import { render, screen } from '@testing-library/react'
-import { Instance } from 'mobx-state-tree'
-import * as nextRouter from 'next/router'
-import React from 'react'
-import { RootStore } from '../../client-state/store'
-import { StoreProvider } from '../../components/Contexts'
-import ProgressBar from '../../components/ProgressBar'
-import { FieldCategory, Language } from '../../utils/api/definitions/enums'
-
-describe('ProgressBar component', () => {
-  let root: Instance<typeof RootStore>
-  let useRouter
-
-  beforeAll(() => {
-    useRouter = jest.spyOn(nextRouter, 'useRouter')
-    useRouter.mockImplementation(() => ({
-      route: '/',
-      pathname: '/',
-      query: '',
-      asPath: '',
-      locale: 'en',
-      locales: ['en', 'fr'],
-    }))
-  })
-
-  beforeEach(() => {
-    root = RootStore.create({
-      form: {
-        fields: [
-          {
-            key: 'income',
-            type: 'currency',
-            label:
-              'What is your current annual net income in Canadian Dollars?',
-            category: {
-              key: FieldCategory.INCOME_DETAILS,
-              text: 'Income Details',
-            },
-            order: 1,
-            placeholder: '$20,000',
-            default: undefined,
-            value: null,
-            options: [],
-            error: undefined,
-          },
-          {
-            key: 'fakefield',
-            type: 'currency',
-            label:
-              'What is your current annual net income in Canadian Dollars?',
-            category: {
-              key: FieldCategory.PERSONAL_INFORMATION,
-              text: 'Personal Information',
-            },
-            order: 1,
-            placeholder: '$20,000',
-            default: undefined,
-            value: null,
-            options: [],
-            error: undefined,
-          },
-          {
-            key: 'fakefieldtwo',
-            type: 'currency',
-            label:
-              'What is your current annual net income in Canadian Dollars?',
-            category: {
-              key: FieldCategory.LEGAL_STATUS,
-              text: 'Legal Status',
-            },
-            order: 1,
-            placeholder: '$20,000',
-            default: undefined,
-            value: null,
-            options: [],
-            error: undefined,
-          },
-        ],
-      },
-      oas: {},
-      gis: {},
-      afs: {},
-      allowance: {},
-      summary: {},
-      lang: Language.EN,
-    })
-  })
-  it('renders progress for an incomplete form', () => {
-    root.form.fields[0].setValue('10000') // set income to complete
-
-    const ui = (
-      <StoreProvider>
-        <ProgressBar
-          sections={[
-            {
-              title: 'Income Details',
-              complete: root.form.progress.income,
-            },
-            {
-              title: 'Personal Information',
-              complete: root.form.progress.personal,
-            },
-            {
-              title: 'Legal Status',
-              complete: root.form.progress.legal,
-            },
-          ]}
-        />
-      </StoreProvider>
-    )
-    render(ui)
-
-    const progress = screen.getAllByTestId('progress')
-    expect(progress[0].classList).toContain('complete-progress-section')
-    expect(progress[1].classList).toContain('incomplete-progress-section')
-    expect(progress[2].classList).toContain('incomplete-progress-section')
-  })
-
-  it('renders progress for a complete form', () => {
-    root.form.fields[0].setValue('10000')
-    root.form.fields[1].setValue('10000')
-    root.form.fields[2].setValue('10000')
-
-    const ui = (
-      <StoreProvider>
-        <ProgressBar
-          sections={[
-            {
-              title: 'Income Details',
-              complete: root.form.progress.income,
-            },
-            {
-              title: 'Personal Information',
-              complete: root.form.progress.personal,
-            },
-            {
-              title: 'Legal Status',
-              complete: root.form.progress.legal,
-            },
-          ]}
-        />
-      </StoreProvider>
-    )
-    render(ui)
-
-    const progress = screen.getAllByTestId('progress')
-    expect(progress[0].classList).toContain('complete-progress-section')
-    expect(progress[1].classList).toContain('complete-progress-section')
-    expect(progress[2].classList).toContain('complete-progress-section')
-  })
-})
diff --git a/components/ConditionalLinks/index.tsx b/components/ConditionalLinks/index.tsx
index af21c08c6..3635c6a70 100644
--- a/components/ConditionalLinks/index.tsx
+++ b/components/ConditionalLinks/index.tsx
@@ -10,11 +10,11 @@ export const ConditionalLinks: React.VFC<{ links: InfoLink[] }> = ({
   return (
     <>
       <h2 className="h2 mt-8">{moreInfo}</h2>
-      <ul className="list-disc !mt-3">
+      <ul className="list-disc !mt-3 text-content">
         {links.map((link, index) => (
-          <li key={index} className="ml-10 text-default-text underline">
+          <li key={index} className="ml-10">
             <Link href={link.url} passHref>
-              <a>{link.text}</a>
+              <a className="text-default-text underline">{link.text}</a>
             </Link>
           </li>
         ))}
diff --git a/components/ContactCTA/index.tsx b/components/ContactCTA/index.tsx
index 21a0fc4d7..5b46549f1 100644
--- a/components/ContactCTA/index.tsx
+++ b/components/ContactCTA/index.tsx
@@ -27,11 +27,11 @@ export const ContactCTA: React.VFC = () => {
         dangerouslySetInnerHTML={{ __html: tsln.contactCTA }}
       />
       {root.summary?.nextStepsLinks && (
-        <div className="flex flex-col gap-y-4 md:flex-row md:gap-x-4 mt-4">
+        <div className="flex flex-col gap-y-1">
           {root.summary.nextStepsLinks.map((link, index) => (
             <Link key={index} href={link.url} passHref>
               <a
-                className="btn btn-primary md:w-96 !mt-5 mx-1 min-w-min"
+                className="btn btn-primary !mt-5 whitespace-normal md:whitespace-nowrap md:min-w-min md:px-8 md:max-w-[480px]"
                 target="_blank"
               >
                 {link.text}
diff --git a/components/Forms/ComponentFactory.tsx b/components/Forms/ComponentFactory.tsx
index 5e450a8d0..5811e64f3 100644
--- a/components/Forms/ComponentFactory.tsx
+++ b/components/Forms/ComponentFactory.tsx
@@ -13,8 +13,8 @@ import type { ResponseSuccess } from '../../utils/api/definitions/types'
 import { Alert } from '../Alert'
 import { useStore, useTranslation } from '../Hooks'
 import { NeedHelpList } from '../Layout/NeedHelpList'
-import ProgressBar from '../ProgressBar'
 import { CurrencyField } from './CurrencyField'
+import { FormButtons } from './FormButtons'
 import { NumberField } from './NumberField'
 import { Radio } from './Radio'
 import { FormSelect } from './Select'
@@ -62,27 +62,14 @@ export const ComponentFactory: React.VFC<FactoryProps> = observer(
 
     return (
       <>
-        {incomeTooHigh ? (
-          <Alert title={root.summary.title} type={root.summary.state}>
+        {incomeTooHigh && (
+          <Alert
+            title={root.summary.title}
+            type={root.summary.state}
+            insertHTML
+          >
             {root.summary.details}
           </Alert>
-        ) : (
-          <ProgressBar
-            sections={[
-              {
-                title: tsln.category.incomeDetails,
-                complete: root.form.progress.income,
-              },
-              {
-                title: tsln.category.personalInformation,
-                complete: root.form.progress.personal,
-              },
-              {
-                title: tsln.category.legalStatus,
-                complete: root.form.progress.legal,
-              },
-            ]}
-          />
         )}
         <div className="grid grid-cols-1 md:grid-cols-3 md:gap-10 mt-10">
           <form
@@ -212,46 +199,7 @@ export const ComponentFactory: React.VFC<FactoryProps> = observer(
               return content
             })}
 
-            <div className="grid grid-cols-2 md:grid-cols-3 gap-x-3.5 md:gap-x-8 mt-20">
-              <button
-                type="button"
-                role="navigation"
-                className="btn btn-default mt-4 md:mt-0"
-                onClick={() => router.push('/')}
-              >
-                {tsln.back}
-              </button>
-              <button
-                type="button"
-                role="button"
-                className="btn btn-default mt-4 md:mt-0"
-                onClick={() => {
-                  form.clearForm()
-                }}
-              >
-                {tsln.clear}
-              </button>
-              <button
-                type="submit"
-                role="button"
-                className="btn btn-primary mt-4 md:mt-0 col-span-2 md:col-span-1 disabled:cursor-not-allowed disabled:bg-[#949494] disabled:border-0"
-                onClick={async () => {
-                  if (
-                    !form.validateAgainstEmptyFields(router.locale) &&
-                    !form.hasErrors
-                  ) {
-                    const language = document.querySelector(
-                      '#_language'
-                    ) as HTMLInputElement
-                    root.setCurrentLang(language.value as Language)
-                    root.setActiveTab(1)
-                  }
-                }}
-                disabled={incomeTooHigh}
-              >
-                {tsln.estimate}
-              </button>
-            </div>
+            <FormButtons incomeTooHigh={incomeTooHigh} />
           </form>
           <NeedHelpList title={tsln.needHelp} links={root.summary.links} />
         </div>
diff --git a/components/Forms/CurrencyField.tsx b/components/Forms/CurrencyField.tsx
index c56da3712..6a0a11b67 100644
--- a/components/Forms/CurrencyField.tsx
+++ b/components/Forms/CurrencyField.tsx
@@ -43,12 +43,14 @@ export const CurrencyField: React.VFC<CurrencyFieldProps> = observer(
           className="text-content font-semibold inline-block mb-1.5"
         >
           {required && <span className="text-danger">*</span>} {label}
-          {required && (
-            <span className="text-danger font-semibold ml-2">
-              ({requiredText})
-            </span>
-          )}
-          <Tooltip field={name} />
+          <div>
+            {required && (
+              <span className="text-danger font-semibold ml-2">
+                ({requiredText})
+              </span>
+            )}
+            <Tooltip field={name} />
+          </div>
         </label>
         {error && <ErrorLabel errorMessage={error} />}
 
diff --git a/components/Forms/FormButtons/index.tsx b/components/Forms/FormButtons/index.tsx
new file mode 100644
index 000000000..12db974fd
--- /dev/null
+++ b/components/Forms/FormButtons/index.tsx
@@ -0,0 +1,89 @@
+import { Instance } from 'mobx-state-tree'
+import { NextRouter, useRouter } from 'next/router'
+import { Form } from '../../../client-state/models/Form'
+import { RootStore } from '../../../client-state/store'
+import { WebTranslations } from '../../../i18n/web'
+import { Language } from '../../../utils/api/definitions/enums'
+import { useMediaQuery, useStore, useTranslation } from '../../Hooks'
+
+export const FormButtons: React.FC<{ incomeTooHigh: boolean }> = ({
+  incomeTooHigh,
+}) => {
+  const router = useRouter()
+  const tsln = useTranslation<WebTranslations>()
+  const root = useStore()
+  const form = root.form
+  const isMobile = useMediaQuery(992)
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 gap-x-3.5 md:gap-x-8 mt-20">
+      {isMobile && (
+        <SubmitButton
+          label={tsln.getResults}
+          router={router}
+          root={root}
+          form={form}
+          incomeTooHigh={incomeTooHigh}
+        />
+      )}
+      <button
+        type="button"
+        role="navigation"
+        className="btn btn-default mt-4 md:mt-0"
+        onClick={() => router.push('/')}
+      >
+        {tsln.back}
+      </button>
+      <button
+        type="button"
+        role="button"
+        className="btn btn-default mt-4 md:mt-0"
+        onClick={() => {
+          form.clearForm()
+        }}
+      >
+        {tsln.clear}
+      </button>
+      {!isMobile && (
+        <SubmitButton
+          label={tsln.getResults}
+          router={router}
+          root={root}
+          form={form}
+          incomeTooHigh={incomeTooHigh}
+        />
+      )}
+    </div>
+  )
+}
+
+const SubmitButton: React.FC<{
+  router: NextRouter
+  form: Instance<typeof Form>
+  root: Instance<typeof RootStore>
+  label: string
+  incomeTooHigh: boolean
+}> = ({ router, form, root, label, incomeTooHigh }) => {
+  return (
+    <button
+      type="submit"
+      role="button"
+      className="btn btn-primary mt-4 md:mt-0 col-span-2 md:col-span-1 disabled:cursor-not-allowed disabled:bg-[#949494] disabled:border-0"
+      onClick={async () => {
+        if (
+          !form.validateAgainstEmptyFields(router.locale) &&
+          !form.hasErrors
+        ) {
+          const language = document.querySelector(
+            '#_language'
+          ) as HTMLInputElement
+          root.setCurrentLang(language.value as Language)
+          root.setActiveTab(1)
+        }
+      }}
+      disabled={incomeTooHigh}
+    >
+      {label}
+    </button>
+  )
+}
diff --git a/components/Layout/NeedHelpList.tsx b/components/Layout/NeedHelpList.tsx
index 42aefd907..5e06f516b 100644
--- a/components/Layout/NeedHelpList.tsx
+++ b/components/Layout/NeedHelpList.tsx
@@ -40,7 +40,7 @@ export const NeedHelpList: React.VFC<{
     <div className="fixedElement z-10" ref={ref}>
       <div className="p-8 bg-emphasis rounded mt-8 md:mt-0 md:max-w-[380px]">
         <h2 className="h2">{title}</h2>
-        <ul className="pl-5 list-disc">
+        <ul className="pl-5 list-disc text-content">
           {links &&
             links.map(({ text, url }, index) => (
               <li key={index}>
diff --git a/components/ProgressBar/index.tsx b/components/ProgressBar/index.tsx
deleted file mode 100644
index 30a1368cf..000000000
--- a/components/ProgressBar/index.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import * as React from 'react'
-import { useMediaQuery, useTranslation } from '../Hooks'
-
-type Section = {
-  title: string
-  complete: boolean
-  first?: boolean
-  last?: boolean
-}
-
-interface ProgressBarProps {
-  sections: Section[]
-  estimateSection?: boolean
-}
-
-const ProgressSection: React.FC<Section> = ({
-  title,
-  complete,
-  first,
-  last,
-}) => {
-  const isBreakpoint = useMediaQuery(992)
-
-  return (
-    <>
-      {!first && (
-        <div
-          className={`flex-auto border-t-4 ${
-            complete ? 'text-primary' : 'text-[#6F6F6F]'
-          }`}
-        ></div>
-      )}
-      <div className="flex items-center mb-3.5 md:mb-0">
-        <svg
-          width="28"
-          height="28"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          data-testid="progress"
-          className={`${
-            complete
-              ? 'text-primary complete-progress-section'
-              : 'text-[#6F6F6F] incomplete-progress-section'
-          } fill-current stroke-white z-10`}
-        >
-          <rect
-            x="1.5"
-            y="26.5"
-            width="26"
-            height="26"
-            rx="12.5"
-            transform="rotate(-90 1.5 26.5)"
-            strokeWidth="3"
-          />
-          <path
-            d="m6 14.214 5.321 5.179L22.571 8"
-            strokeWidth="3"
-            strokeLinejoin="round"
-            stroke={complete ? '#fff' : 'text-[#6F6F6F]'}
-          />
-        </svg>
-        {isBreakpoint && (
-          <svg
-            className={`${
-              complete ? 'text-primary' : 'text-[#6F6F6F]'
-            } fill-current stroke-white absolute`}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            {!last && <rect x="11.5" y="83" width="5" height="34" />}
-          </svg>
-        )}
-        <span
-          className={`whitespace-nowrap mx-1.5 font-semibold ${
-            complete ? 'text-primary' : 'text-[#6F6F6F]'
-          }`}
-        >
-          {title}
-        </span>
-      </div>
-    </>
-  )
-}
-
-export const ProgressBar: React.VFC<ProgressBarProps> = ({
-  sections,
-  estimateSection,
-}) => {
-  const estimate = useTranslation<string>('estimate')
-  return (
-    <div className="flex flex-col md:flex-row items-start md:items-center">
-      {sections.map(({ title, complete }, index: number) => (
-        <ProgressSection
-          key={index}
-          title={title}
-          complete={complete}
-          first={index == 0}
-        />
-      ))}
-      <div
-        className={`flex-auto border-t-4 ${
-          estimateSection ? 'text-primary' : 'text-[#6F6F6F]'
-        }`}
-      ></div>
-      <ProgressSection
-        title={estimate}
-        complete={estimateSection}
-        first={false}
-        last={true}
-      />
-    </div>
-  )
-}
-
-export default ProgressBar
diff --git a/components/ResultsPage/index.tsx b/components/ResultsPage/index.tsx
index 95a5c483c..96d81aef6 100644
--- a/components/ResultsPage/index.tsx
+++ b/components/ResultsPage/index.tsx
@@ -6,7 +6,6 @@ import { Alert } from '../Alert'
 import { ConditionalLinks } from '../ConditionalLinks'
 import { ContactCTA } from '../ContactCTA'
 import { useMediaQuery, useStore, useTranslation } from '../Hooks'
-import ProgressBar from '../ProgressBar'
 import { ResultsTable } from '../ResultsTable'
 
 export const ResultsPage: React.VFC = () => {
@@ -41,14 +40,6 @@ export const ResultsPage: React.VFC = () => {
       {root.summary.state &&
       root.summary.state !== EstimationSummaryState.MORE_INFO ? (
         <>
-          <ProgressBar
-            sections={[
-              { title: tsln.category.incomeDetails, complete: true },
-              { title: tsln.category.personalInformation, complete: true },
-              { title: tsln.category.legalStatus, complete: true },
-            ]}
-            estimateSection
-          />
           <Alert
             id="elig-results"
             title={root.summary.title}
diff --git a/i18n/web/en.ts b/i18n/web/en.ts
index 899480490..6d37e9e4a 100644
--- a/i18n/web/en.ts
+++ b/i18n/web/en.ts
@@ -29,7 +29,7 @@ const en: WebTranslations = {
   results: 'Results',
   needHelp: 'Need help?',
   faq: 'Frequently Asked Questions',
-  estimate: 'Estimate',
+  getResults: 'Get Results',
   required: 'required',
   homePageP1:
     'Canadian Old Age Benefits Estimator is a prototype in development. Based on the information you provide, this will estimate your eligibility for the Old Age Security (OAS) and Guaranteed Income Supplement (GIS). If eligible to receive the benefit, it will also estimate your monthly payment.',
diff --git a/i18n/web/fr.ts b/i18n/web/fr.ts
index 241300661..5a0303aae 100644
--- a/i18n/web/fr.ts
+++ b/i18n/web/fr.ts
@@ -29,7 +29,7 @@ const fr: WebTranslations = {
   results: 'Résultats',
   needHelp: "Besoin d'aide?",
   faq: 'Foire Aux Questions',
-  estimate: 'Estimer',
+  getResults: 'Obtenir des résultats',
   required: 'obligatoire',
   homePageP1:
     "L'Estimateur Canadien des Prestations de Vieillesse est un prototype en construction. À partir des renseignements que vous fournissez, cet outil estime votre admissibilité à la Sécurité de la vieillesse (SV) et au Supplément de revenu garanti (SRG). Si vous êtes admissible à la prestation, il estime également votre paiement mensuel.",
@@ -71,7 +71,7 @@ const fr: WebTranslations = {
   },
 
   contactCTA:
-    'Pour une évaluation plus précise de votre demande, nous vous invitons à communiquer avec <a className="text-default-text underline" target="_blank" href="https://www.canada.ca/fr/emploi-developpement-social/ministere/coordonnees/sv.html">Service Canada</a>. Consultez la foire aux questions (<a className="underline text-default-text" href="#tabList">Foire aux questions</a>) pour obtenir la liste les documents que vous devrez peut-être fournir.',
+    'Pour une évaluation plus précise de votre demande, nous vous invitons à communiquer avec <a className="text-default-text underline" target="_blank" href="https://www.canada.ca/fr/emploi-developpement-social/ministere/coordonnees/sv.html">Service Canada</a>. Consultez la <a className="underline text-default-text" href="#tabList">Foire aux questions</a> pour obtenir la liste les documents que vous devrez peut-être fournir.',
   resultsPage: {
     tableHeader1: 'Exemples de prestations',
     tableHeader2: 'Admissibilité',
diff --git a/i18n/web/index.ts b/i18n/web/index.ts
index b1fa49b54..d95aa7c2d 100644
--- a/i18n/web/index.ts
+++ b/i18n/web/index.ts
@@ -30,7 +30,7 @@ export type WebTranslations = {
   results: string
   needHelp: string
   faq: string
-  estimate: string
+  getResults: string
   required: string
   homePageP1: string
   homePageP2: string

From b091fd2bc63ab9b026b491b1c4965cb683a8a963 Mon Sep 17 00:00:00 2001
From: Jeremy Kennedy <jerekennedy@deloitte.ca>
Date: Tue, 1 Mar 2022 15:31:40 -0500
Subject: [PATCH 4/5] CSV Export (#160)

---
 client-state/models/Form.ts            |   7 ++
 components/DownloadCSVButton/index.tsx |  27 ++++++
 components/ResultsPage/index.tsx       |   2 +
 components/Tabs/index.tsx              |  13 ++-
 i18n/api/en.ts                         |  14 +++
 i18n/api/fr.ts                         |  14 +++
 i18n/api/index.ts                      |  14 +++
 i18n/web/en.ts                         |   1 +
 i18n/web/fr.ts                         |   1 +
 i18n/web/index.ts                      |   1 +
 package.json                           |   2 +
 pages/api/exportCsv.ts                 |  88 +++++++++++++++++
 utils/api/helpers/requestHandler.ts    |   2 +-
 yarn.lock                              | 127 +++++++++++++++++++++++++
 14 files changed, 308 insertions(+), 5 deletions(-)
 create mode 100644 components/DownloadCSVButton/index.tsx
 create mode 100644 pages/api/exportCsv.ts

diff --git a/client-state/models/Form.ts b/client-state/models/Form.ts
index 65f1586fa..ea41e363c 100644
--- a/client-state/models/Form.ts
+++ b/client-state/models/Form.ts
@@ -41,6 +41,13 @@ export const Form = types
     get empty(): boolean {
       return self.fields.length === 0
     },
+    get emptyFields(): string[] {
+      let emptyFields = []
+      self.fields.forEach((field) => {
+        if (!field.filled) emptyFields.push(field.key)
+      })
+      return emptyFields
+    },
   }))
   .views((self) => ({
     get progress(): FormProgress {
diff --git a/components/DownloadCSVButton/index.tsx b/components/DownloadCSVButton/index.tsx
new file mode 100644
index 000000000..550c391d8
--- /dev/null
+++ b/components/DownloadCSVButton/index.tsx
@@ -0,0 +1,27 @@
+import Link from 'next/link'
+import { WebTranslations } from '../../i18n/web'
+import { useStore, useTranslation } from '../Hooks'
+
+export const DownloadCSVButton = () => {
+  const form = useStore().form
+  const disabled = form.emptyFields.length > 0
+  const saveToCsv = useTranslation<WebTranslations>('saveToCsv')
+
+  if (disabled) {
+    return <div></div>
+  }
+
+  return (
+    <Link
+      href={`/api/exportCsv?${form.buildQueryStringWithFormData()}`}
+      passHref
+    >
+      <a
+        className="bg-[#26374A] rounded text-white border border-[#2572B4] px-4 py-3 text-left md:text-center flex justify-center w-40"
+        download
+      >
+        {saveToCsv}
+      </a>
+    </Link>
+  )
+}
diff --git a/components/ResultsPage/index.tsx b/components/ResultsPage/index.tsx
index 96d81aef6..103f18178 100644
--- a/components/ResultsPage/index.tsx
+++ b/components/ResultsPage/index.tsx
@@ -5,6 +5,7 @@ import { EstimationSummaryState } from '../../utils/api/definitions/enums'
 import { Alert } from '../Alert'
 import { ConditionalLinks } from '../ConditionalLinks'
 import { ContactCTA } from '../ContactCTA'
+import { DownloadCSVButton } from '../DownloadCSVButton'
 import { useMediaQuery, useStore, useTranslation } from '../Hooks'
 import { ResultsTable } from '../ResultsTable'
 
@@ -37,6 +38,7 @@ export const ResultsPage: React.VFC = () => {
 
   return (
     <div className="flex flex-col space-y-12" ref={ref}>
+      {isMobile && <DownloadCSVButton />}
       {root.summary.state &&
       root.summary.state !== EstimationSummaryState.MORE_INFO ? (
         <>
diff --git a/components/Tabs/index.tsx b/components/Tabs/index.tsx
index db560c592..6d25793c4 100644
--- a/components/Tabs/index.tsx
+++ b/components/Tabs/index.tsx
@@ -1,20 +1,20 @@
 import { Tab } from '@headlessui/react'
 import { observer } from 'mobx-react'
 import { Instance } from 'mobx-state-tree'
-import { useRouter } from 'next/router'
 import { RootStore } from '../../client-state/store'
 import { WebTranslations } from '../../i18n/web'
 import { ResponseSuccess } from '../../utils/api/definitions/types'
 import { sendAnalyticsRequest } from '../../utils/web/helpers/utils'
+import { DownloadCSVButton } from '../DownloadCSVButton'
 import { FAQ } from '../FAQ'
 import { ComponentFactory } from '../Forms/ComponentFactory'
-import { useStore, useTranslation } from '../Hooks'
+import { useMediaQuery, useStore, useTranslation } from '../Hooks'
 import { ResultsPage } from '../ResultsPage'
 
 export const Tabs: React.FC<ResponseSuccess> = observer((props) => {
   const root: Instance<typeof RootStore> = useStore()
   const tsln = useTranslation<WebTranslations>()
-  const locale = useRouter().locale
+  const isMobile = useMediaQuery(992)
 
   return (
     <Tab.Group
@@ -37,7 +37,7 @@ export const Tabs: React.FC<ResponseSuccess> = observer((props) => {
       }}
     >
       <Tab.List
-        className={`flex flex-col md:flex-row gap-x-5 gap-y-4 pb-4 border-b border-form-border`}
+        className={`flex flex-col md:flex-row gap-x-5 gap-y-4 pb-4 border-b border-muted/20 relative `}
         id="tabList"
       >
         <Tab
@@ -67,6 +67,11 @@ export const Tabs: React.FC<ResponseSuccess> = observer((props) => {
         >
           {tsln.faq}
         </Tab>
+        {!isMobile && root.activeTab == 1 && (
+          <div className="absolute right-0">
+            <DownloadCSVButton />
+          </div>
+        )}
       </Tab.List>
       <Tab.Panels>
         <Tab.Panel className="mt-10">
diff --git a/i18n/api/en.ts b/i18n/api/en.ts
index b748416da..bcaf15bc5 100644
--- a/i18n/api/en.ts
+++ b/i18n/api/en.ts
@@ -538,5 +538,19 @@ const en: Translations = {
       location: LinkLocation.HIDDEN,
     },
   },
+  csv: {
+    appName: 'Canadian Old Age Benefits Estimator',
+    formResponses: 'FORM RESPONSES',
+    question: 'Question',
+    answer: 'Answer',
+    estimationResults: 'ESTIMATION RESULTS',
+    benefit: 'Benefit',
+    eligibility: 'Eligibility',
+    details: 'Details',
+    entitlement: 'Estimated monthly amount',
+    links: 'LINKS',
+    description: 'Description',
+    url: 'URL',
+  },
 }
 export default en
diff --git a/i18n/api/fr.ts b/i18n/api/fr.ts
index 652c043e5..e68f05118 100644
--- a/i18n/api/fr.ts
+++ b/i18n/api/fr.ts
@@ -544,5 +544,19 @@ const fr: Translations = {
       location: LinkLocation.HIDDEN,
     },
   },
+  csv: {
+    appName: 'Estimateur Canadien des Prestations de Vieillesse',
+    formResponses: 'RÉPONSES DU FORMULAIRE',
+    question: 'Question',
+    answer: 'Réponse',
+    estimationResults: "RÉSULTATS DE L'ESTIMATION",
+    benefit: 'Prestation',
+    eligibility: 'Admissibilité',
+    details: 'Détails',
+    entitlement: 'Montant mensuel estimé',
+    links: 'LIENS',
+    description: 'Description',
+    url: 'URL',
+  },
 }
 export default fr
diff --git a/i18n/api/index.ts b/i18n/api/index.ts
index c6fc94f94..e14e29ce2 100644
--- a/i18n/api/index.ts
+++ b/i18n/api/index.ts
@@ -125,6 +125,20 @@ export interface Translations {
     alwReasons: Link
     afsReasons: Link
   }
+  csv: {
+    appName: string
+    formResponses: string
+    question: string
+    answer: string
+    estimationResults: string
+    benefit: string
+    eligibility: string
+    details: string
+    entitlement: string
+    links: string
+    description: string
+    url: string
+  }
 }
 
 export function getTranslations(language: Language): Translations {
diff --git a/i18n/web/en.ts b/i18n/web/en.ts
index 6d37e9e4a..8b3d89fc1 100644
--- a/i18n/web/en.ts
+++ b/i18n/web/en.ts
@@ -29,6 +29,7 @@ const en: WebTranslations = {
   results: 'Results',
   needHelp: 'Need help?',
   faq: 'Frequently Asked Questions',
+  saveToCsv: 'Download',
   getResults: 'Get Results',
   required: 'required',
   homePageP1:
diff --git a/i18n/web/fr.ts b/i18n/web/fr.ts
index 5a0303aae..38f2a7f08 100644
--- a/i18n/web/fr.ts
+++ b/i18n/web/fr.ts
@@ -29,6 +29,7 @@ const fr: WebTranslations = {
   results: 'Résultats',
   needHelp: "Besoin d'aide?",
   faq: 'Foire Aux Questions',
+  saveToCsv: 'Télécharger',
   getResults: 'Obtenir des résultats',
   required: 'obligatoire',
   homePageP1:
diff --git a/i18n/web/index.ts b/i18n/web/index.ts
index d95aa7c2d..798543c6e 100644
--- a/i18n/web/index.ts
+++ b/i18n/web/index.ts
@@ -30,6 +30,7 @@ export type WebTranslations = {
   results: string
   needHelp: string
   faq: string
+  saveToCsv: string
   getResults: string
   required: string
   homePageP1: string
diff --git a/package.json b/package.json
index f953168ec..453e150a7 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@headlessui/react": "^1.4.2",
     "@tailwindcss/forms": "^0.3.4",
     "@types/lodash": "^4.14.177",
+    "csv-writer": "^1.6.0",
     "isarray": "^2.0.5",
     "joi": "^17.5.0",
     "lodash": "^4.17.21",
@@ -33,6 +34,7 @@
     "react-dom": "17.0.2",
     "react-number-format": "^4.9.1",
     "react-select": "^5.2.1",
+    "string-strip-html": "^9.1.6",
     "swagger-ui-react": "^4.1.2",
     "ts-node": "^10.4.0",
     "yaml": "^1.10.2"
diff --git a/pages/api/exportCsv.ts b/pages/api/exportCsv.ts
new file mode 100644
index 000000000..3c04431f1
--- /dev/null
+++ b/pages/api/exportCsv.ts
@@ -0,0 +1,88 @@
+import { createArrayCsvStringifier } from 'csv-writer'
+import Joi from 'joi'
+import type { NextApiRequest, NextApiResponse } from 'next'
+import { stripHtml } from 'string-strip-html'
+import { numberToStringCurrency } from '../../i18n/api'
+import { ResultKey } from '../../utils/api/definitions/enums'
+import { RequestSchema } from '../../utils/api/definitions/schemas'
+import {
+  BenefitResult,
+  RequestInput,
+  ResponseError,
+} from '../../utils/api/definitions/types'
+import { RequestHandler } from '../../utils/api/helpers/requestHandler'
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<string | ResponseError>
+) {
+  try {
+    console.log(`Processing CSV request: `, req.query)
+
+    // validation
+    const requestInput: RequestInput = Joi.attempt(req.query, RequestSchema, {
+      abortEarly: false,
+    })
+
+    // processing
+    const handler = new RequestHandler(requestInput)
+    const records: string[][] = []
+    const csvTranslations = handler.translations.csv
+    records.push([csvTranslations.appName])
+
+    records.push(
+      [''],
+      [csvTranslations.formResponses],
+      [csvTranslations.question, csvTranslations.answer]
+    )
+    for (const value of handler.fieldData) {
+      let question = stripHtml(value.label).result
+      let response = handler.rawInput[value.key].toString()
+      records.push([question, response])
+    }
+
+    records.push(
+      [''],
+      [csvTranslations.estimationResults],
+      [
+        csvTranslations.benefit,
+        csvTranslations.eligibility,
+        csvTranslations.details,
+        csvTranslations.entitlement,
+      ]
+    )
+    for (const resultKey in handler.benefitResults) {
+      const result: BenefitResult = handler.benefitResults[resultKey]
+      const benefitName = handler.translations.benefit[resultKey]
+      const [eligibility, detail] = stripHtml(
+        result.eligibility.detail
+      ).result.split('\n')
+      const entitlement = numberToStringCurrency(
+        result.entitlement.result,
+        handler.translations._locale
+      )
+      records.push([benefitName, eligibility, detail, entitlement])
+    }
+
+    records.push(
+      [''],
+      [csvTranslations.links],
+      [csvTranslations.description, csvTranslations.url]
+    )
+    for (const link of handler.summary.links) {
+      records.push([link.text, link.url])
+    }
+
+    let output = createArrayCsvStringifier({}).stringifyRecords(records)
+    res.setHeader('Content-Type', 'application/csv')
+    res.setHeader('Content-Disposition', `attachment; filename=export.csv`)
+    res.status(200).send(output)
+  } catch (error) {
+    res.status(400).json({
+      error: ResultKey.INVALID,
+      detail: error.details || String(error),
+    })
+    console.log(error)
+    return
+  }
+}
diff --git a/utils/api/helpers/requestHandler.ts b/utils/api/helpers/requestHandler.ts
index d9fc796f7..e38833434 100644
--- a/utils/api/helpers/requestHandler.ts
+++ b/utils/api/helpers/requestHandler.ts
@@ -46,7 +46,7 @@ export class RequestHandler {
   private _benefitResults: BenefitResultsObject
   private _summary: SummaryObject
 
-  constructor(private readonly rawInput: Partial<RequestInput>) {}
+  constructor(readonly rawInput: Partial<RequestInput>) {}
 
   get translations(): Translations {
     if (this._translations === undefined)
diff --git a/yarn.lock b/yarn.lock
index 0010a78f8..697db26f6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3197,6 +3197,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"csv-writer@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "csv-writer@npm:1.6.0"
+  checksum: 2e62cb46f00b674f0710eb90586000601f3a467aabe529464dcb402d453a1322a716d7522ef3282dd6551f1059305c7dd3db49def1201caaf340597dcf7b4c7e
+  languageName: node
+  linkType: hard
+
 "d@npm:1, d@npm:^1.0.1":
   version: 1.0.1
   resolution: "d@npm:1.0.1"
@@ -3500,6 +3507,7 @@ __metadata:
     autoprefixer: ^10.4.1
     axe-core: ^4.3.3
     babel-jest: ^27.1.0
+    csv-writer: ^1.6.0
     eslint: ^8.6.0
     eslint-config-next: ^12.0.7
     husky: ^7.0.0
@@ -3521,6 +3529,7 @@ __metadata:
     react-dom: 17.0.2
     react-number-format: ^4.9.1
     react-select: ^5.2.1
+    string-strip-html: ^9.1.6
     string.prototype.replaceall: ^1.0.6
     swagger-ui-react: ^4.1.2
     tailwindcss: ^2.2.9
@@ -4687,6 +4696,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html-entities@npm:^2.3.2":
+  version: 2.3.2
+  resolution: "html-entities@npm:2.3.2"
+  checksum: 522d8d202df301ff51b517a379e642023ed5c81ea9fb5674ffad88cff386165733d00b6089d5c2fcc644e44777d6072017b6216d8fa40f271d3610420d00a886
+  languageName: node
+  linkType: hard
+
 "html-escaper@npm:^2.0.0":
   version: 2.0.2
   resolution: "html-escaper@npm:2.0.2"
@@ -6177,6 +6193,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.clonedeep@npm:^4.5.0":
+  version: 4.5.0
+  resolution: "lodash.clonedeep@npm:4.5.0"
+  checksum: 92c46f094b064e876a23c97f57f81fbffd5d760bf2d8a1c61d85db6d1e488c66b0384c943abee4f6af7debf5ad4e4282e74ff83177c9e63d8ff081a4837c3489
+  languageName: node
+  linkType: hard
+
 "lodash.debounce@npm:^4":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"
@@ -6184,6 +6207,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.isplainobject@npm:^4.0.6":
+  version: 4.0.6
+  resolution: "lodash.isplainobject@npm:4.0.6"
+  checksum: 29c6351f281e0d9a1d58f1a4c8f4400924b4c79f18dfc4613624d7d54784df07efaff97c1ff2659f3e085ecf4fff493300adc4837553104cef2634110b0d5337
+  languageName: node
+  linkType: hard
+
 "lodash.merge@npm:^4.6.2":
   version: 4.6.2
   resolution: "lodash.merge@npm:4.6.2"
@@ -6205,6 +6235,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.trim@npm:^4.5.1":
+  version: 4.5.1
+  resolution: "lodash.trim@npm:4.5.1"
+  checksum: 64b08e97d94d4c7620159371e6fe6cbb706514a41d737db2f189d9ec738305eb08cb772a9bbd2459e90f1c22f96174ec1047ceb8272f2f6040cb5bd63d8f9f2b
+  languageName: node
+  linkType: hard
+
+"lodash.without@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "lodash.without@npm:4.4.0"
+  checksum: 8cef752edd4ed4065be2a8fd30ea52c0bb27b0cb6c34742f595263c72ee0c3a188572affb477ef18a4dd4d0347fe1a4e580b70d4e36f37323d7924d2e6046bd6
+  languageName: node
+  linkType: hard
+
 "lodash@npm:^4.17.15, lodash@npm:^4.17.21, lodash@npm:^4.7.0":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
@@ -7664,6 +7708,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ranges-apply@npm:^6.0.12":
+  version: 6.0.12
+  resolution: "ranges-apply@npm:6.0.12"
+  dependencies:
+    ranges-merge: ^8.0.12
+    tiny-invariant: ^1.2.0
+  checksum: 819961beaa8148bc1df65e099303e14063fc41369031f0c777efed1099eccbdfa8d659f1e979e30392820476a699cf72bfdd692bddf73913a7b3fd79fb2f1355
+  languageName: node
+  linkType: hard
+
+"ranges-merge@npm:^8.0.12":
+  version: 8.0.12
+  resolution: "ranges-merge@npm:8.0.12"
+  dependencies:
+    ranges-push: ^6.0.12
+    ranges-sort: ^5.0.12
+  checksum: e8f1a40d96e82092a57045b05cb152bc2b9a6749f51497dbf23c63818876ec59ed572c3f2a242500e1f356892fa269e6a0a39b1b5eece124e3bee94e3c9806f6
+  languageName: node
+  linkType: hard
+
+"ranges-push@npm:^6.0.12":
+  version: 6.0.12
+  resolution: "ranges-push@npm:6.0.12"
+  dependencies:
+    string-collapse-leading-whitespace: ^6.0.12
+    string-trim-spaces-only: ^4.0.12
+  checksum: bf67115b3a99ac8402f5a6befbb93033f7e69173e1ab37b9d7fefffd2c052a2627281c247b5e14406557936e6e5b2720a7c251eb610cdadcab7633b17ddb5f6d
+  languageName: node
+  linkType: hard
+
+"ranges-sort@npm:^5.0.12":
+  version: 5.0.12
+  resolution: "ranges-sort@npm:5.0.12"
+  checksum: 6d2b3587daa8796d520216f0bf2040aaeeb2d050ca90bdd2b61b8f1c2a8f7d96af60247844342cbcf83954f22ce3c40353ef7b1e4ebfcf477c0c4a0bcc136b55
+  languageName: node
+  linkType: hard
+
 "raw-body@npm:2.4.1":
   version: 2.4.1
   resolution: "raw-body@npm:2.4.1"
@@ -8532,6 +8613,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string-collapse-leading-whitespace@npm:^6.0.12":
+  version: 6.0.12
+  resolution: "string-collapse-leading-whitespace@npm:6.0.12"
+  checksum: bfcbe2e460f05b0c7db10afe4b2d467be26e8844ecdc93a167b10f8898f7076c0061894f0c9c5d805dea79dfbf3da29ea4a74277a622ca73f4b9bdd2d3cf3497
+  languageName: node
+  linkType: hard
+
 "string-hash@npm:1.1.3":
   version: 1.1.3
   resolution: "string-hash@npm:1.1.3"
@@ -8539,6 +8627,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string-left-right@npm:^5.0.12":
+  version: 5.0.12
+  resolution: "string-left-right@npm:5.0.12"
+  dependencies:
+    lodash.clonedeep: ^4.5.0
+    lodash.isplainobject: ^4.0.6
+  checksum: 84132fe5e0f23cd04dbb77e55cf8c08cee78d696abb9314d33feaaf0de0583e7d0f97f0f2ecf2bada959b0b301b453cc97d79a94b1f80d5f3fc1a70aab8a262e
+  languageName: node
+  linkType: hard
+
 "string-length@npm:^4.0.1":
   version: 4.0.2
   resolution: "string-length@npm:4.0.2"
@@ -8549,6 +8647,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string-strip-html@npm:^9.1.6":
+  version: 9.1.6
+  resolution: "string-strip-html@npm:9.1.6"
+  dependencies:
+    html-entities: ^2.3.2
+    lodash.isplainobject: ^4.0.6
+    lodash.trim: ^4.5.1
+    lodash.without: ^4.4.0
+    ranges-apply: ^6.0.12
+    ranges-push: ^6.0.12
+    string-left-right: ^5.0.12
+  checksum: 82f9c3e77e79726e2aa780ab1560a97b55b9d543cf776149ce3ac8766b2aa2c6b2e45a78a6ef9267fc0f9941c19036ce820ce03e4e3a18b67ddf6886bf7dfe01
+  languageName: node
+  linkType: hard
+
+"string-trim-spaces-only@npm:^4.0.12":
+  version: 4.0.12
+  resolution: "string-trim-spaces-only@npm:4.0.12"
+  checksum: ad30fb3f85cc07e6f0f12350580e4a057dc5041879cd0dae6c671b2bcd952ee830538c06a4a197cc9123de4eebaf440ef67edde759ac3f06203949ac11405604
+  languageName: node
+  linkType: hard
+
 "string-width@npm:^1.0.2 || 2 || 3 || 4, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.3":
   version: 4.2.3
   resolution: "string-width@npm:4.2.3"
@@ -8975,6 +9095,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tiny-invariant@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "tiny-invariant@npm:1.2.0"
+  checksum: e09a718a7c4a499ba592cdac61f015d87427a0867ca07f50c11fd9b623f90cdba18937b515d4a5e4f43dac92370498d7bdaee0d0e7a377a61095e02c4a92eade
+  languageName: node
+  linkType: hard
+
 "tmp@npm:^0.2.1":
   version: 0.2.1
   resolution: "tmp@npm:0.2.1"

From 1fdd8fca0f1a7b923a0e9f0ee775ed8be357e673 Mon Sep 17 00:00:00 2001
From: Jeremy Kennedy <jerekennedy@deloitte.ca>
Date: Tue, 1 Mar 2022 16:59:42 -0500
Subject: [PATCH 5/5] on intro page, fix gis text bolding/age (#200)

---
 components/Forms/ComponentFactory.tsx |  5 ++++-
 i18n/web/en.ts                        |  8 ++++----
 i18n/web/fr.ts                        | 10 +++++-----
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/components/Forms/ComponentFactory.tsx b/components/Forms/ComponentFactory.tsx
index 5811e64f3..943561f5c 100644
--- a/components/Forms/ComponentFactory.tsx
+++ b/components/Forms/ComponentFactory.tsx
@@ -201,7 +201,10 @@ export const ComponentFactory: React.VFC<FactoryProps> = observer(
 
             <FormButtons incomeTooHigh={incomeTooHigh} />
           </form>
-          <NeedHelpList title={tsln.needHelp} links={root.summary.links} />
+          <NeedHelpList
+            title={tsln.needHelp}
+            links={root.summary.needHelpLinks}
+          />
         </div>
       </>
     )
diff --git a/i18n/web/en.ts b/i18n/web/en.ts
index 8b3d89fc1..7582dc80d 100644
--- a/i18n/web/en.ts
+++ b/i18n/web/en.ts
@@ -36,13 +36,13 @@ const en: WebTranslations = {
     'Canadian Old Age Benefits Estimator is a prototype in development. Based on the information you provide, this will estimate your eligibility for the Old Age Security (OAS) and Guaranteed Income Supplement (GIS). If eligible to receive the benefit, it will also estimate your monthly payment.',
   homePageP2: 'The estimator covers four benefits programs:',
   homePageP3:
-    '<strong className="font-bold">Old Age Security</strong> pension is a monthly payment you can get if you are <strong className="font-bold">65 and older</strong>. In most cases, Service Canada will be able to automatically enroll you. In other cases, you will have to apply. Service Canada will inform you if you have been automatically enrolled.',
+    '<strong className="font-semibold">Old Age Security</strong> pension is a monthly payment you can get if you are <strong className="font-semibold">65 and older</strong>. In most cases, Service Canada will be able to automatically enroll you. In other cases, you will have to apply. Service Canada will inform you if you have been automatically enrolled.',
   homePageP4:
-    '<strong className="font-bold">Guaranteed Income Supplement</strong> is a monthly non-taxable benefit for Old Age Security pension recipients aged 65 and older who have a low income and are living in Canada.',
+    '<strong className="font-semibold">Guaranteed Income Supplement</strong> is a monthly non-taxable benefit for Old Age Security pension recipients aged <strong className="font-semibold">65 and older</strong> who have a low income and are living in Canada.',
   homePageP5:
-    '<strong className="font-bold">Allowance</strong> is a monthly benefit available to low-income individuals aged <strong className="font-bold">60 to 64</strong> whose spouse or common-law partner receives the Guaranteed Income Supplement.',
+    '<strong className="font-semibold">Allowance</strong> is a monthly benefit available to low-income individuals aged <strong className="font-semibold">60 to 64</strong> whose spouse or common-law partner receives the Guaranteed Income Supplement.',
   homePageP6:
-    '<strong className="font-bold">Allowance for the Survivor</strong> is a monthly benefit available to individuals aged <strong className="font-bold">60 to 64</strong> who have a low income, who are living in Canada, and whose spouse or common-law partner has passed away.',
+    '<strong className="font-semibold">Allowance for the Survivor</strong> is a monthly benefit available to individuals aged <strong className="font-semibold">60 to 64</strong> who have a low income, who are living in Canada, and whose spouse or common-law partner has passed away.',
   emptyResultsMessage:
     'Please fill out the form. The estimator will estimate your eligibility based on the information you provide. If you qualify, it will also provide an estimate for your monthly payment.',
   disclaimerTitle: 'Disclaimer',
diff --git a/i18n/web/fr.ts b/i18n/web/fr.ts
index 38f2a7f08..cb2b13fb5 100644
--- a/i18n/web/fr.ts
+++ b/i18n/web/fr.ts
@@ -30,19 +30,19 @@ const fr: WebTranslations = {
   needHelp: "Besoin d'aide?",
   faq: 'Foire Aux Questions',
   saveToCsv: 'Télécharger',
-  getResults: 'Obtenir des résultats',
+  getResults: 'Obtenir les résultats',
   required: 'obligatoire',
   homePageP1:
     "L'Estimateur Canadien des Prestations de Vieillesse est un prototype en construction. À partir des renseignements que vous fournissez, cet outil estime votre admissibilité à la Sécurité de la vieillesse (SV) et au Supplément de revenu garanti (SRG). Si vous êtes admissible à la prestation, il estime également votre paiement mensuel.",
   homePageP2: "L'estimateur couvre quatre programmes de prestations :",
   homePageP3:
-    '<strong className="font-bold">la pension de la Sécurité de la vieillesse</strong> est un paiement mensuel que vous pouvez recevoir si vous avez <strong className="font-bold">65 ans et plus</strong>. Dans la plupart des cas, Service Canada sera en mesure de vous inscrire automatiquement. Dans d\'autres cas, vous devrez présenter une demande. Service Canada vous informera si vous avez été inscrit automatiquement.',
+    '<strong className="font-semibold">la pension de la Sécurité de la vieillesse</strong> est un paiement mensuel que vous pouvez recevoir si vous avez <strong className="font-semibold">65 ans et plus</strong>. Dans la plupart des cas, Service Canada sera en mesure de vous inscrire automatiquement. Dans d\'autres cas, vous devrez présenter une demande. Service Canada vous informera si vous avez été inscrit automatiquement.',
   homePageP4:
-    '<strong className="font-bold">le Supplément de revenu garanti</strong> est une prestation mensuelle non imposable destinée aux bénéficiaires de la pension de la Sécurité de la vieillesse qui ont un faible revenu et qui vivent au Canada.',
+    '<strong className="font-semibold">le Supplément de revenu garanti</strong> est une prestation mensuelle non imposable destinée aux bénéficiaires de la pension de la Sécurité de la vieillesse âgées de <strong className="font-semibold">65 et plus</strong> qui ont un faible revenu et qui vivent au Canada.',
   homePageP5:
-    '<strong className="font-bold">l\'Allocation</strong> est une prestation mensuelle offerte aux personnes à faible revenu âgées de <strong className="font-bold">60 à 64 ans</strong> dont l\'époux ou le conjoint de fait reçoit le Supplément de revenu garanti.',
+    '<strong className="font-semibold">l\'Allocation</strong> est une prestation mensuelle offerte aux personnes à faible revenu âgées de <strong className="font-semibold">60 à 64 ans</strong> dont l\'époux ou le conjoint de fait reçoit le Supplément de revenu garanti.',
   homePageP6:
-    '<strong className="font-bold">l\'Allocation au survivant</strong> est une prestation mensuelle offerte aux personnes âgées de <strong className="font-bold">60 à 64 ans</strong> qui ont un faible revenu, qui vivent au Canada et dont l\'époux ou le conjoint de fait est décédé.',
+    '<strong className="font-semibold">l\'Allocation au survivant</strong> est une prestation mensuelle offerte aux personnes âgées de <strong className="font-semibold">60 à 64 ans</strong> qui ont un faible revenu, qui vivent au Canada et dont l\'époux ou le conjoint de fait est décédé.',
   emptyResultsMessage:
     "Veuillez remplir le formulaire. L'estimateur évaluera votre admissibilité en fonction des renseignements fournis. Si vous êtes admissible, il fournira également une estimation de votre paiement mensuel. ",
   disclaimerTitle: 'Avertissement',