web/packages/design-system/lib/components/Map/InteractiveMap/InteractiveMap.stories.tsx

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>
    )
  },
}