in house admin all screens created and mostly working

Author: d4lek

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Employer } from '../cards/employer/employer';
+import { axe } from 'jest-axe';
+
+const noop = () => Promise.resolve();
+
+const employer = {
+	schemeRoleId: 123,
+	employerType: 'principal-and-participating' as 'principal-and-participating',
+	organisationReference: 0,
+	companiesHouseNumber: 'AB123456',
+	registeredCharityNumber: '123',
+	organisationName: 'The Pensions Regulator',
+	addressLine1: 'Napier House',
+	addressLine2: 'Trafalgar Pl',
+	postTown: 'Brighton',
+	postCode: 'BN1 4DW',
+	county: 'West Sussex',
+	countryId: '',
+	effectiveDate: '1997-04-01T00:00:00',
+};
+
+describe('Employer Preview', () => {
+	test('is accessible', async () => {
+		const { container } = render(
+			<Employer
+				onSaveType={noop}
+				onRemove={noop}
+				onCorrect={(_value) => {}}
+				complete={true}
+				employer={employer}
+			/>,
+		);
+
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+});

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { InHouseAdmin } from '../cards/inHouseAdmin/inHouseAdmin';
+import { axe } from 'jest-axe';
+
+const noop = () => Promise.resolve();
+
+const inHouseAdmin = {
+	schemeRoleId: '123',
+	title: 'Mr',
+	firstname: 'John',
+	lastname: 'Smoth',
+	effectiveDate: '1997-04-01T00:00:00',
+	addressLine1: 'Napier House',
+	addressLine2: 'Trafalgar Pl',
+	addressLine3: '',
+	postTown: 'Brighton',
+	postCode: 'BN1 4DW',
+	county: 'West Sussex',
+	countryId: '',
+	telephoneNumber: '01273 222 111',
+	emailAddress: 'john.wick@warnerbros.com',
+};
+
+describe('InHouseAdmin Preview', () => {
+	test('is accessible', async () => {
+		const { container } = render(
+			<InHouseAdmin
+				onSaveContacts={noop}
+				onSaveAddress={noop}
+				onSaveName={noop}
+				onRemove={noop}
+				onCorrect={(_value) => {}}
+				complete={true}
+				addressAPI={{
+					get: (_endpont) => Promise.resolve(),
+					limit: 100,
+				}}
+				inHouseAdmin={inHouseAdmin}
+			/>,
+		);
+
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+});

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

@@ -25,11 +25,13 @@ export const StyledCardToolbar: React.FC = ({ children }) => {
 
 type ToolbarProps = {
 	type: 'trustee' | 'employer' | 'insurer' | 'inHouseAdmin';
+	typeName?: string;
 	title: string;
 	subtitle?: string;
 };
 export const Toolbar: React.FC<ToolbarProps> = ({
 	type = 'trustee',
+	typeName,
 	title,
 	subtitle,
 }) => {
@@ -39,7 +41,9 @@ export const Toolbar: React.FC<ToolbarProps> = ({
 				cfg={{ flexDirection: 'column', pb: 2 }}
 				className={styles.toolbarBottomBorder}
 			>
-				<P cfg={{ color: 'neutral.6', fontSize: 3 }}>Edit {type}</P>
+				<P cfg={{ color: 'neutral.6', fontSize: 3 }}>
+					Edit {typeName ? typeName : type}
+				</P>
 				<H3 cfg={{ fontWeight: 3 }}>{title}</H3>
 			</Flex>
 			{subtitle && (

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

@@ -7,13 +7,15 @@ export const Loading = () => <div className={styles.loading} />;
 
 type ContentProps = {
 	type: 'trustee' | 'employer' | 'insurer' | 'inHouseAdmin';
+	typeName?: string;
 	title?: string;
 	loading?: boolean;
 	breadcrumbs?: any;
 	subtitle?: string;
 };
 export const Content: React.FC<ContentProps> = ({
 	type,
+	typeName,
 	children,
 	title,
 	loading = false,
@@ -29,7 +31,14 @@ export const Content: React.FC<ContentProps> = ({
 		>
 			{loading && <Loading />}
 			{Breadcrumbs && <Breadcrumbs />}
-			{title && <Toolbar type={type} title={title} subtitle={subtitle} />}
+			{title && (
+				<Toolbar
+					type={type}
+					typeName={typeName}
+					title={title}
+					subtitle={subtitle}
+				/>
+			)}
 			{children}
 		</div>
 	);

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

@@ -40,7 +40,7 @@ export interface EmployerProviderProps {
 }
 
 export type EmployerProps = {
-	schemeRoleId: number;
+	schemeRoleId: string | number;
 	employerType:
 		| 'participating-employer'
 		| 'principal-employer'

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

@@ -7,16 +7,30 @@ import { State, EventData } from 'xstate';
 import { SpaceProps } from '@tpr/core';
 import { i18n as i18nDefaults, InHouseAdminI18nProps } from './i18n';
 import { useI18n } from '../hooks/use-i18n';
+import { splitObjectIntoTwo } from '../../../utils';
 
 export const InHouseAdminContext = createContext<InHouseAdminContextProps>({
 	current: {},
 	send: (_, __) => ({}),
 	onCorrect: () => {},
 	onRemove: Promise.resolve,
-	onSaveType: Promise.resolve,
+	onSaveContacts: Promise.resolve,
+	onSaveAddress: Promise.resolve,
+	onSaveName: Promise.resolve,
 	i18n: i18nDefaults,
+	addressAPI: {
+		get: (endpoint) => Promise.resolve(endpoint),
+		limit: 50,
+	},
 });
 
+type AddressAPIType = {
+	/** API instance with auth to get a list of addresses */
+	get: (endpoint: string) => Promise<any>;
+	/** limit of items to display per search */
+	limit: number;
+};
+
 type RenderProps = (_props: InHouseAdminContextProps) => ReactElement;
 
 export interface InHouseAdminContextProps
@@ -32,40 +46,70 @@ export type RecursivePartial<T> = {
 	[P in keyof T]?: RecursivePartial<T[P]>;
 };
 
-export type InHouseAdminProps = {
+interface InHouseAdmin {
 	id: string;
-	schemeRoleId: string;
+	schemeRoleId: string | number;
 	title: string;
 	firstname: string;
 	lastname: string;
 	effectiveDate: string;
+	countryId: string;
+	telephoneNumber: string;
+	emailAddress: string;
+	addressAPI: AddressAPIType;
+}
+
+export interface InHouseAdminWithContactsProps extends InHouseAdmin {
+	address: Partial<{
+		addressLine1: string;
+		addressLine2: string;
+		addressLine3: string;
+		postTown: string;
+		county: string;
+		postCode: string;
+		country: string;
+	}>;
+}
+
+export interface InHouseAdminProps extends InHouseAdmin {
 	addressLine1: string;
 	addressLine2: string;
 	addressLine3: string;
 	postTown: string;
 	county: string;
-	postcode: string;
-	countryId: string;
-	telephoneNumber: string;
-	emailAddress: string;
-	[key: string]: any;
-};
+	postCode: string;
+	country: string;
+}
 
 export interface InHouseAdminProviderProps {
 	complete?: boolean;
 	onCorrect?: (...args: any[]) => void;
 	onRemove?: (...args: any[]) => Promise<any>;
-	onSaveType?: (...args: any[]) => Promise<any>;
+	onSaveContacts?: (...args: any[]) => Promise<any>;
+	onSaveAddress?: (...args: any[]) => Promise<any>;
+	onSaveName?: (...args: any[]) => Promise<any>;
 	testId?: string;
 	/** inHouseAdmin props from the API */
 	inHouseAdmin: Partial<InHouseAdminProps>;
 	children?: RenderProps | ReactElement;
+	addressAPI: AddressAPIType;
 	/** overwrite any text that you need */
 	i18n?: RecursivePartial<InHouseAdminI18nProps>;
 	/** cfg space props */
 	cfg?: SpaceProps;
 }
 
+const addressFields = [
+	'addressLine1',
+	'addressLine2',
+	'addressLine3',
+	'postTown',
+	'county',
+	'country',
+	'postCode',
+	'countryId',
+];
+
 export const InHouseAdminProvider = ({
 	complete,
 	inHouseAdmin,
@@ -74,10 +118,17 @@ export const InHouseAdminProvider = ({
 	...rest
 }: InHouseAdminProviderProps) => {
 	const i18n = useI18n(i18nDefaults, i18nOverrides);
+	const [modifiedAdmin, adminAddress] = splitObjectIntoTwo(
+		inHouseAdmin,
+		addressFields,
+	);
 	const [current, send] = useMachine(inHouseAdminMachine, {
 		context: {
 			complete,
-			inHouseAdmin,
+			inHouseAdmin: {
+				...modifiedAdmin,
+				address: adminAddress,
+			},
 		},
 	});