From 0d3466179b06d2d0e2b00aec1b16fc0f7d15a4e9 Mon Sep 17 00:00:00 2001 From: Andrea Saez Date: Mon, 16 Sep 2024 16:01:04 +0200 Subject: [PATCH] (PC-31828)[PRO] fix: make sure subcat err callout is displayed in DetailsSubForm only when EAN search is displayed --- .../DetailsEanSearch/DetailsEanSearch.tsx | 1 + .../DetailsScreen/DetailsForm.tsx | 22 +++----- .../DetailsScreen/DetailsScreen.tsx | 6 ++- .../DetailsSubForm/DetailsSubForm.spec.tsx | 54 ++++++++++++------- .../DetailsSubForm/DetailsSubForm.tsx | 9 ++-- 5 files changed, 51 insertions(+), 41 deletions(-) diff --git a/pro/src/screens/IndividualOffer/DetailsScreen/DetailsEanSearch/DetailsEanSearch.tsx b/pro/src/screens/IndividualOffer/DetailsScreen/DetailsEanSearch/DetailsEanSearch.tsx index b28efce688a..56db579b556 100644 --- 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 index b5edb33b881..eb2f7eb4742 100644 --- 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() - 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 = ({ ) : ( { 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 => { - {shouldDisplayEanSearch && ( + {isEanSearchDisplayed && ( )} > const DetailsSubFormWrappedWithFormik = ({ + isEanSearchDisplayed = false, isProductBased = false, isOfferCDOrVinyl = false, }: DetailsSubFormTestProps) => { @@ -41,6 +45,7 @@ const DetailsSubFormWrappedWithFormik = ({ return ( { +} = {}) => { return renderWithProviders( @@ -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 index 100034dfc60..52087d8e085 100644 --- 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() - 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, },