Merge pull request #205 from DTS-STN/develop

Release 2022-03-02
DTS-STN · Mar 2, 2022 · c55739b · c55739b · vercel · Mar 2, 2022
2 parents 2a3ab32 + 1fdd8fc
commit c55739b
Show file tree

Hide file tree

Showing 33 changed files with 470 additions and 389 deletions.
diff --git a/__tests__/components/ProgressBar.test.tsx b/__tests__/components/ProgressBar.test.tsx
diff --git 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/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
@@ -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/DownloadCSVButton/index.tsx 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/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
@@ -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/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,48 +199,12 @@ 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} />
+          <NeedHelpList
+            title={tsln.needHelp}
+            links={root.summary.needHelpLinks}
+          />
         </div>
       </>
     )

diff --git a/components/Forms/CurrencyField.tsx b/components/Forms/CurrencyField.tsx
@@ -43,10 +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-bold 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} />}