@enjoytech/enjoy-integration v5.3.2

Enjoy Integration Widget

This is a drop-in JavaScript component that will displays available times and create reservations using Enjoy's API.

Constructor Options

• endpoint (string): URL to use for Enjoy API, overrides any internal default (e.g. https://api.staging.enjoy.com instead of the standard https://api.enjoy.com)
• sessionId(string): A unique identifier for the current user. If a reservation is created with the same sessionId as one that already exists, it will replace that reservation.
• elementIds(Object): Specifies the ids of the DOM elements that will be used to render Enjoy components for any specified service levels. Object keys are the service level (e.g. premium) and the values are the DOM ids (e.g. enjoy-premium-container)
• skus (Array\<string>): Array of Enjoy SKUs that represent the content of the user's cart. If they have more than one of a given SKU, this array should have that many copies of the skus (e.g. ABCx2 would be ['ABC', 'ABC']
• address (Object): Object representing the delivery address of the user. Will be used to both fetch available times and make reservations.
  • streetAddress
  • streetAddress2
  • city
  • state
  • zip
• orderId (string): Existing order ID (Enjoy or partner-specific) to performing scheduling on. If specified, do not include the skus parameter, as it will be inferred from the order itself.
• accessToken (string): OAuth2 access token obtained from the Enjoy API, with the scope of public.
• mobileBreakpoint (number): Pixel width of the screen at which to switch from desktop display to a mobile friendly display. Defaults to 480.
• selectedExperience (string): Sets the initially selected experience (i.e. premium, express, etc.). This is used in conjunction with initialReservationError to show an error on initial rendering.
• selectedTime (Array<string>): Sets the initially selected time if a selectedExperience is also given. selectedTime must be an array of the format [ startTime, endTime ] with ISO8601 times (2017-10-19T21:30:00Z)
• initialReservationError (boolean): Whether or not to show a reservation error on initial render for the selectedExperience.

• tooltips: (Object): A map between service levels and the HTML to display as a tooltip for that service level. Keys are service level names (e.g., "premium", "express"); values are React elements.

• onLoaded (Function): A callback function to be invoked after the component has loaded is ready to use. Will be invoked after first available times have been retrieved from the Enjoy API, which requires a valid set of skus and a valid address. Will be invoked with an object containing a loaded flag and a serviceLevels array containing information about the available service levels.

• onLoadError (Function): A callback function to be invoked if the component hits an error while loading. Will be invoked after attempting to retrieve first available times from the Enjoy API, but encountering an error. Will be invoked with a string containing detailed information about the error in question.
• onSelectExperience (Function): A callback function to be inboked after an experience option has been selected. It will be invoked with a single argument, a string, representing the currently selected experience based on the keys of elementIds.
• onCreateReservation (Function): A callback function be invoked after the component has successfully reserved a time on behalf of the user. Will be invoked with an object containing the full details of the reservation that was created.
• onCreateReservationError (Function): A callback function that will be invoked if there is an error upon reservation creation. Receives a single argument, which is a string representation of the error.
• selectDefaultDateAndTime (boolean): Whether or not a default time is selected after first available times load in.
• preSelectionMessage (string): The placeholder when a date and time has not yet been selected in the desktop display. (only used when selectDefaultDateAndTime is false)
• preSelectionMessageMobile (Object): Contains the keys date and time whose values each a (string). These strings are the placeholder when a date or time has not yet been selected in the mobile display. (only used when selectDefaultDateAndTime is false)

Class Methods

setSkus(skus)

Parameters:

1. skus (Array): New array of Enjoy SKUs that represent the current cart contents, will completely replace the existing set of SKUs.

setAddress(address)

Parameters:

1. address (Object): New address of the user to replace the current one in the integration, takes the same fields as the one above.

selectExperience(experience)

Parameters:

1. experience (string): Tell the integration which service level the reservation should be created for. Only one reservation can be active at a time, so changing the experience will invalidate an existing reservation if it does not match.

createReservation(callback)

Will instruct the component to create a reservation based on the current selectedExperience and selectedTime. Will do nothing if one or both of those values are not set.

Parameters:

1. callback (Function): A callback function to be invoked after the createReservation action has completed (either successfully or not). Takes two arguments:
2. reservation (Object): Details of the reservation, if the call completed successfully.
3. error (string): Error description, if the reservation creation failed for some reason.

NOTE: onCreateReservation and onCreateReservationError callbacks will still be fired, so no need to duplicate logic performed there.

render()

Renders the component into the page at the specified elementIds

Example

const enjoyIntegration = new window.EnjoyIntegration({
  sessionId: 'TESTTESTTEST',
  accessToken: '2b3d72371b61036bcc2a25c83b96ba1ac4748142abb5f483f43ed7c9bcd2bbc2',
  elementIds: {
    premium: 'enjoy-premium',
    express: 'enjoy-express',
  },
  skus: ['0013-0004-AA001'],
  address: {
    streetAddress: '171 Constitution Drive',
    streetAddress2: '',
    city: 'Menlo Park',
    state: 'CA',
    zip: '94025',
  },
  tooltips: {
    premium: (<div>Hello, world!</div>) // React/JSX syntax
  },
  onCreateReservation: onCreateReservation,
  onCreateReservationError: onCreateReservationError
  onLoaded: onLoaded,
})

function onLoaded(info) {
  if (info.loaded) {
    info.serviceLevels.map(({ level, firstAvailableTime }) => {
      // Disable inputs for options that do not have any available times
      document.querySelector(`input[value=${level}]`).disabled = !firstAvailableTime
    })
  }
}

function onLoadError(loadError) {
  if (loadError) {
    // Disable/hide all inputs for Enjoy delivery options
    document.querySelectorAll(`input.enjoy-option`).forEach(function(input) {
      input.disabled = true
    })
  }
}

function onCreateReservation(reservation) {
  // Save reservation to server, insert into form, etc.
}

function onCreateReservationError(errorMessage) {
  // Display message to the user
}

enjoyIntegration.createReservation(function(reservation, error) {
  if (error || !reservation) {
    // Show error to user
  } else {
    // Save reservation data and continue
  }
})