Merge pull request #133 from thepensionsregulator/feature-insurer-placement-updates

insurer ref number input update and validation

Author: d4lek

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

@@ -28,7 +28,7 @@ describe('Insurer Preview', () => {
 	test('is accessible', async () => {
 		const { container } = render(
 			<Insurer
-				onSaveType={noop}
+				onSaveRef={noop}
 				onRemove={noop}
 				onCorrect={(_value) => {}}
 				complete={true}

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

@@ -11,7 +11,7 @@ export const InsurerContext = createContext<InsurerContextProps>({
 	send: (_, __) => ({}),
 	onCorrect: () => {},
 	onRemove: Promise.resolve,
-	onSaveType: Promise.resolve,
+	onSaveRef: Promise.resolve,
 	i18n: i18nDefaults,
 });
 
@@ -50,7 +50,7 @@ export interface InsurerProviderProps {
 	complete?: boolean;
 	onCorrect?: (...args: any[]) => void;
 	onRemove?: (...args: any[]) => Promise<any>;
-	onSaveType?: (...args: any[]) => Promise<any>;
+	onSaveRef?: (...args: any[]) => Promise<any>;
 	testId?: string;
 	/** insurer props from the API */
 	insurer: Partial<InsurerProps>;

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

@@ -15,7 +15,9 @@ export type InsurerI18nProps = {
 		fields: {
 			insurerCompanyReference: {
 				label: string;
-				error: string;
+				errorIfEmpty: string;
+				errorIfTooShort: string;
+				errorIfTooLong: string;
 			};
 		};
 	};
@@ -73,7 +75,9 @@ export const i18n: InsurerI18nProps = {
 		fields: {
 			insurerCompanyReference: {
 				label: 'Reference Number',
-				error: 'Please provide reference number for the insurer',
+				errorIfEmpty: 'Please provide reference number for the insurer',
+				errorIfTooShort: 'We require at least one letter',
+				errorIfTooLong: 'Maximum length is 100 letters',
 			},
 		},
 	},

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

@@ -35,7 +35,7 @@ import { Insurer } from '@tpr/layout';
 			schemeRoleId: 123,
 			effectiveDate: '1997-04-01T00:00:00',
 			organisationReference: 123,
-			organisationName: 'Some Organisation Name',
+			organisationName: 'Nike Inc.',
 			insurerCompanyReference: '12345678',
 			addressLine1: 'Napier House',
 			addressLine2: 'Trafalgar Pl',
@@ -50,7 +50,7 @@ import { Insurer } from '@tpr/layout';
 		};
 		return (
 			<Insurer
-				onSaveType={callbackFn}
+				onSaveRef={callbackFn}
 				onRemove={callbackFn}
 				onCorrect={(value) => setComplete(value)}
 				complete={complete}

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

@@ -4,7 +4,7 @@ import {
 	InsurerProviderProps,
 	useInsurerContext,
 } from './context';
-import { Flex } from '@tpr/core';
+import { Flex, H4 } from '@tpr/core';
 import { Toolbar } from '../components/toolbar';
 import { UnderlinedButton } from '../components/button';
 import { Preview } from './views/preview/preview';
@@ -65,6 +65,7 @@ export const Insurer: React.FC<InsurerProviderProps> = ({
 					<Flex cfg={cfg} data-testid={testId} className={styles.card}>
 						<Toolbar
 							complete={context.complete}
+							subtitle={() => <H4>{context.insurer.organisationName}</H4>}
 							buttonLeft={() => (
 								<UnderlinedButton>{i18n.preview.buttons.one}</UnderlinedButton>
 							)}

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

@@ -62,7 +62,17 @@ const insurerMachine = Machine<InsurerContext, InsurerStates, InsurerEvents>({
 				reference: {
 					id: 'reference',
 					on: {
-						SAVE: '#preview',
+						SAVE: {
+							target: '#preview',
+							actions: assign((context, event) => ({
+								insurer: {
+									...context.insurer,
+									...event.values,
+								},
+							})),
+						},
+						CANCEL: '#preview',
+						REMOVE: '#remove',
 					},
 				},
 			},

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

@@ -19,7 +19,6 @@ export const Preview: React.FC<any> = () => {
 				>
 					<UnderlinedButton>{i18n.preview.buttons.three}</UnderlinedButton>
 					<Flex cfg={{ my: 2, flexDirection: 'column' }}>
-						<H4 cfg={{ lineHeight: 3 }}>{insurer.organisationName}</H4>
 						<P>{insurer.addressLine1}</P>
 						{insurer.addressLine2 && <P>{insurer.addressLine2}</P>}
 						{insurer.addressLine3 && <P>{insurer.addressLine3}</P>}

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

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Form, validate, FieldProps, renderFields } from '@tpr/forms';
+import { Link, Flex } from '@tpr/core';
 import { useInsurerContext } from '../../context';
 import { Footer } from '../../../components/card';
 import { Content } from '../../../components/content';
@@ -15,18 +16,37 @@ const getFields = (
 		name: 'insurerCompanyReference',
 		label: fields.insurerCompanyReference.label,
 		inputWidth: 5,
-		error: fields.insurerCompanyReference.error,
+		error: (value: string) => {
+			if (!value) {
+				return fields.insurerCompanyReference.errorIfEmpty;
+			} else if (value.length < 1) {
+				return fields.insurerCompanyReference.errorIfTooShort;
+			} else if (value.length > 100) {
+				return fields.insurerCompanyReference.errorIfTooLong;
+			}
+			return undefined;
+		},
 		cfg: { mb: 3 },
 	},
 ];
 
 export const Reference: React.FC = () => {
-	const { current, send, i18n } = useInsurerContext();
+	const [loading, setLoading] = useState(false);
+	const { current, send, i18n, onSaveRef } = useInsurerContext();
 	const { insurer } = current.context;
 	const fields = getFields(i18n?.reference?.fields);
 
-	const onSubmit = (values) => {
-		send('SAVE', { values });
+	const onSubmit = async (values) => {
+		setLoading(true);
+		try {
+			await onSaveRef(values, insurer);
+			send('SAVE', { values });
+			setLoading(false);
+		} catch (error) {
+			// todo: maybe an error message from the server?
+			console.log(error);
+			setLoading(false);
+		}
 	};
 
 	return (
@@ -47,14 +67,25 @@ export const Reference: React.FC = () => {
 					<form onSubmit={handleSubmit}>
 						{renderFields(fields)}
 						<Footer>
-							<ArrowButton
-								intent="special"
-								pointsTo="up"
-								iconSide="right"
-								type="submit"
-								title="Save and close"
-								disabled={false}
-							/>
+							<Flex>
+								<ArrowButton
+									intent="special"
+									pointsTo="up"
+									iconSide="right"
+									type="submit"
+									title="Save and close"
+									disabled={loading}
+								/>
+
+								<Link
+									cfg={{ m: 3 }}
+									disabled={loading}
+									underline
+									onClick={() => send('CANCEL')}
+								>
+									Cancel
+								</Link>
+							</Flex>
 						</Footer>
 					</form>
 				)}