(BSR)[PRO] feat: details search ean react hook form migration

pass-culture · Feb 4, 2025 · 09febe8 · 09febe8
1 parent 7d3c296
commit 09febe8
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 114 deletions.
diff --git a/...dualOffer/IndividualOfferDetails/components/DetailsEanSearch/DetailsEanSearch.module.scss b/...dualOffer/IndividualOfferDetails/components/DetailsEanSearch/DetailsEanSearch.module.scss
@@ -6,50 +6,12 @@ $icon-size: rem.torem(20px);
 
 .details-ean-search {
   margin-bottom: rem.torem(32px);
-
-  &-form {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &-label label {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  &-button {
-    height: rem.torem(40px);
-    margin-top: rem.torem(24px);
-  }
-
+
   &-callout {
     margin-top: rem.torem(16px);
   }
-
-  @media (min-width: size.$tablet) {
-    &-form {
-      flex-direction: row;
-      align-items: center;
-    }
-
-    &-label {
-      position: relative;
-    }
-
-    &-tag {
-      position: absolute;
-      top: 0;
-      left: calc(100% + rem.torem(16px));
-    }
-
-    &-button {
-      margin-top: rem.torem(45px);
-      margin-left: rem.torem(24px);
-    }
-  }
 }
-
+ 
 .input-container {
   position: relative;
 }
@@ -64,8 +26,8 @@ $icon-size: rem.torem(20px);
   &-container {
     position: absolute;
     border-radius: 50%;
-    top: rem.torem(64px);
-    right: rem.torem(14px);
+    top: rem.torem(65px);
+    right: rem.torem(160px);
   }
 
   &:focus {

diff --git a/...ividualOffer/IndividualOfferDetails/components/DetailsEanSearch/DetailsEanSearch.spec.tsx b/...ividualOffer/IndividualOfferDetails/components/DetailsEanSearch/DetailsEanSearch.spec.tsx
@@ -1,6 +1,5 @@
 import { screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
-import { FormikProvider, useFormik } from 'formik'
 
 import { api } from 'apiClient/api'
 import {
@@ -51,14 +50,6 @@ const EanSearchWrappedWithFormik = ({
   onEanSearch = vi.fn(),
   onEanReset = vi.fn(),
 }: DetailsEanSearchTestProps): JSX.Element => {
-  const formik = useFormik({
-    initialValues: {
-      ...DEFAULT_DETAILS_FORM_VALUES,
-      subcategoryId,
-    },
-    onSubmit: vi.fn(),
-  })
-
   const hasCompleteValues =
     !isDirtyDraftOffer || wasEanSearchPerformedSuccessfully
   const mockedSubCategoryId = hasCompleteValues
@@ -67,17 +58,15 @@ const EanSearchWrappedWithFormik = ({
   const mockedProductId = hasCompleteValues ? '0000' : productId
 
   return (
-    <FormikProvider value={formik}>
-      <DetailsEanSearch
-        isDirtyDraftOffer={isDirtyDraftOffer}
-        productId={mockedProductId}
-        subcategoryId={mockedSubCategoryId}
-        initialEan={initialEan}
-        eanSubmitError={eanSubmitError}
-        onEanSearch={onEanSearch}
-        onEanReset={onEanReset}
-      />
-    </FormikProvider>
+    <DetailsEanSearch
+      isDirtyDraftOffer={isDirtyDraftOffer}
+      productId={mockedProductId}
+      subcategoryId={mockedSubCategoryId}
+      initialEan={initialEan}
+      eanSubmitError={eanSubmitError}
+      onEanSearch={onEanSearch}
+      onEanReset={onEanReset}
+    />
   )
 }
 

diff --git a/...s/IndividualOffer/IndividualOfferDetails/components/DetailsEanSearch/DetailsEanSearch.tsx b/...s/IndividualOffer/IndividualOfferDetails/components/DetailsEanSearch/DetailsEanSearch.tsx
@@ -45,6 +45,7 @@ export const DetailsEanSearch = ({
   const tooltipId = useId()
   const selectedOffererId = useSelector(selectCurrentOffererId)
   const [wasCleared, setWasCleared] = useState(false)
+  const [subcatError, setSubcatError] = useState<string | null>(null)
 
   const isProductBased = !!productId
   const isDirtyDraftOfferProductBased = isDirtyDraftOffer && isProductBased
@@ -61,7 +62,7 @@ export const DetailsEanSearch = ({
   } = useForm<EanSearchForm>({
     defaultValues: { eanSearch: initialEan || '' },
     resolver: yupResolver(eanSearchValidationSchema),
-    mode: 'onBlur',
+    mode: 'onChange',
   })
 
   const ean = watch('eanSearch', '')
@@ -74,12 +75,20 @@ export const DetailsEanSearch = ({
   }, [wasCleared, setFocus])
 
   useEffect(() => {
-    if (isDirtyDraftOfferNotProductBased && isSubCategoryCD(subcategoryId)) {
+    if (eanSubmitError) {
       setError('eanSearch', {
-        type: 'subCatError',
-        message: 'Les offres de type CD doivent être liées à un produit.',
+        type: 'apiError',
+        message: eanSubmitError,
       })
     }
+  }, [eanSubmitError, setError])
+
+  useEffect(() => {
+    if (isDirtyDraftOfferNotProductBased && isSubCategoryCD(subcategoryId)) {
+      setSubcatError('Les offres de type CD doivent être liées à un produit.')
+    } else {
+      setSubcatError(null)
+    }
   }, [isDirtyDraftOfferNotProductBased, subcategoryId, setError])
 
   const onSearch = async (data: EanSearchForm) => {
@@ -111,66 +120,69 @@ export const DetailsEanSearch = ({
     setWasCleared(true)
   }
 
-  const apiError = eanSubmitError || errors.eanSearch?.message
+  const apiError = errors.eanSearch?.type === 'apiError'
   const shouldInputBeDisabled = isProductBased || isLoading
-  const shouldInputBeRequired = errors.eanSearch?.type !== 'subCatError'
+  const shouldInputBeRequired = !!subcatError
 
   const shouldButtonBeDisabled =
     isProductBased || !ean || !isValid || !!apiError || isLoading
   const displayClearButton = isDirtyDraftOfferProductBased
 
+  const cumulativeError = subcatError
+    ? `${subcatError}\n${errors.eanSearch?.message || ''}`
+    : errors.eanSearch?.message || ''
+
   return (
     <form onSubmit={handleSubmit(onSearch)}>
       <FormLayout fullWidthActions>
         <div className={styles['details-ean-search']}>
-          <div className={styles['details-ean-search-form']}>
-            <div className={styles['input-container']}>
-              <TextInput
-                label={'Scanner ou rechercher un produit par EAN'}
-                error={errors.eanSearch?.message}
-                disabled={shouldInputBeDisabled}
-                required={shouldInputBeRequired}
-                maxLength={13}
-                description="Format : EAN à 13 chiffres"
-                {...(!displayClearButton && {
-                  rightIcon: strokeBarcode,
-                })}
-                {...register('eanSearch')}
-                count={ean?.length}
-              />
-              {displayClearButton && (
-                <div className={styles['clear-button-container']}>
-                  <Button
-                    onClick={onEanClear}
-                    aria-describedby={tooltipId}
-                    className={styles['clear-button']}
-                    hasTooltip={true}
-                    type="button"
-                    icon={fullCloseIcon}
-                    variant={ButtonVariant.TERNARY}
-                  >
-                    Effacer
-                  </Button>
-                </div>
-              )}
-            </div>
-
-            <Button
-              type="submit"
-              className={styles['details-ean-search-button']}
-              disabled={shouldButtonBeDisabled}
-            >
-              Rechercher
-            </Button>
-          </div>
-          <div role="status" className={styles['details-ean-search-callout']}>
-            {isProductBased && (
-              <EanSearchCallout
-                isDirtyDraftOfferProductBased={isDirtyDraftOfferProductBased}
-              />
+          <div className={styles['input-container']}>
+            <TextInput
+              label={'Scanner ou rechercher un produit par EAN'}
+              error={cumulativeError}
+              disabled={shouldInputBeDisabled}
+              required={shouldInputBeRequired}
+              maxLength={13}
+              description="Format : EAN à 13 chiffres"
+              {...(!displayClearButton && {
+                rightIcon: strokeBarcode,
+              })}
+              {...register('eanSearch')}
+              count={ean?.length}
+              InputExtension={
+                <Button
+                  type="submit"
+                  className={styles['details-ean-search-button']}
+                  disabled={shouldButtonBeDisabled}
+                >
+                  Rechercher
+                </Button>
+              }
+            />
+            {displayClearButton && (
+              <div className={styles['clear-button-container']}>
+                <Button
+                  onClick={onEanClear}
+                  aria-describedby={tooltipId}
+                  className={styles['clear-button']}
+                  hasTooltip={true}
+                  type="button"
+                  icon={fullCloseIcon}
+                  variant={ButtonVariant.TERNARY}
+                >
+                  Effacer
+                </Button>
+              </div>
             )}
           </div>
         </div>
+        <div role="status" className={styles['details-ean-search-callout']}>
+          {isProductBased && (
+            <EanSearchCallout
+              isDirtyDraftOfferProductBased={isDirtyDraftOfferProductBased}
+            />
+          )}
+        </div>
       </FormLayout>
     </form>
   )

diff --git a/...s/IndividualOffer/IndividualOfferDetails/components/IndividualOfferDetailsScreen.spec.tsx b/...s/IndividualOffer/IndividualOfferDetails/components/IndividualOfferDetailsScreen.spec.tsx
@@ -716,7 +716,7 @@ describe('IndividualOfferDetails', () => {
   describe('on creation', () => {
     describe('about EAN search', () => {
       const eanSearchTitle = /Scanner ou rechercher un produit par EAN/
-      const eanInputLabel = /Nouveau Scanner ou rechercher un produit par EAN/
+      const eanInputLabel = /Scanner ou rechercher un produit par EAN/
       const eanSearchButtonLabel = /Rechercher/
       const eanResetButtonLabel = /Effacer/