lookup api config

Author: David Alekna

.gitignore

@@ -65,7 +65,8 @@ docs.json
 .docz/public
 .idea/
 
-
+# Env variables
+.env
 
 junit.xml
 

docs/Playground.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Playground as DoczPlayground } from 'docz';
 import { CssResets } from '../packages/theming/src';
+import fetch from 'node-fetch';
 
 export const Playground = (props) => {
 	return (
@@ -9,3 +10,14 @@ export const Playground = (props) => {
 		</CssResets>
 	);
 };
+
+console.log(process.env);
+
+export const experianApiGet = (endpoint) => {
+	return fetch(`https://api.edq.com/capture/address/v2/${endpoint}`, {
+		method: 'get',
+		headers: {
+			'Auth-Token': process.env.DOCZ_LOOKUP_API_URL,
+		},
+	}).then((resp) => resp.json());
+};

package.json

@@ -54,6 +54,7 @@
 		"jest": "^26.0.1",
 		"lerna": "^3.19.0",
 		"lerna-changelog": "^1.0.0",
+		"node-fetch": "^2.6.0",
 		"node-sass": "^4.14.0",
 		"npm-run-all": "^4.1.5",
 		"prettier": "^2.0.4",

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

@@ -5,7 +5,7 @@ route: /layout/trustee
 ---
 
 import { Props } from 'docz';
-import { Playground } from '@playground';
+import { Playground, experianApiGet } from '@playground';
 import { Form } from 'react-final-form';
 import { useState } from 'react';
 import { Trustee } from './trustee';
@@ -29,9 +29,7 @@ import { Trustee } from '@tpr/layout';
 <Playground>
 	{() => {
 		const [complete, setComplete] = useState(false);
-		const API = {
-			get: () => Promise.reject(new Error('THERE IS NO API IMPLEMENTATION')),
-		};
+		const API = experianApiGet;
 		const callbackFn = (values, _fullTrusteeObject) => {
 			console.log(values);
 			return Promise.resolve();

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

@@ -49,6 +49,7 @@ const CardContent: React.FC = () => {
 
 const TrusteeButton: React.FC = () => {
 	const { current, send } = useTrusteeContext();
+
 	return (
 		<UnderlinedButton
 			isOpen={

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

@@ -14,7 +14,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({ onClick, options }) => {
 
 	const onSubmit = (values) => {
 		if (Object.values(values).length > 0) {
-			send('SAVE', { values });
+			send('SAVE', { address: values.address.value });
 		} else {
 			Promise.reject('Address has not been selected...');
 		}
@@ -25,7 +25,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({ onClick, options }) => {
 			{({ handleSubmit }) => (
 				<form onSubmit={handleSubmit}>
 					<FFSelect
-						name="postcode"
+						name="address"
 						placeholder="Please select the address from the dropdown"
 						options={options}
 						inputWidth={6}

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

@@ -26,36 +26,32 @@ const Postcode: React.FC<PostcodeProps> = ({
 	const { addressAPI } = useTrusteeContext();
 
 	const search = useCallback(
-		(postcode: string, country = 'GBR', take = 100) => {
+		(postcode: string, country = 'GBR', take = 25) => {
 			setLoading(true);
-			addressAPI
-				.get(`search?country=${country}&query=${postcode}&take=${take}`)
+			addressAPI(`search?country=${country}&query=${postcode}&take=${take}`)
 				.then((resp) => {
-					if (
-						Array.isArray(resp.data.results) &&
-						resp.data.results.length > 0
-					) {
+					if (Array.isArray(resp.results) && resp.results.length > 0) {
 						Promise.all(
-							resp.data.results.map(({ format }: { format: string }) => {
+							resp.results.map(({ format }: { format: string }) => {
 								const [url] = format.split('v2/').slice(-1);
-								return addressAPI.get(url).then(({ data }) => {
-									const address = extractToObject(data.address);
+								return addressAPI(url).then(({ address }) => {
+									const addressObject = extractToObject(address);
 
 									const addressToOurFormat = {
-										addressLine1: address.addressLine1 || '',
-										addressLine2: address.addressLine2 || '',
-										addressLine3: address.addressLine3 || '',
-										city: address.locality || '',
-										county: address.province || '',
-										postcode: address.postalCode || '',
-										country: address.country || '',
+										addressLine1: addressObject.addressLine1 || '',
+										addressLine2: addressObject.addressLine2 || '',
+										addressLine3: addressObject.addressLine3 || '',
+										postTown: addressObject.locality || '',
+										postcode: addressObject.postalCode || '',
+										county: addressObject.province || '',
+										country: addressObject.country || '',
 									};
 
 									return {
-										...addressToOurFormat,
-										singleLineAddress: Object.keys(addressToOurFormat)
-											.filter((key) => address[key])
-											.map((key) => address[key])
+										value: addressToOurFormat,
+										label: Object.keys(addressToOurFormat)
+											.filter((key) => addressObject[key])
+											.map((key) => addressObject[key])
 											.join(', '),
 									};
 								});