(PC-33118) feat(Booking): ViewedBookingPage tracker

__snapshots__/features/bookOffer/pages/BookingConfirmation.native.test.tsx.native-snap

@@ -122,6 +122,7 @@ exports[`<BookingConfirmation /> should render correctly 1`] = `
     style={
       [
         {
+          "gap": 16,
           "paddingBottom": 40,
         },
       ]
@@ -213,16 +214,6 @@ exports[`<BookingConfirmation /> should render correctly 1`] = `
         </Text>
       </View>
     </View>
-    <View
-      numberOfSpaces={4}
-      style={
-        [
-          {
-            "height": 16,
-          },
-        ]
-      }
-    />
     <View
       accessibilityLabel="Partager l’offre"
       accessibilityState={
@@ -313,16 +304,6 @@ exports[`<BookingConfirmation /> should render correctly 1`] = `
         </Text>
       </View>
     </View>
-    <View
-      numberOfSpaces={4}
-      style={
-        [
-          {
-            "height": 16,
-          },
-        ]
-      }
-    />
     <View
       accessibilityLabel="Retourner à l’accueil"
       accessibilityState={

scripts/noUncheckedIndexedAccess_snapshot.txt

@@ -51,8 +51,7 @@
 ./src/features/offer/components/VenueSelectionListItem/VenueSelectionListItem.web.tsx:81
 ./src/features/offer/components/VenueSelectionListItem/VenueSelectionListItem.web.tsx:83
 ./src/features/offer/components/VenueSelectionListItem/VenueSelectionListItem.web.tsx:85
-./src/features/offer/helpers/useCtaWordingAndAction/useCtaWordingAndAction.native.test.ts:927
-./src/features/offer/helpers/useCtaWordingAndAction/useCtaWordingAndAction.ts:231
+./src/features/offer/helpers/useCtaWordingAndAction/useCtaWordingAndAction.native.test.ts:935
 ./src/features/profile/components/CreditInfo/CreditProgressBar.tsx:32
 ./src/features/search/components/sections/Accessibility/Accessibility.tsx:33
 ./src/features/search/pages/SuggestedPlacesOrVenues/SuggestedVenues.native.test.tsx:43

src/features/bookOffer/components/BookDateChoice.tsx

@@ -1,4 +1,6 @@
 import React, { useMemo } from 'react'
+import { View } from 'react-native'
+import styled from 'styled-components/native'
 
 import { OfferStockResponse } from 'api/gen'
 import { Calendar } from 'features/bookOffer/components/Calendar/Calendar'
@@ -7,7 +9,7 @@ import { useBookingContext } from 'features/bookOffer/context/useBookingContext'
 import { getDistinctPricesFromAllStock } from 'features/bookOffer/helpers/bookingHelpers/bookingHelpers'
 import { formatToCompleteFrenchDate } from 'libs/parsers/formatDates'
 import { TouchableOpacity } from 'ui/components/TouchableOpacity'
-import { Spacer, Typo, TypoDS } from 'ui/theme'
+import { Spacer, Typo, TypoDS, getSpacing } from 'ui/theme'
 import { getHeadingAttrs } from 'ui/theme/typographyAttrs/getHeadingAttrs'
 
 interface Props {
@@ -31,8 +33,7 @@ export const BookDateChoice = ({ stocks, userRemainingCredit }: Props) => {
   const buttonTitle = bookingState.date ? formatToCompleteFrenchDate(bookingState.date) : ''
 
   return (
-    <React.Fragment>
-      <Spacer.Column numberOfSpaces={6} />
+    <StyledView>
       <TypoDS.Title3 {...getHeadingAttrs(3)} testID="DateStep">
         Date
       </TypoDS.Title3>
@@ -50,6 +51,10 @@ export const BookDateChoice = ({ stocks, userRemainingCredit }: Props) => {
           <Typo.ButtonText>{buttonTitle}</Typo.ButtonText>
         </TouchableOpacity>
       )}
-    </React.Fragment>
+    </StyledView>
   )
 }
+
+const StyledView = styled(View)({
+  marginTop: getSpacing(6),
+})

src/features/bookOffer/pages/BookingConfirmation.native.test.tsx

@@ -123,12 +123,11 @@ describe('<BookingConfirmation />', () => {
       })
     })
 
-    it('should go to Bookings and log analytics event', async () => {
+    it('should go to Bookings when click on CTA', async () => {
       render(<BookingConfirmation />)
       fireEvent.press(screen.getByText('Voir ma réservation'))
 
       await waitFor(() => {
-        expect(analytics.logSeeMyBooking).toHaveBeenCalledWith(mockOfferId)
         expect(reset).toHaveBeenCalledWith({
           index: 1,
           routes: [
@@ -150,6 +149,27 @@ describe('<BookingConfirmation />', () => {
       })
     })
 
+    it('should log analytic logSeeMyBooking when click on CTA', async () => {
+      render(<BookingConfirmation />)
+      fireEvent.press(screen.getByText('Voir ma réservation'))
+
+      await waitFor(() => {
+        expect(analytics.logSeeMyBooking).toHaveBeenCalledWith(mockOfferId)
+      })
+    })
+
+    it('should log analytic logViewedBookingPage when click on CTA', async () => {
+      render(<BookingConfirmation />)
+      fireEvent.press(screen.getByText('Voir ma réservation'))
+
+      await waitFor(() => {
+        expect(analytics.logViewedBookingPage).toHaveBeenCalledWith({
+          offerId: mockOfferId,
+          from: 'bookingconfirmation',
+        })
+      })
+    })
+
     it.each(['Voir ma réservation', 'Retourner à l’accueil'])(
       'should track Batch event when button is clicked',
       async (buttonWording) => {

src/features/bookOffer/pages/BookingConfirmation.tsx

@@ -37,6 +37,7 @@ export function BookingConfirmation() {
 
   const displayBookingDetails = useCallback(() => {
     analytics.logSeeMyBooking(params.offerId)
+    analytics.logViewedBookingPage({ offerId: params.offerId, from: 'bookingconfirmation' })
     trackBooking()
     reset({
       index: 1,
@@ -91,9 +92,7 @@ export function BookingConfirmation() {
         <Spacer.Flex />
         <ButtonContainer>
           <ButtonPrimary key={1} wording="Voir ma réservation" onPress={displayBookingDetails} />
-          <Spacer.Column numberOfSpaces={4} />
           <ButtonSecondary wording="Partager l’offre" onPress={pressShareOffer} />
-          <Spacer.Column numberOfSpaces={4} />
           <InternalTouchableLink
             key={2}
             as={ButtonTertiaryPrimary}
@@ -122,4 +121,5 @@ const StyledBody = styled(Typo.Body)({
 
 const ButtonContainer = styled.View({
   paddingBottom: getSpacing(10),
+  gap: getSpacing(4),
 })

src/features/bookings/components/EndedBookingItem.native.test.tsx

@@ -127,6 +127,22 @@ describe('EndedBookingItem', () => {
     })
   })
 
+  it('should log logViewedBookingPage when click on offer digital without expiration date and not cancelled', async () => {
+    renderEndedBookingItem({
+      ...bookingsSnap.ended_bookings[0],
+      cancellationDate: null,
+      cancellationReason: null,
+    })
+
+    const item = screen.getByText('Réservation archivée')
+    await user.press(item)
+
+    expect(analytics.logViewedBookingPage).toHaveBeenCalledWith({
+      offerId: bookingsSnap.ended_bookings[0].stock.offer.id,
+      from: 'endedbookings',
+    })
+  })
+
   it('should call share when press share icon', async () => {
     renderEndedBookingItem({
       ...bookingsSnap.ended_bookings[0],

src/features/bookings/components/EndedBookingItem.tsx

@@ -55,6 +55,11 @@ export const EndedBookingItem = ({
   function handlePressOffer() {
     const { offer } = stock
     if (!offer.id) return
+    if (shouldRedirectToBooking)
+      analytics.logViewedBookingPage({
+        offerId: stock.offer.id,
+        from: 'endedbookings',
+      })
     if (isEligibleBookingsForArchiveValue) return
     if (netInfo.isConnected) {
       // We pre-populate the query-cache with the data from the search result for a smooth transition

src/features/bookings/components/OnGoingBookingItem.native.test.tsx

@@ -9,7 +9,7 @@ import { FREE_OFFER_CATEGORIES_TO_ARCHIVE } from 'features/bookings/constants'
 import { bookingsSnap } from 'features/bookings/fixtures/bookingsSnap'
 import { Booking } from 'features/bookings/types'
 import { analytics } from 'libs/analytics'
-import { fireEvent, render, screen } from 'tests/utils'
+import { fireEvent, render, screen, waitFor } from 'tests/utils'
 
 import { OnGoingBookingItem } from './OnGoingBookingItem'
 
@@ -25,13 +25,29 @@ describe('OnGoingBookingItem', () => {
 
   const initialBooking: Booking = bookingsSnap.ongoing_bookings[0]
 
-  it('should navigate to the booking details page', () => {
+  it('should navigate to the booking details page', async () => {
     renderOnGoingBookingItem(initialBooking)
 
     const item = screen.getByTestId(/Réservation de l’offre/)
     fireEvent.press(item)
 
-    expect(navigate).toHaveBeenCalledWith('BookingDetails', { id: 123 })
+    await waitFor(() => {
+      expect(navigate).toHaveBeenCalledWith('BookingDetails', { id: 123 })
+    })
+  })
+
+  it('should log analytic logViewedBookingPage when click on CTA', async () => {
+    renderOnGoingBookingItem(initialBooking)
+
+    const item = screen.getByTestId(/Réservation de l’offre/)
+    fireEvent.press(item)
+
+    await waitFor(() => {
+      expect(analytics.logViewedBookingPage).toHaveBeenCalledWith({
+        offerId: initialBooking.stock.offer.id,
+        from: 'bookings',
+      })
+    })
   })
 
   describe('should be on site withdrawal ticket event', () => {

src/features/bookings/components/OnGoingBookingItem.tsx

@@ -69,6 +69,12 @@ export const OnGoingBookingItem = ({ booking, eligibleBookingsForArchive }: Prop
     <React.Fragment>
       <ContentContainer
         navigateTo={{ screen: 'BookingDetails', params: { id: booking.id } }}
+        onBeforeNavigate={() => {
+          analytics.logViewedBookingPage({
+            offerId: stock.offer.id,
+            from: 'bookings',
+          })
+        }}
         accessibilityLabel={accessibilityLabel}>
         <OfferImage imageUrl={stock.offer.image?.url} categoryId={categoryId} size="tall" />
         <AttributesView>
@@ -81,15 +87,13 @@ export const OnGoingBookingItem = ({ booking, eligibleBookingsForArchive }: Prop
               {stock.offer.withdrawalType === WithdrawalTypeEnum.on_site ? (
                 <WithdrawContainer testID="on-site-withdrawal-container">
                   <OfferEvent />
-                  <Spacer.Row numberOfSpaces={1} />
                   <OnSiteWithdrawalCaption numberOfLines={2}>
                     {withdrawLabel}
                   </OnSiteWithdrawalCaption>
                 </WithdrawContainer>
               ) : (
                 <WithdrawContainer testID="withdraw-container">
                   <Clock />
-                  <Spacer.Row numberOfSpaces={1} />
                   <WithdrawCaption numberOfLines={2}>{withdrawLabel}</WithdrawCaption>
                 </WithdrawContainer>
               )}
@@ -98,7 +102,6 @@ export const OnGoingBookingItem = ({ booking, eligibleBookingsForArchive }: Prop
           {canDisplayExpirationMessage ? (
             <ExpirationBookingContainer testID="expiration-booking-container">
               <Clock />
-              <Spacer.Row numberOfSpaces={1} />
               <ExpirationBookingLabel>{correctExpirationMessages}</ExpirationBookingLabel>
             </ExpirationBookingContainer>
           ) : null}
@@ -147,11 +150,13 @@ const DateLabel = styled(Typo.Body)(({ theme }) => ({
 }))
 
 const WithdrawCaption = styled(Typo.Caption)({
+  marginTop: getSpacing(1),
   marginRight: getSpacing(4),
 })
 
 const OnSiteWithdrawalCaption = styled(WithdrawCaption)(({ theme }) => ({
   color: theme.colors.primary,
+  marginTop: getSpacing(1),
 }))
 
 const Clock = styled(DefaultClock).attrs(({ theme }) => ({
@@ -172,6 +177,7 @@ const ExpirationBookingContainer = styled.View(({ theme }) => ({
 }))
 
 const ExpirationBookingLabel = styled(Typo.CaptionPrimary)({
+  marginTop: getSpacing(1),
   marginRight: getSpacing(4),
 })
 

src/features/bookings/components/OnGoingBookingItem.web.test.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { navigate } from '__mocks__/@react-navigation/native'
 import { bookingsSnap } from 'features/bookings/fixtures/bookingsSnap'
 import { Booking } from 'features/bookings/types'
-import { fireEvent, render, screen } from 'tests/utils/web'
+import { fireEvent, render, screen, waitFor } from 'tests/utils/web'
 
 import { OnGoingBookingItem } from './OnGoingBookingItem'
 
@@ -16,12 +16,14 @@ jest.mock('libs/firebase/remoteConfig/remoteConfig.services')
 describe('OnGoingBookingItem', () => {
   const booking: Booking = bookingsSnap.ongoing_bookings[0]
 
-  it('should navigate to the booking details page', () => {
+  it('should navigate to the booking details page', async () => {
     render(<OnGoingBookingItem booking={booking} />)
 
     const item = screen.getByTestId(/Réservation de l’offre/)
     fireEvent.click(item)
 
-    expect(navigate).toHaveBeenCalledWith('BookingDetails', { id: 123 })
+    await waitFor(() => {
+      expect(navigate).toHaveBeenCalledWith('BookingDetails', { id: 123 })
+    })
   })
 })

src/features/offer/helpers/useCtaWordingAndAction/useCtaWordingAndAction.native.test.ts

@@ -838,34 +838,42 @@ describe('getCtaWordingAndAction', () => {
       })
     })
 
-    it('should return bottomBannerText and wording if user has already booked this offer', async () => {
-      const result = getCtaWordingAndAction({
-        ...defaultParameters,
-        userStatus: { statusType: YoungStatusType.beneficiary },
-        isBeneficiary: true,
-        offer: CineScreeningOffer,
-        bookedOffers: { [baseOffer.id]: 116656 },
-        subcategory: buildSubcategory({ isEvent: true }),
-        hasEnoughCredit: true,
-      })
+    it.each<{ isEvent: boolean }>([{ isEvent: true }, { isEvent: false }])(
+      'should return bottomBannerText and wording if user has already booked this offer',
+      async (isOfferEvent) => {
+        const result = getCtaWordingAndAction({
+          ...defaultParameters,
+          userStatus: { statusType: YoungStatusType.beneficiary },
+          isBeneficiary: true,
+          offer: CineScreeningOffer,
+          bookedOffers: { [baseOffer.id]: 116656 },
+          subcategory: buildSubcategory(isOfferEvent),
+          hasEnoughCredit: true,
+        })
 
-      expect(result).toEqual({
-        wording: 'Voir ma réservation',
-        bottomBannerText: 'Tu ne peux réserver ce film qu’une seule fois.',
-        isDisabled: false,
-        movieScreeningUserData: {
-          bookings: undefined,
-          hasBookedOffer: true,
-        },
-        navigateTo: {
-          fromRef: true,
-          params: {
-            id: 116656,
-          },
-          screen: 'BookingDetails',
-        },
-      })
-    })
+        expect(JSON.stringify(result)).toEqual(
+          JSON.stringify({
+            wording: 'Voir ma réservation',
+            isDisabled: false,
+            navigateTo: {
+              screen: 'BookingDetails',
+              params: {
+                id: 116656,
+              },
+              fromRef: true,
+            },
+            onPress: () => {
+              analytics.logViewedBookingPage({ offerId: CineScreeningOffer.id, from: 'offer' })
+            },
+            bottomBannerText: 'Tu ne peux réserver ce film qu’une seule fois.',
+            movieScreeningUserData: {
+              bookings: undefined,
+              hasBookedOffer: true,
+            },
+          })
+        )
+      }
+    )
 
     it('should display "Réserver l’offre" wording and modal "authentication" if user is not logged in', () => {
       const result = getCtaWordingAndAction({