wip

src/features/offer/components/OfferCine/CineContentCTA.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react'
+import styled from 'styled-components/native'
+
+import { useOfferCTA } from 'features/offer/components/OfferContent/OfferCTAProvider'
+import { ButtonWithLinearGradient } from 'ui/components/buttons/buttonWithLinearGradient/ButtonWithLinearGradient'
+import { StickyBottomWrapper } from 'ui/components/StickyBottomWrapper/StickyBottomWrapper'
+import { Spacer } from 'ui/theme'
+
+export const CineContentCTA: FC = () => {
+  const { onPress, wording } = useOfferCTA()
+
+  return (
+    <StickyBottomWrapper>
+      <CallToActionContainer>
+        <Spacer.Column numberOfSpaces={6} />
+        <ButtonWithLinearGradient wording={wording} onPress={onPress} />
+        <Spacer.Column numberOfSpaces={6} />
+      </CallToActionContainer>
+    </StickyBottomWrapper>
+  )
+}
+
+const CallToActionContainer = styled.View(({ theme }) => ({
+  alignSelf: 'center',
+  paddingHorizontal: theme.contentPage.marginHorizontal,
+  width: '100%',
+  ...(!theme.isMobileViewport && {
+    maxWidth: theme.contentPage.maxWidth,
+  }),
+}))

src/features/offer/components/OfferCine/OfferCineBlock.tsx

@@ -1,11 +1,15 @@
-import React, { FC } from 'react'
+import React, { FC, useEffect } from 'react'
 import { View, ViewStyle } from 'react-native'
+import { InView } from 'react-native-intersection-observer'
 import styled, { useTheme } from 'styled-components/native'
 
 import { OfferResponseV2 } from 'api/gen'
 import { MovieCalendarProvider } from 'features/offer/components/MoviesScreeningCalendar/MovieCalendarContext'
 import { OfferCineContent } from 'features/offer/components/OfferCine/OfferCineContent'
+import { useOfferCTA } from 'features/offer/components/OfferContent/OfferCTAProvider'
 import { AppThemeType } from 'theme'
+import { Anchor } from 'ui/components/anchor/Anchor'
+import { useScrollToAnchor } from 'ui/components/anchor/AnchorContext'
 import { getSpacing, Spacer, TypoDS } from 'ui/theme'
 import { getHeadingAttrs } from 'ui/theme/typographyAttrs/getHeadingAttrs'
 
@@ -17,12 +21,27 @@ type Props = {
 
 export const OfferCineBlock: FC<Props> = ({ title, onSeeVenuePress, offer }) => {
   const theme = useTheme()
+  const { setButton, showButton } = useOfferCTA()
+  const scrollToAnchor = useScrollToAnchor()
+
+  useEffect(() => {
+    setButton('Accéder aux séances', () => {
+      scrollToAnchor('offer-cine-availabilities')
+    })
+  }, [scrollToAnchor, setButton])
 
   return (
     <Container testID="offer-new-xp-cine-block">
-      <TitleContainer>
-        <TypoDS.Title3 {...getHeadingAttrs(2)}>{title}</TypoDS.Title3>
-      </TitleContainer>
+      <Anchor name="offer-cine-availabilities">
+        <InView
+          onChange={(inView) => {
+            showButton(!inView)
+          }}>
+          <TitleContainer>
+            <TypoDS.Title3 {...getHeadingAttrs(2)}>{title}</TypoDS.Title3>
+          </TitleContainer>
+        </InView>
+      </Anchor>
       <Spacer.Column numberOfSpaces={4} />
       <MovieCalendarProvider nbOfDays={15} containerStyle={getCalendarStyle(theme)}>
         <OfferCineContent offer={offer} onSeeVenuePress={onSeeVenuePress} />

src/features/offer/components/OfferContent/OfferCTAProvider.tsx

@@ -0,0 +1,43 @@
+import React, { createContext, useContext, ReactNode, useState, useCallback, useMemo } from 'react'
+
+interface OfferCTAContextValue {
+  wording: string
+  onPress: () => void
+  setButton: (wording: string, onPress: () => void) => void
+  showButton: (isVisible: boolean) => void
+  isButtonVisible: boolean
+}
+
+const OfferCTAContext = createContext<OfferCTAContextValue | undefined>(undefined)
+
+interface OfferCTAProviderProps {
+  children: ReactNode
+}
+
+export const OfferCTAProvider: React.FC<OfferCTAProviderProps> = ({ children }) => {
+  const [wording, setWording] = useState<string>('')
+  const [isVisible, setIsVisible] = useState<boolean>(false)
+  const [onPress, setOnPress] = useState<() => void>(() => () => {
+    return
+  })
+
+  const setButton = useCallback((newWording: string, newOnPress: () => void) => {
+    setWording(newWording)
+    setOnPress(() => newOnPress)
+  }, [])
+
+  const value = useMemo(
+    () => ({ wording, onPress, setButton, showButton: setIsVisible, isButtonVisible: isVisible }),
+    [isVisible, onPress, setButton, wording]
+  )
+
+  return <OfferCTAContext.Provider value={value}>{children}</OfferCTAContext.Provider>
+}
+
+export const useOfferCTA = (): OfferCTAContextValue => {
+  const context = useContext(OfferCTAContext)
+  if (!context) {
+    throw new Error('useOfferCTAButton must be used within an OfferCTAProvider')
+  }
+  return context
+}

src/features/offer/components/OfferContent/OfferContent.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components/native'
 
 import { UseNavigationType } from 'features/navigation/RootNavigator/types'
 import { OfferContentBase } from 'features/offer/components/OfferContent/OfferContentBase'
+import { OfferCTAProvider } from 'features/offer/components/OfferContent/OfferCTAProvider'
 import { OfferCTAButton } from 'features/offer/components/OfferCTAButton/OfferCTAButton'
 import { useOfferBatchTracking } from 'features/offer/helpers/useOfferBatchTracking/useOfferBatchTracking'
 import { OfferContentProps } from 'features/offer/types'
@@ -18,11 +19,10 @@ export const OfferContent: FunctionComponent<OfferContentProps> = ({
   subcategory,
 }) => {
   const { navigate } = useNavigation<UseNavigationType>()
-  const { trackEventHasSeenOfferOnce } = useOfferBatchTracking(subcategory.id)
-
   const handlePress = (defaultIndex = 0) => {
     navigate('OfferPreview', { id: offer.id, defaultIndex })
   }
+  const { trackEventHasSeenOfferOnce } = useOfferBatchTracking(subcategory.id)
 
   const footer = useMemo(
     () => (
@@ -36,15 +36,17 @@ export const OfferContent: FunctionComponent<OfferContentProps> = ({
   )
 
   return (
-    <OfferContentBase
-      offer={offer}
-      searchGroupList={searchGroupList}
-      contentContainerStyle={CONTENT_CONTAINER_STYLE}
-      onOfferPreviewPress={handlePress}
-      footer={footer}
-      BodyWrapper={BodyWrapper}
-      subcategory={subcategory}
-    />
+    <OfferCTAProvider>
+      <OfferContentBase
+        offer={offer}
+        searchGroupList={searchGroupList}
+        contentContainerStyle={CONTENT_CONTAINER_STYLE}
+        onOfferPreviewPress={handlePress}
+        BodyWrapper={BodyWrapper}
+        footer={footer}
+        subcategory={subcategory}
+      />
+    </OfferCTAProvider>
   )
 }
 

src/features/offer/components/OfferContent/OfferContent.web.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components/native'
 
 import { OfferImageResponse } from 'api/gen'
 import { OfferContentBase } from 'features/offer/components/OfferContent/OfferContentBase'
+import { OfferCTAProvider } from 'features/offer/components/OfferContent/OfferCTAProvider'
 import { OfferCTAButton } from 'features/offer/components/OfferCTAButton/OfferCTAButton'
 import { useOfferBatchTracking } from 'features/offer/helpers/useOfferBatchTracking/useOfferBatchTracking'
 import { OfferContentProps } from 'features/offer/types'
@@ -53,22 +54,24 @@ export const OfferContent: FunctionComponent<OfferContentProps> = ({
   )
 
   return (
-    <React.Fragment>
-      <ImagesCarouselModal
-        hideModal={hideModal}
-        isVisible={visible}
-        imagesURL={offerImages}
-        defaultIndex={carouselDefaultIndex}
-      />
-      <StyledOfferContentBase
-        offer={offer}
-        searchGroupList={searchGroupList}
-        subcategory={subcategory}
-        onOfferPreviewPress={handlePress}
-        BodyWrapper={BodyWrapper}
-        footer={footer}
-      />
-    </React.Fragment>
+    <OfferCTAProvider>
+      <React.Fragment>
+        <ImagesCarouselModal
+          hideModal={hideModal}
+          isVisible={visible}
+          imagesURL={offerImages}
+          defaultIndex={carouselDefaultIndex}
+        />
+        <StyledOfferContentBase
+          offer={offer}
+          searchGroupList={searchGroupList}
+          subcategory={subcategory}
+          onOfferPreviewPress={handlePress}
+          BodyWrapper={BodyWrapper}
+          footer={footer}
+        />
+      </React.Fragment>
+    </OfferCTAProvider>
   )
 }
 

src/features/offer/components/OfferContent/OfferContentBase.tsx

@@ -19,8 +19,10 @@ import styled from 'styled-components/native'
 
 import { OfferImageResponse, OfferResponseV2 } from 'api/gen'
 import { OfferBody } from 'features/offer/components/OfferBody/OfferBody'
+import { useOfferCTA } from 'features/offer/components/OfferContent/OfferCTAProvider'
 import { OfferHeader } from 'features/offer/components/OfferHeader/OfferHeader'
 import { OfferImageContainer } from 'features/offer/components/OfferImageContainer/OfferImageContainer'
+import { CineContentCTA } from 'features/offer/components/OfferNewXPCine/CineContentCTA'
 import { OfferPlaylistList } from 'features/offer/components/OfferPlaylistList/OfferPlaylistList'
 import { OfferWebMetaHeader } from 'features/offer/components/OfferWebMetaHeader'
 import { useOfferBatchTracking } from 'features/offer/helpers/useOfferBatchTracking/useOfferBatchTracking'
@@ -59,6 +61,7 @@ export const OfferContentBase: FunctionComponent<OfferContentBaseProps> = ({
   } = useOfferPlaylist({ offer, offerSearchGroup: subcategory.searchGroupName, searchGroupList })
   const scrollViewRef = useRef<ScrollView>(null)
   const scrollYRef = useRef<number>(0)
+  const { isButtonVisible } = useOfferCTA()
 
   const logConsultWholeOffer = useFunctionOnce(() => {
     analytics.logConsultWholeOffer(offer.id)
@@ -120,9 +123,9 @@ export const OfferContentBase: FunctionComponent<OfferContentBaseProps> = ({
 
   return (
     <Container>
-      <OfferWebMetaHeader offer={offer} />
-      <OfferHeader title={offer.name} headerTransition={headerTransition} offer={offer} />
       <AnchorProvider scrollViewRef={scrollViewRef} handleCheckScrollY={handleCheckScrollY}>
+        <OfferWebMetaHeader offer={offer} />
+        <OfferHeader title={offer.name} headerTransition={headerTransition} offer={offer} />
         <ScrollViewContainer
           testID="offerv2-container"
           scrollEventThrottle={16}
@@ -152,8 +155,8 @@ export const OfferContentBase: FunctionComponent<OfferContentBaseProps> = ({
             apiRecoParamsOtherCategories={apiRecoParamsOtherCategories}
           />
         </ScrollViewContainer>
+        {isButtonVisible ? <CineContentCTA /> : footer}
       </AnchorProvider>
-      {footer}
     </Container>
   )
 }

src/features/offer/components/OfferPlace/OfferPlace.native.test.tsx

@@ -4,6 +4,7 @@ import React, { ComponentProps } from 'react'
 import { navigate } from '__mocks__/@react-navigation/native'
 import { OfferResponseV2, SubcategoryIdEnum } from 'api/gen'
 import { mockOffer } from 'features/bookOffer/fixtures/offer'
+import { OfferCTAProvider } from 'features/offer/components/OfferContent/OfferCTAProvider'
 import { OfferPlace, OfferPlaceProps } from 'features/offer/components/OfferPlace/OfferPlace'
 import { mockSubcategory } from 'features/offer/fixtures/mockSubcategory'
 import { analytics } from 'libs/analytics'
@@ -633,7 +634,14 @@ const renderOfferPlace = ({
   subcategory = mockSubcategory,
   isDesktopViewport,
 }: RenderOfferPlaceType) =>
-  render(reactQueryProviderHOC(<OfferPlace offer={offer} subcategory={subcategory} />), {
-    theme: { isDesktopViewport: isDesktopViewport ?? false },
-    wrapper: AnchorProvider,
-  })
+  render(
+    reactQueryProviderHOC(
+      <OfferCTAProvider>
+        <OfferPlace offer={offer} subcategory={subcategory} />
+      </OfferCTAProvider>
+    ),
+    {
+      theme: { isDesktopViewport: isDesktopViewport ?? false },
+      wrapper: AnchorProvider,
+    }
+  )