(PC-34793) feat(BookingPage): disposal forbidden banner

src/features/bookings/components/BookingDetailsContent.tsx

@@ -1,4 +1,6 @@
 import React from 'react'
+import { ScrollView } from 'react-native'
+import styled from 'styled-components/native'
 
 import { BookingOfferResponseAddress, BookingReponse, BookingVenueResponse } from 'api/gen'
 import { TicketCutout } from 'features/bookings/components/TicketCutout'
@@ -7,6 +9,7 @@ import { BookingProperties } from 'features/bookings/types'
 import { VenueBlockAddress, VenueBlockVenue } from 'features/offer/components/OfferVenueBlock/type'
 import { VenueBlockWithItinerary } from 'features/offer/components/OfferVenueBlock/VenueBlockWithItinerary'
 import { formatFullAddress } from 'shared/address/addressFormatter'
+import { ErrorBanner } from 'ui/components/banners/ErrorBanner'
 import { InfoBanner } from 'ui/components/banners/InfoBanner'
 import { IdCard } from 'ui/svg/icons/IdCard'
 import { getSpacing, TypoDS } from 'ui/theme'
@@ -30,30 +33,36 @@ export const BookingDetailsContent = ({
     !!offerFullAddress && (properties.isEvent || (properties.isPhysical && !properties.isDigital))
 
   const { hourLabel, dayLabel } = getBookingLabels(booking, properties)
+
   return (
-    <TicketCutout
-      hour={hourLabel == '' ? undefined : hourLabel}
-      day={dayLabel == '' ? undefined : dayLabel}
-      isDuo={properties.isDuo}
-      venueInfo={
-        <VenueBlockWithItinerary
-          shouldDisplayItineraryButton={shouldDisplayItineraryButton}
-          offerFullAddress={offerFullAddress}
-          venue={getVenueBlockVenue(booking.stock.offer.venue)}
-          address={getVenueBlockAddress(booking.stock.offer.address)}
-          offerId={offer.id}
-          thumbnailSize={VENUE_THUMBNAIL_SIZE}
-        />
-      }
-      title={offer.name}
-      infoBanner={
-        <InfoBanner
-          message="Tu auras besoin de ta carte d’identité pour accéder à l’évènement."
-          icon={IdCard}
-        />
-      }>
-      <TypoDS.Body>qrcode</TypoDS.Body>
-    </TicketCutout>
+    <ScrollView>
+      <TicketCutout
+        hour={hourLabel == '' ? undefined : hourLabel}
+        day={dayLabel == '' ? undefined : dayLabel}
+        isDuo={properties.isDuo}
+        venueInfo={
+          <VenueBlockWithItinerary
+            shouldDisplayItineraryButton={shouldDisplayItineraryButton}
+            offerFullAddress={offerFullAddress}
+            venue={getVenueBlockVenue(booking.stock.offer.venue)}
+            address={getVenueBlockAddress(booking.stock.offer.address)}
+            offerId={offer.id}
+            thumbnailSize={VENUE_THUMBNAIL_SIZE}
+          />
+        }
+        title={offer.name}
+        infoBanner={
+          <InfoBanner
+            message="Tu auras besoin de ta carte d’identité pour accéder à l’évènement."
+            icon={IdCard}
+          />
+        }>
+        <TypoDS.Body>qrcode</TypoDS.Body>
+      </TicketCutout>
+      <ErrorBannerContainer>
+        <ErrorBanner message="Tu n’as pas le droit de céder ou de revendre ton billet." />
+      </ErrorBannerContainer>
+    </ScrollView>
   )
 }
 
@@ -66,3 +75,8 @@ function getVenueBlockAddress(
 ): VenueBlockAddress | undefined {
   return address ?? undefined
 }
+
+const ErrorBannerContainer = styled.View({
+  marginHorizontal: getSpacing(6),
+  marginTop: getSpacing(8),
+})

src/features/bookings/pages/BookingDetails/BookingDetails.native.test.tsx

@@ -741,6 +741,16 @@ describe('BookingDetails', () => {
       openItinerary.mockRestore()
       getBookingProperties.mockRestore()
     })
+
+    it('should display banner warning about disposal', async () => {
+      renderBookingDetails(ongoingBookings)
+
+      await screen.findByText(ongoingBookings.stock.offer.name)
+
+      expect(
+        screen.getByText('Tu n’as pas le droit de céder ou de revendre ton billet.')
+      ).toBeOnTheScreen()
+    })
   })
 })