(PC-31828)[PRO] fix: make sure subcat err callout is displayed in Det…

…ailsSubForm only when EAN search is displayed
pass-culture · Sep 17, 2024 · 0d34661 · 0d34661
1 parent fc0eb08
commit 0d34661
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 41 deletions.
diff --git a/pro/src/screens/IndividualOffer/DetailsScreen/DetailsEanSearch/DetailsEanSearch.tsx b/pro/src/screens/IndividualOffer/DetailsScreen/DetailsEanSearch/DetailsEanSearch.tsx
@@ -117,6 +117,7 @@ export const DetailsEanSearch = ({
 
         await setValues({
           ...values,
+          ean,
           name,
           description,
           categoryId,

diff --git a/pro/src/screens/IndividualOffer/DetailsScreen/DetailsForm.tsx b/pro/src/screens/IndividualOffer/DetailsScreen/DetailsForm.tsx
@@ -34,6 +34,8 @@ import { buildVenueOptions, isSubCategoryCDOrVinyl } from './utils'
 const DEBOUNCE_TIME_BEFORE_REQUEST = 400
 
 type DetailsFormProps = {
+  isEanSearchDisplayed: boolean
+  isProductBased: boolean
   filteredVenues: VenueListItemResponseModel[]
   filteredCategories: CategoryResponseModel[]
   filteredSubcategories: SubcategoryResponseModel[]
@@ -44,6 +46,8 @@ type DetailsFormProps = {
 }
 
 export const DetailsForm = ({
+  isEanSearchDisplayed,
+  isProductBased,
   filteredVenues,
   filteredCategories,
   filteredSubcategories,
@@ -60,14 +64,8 @@ export const DetailsForm = ({
   >([])
   const { values, setValues, handleChange } =
     useFormikContext<DetailsFormValues>()
-  const {
-    subcategoryId,
-    description,
-    venueId,
-    name,
-    suggestedSubcategory,
-    productId,
-  } = values
+  const { subcategoryId, description, venueId, name, suggestedSubcategory } =
+    values
   const { offer, subCategories } = useIndividualOfferContext()
 
   const venueOptions = buildVenueOptions(
@@ -139,13 +137,6 @@ export const DetailsForm = ({
   const showAddVenueBanner =
     !areSuggestedSubcategoriesUsed && venueOptions.length === 0
 
-  // (Draft) offers are created via POST request.
-  // On Details screen, the form might be pre-filled with a product,
-  // until the form is submitted, the draft offer is not created yet.
-  const isOfferProductBased = !!offer?.productId
-  const isNotAnOfferYetButProductBased = !offer && !!productId
-  const isProductBased = isOfferProductBased || isNotAnOfferYetButProductBased
-
   const isSuggestedSubcategoryDisplayed =
     areSuggestedSubcategoriesUsed && !offer && !isProductBased
 
@@ -271,6 +262,7 @@ export const DetailsForm = ({
             </FormLayout.Row>
           ) : (
             <DetailsSubForm
+              isEanSearchDisplayed={isEanSearchDisplayed}
               isProductBased={isProductBased}
               isOfferCDOrVinyl={isSubCategoryCDOrVinyl(subcategoryId)}
               readOnlyFields={readOnlyFields}

diff --git a/pro/src/screens/IndividualOffer/DetailsScreen/DetailsScreen.tsx b/pro/src/screens/IndividualOffer/DetailsScreen/DetailsScreen.tsx
@@ -186,7 +186,7 @@ export const DetailsScreen = ({ venues }: DetailsScreenProps): JSX.Element => {
   const isProductBased = isOfferProductBased || isNotAnOfferYetButProductBased
 
   const readOnlyFields = setFormReadOnlyFields(offer, isProductBased)
-  const shouldDisplayEanSearch =
+  const isEanSearchDisplayed =
     isSearchByEanEnabled && isRecordStore && mode === OFFER_WIZARD_MODE.CREATION
 
   return (
@@ -195,13 +195,15 @@ export const DetailsScreen = ({ venues }: DetailsScreenProps): JSX.Element => {
         <FormLayout fullWidthActions>
           <ScrollToFirstErrorAfterSubmit />
           <FormLayout.MandatoryInfo />
-          {shouldDisplayEanSearch && (
+          {isEanSearchDisplayed && (
             <DetailsEanSearch
               setImageOffer={setImageOffer}
               isOfferProductBased={isOfferProductBased}
             />
           )}
           <DetailsForm
+            isEanSearchDisplayed={isEanSearchDisplayed}
+            isProductBased={isProductBased}
             filteredVenues={filteredVenues}
             filteredCategories={filteredCategories}
             filteredSubcategories={filteredSubcategories}

diff --git a/pro/src/screens/IndividualOffer/DetailsScreen/DetailsSubForm/DetailsSubForm.spec.tsx b/pro/src/screens/IndividualOffer/DetailsScreen/DetailsSubForm/DetailsSubForm.spec.tsx
@@ -23,10 +23,14 @@ const contextValue: IndividualOfferContextValues = {
   setIsEvent: vi.fn(),
 }
 
-type RequiredProps = 'isProductBased' | 'isOfferCDOrVinyl'
+type RequiredProps =
+  | 'isEanSearchDisplayed'
+  | 'isProductBased'
+  | 'isOfferCDOrVinyl'
 type DetailsSubFormTestProps = Partial<Pick<DetailsSubFormProps, RequiredProps>>
 
 const DetailsSubFormWrappedWithFormik = ({
+  isEanSearchDisplayed = false,
   isProductBased = false,
   isOfferCDOrVinyl = false,
 }: DetailsSubFormTestProps) => {
@@ -41,6 +45,7 @@ const DetailsSubFormWrappedWithFormik = ({
   return (
     <FormikProvider value={formik}>
       <DetailsSubForm
+        isEanSearchDisplayed={isEanSearchDisplayed}
         isProductBased={isProductBased}
         isOfferCDOrVinyl={isOfferCDOrVinyl}
         readOnlyFields={[]}
@@ -57,7 +62,7 @@ const renderDetailsSubForm = ({
 }: {
   props?: DetailsSubFormTestProps
   enableEANSearch?: boolean
-}) => {
+} = {}) => {
   return renderWithProviders(
     <IndividualOfferContext.Provider value={contextValue}>
       <DetailsSubFormWrappedWithFormik {...props} />
@@ -66,9 +71,11 @@ const renderDetailsSubForm = ({
   )
 }
 
+const calloutLabel = /Cette catégorie nécessite un EAN./
+
 describe('DetailsSubForm', () => {
-  it('should display conditional fields based on the selected category', () => {
-    renderDetailsSubForm({})
+  it('should always display conditional fields based on the selected category / subcategory', () => {
+    renderDetailsSubForm()
 
     const subFormTextInputs = {
       speaker: /Intervenant/,
@@ -98,11 +105,14 @@ describe('DetailsSubForm', () => {
     expect(subFormDurationInput).toBeInTheDocument()
   })
 
-  describe('when the EAN search is available', () => {
-    describe('when the offer is product-based', () => {
+  describe('when EAN search is displayed', () => {
+    describe('when the offer is product based', () => {
       it('should not display the EAN field since it would duplicate top EAN search/input field', () => {
         renderDetailsSubForm({
-          props: { isProductBased: true },
+          props: {
+            isEanSearchDisplayed: true,
+            isProductBased: true,
+          },
           enableEANSearch: true,
         })
 
@@ -112,19 +122,25 @@ describe('DetailsSubForm', () => {
     })
 
     describe('when the offer is non-product based', () => {
-      it('should display a callout instead when the offer is a CD/vinyl', () => {
-        renderDetailsSubForm({
-          props: {
-            isProductBased: false,
-            isOfferCDOrVinyl: true,
-          },
-          enableEANSearch: true,
+      describe('when the offer is a CD/vinyl', () => {
+        it('should replace conditional fields with a subcategory related error callout', () => {
+          renderDetailsSubForm({
+            props: {
+              isEanSearchDisplayed: true,
+              isProductBased: false,
+              isOfferCDOrVinyl: true,
+            },
+            enableEANSearch: true,
+          })
+
+          const calloutWrapper = screen.getByRole('alert')
+          expect(calloutWrapper).toBeInTheDocument()
+          expect(calloutWrapper).toHaveTextContent(calloutLabel)
+
+          const anchorLink = screen.getByRole('link', { name: /EAN/ })
+          expect(anchorLink).toBeInTheDocument()
+          expect(anchorLink).toHaveAttribute('href', '#eanSearch')
         })
-
-        const calloutWrapper = screen.getByRole('alert')
-        const calloutLabel = /Cette catégorie nécessite un EAN./
-        expect(calloutWrapper).toBeInTheDocument()
-        expect(calloutWrapper).toHaveTextContent(calloutLabel)
       })
     })
   })

diff --git a/pro/src/screens/IndividualOffer/DetailsScreen/DetailsSubForm/DetailsSubForm.tsx b/pro/src/screens/IndividualOffer/DetailsScreen/DetailsSubForm/DetailsSubForm.tsx
@@ -10,7 +10,6 @@ import { ImageUploaderOffer } from 'components/IndividualOfferForm/ImageUploader
 import { GET_MUSIC_TYPES_QUERY_KEY } from 'config/swrQueryKeys'
 import { showOptionsTree } from 'core/Offers/categoriesSubTypes'
 import { IndividualOfferImage } from 'core/Offers/types'
-import { useActiveFeature } from 'hooks/useActiveFeature'
 import { Select } from 'ui-kit/form/Select/Select'
 import { TextInput } from 'ui-kit/form/TextInput/TextInput'
 import { TimePicker } from 'ui-kit/form/TimePicker/TimePicker'
@@ -34,6 +33,7 @@ export const ARTISTIC_INFORMATION_FIELDS = [
 ]
 
 export type DetailsSubFormProps = {
+  isEanSearchDisplayed: boolean
   isProductBased: boolean
   isOfferCDOrVinyl: boolean
   readOnlyFields: string[]
@@ -43,6 +43,7 @@ export type DetailsSubFormProps = {
 }
 
 export const DetailsSubForm = ({
+  isEanSearchDisplayed,
   isProductBased,
   isOfferCDOrVinyl,
   readOnlyFields,
@@ -53,8 +54,6 @@ export const DetailsSubForm = ({
   const {
     values: { categoryId, showType, subcategoryConditionalFields },
   } = useFormikContext<DetailsFormValues>()
-  const isSearchByEanEnabled = useActiveFeature('WIP_EAN_CREATION')
-
   const musicTypesQuery = useSWR(
     GET_MUSIC_TYPES_QUERY_KEY,
     () => api.getMusicTypes(),
@@ -78,7 +77,7 @@ export const DetailsSubForm = ({
   // product-based offers so the form must be pre-filled with
   // the results of an EAN search.
   const displayRedirectionCallout =
-    isSearchByEanEnabled && !isProductBased && isOfferCDOrVinyl
+    isEanSearchDisplayed && !isProductBased && isOfferCDOrVinyl
   const displayImageUploader = !isProductBased || imageOffer
   const displayArtisticInformations = ARTISTIC_INFORMATION_FIELDS.some(
     (field) => subcategoryConditionalFields.includes(field)
@@ -92,7 +91,7 @@ export const DetailsSubForm = ({
             className={styles.callout}
             links={[
               {
-                href: '#ean',
+                href: '#eanSearch',
                 label: 'Scanner ou rechercher un produit par EAN',
                 isSectionLink: true,
               },