@volcanoteide/vte-components

Web components for Volcano Teide booking engine

Usage no npm install needed!

<script type="module">
  import volcanoteideVteComponents from 'https://cdn.skypack.dev/@volcanoteide/vte-components';
</script>

README

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]
  />
Option Description Required
API_URL Volcano API url Yes
API_KEY Provided Volcano API site KEY Yes
LOCALE Locale Yes