Merge pull request #6619 from uktrade/feature/add-customer-confidenti…

…al-radio-buttons

Add customer confidentiality radio buttons for Export Wins

src/client/modules/ExportWins/Form/CheckBeforeSendingStep.jsx

@@ -208,9 +208,11 @@ const WinDetailsTable = ({ values, goToStep }) => {
       <SummaryTable.Row heading="Summary of support given">
         {values.description}
       </SummaryTable.Row>
-      <SummaryTable.Row heading="Overseas customer">
-        {values.name_of_customer}
-      </SummaryTable.Row>
+      {values.name_of_customer && (
+        <SummaryTable.Row heading="Overseas customer">
+          {values.name_of_customer}
+        </SummaryTable.Row>
+      )}
       <SummaryTable.Row heading="Confidential">
         {transformCustomerConfidential(values.name_of_customer_confidential)}
       </SummaryTable.Row>

src/client/modules/ExportWins/Form/WinDetailsStep.jsx

@@ -10,14 +10,14 @@ import CountriesResource from '../../../components/Resource/Countries'
 import { formatValue, sumAllWinTypeYearlyValues } from './utils'
 import { BLACK, WHITE } from '../../../../client/utils/colours'
 import { SectorResource } from '../../../components/Resource'
-import { OPTION_YES } from '../../../../common/constants'
 import { validateWinDate } from './validators'
 import { WinTypeValues } from './WinTypeValues'
 import { StyledHintParagraph } from './styled'
 import {
   Step,
   FieldDate,
   FieldInput,
+  FieldRadios,
   FieldTextarea,
   FieldTypeahead,
   FieldCheckboxes,
@@ -79,21 +79,29 @@ const WinDetailsStep = () => {
         maxWords={MAX_WORDS}
       />
 
-      <FieldInput
-        type="text"
-        name="name_of_customer"
-        label="Overseas customer"
-        required="Enter the name of the overseas customer"
-        placeholder="Add name"
-      />
-
-      <FieldCheckboxes
+      <FieldRadios
         name="name_of_customer_confidential"
-        hint="Check this box if your customer has asked for this not to be public (optional)."
+        label="Overseas customer"
+        hint="Is the customer's name confidential?"
+        required="Select Yes or No"
         options={[
           {
-            value: OPTION_YES,
-            label: 'Confidential',
+            label: 'Yes',
+            value: 'yes',
+          },
+          {
+            label: 'No',
+            value: 'no',
+            children: (
+              <FieldInput
+                type="text"
+                name="name_of_customer"
+                label="Customer's name"
+                hint="Enter the customer’s name, this will be displayed on Data Hub."
+                required="Enter the name of the overseas customer"
+                placeholder="Add name"
+              />
+            ),
           },
         ]}
       />

src/client/modules/ExportWins/Form/transformers.js

@@ -16,6 +16,8 @@ import {
   goodsServicesIdToLabelMap,
 } from './constants'
 
+const CONFIDENTIAL = 'confidential'
+
 const transformContributingOfficersToAdvisers = (values) =>
   Object.keys(values)
     .filter((key) => key.startsWith('contributing_officer'))
@@ -147,8 +149,9 @@ export const transformExportWinForForm = (exportWin) => ({
   date: convertDateToFieldDateObject(exportWin.date),
   description: exportWin.description,
   name_of_customer: exportWin.name_of_customer,
-  name_of_customer_confidential:
-    exportWin.name_of_customer_confidential === true ? OPTION_YES : OPTION_NO,
+  name_of_customer_confidential: exportWin.name_of_customer_confidential
+    ? OPTION_YES
+    : OPTION_NO,
   business_type: exportWin.business_type,
   ...transformBreakdownsToYearlyValues(exportWin.breakdowns),
   win_type: getWinTypesFromBreakdowns(exportWin.breakdowns),
@@ -189,9 +192,12 @@ export const transformFormValuesForAPI = (values) => ({
   country: values.country.value,
   date: `${values.date.year}-${values.date.month}-01`,
   description: values.description,
-  name_of_customer: values.name_of_customer,
+  name_of_customer:
+    values.name_of_customer_confidential === OPTION_YES
+      ? CONFIDENTIAL
+      : values.name_of_customer,
   name_of_customer_confidential:
-    values.name_of_customer_confidential[0] === OPTION_YES,
+    values.name_of_customer_confidential === OPTION_YES,
   business_type: values.business_type,
   breakdowns: [
     ...transformYearlyValuesToBreakdowns(

test/functional/cypress/specs/export-win/add-export-win-from-export-project.js

@@ -271,8 +271,8 @@ describe('Adding an export win from an export project', () => {
             dateMonth: null, // pre-populated but must be within the last 12 months
             dateYear: null, // pre-populated but must be within the last 12 months
             description: 'Foo bar baz',
+            nameOfCustomerConfidential: false,
             nameOfCustomer: 'David French',
-            isConfidential: true,
             businessType: 'Contract',
             exportValues: ['1000000'],
             goodsVsServices: 'goods',
@@ -332,17 +332,21 @@ describe('Adding an export win from an export project', () => {
               'country',
               'date',
               'sector',
+              'name_of_customer_confidential',
+              'name_of_customer',
             ])
           ).to.deep.equal({
-            // We only need to assert the fields that have
-            // been pre-populated from an export project
+            // Assert the fields that have been pre-populated from an export project
             lead_officer: exportProject.owner.id,
             team_members: exportProject.team_members.map(({ id }) => id),
             company_contacts: exportProject.contacts.map(({ id }) => id),
             export_experience: exportProject.exporter_experience.id,
             country: exportProject.destination_country.id,
             date: `${year}-${month}-01`,
             sector: exportProject.sector.id,
+            // Assert the customer name and that it's not confidential
+            name_of_customer_confidential: false,
+            name_of_customer: 'David French',
           })
         })
 

test/functional/cypress/specs/export-win/add-export-win-spec.js

@@ -119,7 +119,6 @@ describe('Adding an export win', () => {
     })
   })
 
-  // Disable testIsolation due to multi step form with lots of data.
   context(
     'When the export win is created from scratch',
     { testIsolation: false },
@@ -157,8 +156,7 @@ describe('Adding an export win', () => {
           dateMonth: month,
           dateYear: year,
           description: 'Foo bar baz',
-          nameOfCustomer: 'David French',
-          isConfidential: true,
+          nameOfCustomerConfidential: true,
           businessType: 'Contract',
           exportValues: ['1000000', '1000000', '1000000', '1000000', '1000000'],
           businessSuccessValues: [
@@ -244,7 +242,6 @@ describe('Adding an export win', () => {
             Destination: 'United States',
             'Date won': `${month}/${year}`,
             'Summary of support given': 'Foo bar baz',
-            'Overseas customer': 'David French',
             Confidential: 'Yes',
             'Type of win': 'Contract',
             'Export value': '£5,000,000 over 5 years',
@@ -306,7 +303,7 @@ describe('Adding an export win', () => {
             country: '81756b9a-5d95-e211-a939-e4115bead28a',
             date: `${year}-${month}-01`,
             description: 'Foo bar baz',
-            name_of_customer: 'David French',
+            name_of_customer: 'confidential',
             name_of_customer_confidential: true,
             business_type: 'Contract',
             breakdowns: [

test/functional/cypress/specs/export-win/constants.js

@@ -55,7 +55,12 @@ export const formFields = {
     dateYear: '[data-test="date-year"]',
     description: '[data-test="field-description"]',
     nameOfCustomer: '[data-test="field-name_of_customer"]',
-    confidential: '[data-test="field-name_of_customer_confidential"]',
+    nameOfCustomerConfidential:
+      '[data-test="field-name_of_customer_confidential"]',
+    nameOfCustomerConfidentialYes:
+      '[data-test="name-of-customer-confidential-yes"]',
+    nameOfCustomerConfidentialNo:
+      '[data-test="name-of-customer-confidential-no"]',
     businessType: '[data-test="field-business_type"]',
     winType: '[data-test="field-win_type"]',
     goodsVsServices: '[data-test="field-goods_vs_services"]',

test/functional/cypress/specs/export-win/credit-for-this-win-spec.js

@@ -42,14 +42,8 @@ describe('Credit for this win', () => {
       legend: 'Did any other teams help with this win?',
       options: ['Yes', 'No'],
     })
-    cy.get(creditForThisWin.radiosBtnYes)
-      .should('not.be.checked')
-      .parent()
-      .should('have.text', 'Yes')
-    cy.get(creditForThisWin.radiosBtnNo)
-      .should('not.be.checked')
-      .parent()
-      .should('have.text', 'No')
+    cy.get(creditForThisWin.radiosBtnYes).should('not.be.checked')
+    cy.get(creditForThisWin.radiosBtnNo).should('not.be.checked')
   })
 
   it('should go to the next step when selecting "No" and then "Continue"', () => {

test/functional/cypress/specs/export-win/utils.js

@@ -56,8 +56,8 @@ export const fillWinDetails = ({
   dateMonth,
   dateYear,
   description,
+  nameOfCustomerConfidential,
   nameOfCustomer,
-  isConfidential,
   businessType,
   exportValues,
   businessSuccessValues,
@@ -76,10 +76,13 @@ export const fillWinDetails = ({
   description &&
     cy.get(winDetails.description).find('textarea').type(description)
 
-  nameOfCustomer &&
-    cy.get(winDetails.nameOfCustomer).find('input').type(nameOfCustomer)
+  nameOfCustomerConfidential
+    ? cy.get(winDetails.nameOfCustomerConfidentialYes).click()
+    : cy.get(winDetails.nameOfCustomerConfidentialNo).click()
 
-  isConfidential && cy.get(winDetails.confidential).find('input').check()
+  !nameOfCustomerConfidential &&
+    nameOfCustomer &&
+    cy.get(winDetails.nameOfCustomer).find('input').type(nameOfCustomer)
 
   businessType &&
     cy.get(winDetails.businessType).find('input').type(businessType)

test/functional/cypress/specs/export-win/win-details-spec.js

@@ -1,5 +1,5 @@
 import { clickContinueButton } from '../../support/actions'
-import { formFields, winDetailsStep } from './constants'
+import { formFields, winDetailsStep, company } from './constants'
 
 import {
   populateWinWithValues,
@@ -16,6 +16,7 @@ import {
   assertFieldTypeahead,
   assertFieldDateShort,
   assertFieldCheckboxes,
+  assertFieldRadiosStrict,
 } from '../../support/assertions'
 
 const { month, year } = getDateWithinLastTwelveMonths()
@@ -24,6 +25,7 @@ describe('Win details', () => {
   const { winDetails } = formFields
 
   beforeEach(() => {
+    cy.intercept('GET', `/api-proxy/v4/company/${company.id}`, company)
     cy.visit(winDetailsStep)
   })
 
@@ -69,29 +71,29 @@ describe('Win details', () => {
     })
   })
 
+  it('should render two confidential unselected radio buttons', () => {
+    assertFieldRadiosStrict({
+      inputName: 'name_of_customer_confidential',
+      legend: 'Overseas customer',
+      hint: "Is the customer's name confidential?",
+      options: ['Yes', 'No'],
+    })
+    cy.get(winDetails.nameOfCustomerConfidentialYes).should('not.be.checked')
+    cy.get(winDetails.nameOfCustomerConfidentialNo).should('not.be.checked')
+  })
+
   it('should renderer Overseas customer', () => {
+    cy.get(winDetails.nameOfCustomerConfidentialNo).click()
     cy.get(winDetails.nameOfCustomer).then((element) => {
       assertFieldInput({
         element,
-        label: 'Overseas customer',
+        label: "Customer's name",
+        hint: 'Enter the customer’s name, this will be displayed on Data Hub.',
         placeholder: 'Add name',
       })
     })
   })
 
-  it('should render a Confidential checkbox', () => {
-    assertFieldCheckboxes({
-      element: winDetails.confidential,
-      hint: 'Check this box if your customer has asked for this not to be public (optional).',
-      options: [
-        {
-          label: 'Confidential',
-          checked: false,
-        },
-      ],
-    })
-  })
-
   it('should renderer a type of business deal', () => {
     cy.get(winDetails.businessType).then((element) => {
       assertFieldInput({
@@ -238,7 +240,7 @@ describe('Win details', () => {
       'Choose a destination country',
       'Enter the win date',
       'Enter a summary',
-      'Enter the name of the overseas customer',
+      'Select Yes or No',
       'Enter the type of business deal',
       'Choose at least one type of win',
       'Select at least one option',
@@ -252,11 +254,12 @@ describe('Win details', () => {
     )
     assertFieldError(cy.get(winDetails.date), 'Enter the win date', true)
     assertFieldError(cy.get(winDetails.description), 'Enter a summary', true)
-    assertFieldError(
-      cy.get(winDetails.nameOfCustomer),
-      'Enter the name of the overseas customer',
-      false
+
+    cy.get(winDetails.nameOfCustomerConfidential).should(
+      'contain',
+      'Select Yes or No'
     )
+
     assertFieldError(
       cy.get(winDetails.businessType),
       'Enter the type of business deal',
@@ -280,6 +283,27 @@ describe('Win details', () => {
     assertFieldError(cy.get(winDetails.sector), 'Enter a sector', false)
   })
 
+  it('should display validation error messages on mandatory fields that are revealed', () => {
+    // Reveal the overseas customer field by clicking no
+    cy.get(winDetails.nameOfCustomerConfidentialNo).click()
+    clickContinueButton()
+    assertErrorSummary([
+      'Choose a destination country',
+      'Enter the win date',
+      'Enter a summary',
+      'Enter the type of business deal',
+      'Choose at least one type of win',
+      'Select at least one option',
+      'Enter the name of goods or services',
+      'Enter a sector',
+      'Enter the name of the overseas customer',
+    ])
+    cy.get(winDetails.nameOfCustomerConfidential).should(
+      'contain',
+      'Enter the name of the overseas customer'
+    )
+  })
+
   it('should display a validation error message when the win date is in the future', () => {
     const { month, year } = getDateNextMonth()
     cy.get(winDetails.dateMonth).type(month)

test/functional/cypress/support/assertions.js

@@ -272,14 +272,23 @@ const assertFieldRadios = ({ element, label, value, optionsCount }) =>
 /**
  * @param {{inputName: string, options: string[], legend?: string, selectIndex?: number}} options
  */
-const assertFieldRadiosStrict = ({ inputName, options, legend, selectIndex }) =>
+const assertFieldRadiosStrict = ({
+  inputName,
+  options,
+  legend,
+  hint,
+  selectIndex,
+}) =>
   cy
     .get(`[data-test="field-${inputName}"]`)
     .should('exist')
     .within(() => {
       if (legend) {
         cy.get('legend').should('have.text', legend)
       }
+      if (hint) {
+        cy.get('[data-test="hint-text"]').should('have.text', hint)
+      }
 
       cy.get('input[type="radio"]')
         .should('have.length', options.length)