Merged in SW-3270-move-interactive-map-to-design-system-or-booking-flow (pull request #2681)

SW-3270 move interactive map to design system or booking flow * wip * wip * merge * wip * add support for locales in design-system * add story for HotelCard * setup alias * . * remove tracking from design-system for hotelcard * pass isUserLoggedIn * export design-system-new-deprecated.css from design-system * Add HotelMarkerByType to Storybook * Add interactive map to Storybook * fix reactintl in vitest * rename env variables * . * fix background colors * add storybook stories for <Link /> * merge * fix tracking for when clicking 'See rooms' in InteractiveMap * Merge branch 'master' of bitbucket.org:scandic-swap/web into SW-3270-move-interactive-map-to-design-system-or-booking-flow * remove deprecated comment Approved-by: Anton Gunnarsson
2025-08-25 11:26:16 +00:00
parent 4f8c51298f
commit c54c1ec540
139 changed files with 2511 additions and 1557 deletions
--- a/packages/design-system/lib/components/HotelCard/HotelCard.stories.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelCard.stories.tsx
@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { HotelCard } from './index'
+
+import { fn } from 'storybook/test'
+import { RateTypeEnum } from '@scandic-hotels/common/constants/rateType'
+import { HotelTypeEnum } from '@scandic-hotels/trpc/enums/hotelType'
+import { Button } from '@scandic-hotels/design-system/Button'
+import { MaterialIcon } from '../Icons/MaterialIcon'
+
+const meta: Meta<typeof HotelCard> = {
+  title: 'Components/HotelCard',
+  component: HotelCard,
+  argTypes: {
+    state: {
+      control: {
+        type: 'select',
+        options: ['default', 'active'],
+      },
+    },
+    type: {
+      control: {
+        type: 'select',
+        options: ['mapListing', 'pageListing'],
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof HotelCard>
+
+export const Default: Story = {
+  args: {
+    hotel: {
+      id: '1',
+      name: 'Test Hotel',
+      address: { streetAddress: '123 Test Street', city: 'Test City' },
+      description: 'A great place to stay.',
+      hotelType: HotelTypeEnum.Signature,
+      detailedFacilities: [],
+      ratings: {
+        tripAdvisor: 4,
+      },
+    },
+    prices: {
+      public: {
+        rateType: RateTypeEnum.Regular,
+        localPrice: {
+          currency: 'SEK',
+          pricePerNight: 1000,
+          pricePerStay: 1000,
+        },
+      },
+      member: {
+        rateType: RateTypeEnum.Regular,
+        localPrice: {
+          currency: 'SEK',
+          pricePerNight: 800,
+          pricePerStay: 800,
+        },
+      },
+    },
+    state: 'default',
+    isAlternative: false,
+    type: 'pageListing',
+    isUserLoggedIn: false,
+    distanceToCityCenter: 0,
+    bookingCode: 'ABC123',
+    images: [
+      {
+        src: 'img/img2.jpg',
+        alt: 'Alt text',
+        smallSrc: 'img/img2.jpg',
+        caption: 'Caption',
+      },
+    ],
+
+    belowInfoSlot: (
+      <Button
+        onPress={() => fn()}
+        variant="Text"
+        typography="Body/Paragraph/mdBold"
+        // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+      >
+        Read more
+        <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
+      </Button>
+    ),
+    onAddressClick: fn,
+    onHover: fn,
+    onHoverEnd: fn,
+  },
+}
+
+export const MapListing: Story = {
+  args: {
+    ...Default.args,
+    type: 'mapListing',
+  },
+}
--- a/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/hotelCardDialogImage.module.css
+++ b/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/hotelCardDialogImage.module.css
@@ -0,0 +1,46 @@
+.imagePlaceholder {
+  height: 100%;
+  width: 100%;
+  background-color: #fff;
+  background-image:
+    linear-gradient(45deg, #000000 25%, transparent 25%),
+    linear-gradient(-45deg, #000000 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #000000 75%),
+    linear-gradient(-45deg, transparent 75%, #000000 75%);
+  background-size: 120px 120px;
+  background-position:
+    0 0,
+    0 60px,
+    60px -60px,
+    -60px 0;
+}
+
+.imageContainer {
+  position: relative;
+  min-width: 177px;
+  border-radius: var(--Corner-radius-md) 0 0 var(--Corner-radius-md);
+  overflow: hidden;
+}
+
+.imageContainer.top {
+  width: 80px;
+  min-width: 80px;
+  height: 90px;
+  border-radius: var(--Corner-radius-md);
+}
+
+.imageContainer img {
+  object-fit: cover;
+}
+
+.imageContainer .tripAdvisor {
+  position: absolute;
+  left: 7px;
+  top: 7px;
+  border-radius: 2px;
+}
+
+.imageContainer.top .tripAdvisor {
+  left: 4px;
+  top: 4px;
+}
--- a/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/index.tsx
@@ -0,0 +1,51 @@
+import TripadvisorIcon from '@scandic-hotels/design-system/Icons/TripadvisorIcon'
+import Image from '@scandic-hotels/design-system/Image'
+
+import Chip from '@scandic-hotels/design-system/Chip'
+
+import { hotelCardDialogImageVariants } from './variants'
+
+import styles from './hotelCardDialogImage.module.css'
+
+export type HotelCardDialogImageProps = {
+  firstImage?: string
+  altText?: string
+  rating?: { tripAdvisor?: number | null }
+  imageError: boolean
+  setImageError: (error: boolean) => void
+  position: 'top' | 'left'
+}
+
+export function HotelCardDialogImage({
+  firstImage,
+  altText,
+  rating,
+  imageError,
+  setImageError,
+  position,
+}: HotelCardDialogImageProps) {
+  const classNames = hotelCardDialogImageVariants({ position })
+
+  return (
+    <div className={classNames}>
+      {!firstImage || imageError ? (
+        <div className={styles.imagePlaceholder} />
+      ) : (
+        <Image
+          src={firstImage}
+          alt={altText || ''}
+          fill
+          onError={() => setImageError(true)}
+        />
+      )}
+      {rating?.tripAdvisor && (
+        <div className={styles.tripAdvisor}>
+          <Chip className={styles.tripAdvisor}>
+            <TripadvisorIcon color="Icon/Interactive/Default" />
+            {rating.tripAdvisor}
+          </Chip>
+        </div>
+      )}
+    </div>
+  )
+}
--- a/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/variants.ts
+++ b/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/variants.ts
@@ -0,0 +1,15 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './hotelCardDialogImage.module.css'
+
+export const hotelCardDialogImageVariants = cva(styles.imageContainer, {
+  variants: {
+    position: {
+      top: styles.top,
+      left: styles.left,
+    },
+  },
+  defaultVariants: {
+    position: 'top',
+  },
+})
--- a/packages/design-system/lib/components/HotelCard/HotelCardSkeleton.module.css
+++ b/packages/design-system/lib/components/HotelCard/HotelCardSkeleton.module.css
@@ -0,0 +1,63 @@
+.card {
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  border-radius: var(--Corner-radius-lg);
+  border: 1px solid var(--Base-Border-Subtle);
+  position: relative;
+  height: 100%;
+  justify-content: space-between;
+  min-height: 200px;
+  flex: 1;
+  overflow: hidden;
+}
+
+.imageContainer {
+  aspect-ratio: 16/9;
+  width: 100%;
+  height: 200px;
+}
+
+.priceVariants {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x2);
+  flex: 1;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x2);
+}
+
+.text {
+  display: none;
+}
+
+@media (min-width: 1367px) {
+  .content {
+    padding: var(--Spacing-x2) 0 var(--Spacing-x2) var(--Spacing-x2);
+  }
+
+  .text {
+    gap: 10px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card {
+    flex-direction: row;
+  }
+  .imageContainer {
+    width: 315px;
+    height: 100%;
+  }
+  .priceVariants {
+    max-width: 260px;
+  }
+}
--- a/packages/design-system/lib/components/HotelCard/HotelCardSkeleton.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelCardSkeleton.tsx
@@ -0,0 +1,34 @@
+import SkeletonShimmer from '@scandic-hotels/design-system/SkeletonShimmer'
+
+import styles from './HotelCardSkeleton.module.css'
+
+export function HotelCardSkeleton() {
+  return (
+    <article className={styles.card}>
+      {/* image container */}
+      <div className={styles.imageContainer}>
+        <SkeletonShimmer width={'100%'} height="100%" />
+      </div>
+
+      <div className={styles.content}>
+        <SkeletonShimmer height={'65px'} />
+        <div className={styles.text}>
+          <SkeletonShimmer height={'20px'} />
+          <SkeletonShimmer height={'20px'} />
+          <SkeletonShimmer height={'20px'} />
+          <SkeletonShimmer height={'20px'} />
+        </div>
+        <SkeletonShimmer height={'56px'} />
+        <SkeletonShimmer height={'52px'} width={'150px'} />
+      </div>
+
+      <div className={styles.priceVariants}>
+        {/* price variants */}
+        {Array.from({ length: 2 }).map((_, index) => (
+          <SkeletonShimmer key={index} height={'100px'} />
+        ))}
+        <SkeletonShimmer height={'40px'} />
+      </div>
+    </article>
+  )
+}
--- a/packages/design-system/lib/components/HotelCard/HotelChequeCard/hotelChequeCard.module.css
+++ b/packages/design-system/lib/components/HotelCard/HotelChequeCard/hotelChequeCard.module.css
@@ -0,0 +1,22 @@
+.chequeCard {
+  padding: var(--Space-x15);
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  border-radius: var(--Corner-radius-md);
+  margin: 0;
+  width: 100%;
+  display: grid;
+  gap: var(--Space-x1);
+}
+
+.chequeRow,
+.cheque {
+  display: flex;
+  gap: var(--Space-x05);
+  justify-content: space-between;
+  align-items: baseline;
+  color: var(--Text-Default);
+}
+
+.cheque {
+  justify-content: end;
+}
--- a/packages/design-system/lib/components/HotelCard/HotelChequeCard/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelChequeCard/index.tsx
@@ -0,0 +1,64 @@
+import { useIntl } from 'react-intl'
+
+import { CurrencyEnum } from '@scandic-hotels/common/constants/currency'
+import Caption from '@scandic-hotels/design-system/Caption'
+import Subtitle from '@scandic-hotels/design-system/Subtitle'
+
+import styles from './hotelChequeCard.module.css'
+
+import type { ProductTypeCheque } from '@scandic-hotels/trpc/types/availability'
+
+export default function HotelChequeCard({
+  productTypeCheque,
+}: {
+  productTypeCheque: ProductTypeCheque
+}) {
+  const intl = useIntl()
+  return (
+    <div className={styles.chequeCard}>
+      <div className={styles.chequeRow}>
+        <Caption>
+          {intl.formatMessage({
+            defaultMessage: 'From',
+          })}
+        </Caption>
+        <div className={styles.cheque}>
+          <Subtitle type="two" color="uiTextHighContrast">
+            {productTypeCheque.localPrice.numberOfCheques}
+          </Subtitle>
+          <Caption color="uiTextHighContrast">{CurrencyEnum.CC}</Caption>
+          {productTypeCheque.localPrice.additionalPricePerStay > 0 ? (
+            <>
+              {'+'}
+              <Subtitle type="two" color="uiTextHighContrast">
+                {productTypeCheque.localPrice.additionalPricePerStay}
+              </Subtitle>
+              <Caption color="uiTextHighContrast">
+                {productTypeCheque.localPrice.currency}
+              </Caption>
+            </>
+          ) : null}
+        </div>
+      </div>
+      {productTypeCheque.requestedPrice &&
+      productTypeCheque.requestedPrice.additionalPricePerStay > 0 ? (
+        <div className={styles.chequeRow}>
+          <Caption color="uiTextMediumContrast">
+            {intl.formatMessage({
+              defaultMessage: 'Approx.',
+            })}
+          </Caption>
+          <Caption color={'uiTextMediumContrast'}>
+            {productTypeCheque.requestedPrice.numberOfCheques} {CurrencyEnum.CC}
+            {productTypeCheque.requestedPrice.additionalPricePerStay
+              ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+                ' + '
+              : ''}
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {`${productTypeCheque.requestedPrice.additionalPricePerStay} ${productTypeCheque.requestedPrice.currency}`}
+          </Caption>
+        </div>
+      ) : null}
+    </div>
+  )
+}
--- a/packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/StandaloneHotelCardDialog.stories.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/StandaloneHotelCardDialog.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { StandaloneHotelCardDialog } from './index'
+
+import { fn } from 'storybook/test'
+
+const meta: Meta<typeof StandaloneHotelCardDialog> = {
+  title: 'Components/StandaloneHotelCardDialog',
+  component: StandaloneHotelCardDialog,
+  argTypes: {},
+}
+
+export default meta
+
+type Story = StoryObj<typeof StandaloneHotelCardDialog>
+
+export const Default: Story = {
+  args: {
+    data: {
+      name: 'Hotel Name',
+      image: {
+        url: 'img/img2.jpg',
+        alt: 'Alt text',
+      },
+      coordinates: {
+        lat: 0,
+        lng: 0,
+      },
+      chequePrice: null,
+      publicPrice: 100,
+      memberPrice: 200,
+      redemptionPrice: null,
+      voucherPrice: null,
+      rateType: null,
+      currency: 'SEK',
+      amenities: [],
+      ratings: { tripAdvisor: 5 },
+      operaId: '123',
+      facilityIds: [],
+      hasEnoughPoints: false,
+    },
+    handleClose: fn(),
+  },
+}
--- a/packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/index.tsx
@@ -0,0 +1,263 @@
+'use client'
+
+import { useState } from 'react'
+import { useIntl } from 'react-intl'
+
+import { selectRate } from '@scandic-hotels/common/constants/routes/hotelReservation'
+import Body from '@scandic-hotels/design-system/Body'
+import Caption from '@scandic-hotels/design-system/Caption'
+import Footnote from '@scandic-hotels/design-system/Footnote'
+import { IconButton } from '@scandic-hotels/design-system/IconButton'
+import { MaterialIcon } from '@scandic-hotels/design-system/Icons/MaterialIcon'
+import Link from '@scandic-hotels/design-system/Link'
+import { OldDSButton as Button } from '@scandic-hotels/design-system/OldDSButton'
+import Subtitle from '@scandic-hotels/design-system/Subtitle'
+import { Typography } from '@scandic-hotels/design-system/Typography'
+
+import { NoPriceAvailableCard } from '../../NoPriceAvailableCard'
+import { HotelCardDialogImage } from '../../HotelCardDialogImage'
+
+import styles from './standaloneHotelCardDialog.module.css'
+import { Lang } from '@scandic-hotels/common/constants/language'
+import { HotelPin } from '../../../Map/types'
+import { FacilityToIcon } from '@scandic-hotels/design-system/FacilityToIcon'
+import { HotelPointsRow } from '../../HotelPointsRow'
+
+interface StandaloneHotelCardProps {
+  data: HotelPin
+  lang: Lang
+  isUserLoggedIn: boolean
+  handleClose: () => void
+  onClick?: () => void
+}
+
+export function StandaloneHotelCardDialog({
+  data,
+  lang,
+  handleClose,
+  isUserLoggedIn,
+  onClick,
+}: StandaloneHotelCardProps) {
+  const intl = useIntl()
+  const [imageError, setImageError] = useState(false)
+  const {
+    name,
+    chequePrice,
+    publicPrice,
+    memberPrice,
+    redemptionPrice,
+    voucherPrice,
+    currency,
+    amenities,
+    image,
+    ratings,
+    operaId,
+    hasEnoughPoints,
+  } = data
+
+  const notEnoughPointsLabel = intl.formatMessage({
+    defaultMessage: 'Not enough points',
+  })
+
+  const shouldShowNotEnoughPoints = redemptionPrice && !hasEnoughPoints
+
+  return (
+    <div className={styles.container}>
+      <IconButton
+        theme="Black"
+        style="Muted"
+        className={styles.closeButton}
+        onPress={handleClose}
+        aria-label={intl.formatMessage({
+          defaultMessage: 'Close',
+        })}
+      >
+        <MaterialIcon icon="close" size={22} color="CurrentColor" />
+      </IconButton>
+      <HotelCardDialogImage
+        firstImage={image?.url}
+        altText={image?.alt}
+        rating={{ tripAdvisor: ratings?.tripAdvisor ?? null }}
+        imageError={imageError}
+        setImageError={setImageError}
+        position="left"
+      />
+      <div className={styles.content}>
+        <div className={styles.name}>
+          <Body textTransform="bold">{name}</Body>
+        </div>
+        <div className={styles.facilities}>
+          {amenities.slice(0, 3).map((facility) => {
+            const Icon = (
+              <FacilityToIcon id={facility.id} size={16} color="Icon/Default" />
+            )
+            return (
+              <div className={styles.facilitiesItem} key={facility.id}>
+                {Icon}
+                <Footnote color="uiTextMediumContrast">
+                  {facility.name}
+                </Footnote>
+              </div>
+            )
+          })}
+        </div>
+        <div className={styles.pricesContainer}>
+          {publicPrice ||
+          memberPrice ||
+          redemptionPrice ||
+          voucherPrice ||
+          chequePrice ? (
+            <>
+              <div className={styles.priceCard}>
+                {redemptionPrice ? (
+                  <Caption>
+                    {intl.formatMessage({
+                      defaultMessage: 'Available rates',
+                    })}
+                  </Caption>
+                ) : (
+                  <Caption type="bold">
+                    {intl.formatMessage({
+                      defaultMessage: 'From',
+                    })}
+                  </Caption>
+                )}
+                {chequePrice && (
+                  <Subtitle type="two">
+                    {intl.formatMessage(
+                      {
+                        defaultMessage: '{price} {currency}',
+                      },
+                      {
+                        price: chequePrice.numberOfCheques,
+                        currency: 'CC',
+                      }
+                    )}
+                    {chequePrice.additionalPricePerStay > 0
+                      ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+                        ' + ' +
+                        intl.formatMessage(
+                          {
+                            defaultMessage: '{price} {currency}',
+                          },
+                          {
+                            price: chequePrice.additionalPricePerStay,
+                            currency: chequePrice.currency,
+                          }
+                        )
+                      : null}
+                    <Body asChild>
+                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                      <span>
+                        /
+                        {intl.formatMessage({
+                          defaultMessage: 'night',
+                        })}
+                      </span>
+                    </Body>
+                  </Subtitle>
+                )}
+                {voucherPrice && (
+                  <Subtitle type="two">
+                    {intl.formatMessage(
+                      {
+                        defaultMessage: '{price} {currency}',
+                      },
+                      {
+                        price: voucherPrice,
+                        currency,
+                      }
+                    )}
+                    <Body asChild>
+                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                      <span>
+                        /
+                        {intl.formatMessage({
+                          defaultMessage: 'night',
+                        })}
+                      </span>
+                    </Body>
+                  </Subtitle>
+                )}
+                {publicPrice && !isUserLoggedIn && (
+                  <Subtitle type="two">
+                    {intl.formatMessage(
+                      {
+                        defaultMessage: '{price} {currency}',
+                      },
+                      {
+                        price: publicPrice,
+                        currency,
+                      }
+                    )}
+                    <Body asChild>
+                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                      <span>
+                        /
+                        {intl.formatMessage({
+                          defaultMessage: 'night',
+                        })}
+                      </span>
+                    </Body>
+                  </Subtitle>
+                )}
+                {memberPrice && (
+                  <Subtitle type="two" color="red">
+                    {intl.formatMessage(
+                      {
+                        defaultMessage: '{price} {currency}',
+                      },
+                      {
+                        price: memberPrice,
+                        currency,
+                      }
+                    )}
+                    <Body asChild color="red">
+                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                      <span>
+                        /
+                        {intl.formatMessage({
+                          defaultMessage: 'night',
+                        })}
+                      </span>
+                    </Body>
+                  </Subtitle>
+                )}
+                {redemptionPrice && (
+                  <HotelPointsRow pointsPerStay={redemptionPrice} />
+                )}
+              </div>
+              {shouldShowNotEnoughPoints ? (
+                <div className={styles.notEnoughPointsButton}>
+                  <Typography variant="Body/Paragraph/mdBold">
+                    <span>{notEnoughPointsLabel}</span>
+                  </Typography>
+                </div>
+              ) : (
+                <Button
+                  asChild
+                  theme="base"
+                  size="small"
+                  className={styles.button}
+                  onClick={onClick}
+                >
+                  <Link
+                    href={`${selectRate(lang)}?hotel=${operaId}`}
+                    color="none"
+                    keepSearchParams
+                  >
+                    {intl.formatMessage({
+                      defaultMessage: 'See rooms',
+                    })}
+                  </Link>
+                </Button>
+              )}
+            </>
+          ) : (
+            <NoPriceAvailableCard />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/standaloneHotelCardDialog.module.css
+++ b/packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/standaloneHotelCardDialog.module.css
@@ -0,0 +1,82 @@
+.container {
+  flex-direction: row;
+  display: flex;
+  position: relative;
+  background: var(--Base-Surface-Primary-light-Normal);
+  box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
+}
+.content {
+  width: 100%;
+  max-width: 220px;
+  padding: var(--Space-x15);
+  display: flex;
+  flex-direction: column;
+}
+
+.name {
+  height: 48px;
+  max-width: 180px;
+  margin-bottom: var(--Space-x05);
+  display: flex;
+  align-items: center;
+  padding-right: var(--Space-x1);
+}
+
+.facilities {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 var(--Space-x1);
+}
+
+.facilitiesItem {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x05);
+}
+
+.prices {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+  justify-content: space-between;
+}
+
+.priceCard {
+  border-radius: var(--Corner-radius-md);
+  padding: var(--Space-x05) var(--Space-x1);
+  background: var(--Base-Surface-Secondary-light-Normal);
+  margin-top: var(--Space-x1);
+}
+
+.pricesContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+  justify-content: space-between;
+}
+
+.content .button {
+  margin-top: auto;
+}
+
+.closeButton {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 1;
+}
+
+.notEnoughPointsButton {
+  border-radius: var(--Corner-radius-rounded);
+  border-width: 2px;
+  border-style: solid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--Space-x05);
+
+  padding: 10px var(--Space-x2);
+  background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
+  border-color: var(--Component-Button-Brand-Primary-Border-Disabled);
+  color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
+}
--- a/packages/design-system/lib/components/HotelCard/HotelPointsRow/hotelPointsRow.module.css
+++ b/packages/design-system/lib/components/HotelCard/HotelPointsRow/hotelPointsRow.module.css
@@ -0,0 +1,6 @@
+.poinstRow {
+  display: flex;
+  gap: var(--Space-x1);
+  align-items: baseline;
+  color: var(--Text-Default);
+}
--- a/packages/design-system/lib/components/HotelCard/HotelPointsRow/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelPointsRow/index.tsx
@@ -0,0 +1,43 @@
+import { useIntl } from 'react-intl'
+
+import Caption from '@scandic-hotels/design-system/Caption'
+import Subtitle from '@scandic-hotels/design-system/Subtitle'
+
+import styles from './hotelPointsRow.module.css'
+
+export type PointsRowProps = {
+  pointsPerStay: number
+  additionalPricePerStay?: number
+  additionalPriceCurrency?: string
+}
+export function HotelPointsRow({
+  pointsPerStay,
+  additionalPricePerStay,
+  additionalPriceCurrency,
+}: PointsRowProps) {
+  const intl = useIntl()
+
+  return (
+    <div className={styles.poinstRow}>
+      <Subtitle type="two" color="uiTextHighContrast">
+        {pointsPerStay}
+      </Subtitle>
+      <Caption color="uiTextHighContrast">
+        {intl.formatMessage({
+          defaultMessage: 'Points',
+        })}
+      </Caption>
+      {additionalPricePerStay ? (
+        <>
+          {'+'}
+          <Subtitle type="two" color="uiTextHighContrast">
+            {additionalPricePerStay}
+          </Subtitle>
+          <Caption color="uiTextHighContrast">
+            {additionalPriceCurrency}
+          </Caption>
+        </>
+      ) : null}
+    </div>
+  )
+}
--- a/packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css
+++ b/packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css
@@ -0,0 +1,32 @@
+.priceCard {
+  padding: var(--Spacing-x-one-and-half);
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  border-radius: var(--Corner-radius-md);
+  margin: 0;
+  width: 100%;
+}
+.divider {
+  margin: var(--Spacing-x-half) 0;
+}
+
+.priceRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: var(--Spacing-x-quarter) 0;
+}
+
+.price {
+  display: flex;
+  gap: var(--Spacing-x-half);
+}
+
+.voucherChqRate {
+  justify-content: start;
+  align-items: baseline;
+}
+
+.perNight {
+  font-weight: 400;
+  font-size: var(--typography-Caption-Regular-fontSize);
+}
--- a/packages/design-system/lib/components/HotelCard/HotelPriceCard/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelPriceCard/index.tsx
@@ -0,0 +1,141 @@
+import { cx } from 'class-variance-authority'
+import { useIntl } from 'react-intl'
+
+import Body from '@scandic-hotels/design-system/Body'
+import Caption from '@scandic-hotels/design-system/Caption'
+import { Divider } from '@scandic-hotels/design-system/Divider'
+import Subtitle from '@scandic-hotels/design-system/Subtitle'
+import { RateTypeEnum } from '@scandic-hotels/common/constants/rateType'
+
+import styles from './hotelPriceCard.module.css'
+
+type Price = {
+  pricePerStay: number
+  pricePerNight: number
+  currency: string
+}
+
+export type PriceCardProps = {
+  productTypePrices: {
+    rateType: RateTypeEnum
+    localPrice: Price
+    requestedPrice?: Price
+  }
+  isMemberPrice?: boolean
+  className?: string
+}
+
+export function HotelPriceCard({
+  productTypePrices,
+  isMemberPrice = false,
+  className,
+}: PriceCardProps) {
+  const intl = useIntl()
+  const isRegularOrPublicPromotionRate =
+    productTypePrices.rateType === RateTypeEnum.Regular ||
+    productTypePrices.rateType === RateTypeEnum.PublicPromotion
+
+  return (
+    <dl className={cx(styles.priceCard, className)}>
+      {isRegularOrPublicPromotionRate &&
+        (isMemberPrice ? (
+          <div className={styles.priceRow}>
+            <dt>
+              <Caption color="red">
+                {intl.formatMessage({
+                  defaultMessage: 'Member price',
+                })}
+              </Caption>
+            </dt>
+          </div>
+        ) : (
+          <div className={styles.priceRow}>
+            <dt>
+              <Caption color="uiTextHighContrast">
+                {intl.formatMessage({
+                  defaultMessage: 'Standard price',
+                })}
+              </Caption>
+            </dt>
+          </div>
+        ))}
+      <div className={styles.priceRow}>
+        <dt>
+          <Caption
+            type="bold"
+            color={isMemberPrice ? 'red' : 'uiTextHighContrast'}
+          >
+            {intl.formatMessage({
+              defaultMessage: 'From',
+            })}
+          </Caption>
+        </dt>
+        <dd>
+          <div className={styles.price}>
+            <Subtitle
+              type="two"
+              color={isMemberPrice ? 'red' : 'uiTextHighContrast'}
+            >
+              {productTypePrices.localPrice.pricePerNight}
+            </Subtitle>
+            <Body
+              color={isMemberPrice ? 'red' : 'uiTextHighContrast'}
+              textTransform="bold"
+            >
+              {productTypePrices.localPrice.currency}
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              <span className={styles.perNight}>
+                /
+                {intl.formatMessage({
+                  defaultMessage: 'night',
+                })}
+              </span>
+            </Body>
+          </div>
+        </dd>
+      </div>
+      {productTypePrices?.requestedPrice && (
+        <div className={styles.priceRow}>
+          <dt>
+            <Caption color="uiTextMediumContrast">
+              {intl.formatMessage({
+                defaultMessage: 'Approx.',
+              })}
+            </Caption>
+          </dt>
+          <dd>
+            <Caption color={'uiTextMediumContrast'}>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {`${productTypePrices.requestedPrice.pricePerNight} `}
+              {productTypePrices.requestedPrice.currency}
+            </Caption>
+          </dd>
+        </div>
+      )}
+      {productTypePrices.localPrice.pricePerStay !==
+        productTypePrices.localPrice.pricePerNight &&
+        // Handle undefined scenarios
+        productTypePrices.localPrice.pricePerNight && (
+          <>
+            <Divider className={styles.divider} />
+            <div className={styles.priceRow}>
+              <dt>
+                <Caption color="uiTextMediumContrast">
+                  {intl.formatMessage({
+                    defaultMessage: 'Total',
+                  })}
+                </Caption>
+              </dt>
+              <dd>
+                <Caption color={'uiTextMediumContrast'}>
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                  {`${productTypePrices.localPrice.pricePerStay} `}
+                  {productTypePrices.localPrice.currency}
+                </Caption>
+              </dd>
+            </div>
+          </>
+        )}
+    </dl>
+  )
+}
--- a/packages/design-system/lib/components/HotelCard/HotelVoucherCard/hotelVoucherCard.module.css
+++ b/packages/design-system/lib/components/HotelCard/HotelVoucherCard/hotelVoucherCard.module.css
@@ -0,0 +1,19 @@
+.voucherCard {
+  padding: var(--Spacing-x-one-and-half);
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  border-radius: var(--Corner-radius-md);
+  margin: 0;
+  width: 100%;
+}
+
+.voucherRow,
+.voucher {
+  display: flex;
+  gap: var(--Spacing-x-half);
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.voucher {
+  justify-content: end;
+}
--- a/packages/design-system/lib/components/HotelCard/HotelVoucherCard/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelVoucherCard/index.tsx
@@ -0,0 +1,36 @@
+import { useIntl } from 'react-intl'
+
+import { CurrencyEnum } from '@scandic-hotels/common/constants/currency'
+import Caption from '@scandic-hotels/design-system/Caption'
+import Subtitle from '@scandic-hotels/design-system/Subtitle'
+
+import styles from './hotelVoucherCard.module.css'
+
+import type { ProductTypeVoucher } from '@scandic-hotels/trpc/types/availability'
+
+export default function HotelVoucherCard({
+  productTypeVoucher,
+}: {
+  productTypeVoucher: ProductTypeVoucher
+}) {
+  const intl = useIntl()
+  return (
+    <div className={styles.voucherCard}>
+      <div className={styles.voucherRow}>
+        <Caption>
+          {intl.formatMessage({
+            defaultMessage: 'From',
+          })}
+        </Caption>
+        <div className={styles.voucher}>
+          <Subtitle type="two" color="uiTextHighContrast">
+            {productTypeVoucher.numberOfVouchers}
+          </Subtitle>
+          <Caption color="uiTextHighContrast" className={styles.currency}>
+            {CurrencyEnum.Voucher}
+          </Caption>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/packages/design-system/lib/components/HotelCard/NoPriceAvailableCard/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/NoPriceAvailableCard/index.tsx
@@ -0,0 +1,25 @@
+import { useIntl } from 'react-intl'
+
+import { MaterialIcon } from '@scandic-hotels/design-system/Icons/MaterialIcon'
+import { Typography } from '@scandic-hotels/design-system/Typography'
+
+import styles from './noPriceAvailable.module.css'
+
+export function NoPriceAvailableCard() {
+  const intl = useIntl()
+  return (
+    <div className={styles.priceCard}>
+      <div className={styles.noRooms}>
+        <MaterialIcon icon="error" color="Icon/Feedback/Error" />
+        <Typography variant="Body/Paragraph/mdRegular">
+          <span>
+            {intl.formatMessage({
+              defaultMessage:
+                'There are no rooms available that match your request.',
+            })}
+          </span>
+        </Typography>
+      </div>
+    </div>
+  )
+}
--- a/packages/design-system/lib/components/HotelCard/NoPriceAvailableCard/noPriceAvailable.module.css
+++ b/packages/design-system/lib/components/HotelCard/NoPriceAvailableCard/noPriceAvailable.module.css
@@ -0,0 +1,12 @@
+.priceCard {
+  padding: var(--Spacing-x-one-and-half);
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  border-radius: var(--Corner-radius-md);
+  margin: 0;
+  width: 100%;
+}
+
+.noRooms {
+  display: flex;
+  gap: var(--Spacing-x1);
+}
--- a/packages/design-system/lib/components/HotelCard/hotelCard.module.css
+++ b/packages/design-system/lib/components/HotelCard/hotelCard.module.css
@@ -0,0 +1,188 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-md);
+  width: 100%;
+  overflow: hidden;
+  color: var(--Text-Default);
+}
+
+.card.active {
+  border: 1px solid var(--Base-Border-Hover);
+}
+
+.card.active {
+  border: 1px solid var(--Base-Border-Hover);
+}
+
+.imageContainer {
+  position: relative;
+  height: 200px;
+  width: 100%;
+}
+
+.imageContainer img {
+  object-fit: cover;
+}
+
+.hotelInformation {
+  margin-bottom: var(--Space-x05);
+}
+
+.hotelContent {
+  display: flex;
+  flex-direction: column;
+  padding: var(--Space-x2);
+  justify-content: space-between;
+}
+
+.hotelDescription {
+  display: none;
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x05);
+  margin-top: var(--Space-x05);
+}
+
+.addressContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--Space-x1);
+}
+
+.address {
+  font-style: normal;
+  color: var(--Text-Tertiary);
+}
+
+.facilities {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--Space-x1);
+  margin-top: var(--Space-x15);
+}
+
+.facilitiesItem {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x05);
+  color: var(--Text-Secondary);
+}
+
+.specialAlerts {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+}
+
+.prices {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x15);
+  width: 100%;
+}
+
+.link:hover {
+  .fakeButton {
+    background-color: var(--Component-Button-Brand-Primary-Fill-Hover);
+    border-color: var(--Component-Button-Brand-Primary-Border-Hover);
+    color: var(--Component-Button-Brand-Primary-On-fill-Hover);
+  }
+
+  .priceCard {
+    background: linear-gradient(
+      0deg,
+      var(--Surface-Primary-Hover) 0%,
+      var(--Surface-Primary-Hover) 100%
+    );
+  }
+}
+
+.strikedText {
+  text-decoration: line-through;
+}
+
+.pointsCard {
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  padding: var(--Space-x15);
+  border-radius: var(--Corner-radius-md);
+}
+
+.fakeButton {
+  min-width: 160px;
+  border-radius: var(--Corner-radius-rounded);
+  border-width: 2px;
+  border-style: solid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--Space-x05);
+
+  padding: 10px var(--Space-x2);
+  background-color: var(--Component-Button-Brand-Primary-Fill-Default);
+  border-color: var(--Component-Button-Brand-Primary-Border-Default);
+  color: var(--Component-Button-Brand-Primary-On-fill-Default);
+}
+
+.fakeButton.disabled {
+  background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
+  border-color: var(--Component-Button-Brand-Primary-Border-Disabled);
+  color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
+}
+
+@media screen and (min-width: 768px) and (max-width: 1024px) {
+  .imageContainer {
+    height: 180px;
+  }
+}
+@media screen and (min-width: 1367px) {
+  .card.pageListing {
+    flex-direction: row;
+    overflow: hidden;
+    padding: 0;
+  }
+
+  .pageListing .hotelDescription {
+    display: block;
+  }
+
+  .pageListing .imageContainer {
+    position: relative;
+    height: 100%;
+    width: 314px;
+  }
+
+  .pageListing .hotelInformation {
+    width: min(422px, 100%);
+    padding-right: var(--Space-x2);
+    margin: 0;
+  }
+
+  .pageListing .facilities {
+    margin: var(--Space-x1) 0;
+  }
+
+  .pageListing .hotelContent {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--Space-x2);
+    padding-left: var(--Space-x3);
+  }
+
+  .pageListing .titleContainer {
+    margin-bottom: var(--Space-x15);
+  }
+
+  .pageListing .fakeButton {
+    width: 100%;
+  }
+
+  .pageListing .prices {
+    width: 260px;
+  }
+}
--- a/packages/design-system/lib/components/HotelCard/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/index.tsx
@@ -0,0 +1,377 @@
+'use client'
+
+import { cx } from 'class-variance-authority'
+import { type ReadonlyURLSearchParams, useSearchParams } from 'next/navigation'
+import { memo } from 'react'
+import { useIntl } from 'react-intl'
+
+import {
+  alternativeHotelsMap,
+  selectHotelMap,
+  selectRate,
+} from '@scandic-hotels/common/constants/routes/hotelReservation'
+import { getSingleDecimal } from '@scandic-hotels/common/utils/numberFormatting'
+import Caption from '@scandic-hotels/design-system/Caption'
+import { Divider } from '@scandic-hotels/design-system/Divider'
+import { FacilityToIcon } from '@scandic-hotels/design-system/FacilityToIcon'
+import HotelLogoIcon from '@scandic-hotels/design-system/Icons/HotelLogoIcon'
+import ImageGallery, {
+  GalleryImage,
+} from '@scandic-hotels/design-system/ImageGallery'
+import { HotelPointsRow } from './HotelPointsRow'
+import { NoPriceAvailableCard } from './NoPriceAvailableCard'
+import Link from '@scandic-hotels/design-system/Link'
+import { Typography } from '@scandic-hotels/design-system/Typography'
+
+import HotelChequeCard from './HotelChequeCard'
+import { HotelPriceCard } from './HotelPriceCard'
+import HotelVoucherCard from './HotelVoucherCard'
+import { hotelCardVariants } from './variants'
+
+import styles from './hotelCard.module.css'
+
+import type { Lang } from '@scandic-hotels/common/constants/language'
+import { FacilityEnum } from '@scandic-hotels/common/constants/facilities'
+import { RateTypeEnum } from '@scandic-hotels/common/constants/rateType'
+import { CurrencyEnum } from '@scandic-hotels/common/constants/currency'
+import { BookingCodeChip } from '../BookingCodeChip'
+import { HotelType } from '@scandic-hotels/common/constants/hotelType'
+import { TripAdvisorChip } from '../TripAdvisorChip'
+
+type Price = {
+  pricePerStay: number
+  pricePerNight: number
+  currency: string
+}
+
+export type HotelCardProps = {
+  hotel: {
+    id: string
+    hotelType: HotelType
+    name: string
+    description?: string
+    detailedFacilities: { name: string; id: FacilityEnum }[]
+    address: {
+      city: string
+      streetAddress: string
+    }
+    ratings?: {
+      tripAdvisor?: number
+    }
+  }
+  prices: {
+    public?: {
+      rateType: RateTypeEnum
+      localPrice: Price
+      requestedPrice?: Price
+    }
+    member?: {
+      rateType: RateTypeEnum
+      localPrice: Price
+      requestedPrice?: Price
+    }
+    voucher?: {
+      numberOfVouchers: number
+      rateCode: string
+      rateType: RateTypeEnum
+    }
+    bonusCheque?: {
+      rateCode: string
+      rateType: RateTypeEnum
+      localPrice: {
+        additionalPricePerStay: number
+        currency: CurrencyEnum | null | undefined
+        numberOfCheques: number
+      }
+      requestedPrice?: {
+        additionalPricePerStay: number
+        currency: CurrencyEnum | null | undefined
+        numberOfCheques: number
+      }
+    }
+    redemptions?: {
+      rateCode: string
+      hasEnoughPoints: boolean
+      localPrice: {
+        additionalPricePerStay: number
+        pointsPerStay: number
+        currency: string
+      }
+    }[]
+  }
+
+  images: GalleryImage[]
+  distanceToCityCenter: number
+  isUserLoggedIn: boolean
+  type?: 'mapListing' | 'pageListing'
+  state?: 'default' | 'active'
+  bookingCode?: string | null
+  isAlternative?: boolean
+
+  lang: Lang
+
+  belowInfoSlot: React.ReactNode
+
+  onHover: () => void
+  onHoverEnd: () => void
+  onAddressClick: () => void
+}
+
+export const HotelCard = memo(
+  ({
+    prices,
+    hotel,
+    distanceToCityCenter,
+    isUserLoggedIn,
+    state = 'default',
+    type = 'pageListing',
+    bookingCode = '',
+    isAlternative,
+    images,
+    lang,
+    belowInfoSlot,
+    onAddressClick,
+    onHover,
+    onHoverEnd,
+  }: HotelCardProps) => {
+    const searchParams = useSearchParams()
+
+    const intl = useIntl()
+
+    const amenities = hotel.detailedFacilities.slice(0, 5)
+    const classNames = hotelCardVariants({
+      type,
+      state,
+    })
+
+    const mapUrl = isAlternative
+      ? alternativeHotelsMap(lang)
+      : selectHotelMap(lang)
+    const handleAddressClick = (event: React.MouseEvent) => {
+      event.preventDefault()
+      onAddressClick()
+    }
+
+    const addressStr = `${hotel.address.streetAddress}, ${hotel.address.city}`
+    const fullPrice = !bookingCode
+
+    const hasInsufficientPoints = !prices.redemptions?.some(
+      (r) => r.hasEnoughPoints
+    )
+    const notEnoughPointsLabel = intl.formatMessage({
+      defaultMessage: 'Not enough points',
+    })
+
+    const isDisabled = prices.redemptions?.length && hasInsufficientPoints
+
+    return (
+      <article
+        className={classNames}
+        onMouseEnter={() => onHover()}
+        onMouseLeave={() => onHoverEnd()}
+      >
+        <div>
+          <div className={styles.imageContainer}>
+            <ImageGallery
+              title={hotel.name}
+              images={images}
+              fill
+              sizes="(min-width: 768px) calc(100vw - 340px), (min-width: 1367px) 33vw, 100vw"
+            />
+            {hotel.ratings?.tripAdvisor && (
+              <TripAdvisorChip rating={hotel.ratings.tripAdvisor} />
+            )}
+          </div>
+        </div>
+        <div className={styles.hotelContent}>
+          <div className={styles.hotelInformation}>
+            <div className={styles.titleContainer}>
+              <HotelLogoIcon hotelId={hotel.id} hotelType={hotel.hotelType} />
+              <Typography variant="Title/Subtitle/lg">
+                <h2>{hotel.name}</h2>
+              </Typography>
+              <div className={styles.addressContainer}>
+                <address className={styles.address}>
+                  {type == 'mapListing' && (
+                    <Typography variant="Body/Supporting text (caption)/smRegular">
+                      <p>{addressStr}</p>
+                    </Typography>
+                  )}
+                  {type === 'pageListing' && (
+                    <Link
+                      size="small"
+                      textDecoration="underline"
+                      onClick={handleAddressClick}
+                      href={mapUrl}
+                      keepSearchParams
+                      aria-label={intl.formatMessage({
+                        defaultMessage: 'See on map',
+                      })}
+                    >
+                      <Typography variant="Body/Supporting text (caption)/smRegular">
+                        <p>{addressStr}</p>
+                      </Typography>
+                    </Link>
+                  )}
+                </address>
+
+                <div>
+                  <Divider variant="vertical" />
+                </div>
+                <Typography variant="Body/Supporting text (caption)/smRegular">
+                  <span>
+                    {intl.formatMessage(
+                      {
+                        defaultMessage: '{number} km to city center',
+                      },
+                      {
+                        number: getSingleDecimal(distanceToCityCenter / 1000),
+                      }
+                    )}
+                  </span>
+                </Typography>
+              </div>
+            </div>
+
+            {hotel.description ? (
+              <Typography variant="Body/Paragraph/mdRegular">
+                <p className={styles.hotelDescription}>{hotel.description}</p>
+              </Typography>
+            ) : null}
+
+            <div className={styles.facilities}>
+              {amenities.map((facility) => (
+                <div className={styles.facilitiesItem} key={facility.id}>
+                  <FacilityToIcon id={facility.id} color="CurrentColor" />
+                  <Typography variant="Body/Supporting text (caption)/smRegular">
+                    <span>{facility.name}</span>
+                  </Typography>
+                </div>
+              ))}
+            </div>
+            {belowInfoSlot}
+          </div>
+          <PricesWrapper
+            pathname={selectRate(lang)}
+            isClickable={prices && !isDisabled}
+            hotelId={hotel.id}
+            removeBookingCodeFromSearchParams={!!(bookingCode && fullPrice)}
+            searchParams={searchParams}
+          >
+            {!prices ? (
+              <NoPriceAvailableCard />
+            ) : (
+              <>
+                {bookingCode && (
+                  <BookingCodeChip
+                    bookingCode={bookingCode}
+                    isUnavailable={fullPrice}
+                  />
+                )}
+                {(!isUserLoggedIn ||
+                  !prices?.member ||
+                  (bookingCode && !fullPrice)) &&
+                  prices?.public && (
+                    <HotelPriceCard
+                      productTypePrices={prices.public}
+                      className={styles.priceCard}
+                    />
+                  )}
+                {prices.member && (
+                  <HotelPriceCard
+                    productTypePrices={prices.member}
+                    className={styles.priceCard}
+                    isMemberPrice
+                  />
+                )}
+                {prices?.voucher && (
+                  <HotelVoucherCard productTypeVoucher={prices.voucher} />
+                )}
+                {prices?.bonusCheque && (
+                  <HotelChequeCard productTypeCheque={prices.bonusCheque} />
+                )}
+                {prices?.redemptions?.length ? (
+                  <div className={styles.pointsCard}>
+                    <Caption>
+                      {intl.formatMessage({
+                        defaultMessage: 'Available rates',
+                      })}
+                    </Caption>
+                    {prices.redemptions.map((redemption) => (
+                      <HotelPointsRow
+                        key={redemption.rateCode}
+                        pointsPerStay={redemption.localPrice.pointsPerStay}
+                        additionalPricePerStay={
+                          redemption.localPrice.additionalPricePerStay
+                        }
+                        additionalPriceCurrency={
+                          redemption.localPrice.currency ?? undefined
+                        }
+                      />
+                    ))}
+                  </div>
+                ) : null}
+                {isDisabled ? (
+                  <div className={cx(styles.fakeButton, styles.disabled)}>
+                    <Typography variant="Body/Paragraph/mdBold">
+                      <span>{notEnoughPointsLabel}</span>
+                    </Typography>
+                  </div>
+                ) : (
+                  <div className={styles.fakeButton}>
+                    <Typography variant="Body/Paragraph/mdBold">
+                      <span>
+                        {intl.formatMessage({
+                          defaultMessage: 'See rooms',
+                        })}
+                      </span>
+                    </Typography>
+                  </div>
+                )}
+              </>
+            )}
+          </PricesWrapper>
+        </div>
+      </article>
+    )
+  }
+)
+
+interface PricesWrapperProps {
+  children: React.ReactNode
+  isClickable?: boolean
+  hotelId: string
+  pathname: string
+  removeBookingCodeFromSearchParams: boolean
+  searchParams: ReadonlyURLSearchParams
+}
+function PricesWrapper({
+  children,
+  hotelId,
+  isClickable,
+  pathname,
+  removeBookingCodeFromSearchParams,
+  searchParams,
+}: PricesWrapperProps) {
+  const content = <div className={styles.prices}>{children}</div>
+
+  if (!isClickable) {
+    return content
+  }
+
+  const params = new URLSearchParams(searchParams)
+  params.delete('city')
+  params.set('hotel', hotelId)
+
+  if (removeBookingCodeFromSearchParams) {
+    params.delete('bookingCode')
+  }
+
+  const href = `${pathname}?${params.toString()}`
+
+  return (
+    <Link href={href} color="none" className={styles.link}>
+      {content}
+    </Link>
+  )
+}
--- a/packages/design-system/lib/components/HotelCard/variants.ts
+++ b/packages/design-system/lib/components/HotelCard/variants.ts
@@ -0,0 +1,20 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './hotelCard.module.css'
+
+export const hotelCardVariants = cva(styles.card, {
+  variants: {
+    type: {
+      pageListing: styles.pageListing,
+      mapListing: styles.mapListing,
+    },
+    state: {
+      active: styles.active,
+      default: styles.default,
+    },
+  },
+  defaultVariants: {
+    type: 'pageListing',
+    state: 'default',
+  },
+})