Add react router route for edit export win

src/apps/routers.js

@@ -27,6 +27,7 @@ const reactRoutes = [
   '/export/:exportId/delete',
   '/exportwins',
   '/exportwins/create',
+  '/exportwins/:exportWinId/edit',
   '/exportwins/confirmed',
   '/exportwins/unconfirmed',
   '/exportwins/:winId/details',

src/client/modules/ExportWins/Form/AddExportWinForm.jsx → src/client/modules/ExportWins/Form/ExportWinForm.jsx

@@ -1,47 +1,39 @@
 import React from 'react'
-import { useLocation } from 'react-router-dom'
 import { connect } from 'react-redux'
 
-import { getQueryParamsFromLocation } from '../../../../client/utils/url'
+import { state2props, TASK_GET_EXPORT_WINS_SAVE_FORM } from './state'
 import { DefaultLayout, Form, FormLayout } from '../../../components'
 import { CompanyResource } from '../../../components/Resource'
 import { transformFormValuesForAPI } from './transformers'
 import urls from '../../../../lib/urls'
-import {
-  state2props,
-  TASK_GET_EXPORT_WIN,
-  TASK_GET_EXPORT_PROJECT,
-  TASK_GET_EXPORT_WINS_SAVE_FORM,
-} from './state'
-import OfficerDetailsStep from './OfficerDetailsStep'
+
+import CheckBeforeSendingStep from './CheckBeforeSendingStep'
 import CreditForThisWinStep from './CreditForThisWinStep'
 import CustomerDetailsStep from './CustomerDetailsStep'
-import WinDetailsStep from './WinDetailsStep'
 import SupportProvidedStep from './SupportProvidedStep'
-import CheckBeforeSendingStep from './CheckBeforeSendingStep'
+import OfficerDetailsStep from './OfficerDetailsStep'
+import WinDetailsStep from './WinDetailsStep'
 
 const CompanyName = ({ companyId }) => (
   <CompanyResource.Inline id={companyId}>
     {(company) => company.name.toUpperCase()}
   </CompanyResource.Inline>
 )
 
-const AddExportWinForm = ({ isEditing, csrfToken, currentAdviserId }) => {
-  const location = useLocation()
-  const queryParams = getQueryParamsFromLocation(location)
-  const companyId = queryParams.company
-  const stepProps = { isEditing }
-
-  const initialValuesTaskName = queryParams.export
-    ? TASK_GET_EXPORT_PROJECT
-    : queryParams.exportwin
-      ? TASK_GET_EXPORT_WIN
-      : null
-
+const ExportWinForm = ({
+  title,
+  companyId,
+  exportWinId,
+  initialValuesTaskName,
+  initialValuesPayload,
+  csrfToken,
+  currentAdviserId,
+}) => {
+  const stepProps = { isEditing: !!exportWinId }
   return (
     <DefaultLayout
-      heading="Add export win"
-      pageTitle="Add export win"
+      heading={title}
+      pageTitle={title}
       subheading={<CompanyName companyId={companyId} />}
       breadcrumbs={[
         {
@@ -56,30 +48,28 @@ const AddExportWinForm = ({ isEditing, csrfToken, currentAdviserId }) => {
           link: urls.companies.detail(companyId),
           text: <CompanyName companyId={companyId} />,
         },
-        { text: 'Add export win' },
+        { text: title },
       ]}
     >
       <FormLayout>
         <Form
-          id="add-export-win"
+          id="export-win-form"
           showStepInUrl={true}
           cancelRedirectTo={() => urls.companies.exportWins.unconfirmed()}
           redirectTo={() => urls.companies.exportWins.unconfirmed()}
-          analyticsFormName="addExportWin"
+          analyticsFormName="exportWinForm"
           submissionTaskName={TASK_GET_EXPORT_WINS_SAVE_FORM}
           initialValuesTaskName={initialValuesTaskName}
           transformPayload={(values) => ({
-            exportWinId: queryParams.exportwin,
+            exportWinId,
             payload: {
               ...transformFormValuesForAPI(values),
               company: companyId,
               _csrf: csrfToken,
               adviser: currentAdviserId,
             },
           })}
-          initialValuesPayload={{
-            id: queryParams.export || queryParams.exportwin,
-          }}
+          initialValuesPayload={initialValuesPayload}
         >
           <>
             <OfficerDetailsStep {...stepProps} />
@@ -95,4 +85,4 @@ const AddExportWinForm = ({ isEditing, csrfToken, currentAdviserId }) => {
   )
 }
 
-export default connect(state2props)(AddExportWinForm)
+export default connect(state2props)(ExportWinForm)

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

@@ -1,3 +1,41 @@
-import AddExportWinForm from './AddExportWinForm'
+import React from 'react'
 
-export default AddExportWinForm
+import { TASK_GET_EXPORT_WIN, TASK_GET_EXPORT_PROJECT } from './state'
+import { getQueryParamsFromLocation } from '../../../utils/url'
+import ExportWinForm from './ExportWinForm'
+
+// If we're converting an export project to an export win
+// then we'll have the export id, otherwise we're creating
+// the export win from scratch.
+export const CreateExportWin = ({ location }) => {
+  const queryParams = getQueryParamsFromLocation(location)
+  return (
+    <ExportWinForm
+      title="Add export win"
+      companyId={queryParams.company}
+      initialValuesTaskName={
+        queryParams.export ? TASK_GET_EXPORT_PROJECT : null
+      }
+      initialValuesPayload={{
+        id: queryParams.export ? queryParams.export : null,
+      }}
+    />
+  )
+}
+
+// Here we're editing an existing win so we'll have the
+// export win id.
+export const EditExportWin = ({ location, match }) => {
+  const queryParams = getQueryParamsFromLocation(location)
+  return (
+    <ExportWinForm
+      title="Edit export win"
+      companyId={queryParams.company}
+      exportWinId={match.params.exportWinId}
+      initialValuesTaskName={TASK_GET_EXPORT_WIN}
+      initialValuesPayload={{
+        id: match.params.exportWinId,
+      }}
+    />
+  )
+}

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

@@ -1,5 +1,3 @@
-import { getQueryParamsFromLocation } from '../../../../client/utils/url'
-
 export const TASK_GET_EXPORT_WINS_SAVE_FORM = 'TASK_GET_EXPORT_WINS_SAVE_FORM'
 export const ID = 'exportWinForm'
 
@@ -9,11 +7,7 @@ export const EXPORT_PROJECT_ID = 'exportProject'
 export const TASK_GET_EXPORT_WIN = 'TASK_GET_EXPORT_WIN'
 export const EXPORT_WIN_ID = 'exportWin'
 
-export const state2props = ({ router, ...state }) => {
-  const queryParams = getQueryParamsFromLocation(router.location)
-  return {
-    csrfToken: state.csrfToken,
-    currentAdviserId: state.currentAdviserId,
-    isEditing: queryParams.exportwin !== undefined,
-  }
-}
+export const state2props = ({ router, ...state }) => ({
+  csrfToken: state.csrfToken,
+  currentAdviserId: state.currentAdviserId,
+})

src/client/routes.js

@@ -17,7 +17,7 @@ import {
 import ExportFormDelete from './modules/ExportPipeline/ExportDelete'
 import ExportDetails from './modules/ExportPipeline/ExportDetails'
 import ExportWins from './modules/ExportWins/'
-import AddExportWinForm from './modules/ExportWins/Form'
+import { CreateExportWin, EditExportWin } from './modules/ExportWins/Form'
 import ExportWinsRedirect from './modules/ExportWins/Redirect'
 import ExportWinDetails from './modules/ExportWins/Details'
 import CompanyHierarchy from './modules/Companies/CompanyHierarchy'
@@ -481,7 +481,12 @@ const routes = {
     {
       path: '/exportwins/create',
       module: 'datahub:companies',
-      component: AddExportWinForm,
+      component: CreateExportWin,
+    },
+    {
+      path: '/exportwins/:exportWinId/edit',
+      module: 'datahub:companies',
+      component: EditExportWin,
     },
   ],
   investments: [