(PC-31863)[PRO] fix: stop displaying EAN search when draft offer is c…

…reated but not product based
pass-culture · Sep 17, 2024 · f29c8d7 · f29c8d7
1 parent 0d34661
commit f29c8d7
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 53 deletions.
diff --git a/pro/src/screens/IndividualOffer/DetailsScreen/DetailsScreen.tsx b/pro/src/screens/IndividualOffer/DetailsScreen/DetailsScreen.tsx
@@ -181,13 +181,17 @@ export const DetailsScreen = ({ venues }: DetailsScreenProps): JSX.Element => {
   // (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 isOfferProductBased = !!offer && !!offer.productId
+  const isOfferButNotProductBased = !!offer && !offer.productId
   const isNotAnOfferYetButProductBased = !offer && !!formik.values.productId
   const isProductBased = isOfferProductBased || isNotAnOfferYetButProductBased
 
   const readOnlyFields = setFormReadOnlyFields(offer, isProductBased)
   const isEanSearchDisplayed =
-    isSearchByEanEnabled && isRecordStore && mode === OFFER_WIZARD_MODE.CREATION
+    isSearchByEanEnabled &&
+    isRecordStore &&
+    mode === OFFER_WIZARD_MODE.CREATION &&
+    !isOfferButNotProductBased
 
   return (
     <FormikProvider value={formik}>

diff --git a/pro/src/screens/IndividualOffer/DetailsScreen/__specs__/DetailsScreen.spec.tsx b/pro/src/screens/IndividualOffer/DetailsScreen/__specs__/DetailsScreen.spec.tsx
@@ -698,61 +698,119 @@ describe('screens:IndividualOffer::Informations', () => {
         expect(screen.queryByText(eanSearchTitle)).not.toBeInTheDocument()
       })
 
-      it('should prefill the form with EAN search result', async () => {
-        const ean = '9781234567897'
-        const productData = {
-          id: 0,
-          name: 'Music has the right to children',
-          description: 'An album by Boards of Canada',
-          subcategoryId: 'SUPPORT_PHYSIQUE_MUSIQUE_VINYLE',
-          gtlId: '08000000',
-          author: 'Boards of Canada',
-          performer: 'Boards of Canada',
-          images: {
-            recto: 'https://www.example.com/image.jpg',
-          },
-        }
-
-        const context = individualOfferContextValuesFactory({
-          categories,
-          subCategories,
-          offer: null,
+      describe('when a local draft offer is being created', () => {
+        it('should prefill the form with EAN search result', async () => {
+          const ean = '9781234567897'
+          const productData = {
+            id: 0,
+            name: 'Music has the right to children',
+            description: 'An album by Boards of Canada',
+            subcategoryId: 'SUPPORT_PHYSIQUE_MUSIQUE_VINYLE',
+            gtlId: '08000000',
+            author: 'Boards of Canada',
+            performer: 'Boards of Canada',
+            images: {
+              recto: 'https://www.example.com/image.jpg',
+            },
+          }
+
+          const context = individualOfferContextValuesFactory({
+            categories,
+            subCategories,
+            offer: null,
+          })
+
+          vi.spyOn(api, 'getProductByEan').mockResolvedValue(productData)
+          renderDetailsScreen(
+            {
+              ...props,
+              venues: [
+                venueListItemFactory({
+                  venueTypeCode: 'RECORD_STORE' as VenueTypeCode,
+                }),
+              ],
+            },
+            context,
+            { features: ['WIP_EAN_CREATION'] }
+          )
+
+          const button = screen.getByRole('button', { name: eanButtonLabel })
+          const input = screen.getByRole('textbox', { name: eanInputLabel })
+
+          await userEvent.type(input, ean)
+          await userEvent.click(button)
+
+          // Inputs are filled with the product data and image is displayed.
+          const nameInputLabel = /Titre de l’offre/
+          const inputName = screen.getByRole('textbox', {
+            name: nameInputLabel,
+          })
+          const image = screen.getByTestId('image-preview')
+          expect(inputName).toHaveValue(productData.name)
+          expect(image).toHaveAttribute('src', productData.images.recto)
+
+          // Inputs are disabled and image cannot be changed.
+          expect(inputName).toBeDisabled()
+          const imageEditLabel = /Ajouter une image/
+          const imageEditButton = screen.queryByRole('button', {
+            name: imageEditLabel,
+          })
+          expect(imageEditButton).not.toBeInTheDocument()
         })
+      })
 
-        vi.spyOn(api, 'getProductByEan').mockResolvedValue(productData)
-        renderDetailsScreen(
-          {
-            ...props,
-            venues: [
-              venueListItemFactory({
-                venueTypeCode: 'RECORD_STORE' as VenueTypeCode,
-              }),
-            ],
-          },
-          context,
-          { features: ['WIP_EAN_CREATION'] }
-        )
-
-        const button = screen.getByRole('button', { name: eanButtonLabel })
-        const input = screen.getByRole('textbox', { name: eanInputLabel })
-
-        await userEvent.type(input, ean)
-        await userEvent.click(button)
-
-        // Inputs are filled with the product data and image is displayed.
-        const nameInputLabel = /Titre de l’offre/
-        const inputName = screen.getByRole('textbox', { name: nameInputLabel })
-        const image = screen.getByTestId('image-preview')
-        expect(inputName).toHaveValue(productData.name)
-        expect(image).toHaveAttribute('src', productData.images.recto)
+      describe('when the draft offer being created is no longer local but posted', () => {
+        it('should render EAN search when the draft offer is product-based', () => {
+          const context = individualOfferContextValuesFactory({
+            categories,
+            subCategories,
+            offer: getIndividualOfferFactory({
+              subcategoryId:
+                'SUPPORT_PHYSIQUE_MUSIQUE_VINYLE' as SubcategoryIdEnum,
+              productId: 1,
+            }),
+          })
+
+          renderDetailsScreen(
+            {
+              ...props,
+              venues: [
+                venueListItemFactory({
+                  venueTypeCode: 'RECORD_STORE' as VenueTypeCode,
+                }),
+              ],
+            },
+            context,
+            { features: ['WIP_EAN_CREATION'] }
+          )
+
+          expect(screen.getByText(eanSearchTitle)).toBeInTheDocument()
+        })
 
-        // Inputs are disabled and image cannot be changed.
-        expect(inputName).toBeDisabled()
-        const imageEditLabel = /Ajouter une image/
-        const imageEditButton = screen.queryByRole('button', {
-          name: imageEditLabel,
+        it('should not render EAN search when the draft offer is non product-based', () => {
+          const context = individualOfferContextValuesFactory({
+            categories,
+            subCategories,
+            offer: getIndividualOfferFactory({
+              subcategoryId: 'physical' as SubcategoryIdEnum,
+            }),
+          })
+
+          renderDetailsScreen(
+            {
+              ...props,
+              venues: [
+                venueListItemFactory({
+                  venueTypeCode: 'RECORD_STORE' as VenueTypeCode,
+                }),
+              ],
+            },
+            context,
+            { features: ['WIP_EAN_CREATION'] }
+          )
+
+          expect(screen.queryByText(eanSearchTitle)).not.toBeInTheDocument()
         })
-        expect(imageEditButton).not.toBeInTheDocument()
       })
     })
   })