CLS2-976 Add country filter to EYB leads collection (#7221)

* Add country filter to EYB leads collection

* Test when filtering by country from the url

* Test filtering by country from user input

* Test that the expected leads are displayed when filtering by country

* Change EYB lead collection name to sentence case

* Refactor queryparam checking for consistency

---------

Co-authored-by: Samuele Mattiuzzo <1381563+samuele-mattiuzzo@users.noreply.github.com>

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: () => (
       <>
-        <InputPlaceholder count={2} />
+        <InputPlaceholder count={3} />
         <CheckboxPlaceholder count={2} />
       </>
     ),
@@ -91,7 +103,7 @@ const EYBLeadCollection = ({ filterOptions, payload, ...props }) => {
     <>
       <FilteredCollectionList
         {...props}
-        collectionName="EYB Lead"
+        collectionName="EYB lead"
         taskProps={collectionListTask}
         entityName="eybLead"
         defaultQueryParams={{
@@ -109,6 +121,16 @@ const EYBLeadCollection = ({ filterOptions, payload, ...props }) => {
             selectedOptions={selectedFilters.valueOfLead.options}
             data-test="lead-value-filter"
           />
+          <Filters.Typeahead
+            isMulti={true}
+            label="Country"
+            name="country"
+            qsParam={QS_PARAMS.countryId}
+            placeholder="Search country"
+            options={filterOptions.countries}
+            selectedOptions={selectedFilters.countryId.options}
+            data-test="lead-country-filter"
+          />
           <Filters.Typeahead
             isMulti={true}
             label="Sector of interest"

src/client/modules/Investments/EYBLeads/constants.js

@@ -1,4 +1,5 @@
 export const QS_PARAMS = {
+  countryId: 'country',
   companyName: 'company',
   sectorId: 'sector',
   valueOfLead: 'value',

src/client/modules/Investments/EYBLeads/reducer.js

@@ -8,6 +8,7 @@ const initialState = {
   results: [],
   isComplete: false,
   filterOptions: {
+    countries: [],
     sectors: [],
   },
 }

src/client/modules/Investments/EYBLeads/tasks.js

@@ -9,6 +9,7 @@ export const getEYBLeads = ({
   limit = 10,
   page = 1,
   company,
+  country,
   sector,
   value,
 }) => {
@@ -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 }))

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,24 +34,31 @@ 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({
     triage_created: DATE_TIME_STRING,
     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
+      )
+    })
+  })
 })