(PC-33886) refactor(VenuePreview): Create a reusable/generic component InfoHeader

src/features/offer/components/OfferVenueBlock/VenueBlock.tsx

@@ -7,7 +7,7 @@ import { useVenueBlock } from 'features/offer/components/OfferVenueBlock/useVenu
 import { useDistance } from 'libs/location/hooks/useDistance'
 import { Tag } from 'ui/components/Tag/Tag'
 import { InternalTouchableLink } from 'ui/components/touchableLink/InternalTouchableLink'
-import { VenuePreview } from 'ui/components/VenuePreview/VenuePreview'
+import { VenueInfoHeader } from 'ui/components/VenueInfoHeader/VenueInfoHeader'
 import { getSpacing, Spacer } from 'ui/theme'
 
 const VENUE_THUMBNAIL_SIZE = getSpacing(14)
@@ -49,13 +49,12 @@ export function VenueBlock({ onSeeVenuePress, offer }: Readonly<Props>) {
       <TouchableContainer
         navigateTo={{ screen: 'Venue', params: { id: venue.id } }}
         onBeforeNavigate={onSeeVenuePress}>
-        <VenuePreview
-          address={venueAddress}
-          bannerUrl={venue.bannerUrl}
-          withRightArrow={hasVenuePage}
-          venueName={venueName}
-          imageWidth={VENUE_THUMBNAIL_SIZE}
-          imageHeight={VENUE_THUMBNAIL_SIZE}
+        <VenueInfoHeader
+          title={venueName}
+          subtitle={venueAddress}
+          imageSize={VENUE_THUMBNAIL_SIZE}
+          showArrow={hasVenuePage}
+          imageURL={venue.bannerUrl ?? undefined}
         />
       </TouchableContainer>
     </React.Fragment>

src/features/venueMap/components/VenueMapPreview/VenueMapPreview.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components/native'
 import { styledButton } from 'ui/components/buttons/styledButton'
 import { CloseButton } from 'ui/components/headers/CloseButton'
 import { InternalTouchableLink } from 'ui/components/touchableLink/InternalTouchableLink'
-import { VenuePreview } from 'ui/components/VenuePreview/VenuePreview'
+import { VenueInfoHeader } from 'ui/components/VenueInfoHeader/VenueInfoHeader'
 import { InformationTags } from 'ui/InformationTags/InformationTags'
 import { getShadow, getSpacing, Spacer } from 'ui/theme'
 
@@ -40,13 +40,12 @@ export const VenueMapPreview: FunctionComponent<Props> = ({
         <StyledCloseButton onClose={onClose} size={iconSize} />
       </Row>
       <Spacer.Column numberOfSpaces={2} />
-      <VenuePreview
-        venueName={venueName}
-        address={address}
-        bannerUrl={bannerUrl}
-        imageWidth={VENUE_THUMBNAIL_SIZE}
-        imageHeight={VENUE_THUMBNAIL_SIZE}
-        withRightArrow={withRightArrow}
+      <VenueInfoHeader
+        title={venueName}
+        subtitle={address}
+        imageSize={VENUE_THUMBNAIL_SIZE}
+        showArrow={withRightArrow}
+        imageURL={bannerUrl}
       />
     </Wrapper>
   )

src/ui/components/InfoHeader/InfoHeader.stories.tsx

@@ -0,0 +1,69 @@
+import { ComponentMeta } from '@storybook/react'
+import React from 'react'
+import styled from 'styled-components/native'
+
+import { offerResponseSnap } from 'features/offer/fixtures/offerResponse'
+import { VariantsTemplate, type Variants, type VariantsStory } from 'ui/storybook/VariantsTemplate'
+import { All } from 'ui/svg/icons/bicolor/All'
+import { RightFilled } from 'ui/svg/icons/RightFilled'
+
+import { InfoHeader } from './InfoHeader'
+
+const meta: ComponentMeta<typeof InfoHeader> = {
+  title: 'ui/InfoHeader',
+  component: InfoHeader,
+}
+export default meta
+
+const baseProps = {
+  title: offerResponseSnap.venue.name,
+  subtitle: offerResponseSnap.venue.address ?? '',
+  defaultThumbnailSize: 56,
+}
+
+const RightArrow = () => (
+  <React.Fragment>
+    <RightIcon testID="RightFilled" />
+  </React.Fragment>
+)
+
+const RightIcon = styled(RightFilled).attrs(({ theme }) => ({
+  size: theme.icons.sizes.extraSmall,
+}))({
+  flexShrink: 0,
+})
+
+const variantConfig: Variants<typeof InfoHeader> = [
+  {
+    label: 'InfoHeader default',
+    props: { ...baseProps },
+  },
+  {
+    label: 'InfoHeader with image',
+    props: {
+      ...baseProps,
+      thumbnailComponent: <All size={56} />,
+    },
+  },
+  {
+    label: 'InfoHeader with arrow',
+    props: {
+      ...baseProps,
+      rightComponent: <RightArrow />,
+    },
+  },
+  {
+    label: 'InfoHeader without subtitle',
+    props: {
+      ...baseProps,
+      subtitle: undefined,
+    },
+  },
+]
+
+const Template: VariantsStory<typeof InfoHeader> = (args) => (
+  <VariantsTemplate variants={variantConfig} Component={InfoHeader} defaultProps={args} />
+)
+
+export const AllVariants = Template.bind({})
+AllVariants.storyName = 'InfoHeader'

src/ui/components/InfoHeader/InfoHeader.tsx

@@ -0,0 +1,65 @@
+import React, { FunctionComponent, PropsWithChildren, ReactNode } from 'react'
+import styled from 'styled-components/native'
+
+import { ThumbnailPlaceholder } from 'ui/components/InfoHeader/ThumbnailPlaceHolder'
+import { TypoDS, getSpacing } from 'ui/theme'
+
+type InfoHeaderProps = PropsWithChildren<{
+  title: string
+  defaultThumbnailSize: number
+  subtitle?: string
+  thumbnailComponent?: ReactNode
+  rightComponent?: ReactNode
+}>
+
+export const InfoHeader: FunctionComponent<InfoHeaderProps> = ({
+  title,
+  subtitle,
+  rightComponent,
+  defaultThumbnailSize,
+  thumbnailComponent,
+  children,
+}) => (
+  <StyledView>
+    {thumbnailComponent || (
+      <ThumbnailPlaceholder
+        width={defaultThumbnailSize}
+        height={defaultThumbnailSize}
+        testID="VenuePreviewPlaceholder"
+      />
+    )}
+    <RightContainer>
+      {children}
+      <TitleContainer>
+        <Title>{title}</Title>
+        {rightComponent || null}
+      </TitleContainer>
+      {subtitle ? <Subtitle>{subtitle}</Subtitle> : null}
+    </RightContainer>
+  </StyledView>
+)
+
+const StyledView = styled.View({
+  flexShrink: 1,
+  flexDirection: 'row',
+  columnGap: getSpacing(2),
+})
+
+const RightContainer = styled.View({
+  flexShrink: 1,
+  justifyContent: 'center',
+})
+
+const TitleContainer = styled.View({
+  flexDirection: 'row',
+  alignItems: 'center',
+  columnGap: getSpacing(1),
+})
+
+const Title = styled(TypoDS.BodyAccent).attrs({ numberOfLines: 1 })({
+  flexShrink: 1,
+})
+
+const Subtitle = styled(TypoDS.BodyAccentXs).attrs({ numberOfLines: 2 })(({ theme }) => ({
+  color: theme.colors.greyDark,
+}))

src/ui/components/InfoHeader/ThumbnailPlaceHolder.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { ViewProps } from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import styled from 'styled-components/native'
+
+import { All } from 'ui/svg/icons/bicolor/All'
+
+const ThumbnailPlaceholderContainer = styled(LinearGradient).attrs(({ theme }) => ({
+  colors: [theme.colors.greyLight, theme.colors.greyMedium],
+}))<{ height: number; width: number }>(({ theme, height, width }) => ({
+  borderRadius: theme.borderRadius.radius,
+  height,
+  width,
+  alignItems: 'center',
+  justifyContent: 'center',
+}))
+
+const ThumbnailPlaceholderIcon = styled(All).attrs(({ theme }) => ({
+  size: theme.icons.sizes.standard,
+  color: theme.colors.greyMedium,
+}))``
+
+type ThumbnailPlaceholderProps = ViewProps & {
+  height: number
+  width: number
+}
+
+export const ThumbnailPlaceholder = ({ height, width, ...props }: ThumbnailPlaceholderProps) => (
+  <ThumbnailPlaceholderContainer height={height} width={width} {...props}>
+    <ThumbnailPlaceholderIcon />
+  </ThumbnailPlaceholderContainer>
+)

src/ui/components/VenueInfoHeader/VenueInfoHeader.native.test.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+
+import { render, screen } from 'tests/utils'
+import { VenueInfoHeader } from 'ui/components/VenueInfoHeader/VenueInfoHeader'
+
+const VENUE_THUMBNAIL_SIZE = 48
+
+describe('<VenueInfoHeader />', () => {
+  it('should display venue name', () => {
+    render(
+      <VenueInfoHeader
+        title="PATHE BEAUGRENELLE"
+        showArrow={false}
+        imageURL="https://example.com/image.jpg"
+        imageSize={VENUE_THUMBNAIL_SIZE}
+      />
+    )
+
+    expect(screen.getByText('PATHE BEAUGRENELLE')).toBeOnTheScreen()
+  })
+
+  it('should display venue subtitle', () => {
+    render(
+      <VenueInfoHeader
+        title="PATHE BEAUGRENELLE"
+        subtitle="Paris, France"
+        showArrow={false}
+        imageURL="https://example.com/image.jpg"
+        imageSize={VENUE_THUMBNAIL_SIZE}
+      />
+    )
+
+    expect(screen.getByText('Paris, France')).toBeOnTheScreen()
+  })
+
+  it('should display image when imageURL is provided', () => {
+    render(
+      <VenueInfoHeader
+        title="PATHE BEAUGRENELLE"
+        subtitle="Paris, France"
+        showArrow={false}
+        imageURL="https://example.com/image.jpg"
+        imageSize={VENUE_THUMBNAIL_SIZE}
+      />
+    )
+
+    expect(screen.getByTestId('VenuePreviewImage')).toBeOnTheScreen()
+  })
+
+  it('should not display image when imageURL is not provided', () => {
+    render(
+      <VenueInfoHeader
+        title="PATHE BEAUGRENELLE"
+        subtitle="Paris, France"
+        showArrow={false}
+        imageSize={VENUE_THUMBNAIL_SIZE}
+      />
+    )
+
+    expect(screen.queryByTestId('VenuePreviewImage')).not.toBeOnTheScreen()
+    expect(screen.getByTestId('VenuePreviewPlaceholder')).toBeOnTheScreen()
+  })
+
+  it('should display arrow when showArrow is true', () => {
+    render(
+      <VenueInfoHeader
+        title="PATHE BEAUGRENELLE"
+        subtitle="Paris, France"
+        showArrow
+        imageURL="https://example.com/image.jpg"
+        imageSize={VENUE_THUMBNAIL_SIZE}
+      />
+    )
+
+    expect(screen.getByTestId('RightFilled')).toBeOnTheScreen()
+  })
+
+  it('should not display arrow when showArrow is false', () => {
+    render(
+      <VenueInfoHeader
+        title="PATHE BEAUGRENELLE"
+        subtitle="Paris, France"
+        showArrow={false}
+        imageURL="https://example.com/image.jpg"
+        imageSize={VENUE_THUMBNAIL_SIZE}
+      />
+    )
+
+    expect(screen.queryByTestId('RightFilled')).not.toBeOnTheScreen()
+  })
+})

src/ui/components/VenueInfoHeader/VenueInfoHeader.tsx

@@ -0,0 +1,50 @@
+import React, { FunctionComponent } from 'react'
+import styled, { useTheme } from 'styled-components/native'
+
+import { Image } from 'libs/resizing-image-on-demand/Image'
+import { InfoHeader } from 'ui/components/InfoHeader/InfoHeader'
+import { RightFilled } from 'ui/svg/icons/RightFilled'
+
+type VenueInfoHeaderProps = {
+  title: string
+  imageSize: number
+  subtitle?: string
+  showArrow?: boolean
+  imageURL?: string
+}
+
+export const VenueInfoHeader: FunctionComponent<VenueInfoHeaderProps> = ({
+  title,
+  imageSize,
+  subtitle,
+  showArrow = false,
+  imageURL,
+}) => {
+  const theme = useTheme()
+  return (
+    <InfoHeader
+      title={title}
+      subtitle={subtitle}
+      rightComponent={
+        showArrow ? <RightFilled size={theme.icons.sizes.extraSmall} testID="RightFilled" /> : null
+      }
+      thumbnailComponent={
+        imageURL ? (
+          <VenueThumbnail
+            url={imageURL}
+            height={imageSize}
+            width={imageSize}
+            testID="VenuePreviewImage"
+          />
+        ) : null
+      }
+      defaultThumbnailSize={imageSize}
+    />
+  )
+}
+
+const VenueThumbnail = styled(Image)<{ height: number; width: number }>(({ height, width }) => ({
+  borderRadius: 4,
+  height,
+  width,
+}))

src/ui/components/VenuePreview/VenuePreview.tsx

@@ -17,6 +17,7 @@ type Props = PropsWithChildren<{
   imageWidth: number
 }>
 
+// TODO(PC-00000): remove with VenueListModule
 export const VenuePreview: FunctionComponent<Props> = ({
   address,
   bannerUrl,