Skip to content

Commit

Permalink
feature/CLS2-651-add-location-tag-search-results (#6352)
Browse files Browse the repository at this point in the history
* updated company typeahead to show region and country

* switch to camel case for prop

* added component test
  • Loading branch information
chopkinsmade authored Dec 18, 2023
1 parent 9ad1b01 commit 67fd1b2
Show file tree
Hide file tree
Showing 4 changed files with 212 additions and 23 deletions.
Original file line number Diff line number Diff line change
@@ -1,9 +1,43 @@
import React from 'react'
import PropTypes from 'prop-types'
import { throttle } from 'lodash'
import { get, throttle } from 'lodash'
import styled from 'styled-components'
import { SPACING } from '@govuk-react/constants'
import { GridCol, GridRow } from 'govuk-react'

import FieldTypeahead from '../FieldTypeahead'
import { apiProxyAxios } from '../../../Task/utils'
import Highlighter from '../../../Typeahead/Highlighter'
import Tag from '../../../Tag'

const getOptionLabel = (option) =>
`${option.label}${option.isInList ? ' (in your company lists)' : ''}`

const StyledRow = styled(GridRow)(() => ({
paddingBottom: `${SPACING.SCALE_2}`,
}))

const CompanyResultWithTags = ({ option, searchString }) => (
<>
<StyledRow>
<GridCol>
<Highlighter
optionLabel={getOptionLabel(option)}
searchStr={searchString}
/>
</GridCol>
</StyledRow>
<GridRow>
<GridCol>
<Tag colour={'blue'} data-test="location-tag">
{option.ukRegion
? `${get(option, 'ukRegion.name')}, UK`
: get(option, 'address.country.name', 'unknown')}
</Tag>
</GridCol>
</GridRow>
</>
)

const FieldCompaniesTypeahead = ({
name,
Expand All @@ -12,6 +46,7 @@ const FieldCompaniesTypeahead = ({
isMulti,
onlyShowActiveCompanies = true,
placeholder = 'Type to search for companies',
loadOptions,
...props
}) => {
return (
Expand All @@ -21,25 +56,34 @@ const FieldCompaniesTypeahead = ({
placeholder={placeholder}
noOptionsMessage="Type to search for companies"
required={required}
loadOptions={throttle(
(searchString) =>
apiProxyAxios
.get('/v4/company', {
params: {
autocomplete: searchString,
is_active: onlyShowActiveCompanies,
},
})
.then(({ data: { results } }) =>
results.map(({ id, name }) => ({
label: name,
chipLabel: name,
value: id,
}))
),
500
)}
loadOptions={
loadOptions ??
throttle(
(searchString) =>
apiProxyAxios
.get('/v4/company', {
params: {
autocomplete: searchString,
is_active: onlyShowActiveCompanies,
},
})
.then(({ data: { results } }) =>
results.map(
({ id, name, is_in_adviser_list, uk_region, address }) => ({
label: name,
chipLabel: name,
value: id,
isInList: is_in_adviser_list,
ukRegion: uk_region,
address,
})
)
),
500
)
}
isMulti={isMulti}
OptionContent={CompanyResultWithTags}
{...props}
/>
)
Expand All @@ -51,6 +95,7 @@ FieldCompaniesTypeahead.propTypes = {
required: PropTypes.string,
isMulti: PropTypes.bool,
placeholder: PropTypes.string,
loadOptions: PropTypes.func,
}

export default FieldCompaniesTypeahead
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React from 'react'

import FieldCompaniesTypeahead from '../FieldCompaniesTypeahead'
import Form from '../../../Form'

const options = [
{
value: '379f390a-e083-4a2c-9cea-e3b9a08606a7',
label: 'Company A',
isInList: true,
ukRegion: { name: 'Bristol' },
},
{
value: '8dcd2bb8-dc73-4a42-8655-4ae42d4d3c5a',
label: 'Company B',
ukRegion: { name: 'Cardiff' },
},
{
value: 'a6f39399-5bf4-46cb-a686-826f73e9f0ca',
label: 'Company C',
address: { country: { name: 'France' } },
},
]

export const mockLoadOptions = (query = '') =>
new Promise((resolve) =>
query && query.length
? setTimeout(
resolve,
200,
options.filter(({ label }) =>
label.toLowerCase().includes(query.toLowerCase())
)
)
: resolve([])
)

export default {
title: 'Form/Form Elements/FieldCompaniesTypeahead',
excludeStories: ['mockLoadOptions'],
parameters: {
component: FieldCompaniesTypeahead,
},
}

export const Default = () => (
<Form
id="fieldCompaniesTypeaheadExample"
analyticsFormName="fieldCompaniesTypeaheadExample"
submissionTaskName="Submit Form example"
>
{() => (
<>
<FieldCompaniesTypeahead name="company" loadOptions={mockLoadOptions} />
</>
)}
</Form>
)
10 changes: 6 additions & 4 deletions src/client/components/Typeahead/Typeahead.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,10 @@ const AutocompleteInput = styled('input')(({ error }) => ({
...FOCUSABLE,
}))

const TypeaheadOptionContent = ({ option, searchString }) => (
<Highlighter optionLabel={option.label} searchStr={searchString} />
)

const Menu = styled('div')(({ open }) => ({
visibility: open ? 'visible' : 'hidden',
backgroundColor: WHITE,
Expand Down Expand Up @@ -172,6 +176,7 @@ const Typeahead = ({
onMenuOpen,
onChange = () => {},
'data-test': testId,
OptionContent = TypeaheadOptionContent,
...inputProps
}) => {
const closeOnSelect = isMulti ? closeMenuOnSelect : true
Expand Down Expand Up @@ -362,10 +367,7 @@ const Typeahead = ({
data-test="typeahead-menu-option"
>
<span>
<Highlighter
optionLabel={option.label}
searchStr={input}
/>
<OptionContent option={option} searchString={input} />
</span>
</ListboxOption>
))}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import React from 'react'

import {
FieldCompaniesTypeahead,
Form,
} from '../../../../../../src/client/components'

import DataHubProvider from '../../provider'

const options = [
{
value: '379f390a-e083-4a2c-9cea-e3b9a08606a7',
label: 'Company A',
isInList: true,
ukRegion: { name: 'Bristol' },
},
{
value: '8dcd2bb8-dc73-4a42-8655-4ae42d4d3c5a',
label: 'Company B',
ukRegion: { name: 'Cardiff' },
},
{
value: 'a6f39399-5bf4-46cb-a686-826f73e9f0ca',
label: 'Company C',
address: { country: { name: 'France' } },
},
]

const mockLoadOptions = (query = '') =>
new Promise((resolve) =>
resolve(
options.filter(({ label }) =>
label.toLowerCase().includes(query.toLowerCase())
)
)
)

describe('FieldCompaniesTypeahead', () => {
const Component = (props) => (
<DataHubProvider>
<Form id="export-form">
<FieldCompaniesTypeahead
name="companies"
loadOptions={mockLoadOptions}
{...props}
/>
</Form>
</DataHubProvider>
)

beforeEach(() => cy.mount(<Component />))

const searchForCompany = (name) => {
cy.get('[data-test="field-companies"]')
.find('input')
.click()
.clear()
.type(name)
}

context('When the company is in a list', () => {
it('the label should tell the user this', () => {
searchForCompany('Company A')
cy.get('[data-test="typeahead-menu-option"]').should(
'contain',
'(in your company lists)'
)
})
})

context('When the company is in a uk region', () => {
it('the tag should contain the region name and UK', () => {
searchForCompany('Company B')
cy.get('[data-test="location-tag"]').should('contain', 'Cardiff')
})
})

context('When the company is not in a uk region', () => {
it('the tag should contain the country name', () => {
searchForCompany('Company C')
cy.get('[data-test="location-tag"]').should('contain', 'France')
})
})
})

0 comments on commit 67fd1b2

Please sign in to comment.