Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fixes/protoform changes #723

Merged
merged 3 commits into from
Feb 15, 2024
Merged

fixes/protoform changes #723

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
950c9f9
- updates to protoform based on feedback
tomjackking Feb 15, 2024
c01dba5
Update context.tsx
tomjackking Feb 15, 2024
3024a53
Update context.tsx
tomjackking Feb 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 19 additions & 11 deletions apps/protoform/src/app/credit-cards/address/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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');
Expand All @@ -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"
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions apps/protoform/src/app/credit-cards/context.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: '',
Expand Down
23 changes: 14 additions & 9 deletions apps/protoform/src/app/credit-cards/credit-limit/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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();
Expand All @@ -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');
Expand All @@ -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}
Expand All @@ -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>
Expand Down
47 changes: 33 additions & 14 deletions apps/protoform/src/app/credit-cards/home-life/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 {
Expand All @@ -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');
Expand All @@ -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>
Expand All @@ -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"
Expand All @@ -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"
>
Expand All @@ -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>
Expand Down
30 changes: 18 additions & 12 deletions apps/protoform/src/app/credit-cards/income-and-savings/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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();
Expand All @@ -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');
Expand All @@ -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"
Expand All @@ -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>
Expand Down
Loading
Loading