Skip to content
This repository was archived by the owner on Dec 1, 2025. It is now read-only.

Commit 14a5ec5

Browse files
d4lekd4lek
committed
insurer preview updated and accessibility test added
1 parent a2a3775 commit 14a5ec5

7 files changed

Lines changed: 161 additions & 6 deletions

File tree

‎packages/layout/src/components/__tests__/insurer.spec.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import { Insurer } from '../cards/insurer/insurer';
4+
import { axe } from 'jest-axe';
5+
6+
const noop = () => Promise.resolve();
7+
8+
const insurer = {
9+
id: '',
10+
schemeRoleId: 123,
11+
effectiveDate: '1997-04-01T00:00:00',
12+
organisationReference: 123,
13+
organisationName: 'Some Organisation Name',
14+
insurerCompanyReference: '12345678',
15+
addressLine1: 'Napier House',
16+
addressLine2: 'Trafalgar Pl',
17+
addressLine3: '',
18+
postTown: 'Brighton',
19+
postCode: 'BN1 4DW',
20+
county: 'West Sussex',
21+
postcode: '',
22+
countryId: '',
23+
telephoneNumber: '01273 222 111',
24+
emailAddress: 'john.wick@warnerbros.com',
25+
};
26+
27+
describe('Insurer Preview', () => {
28+
test('is accessible', async () => {
29+
const { container } = render(
30+
<Insurer
31+
onSaveType={noop}
32+
onRemove={noop}
33+
onCorrect={(_value) => {}}
34+
complete={true}
35+
insurer={insurer}
36+
/>,
37+
);
38+
39+
const results = await axe(container);
40+
expect(results).toHaveNoViolations();
41+
});
42+
});

‎packages/layout/src/components/cards/insurer/i18n.ts‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,20 @@ export type InsurerI18nProps = {
55
two: string;
66
three: string;
77
four: string;
8+
five: string;
89
};
910
checkboxLabel: string;
1011
};
12+
reference: {
13+
title: string;
14+
subtitle: string;
15+
fields: {
16+
insurerCompanyReference: {
17+
label: string;
18+
error: string;
19+
};
20+
};
21+
};
1122
remove: {
1223
confirm: {
1324
breadcrumbs: {
@@ -51,10 +62,21 @@ export const i18n: InsurerI18nProps = {
5162
one: 'Insurer administrator',
5263
two: 'Remove',
5364
three: 'AON',
54-
four: 'Insurer reference number',
65+
four: 'Contact details',
66+
five: 'Insurer reference number',
5567
},
5668
checkboxLabel: 'All details are correct.',
5769
},
70+
reference: {
71+
title: 'Reference details for this insurer',
72+
subtitle: 'Provide reference details for the insurer.',
73+
fields: {
74+
insurerCompanyReference: {
75+
label: 'Reference Number',
76+
error: 'Please provide reference number for the insurer',
77+
},
78+
},
79+
},
5880
remove: {
5981
confirm: {
6082
breadcrumbs: {

‎packages/layout/src/components/cards/insurer/insurer.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ import { Insurer } from '@tpr/layout';
4545
county: 'West Sussex',
4646
postcode: '',
4747
countryId: '',
48-
telephoneNumber: '',
49-
emailAddress: '',
48+
telephoneNumber: '01273 222 111',
49+
emailAddress: 'john.wick@warnerbros.com',
5050
};
5151
return (
5252
<Insurer

‎packages/layout/src/components/cards/insurer/insurer.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,16 @@ import { UnderlinedButton } from '../components/button';
1010
import { Preview } from './views/preview/preview';
1111
import { DateForm } from './views/remove/date/date';
1212
import { Confirm } from './views/remove/confirm/confirm';
13+
import { Reference } from './views/reference';
1314
import styles from '../cards.module.scss';
1415

1516
const CardContentSwitch: React.FC = () => {
1617
const { current } = useInsurerContext();
1718
switch (true) {
1819
case current.matches('preview'):
1920
return <Preview />;
21+
case current.matches({ edit: 'reference' }):
22+
return <Reference />;
2023
case current.matches({ remove: 'date' }):
2124
return <DateForm />;
2225
case current.matches({ remove: 'confirm' }):

‎packages/layout/src/components/cards/insurer/insurerMachine.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@ import { InsurerProps } from './context';
44
interface InsurerStates {
55
states: {
66
preview: {};
7+
edit: {
8+
states: {
9+
reference: {};
10+
};
11+
};
712
remove: {
813
states: {
914
date: {};
@@ -16,9 +21,11 @@ interface InsurerStates {
1621

1722
type InsurerEvents =
1823
| { type: 'COMPLETE'; value: boolean }
24+
| { type: 'EDIT_INSURER' }
1925
| { type: 'REMOVE' }
2026
| { type: 'CANCEL' }
2127
| { type: 'NEXT'; values?: any }
28+
| { type: 'SAVE'; values?: any }
2229
| { type: 'BACK' }
2330
| { type: 'DELETE' };
2431

@@ -41,13 +48,25 @@ const insurerMachine = Machine<InsurerContext, InsurerStates, InsurerEvents>({
4148
id: 'preview',
4249
on: {
4350
REMOVE: '#remove',
51+
EDIT_INSURER: 'edit',
4452
COMPLETE: {
4553
actions: assign((_, event) => ({
4654
complete: event.value,
4755
})),
4856
},
4957
},
5058
},
59+
edit: {
60+
initial: 'reference',
61+
states: {
62+
reference: {
63+
id: 'reference',
64+
on: {
65+
SAVE: '#preview',
66+
},
67+
},
68+
},
69+
},
5170
remove: {
5271
id: 'remove',
5372
initial: 'date',

‎packages/layout/src/components/cards/insurer/views/preview/preview.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,16 @@ export const Preview: React.FC<any> = () => {
3030
<Flex
3131
cfg={{ width: 5, flex: '0 0 auto', flexDirection: 'column', pl: 4 }}
3232
>
33-
<UnderlinedButton isOpen={false} onClick={() => {}}>
34-
{i18n.preview.buttons.four}
33+
<UnderlinedButton>{i18n.preview.buttons.four}</UnderlinedButton>
34+
<Flex cfg={{ mt: 1, flexDirection: 'column', mb: 2 }}>
35+
<P>Phone: {insurer.telephoneNumber}</P>
36+
<P>Email: {insurer.emailAddress}</P>
37+
</Flex>
38+
<UnderlinedButton isOpen={false} onClick={() => send('EDIT_INSURER')}>
39+
{i18n.preview.buttons.five}
3540
</UnderlinedButton>
3641
<Flex cfg={{ mt: 1, flexDirection: 'column' }}>
37-
<P>Ref {insurer.insurerCompanyReference}</P>
42+
<P>Ref: {insurer.insurerCompanyReference}</P>
3843
</Flex>
3944
</Flex>
4045
</Flex>

‎packages/layout/src/components/cards/insurer/views/reference/index.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react';
2+
import { Form, validate, FieldProps, renderFields } from '@tpr/forms';
3+
import { useInsurerContext } from '../../context';
4+
import { Footer } from '../../../components/card';
5+
import { Content } from '../../../components/content';
6+
import { ArrowButton } from '../../../../buttons/buttons';
7+
import { InsurerI18nProps } from '../../i18n';
8+
import { RecursivePartial } from '../../context';
9+
10+
const getFields = (
11+
fields: RecursivePartial<InsurerI18nProps['reference']['fields']>,
12+
): FieldProps[] => [
13+
{
14+
type: 'text',
15+
name: 'insurerCompanyReference',
16+
label: fields.insurerCompanyReference.label,
17+
inputWidth: 5,
18+
error: fields.insurerCompanyReference.error,
19+
cfg: { mb: 3 },
20+
},
21+
];
22+
23+
export const Reference: React.FC = () => {
24+
const { current, send, i18n } = useInsurerContext();
25+
const { insurer } = current.context;
26+
const fields = getFields(i18n?.reference?.fields);
27+
28+
const onSubmit = (values) => {
29+
send('SAVE', { values });
30+
};
31+
32+
return (
33+
<Content
34+
type="insurer"
35+
title={i18n.reference.title}
36+
subtitle={i18n.reference.subtitle}
37+
loading={false}
38+
>
39+
<Form
40+
onSubmit={onSubmit}
41+
initialValues={{
42+
insurerCompanyReference: insurer.insurerCompanyReference,
43+
}}
44+
validate={validate(fields)}
45+
>
46+
{({ handleSubmit }) => (
47+
<form onSubmit={handleSubmit}>
48+
{renderFields(fields)}
49+
<Footer>
50+
<ArrowButton
51+
intent="special"
52+
pointsTo="up"
53+
iconSide="right"
54+
type="submit"
55+
title="Save and close"
56+
disabled={false}
57+
/>
58+
</Footer>
59+
</form>
60+
)}
61+
</Form>
62+
</Content>
63+
);
64+
};

0 commit comments

Comments
 (0)