wip

src/features/artist/components/ArtistPlaylist/ArtistPlaylist.tsx

@@ -31,15 +31,18 @@ export const ArtistPlaylist: FunctionComponent<ArtistPlaylistProps> = ({
   const labelMapping = useSubcategoryOfferLabelMapping()
   const { itemWidth, itemHeight } = usePlaylistItemDimensionsFromLayout('three-items')
 
+  const categoryLabel = offer.extraData?.bookFormat || labelMapping[offer.subcategoryId] || ''
+  const categoryId = categoryMapping[offer.subcategoryId]
+
   return items.length > 0 ? (
     <PassPlaylist
       playlistType={PlaylistType.SAME_ARTIST_PLAYLIST}
       title="Toutes ses offres disponibles"
       data={items}
       renderItem={OfferPlaylistItem({
         offer,
-        categoryMapping,
-        labelMapping,
+        categoryId,
+        categoryLabel,
         currency,
         euroToPacificFrancRate,
         variant: 'new',

src/features/artist/components/ArtistTopOffers/ArtistTopOffers.tsx

@@ -22,15 +22,21 @@ const renderItem = ({
 }: {
   item: HitOfferWithArtistAndEan
   artistName: string
-}) => (
-  <HorizontalOfferTile
-    offer={item}
-    analyticsParams={{
-      from: 'artist',
-      artistName,
-    }}
-  />
-)
+}) => {
+  const subtitles = item.offer.extraData?.bookFormat
+    ? [item.offer.extraData?.bookFormat]
+    : undefined
+  return (
+    <HorizontalOfferTile
+      offer={item}
+      analyticsParams={{
+        from: 'artist',
+        artistName,
+      }}
+      subtitles={subtitles}
+    />
+  )
+}
 
 export const ArtistTopOffers: FunctionComponent<Props> = ({ artistName, items }) => {
   return items.length > 0 ? (

src/features/offer/components/OfferPlaylistItem/OfferPlaylistItem.tsx

@@ -1,24 +1,19 @@
 import React from 'react'
 
-import { OfferResponseV2, RecommendationApiParams } from 'api/gen'
+import { CategoryIdEnum, OfferResponseV2, RecommendationApiParams } from 'api/gen'
 import { Referrals } from 'features/navigation/RootNavigator/types'
 import { OfferTile } from 'features/offer/components/OfferTile/OfferTile'
 import { PlaylistType } from 'features/offer/enums'
 import { OfferTileProps } from 'features/offer/types'
 import { formatDates } from 'libs/parsers/formatDates'
 import { getDisplayPrice } from 'libs/parsers/getDisplayPrice'
-import {
-  CategoryHomeLabelMapping,
-  CategoryIdMapping,
-  SubcategoryOfferLabelMapping,
-} from 'libs/subcategories/types'
 import { Currency } from 'shared/currency/useGetCurrencyToDisplay'
 import { Offer } from 'shared/offer/types'
 
 type OfferPlaylistItemProps = {
   offer: OfferResponseV2
-  categoryMapping: CategoryIdMapping
-  labelMapping: CategoryHomeLabelMapping | SubcategoryOfferLabelMapping
+  categoryId: CategoryIdEnum
+  categoryLabel: string
   variant: OfferTileProps['variant']
   currency: Currency
   euroToPacificFrancRate: number
@@ -36,8 +31,8 @@ type RenderOfferPlaylistItemProps = {
 
 export const OfferPlaylistItem = ({
   offer,
-  categoryMapping,
-  labelMapping,
+  categoryId,
+  categoryLabel,
   variant,
   currency,
   euroToPacificFrancRate,
@@ -47,11 +42,12 @@ export const OfferPlaylistItem = ({
 }: OfferPlaylistItemProps) => {
   return function RenderItem({ item, width, height, playlistType }: RenderOfferPlaylistItemProps) {
     const timestampsInMillis = item.offer.dates?.map((timestampInSec) => timestampInSec * 1000)
+
     return (
       <OfferTile
         offerLocation={item._geoloc}
-        categoryLabel={labelMapping[item.offer.subcategoryId]}
-        categoryId={categoryMapping[item.offer.subcategoryId]}
+        categoryLabel={categoryLabel}
+        categoryId={categoryId}
         subcategoryId={item.offer.subcategoryId}
         offerId={+item.objectID}
         name={item.offer.name}

src/features/offer/components/OfferPlaylistList/OfferPlaylistList.tsx

@@ -98,6 +98,9 @@ export function OfferPlaylistList({
   const shouldDisplayPlaylist =
     isArrayNotEmpty(sameCategorySimilarOffers) || isArrayNotEmpty(otherCategoriesSimilarOffers)
 
+  const categoryLabel = labelMapping[offer.subcategoryId] || ''
+  const categoryId = categoryMapping[offer.subcategoryId]
+
   return (
     <SectionWithDivider visible={shouldDisplayPlaylist} gap={8}>
       {similarOffersPlaylist.map((playlist) => {
@@ -116,8 +119,8 @@ export function OfferPlaylistList({
               itemHeight={itemHeight}
               renderItem={OfferPlaylistItem({
                 offer,
-                categoryMapping,
-                labelMapping,
+                categoryLabel,
+                categoryId,
                 currency,
                 euroToPacificFrancRate,
                 apiRecoParams: playlist.apiRecoParams,

src/libs/algolia/types.ts

@@ -37,6 +37,7 @@ export interface AlgoliaHit {
     subcategoryId?: SubcategoryIdEnum
     thumbUrl?: string
     searchGroupName?: SearchGroupNameEnumv2
+    extraData?: { bookFormat: string | null }
   }
   _geoloc: Geoloc
   objectID: string

src/shared/offer/types.ts

@@ -16,6 +16,7 @@ export type HitOffer = {
   subcategoryId: SubcategoryIdEnum
   thumbUrl?: string
   releaseDate?: number | string
+  extraData?: { bookFormat: string | null }
 }
 
 export interface Offer {

todo.md

@@ -0,0 +1,26 @@
+# TODO
+
+## Links
+
+- [PC-33016](https://passculture.atlassian.net/browse/PC-33016)
+- [MobTime](https://mobtime.hadrienmp.fr/mob/pass-culture)
+
+---
+
+## Tasks
+
+App Native - Page Artiste - Afficher le bookFormat au niveau de la playlist quand c'est des livres
+
+- [x] Mettre à jour le fichier d'API (trop rapide)
+- [ ] Gérer le cas ou c'est null afficher juste Livre comme avant
+
+MAJ de gen/api.ts
+native/offer/v2 a maintenant offer.extraData[“bookFormat”]
+Maquette ?
+Faire comme pour CD / Vinyls (cf https://github.com/pass-culture/pass-culture-app-native/pull/7086)
+
+---
+
+## Tasks for another US
+
+- [ ]