diff --git a/src/client/modules/Investments/EYBLeads/EYBLeadsCollection.jsx b/src/client/modules/Investments/EYBLeads/EYBLeadsCollection.jsx index 244ab7e6b64..a2b3b844b0e 100644 --- a/src/client/modules/Investments/EYBLeads/EYBLeadsCollection.jsx +++ b/src/client/modules/Investments/EYBLeads/EYBLeadsCollection.jsx @@ -25,7 +25,12 @@ import { InputPlaceholder, } from '../../../components/SkeletonPlaceholder' -const EYBLeadCollection = ({ filterOptions, payload, ...props }) => { +const EYBLeadCollection = ({ + filterOptions, + payload, + optionMetadata, + ...props +}) => { const location = useLocation() const qsParams = useMemo( () => qs.parse(location.search.slice(1)), @@ -40,6 +45,13 @@ const EYBLeadCollection = ({ filterOptions, payload, ...props }) => { options.filter(({ value }) => values.includes(value)) const setupSelectedFilters = (qsParams, filterOptions) => ({ + countryId: { + queryParam: QS_PARAMS.countryId, + options: resolveSelectedOptions( + qsParams[QS_PARAMS.countryId], + filterOptions.countries + ), + }, companyName: { queryParam: QS_PARAMS.companyName, options: resolveCompanyName(), @@ -79,7 +91,7 @@ const EYBLeadCollection = ({ filterOptions, payload, ...props }) => { progressMessage: 'Loading filters', renderProgress: () => ( <> - + ), @@ -91,7 +103,7 @@ const EYBLeadCollection = ({ filterOptions, payload, ...props }) => { <> { selectedOptions={selectedFilters.valueOfLead.options} data-test="lead-value-filter" /> + { @@ -17,6 +18,8 @@ export const getEYBLeads = ({ offset: limit * (parseInt(page, 10) - 1) || 0, ...(company ? { company } : null), }) + if (country) + country.forEach((countryId) => params.append('country', countryId)) if (sector) sector.forEach((sectorId) => params.append('sector', sectorId)) if (value) value.forEach((valueOfLead) => params.append('value', valueOfLead)) return apiProxyAxios @@ -29,9 +32,10 @@ export const getEYBLeads = ({ export const loadEYBLeadFilterOptions = () => Promise.all([ + getMetadataOptions(urls.metadata.country()), getMetadataOptions(urls.metadata.sector(), { params: { level__lte: '0', }, }), - ]).then(([sectors]) => ({ sectors })) + ]).then(([countries, sectors]) => ({ countries, sectors })) diff --git a/test/functional/cypress/specs/investments/eyb-leads-spec.js b/test/functional/cypress/specs/investments/eyb-leads-spec.js index 50dcb53afaf..7bd91287e8a 100644 --- a/test/functional/cypress/specs/investments/eyb-leads-spec.js +++ b/test/functional/cypress/specs/investments/eyb-leads-spec.js @@ -22,6 +22,7 @@ const FILTER_ELEMENTS = { company: '[data-test="company-name-filter"]', sector: '[data-test="sector-filter"]', value: '[data-test="lead-value-filter"]', + country: '[data-test="lead-country-filter"]', } const DATE_TIME_STRING = '2024-09-25T08:30:00.000000Z' @@ -33,17 +34,23 @@ const HIGH_VALUE = 'high' const HIGH_VALUE_LABEL = 'High value' const LOW_VALUE = 'low' const LOW_VALUE_LABEL = 'Low value' +const COUNTRY_NAME_1 = 'Canada' +const COUNTRY_ID_1 = '5daf72a6-5d95-e211-a939-e4115bead28a' +const COUNTRY_NAME_2 = 'Brazil' +const COUNTRY_ID_2 = 'b05f66a0-5d95-e211-a939-e4115bead28a' const EYB_LEAD_LIST = Array( eybLeadFaker({ triage_created: DATE_TIME_STRING, company: { name: `${COMPANY_NAME} and Co` }, is_high_value: true, + country: { name: COUNTRY_NAME_1, id: COUNTRY_ID_1 }, }), eybLeadFaker({ triage_created: DATE_TIME_STRING, sector: { name: SECTOR_NAME, id: SECTOR_ID }, is_high_value: false, + country: { name: COUNTRY_NAME_1, id: COUNTRY_ID_1 }, }), eybLeadFaker({ triage_created: DATE_TIME_STRING, is_high_value: false }), eybLeadFaker({ @@ -51,6 +58,7 @@ const EYB_LEAD_LIST = Array( is_high_value: false, company: null, company_name: COMPANY_NAME_DEFAULT, + country: { name: COUNTRY_NAME_2, id: COUNTRY_ID_2 }, }) ) @@ -60,6 +68,7 @@ const PAYLOADS = { sectorFilter: { sector: SECTOR_ID }, highValueFilter: { value: HIGH_VALUE }, lowValueFilter: { value: LOW_VALUE }, + countryFilter: { country: COUNTRY_ID_1 }, } const buildQueryString = (queryParams = {}) => @@ -93,6 +102,12 @@ const getEYBLeadsByValue = (valueOfLead) => { ) } +const getEYBLeadsByCountryId = (countryId) => { + return EYB_LEAD_LIST.filter( + (lead) => lead.country && lead.country.id === countryId + ) +} + describe('EYB leads collection page', () => { context('When visiting the EYB leads tab', () => { const eybLead = EYB_LEAD_LIST[0] @@ -131,9 +146,10 @@ describe('EYB leads collection page', () => { }) it('should render the filters', () => { - cy.get('[data-test="company-name-filter"]').should('be.visible') - cy.get('[data-test="sector-filter"]').should('be.visible') + cy.get('[data-test="lead-country-filter"]').should('be.visible') cy.get('[data-test="lead-value-filter"]').should('be.visible') + cy.get('[data-test="sector-filter"]').should('be.visible') + cy.get('[data-test="company-name-filter"]').should('be.visible') }) it('should display the leads correctly', () => { @@ -248,7 +264,7 @@ describe('EYB leads collection page', () => { cy.wait('@apiRequest') .its('request.query') .should('include', expectedPayload) - assertQueryParams('sector', Array(SECTOR_ID)) + assertQueryParams('sector[0]', SECTOR_ID) assertChipExists({ label: SECTOR_NAME, position: 1 }) }) @@ -326,7 +342,7 @@ describe('EYB leads collection page', () => { cy.wait('@apiRequest') .its('request.query') .should('include', testCase.expectedPayload) - assertQueryParams('value', Array(testCase.queryParamValue)) + assertQueryParams('value[0]', testCase.queryParamValue) assertChipExists({ label: testCase.chipsLabel, position: 1 }) }) @@ -353,4 +369,63 @@ describe('EYB leads collection page', () => { }) } ) + + context('When filtering the EYB leads collection by country', () => { + let expectedPayload = { + ...PAYLOADS.minimum, + ...PAYLOADS.country, + } + + it('should filter from the url', () => { + let queryString = buildQueryString({ 'country[0]': COUNTRY_ID_1 }) + cy.intercept('GET', `${EYB_RETRIEVE_API_ROUTE}?*`).as('apiRequest') + cy.visit(`${investments.eybLeads.index()}?${queryString}`) + cy.wait('@apiRequest') + .its('request.query') + .should('include', expectedPayload) + }) + + it('should filter from user input', () => { + cy.visit(`${investments.eybLeads.index()}`) + cy.intercept('GET', `${EYB_RETRIEVE_API_ROUTE}?*`).as('apiRequest') + assertTypeaheadHints({ + element: FILTER_ELEMENTS.country, + label: 'Country', + placeholder: 'Search country', + }) + selectFirstTypeaheadOption({ + element: FILTER_ELEMENTS.country, + input: 'cana', + }) + assertTypeaheadOptionSelected({ + element: FILTER_ELEMENTS.country, + expectedOption: COUNTRY_NAME_1, + }) + cy.wait('@apiRequest') + .its('request.query') + .should('include', expectedPayload) + assertQueryParams('country[0]', COUNTRY_ID_1) + assertChipExists({ label: COUNTRY_NAME_1, position: 1 }) + }) + + it('should return and display the filtered collection', () => { + let queryString = buildQueryString({ 'sector[0]': SECTOR_ID }) + let expectedNumberOfResults = 2 // Number of leads with COUNTRY_ID_1 in the fixture data + cy.intercept('GET', `${EYB_RETRIEVE_API_ROUTE}?*`, { + statusCode: 200, + body: { + count: expectedNumberOfResults, + next: null, + previous: null, + results: getEYBLeadsByCountryId(COUNTRY_ID_1), + }, + }).as('apiRequest') + cy.visit(`${investments.eybLeads.index()}?${queryString}`) + cy.wait('@apiRequest') + cy.get('[data-test="collection-item"]').should( + 'have.length', + expectedNumberOfResults + ) + }) + }) })