Fix labels for EYB leads with is_high_value=None on collection and details page

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

@@ -6,8 +6,8 @@ import { format } from '../../../utils/date'
 import urls from '../../../../lib/urls'
 import { EYBLeadResource } from '../../../components/Resource'
 import { EYBLeadLayout, NewWindowLink, SummaryTable } from '../../../components'
-import { HIGH_VALUE_LABEL, LOW_VALUE_LABEL } from './constants'
 import { NOT_SET_TEXT } from '../../../../apps/companies/constants'
+import { VALUES_VALUE_TO_LABEL_MAP } from './constants'
 
 const EYBLeadDetails = () => {
   const { eybLeadId } = useParams()
@@ -37,9 +37,7 @@ const EYBLeadDetails = () => {
               )}
               <SummaryTable.Row
                 heading="Value"
-                children={
-                  eybLead.is_high_value ? LOW_VALUE_LABEL : HIGH_VALUE_LABEL
-                }
+                children={VALUES_VALUE_TO_LABEL_MAP[eybLead.isHighValue]}
               />
               <SummaryTable.Row
                 heading="Sector or industry"

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

@@ -5,10 +5,20 @@ export const QS_PARAMS = {
   valueOfLead: 'value',
 }
 
-export const HIGH_VALUE_LABEL = 'High value'
-export const LOW_VALUE_LABEL = 'Low value'
+export const VALUES = {
+  HIGH_VALUE: 'High value',
+  LOW_VALUE: 'Low value',
+  UNKNOWN: 'Unknown value',
+}
+
+export const VALUES_VALUE_TO_LABEL_MAP = {
+  [true]: VALUES.HIGH_VALUE,
+  [false]: VALUES.LOW_VALUE,
+  [null]: VALUES.UNKNOWN,
+}
 
 export const VALUE_OPTIONS = [
-  { value: 'high', label: HIGH_VALUE_LABEL },
-  { value: 'low', label: LOW_VALUE_LABEL },
+  { value: 'high', label: VALUES.HIGH_VALUE },
+  { value: 'low', label: VALUES.LOW_VALUE },
+  { value: 'unknown', label: VALUES.UNKNOWN },
 ]

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

@@ -1,5 +1,7 @@
 import urls from '../../../../lib/urls'
+import { TAG_COLOURS } from '../../../components/Tag'
 import { format } from '../../../utils/date'
+import { VALUES_VALUE_TO_LABEL_MAP } from './constants'
 
 export const transformLeadToListItem = ({
   id,
@@ -14,8 +16,12 @@ export const transformLeadToListItem = ({
 }) => {
   const tags = [
     {
-      text: is_high_value ? 'HIGH VALUE' : 'LOW VALUE',
-      colour: is_high_value ? 'green' : 'orange',
+      text: VALUES_VALUE_TO_LABEL_MAP[is_high_value].toUpperCase(),
+      colour: is_high_value
+        ? TAG_COLOURS.GREEN
+        : is_high_value === false
+          ? TAG_COLOURS.ORANGE
+          : TAG_COLOURS.GREY,
       dataTest: 'value-label',
     },
   ]

test/functional/cypress/specs/investments/eyb-lead-details-spec.js

@@ -5,7 +5,9 @@ import {
 import { investments } from '../../../../../src/lib/urls'
 import { eybLeadFaker } from '../../fakers/eyb-leads'
 import { NOT_SET_TEXT } from '../../../../../src/apps/companies/constants'
+import { VALUES_VALUE_TO_LABEL_MAP } from '../../../../../src/client/modules/Investments/EYBLeads/constants'
 
+const selectors = require('../../../../selectors/index')
 const urls = require('../../../../../src/lib/urls')
 
 const setup = (eybLead) => {
@@ -264,4 +266,21 @@ describe('EYB lead details', () => {
       })
     }
   )
+  context('When viewing an EYB lead with high, low, and unknown values', () => {
+    const testCases = [true, false, null]
+    testCases.forEach((value) => {
+      const eybLead = eybLeadFaker({ is_high_value: value })
+      it('should render the value field with the correct label', () => {
+        setup(eybLead)
+        cy.visit(investments.eybLeads.details(eybLead.id))
+        cy.wait('@getEYBLeadDetails')
+        cy.get(
+          selectors.keyValueTable('eyb-lead-details-table').keyCell(2)
+        ).should('have.text', 'Value')
+        cy.get(
+          selectors.keyValueTable('eyb-lead-details-table').valueCell(2)
+        ).should('have.text', VALUES_VALUE_TO_LABEL_MAP[eybLead.is_high_value])
+      })
+    })
+  })
 })

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

@@ -15,6 +15,7 @@ import {
 import { investments } from '../../../../../src/lib/urls'
 import { format } from '../../../../../src/client/utils/date'
 import { eybLeadFaker } from '../../fakers/eyb-leads'
+import { VALUES_VALUE_TO_LABEL_MAP } from '../../../../../src/client/modules/Investments/EYBLeads/constants'
 
 const EYB_RETRIEVE_API_ROUTE = '/api-proxy/v4/investment-lead/eyb'
 
@@ -34,6 +35,8 @@ const HIGH_VALUE = 'high'
 const HIGH_VALUE_LABEL = 'High value'
 const LOW_VALUE = 'low'
 const LOW_VALUE_LABEL = 'Low value'
+const UNKNOWN_VALUE = 'unknown'
+const UNKNOWN_VALUE_LABEL = 'Unknown value'
 const COUNTRY_NAME_1 = 'Canada'
 const COUNTRY_ID_1 = '5daf72a6-5d95-e211-a939-e4115bead28a'
 const COUNTRY_NAME_2 = 'Brazil'
@@ -52,6 +55,7 @@ const EYB_LEAD_LIST = Array(
     is_high_value: false,
     country: { name: COUNTRY_NAME_1, id: COUNTRY_ID_1 },
   }),
+  eybLeadFaker({ triage_created: DATE_TIME_STRING, is_high_value: null }),
   eybLeadFaker({ triage_created: DATE_TIME_STRING, is_high_value: false }),
   eybLeadFaker({
     triage_created: DATE_TIME_STRING,
@@ -68,6 +72,7 @@ const PAYLOADS = {
   sectorFilter: { sector: SECTOR_ID },
   highValueFilter: { value: HIGH_VALUE },
   lowValueFilter: { value: LOW_VALUE },
+  unknownValueFilter: { value: UNKNOWN_VALUE },
   countryFilter: { country: COUNTRY_ID_1 },
 }
 
@@ -92,7 +97,8 @@ const getEYBLeadsBySectorId = (sectorId) => {
 const convertValueStringToBoolean = (value) => {
   if (value === 'high') return true
   if (value === 'low') return false
-  throw new Error('Invalid value: must be either "high" or "low"')
+  if (value === 'unknown') return null
+  throw new Error('Invalid value: must be either "high", "low", or "unknown"')
 }
 
 const getEYBLeadsByValue = (valueOfLead) => {
@@ -174,11 +180,14 @@ describe('EYB leads collection page', () => {
           'contain',
           `Location ${eybLead.proposed_investment_region.name}`
         )
-        .should('contain', eybLead.is_high_value ? 'HIGH VALUE' : 'LOW VALUE')
+        .should(
+          'contain',
+          VALUES_VALUE_TO_LABEL_MAP[eybLead.is_high_value].toUpperCase()
+        )
     })
     it('should display the other name when company is null for a collection item', () => {
       cy.get('[data-test="collection-item"]')
-        .eq(3)
+        .eq(4)
         .should('contain', COMPANY_NAME_DEFAULT)
     })
   })
@@ -290,7 +299,7 @@ describe('EYB leads collection page', () => {
   })
 
   context(
-    'When filtering the EYB leads collection by value of leads (repeats test case for "high" and "low")',
+    'When filtering the EYB leads collection by value of leads (repeats test case for "high", "low", and "unknown")',
     () => {
       const testCases = [
         {
@@ -311,6 +320,15 @@ describe('EYB leads collection page', () => {
           chipsLabel: LOW_VALUE_LABEL,
           expectedNumberOfResults: 3,
         },
+        {
+          queryParamValue: UNKNOWN_VALUE,
+          expectedPayload: {
+            ...PAYLOADS.minimum,
+            ...PAYLOADS.unknownValueFilter,
+          },
+          chipsLabel: UNKNOWN_VALUE_LABEL,
+          expectedNumberOfResults: 1,
+        },
       ]
 
       testCases.forEach((testCase) => {