(PC-33118) feat(BookingDetails): ViewedBookingpage tracker

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/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,

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>

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({

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

@@ -210,6 +210,9 @@ export const getCtaWordingAndAction = ({
           params: { id: bookedOffers[offer.id] },
           fromRef: true,
         },
+        onPress: () => {
+          analytics.logViewedBookingPage({ offerId: offer.id, from: 'offer' })
+        },
         bottomBannerText: isMovieScreeningOffer ? BottomBannerTextEnum.ALREADY_BOOKED : undefined,
         movieScreeningUserData: {
           hasBookedOffer: true,
@@ -225,12 +228,12 @@ export const getCtaWordingAndAction = ({
           openUrl(booking?.completedUrl ?? '')
           return
         }
-
-        bookOffer({
-          quantity: 1,
-          // @ts-expect-error: because of noUncheckedIndexedAccess
-          stockId: offer.stocks[0].id,
-        })
+        if (offer.stocks[0]?.id) {
+          bookOffer({
+            quantity: 1,
+            stockId: offer.stocks[0].id,
+          })
+        }
       },
     }
   }
@@ -244,6 +247,9 @@ export const getCtaWordingAndAction = ({
         params: { id: bookedOffers[offer.id] },
         fromRef: true,
       },
+      onPress: () => {
+        analytics.logViewedBookingPage({ offerId: offer.id, from: 'offer' })
+      },
       bottomBannerText: isMovieScreeningOffer ? BottomBannerTextEnum.ALREADY_BOOKED : undefined,
       movieScreeningUserData: {
         hasBookedOffer: true,

src/libs/analytics/__mocks__/logEventAnalytics.ts

@@ -193,4 +193,5 @@ export const logEventAnalytics: typeof actualLogEventAnalytics = {
   logVideoPaused: jest.fn(),
   logDisplayAchievements: jest.fn(),
   logConsultAchievementModal: jest.fn(),
+  logViewedBookingPage: jest.fn(),
 }

src/libs/analytics/logEventAnalytics.ts

@@ -708,4 +708,6 @@ export const logEventAnalytics = {
     homeEntryId: string
     moduleId: string
   }) => analytics.logEvent({ firebase: AnalyticsEvent.VIDEO_PAUSED }, params),
+  logViewedBookingPage: (params: { from: Referrals; offerId: number }) =>
+    analytics.logEvent({ firebase: AnalyticsEvent.VIEWED_BOOKING_PAGE }, params),
 }

src/libs/firebase/analytics/events.ts

@@ -32,6 +32,7 @@ export enum AnalyticsEvent {
   CONFIRM_BOOKING_CANCELLATION = 'ConfirmBookingCancellation',
   CONNECTION_INFO = 'ConnectionInfo',
   CONSULT_ACCESSIBILITY_MODALITIES = 'ConsultAccessibilityModalities',
+  CONSULT_ACHIEVEMENT_MODAL = 'ConsultAchievementModale',
   CONSULT_ACHIEVEMENTS_SUCCESS_MODAL = 'ConsultAchievementsSuccessModal',
   CONSULT_APPLICATION_PROCESSING_MODAL = 'ConsultApplicationProcessingModal',
   CONSULT_ARTICLE_ACCOUNT_DELETION = 'ConsultArticleAccountDeletion',
@@ -72,6 +73,7 @@ export enum AnalyticsEvent {
   DISMISS_ACCOUNT_SECURITY = 'DismissAccountSecurity',
   DISMISS_NOTIFICATIONS = 'DismissNotifications',
   DISMISS_SHARE_APP = 'DismissShareApp',
+  DISPLAY_ACHIEVEMENTS = 'DisplayAchievements',
   DISPLAY_FORCED_LOGIN_HELP_MESSAGE = 'DisplayForcedLoginHelpMessage',
   ERROR_SAVING_NEW_EMAIL = 'ErrorSavingNewMail',
   EXCLUSIVITY_BLOCK_CLICKED = 'ExclusivityBlockClicked',
@@ -179,8 +181,7 @@ export enum AnalyticsEvent {
   VENUE_SEE_ALL_OFFERS_CLICKED = 'VenueSeeAllOffersClicked',
   VENUE_SEE_MORE_CLICKED = 'VenueSeeMoreClicked',
   VIDEO_PAUSED = 'VideoPaused',
-  DISPLAY_ACHIEVEMENTS = 'DisplayAchievements',
-  CONSULT_ACHIEVEMENT_MODAL = 'ConsultAchievementModale',
+  VIEWED_BOOKING_PAGE = 'ViewedBookingPage',
 }
 
 const RESERVED_PREFIXES = ['firebase_', 'google_', 'ga_']