@volcanoteide/vte-components NPM

Web components for Volcano Teide booking engine

Install

yarn add @volcanoteide/vte-components

In the project directory, you can run:

Usage

Import the required component

import VolcanoBookingWidget from "@volcanoteide/VolcanoBookingWidget";
import VolcanoCheckoutWidget from "@volcanoteide/VolcanoCheckoutWidget";
import VolcanoOrderResultWidget from "@volcanoteide/VolcanoOrderResultWidget";

Add the component with the rquired configuration properties

Booking widget

  <VolcanoBookingWidget 
    apiConfig={{
      protocol: 'https',
      host: [API_URL]',
      port: 443,
      strictSSL: true,
      timeout: 10000,
      site_key: [API_KEY]
    }}
    locale=[LOCALE]
    experienceId={[EXPERIENCE_ID]}
    defaultSelection={[DEFAULT_SELECTION]}
    onConfirm={[BOOKING_CONFIRM_HANDLER]}
  />

Option	Description	Required
API_URL	Volcano API url	Yes
API_KEY	Provided Volcano API site KEY	Yes
LOCALE	Date and pricing will be formatted with this locale	Yes
EXPERIENCE	Experience identifier	Yes
DEFAULT_SELECTION	Default widget values: productId, date, session, rates	No
BOOKING_CONFIRM_HANDLER	This callback will be used after the booking is confirmed and added to the commerce cart	Yes

Checkout widget

  <VolcanoCheckoutWidget 
    apiConfig={{
      protocol: 'https',
      host: [API_URL]',
      port: 443,
      strictSSL: true,
      timeout: 10000,
      site_key: [API_KEY]
    }}
    locale=[LOCALE]
    conditionsConfig={[CONDITIONS_CONFIG]}
    sohwPromoCheck={[SHOW_PROMO_CHECK]}
  />

Option	Description	Required
API_URL	Volcano API url	Yes
API_KEY	Provided Volcano API site KEY	Yes
LOCALE	Date and pricing will be formatted with this locale	Yes
CONDITIONS_CONFIG	Legal terms checkboxes configuration	Yes
SHOW_PROMO_CHECK	Show or hide promotions check	No

Conditions config

This configuration describes the information that will be sohwn in the legal terms acceptance block.

const conditionsConfig = {
  title: "Legal terms checkbox label"
  info: "Information text for legal terms checkbox"
  modal: {
    title: "Title for the popup shown with the first click in legal terms checkbox"
    content: JSX with the popup content
  },
  extraConditions: [
    {
      id: "client.conditions.extra1_conditions",
      title: "Extra required condition checkbox title"
    },
    ...
    {
      id: "client.conditions.extraN_conditions",
      title: "Extra required condition checkbox title"
    }
  ]
}

Order result widget

  <VolcanoOrderResultWidget 
    apiConfig={{
      protocol: 'https',
      host: [API_URL]',
      port: 443,
      strictSSL: true,
      timeout: 10000,
      site_key: [API_KEY]
    }}
    locale=[LOCALE]
  />