(PC-11091): optimize perf in home by adding a display stats button on…

… venues
pass-culture · Nov 9, 2021 · 1ec8a02 · 1ec8a02
1 parent 411508e
commit 1ec8a02
Show file tree

Hide file tree

Showing 22 changed files with 516 additions and 1,359 deletions.
diff --git a/src/components/pages/Home/Homepage.jsx b/src/components/pages/Home/Homepage.jsx
@@ -2,18 +2,15 @@
 * @debt directory "Gaël: this file should be migrated within the new directory structure"
 */
 
-import PropTypes from 'prop-types'
 import React, { useRef } from 'react'
 
 import PageTitle from 'components/layout/PageTitle/PageTitle'
 
 import HomepageBreadcrumb, { STEP_ID_OFFERERS } from './HomepageBreadcrumb'
 import Offerers from './Offerers/Offerers'
-import OfferersLegacy from './Offerers/OfferersLegacy'
 import ProfileAndSupportContainer from './ProfileAndSupport/ProfileAndSupportContainer'
 
-const Homepage = props => {
-  const { isPerfVenueStatsEnabled } = props
+const Homepage = () => {
   const profileRef = useRef(null)
 
   return (
@@ -29,7 +26,7 @@ const Homepage = props => {
       />
 
       <section className="h-section">
-        {isPerfVenueStatsEnabled ? <Offerers /> : <OfferersLegacy />}
+        <Offerers />
       </section>
 
       <section
@@ -42,12 +39,4 @@ const Homepage = props => {
   )
 }
 
-Homepage.defaultProps = {
-  isPerfVenueStatsEnabled: false,
-}
-
-Homepage.propTypes = {
-  isPerfVenueStatsEnabled: PropTypes.bool,
-}
-
 export default Homepage
diff --git a/src/components/pages/Home/HomepageContainer.js b/src/components/pages/Home/HomepageContainer.js
diff --git a/src/components/pages/Home/Offerers/BankInformations.jsx b/src/components/pages/Home/Offerers/BankInformations.jsx
@@ -11,14 +11,14 @@ import { DEMARCHES_SIMPLIFIEES_VENUE_RIB_UPLOAD_PROCEDURE_URL } from 'utils/conf
 
 const BankInformations = ({
   offerer,
-  hasMissingBankInformations,
+  hasMissingBankInformation,
   hasRejectedOrDraftOffererBankInformations,
 }) => {
   return (
     <>
       <h3 className="h-card-secondary-title">
         Coordonnées bancaires
-        {hasMissingBankInformations && (
+        {hasMissingBankInformation && (
           <Icon
             alt="Informations bancaires manquantes"
             className="ico-bank-warning"
@@ -40,7 +40,9 @@ const BankInformations = ({
             href={DEMARCHES_SIMPLIFIEES_VENUE_RIB_UPLOAD_PROCEDURE_URL}
             linkTitle="Renseignez les coordonnées bancaires"
           >
-            Certains de vos lieux ne sont pas rattachés à des coordonnées bancaires. Pour percevoir les remboursements liés aux offres postées dans ces lieux, renseignez les coordonnées bancaires.
+            Certains de vos lieux ne sont pas rattachés à des coordonnées bancaires. Pour percevoir
+            les remboursements liés aux offres postées dans ces lieux, renseignez les coordonnées
+            bancaires.
           </Banner>
         )}
       </div>
@@ -49,7 +51,7 @@ const BankInformations = ({
 }
 
 BankInformations.propTypes = {
-  hasMissingBankInformations: PropTypes.bool.isRequired,
+  hasMissingBankInformation: PropTypes.bool.isRequired,
   hasRejectedOrDraftOffererBankInformations: PropTypes.bool.isRequired,
   offerer: PropTypes.shape({
     iban: PropTypes.string,

diff --git a/src/components/pages/Home/Offerers/OffererDetails.jsx b/src/components/pages/Home/Offerers/OffererDetails.jsx
@@ -17,14 +17,9 @@ import { ReactComponent as ClosedEyeSvg } from './assets/ico-eye-close.svg'
 import { ReactComponent as OpenedEyeSvg } from './assets/ico-eye-open.svg'
 import BankInformations from './BankInformations'
 
-const hasBankInformations = offererOrVenue =>
+const hasRejectedOrDraftBankInformation = offerer =>
   Boolean(
-    (offererOrVenue.iban && offererOrVenue.bic) || offererOrVenue.demarchesSimplifieesApplicationId
-  )
-
-const hasRejectedOrDraftBankInformation = offererOrVenue =>
-  Boolean(
-    offererOrVenue.demarchesSimplifieesApplicationId && !offererOrVenue.iban && !offererOrVenue.bic
+    offerer.demarchesSimplifieesApplicationId && !offerer.iban && !offerer.bic
   )
 
 const OffererDetails = ({
@@ -42,21 +37,16 @@ const OffererDetails = ({
     []
   )
 
-  const hasMissingBankInformations = useMemo(() => {
-    if (!selectedOfferer || hasBankInformations(selectedOfferer)) return false
-
-    return selectedOfferer.managedVenues
-      .filter(venue => !venue.isVirtual)
-      .some(venue => !hasBankInformations(venue))
-  }, [selectedOfferer])
-
   const hasRejectedOrDraftOffererBankInformations = useMemo(() => {
     if (!selectedOfferer) return false
     return hasRejectedOrDraftBankInformation(selectedOfferer)
   }, [selectedOfferer])
 
   return (
-    <div className="h-card h-card-secondary">
+    <div
+      className="h-card h-card-secondary"
+      data-testid="offerrer-wrapper"
+    >
       <div className={`h-card-inner${isExpanded ? '' : ' h-no-bottom'}`}>
         <div className="od-header">
           <Select
@@ -85,7 +75,7 @@ const OffererDetails = ({
               </>
             )}
           </button>
-          {hasMissingBankInformations && (
+          {selectedOfferer.hasMissingBankInformation && (
             <Icon
               alt="Informations bancaires manquantes"
               className="ico-bank-warning"
@@ -153,23 +143,24 @@ const OffererDetails = ({
                         </span>
                         <address className="od-address">
                           {selectedOfferer.address}
-                          {hasMissingBankInformations && <br />}
+                          {selectedOfferer.hasMissingBankInformation && <br />}
                           {`${selectedOfferer.postalCode} ${selectedOfferer.city}`}
                         </address>
                       </li>
                     </ul>
                   </div>
                 </div>
-                {(hasMissingBankInformations || hasRejectedOrDraftOffererBankInformations) && (
-                  <div className="h-card-col">
-                    <BankInformations
-                      hasMissingBankInformations={hasMissingBankInformations}
-                      hasRejectedOrDraftOffererBankInformations={
-                        hasRejectedOrDraftOffererBankInformations
-                      }
-                      offerer={selectedOfferer}
-                    />
-                  </div>
+                {(selectedOfferer.hasMissingBankInformation ||
+                  hasRejectedOrDraftOffererBankInformations) && (
+                    <div className="h-card-col">
+                      <BankInformations
+                        hasMissingBankInformation={selectedOfferer.hasMissingBankInformation}
+                        hasRejectedOrDraftOffererBankInformations={
+                          hasRejectedOrDraftOffererBankInformations
+                        }
+                        offerer={selectedOfferer}
+                      />
+                    </div>
                 )}
               </div>
             )}

diff --git a/src/components/pages/Home/Offerers/Offerers.jsx b/src/components/pages/Home/Offerers/Offerers.jsx
@@ -60,7 +60,7 @@ const Offerers = () => {
   useEffect(() => {
     if (!selectedOffererId) return
     pcapi
-      .getOffererWithVenueStats(selectedOffererId)
+      .getOfferer(selectedOffererId)
       .then(receivedOfferer => {
         setSelectedOfferer(receivedOfferer)
         setPhysicalVenues(receivedOfferer.managedVenues.filter(venue => !venue.isVirtual))
@@ -120,7 +120,7 @@ const Offerers = () => {
           <VenueList
             physicalVenues={physicalVenues}
             selectedOffererId={selectedOfferer.id}
-            virtualVenue={virtualVenue?.nOffers ? virtualVenue : null}
+            virtualVenue={selectedOfferer.hasDigitalVenueAtLeastOneOffer ? virtualVenue : null}
           />
         </>
       )}
@@ -130,7 +130,7 @@ const Offerers = () => {
       {isUserOffererValidated && (
         <VenueCreationLinks
           hasPhysicalVenue={physicalVenues.length > 0}
-          hasVirtualOffers={virtualVenue && virtualVenue.nOffers > 0}
+          hasVirtualOffers={!!virtualVenue && !!selectedOfferer.hasDigitalVenueAtLeastOneOffer}
           offererId={selectedOfferer ? selectedOfferer.id : null}
         />
       )}

diff --git a/src/components/pages/Home/Offerers/OfferersLegacy.jsx b/src/components/pages/Home/Offerers/OfferersLegacy.jsx
diff --git a/src/components/pages/Home/Offerers/VenueCreationLinks.jsx b/src/components/pages/Home/Offerers/VenueCreationLinks.jsx
@@ -25,15 +25,13 @@ const VenueCreationLinks = ({ hasPhysicalVenue, hasVirtualOffers, offererId }) =
       >
         {!hasPhysicalVenue ? 'Créer un lieu' : 'Ajouter un lieu'}
       </Link>
-
-      {!hasVirtualOffers && (
-        <Link
-          className="secondary-link"
-          to={`/offres/creation?structure=${offererId}`}
-        >
-          Créer une offre numérique
-        </Link>
-      )}
+
+      <Link
+        className="secondary-link"
+        to={`/offres/creation?structure=${offererId}`}
+      >
+        Créer une offre
+      </Link>
     </div>
   )