Portal Version 2

Portal Unification

Deploy to portal version "v2" to test your migration changes in the devnext environment. For more info about deploying to a specific portalVersion, read the deployment section.

If you have used the hello-world plugin as a base for your plugin and use the fetchportal script, you can easily run your local development environment with the portal version of the next branch.

To do so, you need to replace your scripts/fetchPortal.sh file with the new version from the hello-world plugin.

After that you can fetch the next branch and also upgrade the Portal SDK and libraries:

yarn fetchportal next
yarn add @deliveryhero/vendor-portal-sdk
yarn add @deliveryhero/vendor-portal-components

Steps to migration from v1 to v2

Typescript

You will need to upgrade Typescript to version 3.7.2 or higher.

New required SDK methods

addRestaurantObserver()

You need to replace your getCurrentRestaurant() function call with the new dynamic addRestaurantObserver(). This refactor is needed because we change the portal to support users to switch the current restaurant live and without reloading the whole app. You need to store the received restaurant in a central place and update every instance and component that uses the current restaurant after it has changed, so there is no out of sync data.

For detailed description of this function, see documentation.

Recommended implementation on using the new function is to create a store with restaurant property of type IRestaurantData and invoke the function inside the constructor to set the the value of restaurant property of the store. Then, you can inject the store in your code.

export class CurrentRestaurantStore {
    @observable restaurant: IRestaurantData;

    constructor(private addRestaurantObserver: Function) {
        this.addRestaurantObserver((restaurant: IRestaurantData) => {
            this.restaurant = restaurant;
        });
    }
}

Material UI

We upgraded @material-ui/core to version 4.8.0 and @material-ui/icons to 4.5.1 which are the newest versions to date. The material-ui team made a comprehensive migration guide, so we recommend you to read it before upgrading.

If you are using TypeScript, it is really helpful to look at the new errors that pop up when running tsc --noEmit. Fixing these problems already gets you really far.

One of the more hidden breaking changes happened in the classes prop of the components. Some properties of that classes object have been changed names, some have been removed. In the lower sections of material-ui's migration guide you can find a per-component list of changes of props that also include changes within the classes prop.

Also the way withWidth, isWidthUp and isWidthDown works for testing has been changed apparently. This change is not so well documented. If you are using these functions in function based components, you can replace them with the new useMediaQuery hook that material-ui provides. You can find the more info and the migration guide here. Please also look into the testing section of this page, as it includes instructions how to polyfill this feature for jest.

For TypeScript users that also use the component property on ListItem and Button, you should use your own props type that introduces the components property again.

Here is an example:

type InternalButtonProps = ButtonProps & {
  component: string | React.ComponentType;
};

More about this issue here:

Portal Components

We upgraded the @deliveryhero/vendor-portal-components to version 6.0.2. This uses now the new material-ui and styled-components versions.

We have renamed the DateRange component to DateRangeSelector. This change is to have less confusion with the naming of the DateRange component and the UtilsDateRange namespace.

We also removed the following components:

  • Box
  • GreyBox
  • FlatButton
  • FlatRoundedButton
  • DateSelectorDialog
  • DateSelector
  • AppBarDialog
  • BackdropTitle
  • Backdrop
  • Title
  • BackdroppedDateRange
  • SelectableList

We saw that some teams are using the Box component that has been deprecated. If you want to replace it, you just need to do this with a <div> that has the following CSS properties:

padding: 0 12px 0;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;

Where 12px is 1.5x the spacing unit, you can replace it with theme.spacing(1.5), when you are using JSS or styled-components.

We also changed internal folder structure, but as you should only import from the root package directly this should not affect you.

Styled Components

We are now using version 4.4.1.

If you are using styled-components, the biggest change is that the injectGlobalStyles function is removed. You need to replace it with createGlobalStyle.

Migration guide can be found here.

If you are using @deliveryhero/styled-material-ui, please upgrade this library to 4.1.0 as well.

If you are using jest-styled-components, please upgrade this library to6.3.4.

React

We also upgraded react and react-dom to 16.12. There should be no breaking changes for you.

mobx

We upgraded mobx to version 5.15.0 and mobx-react to version 6.1.4. The biggest change is that Proxy (JavaScript language feature) is required to be available in the browser, making it no longer work with older browsers like IE 11. From our Google Analytics browser statistics we found no usage of unsupported browsers, so it is good to use.

There are some breaking changes for rarely used functions. You can read the migration guide in their changelogs.

react-router

We upgraded react-router and react-router-dom to version 5.1.2. There are no breaking changes to version 4. They only bumped the major version because of changes in their internal dependencies.

You will need to remove the BrowserRouter component from your plugin from index.ts file

Before
<BrowserRouter basename={getBaseRoute()}>
  <Route path={`/`} exact component={Main} />
  <Route ... />
  ...
</BrowserRouter>
After
<>
  <Route path={`/`} exact component={Main} />
  <Route ... />
  ...
</>

The setNewNavigation() function of the SDK now has a new stickyContent option. This should be used instead of adding sticky content yourself. As we control the layouting, future layout changes are automatically applied to your sticky content, so you don't need to fix it yourself.

the stickyContent property takes a React component that renders the content you want to display.

A sticky element sits at the original position until it leaves the viewport. From that point on it sticks at the top of the page, so it is always visible.

We also build a router utils library to make working with the setNewNavigation() easier.

You can find it here (alongside with documentation).

Deployment Script

You need to add the portalVersion with value v2 into the payload of the deploy script.

```shell script curl -X PUT \ -H "Content-Type: application/json" \ -H "x-api-key: ${API_KEY}" \ -d '{"bundleUrl": "'"${CLOUDFRONT_URL}"'/'"${REGION}"'/reports/'"${FILENAME}"'", "portalVersion": "v2"}' \ ${UPDATE_URL} \ --fail

```

results matching ""

    No results matching ""