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

Commit 70f4368

Browse files
d4lekd4lek
authored
Merge pull request #79 from thepensionsregulator/feature-trustee-save-variants
Trustee Card: added a confirm dialog to trustee and onSave is now per form
2 parents 8ba51ee + ab3f574 commit 70f4368

8 files changed

Lines changed: 152 additions & 81 deletions

File tree

‎packages/layout/src/components/cards/employer/views/remove/confirm/confirm.module.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22

33
.confirmBox {
44
border: 4px solid $colors-danger-2;
5+
outline: 4px solid $colors-warning-1;
56
}

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

Lines changed: 59 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
import React, { createContext, useContext, ReactElement } from 'react';
22
import { useMachine } from '@xstate/react';
3-
import trusteeMachine, { TrusteeContext as TC } from './trusteeMachine';
3+
import trusteeMachine, {
4+
TrusteeContext as TC,
5+
TrusteeProps,
6+
} from './trusteeMachine';
47
import { State, EventData } from 'xstate';
58
import { SpaceProps } from '@tpr/core';
69

710
export const TrusteeContext = createContext<TrusteeContextProps>({
11+
complete: false,
12+
testId: '',
13+
cfg: {},
814
current: {},
915
send: (_, __) => ({}),
1016
onCorrect: () => {},
1117
onRemove: () => new Promise((res) => res()),
12-
onSave: () => new Promise((res) => res()),
1318
addressAPI: { get: () => new Promise((res) => res()) },
1419
});
1520

@@ -37,19 +42,28 @@ export interface TrusteeInput {
3742
[key: string]: any;
3843
}
3944

40-
export interface TrusteeContextProps extends Omit<TrusteeProps, 'trustee'> {
45+
export interface TrusteeContextProps {
46+
complete?: boolean;
47+
testId?: string;
48+
children?: RenderProps | ReactElement;
49+
cfg?: SpaceProps;
50+
onRemove: (...args: any[]) => Promise<any>;
51+
onCorrect: (...args: any[]) => void;
4152
send: (event: any, payload?: EventData) => Partial<State<TC, any, any, any>>;
53+
addressAPI: any;
4254
current: Partial<State<TC, any, any, any>>;
4355
}
4456

45-
export interface TrusteeProps {
57+
export interface TrusteeCardProps {
58+
trustee: TrusteeInput;
4659
complete?: boolean;
47-
onCorrect?: (...args: any[]) => void;
48-
onRemove?: (...args: any[]) => Promise<any>;
49-
onSave?: (trustee: Partial<TrusteeInput>) => Promise<any>;
60+
onCorrect: (...args: any[]) => void;
61+
onRemove: (...args: any[]) => Promise<any>;
62+
onDetailsSave: (values: any, trustee: TrusteeProps) => Promise<any>;
63+
onContactSave: (values: any, trustee: TrusteeProps) => Promise<any>;
64+
onAddressSave: (values: any, trustee: TrusteeProps) => Promise<any>;
5065
addressAPI: any;
5166
testId?: string;
52-
trustee: TrusteeInput;
5367
children?: RenderProps | ReactElement;
5468
cfg?: SpaceProps;
5569
}
@@ -58,9 +72,11 @@ export const TrusteeProvider = ({
5872
trustee,
5973
complete,
6074
children,
61-
onSave,
75+
onDetailsSave,
76+
onContactSave,
77+
onAddressSave,
6278
...rest
63-
}: TrusteeProps) => {
79+
}: TrusteeCardProps) => {
6480
const {
6581
addressLine1,
6682
addressLine2,
@@ -89,19 +105,47 @@ export const TrusteeProvider = ({
89105
},
90106
},
91107
services: {
92-
saveData: ({ trustee }, _) => {
93-
const { address, ...details } = trustee;
94-
return onSave({ ...details, ...address });
108+
onDetailsSave: ({ trustee }) => {
109+
const {
110+
schemeRoleId,
111+
title,
112+
forename,
113+
surname,
114+
trusteeType,
115+
isProfessionalTrustee,
116+
} = trustee;
117+
return onDetailsSave(
118+
{
119+
schemeRoleId,
120+
title,
121+
forename,
122+
surname,
123+
trusteeType,
124+
isProfessionalTrustee,
125+
},
126+
trustee,
127+
);
128+
},
129+
onContactSave: ({ trustee }) => {
130+
const { schemeRoleId, telephoneNumber, emailAddress } = trustee;
131+
return onContactSave(
132+
{ schemeRoleId, telephoneNumber, emailAddress },
133+
trustee,
134+
);
135+
},
136+
onAddressSave: ({ trustee }) => {
137+
const { schemeRoleId, address } = trustee;
138+
return onAddressSave({ schemeRoleId, ...address }, trustee);
95139
},
96140
},
97141
});
98142

99143
const ui =
100144
typeof children === 'function'
101-
? children({ current, send, onSave, ...rest })
145+
? children({ current, send, ...rest })
102146
: children;
103147
return (
104-
<TrusteeContext.Provider value={{ current, send, onSave, ...rest }}>
148+
<TrusteeContext.Provider value={{ current, send, ...rest }}>
105149
{ui}
106150
</TrusteeContext.Provider>
107151
);

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,12 @@ import { Trustee } from '@tpr/layout';
3232
const API = {
3333
get: () => Promise.reject(new Error('THERE IS NO API IMPLEMENTATION')),
3434
};
35+
const callbackFn = (values, _fullTrusteeObject) => {
36+
console.log(values);
37+
return Promise.resolve();
38+
};
3539
const trustee = {
36-
id: '123',
40+
id: '12345',
3741
schemeRoleId: '12345',
3842
//
3943
title: 'Mr',
@@ -55,14 +59,10 @@ import { Trustee } from '@tpr/layout';
5559
};
5660
return (
5761
<Trustee
58-
onSave={(trustee) => {
59-
console.log(trustee);
60-
return Promise.resolve();
61-
}}
62-
onRemove={(details) => {
63-
console.log(details);
64-
return Promise.resolve();
65-
}}
62+
onDetailsSave={callbackFn}
63+
onContactSave={callbackFn}
64+
onAddressSave={callbackFn}
65+
onRemove={callbackFn}
6666
onCorrect={(value) => setComplete(value)}
6767
addressAPI={API}
6868
complete={complete}

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import React from 'react';
2-
import { TrusteeProvider, useTrusteeContext, TrusteeProps } from './context';
2+
import {
3+
TrusteeProvider,
4+
useTrusteeContext,
5+
TrusteeCardProps,
6+
} from './context';
37
import { H4, Flex } from '@tpr/core';
48
import { UnderlinedButton } from '../components/button';
59
import { Preview } from './views/preview';
@@ -101,7 +105,7 @@ const RemoveButton: React.FC<any> = ({ current, send }) => {
101105
);
102106
};
103107

104-
export const Trustee: React.FC<Omit<TrusteeProps, 'children'>> = ({
108+
export const Trustee: React.FC<Omit<TrusteeCardProps, 'children'>> = ({
105109
cfg,
106110
...props
107111
}) => {

‎packages/layout/src/components/cards/trustee/trusteeMachine.ts‎

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -63,25 +63,27 @@ type TrusteeAddress = Partial<{
6363
countryId: string;
6464
}>;
6565

66+
export type TrusteeProps = {
67+
id: string;
68+
schemeRoleId: string;
69+
//
70+
title: string;
71+
forename: string;
72+
surname: string;
73+
trusteeType: string;
74+
isProfessionalTrustee: boolean;
75+
//
76+
address: TrusteeAddress;
77+
//
78+
telephoneNumber: string;
79+
emailAddress: string;
80+
[key: string]: any;
81+
};
82+
6683
export interface TrusteeContext {
6784
loading: boolean;
6885
complete: boolean;
69-
trustee: {
70-
id: string;
71-
schemeRoleId: string;
72-
//
73-
title: string;
74-
forename: string;
75-
surname: string;
76-
trusteeType: string;
77-
isProfessionalTrustee: boolean;
78-
//
79-
address: TrusteeAddress;
80-
//
81-
telephoneNumber: string;
82-
emailAddress: string;
83-
[key: string]: any;
84-
};
86+
trustee: TrusteeProps;
8587
remove?: {
8688
reason: null | string;
8789
date: null | string;
@@ -174,7 +176,7 @@ const trusteeMachine = Machine<TrusteeContext, TrusteeStates, TrusteeEvents>({
174176
REMOVE: '#remove',
175177
},
176178
},
177-
save: saveTrustee('kind'),
179+
save: saveTrustee('onDetailsSave', 'kind'),
178180
},
179181
},
180182
company: {
@@ -197,7 +199,7 @@ const trusteeMachine = Machine<TrusteeContext, TrusteeStates, TrusteeEvents>({
197199
REMOVE: '#remove',
198200
},
199201
},
200-
save: saveTrustee('address'),
202+
save: saveTrustee('onAddressSave', 'address'),
201203
},
202204
},
203205
contact: {
@@ -219,7 +221,7 @@ const trusteeMachine = Machine<TrusteeContext, TrusteeStates, TrusteeEvents>({
219221
REMOVE: '#remove',
220222
},
221223
},
222-
save: saveTrustee('details'),
224+
save: saveTrustee('onContactSave', 'details'),
223225
},
224226
},
225227
},
@@ -254,11 +256,17 @@ const trusteeMachine = Machine<TrusteeContext, TrusteeStates, TrusteeEvents>({
254256
},
255257
});
256258

257-
function saveTrustee(targetOnError: string) {
259+
function saveTrustee(
260+
onSaveFunctionName: 'onContactSave' | 'onAddressSave' | 'onDetailsSave',
261+
targetOnError: string,
262+
) {
263+
if (!onSaveFunctionName) {
264+
throw Error('saveTrustee function doesn`t have a prop name');
265+
}
258266
return {
259267
invoke: {
260-
id: 'saveData',
261-
src: 'saveData',
268+
id: onSaveFunctionName,
269+
src: onSaveFunctionName,
262270
onDone: {
263271
target: '#preview',
264272
actions: assign({

‎packages/layout/src/components/cards/trustee/views/remove/confirm/confirm.module.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@import '@tpr/theming/lib/variables.scss';
2+
3+
.confirmBox {
4+
border: 4px solid $colors-danger-2;
5+
outline: 4px solid $colors-warning-1;
6+
}

‎packages/layout/src/components/cards/trustee/views/remove/confirm/index.tsx‎

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React, { useState } from 'react';
2-
import { H3, P, Hr, Link } from '@tpr/core';
2+
import { H3, H4, P, Hr, Link, Flex } from '@tpr/core';
33
import { useTrusteeContext } from '../../../context';
4-
import { Footer, FooterButton } from '../../../../components/card';
4+
import { FooterButton } from '../../../../components/card';
55
import { Content } from '../../../../components/content';
6+
import styles from './confirm.module.scss';
67
import {
78
Breadcrumbs,
89
BreadcrumbLink,
@@ -27,10 +28,13 @@ const RemoveConfirm: React.FC = () => {
2728

2829
function handleRemove() {
2930
setLoading(true);
30-
onRemove({
31-
id: trustee.id,
32-
...remove,
33-
})
31+
onRemove(
32+
{
33+
schemeRoleId: trustee.schemeRoleId,
34+
...remove,
35+
},
36+
trustee,
37+
)
3438
.then(() => {
3539
setLoading(false);
3640
})
@@ -44,28 +48,29 @@ const RemoveConfirm: React.FC = () => {
4448
type="trustee"
4549
breadcrumbs={() => <Breadcrumbs links={breadcrumbLinks} />}
4650
>
47-
<H3 cfg={{ mt: 3, fontWeight: 2 }}>
51+
<H4 cfg={{ mt: 3, color: 'neutral.5' }}>Edit trustee</H4>
52+
<H3 cfg={{ fontWeight: 2 }}>
4853
Are you sure you want to remove this trustee?
4954
</H3>
5055
<Hr cfg={{ my: 4 }} />
51-
<P cfg={{ color: 'neutral.6' }}>This can't be undone.</P>
52-
<Footer>
53-
<FooterButton
54-
disabled={loading}
55-
title="Remove"
56-
intent="danger"
57-
onClick={handleRemove}
58-
loadingMessage="Removing..."
59-
/>
60-
<Link
61-
disabled={loading}
62-
cfg={{ m: 3 }}
63-
onClick={() => send('CANCEL')}
64-
underline
65-
>
66-
Cancel
67-
</Link>
68-
</Footer>
56+
<Flex
57+
cfg={{ flexDirection: 'column', p: 4, my: 4 }}
58+
className={styles.confirmBox}
59+
>
60+
<P cfg={{ my: 3 }}>This can't be undone.</P>
61+
<Flex>
62+
<FooterButton
63+
disabled={loading}
64+
title="Remove this trustee >"
65+
intent="danger"
66+
onClick={handleRemove}
67+
loadingMessage="Removing..."
68+
/>
69+
<Link cfg={{ m: 3 }} underline onClick={() => send('CANCEL')}>
70+
Cancel
71+
</Link>
72+
</Flex>
73+
</Flex>
6974
</Content>
7075
);
7176
};

0 commit comments

Comments
 (0)