feature/CLS2-643-select-investment-project (#6366)

* added field lookup for investment projects

* only show the investment project field if someone has selected a company

* fixed component tests

* fix naming of test

* tests fixes

* moved component into shared export

src/client/components/Form/elements/FieldInvestmentProjectTypeahead/index.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { throttle } from 'lodash'
+
+import FieldTypeahead from '../FieldTypeahead'
+import { apiProxyAxios } from '../../../Task/utils'
+
+const FieldInvestmentProjectTypeahead = ({
+  name,
+  label,
+  required,
+  placeholder = 'Type to search for investment projects',
+  company = null,
+  ...props
+}) => {
+  return (
+    <FieldTypeahead
+      name={name}
+      label={label}
+      placeholder={placeholder}
+      noOptionsMessage=""
+      required={required}
+      loadOptions={throttle(
+        (searchString) =>
+          apiProxyAxios
+            .get('/v3/investment', {
+              params: {
+                autocomplete: searchString,
+                investor_company_id: company,
+              },
+            })
+            .then(({ data: { results } }) =>
+              results.map(({ id, name }) => ({
+                label: name,
+                chipLabel: name,
+                value: id,
+              }))
+            ),
+        500
+      )}
+      {...props}
+    />
+  )
+}
+
+FieldInvestmentProjectTypeahead.propTypes = {
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  required: PropTypes.string,
+  isMulti: PropTypes.bool,
+  placeholder: PropTypes.string,
+}
+
+export default FieldInvestmentProjectTypeahead

src/client/components/Form/elements/__stories__/FieldInvestmentProjectTypeahead.stories.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+import FieldInvestmentProjectTypeahead from '../FieldInvestmentProjectTypeahead'
+import Form from '../../../Form'
+
+const options = [
+  {
+    value: '379f390a-e083-4a2c-9cea-e3b9a08606a7',
+    label: 'Project A',
+  },
+  {
+    value: '8dcd2bb8-dc73-4a42-8655-4ae42d4d3c5a',
+    label: 'Project B',
+  },
+]
+
+export const mockLoadOptions = (query = '') =>
+  new Promise((resolve) =>
+    query && query.length
+      ? setTimeout(
+          resolve,
+          200,
+          options.filter(({ label }) =>
+            label.toLowerCase().includes(query.toLowerCase())
+          )
+        )
+      : resolve([])
+  )
+
+export default {
+  title: 'Form/Form Elements/FieldInvestmentProjectTypeahead',
+  excludeStories: ['mockLoadOptions'],
+  parameters: {
+    component: FieldInvestmentProjectTypeahead,
+  },
+}
+
+export const Default = () => (
+  <Form
+    id="fieldInvestmentProjectTypeaheadExample"
+    analyticsFormName="fieldInvestmentProjectTypeaheadExample"
+    submissionTaskName="Submit Form example"
+  >
+    {() => (
+      <>
+        <FieldInvestmentProjectTypeahead
+          name="investmentProject"
+          loadOptions={mockLoadOptions}
+        />
+      </>
+    )}
+  </Form>
+)

src/client/components/index.jsx

@@ -94,3 +94,4 @@ export { default as ContactLayout } from './Layout/ContactLayout'
 export { default as FieldCurrency } from './Form/elements/FieldCurrency'
 export { default as Wrap } from './Wrap'
 export { default as FieldCompaniesTypeahead } from './Form/elements/FieldCompaniesTypeahead'
+export { default as FieldInvestmentProjectTypeahead } from './Form/elements/FieldInvestmentProjectTypeahead'

src/client/modules/Tasks/TaskForm/TaskFormFields.jsx

@@ -12,6 +12,7 @@ import {
   FieldAdvisersTypeahead,
   NewWindowLink,
   FieldCompaniesTypeahead,
+  FieldInvestmentProjectTypeahead,
 } from '../../../components'
 
 import { validateDaysRange, validateIfDateInFuture } from './validators'
@@ -52,8 +53,7 @@ const TaskFormFields = ({
       redirectTo={() => redirectToUrl}
       submissionTaskName={TASK_SAVE_TASK_DETAILS}
       transformPayload={(values) => ({
-        //hidden fields do not get added to the values, include investment project here for now until it gets converted into a FieldSelect in future PRs
-        values: { ...values, investmentProject: task?.investmentProject },
+        values: values,
         currentAdviserId,
         taskId: values.id,
       })}
@@ -62,7 +62,7 @@ const TaskFormFields = ({
       submitButtonLabel="Save task"
       cancelButtonLabel="Back"
     >
-      {() => (
+      {({ values }) => (
         <>
           <FieldInput
             label="Task title"
@@ -140,19 +140,22 @@ const TaskFormFields = ({
             </UnorderedList>
           </Details>
 
-          {!task?.investmentProject && (
-            <FieldCompaniesTypeahead
-              name="company"
-              isMulti={false}
-              label="Company name (optional)"
-              hint="This will link the task to the company selected and display on your task list on the homepage."
+          <FieldCompaniesTypeahead
+            name="company"
+            isMulti={false}
+            label="Company name (optional)"
+            hint="This will link the task to the company selected. The task will be added to your task list on the homepage."
+            initialValue={task?.company}
+          />
+          {(task?.company || values.company) && (
+            <FieldInvestmentProjectTypeahead
+              name="investmentProject"
+              label="Investment project (optional)"
+              hint="This will link the task to the project selected. The task will be added to your task list on the homepage."
+              company={values.company && values.company.value}
+              initialValue={task?.investmentProject}
             />
           )}
-          <FieldInput
-            type="hidden"
-            name="investmentProject"
-            initialValue={task?.investmentProject?.value}
-          />
         </>
       )}
     </Form>

src/client/modules/Tasks/TaskForm/state.js

@@ -87,8 +87,14 @@ export const state2props = (state) => {
 
   if (project) {
     const transformedProject = transformIdNameToValueLabel(project)
+    const transformedCompany = transformIdNameToValueLabel(
+      project.investorCompany
+    )
     return {
-      task: { investmentProject: transformedProject },
+      task: {
+        investmentProject: transformedProject,
+        company: transformedCompany,
+      },
       currentAdviserId,
       breadcrumbs: getInvestmentProjectBreadcumbs(transformedProject),
     }