fix(BOOK-418): Refactored StandaloneHotelCardDialog and fixed pricing issue when using redemption or booking codes

Approved-by: Bianca Widstam
2025-10-20 10:40:38 +00:00
parent 710309b7eb
commit 3e3a7fc423
12 changed files with 605 additions and 412 deletions
--- a/packages/design-system/lib/components/Map/InteractiveMap/HotelListingMapContent/index.tsx
+++ b/packages/design-system/lib/components/Map/InteractiveMap/HotelListingMapContent/index.tsx
@@ -5,12 +5,13 @@ import {
 } from '@vis.gl/react-google-maps'
 import { useMediaQuery } from 'usehooks-ts'

-import { HotelPin } from './HotelPin'
+import { CurrencyEnum } from '@scandic-hotels/common/constants/currency'
+import { Lang } from '@scandic-hotels/common/constants/language'
+import { useIntl } from 'react-intl'
+import { StandaloneHotelCardDialog } from '../../../HotelCard/HotelDialogCard/StandaloneHotelCardDialog'
 import type { HotelPin as HotelPinType } from '../../types'
 import styles from './hotelListingMapContent.module.css'
-import { StandaloneHotelCardDialog } from '../../../HotelCard/HotelDialogCard/StandaloneHotelCardDialog'
-import { Lang } from '@scandic-hotels/common/constants/language'
-import { CurrencyEnum } from '@scandic-hotels/common/constants/currency'
+import { HotelPin } from './HotelPin'

 export type HotelListingMapContentProps = {
  hotelPins: HotelPinType[]
@@ -36,6 +37,7 @@ export function HotelListingMapContent({
  onClickHotel,
  pointsCurrency,
 }: HotelListingMapContentProps) {
+  const intl = useIntl()
  const isDesktop = useMediaQuery('(min-width: 900px)')

  const toggleActiveHotelPin = (
@@ -62,6 +64,10 @@ export function HotelListingMapContent({
          pin.chequePrice?.numberOfCheques ??
          null

+        const pinCurrency = pin.redemptionPrice
+          ? intl.formatMessage({ defaultMessage: 'Points' })
+          : pin.currency
+
        const hotelAdditionalPrice = pin.chequePrice
          ? pin.chequePrice.additionalPricePerStay
          : undefined
@@ -114,7 +120,7 @@ export function HotelListingMapContent({
            <HotelPin
              isActive={isActiveOrHovered}
              hotelPrice={hotelPrice}
-              currency={pin.currency}
+              currency={pinCurrency}
              hotelAdditionalPrice={hotelAdditionalPrice}
              hotelAdditionalCurrency={hotelAdditionalCurrency}
            />
--- a/packages/design-system/lib/components/Map/InteractiveMap/InteractiveMap.stories.tsx
+++ b/packages/design-system/lib/components/Map/InteractiveMap/InteractiveMap.stories.tsx
@@ -1,10 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'

 // import { expect, fn } from 'storybook/test'
-import { InteractiveMap } from '.'
 import { Lang } from '@scandic-hotels/common/constants/language'
 import { APIProvider } from '@vis.gl/react-google-maps'
 import { useState } from 'react'
+import { InteractiveMap } from '.'
+import { hotelPins } from './storybookData'

 const meta: Meta<typeof InteractiveMap> = {
  title: 'Components/Map/Interactive Map',
@@ -19,159 +20,7 @@ type Story = StoryObj<typeof InteractiveMap>
 export const PrimaryDefault: Story = {
  args: {
    lang: Lang.en,
-    hotelPins: [
-      {
-        coordinates: {
-          lat: 59.331303,
-          lng: 18.065542,
-        },
-        name: 'Downtown Camper by Scandic',
-        chequePrice: null,
-        publicPrice: 1100,
-        memberPrice: 1067,
-        redemptionPrice: null,
-        voucherPrice: null,
-        rateType: 'Regular',
-        currency: 'SEK',
-
-        amenities: [
-          {
-            filter: 'Hotel facilities',
-            icon: 'Pool',
-            id: 1831,
-            name: 'Pool',
-            public: true,
-            sortOrder: 7000,
-            slug: 'pool',
-          },
-          {
-            filter: 'Hotel facilities',
-            icon: 'Restaurant',
-            id: 1383,
-            name: 'Restaurant',
-            public: true,
-            sortOrder: 6000,
-            slug: 'restaurant',
-          },
-          {
-            filter: 'None',
-            icon: 'KayaksForLoan',
-            id: 162585,
-            name: 'Kayaks for loan',
-            public: true,
-            sortOrder: 5000,
-            slug: 'kayaks-for-loan',
-          },
-          {
-            filter: 'Hotel facilities',
-            icon: 'None',
-            id: 239348,
-            name: 'Rooftop bar',
-            public: false,
-            sortOrder: 4000,
-            slug: 'rooftop-bar',
-          },
-          {
-            filter: 'None',
-            icon: 'BikesForLoan',
-            id: 5550,
-            name: 'Bikes for loan',
-            public: true,
-            sortOrder: 3000,
-            slug: 'bikes-for-loan',
-          },
-        ],
-        ratings: {
-          tripAdvisor: 4.4,
-        },
-        operaId: '879',
-        facilityIds: [
-          1831, 1383, 162585, 239348, 5550, 162586, 5806, 1014, 1835, 1829,
-          1379, 1382, 162587, 1017, 1378, 1408, 1833, 971, 1834, 162584, 1381,
-          229144, 267806,
-        ],
-        hasEnoughPoints: false,
-        image: {
-          alt: 'Bar of Downtown Camper by Scandic in Stockholm',
-          url: 'https://images-test.scandichotels.com/publishedmedia/z68596isempb61xm2ns9/Scandic_Downtown_Camper_spa_wellness_the_nest_swim.jpg',
-        },
-      },
-      {
-        coordinates: {
-          lat: 59.33469,
-          lng: 18.061586,
-        },
-        name: 'Haymarket by Scandic',
-        chequePrice: null,
-        publicPrice: null,
-        memberPrice: 9999,
-        redemptionPrice: null,
-        voucherPrice: null,
-        rateType: 'Regular',
-        currency: 'SEK',
-
-        amenities: [
-          {
-            filter: 'Hotel facilities',
-            icon: 'Restaurant',
-            id: 1383,
-            name: 'Restaurant',
-            public: true,
-            sortOrder: 6000,
-            slug: 'restaurant',
-          },
-          {
-            filter: 'None',
-            icon: 'None',
-            id: 5806,
-            name: 'Meeting / conference facilities',
-            public: true,
-            sortOrder: 1500,
-            slug: 'meeting-conference-facilities',
-          },
-          {
-            filter: 'Hotel facilities',
-            icon: 'Bar',
-            id: 1014,
-            name: 'Bar',
-            public: true,
-            sortOrder: 1401,
-            slug: 'bar',
-          },
-          {
-            filter: 'Hotel facilities',
-            icon: 'PetFriendlyRooms',
-            id: 1835,
-            name: 'Pet-friendly rooms',
-            public: true,
-            sortOrder: 1201,
-            slug: 'pet-friendly-rooms',
-          },
-          {
-            filter: 'Hotel facilities',
-            icon: 'Gym',
-            id: 1829,
-            name: 'Gym',
-            public: true,
-            sortOrder: 1101,
-            slug: 'gym',
-          },
-        ],
-        ratings: {
-          tripAdvisor: 4.1,
-        },
-        operaId: '890',
-        facilityIds: [
-          1383, 5806, 1014, 1835, 1829, 1382, 162587, 1017, 1833, 971, 1834,
-          1381, 1406, 1913, 345180, 375885,
-        ],
-        hasEnoughPoints: false,
-        image: {
-          alt: 'Bar',
-          url: 'https://images-test.scandichotels.com/publishedmedia/6wobp0j1ocvoopy1dmce/haymarket-by-scandic-bar-pauls_-3-.jpg',
-        },
-      },
-    ],
+    hotelPins,
    isUserLoggedIn: false,
    coordinates: {
      lat: 59.32644916839965,
--- a/packages/design-system/lib/components/Map/InteractiveMap/index.tsx
+++ b/packages/design-system/lib/components/Map/InteractiveMap/index.tsx
@@ -16,9 +16,9 @@ import PoiMapMarkers from './PoiMapMarkers'

 import styles from './interactiveMap.module.css'

-import { HotelPin, MarkerInfo, PointOfInterest } from '../types'
-import { Lang } from '@scandic-hotels/common/constants/language'
 import { CurrencyEnum } from '@scandic-hotels/common/constants/currency'
+import { Lang } from '@scandic-hotels/common/constants/language'
+import { HotelPin, MarkerInfo, PointOfInterest } from '../types'

 export type InteractiveMapProps = {
  lang: Lang
--- a/packages/design-system/lib/components/Map/InteractiveMap/storybookData.ts
+++ b/packages/design-system/lib/components/Map/InteractiveMap/storybookData.ts
@@ -0,0 +1,379 @@
+import { CurrencyEnum } from '@scandic-hotels/common/constants/currency'
+import { HotelPin } from '../types'
+
+export const hotelPins: HotelPin[] = [
+  {
+    coordinates: {
+      lat: 59.331303,
+      lng: 18.065542,
+    },
+    name: 'Downtown Camper by Scandic',
+    chequePrice: null,
+    publicPrice: 1100,
+    memberPrice: 1067,
+    redemptionPrice: null,
+    voucherPrice: null,
+    rateType: 'Regular',
+    currency: 'SEK',
+    amenities: [
+      {
+        filter: 'Hotel facilities',
+        icon: 'Pool',
+        id: 1831,
+        name: 'Pool',
+        public: true,
+        sortOrder: 7000,
+        slug: 'pool',
+      },
+      {
+        filter: 'Hotel facilities',
+        icon: 'Restaurant',
+        id: 1383,
+        name: 'Restaurant',
+        public: true,
+        sortOrder: 6000,
+        slug: 'restaurant',
+      },
+      {
+        filter: 'None',
+        icon: 'KayaksForLoan',
+        id: 162585,
+        name: 'Kayaks for loan',
+        public: true,
+        sortOrder: 5000,
+        slug: 'kayaks-for-loan',
+      },
+      {
+        filter: 'Hotel facilities',
+        icon: 'None',
+        id: 239348,
+        name: 'Rooftop bar',
+        public: false,
+        sortOrder: 4000,
+        slug: 'rooftop-bar',
+      },
+      {
+        filter: 'None',
+        icon: 'BikesForLoan',
+        id: 5550,
+        name: 'Bikes for loan',
+        public: true,
+        sortOrder: 3000,
+        slug: 'bikes-for-loan',
+      },
+    ],
+    ratings: {
+      tripAdvisor: 4.4,
+    },
+    operaId: '879',
+    facilityIds: [
+      1831, 1383, 162585, 239348, 5550, 162586, 5806, 1014, 1835, 1829, 1379,
+      1382, 162587, 1017, 1378, 1408, 1833, 971, 1834, 162584, 1381, 229144,
+      267806,
+    ],
+    hasEnoughPoints: false,
+    image: {
+      alt: 'Bar of Downtown Camper by Scandic in Stockholm',
+      url: 'https://images-test.scandichotels.com/publishedmedia/p0ffjkfyfnx502knqlxo/Scandic_Downtown_Camper_spa_wellness_the_nest_swim.jpg',
+    },
+  },
+  {
+    coordinates: {
+      lat: 59.33469,
+      lng: 18.061586,
+    },
+    name: 'Haymarket by Scandic',
+    chequePrice: null,
+    publicPrice: null,
+    memberPrice: 9999,
+    redemptionPrice: null,
+    voucherPrice: null,
+    rateType: 'Regular',
+    currency: 'SEK',
+    amenities: [
+      {
+        filter: 'Hotel facilities',
+        icon: 'Restaurant',
+        id: 1383,
+        name: 'Restaurant',
+        public: true,
+        sortOrder: 6000,
+        slug: 'restaurant',
+      },
+      {
+        filter: 'None',
+        icon: 'None',
+        id: 5806,
+        name: 'Meeting / conference facilities',
+        public: true,
+        sortOrder: 1500,
+        slug: 'meeting-conference-facilities',
+      },
+      {
+        filter: 'Hotel facilities',
+        icon: 'Bar',
+        id: 1014,
+        name: 'Bar',
+        public: true,
+        sortOrder: 1401,
+        slug: 'bar',
+      },
+      {
+        filter: 'Hotel facilities',
+        icon: 'PetFriendlyRooms',
+        id: 1835,
+        name: 'Pet-friendly rooms',
+        public: true,
+        sortOrder: 1201,
+        slug: 'pet-friendly-rooms',
+      },
+      {
+        filter: 'Hotel facilities',
+        icon: 'Gym',
+        id: 1829,
+        name: 'Gym',
+        public: true,
+        sortOrder: 1101,
+        slug: 'gym',
+      },
+    ],
+    ratings: {
+      tripAdvisor: 4.1,
+    },
+    operaId: '890',
+    facilityIds: [
+      1383, 5806, 1014, 1835, 1829, 1382, 162587, 1017, 1833, 971, 1834, 1381,
+      1406, 1913, 345180, 375885,
+    ],
+    hasEnoughPoints: false,
+    image: {
+      alt: 'Bar',
+      url: 'https://images-test.scandichotels.com/publishedmedia/lr2b7r655xl0sjcbgxt9/haymarket-by-scandic-bar-pauls_-3-.jpg',
+    },
+  },
+  {
+    coordinates: {
+      lat: 59.337166,
+      lng: 18.072765,
+    },
+    name: 'Scandic Anglais',
+    chequePrice: {
+      numberOfCheques: 1,
+      additionalPricePerStay: 500,
+      currency: CurrencyEnum.SEK,
+    },
+    publicPrice: null,
+    memberPrice: null,
+    redemptionPrice: null,
+    voucherPrice: null,
+    rateType: 'Regular',
+    currency: 'CC',
+    amenities: [
+      {
+        filter: 'Hotel facilities',
+        icon: 'Restaurant',
+        id: 1383,
+        name: 'Restaurant',
+        public: true,
+        sortOrder: 6000,
+        slug: 'restaurant',
+      },
+      {
+        filter: 'Hotel facilities',
+        icon: 'None',
+        id: 239348,
+        name: 'Rooftop bar',
+        public: false,
+        sortOrder: 4000,
+        slug: 'rooftop-bar',
+      },
+      {
+        filter: 'None',
+        icon: 'BikesForLoan',
+        id: 5550,
+        name: 'Bikes for loan',
+        public: true,
+        sortOrder: 3000,
+        slug: 'bikes-for-loan',
+      },
+      {
+        filter: 'None',
+        icon: 'None',
+        id: 5806,
+        name: 'Meeting / conference facilities',
+        public: true,
+        sortOrder: 1500,
+        slug: 'meeting-conference-facilities',
+      },
+      {
+        filter: 'Hotel facilities',
+        icon: 'Bar',
+        id: 1014,
+        name: 'Bar',
+        public: true,
+        sortOrder: 1401,
+        slug: 'bar',
+      },
+    ],
+    ratings: {
+      tripAdvisor: 3.6,
+    },
+    operaId: '810',
+    facilityIds: [
+      1383, 239348, 5550, 5806, 1014, 1835, 1829, 1379, 2665, 1382, 162587,
+      1017, 1408, 1833, 971, 1834, 1405, 1406, 956, 1913,
+    ],
+    hasEnoughPoints: false,
+    image: {
+      alt: 'lobby at scandic anglais in stockholm',
+      url: 'https://images-test.scandichotels.com/publishedmedia/wi0lzgxhbm4vmfguf7wm/scandic-anglais-lobby6.jpg',
+    },
+  },
+  {
+    coordinates: {
+      lat: 59.33099,
+      lng: 18.05926,
+    },
+    name: 'Scandic Continental',
+    chequePrice: null,
+    publicPrice: null,
+    memberPrice: null,
+    redemptionPrice: 65000,
+    voucherPrice: null,
+    rateType: 'Regular',
+    currency: 'Points',
+    amenities: [
+      {
+        filter: 'None',
+        icon: 'BikesForLoan',
+        id: 5550,
+        name: 'Bikes for loan',
+        public: true,
+        sortOrder: 3000,
+        slug: 'bikes-for-loan',
+      },
+      {
+        filter: 'None',
+        icon: 'None',
+        id: 5806,
+        name: 'Meeting / conference facilities',
+        public: true,
+        sortOrder: 1500,
+        slug: 'meeting-conference-facilities',
+      },
+      {
+        filter: 'Hotel facilities',
+        icon: 'PetFriendlyRooms',
+        id: 1835,
+        name: 'Pet-friendly rooms',
+        public: true,
+        sortOrder: 1201,
+        slug: 'pet-friendly-rooms',
+      },
+      {
+        filter: 'Hotel facilities',
+        icon: 'Gym',
+        id: 1829,
+        name: 'Gym',
+        public: true,
+        sortOrder: 1101,
+        slug: 'gym',
+      },
+      {
+        filter: 'Hotel facilities',
+        icon: 'Sauna',
+        id: 1379,
+        name: 'Sauna',
+        public: true,
+        sortOrder: 1001,
+        slug: 'sauna',
+      },
+    ],
+    ratings: {
+      tripAdvisor: 4.2,
+    },
+    operaId: '811',
+    facilityIds: [
+      5550, 5806, 1835, 1829, 1379, 2665, 1606, 1382, 1017, 1378, 1408, 1833,
+      971, 1834, 162583, 1406, 1607, 1911, 1913, 229144,
+    ],
+    hasEnoughPoints: false,
+    image: {
+      alt: 'Exterior',
+      url: 'https://images-test.scandichotels.com/publishedmedia/xnvuuzvogv7dzt3nmxit/Scandic_Continental_Exterior_Vasagatan_Day.jpg',
+    },
+  },
+  {
+    coordinates: {
+      lat: 59.323063,
+      lng: 18.069921,
+    },
+    name: 'Scandic Gamla Stan',
+    chequePrice: null,
+    publicPrice: null,
+    memberPrice: null,
+    redemptionPrice: null,
+    voucherPrice: 1,
+    rateType: 'Regular',
+    currency: 'Voucher',
+    amenities: [
+      {
+        filter: 'Hotel facilities',
+        icon: 'PetFriendlyRooms',
+        id: 1835,
+        name: 'Pet-friendly rooms',
+        public: true,
+        sortOrder: 1201,
+        slug: 'pet-friendly-rooms',
+      },
+      {
+        filter: 'Hotel facilities',
+        icon: 'OutdoorTerrace',
+        id: 1382,
+        name: 'Outdoor terrace',
+        public: true,
+        sortOrder: 550,
+        slug: 'outdoor-terrace',
+      },
+      {
+        filter: 'None',
+        icon: 'Shop',
+        id: 1408,
+        name: 'Scandic Shop 24 hrs',
+        public: true,
+        sortOrder: 301,
+        slug: 'scandic-shop-24-hrs',
+      },
+      {
+        filter: 'None',
+        icon: 'FreeWiFi',
+        id: 1833,
+        name: 'Free WiFi',
+        public: true,
+        sortOrder: 250,
+        slug: 'free-wifi',
+      },
+      {
+        filter: 'None',
+        icon: 'LaundryService',
+        id: 1834,
+        name: 'Laundry service',
+        public: true,
+        sortOrder: 199,
+        slug: 'laundry-service',
+      },
+    ],
+    ratings: {
+      tripAdvisor: 4.2,
+    },
+    operaId: '821',
+    facilityIds: [
+      1835, 1382, 1408, 1833, 1834, 1405, 345180, 332224, 375885, 238849,
+    ],
+    hasEnoughPoints: false,
+    image: {
+      alt: 'Facade Entrance Scandic Gamla Stan Stockholm',
+      url: 'https://images-test.scandichotels.com/publishedmedia/9attpqkkfy6uwc6keyvg/Scandic-Gamla-Stan-Exterior-facade.jpg',
+    },
+  },
+]