@volvo-car-mobility/web-reservation NPM

Web reservation

Perequisite

This package should only be used on https://www.volvocars.com/en-se/on-demand. It provides an iframe with the web-reservation app. Hence it will only work on volvocars domain with the current CSP rules.

Install

With yarn:

yarn add @volvo-car-mobility/web-reservation

With npm:

npm install @volvo-car-mobility/web-reservation

Use

Provides the web reservation view in 100% width with custom ratios for different breakpoints. Use within your own wrapper if you would want to control the width or border style.\ The ratios are:

Mobile: 9/16
Laptop: 4/3
Desktop: 16/9

import React, { FC } from "react"
import {
  WebReservationProvider,
  WebReservation,
  useWebReservation,
  WebReservationVariations,
} from "@volvo-car-mobility/web-reservation"

export const Page: FC = () => {
  return (
    <section>
      <WebReservationProvider>
        <ExperimentButton />
        <p>Lorem ipsum</p>
        <div>
          <WebReservation locale="se" env="staging" />
        </div>
      </WebReservationProvider>
    </section>
  )
}

const ExperimentButton: FC = () => {
  const { isExperimentOn, experimentData } = useWebReservation()

  const handleButtonClick = () => {
    // handle things for variation WebReservationVariations.ShowMap
    // i.e scroll the map into view
  }

  const handleLinkClick = () => {
    // handle things for variation WebReservationVariations.HideMap
    window.dataLayer({
      event: "download_button_click",
      ...experimentData,
    })
  }

  if (!isExperimentOn) {
    return null
  }

  if (experimentData?.variation === WebReservationVariations.ShowMap) {
    return <button onClick={handleButtonClick}>Find cars</button>
  }

  return (
    <a href="adjust-link" onClick={handleLinkClick}>
      Find cars
    </a>
  )
}