From f29c8d766e34084250b6f5162ea19d0e6ee9e3e1 Mon Sep 17 00:00:00 2001 From: Andrea Saez Date: Tue, 17 Sep 2024 09:57:15 +0200 Subject: [PATCH] (PC-31863)[PRO] fix: stop displaying EAN search when draft offer is created but not product based --- .../DetailsScreen/DetailsScreen.tsx | 8 +- .../__specs__/DetailsScreen.spec.tsx | 160 ++++++++++++------ 2 files changed, 115 insertions(+), 53 deletions(-) diff --git a/pro/src/screens/IndividualOffer/DetailsScreen/DetailsScreen.tsx b/pro/src/screens/IndividualOffer/DetailsScreen/DetailsScreen.tsx index 3be1fe5fc03..37766d7097b 100644 --- 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 ( diff --git a/pro/src/screens/IndividualOffer/DetailsScreen/__specs__/DetailsScreen.spec.tsx b/pro/src/screens/IndividualOffer/DetailsScreen/__specs__/DetailsScreen.spec.tsx index 1748985effc..d4efdf890d0 100644 --- 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() }) }) })