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

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

@@ -1,13 +1,15 @@
 import React, { ComponentProps, FunctionComponent, useMemo } from 'react'
 import { View } from 'react-native'
-import styled from 'styled-components/native'
+import styled, { useTheme } from 'styled-components/native'
 
 import { OfferResponseV2 } from 'api/gen'
 import { useVenueBlock } from 'features/offer/components/OfferVenueBlock/useVenueBlock'
 import { useDistance } from 'libs/location/hooks/useDistance'
+import { Image } from 'libs/resizing-image-on-demand/Image'
+import { InfoHeader } from 'ui/components/InfoHeader/InfoHeader'
 import { Tag } from 'ui/components/Tag/Tag'
 import { InternalTouchableLink } from 'ui/components/touchableLink/InternalTouchableLink'
-import { VenuePreview } from 'ui/components/VenuePreview/VenuePreview'
+import { RightFilled } from 'ui/svg/icons/RightFilled'
 import { getSpacing, Spacer } from 'ui/theme'
 
 const VENUE_THUMBNAIL_SIZE = getSpacing(14)
@@ -23,6 +25,7 @@ export function VenueBlock({ onSeeVenuePress, offer }: Readonly<Props>) {
     venue,
     offerAddress: address,
   })
+  const theme = useTheme()
 
   const { latitude: lat, longitude: lng } = offer.venue.coordinates
   const distance = useDistance({ lat, lng })
@@ -49,15 +52,33 @@ 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}
+        <InfoHeader
+          title={venueName}
+          subtitle={venueAddress}
+          rightComponent={
+            hasVenuePage ? (
+              <RightFilled size={theme.icons.sizes.extraSmall} testID="RightFilled" />
+            ) : null
+          }
+          thumbnailComponent={
+            venue.bannerUrl ? (
+              <VenueThumbnail
+                url={venue.bannerUrl}
+                height={VENUE_THUMBNAIL_SIZE}
+                width={VENUE_THUMBNAIL_SIZE}
+                testID="VenuePreviewImage"
+              />
+            ) : null
+          }
+          defaultThumbnailSize={VENUE_THUMBNAIL_SIZE}
         />
       </TouchableContainer>
     </React.Fragment>
   )
 }
+
+const VenueThumbnail = styled(Image)<{ height: number; width: number }>(({ height, width }) => ({
+  borderRadius: 4,
+  height,
+  width,
+}))

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

@@ -1,11 +1,13 @@
 import React, { ComponentProps, FunctionComponent } from 'react'
-import styled from 'styled-components/native'
+import styled, { useTheme } from 'styled-components/native'
 
+import { Image } from 'libs/resizing-image-on-demand/Image'
 import { styledButton } from 'ui/components/buttons/styledButton'
 import { CloseButton } from 'ui/components/headers/CloseButton'
+import { InfoHeader } from 'ui/components/InfoHeader/InfoHeader'
 import { InternalTouchableLink } from 'ui/components/touchableLink/InternalTouchableLink'
-import { VenuePreview } from 'ui/components/VenuePreview/VenuePreview'
 import { InformationTags } from 'ui/InformationTags/InformationTags'
+import { RightFilled } from 'ui/svg/icons/RightFilled'
 import { getShadow, getSpacing, Spacer } from 'ui/theme'
 
 type Props = {
@@ -32,6 +34,7 @@ export const VenueMapPreview: FunctionComponent<Props> = ({
   withRightArrow,
   ...touchableProps
 }) => {
+  const theme = useTheme()
   const Wrapper = noBorder ? InternalTouchableLink : Container
   return (
     <Wrapper {...touchableProps}>
@@ -40,13 +43,25 @@ 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}
+      <InfoHeader
+        title={venueName}
+        subtitle={address}
+        defaultThumbnailSize={VENUE_THUMBNAIL_SIZE}
+        rightComponent={
+          withRightArrow ? (
+            <RightFilled size={theme.icons.sizes.extraSmall} testID="RightFilled" />
+          ) : null
+        }
+        thumbnailComponent={
+          bannerUrl ? (
+            <VenueThumbnail
+              url={bannerUrl}
+              height={VENUE_THUMBNAIL_SIZE}
+              width={VENUE_THUMBNAIL_SIZE}
+              testID="VenuePreviewImage"
+            />
+          ) : null
+        }
       />
     </Wrapper>
   )
@@ -80,3 +95,9 @@ const StyledCloseButton = styledButton(CloseButton)({
 const StyledInformationTags = styled(InformationTags)({
   flexGrow: 1,
 })
+
+const VenueThumbnail = styled(Image)<{ height: number; width: number }>(({ height, width }) => ({
+  borderRadius: 4,
+  height,
+  width,
+}))

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,67 @@
+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 ? (
+      thumbnailComponent
+    ) : (
+      <ThumbnailPlaceholder
+        width={defaultThumbnailSize}
+        height={defaultThumbnailSize}
+        testID="VenuePreviewPlaceholder"
+      />
+    )}
+    <RightContainer>
+      {children}
+      <TitleContainer>
+        <Title>{title}</Title>
+        {rightComponent ? 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/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,