Future Ordering frontend plugin types

TypeScript typings for frontend extensibility plugins for the Future Ordering frontend.

Installation

npm i @futureordering/fo-web-plugin-types

Examples

See https://github.com/Future-Ordering/frontend-plugin-boilerplate for usage example

Changelog

Upcoming major version

• File plugin-specs will be removed. For example when importing BlockComponentLocations, change import form @futureordering/fo-web-plugin-types/plugin-specs to @futureordering/fo-web-plugin-types.

Version 3.7

• Adds services.addService to context to be able to register services. Services available for registration are:
  • paymentService - Custom payment handling for kiosk
  • receiptService - Receipt printing for kiosk
  • scannerService - Barcode/QR scanning for kiosk
• Changes made to context.page.setTitle
  • Adds optional parameter options, which allows controlling whether the heading (h1) will be set or not.
• Adds isAndroid and isIos on context.environment to determine if the user device is Android or IOS.
• Adds accessibility.announce to context for making screen reader announcements of status messages
  • politeness parameter controls announcement urgency: 'polite' (default, queued after current speech) or 'assertive' (interrupts current speech)
• Adds code, isAnnulled and isReserved on context.deals.getDeals(orderId).deals[] to match deal code and check whether it's reserved

Version 3.6

Changes made to context.dialog.showDialog

• Adds property bodyContent to config to be able to show arbitrary content in dialog
• title and text is changed to optional to be able to have a dialog with custom content only
• ariaLabel is added to be able to have an aria-label when no title is passed. No need to set that when passing title, it will be references in a aria-labelledby
• Added method closeDialog to be able to close a dialog from outside of the dialog
• Adds isFoApp on context.environment to determine if in app mode.

Version 3.5

• Adds new block plugin location kioskOrderStatus where a plugin can be shown instead of order number and text for successful order placement on kiosk. It includes locationContext for controlling how long kiosk order status page is visible.
• Adds isCheckoutMode on context.environment to determine if in checkout mode. No changes to products in basket can be made when in checkout mode
• Adds showOnScreenKeyboard on context.dialog for displaying a keyboard on kiosks
• Adds customerOrderInfo to order object
• Adds support for registering a custom price calculator (ctx.menu.registerPriceCalculator)
• Adds support for getting url to login page (ctx.location.getLoginUrl), can vary depending on if guest or not
• ctx.token.getUserImpersonationToken renamed to ctx.token.getUserToken

Version 3.4

Adds new block component location sidebar-basket-item which is displayed at each basket item. Component context-object for this location includes locationContext which has data about the current order item.

Version 3.2

Adds optional parameter to navigation method navigateToPage (ctx.location.navigateToPage):

• expectedDiscount, the amount to subtract from a product's displayed total price in the product configurator

Version 3.1

Adds methods to menuContext:

• isProductQuickAddable, whether product can be added directly without any config
• isProductConfigurable, whether product can be configured separately on product-config page
• getProductPrice, returns products total price

menuContext can be retrieved using ctx.menu.getMenu or (await ctx.order.getCurrentOrder()).menu

Version 3

Version 3 changes:

• Adds basic order support for working with orders, menus and products. Some of the new addons include:
  • Create order (ctx.order.createOrder)
  • Add item to basket (orderContext.addItem, orderContext can for example be retrieved using ctx.order.getCurrentOrder and ctx.order.createOrder)
  • Get order items ((await orderContext.getOrderData()).orderItems)
  • Remove item from order (orderContext.removeItem)
  • Set order class (orderContext.setOrderClass)
  • Get menu (ctx.menu.getMenu)
  • Get product (menuContext.getProduct, menuContext can for example be retrieved using ctx.menu.getMenu or (await ctx.order.getCurrentOrder()).menu)
  • Iterate products (menuContext.products)
  • Selecting config item (menuContext.setItem)
• Starting order from plugin by navigating to select store and order type, and then back to plugin (ctx.location.navigateToStartOrderAndBack)
• Navigate to page (ctx.location.navigateToPage, currently only supported to navigate to productConfig page)
• Removes ctx.location.navigateToPageComponent overload
• Changes ctx.location.navigate argument menuType to orderClass

Migrating from version 2 to 3

ctx.location.navigateToPageComponent

Change

ctx.location.navigateToPageComponent('myPlugin', {}, { addReturnUrl: true });

To

ctx.location.navigateToPageComponent({
    pageName: 'myPlugin',
    queryParams: {},
    addReturnUrl: truer
})

ctx.location.navigate

Change

ctx.location.navigate({
    menuType: 'takeaway',
    ...
})

To

ctx.location.navigate({
    orderClass: 'takeaway',
    ...
})

ctx.page.setButton

Available in page components. Removed because overriding the back button behavior goes against user expectations and the way the app works in general.