Client Development

Frontend Plugin

Brands can locally build against the Portal frontend runtime and produce a bundle that will be dynamically included on the live environment.

Developer workflow

Install Portal runtime
Start local application, which provides application log in screen and one plugin

First time developer experience:

Log in	Hello World Component

Development on Windows

The tooling created by RPS for plugin developers rely on Git and Shell to be available on the command line. Install Git for Windows which includes the MinTTY terminal emulator.

Launch Git Bash from the Start Menu. Create a SSH key and insert it to GitHub.

Follow steps 1-4 of Generating a new SSH Key

$ ssh-keygen -t rsa -b 4096 -C "[email protected]"
Enter a file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter]
Enter passphrase (empty for no passphrase): [Press enter]
Enter same passphrase again: [Press enter]

Print key to and insert it as a New SSH Key into GitHub
```
$ cat ~/.ssh/id_rsa.pub
```

Install Portal runtime

Get access to Hello World and Portal repositories (email: [email protected])
Generate a GitHub personal access token with SSO (repo and read:packages access)! https://github.com/settings/tokens
Clone the hello world plugin.
Install portal runtime
Start local environment

$ git clone [email protected]:deliveryhero/rps-portal-plugin-hello-world.git
$ cd rps-portal-plugin-hello-world
$ cp .npmrc.dist .npmrc   # Replace ${GITHUB_PACKAGE_TOKEN} with your GitHub personal access token with SSO (repo and read:packages access)! https://github.com/settings/tokens
                          # ${FWF_PASSWORD} and ${FWF_USERNAME} with the credentials provided by the Portal Team.
$ rm -rf .git
$ cp portal.config.js.dist portal.config.js
$ cp pluginList.json.dist pluginList.json
$ yarn install            # Requires access to Delivery Hero GitHub package registry
$ yarn fetchportal        # Downloads and builds Portal runtime
$ yarn start              # Starts Hello World Plugin

React based plugin

import React from 'react';
import { getCurrentRestaurant, getLocale, t, getBaseRoute } from '@deliveryhero/vendor-portal-sdk';

const currentRestaurant = getCurrentRestaurant();

const App = () => (
  <div>
    <h1>Hello {currentRestaurant.name}!</h1>
    <h2>Platforms</h2>
    <ul>
      {currentRestaurant.platforms.map(platform => (
        <li>
          Name: {platform.name}<br/>
          External ID: {platform.externalRestaurantId}<br />
          Code: {platform.code}<br />
          PlatformID: {platform.platformId}
        </li>
      ))}
    </ul>
    <h2>Currency</h2>
    <p>
      code: {currentRestaurant.currency.code}<br/>
      symbol: {currentRestaurant.currency.symbol}
    </p>
    <h2>Address</h2>
    <p>
      city name: {currentRestaurant.address.city.name}
    </p>

    <h2>Locale</h2>
    <p>User locale: {getLocale()}</p>

    <h2>Translation</h2>
    <p>global.welcome_message.default = {t('global.welcome_message.default')}</p>

    <h2>Base Route</h2>
    <p>{getBaseRoute()}</p>
  </div>
);

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

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

  getMainComponent() {
    return App;
  }
}

GitHub

Frontend plugins are to be stored in the Delivery Hero GitHub account, for easy collaboration: https://github.com/deliveryhero

Client