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

Commit 95f749a

Browse files
d4lekd4lek
committed
InHouseAdmin card initialized and ready to be configured
2 parents 12ff054 + 0502d5b commit 95f749a

15 files changed

Lines changed: 206 additions & 42 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ describe('Insurer Preview', () => {
2828
test('is accessible', async () => {
2929
const { container } = render(
3030
<Insurer
31-
onSaveType={noop}
31+
onSaveRef={noop}
3232
onRemove={noop}
3333
onCorrect={(_value) => {}}
3434
complete={true}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const StyledCardToolbar: React.FC = ({ children }) => {
2424
};
2525

2626
type ToolbarProps = {
27-
type: 'trustee' | 'employer' | 'insurer';
27+
type: 'trustee' | 'employer' | 'insurer' | 'inHouseAdmin';
2828
title: string;
2929
subtitle?: string;
3030
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import styles from './content.module.scss';
66
export const Loading = () => <div className={styles.loading} />;
77

88
type ContentProps = {
9-
type: 'trustee' | 'employer' | 'insurer';
9+
type: 'trustee' | 'employer' | 'insurer' | 'inHouseAdmin';
1010
title?: string;
1111
loading?: boolean;
1212
breadcrumbs?: any;

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,20 @@ export type InHouseAdminI18nProps = {
88
};
99
checkboxLabel: string;
1010
};
11+
contacts: {
12+
title: string;
13+
subtitle: string;
14+
fields: {
15+
telephone: {
16+
label: string;
17+
error: string;
18+
};
19+
email: {
20+
label: string;
21+
error: string;
22+
};
23+
};
24+
};
1125
};
1226

1327
export const i18n: InHouseAdminI18nProps = {
@@ -20,4 +34,19 @@ export const i18n: InHouseAdminI18nProps = {
2034
},
2135
checkboxLabel: 'All details are correct.',
2236
},
37+
contacts: {
38+
title: 'Contact details for this in house admin',
39+
subtitle: 'Provide contact details for the in house admin.',
40+
fields: {
41+
telephone: {
42+
label: 'Telephone number',
43+
error:
44+
'Enter a telephone number, like 0163 960 598 or +44 7700 900 359',
45+
},
46+
email: {
47+
label: 'Email address',
48+
error: 'Cannot be empty',
49+
},
50+
},
51+
},
2352
};

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

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,21 @@ import { Flex } from '@tpr/core';
88
import { Toolbar } from '../components/toolbar';
99
import { UnderlinedButton } from '../components/button';
1010
import { Preview } from './views/preview/preview';
11+
import { Contacts } from './views/contacts';
1112
import styles from '../cards.module.scss';
1213

1314
const CardContentSwitch: React.FC = () => {
1415
const { current } = useInHouseAdminContext();
15-
switch (true) {
16-
case current.matches('preview'):
17-
return <Preview />;
18-
// case current.matches({ remove: 'date' }):
19-
// return <DateForm />;
20-
// case current.matches({ remove: 'confirm' }):
21-
// return <Confirm />;
22-
default:
23-
return null;
16+
17+
if (current.matches('preview')) {
18+
return <Preview />;
19+
} else if (
20+
current.matches({ edit: { contact: 'details' } }) ||
21+
current.matches({ edit: { contact: 'save' } })
22+
) {
23+
return <Contacts />;
24+
} else {
25+
return null;
2426
}
2527
};
2628

‎packages/layout/src/components/cards/inHouseAdmin/inHouseAdminMachine.ts‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,12 @@ interface InHouseAdminStates {
66
preview: {};
77
edit: {
88
states: {
9-
reference: {};
9+
contact: {
10+
states: {
11+
details: {};
12+
save: {};
13+
};
14+
};
1015
};
1116
};
1217
remove: {
@@ -22,6 +27,7 @@ interface InHouseAdminStates {
2227
type InHouseAdminEvents =
2328
| { type: 'COMPLETE'; value: boolean }
2429
| { type: 'EDIT_INSURER' }
30+
| { type: 'EDIT_CONTACTS' }
2531
| { type: 'REMOVE' }
2632
| { type: 'CANCEL' }
2733
| { type: 'NEXT'; values?: any }
@@ -53,6 +59,7 @@ const inHouseAdminMachine = Machine<
5359
on: {
5460
REMOVE: '#remove',
5561
EDIT_INSURER: 'edit',
62+
EDIT_CONTACTS: 'edit.contact.details',
5663
COMPLETE: {
5764
actions: assign((_, event) => ({
5865
complete: event.value,
@@ -61,12 +68,19 @@ const inHouseAdminMachine = Machine<
6168
},
6269
},
6370
edit: {
64-
initial: 'reference',
71+
initial: 'contact',
6572
states: {
66-
reference: {
67-
id: 'reference',
68-
on: {
69-
SAVE: '#preview',
73+
contact: {
74+
initial: 'details',
75+
states: {
76+
details: {
77+
on: {
78+
SAVE: 'save',
79+
CANCEL: '#preview',
80+
REMOVE: '#remove',
81+
},
82+
},
83+
save: {},
7084
},
7185
},
7286
},

‎packages/layout/src/components/cards/inHouseAdmin/views/contacts/index.tsx‎

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

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const Preview: React.FC<any> = () => {
3232
<Flex
3333
cfg={{ width: 5, flex: '0 0 auto', flexDirection: 'column', pl: 4 }}
3434
>
35-
<UnderlinedButton onClick={() => {}}>
35+
<UnderlinedButton onClick={() => send('EDIT_CONTACTS')}>
3636
{i18n.preview.buttons.four}
3737
</UnderlinedButton>
3838
<Flex cfg={{ my: 2, flexDirection: 'column' }}>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const InsurerContext = createContext<InsurerContextProps>({
1111
send: (_, __) => ({}),
1212
onCorrect: () => {},
1313
onRemove: Promise.resolve,
14-
onSaveType: Promise.resolve,
14+
onSaveRef: Promise.resolve,
1515
i18n: i18nDefaults,
1616
});
1717

@@ -50,7 +50,7 @@ export interface InsurerProviderProps {
5050
complete?: boolean;
5151
onCorrect?: (...args: any[]) => void;
5252
onRemove?: (...args: any[]) => Promise<any>;
53-
onSaveType?: (...args: any[]) => Promise<any>;
53+
onSaveRef?: (...args: any[]) => Promise<any>;
5454
testId?: string;
5555
/** insurer props from the API */
5656
insurer: Partial<InsurerProps>;

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ export type InsurerI18nProps = {
1515
fields: {
1616
insurerCompanyReference: {
1717
label: string;
18-
error: string;
18+
errorIfEmpty: string;
19+
errorIfTooShort: string;
20+
errorIfTooLong: string;
1921
};
2022
};
2123
};
@@ -61,7 +63,7 @@ export const i18n: InsurerI18nProps = {
6163
buttons: {
6264
one: 'Insurer administrator',
6365
two: 'Remove',
64-
three: 'AON',
66+
three: 'Address',
6567
four: 'Contact details',
6668
five: 'Insurer reference number',
6769
},
@@ -73,7 +75,9 @@ export const i18n: InsurerI18nProps = {
7375
fields: {
7476
insurerCompanyReference: {
7577
label: 'Reference Number',
76-
error: 'Please provide reference number for the insurer',
78+
errorIfEmpty: 'Please provide reference number for the insurer',
79+
errorIfTooShort: 'We require at least one letter',
80+
errorIfTooLong: 'Maximum length is 100 letters',
7781
},
7882
},
7983
},

0 commit comments

Comments
 (0)