CLS2 971 filter by HMTC region on EYB leads tab (#7416)

* WIP: Add overseas region metadata and filter

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

src/client/modules/Investments/EYBLeads/EYBLeadsCollection.jsx

@@ -45,6 +45,13 @@ const EYBLeadCollection = ({
     options.filter(({ value }) => values.includes(value))
 
   const setupSelectedFilters = (qsParams, filterOptions) => ({
+    overseasRegionId: {
+      queryParam: QS_PARAMS.overseasRegionId,
+      options: resolveSelectedOptions(
+        qsParams[QS_PARAMS.overseasRegionId],
+        filterOptions.overseasRegions
+      ),
+    },
     countryId: {
       queryParam: QS_PARAMS.countryId,
       options: resolveSelectedOptions(
@@ -121,6 +128,16 @@ const EYBLeadCollection = ({
             selectedOptions={selectedFilters.valueOfLead.options}
             data-test="lead-value-filter"
           />
+          <Filters.Typeahead
+            isMulti={true}
+            label="HMTC region"
+            name="overseas-region"
+            qsParam={QS_PARAMS.overseasRegionId}
+            placeholder="Search HMTC region"
+            options={filterOptions.overseasRegions}
+            selectedOptions={selectedFilters.overseasRegionId.options}
+            data-test="overseas-region-filter"
+          />
           <Filters.Typeahead
             isMulti={true}
             label="Country"

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

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

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

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

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

@@ -9,19 +9,22 @@ export const getEYBLeads = ({
   limit = 10,
   page = 1,
   company,
-  country,
-  sector,
-  value,
+  overseas_region = [],
+  country = [],
+  sector = [],
+  value = [],
 }) => {
   let params = new URLSearchParams({
     limit,
     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))
+  overseas_region.forEach((overseasRegionId) =>
+    params.append('overseas_region', overseasRegionId)
+  )
+  country.forEach((countryId) => params.append('country', countryId))
+  sector.forEach((sectorId) => params.append('sector', sectorId))
+  value.forEach((valueOfLead) => params.append('value', valueOfLead))
   return apiProxyAxios
     .get(`v4/investment-lead/eyb?${params.toString()}`)
     .then(({ data }) => ({
@@ -32,10 +35,15 @@ export const getEYBLeads = ({
 
 export const loadEYBLeadFilterOptions = () =>
   Promise.all([
+    getMetadataOptions(urls.metadata.overseasRegion()),
     getMetadataOptions(urls.metadata.country()),
     getMetadataOptions(urls.metadata.sector(), {
       params: {
         level__lte: '0',
       },
     }),
-  ]).then(([countries, sectors]) => ({ countries, sectors }))
+  ]).then(([overseasRegions, countries, sectors]) => ({
+    overseasRegions,
+    countries,
+    sectors,
+  }))

src/lib/urls.js

@@ -669,6 +669,7 @@ module.exports = {
     ),
     oneListTier: url('/api-proxy/v4/metadata', '/one-list-tier'),
     tradeAgreement: url('/api-proxy/v4/metadata', '/trade-agreement'),
+    overseasRegion: url('/api-proxy/v4/metadata', '/overseas-region'),
   },
   omis: {
     index: url('/omis', PRIMARY_LINK_PARAMS.omis),

src/middleware/metadata-api-proxy.js

@@ -77,6 +77,7 @@ const ALLOWLIST = [
   '/v4/metadata/hvo-programmes',
   '/v4/metadata/associated-programme',
   '/v4/metadata/hvc',
+  '/v4/metadata/overseas-region',
 ]
 
 module.exports = (app) => {

test/functional/cypress/fakers/overseas-regions.js

@@ -0,0 +1,15 @@
+import { faker } from '../../../sandbox/utils/random'
+
+import { listFaker } from './utils'
+
+export const overseasRegionFaker = (overrides = {}) => ({
+  id: faker.string.uuid(),
+  name: faker.lorem.words(),
+  disabled_on: null,
+  ...overrides,
+})
+
+export const overseasRegionListFaker = (length = 1, overrides) =>
+  listFaker({ fakerFunction: overseasRegionFaker, length, overrides })
+
+export default overseasRegionListFaker

test/functional/cypress/specs/investments/eyb-leads-spec.js

@@ -27,6 +27,7 @@ const FILTER_ELEMENTS = {
   sector: '[data-test="sector-filter"]',
   value: '[data-test="lead-value-filter"]',
   country: '[data-test="lead-country-filter"]',
+  overseas_region: '[data-test="overseas-region-filter"]',
 }
 
 const DATE_TIME_STRING = '2024-09-25T08:30:00.000000Z'
@@ -44,19 +45,37 @@ 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 OVERSEAS_REGION_NAME_1 = 'North America'
+const OVERSEAS_REGION_ID_1 = 'fdfbbc8d-0e8a-479a-b10f-4979d582ff87'
+const OVERSEAS_REGION_NAME_2 = 'Latin America'
+const OVERSEAS_REGION_ID_2 = '5616ccf5-ab4a-4c2c-9624-13c69be3c46b'
 
 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 },
+    country: {
+      name: COUNTRY_NAME_1,
+      id: COUNTRY_ID_1,
+      overseas_region: {
+        name: OVERSEAS_REGION_NAME_1,
+        id: OVERSEAS_REGION_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 },
+    country: {
+      name: COUNTRY_NAME_1,
+      id: COUNTRY_ID_1,
+      overseas_region: {
+        name: OVERSEAS_REGION_NAME_1,
+        id: OVERSEAS_REGION_ID_1,
+      },
+    },
   }),
   eybLeadFaker({ triage_created: DATE_TIME_STRING, is_high_value: null }),
   eybLeadFaker({ triage_created: DATE_TIME_STRING, is_high_value: false }),
@@ -65,7 +84,14 @@ 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 },
+    country: {
+      name: COUNTRY_NAME_2,
+      id: COUNTRY_ID_2,
+      overseas_region: {
+        name: OVERSEAS_REGION_NAME_2,
+        id: OVERSEAS_REGION_ID_2,
+      },
+    },
   })
 )
 
@@ -117,6 +143,13 @@ const getEYBLeadsByCountryId = (countryId) => {
   )
 }
 
+const getEYBLeadsByOverseasRegionId = (overseasRegionID) => {
+  return EYB_LEAD_LIST.filter(
+    (lead) =>
+      lead.country && lead.country?.overseas_region.id === overseasRegionID
+  )
+}
+
 describe('EYB leads collection page', () => {
   context('When visiting the EYB leads tab', () => {
     const eybLead = EYB_LEAD_LIST[0]
@@ -155,6 +188,7 @@ describe('EYB leads collection page', () => {
     })
 
     it('should render the filters', () => {
+      cy.get('[data-test="overseas-region-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')
@@ -430,8 +464,8 @@ describe('EYB leads collection page', () => {
     })
 
     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
+      const queryString = buildQueryString({ 'country[0]': COUNTRY_ID_1 })
+      const expectedNumberOfResults = 2 // Number of leads with COUNTRY_ID_1 in the fixture data
       cy.intercept('GET', `${EYB_RETRIEVE_API_ROUTE}?*`, {
         statusCode: 200,
         body: {
@@ -449,4 +483,70 @@ describe('EYB leads collection page', () => {
       )
     })
   })
+
+  context(
+    'When filtering the EYB leads collection by HMTC (overseas) region',
+    () => {
+      const expectedPayload = {
+        ...PAYLOADS.minimum,
+        ...PAYLOADS.country,
+      }
+
+      it('should filter from the url', () => {
+        const queryString = buildQueryString({
+          'overseas_region[0]': OVERSEAS_REGION_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.overseas_region,
+          label: 'HMTC region',
+          placeholder: 'Search HMTC region',
+        })
+        selectFirstTypeaheadOption({
+          element: FILTER_ELEMENTS.overseas_region,
+          input: 'north',
+        })
+        assertTypeaheadOptionSelected({
+          element: FILTER_ELEMENTS.overseas_region,
+          expectedOption: OVERSEAS_REGION_NAME_1,
+        })
+        cy.wait('@apiRequest')
+          .its('request.query')
+          .should('include', expectedPayload)
+        assertQueryParams('overseas_region[0]', OVERSEAS_REGION_ID_1)
+        assertChipExists({ label: OVERSEAS_REGION_NAME_1, position: 1 })
+      })
+
+      it('should return and display the filtered collection', () => {
+        const queryString = buildQueryString({
+          'overseas_region[0]': OVERSEAS_REGION_ID_1,
+        })
+        const expectedNumberOfResults = 2 // Number of leads with OVERSEAS_REGION_ID_1 in the fixture data
+        cy.intercept('GET', `${EYB_RETRIEVE_API_ROUTE}?*`, {
+          statusCode: 200,
+          body: {
+            count: expectedNumberOfResults,
+            next: null,
+            previous: null,
+            results: getEYBLeadsByOverseasRegionId(OVERSEAS_REGION_ID_1),
+          },
+        }).as('apiRequest')
+        cy.visit(`${investments.eybLeads.index()}?${queryString}`)
+        cy.wait('@apiRequest')
+        cy.get('[data-test="collection-item"]').should(
+          'have.length',
+          expectedNumberOfResults
+        )
+      })
+    }
+  )
 })

test/sandbox/fixtures/v4/metadata/overseas-region.json

@@ -0,0 +1,47 @@
+[
+    {
+        "id": "8d4c4f31-06ce-4320-8e2f-1c13559e125f",
+        "name": "Africa",
+        "disabled_on": null
+    },
+    {
+        "id": "04a7cff0-03dd-4677-aa3c-12dd8426f0d7",
+        "name": "Asia Pacific",
+        "disabled_on": null
+    },
+    {
+        "id": "b97749fb-2273-4447-a239-62dd8fb29e01",
+        "name": "China and Hong Kong",
+        "disabled_on": null
+    },
+    {
+        "id": "cb2864aa-d19f-44b6-946c-d850a3fd7e3a",
+        "name": "Eastern Europe and Central Asia",
+        "disabled_on": null
+    },
+    {
+        "id": "3e6809d6-89f6-4590-8458-1d0dab73ad1a",
+        "name": "Europe",
+        "disabled_on": null
+    },
+    {
+        "id": "5616ccf5-ab4a-4c2c-9624-13c69be3c46b",
+        "name": "Latin America",
+        "disabled_on": null
+    },
+    {
+        "id": "c4679b44-079e-4394-8bf7-bb0881a5031d",
+        "name": "Middle East, Afghanistan and Pakistan",
+        "disabled_on": null
+    },
+    {
+        "id": "fdfbbc8d-0e8a-479a-b10f-4979d582ff87",
+        "name": "North America",
+        "disabled_on": null
+    },
+    {
+        "id": "12ed13cf-4b2c-4a46-b2f9-068e397d8c84",
+        "name": "South Asia",
+        "disabled_on": null
+    }
+]

test/sandbox/routes/v4/metadata/index.js

@@ -65,6 +65,7 @@ import hvc from '../../../fixtures/v4/metadata/hvc.json' assert { type: 'json' }
 import associatedProgramme from '../../../fixtures/v4/metadata/associated-programme.json' assert { type: 'json' }
 import hqTeamRegionOrPostInvestment from '../../../fixtures/v4/metadata/hq-team-region-or-post-investment.json' assert { type: 'json' }
 import hqTeamRegionOrPostTrade from '../../../fixtures/v4/metadata/hq-team-region-or-post-trade.json' assert { type: 'json' }
+import overseasRegion from '../../../fixtures/v4/metadata/overseas-region.json' assert { type: 'json' }
 
 export const getLikelihoodToLand = function (req, res) {
   res.json(likelihoodToLand)
@@ -338,3 +339,7 @@ export const getHqTeamRegionOrPost = function (req, res) {
   }
   res.json(hqTeamRegionOrPost[req.query.team_type] || {})
 }
+
+export const getOverseasRegion = function (req, res) {
+  res.json(overseasRegion)
+}

test/sandbox/server.js

@@ -225,6 +225,7 @@ import {
   getEvidenceTag as _evidenceTag,
   getEmployeeRange as _employeeRange,
   getCountry as _country,
+  getOverseasRegion as _overseasRegion,
   getUkRegion as _ukRegion,
   getAdministrativeArea,
   getReferralSourceWebsite as _referralSourceWebsite,
@@ -457,6 +458,7 @@ app.get('/v4/metadata/business-type', _businessType)
 app.get('/v4/metadata/evidence-tag', _evidenceTag)
 app.get('/v4/metadata/employee-range', _employeeRange)
 app.get('/v4/metadata/country', _country)
+app.get('/v4/metadata/overseas-region', _overseasRegion)
 app.get('/v4/metadata/uk-region', _ukRegion)
 app.get('/v4/metadata/winukregion', _ukRegion)
 app.get('/v4/metadata/administrative-area', getAdministrativeArea)