MEP (TRELLO-2379: company smart search)

website/package.json

@@ -27,7 +27,7 @@
   },
   "heroku-run-build-script": true,
   "dependencies": {
-    "@codegouvfr/react-dsfr": "^1.9.14",
+    "@codegouvfr/react-dsfr": "^1.11.2",
     "@emotion/cache": "11.11.0",
     "@emotion/react": "11.11.4",
     "@emotion/server": "11.11.0",

website/src/clients/CompanyPublicClient.ts

@@ -1,6 +1,6 @@
 import {appConfig} from '@/core/appConfig'
-import {BaseApiClient} from './BaseApiClient'
 import {CompanySearchResult} from '../model/Company'
+import {BaseApiClient} from './BaseApiClient'
 
 export class CompanyPublicClient {
   private client = new BaseApiClient({
@@ -11,6 +11,17 @@ export class CompanyPublicClient {
     },
   })
 
+  readonly searchSmart = (q: string, postalCode: string | undefined, departmentCode: string | undefined, lang: string) => {
+    return this.client.get<CompanySearchResult[]>(`/companies/search/smart`, {
+      qs: {
+        q,
+        ...(postalCode ? {postalCode} : null),
+        ...(departmentCode ? {departmentCode} : null),
+        lang,
+      },
+    })
+  }
+
   readonly searchCompaniesByNameAndPostalCode = (search: string, searchPostalCode: string, lang: string) => {
     return this.client.get<CompanySearchResult[]>(`/companies/search`, {
       qs: {

website/src/components_feature/playgroundComponents/PlaygroundOther.tsx

@@ -11,7 +11,7 @@ import {useState} from 'react'
 import {useForm} from 'react-hook-form'
 import {AccordionInline} from '../../components_simple/AccordionInline'
 import {SocialNetworkRow} from '../../components_simple/SocialNetworkRow'
-import {ScCheckbox} from '../../components_simple/formInputs/ScCheckbox'
+import {ScCheckboxes} from '../../components_simple/formInputs/ScCheckboxes'
 import {ScRadioButtons} from '../../components_simple/formInputs/ScRadioButtons'
 import {useI18n} from '../../i18n/I18n'
 import {DetailsSpecifyInput} from '../reportFlow/Details/DetailsSpecifyInput'
@@ -137,7 +137,7 @@ export const PlaygroundOther = () => {
       <p>Radio value: {radioValue}</p>
       <p>Specifiy value: {specifiyValue}</p>
 
-      <ScCheckbox
+      <ScCheckboxes
         title="Test Check"
         description="une check"
         onChange={setCheckValue}

website/src/components_feature/playgroundComponents/PlaygroundPage.tsx

@@ -6,7 +6,7 @@ import {PlaygroundConfirmation, dummyStepNavigation} from '@/components_feature/
 import {PlaygroundConsumer} from '@/components_feature/playgroundComponents/PlaygroundConsumer'
 import {PlaygroundDetails} from '@/components_feature/playgroundComponents/PlaygroundDetails'
 import {PlaygroundOther} from '@/components_feature/playgroundComponents/PlaygroundOther'
-import {ContentPageContainer} from '@/components_simple/PageContainers'
+import {LimitedWidthPageContainer} from '@/components_simple/PageContainers'
 
 import {BarcodeProduct} from '@/model/BarcodeProduct'
 import {CompanySearchResult} from '@/model/Company'
@@ -242,9 +242,8 @@ const Playground = () => {
   }
 
   return (
-    <ContentPageContainer>
+    <LimitedWidthPageContainer>
       <h1 className="fr-h2">Playground</h1>
-
       {!testCase ? (
         <div>
           <p>
@@ -274,7 +273,7 @@ const Playground = () => {
           {renderComponent()}
         </>
       )}
-    </ContentPageContainer>
+    </LimitedWidthPageContainer>
   )
 }
 

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

@@ -4,8 +4,9 @@ import {CompanyByTrain} from '@/components_feature/reportFlow/Company/CompanyByT
 import {CompanySearchByName} from '@/components_feature/reportFlow/Company/CompanySearchByName'
 import {NoSearchResult} from '@/components_feature/reportFlow/Company/lib/NoSearchResult'
 import {ScRadioButtons} from '@/components_simple/formInputs/ScRadioButtons'
+import {appConfig} from '@/core/appConfig'
 import {Loader} from '@/feature/Loader'
-import {getCompanyKind, hasStep0, hasStep1Full, hasStep2} from '@/feature/reportUtils'
+import {getCompanyKind, hasStep0, hasStep1Full, hasStep2, isTransmittableToPro} from '@/feature/reportUtils'
 import {useBarcodeSearch} from '@/hooks/barcode'
 import {Report} from '@/model/Report'
 import {CommonCompanyIdentification, Step2Model} from '@/model/Step2Model'
@@ -26,6 +27,7 @@ import {CompanySearchByBarcode} from './CompanySearchByBarcode'
 import {CompanySearchByIdentifier} from './CompanySearchByIdentifier'
 import {CompanySearchByNameAndPostalCode} from './CompanySearchByNameAndPostalCode'
 import {CompanySearchResultComponent} from './CompanySearchResultComponent'
+import {CompanySmartIdentification} from './CompanySmartIdentification/CompanySmartIdentification'
 import {CompanyWebsiteCountry} from './CompanyWebsiteCountry'
 import {InfluencerBySocialNetwork} from './InfluencerBySocialNetwork'
 import {InfluencerFilled} from './InfluencerFilled'
@@ -225,9 +227,7 @@ function CompanyIdentificationTree({
   onIdentification: (_: CommonCompanyIdentification) => void
 }) {
   const companyKind = getCompanyKind(draft)
-  if (!companyKind) {
-    throw new Error('The draft should have a companyKind already')
-  }
+  const reportTransmittableToPro = isTransmittableToPro(draft)
   return searchResults && searchResults.length > 0 ? (
     <CompanySearchResultComponent
       companies={searchResults}
@@ -247,6 +247,8 @@ function CompanyIdentificationTree({
         )
       }}
     />
+  ) : appConfig.useNewCompanySearch ? (
+    <CompanySmartIdentification {...{draft, onIdentification}} />
   ) : (
     <CompanyChooseIdentificationMethod {...{companyKind}}>
       {method => {
@@ -335,7 +337,7 @@ function CompanyIdentificationTree({
                     case IsAFrenchCompany.No:
                       return (
                         <CompanyAskForeignDetails
-                          {...{companyKind}}
+                          {...{companyKind, reportTransmittableToPro}}
                           onSubmit={({name, postalCode, country: {code}}) => {
                             onIdentification({
                               kind: 'foreignCompany',

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

@@ -5,8 +5,6 @@ import {ScAutocompletePostcode} from '@/components_simple/formInputs/ScAutocompl
 import {useI18n} from '@/i18n/I18n'
 import {Controller, useForm} from 'react-hook-form'
 import {CompanyKind} from 'shared/anomalies/Anomaly'
-import {ScAlert} from '../../../components_simple/ScAlert'
-import {fnSwitch} from '../../../utils/FnSwitch'
 
 interface Form {
   postalCode: string
@@ -29,29 +27,6 @@ export const CompanyAskConsumerPostalCode = ({value, onChange, companyKind}: Pro
   return (
     <Animate>
       <div id="CompanyAskConsumerPostalCode">
-        <hr />
-        <ScAlert type="info">
-          <p
-            className="mb-0"
-            dangerouslySetInnerHTML={{
-              __html: fnSwitch<CompanyKind, string>(companyKind, {
-                SIRET: m.cantIdentifyCompany,
-                WEBSITE: m.cantIdentifyWebsiteCompany,
-                TRANSPORTER_WEBSITE: m.cantIdentifyTransporterWebsiteCompany,
-                MERCHANT_WEBSITE: m.cantIdentifyMerchantWebsiteCompany,
-                PHONE: m.cantIdentifyPhoneCompany,
-                LOCATION: m.cantIdentifyLocationCompany,
-                SOCIAL: m.cantIdentifyCompany,
-                PRODUCT: m.cantIdentifyCompany,
-                PRODUCT_POINT_OF_SALE: m.cantIdentifyCompany,
-                PRODUCT_OPENFF: m.cantIdentifyCompany,
-                PRODUCT_RAPPEL_CONSO: m.cantIdentifyCompany,
-                TRAIN: m.cantIdentifyCompany,
-                STATION: m.cantIdentifyCompany,
-              }),
-            }}
-          />
-        </ScAlert>
         <RequiredFieldsLegend />
         <form onSubmit={handleSubmit(_ => onChange(_.postalCode))}>
           <Controller
@@ -69,6 +44,7 @@ export const CompanyAskConsumerPostalCode = ({value, onChange, companyKind}: Pro
               />
             )}
           />
+          <p className="mb-2">{m.cantIdentifyCompany}</p>
 
           <div className="flex justify-end">
             <BtnNextSubmit />

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

@@ -5,7 +5,6 @@ import {ScAutocompletePostcode} from '@/components_simple/formInputs/ScAutocompl
 import {ScTextInput} from '@/components_simple/formInputs/ScTextInput'
 import {useI18n} from '@/i18n/I18n'
 import {Controller, useForm} from 'react-hook-form'
-import {ScAlert} from '../../../components_simple/ScAlert'
 
 interface Form {
   street: string
@@ -28,9 +27,6 @@ export const CompanyAskConsumerStreet = ({onChange}: Props) => {
   return (
     <Animate>
       <div id="CompanyAskConsumerStreet">
-        <ScAlert type="info">
-          <p className="mb-0 text-sm" dangerouslySetInnerHTML={{__html: m.cantIdentifyLocationCompany}} />
-        </ScAlert>
         <RequiredFieldsLegend />
         <form
           onSubmit={handleSubmit(form =>
@@ -49,7 +45,7 @@ export const CompanyAskConsumerStreet = ({onChange}: Props) => {
               })}
               required
               error={!!errors.street}
-              helperText={(errors.street as any)?.message ?? ''}
+              helperText={errors.street?.message ?? ''}
               placeholder={m.yourStreetPlaceholder}
             />
             <Controller
@@ -68,7 +64,7 @@ export const CompanyAskConsumerStreet = ({onChange}: Props) => {
               )}
             />
           </div>
-
+          <p className="mb-2" dangerouslySetInnerHTML={{__html: m.cantIdentifyLocationCompany}} />
           <div className="flex justify-end">
             <BtnNextSubmit />
           </div>

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

@@ -6,10 +6,8 @@ import {ScAutocompletePostcode} from '@/components_simple/formInputs/ScAutocompl
 import {ScTextInput} from '@/components_simple/formInputs/ScTextInput'
 import {useI18n} from '@/i18n/I18n'
 import {Controller, useForm} from 'react-hook-form'
-import {CompanyKind} from 'shared/anomalies/Anomaly'
 import {ScAlert} from '../../../components_simple/ScAlert'
 import {Country} from '../../../model/Country'
-import {fnSwitch} from '../../../utils/FnSwitch'
 
 interface Form {
   name: string
@@ -19,7 +17,7 @@ interface Form {
 
 interface Props {
   onSubmit: (form: Form) => void
-  companyKind: CompanyKind
+  reportTransmittableToPro: boolean
 }
 
 export const countryToFlag = (isoCode: string) => {
@@ -28,7 +26,7 @@ export const countryToFlag = (isoCode: string) => {
     : isoCode
 }
 
-export const CompanyAskForeignDetails = ({onSubmit, companyKind}: Props) => {
+export const CompanyAskForeignDetails = ({onSubmit, reportTransmittableToPro}: Props) => {
   const {m} = useI18n()
   const {
     control,
@@ -40,12 +38,20 @@ export const CompanyAskForeignDetails = ({onSubmit, companyKind}: Props) => {
   return (
     <Animate>
       <div id="CompanyAskForeignDetails">
-        <ScAlert type="warning">
-          <p dangerouslySetInnerHTML={{__html: m.reportAbroadWarning}} />
-          <p className="mb-0" dangerouslySetInnerHTML={{__html: m.reportAbroadAdvice}} />
-        </ScAlert>
-        <h2 className="!text-lg">{m.couldYouPrecise}</h2>
-
+        <div className="mb-8">
+          <ScAlert type="info">
+            <p
+              className="mb-4"
+              dangerouslySetInnerHTML={{__html: reportTransmittableToPro ? m.reportAbroad1 : m.reportAbroad1NonTransmittable}}
+            />
+            <p className="mb-4" dangerouslySetInnerHTML={{__html: m.reportAbroad2}} />
+            <p className="mb-0" dangerouslySetInnerHTML={{__html: m.reportAbroad3}} />
+            <ul>
+              <li dangerouslySetInnerHTML={{__html: m.reportAbroad4}}></li>
+              <li dangerouslySetInnerHTML={{__html: m.reportAbroad5}}></li>
+            </ul>
+          </ScAlert>
+        </div>
         <RequiredFieldsLegend />
         <form onSubmit={handleSubmit(onSubmit)}>
           <div>
@@ -69,29 +75,7 @@ export const CompanyAskForeignDetails = ({onSubmit, companyKind}: Props) => {
                 return <ScAutocompleteCountry {...{onChange, onBlur, name, value}} error={!!error} helperText={error?.message} />
               }}
             />
-            <br />
-            <ScAlert type="info">
-              <p
-                className="mb-0"
-                dangerouslySetInnerHTML={{
-                  __html: fnSwitch<CompanyKind, string>(companyKind, {
-                    SIRET: m.cantIdentifyCompany,
-                    WEBSITE: m.cantIdentifyWebsiteCompany,
-                    TRANSPORTER_WEBSITE: m.cantIdentifyTransporterWebsiteCompany,
-                    MERCHANT_WEBSITE: m.cantIdentifyMerchantWebsiteCompany,
-                    PHONE: m.cantIdentifyPhoneCompany,
-                    LOCATION: m.cantIdentifyLocationCompany,
-                    SOCIAL: m.cantIdentifyCompany,
-                    PRODUCT: m.cantIdentifyCompany,
-                    PRODUCT_POINT_OF_SALE: m.cantIdentifyCompany,
-                    PRODUCT_OPENFF: m.cantIdentifyCompany,
-                    PRODUCT_RAPPEL_CONSO: m.cantIdentifyCompany,
-                    TRAIN: m.cantIdentifyCompany,
-                    STATION: m.cantIdentifyCompany,
-                  }),
-                }}
-              />
-            </ScAlert>
+            <p className="mb-2 text-sm">{m.cantIdentifyCompany}</p>
             <Controller
               control={control}
               name="postalCode"

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

@@ -43,7 +43,7 @@ export const CompanyByPhone = ({children}: Props) => {
     <>
       <Animate>
         <div id="CompanyByPhone">
-          <h2 className="fr-h6">{m.aboutCompany}</h2>
+          <h2 className="fr-h6 !mb-2">{m.aboutCompany}</h2>
           <div>
             <RequiredFieldsLegend />
             <form onSubmit={handleSubmit(submit)}>

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

@@ -1,4 +1,3 @@
-import {useAnalyticContext} from '@/analytic/AnalyticContext'
 import {Animate} from '@/components_simple/Animate'
 import {BtnNextSubmit} from '@/components_simple/buttons/Buttons'
 import {CompanyRecapFromSearchResult} from '@/components_simple/CompanyRecap/CompanyRecap'
@@ -27,7 +26,6 @@ interface Form {
 
 export const CompanySearchResultComponent = ({companies, report: report, onSubmit}: Props) => {
   const {m} = useI18n()
-  const _analytic = useAnalyticContext()
   const [selected, setSelected] = useState<CompanySearchResult | undefined>()
   useEffect(() => {
     setSelected(undefined)
@@ -49,13 +47,13 @@ export const CompanySearchResultComponent = ({companies, report: report, onSubmi
   return (
     <>
       <Animate>
-        <div className="mt-6 pt-10 border-t-[1px] border-0 border-solid border-gray-200">
+        <div>
           {companies.length === 0 ? (
             <div id="CompanySearchResult">
-              <NoSearchResult text={m.noMatchingCompany} />
+              <NoSearchResult />
             </div>
           ) : (
-            <div id="CompanySearchResult">
+            <div id="CompanySearchResult" className="mb-4">
               <form
                 onSubmit={handleSubmit(form => {
                   const selectedCompany = companies.find(_ => _.siret === form.result)!

website/src/components_feature/reportFlow/Company/CompanySmartIdentification/CannotFindCompanyWarning.tsx

@@ -0,0 +1,45 @@
+import {Animate} from '@/components_simple/Animate'
+import {FriendlyHelpText} from '@/components_simple/FriendlyHelpText'
+import {useI18n} from '@/i18n/I18n'
+import Button from '@codegouvfr/react-dsfr/Button'
+import Link from 'next/link'
+
+export function CannotFindCompanyWarning({
+  onCancel,
+  onContinue,
+  reportTransmittableToPro,
+}: {
+  onCancel: () => void
+  onContinue: () => void
+  reportTransmittableToPro: boolean
+}) {
+  const {m} = useI18n()
+  return (
+    <Animate autoScrollTo>
+      <div>
+        <FriendlyHelpText>
+          <p>
+            <strong>{m.cannotFindWarning.moreEfficient}</strong>
+            {reportTransmittableToPro && <> {m.cannotFindWarning.contactCompany}</>}
+          </p>
+          <p>
+            {m.cannotFindWarning.youCanUse}{' '}
+            <Link href={'https://annuaire-entreprises.data.gouv.fr/'} target="_blank">
+              {m.cannotFindWarning.annuaireDesEntreprises}
+            </Link>
+            .
+          </p>
+          <p>{m.cannotFindWarning.youCanContinue}</p>
+          <div className="flex gap-4 justify-between">
+            <Button priority="secondary" iconId="ri-arrow-left-line" onClick={onCancel}>
+              {m.cannotFindWarning.iTryHarder}
+            </Button>
+            <Button priority="secondary" iconId="ri-arrow-right-line" iconPosition="right" onClick={onContinue}>
+              {m.cannotFindWarning.iReallyCant}
+            </Button>
+          </div>
+        </FriendlyHelpText>
+      </div>
+    </Animate>
+  )
+}