Skip to content

Commit

Permalink
(PC-33784) feat(FF): remove wipNewExclusivityModule
Browse files Browse the repository at this point in the history
  • Loading branch information
@xlecunff-pass
xlecunff-pass committed Jan 24, 2025
1 parent 52b3fa5 commit 22db0d3
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 219 deletions.
114 changes: 12 additions & 102 deletions src/features/home/components/modules/ThematicHighlightModule.native.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
import mockDate from 'mockdate'
import React from 'react'

import { navigate } from '__mocks__/@react-navigation/native'
import {
ThematicHighlightModule,
ThematicHighlightModuleProps,
} from 'features/home/components/modules/ThematicHighlightModule'
import { formattedThematicHighlightModule } from 'features/home/fixtures/homepage.fixture'
import { analytics } from 'libs/analytics'
import { setFeatureFlags } from 'libs/firebase/firestore/featureFlags/__tests__/setFeatureFlags'
import { RemoteStoreFeatureFlags } from 'libs/firebase/firestore/types'
import { render, screen, userEvent } from 'tests/utils'

jest.useFakeTimers()
const CURRENT_DATE = new Date('2020-12-01T00:00:00.000Z')
const PASSED_DATE = new Date('2020-11-30T00:00:00.000Z')
mockDate.set(CURRENT_DATE)

const baseThematicHighlightModule = {
Expand All @@ -27,111 +24,24 @@ describe('ThematicHighlightModule', () => {
setFeatureFlags()
})

describe('old highlight module', () => {
it('should render if the ending date is not passed', () => {
renderThematicHighlightModule({
index: 0,
...baseThematicHighlightModule,
beginningDate: CURRENT_DATE,
endingDate: CURRENT_DATE,
})
const { id, toThematicHomeEntryId, homeEntryId } = baseThematicHighlightModule

expect(screen.getByText(formattedThematicHighlightModule.title)).toBeOnTheScreen()
})

it('should not render if the ending date is passed', () => {
renderThematicHighlightModule({
index: 0,
...baseThematicHighlightModule,
beginningDate: PASSED_DATE,
endingDate: PASSED_DATE,
})

expect(screen.queryByText(formattedThematicHighlightModule.title)).not.toBeOnTheScreen()
})

it('should log ModuleDisplayedOnHomePage event when seeing the module', () => {
renderThematicHighlightModule({
index: 0,
...baseThematicHighlightModule,
})

expect(analytics.logModuleDisplayedOnHomepage).toHaveBeenNthCalledWith(1, {
moduleId: '5Z1FGtRGbE3d1Q5oqHMfe9',
moduleType: 'thematicHighlight',
index: 0,
homeEntryId: '6nVZ7vaaOM8qOO7wqduuo1',
})
})

it('should not log ModuleDisplayedOnHomePage event when the module is passed (so not displayed)', () => {
renderThematicHighlightModule({
index: 0,
...baseThematicHighlightModule,
beginningDate: PASSED_DATE,
endingDate: PASSED_DATE,
})

expect(analytics.logModuleDisplayedOnHomepage).toHaveBeenCalledTimes(0)
})

it('should log HighlightBlockClicked event when pressing', async () => {
renderThematicHighlightModule({ index: 0, ...baseThematicHighlightModule })
const thematicHighlightModule = screen.getByText(formattedThematicHighlightModule.title)

await userEvent.press(thematicHighlightModule)

expect(analytics.logHighlightBlockClicked).toHaveBeenNthCalledWith(1, {
moduleId: '5Z1FGtRGbE3d1Q5oqHMfe9',
entryId: '6nVZ7vaaOM8qOO7wqduuo1',
toEntryId: '6DCThxvbPFKAo04SVRZtwY',
})
})

it('should navigate when pressing', async () => {
renderThematicHighlightModule({ index: 0, ...baseThematicHighlightModule })
const thematicHighlightModule = screen.getByText(formattedThematicHighlightModule.title)
it('should not display new version when feature flag is active', async () => {
renderThematicHighlightModule({ index: 0, ...baseThematicHighlightModule })

await userEvent.press(thematicHighlightModule)

expect(navigate).toHaveBeenNthCalledWith(1, 'ThematicHome', {
homeId: '6DCThxvbPFKAo04SVRZtwY',
from: 'highlight_thematic_block',
moduleId: '5Z1FGtRGbE3d1Q5oqHMfe9',
})
})

it('should not display new version when feature flag is not active', async () => {
renderThematicHighlightModule({ index: 0, ...baseThematicHighlightModule })

expect(screen.queryByTestId('new-highlight-module-container')).not.toBeOnTheScreen()
})
expect(screen.getByTestId('new-highlight-module-container')).toBeOnTheScreen()
})

describe('new highlight module', () => {
const { id, toThematicHomeEntryId, homeEntryId } = baseThematicHighlightModule

beforeAll(() => {
setFeatureFlags([RemoteStoreFeatureFlags.WIP_NEW_HIGHLIGHT_THEMATIC_MODULE])
})

it('should not display new version when feature flag is active', async () => {
renderThematicHighlightModule({ index: 0, ...baseThematicHighlightModule })

expect(screen.getByTestId('new-highlight-module-container')).toBeOnTheScreen()
})

it('should log HighlightBlockClicked event when pressing', async () => {
renderThematicHighlightModule({ index: 0, ...baseThematicHighlightModule })
const thematicHighlightModule = screen.getByText(baseThematicHighlightModule.title)
it('should log HighlightBlockClicked event when pressing', async () => {
renderThematicHighlightModule({ index: 0, ...baseThematicHighlightModule })
const thematicHighlightModule = screen.getByText(baseThematicHighlightModule.title)

await userEvent.press(thematicHighlightModule)
await userEvent.press(thematicHighlightModule)

expect(analytics.logHighlightBlockClicked).toHaveBeenNthCalledWith(1, {
moduleId: id,
entryId: homeEntryId,
toEntryId: toThematicHomeEntryId,
})
expect(analytics.logHighlightBlockClicked).toHaveBeenNthCalledWith(1, {
moduleId: id,
entryId: homeEntryId,
toEntryId: toThematicHomeEntryId,
})
})
})
Expand Down
127 changes: 11 additions & 116 deletions src/features/home/components/modules/ThematicHighlightModule.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,11 @@
import colorAlpha from 'color-alpha'
import { isBefore } from 'date-fns'
import React, { FunctionComponent, useEffect } from 'react'
import styled from 'styled-components/native'

import { BlackGradient } from 'features/home/components/BlackGradient'
import { TEXT_BACKGROUND_OPACITY } from 'features/home/components/constants'
import { computeDateRangeDisplay } from 'features/home/components/helpers/computeDateRangeDisplay'
import { MarketingBlockHighlight } from 'features/home/components/modules/marketing/MarketingBlockHighlight'
import { analytics } from 'libs/analytics'
import { ContentTypes } from 'libs/contentful/types'
import { useFeatureFlag } from 'libs/firebase/firestore/featureFlags/useFeatureFlag'
import { RemoteStoreFeatureFlags } from 'libs/firebase/firestore/types'
import { theme } from 'theme'
import { InternalTouchableLink } from 'ui/components/touchableLink/InternalTouchableLink'
import { PlainArrowNext } from 'ui/svg/icons/PlainArrowNext'
import { getSpacing, Spacer, TypoDS } from 'ui/theme'

const TILE_HEIGHT = 244

export type ThematicHighlightModuleProps = {
id: string
Expand Down Expand Up @@ -44,10 +33,6 @@ export const ThematicHighlightModule: FunctionComponent<ThematicHighlightModuleP
const isAlreadyEnded = isBefore(endingDate, new Date())
const shouldHideModule = isAlreadyEnded

const isNewHighlightModule = useFeatureFlag(
RemoteStoreFeatureFlags.WIP_NEW_HIGHLIGHT_THEMATIC_MODULE
)

useEffect(() => {
!shouldHideModule &&
analytics.logModuleDisplayedOnHomepage({
Expand All @@ -62,10 +47,6 @@ export const ThematicHighlightModule: FunctionComponent<ThematicHighlightModuleP

if (shouldHideModule) return null

const navigateTo = {
screen: 'ThematicHome',
params: { homeId: toThematicHomeEntryId, from: 'highlight_thematic_block', moduleId: id },
}
const dateRange = computeDateRangeDisplay(beginningDate, endingDate)

const sendAnalyticsOnPress = () =>
Expand All @@ -77,107 +58,21 @@ export const ThematicHighlightModule: FunctionComponent<ThematicHighlightModuleP

return (
<React.Fragment>
{isNewHighlightModule ? (
<Container testID="new-highlight-module-container">
<MarketingBlockHighlight
homeId={toThematicHomeEntryId}
backgroundImageUrl={imageUrl}
moduleId={id}
title={title}
subtitle={dateRange}
label={subtitle}
onBeforeNavigate={sendAnalyticsOnPress}
/>
</Container>
) : (
<StyledInternalTouchableLink
navigateTo={navigateTo}
onBeforeNavigate={sendAnalyticsOnPress}>
<ImageBackground source={{ uri: imageUrl }}>
<DateRangeCaptionContainer>
<DateRangeCaption>{dateRange}</DateRangeCaption>
</DateRangeCaptionContainer>
<TextContainer>
<BlackGradient />
<BlackBackground>
{subtitle ? (
<React.Fragment>
<Subtitle numberOfLines={1}>{subtitle}</Subtitle>
<Spacer.Column numberOfSpaces={1} />
</React.Fragment>
) : null}
<TitleContainer>
<Title numberOfLines={1}>{title}</Title>
<IconContainer>
<PlainArrowNext size={theme.icons.sizes.standard} color={theme.colors.white} />
</IconContainer>
</TitleContainer>
</BlackBackground>
</TextContainer>
</ImageBackground>
</StyledInternalTouchableLink>
)}
<Container testID="new-highlight-module-container">
<MarketingBlockHighlight
homeId={toThematicHomeEntryId}
backgroundImageUrl={imageUrl}
moduleId={id}
title={title}
subtitle={dateRange}
label={subtitle}
onBeforeNavigate={sendAnalyticsOnPress}
/>
</Container>
</React.Fragment>
)
}

const Container = styled.View(({ theme }) => ({
marginBottom: theme.home.spaceBetweenModules,
}))

const StyledInternalTouchableLink = styled(InternalTouchableLink).attrs(({ theme }) => ({
hoverUnderlineColor: theme.colors.white,
}))(({ theme }) => ({
height: TILE_HEIGHT,
marginHorizontal: theme.contentPage.marginHorizontal,
marginBottom: theme.home.spaceBetweenModules,
}))

const ImageBackground = styled.ImageBackground({
height: '100%',
overflow: 'hidden',
borderRadius: getSpacing(2),
})

const DateRangeCaptionContainer = styled.View(({ theme }) => ({
position: 'absolute',
top: 0,
right: 0,
backgroundColor: theme.colors.black,
borderTopRightRadius: getSpacing(2),
borderBottomLeftRadius: getSpacing(2),
paddingVertical: getSpacing(1),
paddingHorizontal: getSpacing(2),
}))

const DateRangeCaption = styled(TypoDS.BodyAccentXs)(({ theme }) => ({
color: theme.colors.white,
}))

const TextContainer = styled.View({ position: 'absolute', bottom: 0, left: 0, right: 0 })

const BlackBackground = styled.View(({ theme }) => ({
paddingHorizontal: getSpacing(4),
paddingBottom: getSpacing(4),
backgroundColor: colorAlpha(theme.colors.black, TEXT_BACKGROUND_OPACITY),
}))

const Title = styled(TypoDS.Title3)(({ theme }) => ({
color: theme.colors.white,
flexShrink: 1,
}))

const Subtitle = styled(TypoDS.Body)(({ theme }) => ({
color: theme.colors.white,
}))

const IconContainer = styled.View({
flexShrink: 0,
marginLeft: getSpacing(2),
})

const TitleContainer = styled.View({
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
})
1 change: 0 additions & 1 deletion src/libs/firebase/firestore/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,6 @@ export enum RemoteStoreFeatureFlags {
WIP_ENABLE_NEW_XP_CINE_FROM_VENUE = 'wipEnableNewXpCineFromVenue',
WIP_FLING_BOTTOM_SHEET_NAVIGATE_TO_VENUE = 'wipFlingBottomSheetNavigateToVenue',
WIP_NEW_EXCLUSIVITY_MODULE = 'wipNewExclusivityModule',
WIP_NEW_HIGHLIGHT_THEMATIC_MODULE = 'wipNewHighlightThematicModule',
WIP_NEW_HOME_MODULE_SIZES = 'wipNewHomeModuleSizes',
WIP_NEW_OFFER_TILE = 'wipNewOfferTile',
WIP_OFFER_CHRONICLE_SECTION = 'wipOfferChronicleSection',
Expand Down

0 comments on commit 22db0d3

Please sign in to comment.