[PC-10266] OfferForm creation : use venue accessibility

src/components/pages/Offers/Offer/OfferDetails/OfferDetails.jsx

@@ -32,18 +32,18 @@ const OfferDetails = ({
   userEmail,
 }) => {
   const dispatch = useDispatch()
-  const initialValues = {}
+  const queryFormValues = {}
   const queryParams = queryParamsFromOfferer(location)
 
   if (queryParams.structure !== '') {
-    initialValues.offererId = queryParams.structure
+    queryFormValues.offererId = queryParams.structure
   }
 
   if (queryParams.lieu !== '') {
-    initialValues.venueId = queryParams.lieu
+    queryFormValues.venueId = queryParams.lieu
   }
 
-  const formInitialValues = useRef(initialValues)
+  const queryFormValuesRef = useRef(queryFormValues)
   const [formValues, setFormValues] = useState({})
   const [offerSubCategory, setOfferSubCategory] = useState({})
   const [formErrors, setFormErrors] = useState({})
@@ -107,12 +107,12 @@ const OfferDetails = ({
 
           let queryString = ''
 
-          if (formInitialValues.current.offererId !== undefined) {
-            queryString = `?structure=${formInitialValues.current.offererId}`
+          if (queryFormValuesRef.current.offererId !== undefined) {
+            queryString = `?structure=${queryFormValuesRef.current.offererId}`
           }
 
-          if (formInitialValues.current.venueId !== undefined) {
-            queryString += `&lieu=${formInitialValues.current.venueId}`
+          if (queryFormValuesRef.current.venueId !== undefined) {
+            queryString += `&lieu=${queryFormValuesRef.current.venueId}`
           }
 
           history.push(`/offres/${createdOfferId}/stocks${queryString}`)
@@ -185,10 +185,10 @@ const OfferDetails = ({
           ) : (
             <OfferCreation
               formValues={formValues}
-              initialValues={formInitialValues.current}
               isSubmitLoading={isSubmitLoading}
               isUserAdmin={isUserAdmin}
               onSubmit={handleSubmitOffer}
+              queryFormValues={queryFormValuesRef.current}
               setFormValues={setFormValues}
               setPreviewOfferCategory={setOfferSubCategory}
               setShowThumbnailForm={setShowThumbnailForm}

src/components/pages/Offers/Offer/OfferDetails/OfferForm/AccessibilityCheckboxList/AccessibilityCheckboxList.jsx

@@ -9,21 +9,48 @@ import { ReactComponent as MotorDisabilitySvg } from 'icons/motor-disability.svg
 import { ReactComponent as VisualDisabilitySvg } from 'icons/visual-disability.svg'
 
 
-export const getDisabilityComplianceValues = values => ({
-  audioDisabilityCompliant: values.audioDisabilityCompliant,
-  mentalDisabilityCompliant: values.mentalDisabilityCompliant,
-  motorDisabilityCompliant: values.motorDisabilityCompliant,
-  visualDisabilityCompliant: values.visualDisabilityCompliant,
-})
-
-const checkHasNoDisabilityCompliance = disabilityComplianceValues => {
-  const hasNull = Object.values(disabilityComplianceValues).includes(null)
-  const hasUndefined = Object.values(disabilityComplianceValues).includes(undefined)
-  if (hasNull || hasUndefined) {
-    return null
+export const getDisabilityComplianceValues = values => {
+  const accessibility = {
+    audioDisabilityCompliant: values.audioDisabilityCompliant,
+    mentalDisabilityCompliant: values.mentalDisabilityCompliant,
+    motorDisabilityCompliant: values.motorDisabilityCompliant,
+    visualDisabilityCompliant: values.visualDisabilityCompliant,
+  }
+  return Object.keys(accessibility).reduce((acc, fieldName) => {
+    let fieldValue = accessibility[fieldName]
+    if (fieldValue === undefined) {
+      fieldValue = null
+    } 
+    return { ...acc, [fieldName]: fieldValue }
+  }, {})
+}
+
+const checkHasNoDisabilityCompliance = values => {
+  const disabilityCompliantValues = Object.values(getDisabilityComplianceValues(values))
+  const unknownDisabilityCompliance = disabilityCompliantValues.includes(null)
+  const hasDisabilityCompliance = disabilityCompliantValues.includes(true)
+  if (hasDisabilityCompliance || unknownDisabilityCompliance) {
+    return false
+  }
+
+  return true
+}
+
+export const getAccessibilityInitialValues = ({ offer = null, venue = null }) => {
+  const emptyAccessibility = {
+    audioDisabilityCompliant: null,
+    mentalDisabilityCompliant: null,
+    motorDisabilityCompliant: null,
+    visualDisabilityCompliant: null,
   }
 
-  return !Object.values(disabilityComplianceValues).includes(true)
+  let accessibility = offer ? getDisabilityComplianceValues(offer) : { ...emptyAccessibility }
+  if (Object.values(accessibility).includes(null)) {
+    accessibility = venue ? getDisabilityComplianceValues(venue) : { ...emptyAccessibility }
+  }
+  accessibility.noDisabilityCompliant = checkHasNoDisabilityCompliance(accessibility)
+  accessibility = Object.keys(accessibility).reduce((acc, fieldName) => ({ ...acc, [fieldName]: !!accessibility[fieldName] }), {})
+  return accessibility
 }
 
 const autoFillValues = function (formValues, field, value) {

src/components/pages/Offers/Offer/OfferDetails/OfferForm/AccessibilityCheckboxList/index.ts

@@ -1 +1,5 @@
-export { default, getDisabilityComplianceValues } from './AccessibilityCheckboxList'
+export { 
+  default, 
+  getAccessibilityInitialValues, 
+  getDisabilityComplianceValues, 
+} from './AccessibilityCheckboxList'

src/components/pages/Offers/Offer/OfferDetails/OfferForm/OfferCreation.jsx

@@ -8,14 +8,17 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useSelector } from 'react-redux'
 
 import Spinner from 'components/layout/Spinner'
+import { getAccessibilityInitialValues } from 'components/pages/Offers/Offer/OfferDetails/OfferForm/AccessibilityCheckboxList'
 import { computeOffersUrl } from 'components/pages/Offers/utils/computeOffersUrl'
 import * as pcapi from 'repository/pcapi/pcapi'
 
+import { DEFAULT_FORM_VALUES } from './_constants'
 import OfferForm from './OfferForm'
 
+
 const OfferCreation = ({
   formValues,
-  initialValues,
+  queryFormValues,
   isSubmitLoading,
   isUserAdmin,
   userEmail,
@@ -30,11 +33,15 @@ const OfferCreation = ({
   const offerersNames = useRef([])
   const [isLoading, setIsLoading] = useState(true)
   const [displayedVenues, setDisplayedVenues] = useState([])
-  const [selectedOfferer, setSelectedOfferer] = useState(initialValues.offererId)
+  const [selectedOfferer, setSelectedOfferer] = useState(queryFormValues.offererId)
+  const [initialValues, setInitialValues] = useState({
+    offererId: queryFormValues.offererId || DEFAULT_FORM_VALUES['offererId'],
+    venueId: queryFormValues.venueId || DEFAULT_FORM_VALUES['venueId'],
+  })
 
   const { categories } = useSelector(state => state.offers.categories)
 
-  useEffect(() => setSelectedOfferer(initialValues.offererId), [initialValues.offererId])
+  useEffect(() => setSelectedOfferer(queryFormValues.offererId), [queryFormValues.offererId])
 
   useEffect(() => {
     (async () => {
@@ -43,9 +50,9 @@ const OfferCreation = ({
       if (categories === undefined) {
         return
       }
-
+      
       if (isUserAdmin) {
-        const offererResponse = await pcapi.getOfferer(initialValues.offererId)
+        const offererResponse = await pcapi.getOfferer(queryFormValues.offererId)
 
         offerersNames.current = [
           {
@@ -62,16 +69,22 @@ const OfferCreation = ({
         const venuesResponse = await pcapi.getVenuesForOfferer({ activeOfferersOnly: true })
         venues.current = venuesResponse
 
-        const venuesToDisplay = initialValues.offererId
-          ? venuesResponse.filter(venue => venue.managingOffererId === initialValues.offererId)
+        const venuesToDisplay = queryFormValues.offererId
+          ? venuesResponse.filter(venue => venue.managingOffererId === queryFormValues.offererId)
           : venuesResponse
 
         setDisplayedVenues(venuesToDisplay)
       }
 
+      if (queryFormValues.venueId) {
+        const selectedVenue = venues.current.find((venue) => venue.id === queryFormValues.venueId)
+        const venueAccessibility = getAccessibilityInitialValues({ venue: selectedVenue })
+        setInitialValues((currentInitialValues) => ({ ...currentInitialValues, ...venueAccessibility }))
+      }
+
       setIsLoading(false)
     })()
-  }, [initialValues.offererId, isUserAdmin, initialValues, categories])
+  }, [categories, isUserAdmin, setInitialValues, queryFormValues.offererId, queryFormValues.venueId])
 
   const filterVenuesForPro = useCallback(() => {
     const venuesToDisplay = selectedOfferer
@@ -86,10 +99,10 @@ const OfferCreation = ({
     }
   }, [filterVenuesForPro, isUserAdmin])
 
-  const isComingFromOffererPage = initialValues.offererId !== undefined
+  const isComingFromOffererPage = queryFormValues.offererId !== undefined
 
   const areAllVenuesVirtual =
-    isComingFromOffererPage && selectedOfferer === initialValues.offererId
+    isComingFromOffererPage && selectedOfferer === queryFormValues.offererId
       ? venues.current
         .filter(venue => venue.managingOffererId === selectedOfferer)
         .every(venue => venue.isVirtual)
@@ -124,16 +137,16 @@ const OfferCreation = ({
 }
 
 OfferCreation.defaultProps = {
-  initialValues: {},
   isUserAdmin: false,
+  queryFormValues: {},
 }
 
 OfferCreation.propTypes = {
   formValues: PropTypes.shape().isRequired,
-  initialValues: PropTypes.shape(),
   isSubmitLoading: PropTypes.bool.isRequired,
   isUserAdmin: PropTypes.bool,
   onSubmit: PropTypes.func.isRequired,
+  queryFormValues: PropTypes.shape(),
   setFormValues: PropTypes.func.isRequired,
   setPreviewOfferCategory: PropTypes.func.isRequired,
   setShowThumbnailForm: PropTypes.func.isRequired,

src/components/pages/Offers/Offer/OfferDetails/OfferForm/OfferEdition.jsx

@@ -16,29 +16,12 @@ import {
   DEFAULT_FORM_VALUES,
   EDITED_OFFER_READ_ONLY_FIELDS,
 } from 'components/pages/Offers/Offer/OfferDetails/OfferForm/_constants'
-import { getDisabilityComplianceValues } from 'components/pages/Offers/Offer/OfferDetails/OfferForm/AccessibilityCheckboxList'
+import { getAccessibilityInitialValues } from 'components/pages/Offers/Offer/OfferDetails/OfferForm/AccessibilityCheckboxList'
 import { computeOffersUrl } from 'components/pages/Offers/utils/computeOffersUrl'
 
 import OfferForm from './OfferForm'
 
 
-const computeNoDisabilityComplianceValue = offer => {
-  const disabilityCompliantValues = [
-    offer.audioDisabilityCompliant,
-    offer.mentalDisabilityCompliant,
-    offer.motorDisabilityCompliant,
-    offer.visualDisabilityCompliant,
-  ]
-
-  const unknownDisabilityCompliance = disabilityCompliantValues.includes(null)
-  const hasDisabilityCompliance = disabilityCompliantValues.includes(true)
-  if (hasDisabilityCompliance || unknownDisabilityCompliance) {
-    return false
-  }
-
-  return true
-}
-
 const OfferEdition = ({
   formValues,
   isDisabled,
@@ -71,22 +54,14 @@ const OfferEdition = ({
         return { ...acc, [field]: DEFAULT_FORM_VALUES[field] }
       }, {})
 
-      const offerAccessibility = getDisabilityComplianceValues(offer)
-      const venueAccessibility = getDisabilityComplianceValues(offer.venue)
-      if (
-        Object.values(offerAccessibility).includes(null) 
-        && !Object.values(venueAccessibility).includes(null)
-      ) {
-        initialValues = { ...initialValues, ...venueAccessibility }
-      }
-
+      const accessibilityInitialValues = getAccessibilityInitialValues({ offer, venue: offer.venue })
+      initialValues = { ...initialValues, ...accessibilityInitialValues }
       initialValues.categoryId = subCategories.find(
         subCategory => subCategory.id === offer.subcategoryId
       ).categoryId
 
       initialValues.subcategoryId = offer.subcategoryId
       initialValues.offererId = offer.venue.managingOffererId
-      initialValues.noDisabilityCompliant = computeNoDisabilityComplianceValue(offer)
 
       return initialValues
     }

src/components/pages/Offers/Offer/OfferDetails/OfferForm/OfferForm.jsx

@@ -38,7 +38,7 @@ import { SubmitButton } from 'ui-kit'
 import { CGU_URL } from 'utils/config'
 import { doesUserPreferReducedMotion } from 'utils/windowMatchMedia'
 
-import AccessibilityCheckboxList from './AccessibilityCheckboxList'
+import AccessibilityCheckboxList, { getDisabilityComplianceValues } from './AccessibilityCheckboxList'
 import OfferCategories from './OfferCategories/OfferCategories'
 
 // JOCONDE React:component "Ce composant est vraiment le plus beau et le plus lisible que nous ayons côté pro. Prenez en de la graine !"
@@ -320,7 +320,6 @@ const OfferForm = ({
   const isValid = useCallback(() => {
     let newFormErrors = {}
     const formFields = [...offerFormFields, 'offererId']
-
     mandatoryFields.forEach(fieldName => {
       if (
         formFields.includes(fieldName) &&
@@ -403,13 +402,8 @@ const OfferForm = ({
       }
       const venue = venues.find(venue => venue.id === updatedValues.venueId)
       if (venue) {
-        const venueAccessibilities = {
-          audioDisabilityCompliant: venue.audioDisabilityCompliant,
-          mentalDisabilityCompliant: venue.mentalDisabilityCompliant,
-          motorDisabilityCompliant: venue.motorDisabilityCompliant,
-          visualDisabilityCompliant: venue.visualDisabilityCompliant,
-        }
-        const haveUnsetAccessibility = Object.values(venueAccessibilities).includes(null || undefined)
+        const venueAccessibilities = getDisabilityComplianceValues(venue)
+        const haveUnsetAccessibility = Object.values(venueAccessibilities).includes(null)
         updatedValues = {
           ...updatedValues,
           ...Object.keys(venueAccessibilities).reduce((acc, field) => ({ ...acc, [field]: !!venueAccessibilities[field] }), {}),