Merge pull request #84 from thepensionsregulator/feature-trustee-address-returns-destructuring

Feature trustee address returns destructured from a custom string

Author: d4lek

.circleci/config.yml

@@ -1,6 +1,6 @@
 version: 2.1
 orbs:
-  node: circleci/node@2.1.1
+  node: circleci/node@3.0.0
 jobs:
   build-and-test:
     working_directory: ~/react-components

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

@@ -15,7 +15,11 @@ export const TrusteeContext = createContext<TrusteeContextProps>({
 	send: (_, __) => ({}),
 	onCorrect: () => {},
 	onRemove: () => new Promise((res) => res()),
-	addressAPI: { get: () => new Promise((res) => res()) },
+	addressAPI: {
+		get: (endpoint) => Promise.resolve(endpoint),
+		extract: 'results',
+		limit: 50,
+	},
 });
 
 type RenderProps = (_: TrusteeContextProps) => ReactElement;
@@ -42,6 +46,15 @@ export interface TrusteeInput {
 	[key: string]: any;
 }
 
+export type AddressAPIType = {
+	/** API instance with auth to get a list of addresses */
+	get: (endpoint: string) => Promise<any>;
+	/** interface return path to the results array */
+	extract: string;
+	/** limit of items to display per search */
+	limit: number;
+};
+
 export interface TrusteeContextProps {
 	complete?: boolean;
 	testId?: string;
@@ -50,7 +63,7 @@ export interface TrusteeContextProps {
 	onRemove: (...args: any[]) => Promise<any>;
 	onCorrect: (...args: any[]) => void;
 	send: (event: any, payload?: EventData) => Partial<State<TC, any, any, any>>;
-	addressAPI: any;
+	addressAPI: AddressAPIType;
 	current: Partial<State<TC, any, any, any>>;
 }
 
@@ -62,7 +75,8 @@ export interface TrusteeCardProps {
 	onDetailsSave: (values: any, trustee: TrusteeProps) => Promise<any>;
 	onContactSave: (values: any, trustee: TrusteeProps) => Promise<any>;
 	onAddressSave: (values: any, trustee: TrusteeProps) => Promise<any>;
-	addressAPI: any;
+	addressAPI: AddressAPIType;
+	/** depending on your network lib, provide a path to the addressAPI results array */
 	testId?: string;
 	children?: RenderProps | ReactElement;
 	cfg?: SpaceProps;

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

@@ -29,7 +29,6 @@ import { Trustee } from '@tpr/layout';
 <Playground>
 	{() => {
 		const [complete, setComplete] = useState(false);
-		const API = experianApiGet;
 		const callbackFn = (values, _fullTrusteeObject) => {
 			console.log(values);
 			return Promise.resolve();
@@ -62,7 +61,11 @@ import { Trustee } from '@tpr/layout';
 				onAddressSave={callbackFn}
 				onRemove={callbackFn}
 				onCorrect={(value) => setComplete(value)}
-				addressAPI={API}
+				addressAPI={{
+					get: (endpont) => experianApiGet(endpont),
+					extract: 'results',
+					limit: 100,
+				}}
 				complete={complete}
 				trustee={trustee}
 			/>

packages/layout/src/components/cards/trustee/views/address/AutoComplete.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from '@tpr/core';
+import { Link, P } from '@tpr/core';
 import { useTrusteeContext } from '../../context';
 import { Footer, FooterButton } from '../../../components/card';
 import { Form, FFSelect } from '@tpr/forms';
@@ -19,25 +19,31 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
 	const onSubmit = (values) => {
 		if (Object.values(values).length > 0) {
 			send('SAVE', { address: values.address.value });
-		} else {
-			Promise.reject('Address has not been selected...');
 		}
 	};
 
 	return (
 		<Form onSubmit={onSubmit}>
-			{({ handleSubmit }) => (
+			{({ handleSubmit, submitError }) => (
 				<form onSubmit={handleSubmit}>
 					<FFSelect
 						name="address"
 						placeholder="Please select the address from the dropdown"
 						options={options}
 						inputWidth={6}
+						validate={(value) =>
+							!value
+								? 'Please select one of the address from the dropdown menu. If you cannot find your address, please click the link below to enter it manually.'
+								: undefined
+						}
 						disabled={loading}
 					/>
 					<Link onClick={onClick} cfg={{ mt: 3 }}>
 						I can't find my address in the list
 					</Link>
+					{submitError && (
+						<P cfg={{ color: 'danger.2', mt: 5 }}>{submitError}</P>
+					)}
 					<Footer>
 						<FooterButton
 							type="submit"

packages/layout/src/components/cards/trustee/views/address/Postcode.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useCallback, ChangeEvent } from 'react';
 import { Flex, Button, P, Link } from '@tpr/core';
 import { Input } from '@tpr/forms';
 import { extractToObject } from './helpers';
+import { getObjectValueByString } from '../../../../../utils';
 import { useTrusteeContext } from '../../context';
 import styles from './Postcode.module.scss';
 
@@ -26,15 +27,25 @@ const Postcode: React.FC<PostcodeProps> = ({
 	const { addressAPI } = useTrusteeContext();
 
 	const search = useCallback(
-		(postcode: string, country = 'GBR', take = 25) => {
+		(postcode: string, country = 'GBR') => {
 			setLoading(true);
-			addressAPI(`search?country=${country}&query=${postcode}&take=${take}`)
-				.then((resp) => {
-					if (Array.isArray(resp.results) && resp.results.length > 0) {
+			addressAPI
+				.get(
+					`search?country=${country}&query=${postcode}&take=${
+						addressAPI.limit || 50
+					}`,
+				)
+				.then((response: unknown) => {
+					const results = getObjectValueByString(
+						response,
+						addressAPI.extract || 'results',
+					);
+
+					if (Array.isArray(results) && results.length > 0) {
 						Promise.all(
-							resp.results.map(({ format }: { format: string }) => {
+							results.map(({ format }: { format: string }) => {
 								const [url] = format.split('v2/').slice(-1);
-								return addressAPI(url).then(({ address }) => {
+								return addressAPI.get(url).then(({ address }) => {
 									const addressObject = extractToObject(address);
 
 									const addressToOurFormat = {

packages/layout/src/utils.ts

@@ -4,3 +4,10 @@ export const truncateString = (str: string, num: number) => {
 
 export const capitalize = (string) =>
 	`${string.charAt(0).toUpperCase()}${string.slice(1, -1)}`;
+
+export const getObjectValueByString = (
+	obj: { [key: string]: any },
+	path: string,
+): unknown => {
+	return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+};