feat: create postcode lookup component in Component Library

package.json

@@ -31,6 +31,7 @@
     "lazysizes": "^5.3.2",
     "lodash": "^4.17.11",
     "moment": "^2.29.4",
+    "postcode": "^5.1.0",
     "prop-types": "^15.8.1",
     "pure-react-carousel": "1.30.1",
     "react": "^17.0.2",

src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.style.js

@@ -19,7 +19,6 @@ const Dropdown = styled.div`
   border: 1px solid;
   margin-top: -1px;
   width: 100%;
-
   @media ${({ theme }) => theme.allBreakpoints('M')} {
     max-width: 500px;
   }

src/components/Molecules/Lookup/Lookup.js

@@ -5,41 +5,34 @@ import TextInputWithDropdown from '../../Atoms/TextInputWithDropdown/TextInputWi
 import spacing from '../../../theme/shared/spacing';
 import ButtonWithStates from '../../Atoms/ButtonWithStates/ButtonWithStates';
 
-const StyledButton = styled(ButtonWithStates)`${({ theme }) => css`
-  color: ${theme.color('grey_dark')};
-  border: 2px solid ${theme.color('grey_dark')};
-  background-color: ${theme.color('white')};
-  padding-left: ${spacing('lg')};
-  padding-right: ${spacing('lg')};
-
+const Button = styled(ButtonWithStates)`${({
+  theme,
+  buttonTextColour,
+  buttonBgColour,
+  buttonTextHoverColour,
+  buttonHoverBgColour
+}) => css`
+  margin-top: ${spacing('m')};
+  color: ${buttonTextColour || theme.color('white')};
+  background-color: ${buttonBgColour || theme.color('red')};
   &:hover {
-    color: ${theme.color('grey_dark')};
-    background-color: ${theme.color('white')};
+    color: ${buttonTextHoverColour || theme.color('white')};
+    background-color: ${buttonHoverBgColour || theme.color('red_dark')};
   }
+  padding: 0 ${spacing('lg')};
 `}`;
 
 const KEY_CODE_ENTER = 13;
 
 /**
- * A simple lookup component
- *
- * The `lookupHandler` should be an async function which is called when a lookup is triggered
- *  (either by hitting enter or clicking the button)
- *
- * It will receive the current search term and should:
- * - take care of any validation on the search term
- * - perform the actual lookup request
- * - return an array of options (or an empty array if none were found)
- * - only throw errors with user-friendly messages
- *
- * Any errors thrown will be caught and the message will be displayed to the user.
- *
- * The `onSelect` function will receive the chosen option.
- *
  * @param name
  * @param label
  * @param placeholder
  * @param buttonText
+ * @param buttonTextColour
+ * @param buttonBgColour
+ * @param buttonHoverBgColour
+ * @param buttonHoverTextColour
  * @param lookupHandler
  * @param mapOptionToString
  * @param onSelect
@@ -54,6 +47,10 @@ const Lookup = ({
   label,
   placeholder,
   buttonText,
+  buttonTextColour,
+  buttonBgColour,
+  buttonHoverBgColour,
+  buttonHoverTextColour,
   lookupHandler,
   mapOptionToString,
   onSelect,
@@ -115,15 +112,19 @@ const Lookup = ({
         errorMsg={errorMessage}
         dropdownInstruction={dropdownInstruction}
       />
-      <StyledButton
+      <Button
         type="button"
         onClick={() => handler()}
         loading={isSearching}
         disabled={isSearching}
         loadingText="Searching"
+        buttonTextColour={buttonTextColour}
+        buttonBgColour={buttonBgColour}
+        buttonHoverBgColour={buttonHoverBgColour}
+        buttonHoverTextColour={buttonHoverTextColour}
       >
         {buttonText}
-      </StyledButton>
+      </Button>
     </div>
   );
 };
@@ -133,6 +134,10 @@ Lookup.propTypes = {
   label: PropTypes.string.isRequired,
   placeholder: PropTypes.string.isRequired,
   buttonText: PropTypes.string.isRequired,
+  buttonTextColour: PropTypes.string,
+  buttonBgColour: PropTypes.string,
+  buttonHoverBgColour: PropTypes.string,
+  buttonHoverTextColour: PropTypes.string,
   lookupHandler: PropTypes.func.isRequired,
   mapOptionToString: PropTypes.func.isRequired,
   onSelect: PropTypes.func.isRequired,
@@ -142,7 +147,11 @@ Lookup.propTypes = {
 
 Lookup.defaultProps = {
   noResultsMessage: 'Sorry, could not find any results for your search',
-  dropdownInstruction: ''
+  dropdownInstruction: '',
+  buttonTextColour: 'white',
+  buttonBgColour: '#E52630',
+  buttonHoverTextColour: 'white',
+  buttonHoverBgColour: '#890B11'
 };
 
 export default Lookup;

src/components/Molecules/Lookup/Lookup.md

@@ -0,0 +1,64 @@
+# Lookup
+This is a simple basic vanilla component and is rendered here mainly for dev purposes.
+You may would be best served using one of these more substantial components in projects / production:
+- PostcodeLookup
+- SchoolLookup
+- SimpleSchoolLookup
+
+The `lookupHandler` should be an async function which is called when a lookup is triggered (either by hitting enter or clicking the button).
+
+It will receive the current search term and should:
+- take care of any validation on the search term
+- perform the actual lookup request
+- return an array of options (or an empty array if none were found)
+- only throw errors with user-friendly messages
+
+Any errors thrown will be caught and the message will be displayed to the user.
+
+The `onSelect` function will receive the chosen option.
+
+```js
+import Lookup from './Lookup';
+
+const schoolFetcher = async query => {
+  if (!query || !query.trim()) {
+    throw new Error('Please enter a search query');
+  }
+
+  if (query.length < 2) {
+    throw new Error('Please enter at least two characters');
+  }
+
+  try {
+    const res = await axios.get(
+      'https://lookups.sls.comicrelief.com/schools/lookup',
+      { timeout: 10000, params: { query } }
+    );
+    return res.data.data.schools;
+  } catch (error) {
+    // if (typeof Sentry !== 'undefined') {
+    //   Sentry.captureException(error);
+    // }
+    throw new Error('Sorry, something unexpected went wrong. Please try again or enter your school manually');
+  }
+};
+
+const schoolToString = school => `${school.name}, ${school.post_code}`;
+
+<Lookup
+    name="Lookup"
+    label="Custom label"
+    placeholder="...placeholder"
+    buttonText="Lookup Button"
+    dropdownInstruction="Please select an organisation from the list below"
+    noResultsMessage='Sorry, we could not find anything matching your search; please use the manual entry option.'
+    lookupHandler={schoolFetcher}
+    mapOptionToString={schoolToString}
+    onSelect={address => alert(JSON.stringify(address, null, 2))}
+    // buttonTextColour='black'
+    // buttonBgColour='#f04257'
+    // buttonHoverTextColour='white'
+    // buttonHoverBgColour='orange'
+/>
+```
+

src/components/Molecules/PostcodeLookup/PostcodeLookup.js

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Lookup from '../Lookup/Lookup';
+import AddressInputs from './utils/AddressInputs';
+import { addressToString, addressFetcher } from './utils/PostcodeFunctions';
+import spacing from '../../../theme/shared/spacing';
+
+// ${({ theme }) => theme.linkStyles('standard')};
+const AddressManually = styled.button`
+  margin: ${spacing('md')} 0 0 ${spacing('sm')};
+  background: inherit;
+  border: none;
+  font-size: 1rem;
+  &:hover, &:active {
+    text-decoration: underline;
+  }
+`;
+
+export default function PostcodeLookup({
+  label,
+  name,
+  placeholder,
+  buttonText,
+  noResultsMessage,
+  reportError,
+  dropdownInstruction,
+  buttonColour
+}) {
+  const [showFields, setShowFields] = useState(false);
+
+  // Address field state
+  const [addressFields, setAddressFields] = useState({
+    line1: '',
+    line2: '',
+    line3: '',
+    posttown: ''
+  });
+
+  // Function to update address fields
+  const handleAddressSelect = selectedAddress => {
+    setShowFields(true);
+    setAddressFields({
+      line1: selectedAddress.Line1 || '',
+      line2: selectedAddress.Line2 || '',
+      line3: selectedAddress.Line3 || '',
+      posttown: selectedAddress.posttown || ''
+    });
+  };
+
+  const handleManualClick = event => {
+    event.preventDefault();
+    setShowFields(true);
+  };
+
+  return (
+    <>
+      <Lookup
+        name={name}
+        label={label}
+        placeholder={placeholder}
+        buttonText={buttonText}
+        mapOptionToString={addressToString}
+        lookupHandler={postcode => addressFetcher(postcode, reportError)}
+        onSelect={handleAddressSelect}
+        dropdownInstruction={dropdownInstruction}
+        noResultsMessage={noResultsMessage}
+        buttonColour={buttonColour}
+      />
+      <AddressManually onClick={handleManualClick}>
+        Or enter your address manually
+      </AddressManually>
+      {showFields && <AddressInputs addressFields={addressFields} />}
+    </>
+  );
+}
+
+PostcodeLookup.propTypes = {
+  name: PropTypes.string,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  buttonText: PropTypes.string,
+  noResultsMessage: PropTypes.string,
+  dropdownInstruction: PropTypes.string,
+  reportError: PropTypes.oneOfType([
+    PropTypes.func
+  ]),
+  buttonColour: PropTypes.string
+};
+
+PostcodeLookup.defaultProps = {
+  name: 'postcode_lookup',
+  label: 'Find address by postcode',
+  placeholder: 'Enter postcode...',
+  buttonText: 'Find address',
+  noResultsMessage: 'Sorry, could not find any addresses for that postcode',
+  dropdownInstruction: 'Please select an organisation from the list below',
+  reportError: undefined,
+  buttonColour: '#f04257'
+};

src/components/Molecules/PostcodeLookup/PostcodeLookup.md

@@ -0,0 +1,24 @@
+```js
+import PostcodeLookup from './PostcodeLookup';
+
+// This is just an example of how a parent component might handle fetch errors within the component.
+const [enterManually, setEnterManually] = React.useState(false);
+
+const fetchErrorHandler = () => {
+  setEnterManually(true);
+}
+
+enterManually
+  ? 'Sorry, there appears to be a problem. Please enter your details manually.'
+  : (
+    <PostcodeLookup
+        label="Postal Address"
+        buttonText="Find Address"
+        // Example for could not find address - n22 4qa
+        noResultsMessage='Sorry, we could not find your address.'
+        reportError='Custom report error'
+        dropdownInstruction="Dropdown instruction here..."
+        buttonColour='#f04257'
+    />
+  )
+```

src/components/Molecules/PostcodeLookup/PostcodeLookup.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import 'jest-styled-components';
+
+import renderWithTheme from '../../../hoc/shallowWithTheme';
+import PostcodeLookup from './PostcodeLookup';
+
+it('renders correctly', () => {
+  const tree = renderWithTheme(
+    <PostcodeLookup onSelect={address => alert(JSON.stringify(address, null, 2))} />
+  ).toJSON();
+  expect(tree).toMatchSnapshot()
+});