add an autoscroll to Next button on CompanySearchResultComponent (#910)

website/src/components_feature/reportFlow/Company/CompanySearchResultComponent.tsx

@@ -1,17 +1,17 @@
 import {Animate} from '@/components_simple/Animate'
 import {BtnNextSubmit} from '@/components_simple/buttons/Buttons'
 import {CompanyRecapFromSearchResult} from '@/components_simple/CompanyRecap/CompanyRecap'
+import {ScTextInput} from '@/components_simple/formInputs/ScTextInput'
 import {getTags} from '@/feature/reportUtils'
 import {useI18n} from '@/i18n/I18n'
 import {Report} from '@/model/Report'
 import {Alert} from '@codegouvfr/react-dsfr/Alert'
-import {useEffect, useState} from 'react'
 import {Controller, useForm} from 'react-hook-form'
 import {ScRadioButtons} from '../../../components_simple/formInputs/ScRadioButtons'
+import {ScAlert} from '../../../components_simple/ScAlert'
 import {useToastError} from '../../../hooks/useToastError'
 import {CompanySearchResult, isGovernmentCompany} from '../../../model/Company'
 import {PartialReport} from '../ReportFlowContext'
-import {CompanyWebsiteVendor} from './CompanyWebsiteVendor'
 import {NoSearchResult} from './lib/NoSearchResult'
 
 interface Props {
@@ -21,46 +21,63 @@ interface Props {
 }
 
 interface Form {
-  result: string
+  siret: string
+  vendor?: string
 }
 
-export const CompanySearchResultComponent = ({companies, report: report, onSubmit}: Props) => {
+export const CompanySearchResultComponent = ({companies, report, onSubmit}: Props) => {
   const {m} = useI18n()
-  const [selected, setSelected] = useState<CompanySearchResult | undefined>()
-  useEffect(() => {
-    setSelected(undefined)
-  }, [companies])
   const {
     control,
     handleSubmit,
+    register,
+    watch,
     formState: {errors},
-  } = useForm<Form>()
-
+  } = useForm<Form>({
+    defaultValues: {},
+  })
   const toastError = useToastError()
+  const id = 'CompanySearchResult'
+  const onlyClosed = companies.findIndex(_ => _.isOpen) === -1
 
-  const submit = (selected: CompanySearchResult, vendor?: string) => {
-    onSubmit(selected, vendor)
+  function computeFormLogic(form: Partial<Form>) {
+    const siret = form.siret
+    const company = siret ? companies.find(_ => _.siret === siret) : undefined
+    const needVendor = company && company?.isMarketPlace
+    return {
+      company,
+      needVendor,
+    }
   }
 
-  const onlyClosed = companies.findIndex(_ => _.isOpen) === -1
+  const {company, needVendor} = computeFormLogic(watch())
 
   return (
     <>
       <Animate>
         <div>
           {companies.length === 0 ? (
-            <div id="CompanySearchResult">
+            <div {...{id}}>
               <NoSearchResult />
             </div>
           ) : (
-            <div id="CompanySearchResult" className="mb-4">
+            <div {...{id}} className="mb-4">
               <form
                 onSubmit={handleSubmit(form => {
-                  const selectedCompany = companies.find(_ => _.siret === form.result)!
-                  if (isGovernmentCompany(selectedCompany)) {
+                  const {company, needVendor} = computeFormLogic(form)
+                  if (!company) {
+                    throw new Error(`Company should not be selectable`)
+                  } else if (isGovernmentCompany(company)) {
                     toastError(m.cannotReportGovernmentCompany)
                   } else {
-                    selectedCompany.isMarketPlace ? setSelected(selectedCompany) : submit(selectedCompany)
+                    if (needVendor) {
+                      if (!form.vendor) {
+                        throw new Error(`Missing vendor field`)
+                      }
+                      onSubmit(company, form.vendor)
+                    } else {
+                      onSubmit(company)
+                    }
                   }
                 })}
               >
@@ -70,15 +87,15 @@ export const CompanySearchResultComponent = ({companies, report: report, onSubmi
                     rules={{
                       required: {value: true, message: m.required + ' *'},
                     }}
-                    name="result"
+                    name="siret"
                     render={({field}) => (
                       <>
                         <ScRadioButtons
                           {...field}
                           required
                           titleNoAutoAsterisk
-                          error={!!errors.result}
-                          errorMessage={errors.result?.message}
+                          error={!!errors.siret}
+                          errorMessage={errors.siret?.message}
                           options={companies.map(company => {
                             const closed = !company.isOpen
                             return {
@@ -103,13 +120,49 @@ export const CompanySearchResultComponent = ({companies, report: report, onSubmi
                     )}
                   />
                 </div>
-                <div className="flex justify-end">{!onlyClosed && <BtnNextSubmit />}</div>
+                {needVendor ? (
+                  <Animate>
+                    <div>
+                      <h2 className="text-lg">{m.companyWebsiteVendorTitle}</h2>
+                      <div className="mb-4">
+                        <ScAlert type="info">
+                          <p>{m.companyWebsiteVendorAlert}</p>
+                        </ScAlert>
+                        <ScTextInput
+                          label={m.companyWebsiteVendorLabel}
+                          error={!!errors.vendor}
+                          helperText={errors.vendor?.message ?? ''}
+                          {...register('vendor', {
+                            required: {value: true, message: m.required},
+                          })}
+                          required
+                        />
+                      </div>
+                      <NextBtn />
+                    </div>
+                  </Animate>
+                ) : (
+                  company && (
+                    <Animate>
+                      <div>
+                        <NextBtn />
+                      </div>
+                    </Animate>
+                  )
+                )}
               </form>
             </div>
           )}
         </div>
       </Animate>
-      {selected?.isMarketPlace && <CompanyWebsiteVendor onSubmit={vendor => submit(selected, vendor)} />}
     </>
   )
 }
+
+function NextBtn() {
+  return (
+    <div className="flex justify-end">
+      <BtnNextSubmit />
+    </div>
+  )
+}