Merge pull request #723 from WestpacGEL/fixes/protoform-fixes

fixes/protoform changes
WestpacGEL · Feb 15, 2024 · 23ffad6 · 23ffad6
2 parents 73b029c + 3024a53
commit 23ffad6
Show file tree

Hide file tree

Showing 20 changed files with 310 additions and 181 deletions.
diff --git a/apps/protoform/src/app/credit-cards/address/page.tsx b/apps/protoform/src/app/credit-cards/address/page.tsx
@@ -7,6 +7,7 @@ import { FormEvent, useEffect, useState } from 'react';
 import { BackButton } from '@/components/back-button/back-button';
 import { Cta } from '@/components/cta/cta';
 import { CustomHeading } from '@/components/custom-heading/custom-heading';
+import { ErrorValidationAlert, ValidationErrorType } from '@/components/error-validation-alert/error-validation-alert';
 import { useSidebar } from '@/components/sidebar/context';
 import { defaultError } from '@/constants/form-contsants';
 import { getFormData } from '@/utils/getFormData';
@@ -18,13 +19,18 @@ export default function Address() {
   const { data, setData } = useCreditCard();
   const [addressError, setAddressError] = useState('');
   const [housingLengthError, setHousingLengthError] = useState('');
+  const [validationErrors, setValidationErrors] = useState<ValidationErrorType[]>([]);
 
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const { housingLength, address } = getFormData(e.currentTarget) as { address: string; housingLength: string };
     if (!address || !housingLength) {
       setAddressError(!address ? defaultError : '');
       setHousingLengthError(!housingLength ? defaultError : '');
+      setValidationErrors([
+        ...(!address ? [{ id: 'address', label: 'Address' }] : []),
+        ...(!housingLength ? [{ id: 'housingLength', label: 'Housing length' }] : []),
+      ]);
     } else {
       setData({ ...data, address, housingLength });
       router.push('/credit-cards/review-and-submit');
@@ -40,11 +46,14 @@ export default function Address() {
   return (
     <div>
       <BackButton onClick={() => router.push('/credit-cards/name-and-contact')}>Back to Name & contact</BackButton>
-      <CustomHeading>Address</CustomHeading>
-      <Form id="credit-card" spacing="large" className="pt-6" onSubmit={handleSubmit}>
+      <CustomHeading groupHeading="Your details" leadText="[Dummy lead text to be replaced later]">
+        Address
+      </CustomHeading>
+      {validationErrors.length >= 1 && <ErrorValidationAlert errors={validationErrors} />}
+      <Form id="credit-card" spacing="large" onSubmit={handleSubmit}>
         <FormSection className="border-none !p-0">
           <FormGroup>
-            <InputGroup size="large" errorMessage={addressError}>
+            <InputGroup size="large" errorMessage={addressError} instanceId="address">
               <Autocomplete
                 noOptionsMessage="No options found"
                 label="Search for you residential address"
@@ -60,21 +69,20 @@ export default function Address() {
           </FormGroup>
 
           <FormGroup>
-            <InputGroup label="What is your current housing situation?" errorMessage={housingLengthError} size="large">
+            <InputGroup
+              label="What is your current housing situation?"
+              instanceId="housingLength"
+              errorMessage={housingLengthError}
+              size="large"
+            >
               <Select name="housingLength" defaultValue={data.housingLength} invalid={!!housingLengthError}>
                 <option value="">Select</option>
                 <option value="1">1 Year</option>
               </Select>
             </InputGroup>
           </FormGroup>
         </FormSection>
-        <Cta
-          primaryType="submit"
-          secondaryOnClick={() => router.push('/credit-cards/name-and-contact')}
-          secondary="Back"
-          tertiaryOnClick={() => router.push('/')}
-          tertiary="Cancel"
-        >
+        <Cta primaryType="submit" tertiaryOnClick={() => router.push('/')} tertiary="Cancel">
           Next
         </Cta>
       </Form>

diff --git a/apps/protoform/src/app/credit-cards/context.tsx b/apps/protoform/src/app/credit-cards/context.tsx
@@ -57,18 +57,18 @@ export function CreditCardContextProvider({ children }: { children: React.ReactN
     dobMonth: '',
     dobYear: '',
     email: '',
-    expenseFreq: '',
+    expenseFreq: 'Monthly',
     expenses: '',
     familyName: '',
     givenName: '',
     housing: '',
     housingLength: '',
     income: '',
-    incomeFreq: '',
+    incomeFreq: 'Monthly',
     mobileNumber: '',
     name: '',
     nonWestpacCards: '',
-    repaymentFreq: '',
+    repaymentFreq: 'Monthly',
     repayments: '',
     sharedExpenses: '',
     totalBal: '',

diff --git a/apps/protoform/src/app/credit-cards/credit-limit/page.tsx b/apps/protoform/src/app/credit-cards/credit-limit/page.tsx
@@ -7,6 +7,7 @@ import { FormEvent, useEffect, useState } from 'react';
 import { BackButton } from '@/components/back-button/back-button';
 import { Cta } from '@/components/cta/cta';
 import { CustomHeading } from '@/components/custom-heading/custom-heading';
+import { ErrorValidationAlert, ValidationErrorType } from '@/components/error-validation-alert/error-validation-alert';
 import { useSidebar } from '@/components/sidebar/context';
 import { defaultError } from '@/constants/form-contsants';
 import { getFormData } from '@/utils/getFormData';
@@ -19,6 +20,7 @@ export default function CreditLimit() {
   const [limitTypeError, setLimitTypeError] = useState('');
   const [cardLimitError, setCardLimitError] = useState('');
   const [creditLimitType, setCreditLimitType] = useState('');
+  const [validationErrors, setValidationErrors] = useState<ValidationErrorType[]>([]);
 
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -30,6 +32,10 @@ export default function CreditLimit() {
     if (!creditLimitType || (creditLimitType === 'Specify' && !cardLimit)) {
       setLimitTypeError(!creditLimitType ? defaultError : '');
       setCardLimitError(creditLimitType === 'Specify' && !cardLimit ? defaultError : '');
+      setValidationErrors([
+        ...(!creditLimitType ? [{ id: 'creditLimitType', label: 'Credit limit type' }] : []),
+        ...(creditLimitType === 'Specify' && !cardLimit ? [{ id: 'cardLimit', label: 'Card limit' }] : []),
+      ]);
     } else {
       setData({ ...data, creditLimitType, cardLimit });
       router.push('/credit-cards/name-and-contact');
@@ -45,14 +51,18 @@ export default function CreditLimit() {
   return (
     <div>
       <BackButton onClick={() => router.push('/credit-cards/home-life')}>Back to Home life</BackButton>
-      <CustomHeading>Credit limit</CustomHeading>
-      <Form id="credit-card" spacing="large" className="pt-6" onSubmit={handleSubmit}>
+      <CustomHeading groupHeading="Your card" leadText="[Dummy lead text to be replaced later]">
+        Credit limit
+      </CustomHeading>
+      {validationErrors.length >= 1 && <ErrorValidationAlert errors={validationErrors} />}
+      <Form id="credit-card" spacing="large" onSubmit={handleSubmit}>
         <FormSection className="border-none !p-0">
           <FormGroup>
             <ButtonGroup
               label="What credit limit would you like?"
               hintMessage="You can chose a limit between $500 and $4,000 for Westpac Lite Visa Card."
               size="large"
+              id="creditLimitType"
               block={{ initial: true, md: false }}
               errorMessage={limitTypeError}
               defaultValue={data.creditLimitType}
@@ -71,19 +81,14 @@ export default function CreditLimit() {
                 hint="Enter a dollar value"
                 before="$"
                 errorMessage={cardLimitError}
+                instanceId="cardLimit"
               >
                 <Input name="cardLimit" invalid={!!cardLimitError} defaultValue={data.cardLimit} />
               </InputGroup>
             </FormGroup>
           )}
         </FormSection>
-        <Cta
-          primaryType="submit"
-          secondaryOnClick={() => router.push('/credit-cards/home-life')}
-          secondary="Back"
-          tertiaryOnClick={() => router.push('/')}
-          tertiary="Cancel"
-        >
+        <Cta primaryType="submit" tertiaryOnClick={() => router.push('/')} tertiary="Cancel">
           Next
         </Cta>
       </Form>

diff --git a/apps/protoform/src/app/credit-cards/home-life/page.tsx b/apps/protoform/src/app/credit-cards/home-life/page.tsx
@@ -7,6 +7,7 @@ import { FormEvent, useEffect, useState } from 'react';
 import { BackButton } from '@/components/back-button/back-button';
 import { Cta } from '@/components/cta/cta';
 import { CustomHeading } from '@/components/custom-heading/custom-heading';
+import { ErrorValidationAlert, ValidationErrorType } from '@/components/error-validation-alert/error-validation-alert';
 import { useSidebar } from '@/components/sidebar/context';
 import { defaultError } from '@/constants/form-contsants';
 import { getFormData } from '@/utils/getFormData';
@@ -22,7 +23,9 @@ export default function HomeLife() {
   const [housingError, setHousingError] = useState('');
   const [sharedExpensesError, setSharedExpensesError] = useState('');
   const [sharedExpenses, setSharedExpenses] = useState('');
+  const [validationErrors, setValidationErrors] = useState<ValidationErrorType[]>([]);
 
+  // eslint-disable-next-line sonarjs/cognitive-complexity
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const { housing, dependants, expenseFreq, expenses } = getFormData(e.currentTarget) as {
@@ -38,6 +41,13 @@ export default function HomeLife() {
       setExpenseFreqError(!expenseFreq ? defaultError : '');
       setExpensesError(!expenses ? defaultError : '');
       setSharedExpensesError(!sharedExpenses ? defaultError : '');
+      setValidationErrors([
+        ...(!housing ? [{ id: 'housing', label: 'Housing situation' }] : []),
+        ...(!dependants ? [{ id: 'dependants', label: 'Dependants' }] : []),
+        ...(!expenseFreq ? [{ id: 'expenseFreq', label: 'Expense frequency' }] : []),
+        ...(!expenses ? [{ id: 'expenses', label: 'Expenses' }] : []),
+        ...(!sharedExpenses ? [{ id: 'sharedExpenses', label: 'Shared expenses' }] : []),
+      ]);
     } else {
       setData({ ...data, housing, dependants, expenseFreq, expenses, sharedExpenses });
       router.push('/credit-cards/credit-limit');
@@ -53,11 +63,19 @@ export default function HomeLife() {
   return (
     <div>
       <BackButton onClick={() => router.push('/credit-cards/loans-and-cards')}>Back to Loans and cards</BackButton>
-      <CustomHeading>Home life</CustomHeading>
-      <Form id="credit-card" spacing="large" className="pt-6" onSubmit={handleSubmit}>
+      <CustomHeading groupHeading="Your finances" leadText="[Dummy lead text to be replaced later]">
+        Home life
+      </CustomHeading>
+      {validationErrors.length >= 1 && <ErrorValidationAlert errors={validationErrors} />}
+      <Form id="credit-card" spacing="large" onSubmit={handleSubmit}>
         <FormSection className="border-none !p-0">
           <FormGroup>
-            <InputGroup label="What is your current housing situation?" errorMessage={housingError} size="large">
+            <InputGroup
+              instanceId="housing"
+              label="What is your current housing situation?"
+              errorMessage={housingError}
+              size="large"
+            >
               <Select name="housing" defaultValue={data.housing} invalid={!!housingError}>
                 <option value="">Select</option>
                 <option value="Renting">Renting</option>
@@ -70,6 +88,7 @@ export default function HomeLife() {
             <ButtonGroup
               label="Do you share household expenses?"
               hintMessage="For example utility bills"
+              id="sharedExpenses"
               errorMessage={sharedExpensesError}
               defaultValue={data.sharedExpenses}
               size="large"
@@ -86,6 +105,7 @@ export default function HomeLife() {
             <InputGroup
               label="How many dependants do you have?"
               hint="Excluding spouse"
+              instanceId="dependants"
               errorMessage={dependantsError}
               size="large"
             >
@@ -105,28 +125,27 @@ export default function HomeLife() {
               label="All other expenses"
               hint="For example Food, regular bills. transport, Insurance, Child support. Enter a dollar value and choose a frequency"
               errorMessage={expensesError || expenseFreqError}
+              instanceId="expenses"
               before="$"
               after={
-                <Select name="expenseFreq" invalid={!!expenseFreqError} defaultValue={data.expenseFreq}>
+                <Select
+                  name="expenseFreq"
+                  id="expenseFreq"
+                  invalid={!!expenseFreqError}
+                  defaultValue={data.expenseFreq}
+                >
                   <option value="">Select</option>
-                  <option value="Yearly">Yearly</option>
-                  <option value="Monthly">Monthly</option>
-                  <option value="Fortnightly">Fortnightly</option>
                   <option value="Weekly">Weekly</option>
+                  <option value="Fortnightly">Fortnightly</option>
+                  <option value="Monthly">Monthly</option>
                 </Select>
               }
             >
               <Input invalid={!!expensesError} name="expenses" defaultValue={data.expenses} />
             </InputGroup>
           </FormGroup>
         </FormSection>
-        <Cta
-          primaryType="submit"
-          secondaryOnClick={() => router.push('/credit-cards/loans-and-cards')}
-          secondary="Back"
-          tertiaryOnClick={() => router.push('/')}
-          tertiary="Cancel"
-        >
+        <Cta primaryType="submit" tertiaryOnClick={() => router.push('/')} tertiary="Cancel">
           Next
         </Cta>
       </Form>

diff --git a/apps/protoform/src/app/credit-cards/income-and-savings/page.tsx b/apps/protoform/src/app/credit-cards/income-and-savings/page.tsx
@@ -7,6 +7,7 @@ import { FormEvent, useEffect, useState } from 'react';
 import { BackButton } from '@/components/back-button/back-button';
 import { Cta } from '@/components/cta/cta';
 import { CustomHeading } from '@/components/custom-heading/custom-heading';
+import { ErrorValidationAlert, ValidationErrorType } from '@/components/error-validation-alert/error-validation-alert';
 import { useSidebar } from '@/components/sidebar/context';
 import { defaultError } from '@/constants/form-contsants';
 import { getFormData } from '@/utils/getFormData';
@@ -19,6 +20,7 @@ export default function IncomeAndSavings() {
   const [incomeError, setIncomeError] = useState('');
   const [freqError, setFreqError] = useState('');
   const [balanceError, setBalanceError] = useState('');
+  const [validationErrors, setValidationErrors] = useState<ValidationErrorType[]>([]);
 
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -31,6 +33,11 @@ export default function IncomeAndSavings() {
       setIncomeError(!income ? defaultError : '');
       setBalanceError(!totalBal ? defaultError : '');
       setFreqError(!incomeFreq ? defaultError : '');
+      setValidationErrors([
+        ...(!totalBal ? [{ id: 'totalBal', label: 'Total balances in savings / investment accounts' }] : []),
+        ...(!income ? [{ id: 'income', label: 'Income / salary / pension' }] : []),
+        ...(!incomeFreq ? [{ id: 'incomeFreq', label: 'Income frequency' }] : []),
+      ]);
     } else {
       setData({ ...data, totalBal, incomeFreq, income });
       router.push('/credit-cards/loans-and-cards');
@@ -46,22 +53,26 @@ export default function IncomeAndSavings() {
   return (
     <div>
       <BackButton onClick={() => router.push('/credit-cards')}>Back to Quick contact</BackButton>
-      <CustomHeading>Income & savings</CustomHeading>
-      <Form id="credit-card" spacing="large" className="pt-6" onSubmit={handleSubmit}>
+      <CustomHeading groupHeading="Your finances" leadText="[Dummy lead text to be replaced later]">
+        Income & savings
+      </CustomHeading>
+      {validationErrors.length >= 1 && <ErrorValidationAlert errors={validationErrors} />}
+      <Form id="credit-card" spacing="large" onSubmit={handleSubmit}>
         <FormSection className="border-none !p-0">
           <FormGroup>
             <Repeater className="mb-5">
               <InputGroup
                 label="Income / salary / pension (after tax)"
                 hint="Enter a dollar value and choose a frequency"
                 errorMessage={incomeError || freqError}
+                instanceId="income"
                 before="$"
                 after={
-                  <Select name="incomeFreq" defaultValue={data.incomeFreq} invalid={!!freqError}>
+                  <Select name="incomeFreq" id="incomeFreq" defaultValue={data.incomeFreq} invalid={!!freqError}>
                     <option value="">Select</option>
-                    <option value="Yearly">Yearly</option>
+                    <option value="Weekly">Weekly</option>
+                    <option value="Fortnightly">Fortnightly</option>
                     <option value="Monthly">Monthly</option>
-                    <option value="Daily">Daily</option>
                   </Select>
                 }
                 size="large"
@@ -76,20 +87,15 @@ export default function IncomeAndSavings() {
               size="large"
               label="Total balances in savings / investment accounts (if any)"
               hint="Enter a dollar value"
+              instanceId="totalBal"
               errorMessage={balanceError}
               before="$"
             >
               <Input invalid={!!balanceError} name="totalBal" defaultValue={data.totalBal} />
             </InputGroup>
           </FormGroup>
         </FormSection>
-        <Cta
-          primaryType="submit"
-          secondaryOnClick={() => router.push('/credit-cards')}
-          secondary="Back"
-          tertiaryOnClick={() => router.push('/')}
-          tertiary="Cancel"
-        >
+        <Cta primaryType="submit" tertiaryOnClick={() => router.push('/')} tertiary="Cancel">
           Next
         </Cta>
       </Form>