Merge pull request #6477 from uktrade/feat/check-before-sending

Add Export Win - Check before sending (step 6 of 6)
uktrade · Feb 1, 2024 · be6dc8a · be6dc8a
2 parents 1b01286 + 7d3c1af
commit be6dc8a
Show file tree

Hide file tree

Showing 5 changed files with 817 additions and 290 deletions.
diff --git a/src/client/components/Form/elements/Step.jsx b/src/client/components/Form/elements/Step.jsx
@@ -2,12 +2,20 @@ import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import Button from '@govuk-react/button'
 import Link from '@govuk-react/link'
+import { kebabCase } from 'lodash'
 
 import { useFormContext } from '../hooks'
 import ButtonLink from '../../ButtonLink'
 import FormActions from './FormActions'
 
-function Step({ name, backButton, forwardButton, cancelUrl, children }) {
+function Step({
+  name,
+  backButton,
+  forwardButton,
+  cancelUrl,
+  submitButtonLabel = 'Submit',
+  children,
+}) {
   const {
     currentStep,
     goBack,
@@ -55,9 +63,9 @@ function Step({ name, backButton, forwardButton, cancelUrl, children }) {
 
   const renderForwardButton = () => {
     if (typeof forwardButton === 'undefined') {
-      const label = isLastStep() ? 'Submit' : 'Continue'
+      const label = isLastStep() ? submitButtonLabel : 'Continue'
       return (
-        <Button data-test={label.toLowerCase()} name="forward">
+        <Button data-test={kebabCase(label.toLowerCase())} name="forward">
           {label}
         </Button>
       )

diff --git a/src/client/modules/ExportWins/Form/AddExportWinForm.jsx b/src/client/modules/ExportWins/Form/AddExportWinForm.jsx
@@ -80,19 +80,14 @@ const AddExportWinForm = ({ isEditing, csrfToken, currentAdviserId }) => {
             id: queryParams.export || queryParams.exportwin,
           }}
         >
-          {({ values }) => {
-            return (
-              <>
-                <OfficerDetailsStep {...stepProps} />
-                <CreditForThisWinStep {...stepProps} />
-                <CustomerDetailsStep {...stepProps} />
-                <WinDetailsStep {...stepProps} />
-                <SupportProvidedStep {...stepProps} />
-                <CheckBeforeSendingStep {...stepProps} />
-                <pre>{JSON.stringify(values, null, 2)}</pre>
-              </>
-            )
-          }}
+          <>
+            <OfficerDetailsStep {...stepProps} />
+            <CreditForThisWinStep {...stepProps} />
+            <CustomerDetailsStep {...stepProps} />
+            <WinDetailsStep {...stepProps} />
+            <SupportProvidedStep {...stepProps} />
+            <CheckBeforeSendingStep {...stepProps} />
+          </>
         </Form>
       </FormLayout>
     </DefaultLayout>

diff --git a/src/client/modules/ExportWins/Form/CheckBeforeSending.jsx b/src/client/modules/ExportWins/Form/CheckBeforeSending.jsx
@@ -1,18 +1,279 @@
 import React from 'react'
+import WarningText from '@govuk-react/warning-text'
+import { H3 } from '@govuk-react/heading'
+import styled from 'styled-components'
+import pluralize from 'pluralize'
 
+import { Step, ButtonLink, FieldInput, SummaryTable } from '../../../components'
 import { useFormContext } from '../../../../client/components/Form/hooks'
-import { Step, FieldInput } from '../../../components'
+import { OPTION_NO, OPTION_YES } from '../../../../common/constants'
 import { steps } from './constants'
+import {
+  transformTeamsAndAdvisers,
+  transformGoodsAndServices,
+  transformCustomerConfidential,
+} from './transformers'
+
+import {
+  formatValue,
+  getYearFromWinType,
+  getMaxYearFromWinTypes,
+  sumWinTypeYearlyValues,
+  sumAllWinTypeYearlyValues,
+} from './utils'
+
+const StyledButtonLink = styled(ButtonLink)({
+  margin: 0,
+})
+
+const StyledContributingTeamsAndAdvisers = styled('div')({
+  fontWeight: 'bold',
+})
+
+const StyledOrderedList = styled('ol')({
+  marginTop: 10,
+})
+
+const CheckBeforeSendingStep = ({ isEditing }) => {
+  const { values, goToStep } = useFormContext()
+  const props = { values, goToStep, isEditing }
 
-const CheckBeforeSendingStep = () => {
-  // eslint-disable-next-line no-unused-vars
-  const { values } = useFormContext()
   return (
-    <Step name={steps.CHECK_BEFORE_SENDING}>
-      <h1>Check before sending</h1>
+    <Step
+      name={steps.CHECK_BEFORE_SENDING}
+      submitButtonLabel="Confirm and send to customer"
+    >
+      <H3 data-test="step-heading">Check before sending</H3>
+      <OfficerDetailsTable {...props} />
+      <CreditForThisWinTable {...props} />
+      <CustomerDetailsTable {...props} />
+      <WinDetailsTable {...props} />
+      <SupportGivenTable {...props} />
+      <WarningText data-test="warning-text">
+        This information will be sent to {values.contact?.label} so they can
+        confirm the export win.
+      </WarningText>
+      {/*
+          TODO: We have to include this hidden field 
+          otherwise we lose the previous step's state.
+      */}
       <FieldInput type="hidden" />
     </Step>
   )
 }
 
+const OfficerDetailsTable = ({ values, goToStep }) => (
+  <SummaryTable
+    caption="Officer details"
+    data-test="officer-details"
+    actions={
+      <StyledButtonLink
+        onClick={() => {
+          goToStep(steps.OFFICER_DETAILS)
+        }}
+      >
+        Change
+      </StyledButtonLink>
+    }
+  >
+    <SummaryTable.Row heading="Lead officer name">
+      {values.lead_officer?.label}
+    </SummaryTable.Row>
+    <SummaryTable.Row heading="Team type">
+      {values.team_type?.label}
+    </SummaryTable.Row>
+    <SummaryTable.Row heading="HQ Team, region or post">
+      {values.hq_team?.label}
+    </SummaryTable.Row>
+    <SummaryTable.ListRow
+      heading="Team members (optional)"
+      value={values.team_members}
+      emptyValue="Not set"
+    />
+  </SummaryTable>
+)
+
+const ContributingTeamsAndAdvisers = ({ teamsAndAdvisors }) => (
+  <>
+    <StyledContributingTeamsAndAdvisers>
+      Contributing teams and advisers
+    </StyledContributingTeamsAndAdvisers>
+    {teamsAndAdvisors.map((contributingTeam, index) => (
+      <StyledOrderedList index={index} length={teamsAndAdvisors.length}>
+        <li>Contributing officer: {contributingTeam.officer}</li>
+        <li>Team type: {contributingTeam.teamType}</li>
+        <li>HQ team, region or post: {contributingTeam.hqTeam}</li>
+      </StyledOrderedList>
+    ))}
+  </>
+)
+
+const CreditForThisWinTable = ({ values, goToStep }) => {
+  const teamsAndAdvisors = transformTeamsAndAdvisers(values)
+  return (
+    <SummaryTable
+      caption="Credit for this win"
+      data-test="credit-for-this-win"
+      actions={
+        <StyledButtonLink
+          onClick={() => {
+            goToStep(steps.CREDIT_FOR_THIS_WIN)
+          }}
+        >
+          Change
+        </StyledButtonLink>
+      }
+    >
+      <SummaryTable.Row heading="Did any other teams help with this win?">
+        {values?.credit_for_win === OPTION_NO ? 'No' : 'Yes'}
+        {values?.credit_for_win === OPTION_YES && (
+          <ContributingTeamsAndAdvisers teamsAndAdvisors={teamsAndAdvisors} />
+        )}
+      </SummaryTable.Row>
+    </SummaryTable>
+  )
+}
+
+const CustomerDetailsTable = ({ values, goToStep }) => (
+  <SummaryTable
+    caption="Customer details"
+    data-test="customer-details"
+    actions={
+      <StyledButtonLink
+        onClick={() => {
+          goToStep(steps.CUSTOMER_DETAILS)
+        }}
+      >
+        Change
+      </StyledButtonLink>
+    }
+  >
+    <SummaryTable.Row heading="Contact name">
+      {values.company_contacts?.label}
+    </SummaryTable.Row>
+    <SummaryTable.Row heading="HQ location">
+      {values.customer_location?.label}
+    </SummaryTable.Row>
+    <SummaryTable.Row heading="Export potential">
+      {values.business_potential?.label}
+    </SummaryTable.Row>
+    <SummaryTable.Row heading="Export experience">
+      {values.export_experience?.label}
+    </SummaryTable.Row>
+  </SummaryTable>
+)
+
+const getWinTypeValue = (winType, values) => {
+  const sum = formatValue(sumWinTypeYearlyValues(winType, values))
+  const year = getYearFromWinType(winType, values)
+  return `${sum} over ${year} ${pluralize('year', year)}`
+}
+
+const getTotalWinTypeValue = (winTypes = [], values) => {
+  const sum = formatValue(sumAllWinTypeYearlyValues(winTypes, values))
+  const maxYear = getMaxYearFromWinTypes(winTypes, values)
+  return `${sum} over ${maxYear} ${pluralize('year', maxYear)}`
+}
+
+const WinDetailsTable = ({ values, goToStep }) => {
+  const exportSum = sumWinTypeYearlyValues('export_win', values)
+  const odiWinSum = sumWinTypeYearlyValues('odi_win', values)
+  const busSuccSum = sumWinTypeYearlyValues('business_success_win', values)
+
+  const hasMoreThanOneWinType = values?.win_type?.length > 1
+  const showExportWin = exportSum > 0 && hasMoreThanOneWinType
+  const showBusinessSuccessWin = busSuccSum > 0 && hasMoreThanOneWinType
+  const showOdiWin = odiWinSum > 0 && hasMoreThanOneWinType
+
+  return (
+    <SummaryTable
+      caption="Win details"
+      data-test="win-details"
+      actions={
+        <StyledButtonLink
+          onClick={() => {
+            goToStep(steps.WIN_DETAILS)
+          }}
+        >
+          Change
+        </StyledButtonLink>
+      }
+    >
+      <SummaryTable.Row heading="Destination">
+        {values.country?.label}
+      </SummaryTable.Row>
+      <SummaryTable.Row heading="Date won">
+        {`${values.date?.month}/${values.date?.year}`}
+      </SummaryTable.Row>
+      <SummaryTable.Row heading="Summary of support given">
+        {values.description}
+      </SummaryTable.Row>
+      <SummaryTable.Row heading="Overseas customer">
+        {values.name_of_customer}
+      </SummaryTable.Row>
+      <SummaryTable.Row heading="Confidential">
+        {transformCustomerConfidential(values.name_of_customer_confidential)}
+      </SummaryTable.Row>
+      <SummaryTable.Row heading="Type of win">
+        {values.business_type}
+      </SummaryTable.Row>
+      {showExportWin && (
+        <SummaryTable.Row heading="Export value">
+          {getWinTypeValue('export_win', values)}
+        </SummaryTable.Row>
+      )}
+      {showBusinessSuccessWin && (
+        <SummaryTable.Row heading="Business success value">
+          {getWinTypeValue('business_success_win', values)}
+        </SummaryTable.Row>
+      )}
+      {showOdiWin && (
+        <SummaryTable.Row heading="Outward Direct Investment (ODI) value">
+          {getWinTypeValue('odi_win', values)}
+        </SummaryTable.Row>
+      )}
+      <SummaryTable.Row heading="Total value">
+        {getTotalWinTypeValue(values.win_type, values)}
+      </SummaryTable.Row>
+      <SummaryTable.Row heading="What does the value relate to?">
+        {transformGoodsAndServices(values.goods_vs_services)}
+      </SummaryTable.Row>
+      <SummaryTable.Row heading="Type of goods or services">
+        {values.name_of_export}
+      </SummaryTable.Row>
+      <SummaryTable.Row heading="Sector">
+        {values.sector?.label}
+      </SummaryTable.Row>
+    </SummaryTable>
+  )
+}
+
+const SupportGivenTable = ({ values, goToStep }) => (
+  <SummaryTable
+    caption="Support given"
+    data-test="support-given"
+    actions={
+      <StyledButtonLink
+        onClick={() => {
+          goToStep(steps.SUPPORT_PROVIDED)
+        }}
+      >
+        Change
+      </StyledButtonLink>
+    }
+  >
+    <SummaryTable.Row heading="HVC code">{values?.hvc?.label}</SummaryTable.Row>
+    <SummaryTable.ListRow
+      heading="What type of support was given?"
+      value={values.type_of_support}
+      emptyValue="Not set"
+    />
+    <SummaryTable.ListRow
+      heading="Was there a DBT campaign or event that contributed to this win?"
+      value={values.associated_programme}
+      emptyValue="Not set"
+    />
+  </SummaryTable>
+)
+
 export default CheckBeforeSendingStep
diff --git a/src/client/modules/ExportWins/Form/transformers.js b/src/client/modules/ExportWins/Form/transformers.js
@@ -174,7 +174,9 @@ export const transformFormValuesForAPI = (values) => ({
   lead_officer: values.lead_officer.value,
   team_type: values.team_type.value,
   hq_team: values.hq_team.value,
-  team_members: values.team_members.map((member) => member.value),
+  team_members: values.team_members
+    ? values.team_members.map((member) => member.value)
+    : [],
   // Credit for this win
   advisers: transformContributingOfficersToAdvisers(values),
   // Customer details