Initialize plugin

To initialize a plugin you need to expose a PluginClass in your main entry module (e.g. index.tsx/jsx) as default export.

This class can look like this:

import { IPluginConfig } from '@deliveryhero/vendor-portal-sdk';

export default class HelloWorldPlugin {
  static getConfig(): IPluginConfig {
    return {
      restaurantSelector: RestaurantSelectorOptions.SINGLE,
    };
  }

  init() {
    console.log('init HELLO WORLD plugin');
  }

  getMainComponent() {
    return App;
  }
}

The getMainComponent method is mandatory, all other member or static methods optional.

The getMainComponent methods is the entrypoint for react to hook your plugin into the portal. In here you return your main component, like you would do in a normal react app with ReactDOM.render().

Additionally there are other methods.

init()

The init method is the place to bootstrap your plugin. It is called once after the first call of your plugin. It's purpose is to perform the mandatory steps that need to be done before your plugin can be rendered.

The init method can be sync or async. When you return a Promise or use async/await the first loading process of the plugin will stay until this is resolved.

This method is particularly helpful to fetch translations to make sure they are available before the first render.

static getConfig()

The static getConfig method returns plugin config the portal can use to render it in a certain way. It is optional, when it is not set the default config is used. This method is called once before init.

The method needs to return an config object with the following interface:

import { RestaurantSelectorOptions } from '@deliveryhero/vendor-portal-sdk';

{
  restaurantSelector?: RestaurantSelectorOptions;
}

Currently the only property is restaurantSelector which is optional and falls back to RestaurantSelectorOptions.SINGLE, other options are RestaurantSelectorOptions.MULTIPLE, RestaurantSelectorOptions.MULTIPLE_VENDORS, RestaurantSelectorOptions.SINGLE_VENDOR and RestaurantSelectorOptions.NONE.

This option defines if a restaurant selector is visible, is used to select a single restaurant or multiple at once. Depending on how you request restaurant data you need to choose the appropriate one.

See a description of the different options:

For description about the observers look at the SDK page.