From e98ca70903ad70f3052bdba88458e476efb7460c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?In=C3=A8s=20Mouandjo=20Lob=C3=A9?= <158567429+imouandjolobe-pass@users.noreply.github.com> Date: Wed, 27 Nov 2024 19:30:14 +0100 Subject: [PATCH] feat: use new hook and new component to render properly formatted dates --- .../home/components/modules/OffersModule.tsx | 55 ++++--------------- .../RecommendationModule.native.test.tsx | 14 ----- .../modules/RecommendationModule.tsx | 49 ++++------------- .../modules/video/VideoMonoOfferTile.tsx | 5 +- .../modules/video/VideoMultiOfferTile.tsx | 5 +- .../components/tiles/HorizontalOfferTile.tsx | 17 ++---- 6 files changed, 32 insertions(+), 113 deletions(-) diff --git a/src/features/home/components/modules/OffersModule.tsx b/src/features/home/components/modules/OffersModule.tsx index 80959cbcd17..1ac208e3179 100644 --- a/src/features/home/components/modules/OffersModule.tsx +++ b/src/features/home/components/modules/OffersModule.tsx @@ -2,24 +2,19 @@ import React, { useCallback, useEffect, useMemo } from 'react' import { useAuthContext } from 'features/auth/context/AuthContext' import { useHomeRecommendedOffers } from 'features/home/api/useHomeRecommendedOffers' -import { HomeOfferTile } from 'features/home/components/HomeOfferTile' import { ModuleData, OffersModule as OffersModuleType, RecommendedOffersModule, } from 'features/home/types' import { getSearchStackConfig } from 'features/navigation/SearchStackNavigator/helpers' +import { OfferTileWrapper } from 'features/offer/components/OfferTile/OfferTileWrapper' import { useAdaptOffersPlaylistParameters } from 'libs/algolia/fetchAlgolia/fetchMultipleOffers/helpers/useAdaptOffersPlaylistParameters' import { analytics } from 'libs/analytics' import { ContentTypes } from 'libs/contentful/types' import { usePlaylistItemDimensionsFromLayout } from 'libs/contentful/usePlaylistItemDimensionsFromLayout' -import { useFeatureFlag } from 'libs/firebase/firestore/featureFlags/useFeatureFlag' -import { RemoteStoreFeatureFlags } from 'libs/firebase/firestore/types' import useFunctionOnce from 'libs/hooks/useFunctionOnce' import { useLocation } from 'libs/location' -import { formatDates } from 'libs/parsers/formatDates' -import { getDisplayPrice } from 'libs/parsers/getDisplayPrice' -import { useCategoryHomeLabelMapping, useCategoryIdMapping } from 'libs/subcategories' import { Offer } from 'shared/offer/types' import { PassPlaylist } from 'ui/components/PassPlaylist' import { CustomListRenderItem, ItemDimensions, RenderFooterItem } from 'ui/components/Playlist' @@ -38,7 +33,6 @@ export type OffersModuleProps = { const keyExtractor = (item: Offer) => item.objectID export const OffersModule = (props: OffersModuleProps) => { - const isNewOfferTileDisplayed = useFeatureFlag(RemoteStoreFeatureFlags.WIP_NEW_OFFER_TILE) const { displayParameters, offersModuleParameters, @@ -49,8 +43,6 @@ export const OffersModule = (props: OffersModuleProps) => { recommendationParameters, } = props const adaptedPlaylistParameters = useAdaptOffersPlaylistParameters() - const mapping = useCategoryIdMapping() - const labelMapping = useCategoryHomeLabelMapping() const { user } = useAuthContext() const { userLocation } = useLocation() @@ -103,40 +95,16 @@ export const OffersModule = (props: OffersModuleProps) => { : undefined const renderItem: CustomListRenderItem = useCallback( - ({ item, width, height }) => { - const timestampsInMillis = item.offer.dates?.map((timestampInSec) => timestampInSec * 1000) - return ( - - ) - }, - - [ - labelMapping, - mapping, - user?.isBeneficiary, - moduleName, - moduleId, - homeEntryId, - isNewOfferTileDisplayed, - ] + ({ item, width, height }) => ( + + ), + [moduleId, moduleName] ) const { itemWidth, itemHeight } = usePlaylistItemDimensionsFromLayout(displayParameters.layout) @@ -165,7 +133,6 @@ export const OffersModule = (props: OffersModuleProps) => { : false const offersToDisplay = hasRecommendationParameters ? hybridPlaylistItems : playlistItems - const shouldModuleBeDisplayed = offersToDisplay.length > 0 && offersToDisplay.length >= displayParameters.minOffers diff --git a/src/features/home/components/modules/RecommendationModule.native.test.tsx b/src/features/home/components/modules/RecommendationModule.native.test.tsx index 032094286ff..82b9066108c 100644 --- a/src/features/home/components/modules/RecommendationModule.native.test.tsx +++ b/src/features/home/components/modules/RecommendationModule.native.test.tsx @@ -41,20 +41,6 @@ describe('RecommendationModule', () => { mockServer.getApi('/v1/subcategories/v2', subcategoriesDataTest) }) - it('should display V2 playlist when FF activated', () => { - useFeatureFlagSpy.mockReturnValueOnce(true) - renderRecommendationModule() - - expect(screen.getAllByTestId('playlist-card-offer-v2')).toBeTruthy() - }) - - it('should NOT display V2 playlist when FF deactivated', () => { - useFeatureFlagSpy.mockReturnValueOnce(false) - renderRecommendationModule() - - expect(screen.queryByTestId('playlist-card-offer-v2')).not.toBeTruthy() - }) - it('should trigger logEvent "ModuleDisplayedOnHomepage" when shouldModuleBeDisplayed is true', async () => { renderRecommendationModule() diff --git a/src/features/home/components/modules/RecommendationModule.tsx b/src/features/home/components/modules/RecommendationModule.tsx index ee05db1bf56..85b52cb29fe 100644 --- a/src/features/home/components/modules/RecommendationModule.tsx +++ b/src/features/home/components/modules/RecommendationModule.tsx @@ -2,18 +2,13 @@ import React, { useCallback, useEffect } from 'react' import { useAuthContext } from 'features/auth/context/AuthContext' import { useHomeRecommendedOffers } from 'features/home/api/useHomeRecommendedOffers' -import { HomeOfferTile } from 'features/home/components/HomeOfferTile' import { RecommendedOffersModule } from 'features/home/types' +import { OfferTileWrapper } from 'features/offer/components/OfferTile/OfferTileWrapper' import { analytics } from 'libs/analytics' import { ContentTypes, DisplayParametersFields } from 'libs/contentful/types' import { usePlaylistItemDimensionsFromLayout } from 'libs/contentful/usePlaylistItemDimensionsFromLayout' -import { useFeatureFlag } from 'libs/firebase/firestore/featureFlags/useFeatureFlag' -import { RemoteStoreFeatureFlags } from 'libs/firebase/firestore/types' import useFunctionOnce from 'libs/hooks/useFunctionOnce' import { useLocation } from 'libs/location/LocationWrapper' -import { formatDates } from 'libs/parsers/formatDates' -import { getDisplayPrice } from 'libs/parsers/getDisplayPrice' -import { useCategoryHomeLabelMapping, useCategoryIdMapping } from 'libs/subcategories' import { Offer } from 'shared/offer/types' import { PassPlaylist } from 'ui/components/PassPlaylist' import { CustomListRenderItem } from 'ui/components/Playlist' @@ -29,12 +24,9 @@ type RecommendationModuleProps = { const keyExtractor = (item: Offer) => item.objectID export const RecommendationModule = (props: RecommendationModuleProps) => { - const isNewOfferTileDisplayed = useFeatureFlag(RemoteStoreFeatureFlags.WIP_NEW_OFFER_TILE) const { displayParameters, index, recommendationParameters, moduleId, homeEntryId } = props const { userLocation: position } = useLocation() const { user: profile } = useAuthContext() - const mapping = useCategoryIdMapping() - const labelMapping = useCategoryHomeLabelMapping() const { offers, recommendationApiParams } = useHomeRecommendedOffers( position, @@ -65,34 +57,17 @@ export const RecommendationModule = (props: RecommendationModuleProps) => { }, [shouldModuleBeDisplayed]) const renderItem: CustomListRenderItem = useCallback( - ({ item, width, height }) => { - const timestampsInMillis = item.offer.dates?.map((timestampInSec) => timestampInSec * 1000) - - return ( - - ) - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [profile?.isBeneficiary, labelMapping, mapping, recommendationApiParams] + ({ item, width, height }) => ( + + ), + [moduleId, moduleName, recommendationApiParams] ) const { itemWidth, itemHeight } = usePlaylistItemDimensionsFromLayout(displayParameters.layout) diff --git a/src/features/home/components/modules/video/VideoMonoOfferTile.tsx b/src/features/home/components/modules/video/VideoMonoOfferTile.tsx index 75f7be093a6..a6861cd352c 100644 --- a/src/features/home/components/modules/video/VideoMonoOfferTile.tsx +++ b/src/features/home/components/modules/video/VideoMonoOfferTile.tsx @@ -9,9 +9,9 @@ import { triggerConsultOfferLog } from 'libs/analytics/helpers/triggerLogConsult import { OfferAnalyticsParams } from 'libs/analytics/types' import { useFeatureFlag } from 'libs/firebase/firestore/featureFlags/useFeatureFlag' import { RemoteStoreFeatureFlags } from 'libs/firebase/firestore/types' -import { formatDates } from 'libs/parsers/formatDates' import { getDisplayPrice } from 'libs/parsers/getDisplayPrice' import { useCategoryHomeLabelMapping, useCategoryIdMapping } from 'libs/subcategories' +import { useOfferDates } from 'shared/hook/useOfferDates' import { Offer } from 'shared/offer/types' import { usePrePopulateOffer } from 'shared/offer/usePrePopulateOffer' import { OfferImage } from 'ui/components/tiles/OfferImage' @@ -42,8 +42,7 @@ export const VideoMonoOfferTile: FunctionComponent = ({ const prePopulateOffer = usePrePopulateOffer() const theme = useTheme() - const timestampsInMillis = offer.offer.dates?.map((timestampInSec) => timestampInSec * 1000) - const displayDate = formatDates(timestampsInMillis) + const displayDate = useOfferDates(offer) const displayPrice = getDisplayPrice(offer?.offer?.prices) diff --git a/src/features/home/components/modules/video/VideoMultiOfferTile.tsx b/src/features/home/components/modules/video/VideoMultiOfferTile.tsx index 5ede68a247e..4d311d7b4e1 100644 --- a/src/features/home/components/modules/video/VideoMultiOfferTile.tsx +++ b/src/features/home/components/modules/video/VideoMultiOfferTile.tsx @@ -9,9 +9,9 @@ import { OfferAnalyticsParams } from 'libs/analytics/types' import { useFeatureFlag } from 'libs/firebase/firestore/featureFlags/useFeatureFlag' import { RemoteStoreFeatureFlags } from 'libs/firebase/firestore/types' import { useDistance } from 'libs/location/hooks/useDistance' -import { formatDates } from 'libs/parsers/formatDates' import { getDisplayPrice } from 'libs/parsers/getDisplayPrice' import { useCategoryHomeLabelMapping, useCategoryIdMapping } from 'libs/subcategories' +import { useOfferDates } from 'shared/hook/useOfferDates' import { Offer } from 'shared/offer/types' import { usePrePopulateOffer } from 'shared/offer/usePrePopulateOffer' import { OfferImage } from 'ui/components/tiles/OfferImage' @@ -39,8 +39,7 @@ export const VideoMultiOfferTile: FunctionComponent = ({ const displayPrice = getDisplayPrice(offer?.offer?.prices) - const timestampsInMillis = offer.offer.dates?.map((timestampInSec) => timestampInSec * 1000) - const displayDate = formatDates(timestampsInMillis) + const displayDate = useOfferDates(offer) const displayDistance = useDistance(offer._geoloc) diff --git a/src/ui/components/tiles/HorizontalOfferTile.tsx b/src/ui/components/tiles/HorizontalOfferTile.tsx index 16a5c7f6976..47984a6fd82 100644 --- a/src/ui/components/tiles/HorizontalOfferTile.tsx +++ b/src/ui/components/tiles/HorizontalOfferTile.tsx @@ -2,16 +2,15 @@ import React, { useMemo } from 'react' import { StyleProp, ViewStyle } from 'react-native' import styled from 'styled-components/native' -import { SubcategoryIdEnum } from 'api/gen' import { useLogClickOnOffer } from 'libs/algolia/analytics/logClickOnOffer' import { triggerConsultOfferLog } from 'libs/analytics/helpers/triggerLogConsultOffer/triggerConsultOfferLog' import { OfferAnalyticsParams } from 'libs/analytics/types' import { useDistance } from 'libs/location/hooks/useDistance' -import { formatDates, formatReleaseDate } from 'libs/parsers/formatDates' import { getDisplayPrice } from 'libs/parsers/getDisplayPrice' import { useSubcategory } from 'libs/subcategories' import { useSearchGroupLabel } from 'libs/subcategories/useSearchGroupLabel' import { tileAccessibilityLabel, TileContentType } from 'libs/tileAccessibilityLabel' +import { useOfferDates } from 'shared/hook/useOfferDates' import { Offer } from 'shared/offer/types' import { usePrePopulateOffer } from 'shared/offer/usePrePopulateOffer' import { useNativeCategoryValue } from 'ui/components/tiles/useNativeCategoryValue' @@ -38,24 +37,16 @@ export const HorizontalOfferTile = ({ ...horizontalTileProps }: Props) => { const { offer: offerDetails, objectID, _geoloc } = offer - const { subcategoryId, dates, prices, thumbUrl, name, releaseDate } = offerDetails + const { subcategoryId, prices, thumbUrl, name } = offerDetails const prePopulateOffer = usePrePopulateOffer() const distanceToOffer = useDistance(_geoloc) const { categoryId, searchGroupName, nativeCategoryId } = useSubcategory(subcategoryId) const searchGroupLabel = useSearchGroupLabel(searchGroupName) const { logClickOnOffer } = useLogClickOnOffer() - const isOfferAMovieScreeningWithAReleaseDate = - subcategoryId === SubcategoryIdEnum.SEANCE_CINE && - releaseDate && - typeof releaseDate === 'number' // we do this because for now, some offers' releaseDate attribute have the wrong type - - const timestampsInMillis = dates?.map((timestampInSec) => timestampInSec * 1000) const offerId = Number(objectID) - const formattedDate = isOfferAMovieScreeningWithAReleaseDate - ? formatReleaseDate(releaseDate * 1000) - : formatDates(timestampsInMillis) + const formattedDate = useOfferDates(offer) const formattedPrice = getDisplayPrice(prices) const nativeCategoryValue = useNativeCategoryValue({ nativeCategoryId }) @@ -133,6 +124,8 @@ const Container = styled(InternalTouchableLink)({ alignItems: 'center', outlineOffset: 0, gap: getSpacing(4), + border: 2, + borderColor: 'blue', }) const Body = styled(TypoDS.Body)(({ theme }) => ({