Online Ordering - Bridge API

${toc}

Zuppler Bridge

This is a JS API that provides the ability for the hosting website to adjust certain functionality of the integration. These functions can be divided in the following categories:

Initialization

The init function is called immediatelly after the integration is started and must return a resolved promise. The script need to be placed before the integration loading scripts.

Syntax:

function initClientBridge(api) {
  return Promise.resolve(null)
}

User & Profile

The bridge supports automatic login for the user, logout or update guest user information.

This is done through function loginWithProviderAndToken that gets passed the provider and the oauth user token. The server will perform a validation of the passed in token and will load user details from the provider. If either the name, email or phone is not present in the profile the system will automatically prompt the user for these informations first time.

Example:

function initClientBridge(api) {
  return api.loginWithProviderAndToken('example_provider', '22dbf358-5823-4064-8f9e-0f9a2bd2c68b')
}

Logout

If for certain reason user needs to be logged out bridge exposes a function for that. This will cleanup for the cart and customer and in some cases will reload the page.

Example:

var zupplerAPI = null
function initClientBridge(api) {
  zupplerAPI = api
  return api.loginWithProviderAndToken('example_provider', '22dbf358-5823-4064-8f9e-0f9a2bd2c68b')
}

function onLogout() {
  zupplerAPI.logout()
    .then(() => console.log("Succesfully logout, update the state of the UI"))
}

Customer

Name, Email & Phone

This allows hosting website to pass in current customer information. The information being supported at this point is name, email, phone, and remote_id. Remote_id can be used for guest tracking. All the fields are optional and will update whatever the customer entered or the system pulled on login.

Example:

function initClientBridge(api) {
  return api.setCustomerDetails({name: 'John Doe', email: 'john@doe.com', phone: '12345123412'})
}

Remote ID

For the cases where customer needs to be tracked a remote id can be set. This can then be loaded with order graphql.

function initClientBridge(api) {
  return api.setCustomerDetails('eb6bc428-439e-4c0c-804a-95dfe0bb8336')
}

Addresses list & management

Bridge supports address list retrieval and removal of addresses.

function initClientBridge(api) {
  return api.loginWithProviderAndToken('example_provider', '')
    .then(() => api.getCustomerAddresses())
    .then((addresses) => console.log("Customer Addresses", addresses))
}

function onRemoveAddress(address) {
  api.removeCustomerAddress(address)
    .then(() => console.log("Removed successfully"))
    .catch(() => console.log("Failed to remove"))
}

Vaults

Customer vaults for users that are logged in can also be managed through the bridge.

function initClientBridge(api) {
  return api.loginWithProviderAndToken('example_provider', '')
    .then(() => api.getCustomerVaults())
    .then((vaults) => console.log("Customer Vaults", vaults))
}

function onRemoveVault(vault) {
  api.removeCustomerVault(vault)
    .then(() => console.log("Removed successfully"))
    .catch(() => console.log("Failed to remove"))
}

Portal Integration

Query Restaurant Integration

This lets the integration controller to test if a restaurant has an integration. IntegrationId is integrator restaurant id and must be sent to zuppler while adding restaurants to channel to be configured accordingly.

function hasIntegration(integrationId: string) => Promise<boolean>

Open Restaurant from Bridge

This lets the integration controller to open a restaurant with a specific restaurant integration id. See notes above about integration id.

function openRestaurant(integrationId: string) => Promise<string>

If the restaurant does not have an integration the promise will be rejected. If succeeds will return the restaurant hash url and will redirect online ordering integration to that restaurant menu page

State Management

These are a set of functions that will update the portal search parameters from the hosting app.

Example:

function initClientBridge(api) {
  var newAddress = {
    street: '1500 Market st',
    city: 'Philadelphia',
    state: 'PA',
    country: 'US',
    zip: '19123',
    precision: 30, // 30 for at least street level, 10 for exact address, everything else is 30+
    complete_address: 'completed address (used for display)',
    nickname: 'Office', // This also is used to display addresses to the user regardless to what is entered to other fields
    lat: 47.1229504,
    lng: 27.5533698,
  }
  return api
    .setCustomerDetails({remote_id: 'eb6bc428-439e-4c0c-804a-95dfe0bb8336'})
    .then(() => .setCustomerRemoteId('abceb7c3-9aea-46ee-8142-6c71ecb54f2f'))
    .then(() => api.setServiceType('DELIVERY')) // # Other values: PICKUP, CURBSIDE, DINEIN
    .then(() => api.setOrderDate(someDateObjectValue)) 
    .then(() => api.setAddress(newAddress))
    .then(() => api.setPartySize(50)) // For catering deliveries, people count
    .then(() => api.setTags(['catering', 'lunch-only'])) // This will set a filter for restaurants tagged with catering and filter menus based on lunch-only
}

In order to reset all filters resetFilters() function can be used

Integration State Query and Update

In order to monitor within online ordering the current page that customer sees bridge providers a state listener API through addIntegrationStateListener and removeIntegrationStateListener. The events will bundle the current state of the page along with the event type.

Example:

var zupplerAPI = null
function initClientBridge(api) {
  zupplerAPI = api
  api.addIntegrationStateListener(onIntegrationUpdated)
  return api.loginWithProviderAndToken('example_provider', '22dbf358-5823-4064-8f9e-0f9a2bd2c68b')
}

function onIntegrationUpdated(type, params) {
  if (type == 'portal') {
    // TODO: Change UI to reflect portal page
    console.log("DDBG: In portal page", type, params.queries)
  }
  if (type == 'order') {
    // TODO: Change UI to reflect restaurant ordering page
    console.log("DDBG: In online ordering page", type, 
      params.remoteId, params.restaurant.name)
  }
  if (type == 'dashboard') {
    console.log("DDBG: In dashboard page", type, params)
  }
  if (type == 'user:login') {
    console.log("DDBG: Login is requested", type, params.returnUrl, 
      params.locale, params.loggedIn)
    // Either navigate to a new url to authenticate the user 
    // or call loginWithProviderAndToken
    // window.location.href = "....login url...."
  }
  if (type == 'user:logout') {
    console.log("DDBG: Logout is requested", type, params.returnUrl)
    // After logout the page needs to go to returnUrl
  }
  if (type == 'user:forgotpassword') {
    console.log("DDBG: forgotpassword is requested", type, 
      params.returnUrl)
  }
  if (type == 'user-profile') {
    console.log("DDBG: User Profile was changed", type, 
      params.name, params.phone)
  }
  if (type == 'order-receipt') {
    console.log(
      "DBG: Receipt is made visible", 
      type, 
      params.orderId, 
      params.details)
  }
  if (type == 'order-receipt-earnings') {
    console.log(
      "DBG: Earnings are requested for current order", 
      type, 
      params.orderId, 
      params.remoteId)
    return Promise.resolve( [ { label: "My Channel Points", points: 100 } ] )
  }
}

External navigation into the online ordering application is possible and should be used for automatic reseting integration page or going to a specific restaurant part of some link in the page that is not controlled by the integration.

Example:

var zupplerAPI = null
function initClientBridge(api) { ... }
function onGoToRestaurant(myRestaurant) {
  zupplerAPI.setPage(`/restaurants/${myRestaurant.id}/${myRestaurant.zupplerId}`)
}
function onGoToPortal() {
  zupplerAPI.setPage('/')
}

Available routes to the app are:

/ - Main portal page for portal integrations or menu page for single restaurant integrations
/restaurants/:integration_id/:restaurant_id - Menu url
/dashboard/:tabId?/:orders(orders)?/:order_uuid? - Dashboard & Dashboard order urls
/receipt/:uuid - Order Confirmation Page
/repeat-order/:uuid - Repeat an existing order
/user - user login page
/profile - user profile page

The Bridge

Online Ordering - Bridge API

Zuppler Bridge

Initialization

User & Profile

Logout

Customer

Name, Email & Phone

Remote ID

Addresses list & management

Vaults

Portal Integration

Query Restaurant Integration

Open Restaurant from Bridge

State Management

Integration State Query and Update

Navigation

results matching ""

No results matching ""

Online Ordering - Bridge API

Zuppler Bridge

Initialization

User & Profile

Auto-Login

Logout

Customer

Name, Email & Phone

Remote ID

Addresses list & management

Vaults

Portal Integration

Query Restaurant Integration

Open Restaurant from Bridge

State Management

Integration State Query and Update

Navigation

results matching ""

No results matching ""