diff --git a/pro/src/components/CollectiveOfferNavigation/CollectiveOfferNavigation.tsx b/pro/src/components/CollectiveOfferNavigation/CollectiveOfferNavigation.tsx index 4bb3942cf42..a91f1c4a9a7 100644 --- a/pro/src/components/CollectiveOfferNavigation/CollectiveOfferNavigation.tsx +++ b/pro/src/components/CollectiveOfferNavigation/CollectiveOfferNavigation.tsx @@ -1,5 +1,5 @@ import cn from 'classnames' -import { useNavigate } from 'react-router-dom' +import { useLocation, useNavigate } from 'react-router-dom' import { useAnalytics } from 'app/App/analytics/firebase' import { Step, Stepper } from 'components/Stepper/Stepper' @@ -11,6 +11,8 @@ import { computeURLCollectiveOfferId } from 'core/OfferEducational/utils/compute import { createOfferFromTemplate } from 'core/OfferEducational/utils/createOfferFromTemplate' import { useActiveFeature } from 'hooks/useActiveFeature' import { useNotification } from 'hooks/useNotification' +import { useOfferStockEditionURL } from 'hooks/useOfferEditionURL' +import fullEditIcon from 'icons/full-edit.svg' import fullMoreIcon from 'icons/full-more.svg' import fullShowIcon from 'icons/full-show.svg' import { Button } from 'ui-kit/Button/Button' @@ -52,21 +54,45 @@ export const CollectiveOfferNavigation = ({ const { logEvent } = useAnalytics() const notify = useNotification() const navigate = useNavigate() - + const location = useLocation() const isMarseilleActive = useActiveFeature('WIP_ENABLE_MARSEILLE') + const offerEditLink = `/offre/${computeURLCollectiveOfferId( + offerId, + isTemplate + )}/collectif/edition` + const previewLink = `/offre/${computeURLCollectiveOfferId( offerId, isTemplate )}/collectif${isTemplate ? '/vitrine' : ''}/apercu` + const stockEditionUrl = useOfferStockEditionURL(true, offerId) const isEditingExistingOffer = !(isCreatingOffer || isCompletingDraft) const stepList: { [key in CollectiveOfferStep]?: Step } = {} const requestIdUrl = requestId ? `?requete=${requestId}` : '' - if (!isEditingExistingOffer) { + if (isEditingExistingOffer) { + if (!isTemplate) { + stepList[CollectiveOfferStep.DETAILS] = { + id: CollectiveOfferStep.DETAILS, + label: 'Détails de l’offre', + url: `/offre/${offerId}/collectif/edition`, + } + stepList[CollectiveOfferStep.STOCKS] = { + id: CollectiveOfferStep.STOCKS, + label: 'Dates et prix', + url: stockEditionUrl, + } + stepList[CollectiveOfferStep.VISIBILITY] = { + id: CollectiveOfferStep.VISIBILITY, + label: 'Établissement et enseignant', + url: `/offre/${offerId}/collectif/visibilite/edition`, + } + } + } else { stepList[CollectiveOfferStep.DETAILS] = { id: CollectiveOfferStep.DETAILS, label: 'Détails de l’offre', @@ -94,55 +120,49 @@ export const CollectiveOfferNavigation = ({ id: CollectiveOfferStep.CONFIRMATION, label: 'Confirmation', } - } - // Steps witout url will be displayed as disabeld in the stepper, - // that's why we need to add url only to the current step and the previeous steps + // Steps witout url will be displayed as disabeld in the stepper, + // that's why we need to add url only to the current step and the previeous steps - // Add clickable urls depending on current completion - // Switch fallthrough is intended, this is precisely the kind of use case for it - /* eslint-disable no-fallthrough */ - switch (activeStep) { - // @ts-expect-error switch fallthrough - case CollectiveOfferStep.CONFIRMATION: - if (stepList[CollectiveOfferStep.PREVIEW]) { + // Add clickable urls depending on current completion + // Switch fallthrough is intended, this is precisely the kind of use case for it + /* eslint-disable no-fallthrough */ + switch (activeStep) { + // @ts-expect-error switch fallthrough + case CollectiveOfferStep.CONFIRMATION: stepList[CollectiveOfferStep.PREVIEW].url = isTemplate ? `/offre/${offerId}/collectif/vitrine/creation/apercu` : `/offre/${offerId}/collectif/creation/apercu` - } - // @ts-expect-error switch fallthrough - case CollectiveOfferStep.PREVIEW: - if (stepList[CollectiveOfferStep.SUMMARY]) { + // @ts-expect-error switch fallthrough + case CollectiveOfferStep.PREVIEW: stepList[CollectiveOfferStep.SUMMARY].url = isTemplate ? `/offre/${offerId}/collectif/vitrine/creation/recapitulatif` : `/offre/${offerId}/collectif/creation/recapitulatif` - } - // @ts-expect-error switch fallthrough - case CollectiveOfferStep.SUMMARY: - if (!isTemplate && stepList[CollectiveOfferStep.VISIBILITY]) { - stepList[CollectiveOfferStep.VISIBILITY].url = - `/offre/${offerId}/collectif/visibilite` - } - - // @ts-expect-error switch fallthrough - case CollectiveOfferStep.VISIBILITY: - if (!isTemplate && stepList[CollectiveOfferStep.STOCKS]) { - stepList[CollectiveOfferStep.STOCKS].url = - `/offre/${offerId}/collectif/stocks` - } - - // @ts-expect-error switch fallthrough - case CollectiveOfferStep.STOCKS: - if (stepList[CollectiveOfferStep.DETAILS]) { + // @ts-expect-error switch fallthrough + case CollectiveOfferStep.SUMMARY: + if (!isTemplate && stepList[CollectiveOfferStep.VISIBILITY]) { + stepList[CollectiveOfferStep.VISIBILITY].url = + `/offre/${offerId}/collectif/visibilite` + } + + // @ts-expect-error switch fallthrough + case CollectiveOfferStep.VISIBILITY: + if (!isTemplate && stepList[CollectiveOfferStep.STOCKS]) { + stepList[CollectiveOfferStep.STOCKS].url = + `/offre/${offerId}/collectif/stocks` + } + + // @ts-expect-error switch fallthrough + case CollectiveOfferStep.STOCKS: stepList[CollectiveOfferStep.DETAILS].url = isTemplate ? `/offre/collectif/vitrine/${offerId}/creation` : `/offre/collectif/${offerId}/creation${requestIdUrl}` - } - case CollectiveOfferStep.DETAILS: - // Nothing to do here + case CollectiveOfferStep.DETAILS: + // Nothing to do here + } } const steps = Object.values(stepList) @@ -155,6 +175,17 @@ export const CollectiveOfferNavigation = ({ return isEditingExistingOffer ? ( <>
+ {!location.pathname.includes('edition') && ( + + Modifier l’offre + + )} { props.isCreatingOffer = false renderCollectiveOfferNavigation(props) + expect( + screen.getByRole('link', { name: 'Dates et prix' }) + ).toBeInTheDocument() + const linkItems = await screen.findAllByRole('link') + expect(linkItems).toHaveLength(5) expect(linkItems[0].getAttribute('href')).toBe( + `/offre/${offerId}/collectif/edition` + ) + expect(linkItems[1].getAttribute('href')).toBe( `/offre/${offerId}/collectif/apercu` ) + expect(linkItems[2].getAttribute('href')).toBe( + `/offre/${offerId}/collectif/edition` + ) + expect(linkItems[3].getAttribute('href')).toBe( + `/offre/${offerId}/collectif/stocks/edition` + ) + expect(linkItems[4].getAttribute('href')).toBe( + `/offre/${offerId}/collectif/visibilite/edition` + ) }) it('should log event when clicking duplicate offer button', async () => {