(PC-31316)[API] feat: add VenueProviderCard and implement multi-pro…

…vider logic
pass-culture · Sep 2, 2024 · b6cb4d5 · b6cb4d5
1 parent a10c43d
commit b6cb4d5
Show file tree

Hide file tree

Showing 19 changed files with 830 additions and 367 deletions.
diff --git a/pro/src/pages/VenueSettings/VenueProvidersManager/AddVenueProviderButton.tsx b/pro/src/pages/VenueSettings/VenueProvidersManager/AddVenueProviderButton.tsx
@@ -20,12 +20,14 @@ import { sortByLabel } from 'utils/strings'
 import { DEFAULT_PROVIDER_OPTION } from './utils/_constants'
 import { VenueProviderForm } from './VenueProviderForm'
 
-interface AddVenueProviderButtonProps {
+export interface AddVenueProviderButtonProps {
   venue: GetVenueResponseModel
+  linkedProvidersIds: number[]
 }
 
 export const AddVenueProviderButton = ({
   venue,
+  linkedProvidersIds,
 }: AddVenueProviderButtonProps) => {
   const { mutate } = useSWRConfig()
 
@@ -50,10 +52,31 @@ export const AddVenueProviderButton = ({
   )
 
   const providersOptions = sortByLabel(
-    providers.map((item) => ({
-      value: item['id'].toString(),
-      label: item['name'],
-    }))
+    // 1. Filter out providers that are already linked to the venue
+    // 2. Format providers
+    providers.reduce(
+      (
+        filteredProvidersOptions: { value: string; label: string }[],
+        provider
+      ) => {
+        const isAlreadyLinkedToVenue = !!linkedProvidersIds.find(
+          (providerId) => provider.id === providerId
+        )
+
+        if (!isAlreadyLinkedToVenue) {
+          return [
+            ...filteredProvidersOptions,
+            {
+              value: provider['id'].toString(),
+              label: provider['name'],
+            },
+          ]
+        }
+
+        return filteredProvidersOptions
+      },
+      []
+    )
   )
 
   const setCreationMode = () => {

diff --git a/pro/src/pages/VenueSettings/VenueProvidersManager/OffersSynchronization.module.scss b/pro/src/pages/VenueSettings/VenueProvidersManager/OffersSynchronization.module.scss
@@ -0,0 +1,13 @@
+@use "styles/mixins/_fonts.scss" as fonts;
+@use "styles/mixins/_rem.scss" as rem;
+@use "styles/variables/_size.scss" as size;
+
+.venue-providers {
+  display: flex;
+  flex-flow: row wrap;
+  width: 100%;
+}
+
+.venue-providers-section {
+  max-width: 100%;
+}
diff --git a/pro/src/pages/VenueSettings/VenueProvidersManager/OffersSynchronization.tsx b/pro/src/pages/VenueSettings/VenueProvidersManager/OffersSynchronization.tsx
@@ -1,10 +1,12 @@
+import cn from 'classnames'
 import React from 'react'
 
 import { VenueProviderResponse, GetVenueResponseModel } from 'apiClient/v1'
 import { FormLayout } from 'components/FormLayout/FormLayout'
 
 import { AddVenueProviderButton } from './AddVenueProviderButton'
-import { VenueProviderItem } from './VenueProviderList/VenueProviderItem'
+import style from './OffersSynchronization.module.scss'
+import { VenueProviderCard } from './VenueProviderList/VenueProviderCard'
 
 interface OffersSynchronization {
   venueProviders: VenueProviderResponse[]
@@ -16,27 +18,31 @@ export const OffersSynchronization = ({
   venueProviders,
 }: OffersSynchronization) => {
   return (
-    <FormLayout mediumWidthActions>
+    <FormLayout>
       <FormLayout.Section
         title="Gestion des synchronisations"
         description="Vous pouvez synchroniser votre lieu avec un logiciel tiers afin de faciliter la gestion de vos offres et de vos réservations."
       >
+        <FormLayout.Row
+          className={cn(style['venue-providers'], 'form-layout-actions')}
+        >
+          {venueProviders.map((venueProvider) => (
+            <VenueProviderCard
+              key={venueProvider.id}
+              venueProvider={venueProvider}
+              venue={venue}
+              venueDepartmentCode={venue.departementCode}
+              offererId={venue.managingOfferer.id}
+            />
+          ))}
+        </FormLayout.Row>
         <FormLayout.Row>
-          {venueProviders.length > 0 ? (
-            <ul>
-              {venueProviders.map((venueProvider) => (
-                <VenueProviderItem
-                  key={venueProvider.id}
-                  venueProvider={venueProvider}
-                  venue={venue}
-                  venueDepartmentCode={venue.departementCode}
-                  offererId={venue.managingOfferer.id}
-                />
-              ))}
-            </ul>
-          ) : (
-            <AddVenueProviderButton venue={venue} />
-          )}
+          <AddVenueProviderButton
+            venue={venue}
+            linkedProvidersIds={venueProviders.map(
+              ({ provider }) => provider.id
+            )}
+          />
         </FormLayout.Row>
       </FormLayout.Section>
     </FormLayout>

diff --git a/...oviderList/AllocineProviderParameters.tsx → ...enueProviderList/AllocineProviderEdit.tsx b/...oviderList/AllocineProviderParameters.tsx → ...enueProviderList/AllocineProviderEdit.tsx
@@ -10,26 +10,28 @@ import {
 } from 'apiClient/v1'
 import { GET_VENUE_PROVIDERS_QUERY_KEY } from 'config/swrQueryKeys'
 import { useNotification } from 'hooks/useNotification'
+import fullEditIcon from 'icons/full-edit.svg'
 import { Button } from 'ui-kit/Button/Button'
 import { ButtonVariant } from 'ui-kit/Button/types'
 import { DialogBuilder } from 'ui-kit/DialogBuilder/DialogBuilder'
+import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 
 import { FormValuesProps } from '../AllocineProviderForm/AllocineProviderForm'
 
 import { AllocineProviderFormDialog } from './AllocineProviderFormDialog'
-import style from './AllocineProviderParameters.module.scss'
+import style from './ProviderActionButton.module.scss'
 
-interface AllocineProviderParametersProps {
+export interface AllocineProviderEditProps {
   venueProvider: VenueProviderResponse
   venue: GetVenueResponseModel
   offererId: number
 }
 
-export const AllocineProviderParameters = ({
+export const AllocineProviderEdit = ({
   venueProvider,
   venue,
   offererId,
-}: AllocineProviderParametersProps): JSX.Element => {
+}: AllocineProviderEditProps): JSX.Element => {
   const [isOpenedFormDialog, setIsOpenedFormDialog] = useState(false)
   const notification = useNotification()
   const { mutate } = useSWRConfig()
@@ -69,55 +71,27 @@ export const AllocineProviderParameters = ({
   }
 
   return (
-    <div className={style['allocine-provider-parameters-container']}>
-      <h4 className={style['title']}>Paramètres des offres synchronisées</h4>
-      <div className={style['parameters-list']}>
-        <div className={style['parameter-item']}>
-          Prix de vente/place :{' '}
-          <span>
-            {venueProvider.price
-              ? `${new Intl.NumberFormat('fr-FR', {
-                  style: 'currency',
-                  currency: 'EUR',
-                }).format(venueProvider.price)}`
-              : ''}
-          </span>
-        </div>
-        <div className={style['parameter-item']}>
-          Nombre de places/séance :{' '}
-          <span>
-            {`${
-              typeof venueProvider.quantity === 'number'
-                ? venueProvider.quantity
-                : 'Illimité'
-            }`}
-          </span>
-        </div>
-        <div className={style['parameter-item']}>
-          Accepter les offres DUO :{' '}
-          <span>{`${venueProvider.isDuo ? 'Oui' : 'Non'} `}</span>
-        </div>
-      </div>
-      <DialogBuilder
-        open={isOpenedFormDialog}
-        onOpenChange={setIsOpenedFormDialog}
-        trigger={
-          <Button
-            className={style['edit-parameters-btn']}
-            variant={ButtonVariant.SECONDARY}
-          >
-            Modifier les paramètres
-          </Button>
-        }
-      >
-        <AllocineProviderFormDialog
-          initialValues={initialValues}
-          onConfirm={onConfirmDialog}
-          providerId={venueProvider.provider.id}
-          venueId={venueProvider.venueId}
-          offererId={offererId}
-        />
-      </DialogBuilder>
-    </div>
+    <DialogBuilder
+      open={isOpenedFormDialog}
+      onOpenChange={setIsOpenedFormDialog}
+      trigger={
+        <Button variant={ButtonVariant.TERNARY}>
+          <SvgIcon
+            src={fullEditIcon}
+            alt=""
+            className={style['provider-action-icon']}
+          />
+          Paramétrer
+        </Button>
+      }
+    >
+      <AllocineProviderFormDialog
+        initialValues={initialValues}
+        onConfirm={onConfirmDialog}
+        providerId={venueProvider.provider.id}
+        venueId={venueProvider.venueId}
+        offererId={offererId}
+      />
+    </DialogBuilder>
   )
 }
diff --git a/...ueSettings/VenueProvidersManager/VenueProviderList/AllocineProviderParameters.module.scss b/...ueSettings/VenueProvidersManager/VenueProviderList/AllocineProviderParameters.module.scss
diff --git a/...ProviderList/CinemaProviderParameters.tsx → .../VenueProviderList/CinemaProviderEdit.tsx b/...ProviderList/CinemaProviderParameters.tsx → .../VenueProviderList/CinemaProviderEdit.tsx
@@ -5,25 +5,27 @@ import { api } from 'apiClient/api'
 import { GetVenueResponseModel, VenueProviderResponse } from 'apiClient/v1'
 import { GET_VENUE_PROVIDERS_QUERY_KEY } from 'config/swrQueryKeys'
 import { useNotification } from 'hooks/useNotification'
+import fullEditIcon from 'icons/full-edit.svg'
 import { Button } from 'ui-kit/Button/Button'
 import { ButtonVariant } from 'ui-kit/Button/types'
 import { DialogBuilder } from 'ui-kit/DialogBuilder/DialogBuilder'
+import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 
 import { CinemaProviderFormDialog } from './CinemaProviderFormDialog'
-import style from './CinemaProviderParameters.module.scss'
+import style from './ProviderActionButton.module.scss'
 import { CinemaProviderParametersValues } from './types'
 
-interface CinemaProviderParametersProps {
+export interface CinemaProviderEditProps {
   venueProvider: VenueProviderResponse
   venue: GetVenueResponseModel
   offererId: number
 }
 
-export const CinemaProviderParameters = ({
+export const CinemaProviderEdit = ({
   venueProvider,
   venue,
   offererId,
-}: CinemaProviderParametersProps): JSX.Element => {
+}: CinemaProviderEditProps): JSX.Element => {
   const [isOpenedFormDialog, setIsOpenedFormDialog] = useState(false)
   const notification = useNotification()
   const { mutate } = useSWRConfig()
@@ -62,35 +64,27 @@ export const CinemaProviderParameters = ({
   }
 
   return (
-    <div className={style['cinema-provider-parameters']}>
-      cc
-      <h4 className={style['title']}>Paramètres des offres synchronisées</h4>
-      <div className={style['cinema-provider-parameters-list']}>
-        <div>
-          Accepter les offres DUO :{' '}
-          <span>{`${venueProvider.isDuo ? 'Oui' : 'Non'} `}</span>
-        </div>
-      </div>
-      <DialogBuilder
-        open={isOpenedFormDialog}
-        onOpenChange={setIsOpenedFormDialog}
-        trigger={
-          <Button
-            className={style['edit-parameters-btn']}
-            variant={ButtonVariant.SECONDARY}
-          >
-            Modifier les paramètres
-          </Button>
-        }
-      >
-        <CinemaProviderFormDialog
-          initialValues={initialValues}
-          onConfirm={onConfirmDialog}
-          providerId={venueProvider.provider.id}
-          venueId={venueProvider.venueId}
-          offererId={offererId}
-        />
-      </DialogBuilder>
-    </div>
+    <DialogBuilder
+      open={isOpenedFormDialog}
+      onOpenChange={setIsOpenedFormDialog}
+      trigger={
+        <Button variant={ButtonVariant.TERNARY}>
+          <SvgIcon
+            src={fullEditIcon}
+            alt=""
+            className={style['provider-action-icon']}
+          />
+          Paramétrer
+        </Button>
+      }
+    >
+      <CinemaProviderFormDialog
+        initialValues={initialValues}
+        onConfirm={onConfirmDialog}
+        providerId={venueProvider.provider.id}
+        venueId={venueProvider.venueId}
+        offererId={offererId}
+      />
+    </DialogBuilder>
   )
 }
diff --git a/...enueSettings/VenueProvidersManager/VenueProviderList/CinemaProviderParameters.module.scss b/...enueSettings/VenueProvidersManager/VenueProviderList/CinemaProviderParameters.module.scss
diff --git a/...pages/VenueSettings/VenueProvidersManager/VenueProviderList/DeleteVenueProviderButton.tsx b/...pages/VenueSettings/VenueProvidersManager/VenueProviderList/DeleteVenueProviderButton.tsx
@@ -11,7 +11,7 @@ import { ButtonVariant } from 'ui-kit/Button/types'
 import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 
 import { DeleteVenueProviderDialog } from './DeleteVenueProviderDialog'
-import style from './VenueProviderItem.module.scss'
+import style from './ProviderActionButton.module.scss'
 
 interface DeleteVenueProviderButtonProps {
   venueProviderId: number