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
This commit is contained in:
Joakim Jäderberg
@@ -0,0 +1,219 @@
|
||||
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'
|
||||
|
||||
const meta: Meta<typeof InteractiveMap> = {
|
||||
title: 'Components/Map/Interactive Map',
|
||||
component: InteractiveMap,
|
||||
argTypes: {},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
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',
|
||||
},
|
||||
},
|
||||
],
|
||||
isUserLoggedIn: false,
|
||||
coordinates: {
|
||||
lat: 59.32644916839965,
|
||||
lng: 18.067759400301135,
|
||||
},
|
||||
},
|
||||
render: (args) => {
|
||||
const mapKey = import.meta.env.VITE_GOOGLE_STATIC_MAP_KEY
|
||||
const mapId = import.meta.env.VITE_GOOGLE_DYNAMIC_MAP_ID
|
||||
if (!mapKey || !mapId) {
|
||||
throw new Error(
|
||||
'VITE_GOOGLE_STATIC_MAP_KEY or VITE_GOOGLE_DYNAMIC_MAP_ID is not defined in your .env file. Please add it to run this story.'
|
||||
)
|
||||
}
|
||||
|
||||
const [hoveredHotelPin, setHoveredHotelPin] = useState<string | null>()
|
||||
const [activeHotelPin, setActiveHotelPin] = useState<string | null>()
|
||||
|
||||
return (
|
||||
<APIProvider apiKey={mapKey}>
|
||||
<div
|
||||
style={
|
||||
{
|
||||
'--hotel-map-height': '300px',
|
||||
height: 'max(500px, 90vh)',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<InteractiveMap
|
||||
{...args}
|
||||
mapId={mapId}
|
||||
hoveredHotelPin={hoveredHotelPin}
|
||||
onHoverHotelPin={(args) => {
|
||||
setHoveredHotelPin(args?.hotelName ?? null)
|
||||
}}
|
||||
activeHotelPin={activeHotelPin}
|
||||
onSetActiveHotelPin={(args) => {
|
||||
setActiveHotelPin(args?.hotelName ?? null)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</APIProvider>
|
||||
)
|
||||
},
|
||||
}
|
||||
Reference in New Issue
Block a user