Migration Guide

Development of the @suprsend/react-inbox SDK has been discontinued in favour of the new @suprsend/react SDK. Reason for this change is to bring all drop-in components for inbox and preferences, under one SDK. Currently @suprsend/react-inbox only contains inbox related code.

Migrating from @suprsend/react-inbox to @suprsend/react changes

Most of features that inbox component supports remain unchanged. Following are changes that happened in new SDK.

Authentication changes

Authentication mechanism has been changed from HMAC authentication to JWT authentication because HMAC authentication (subscriberId) is not as secure as that of JWT authentication. Earlier SuprSendInboxcomponent and SuprSendProvider component(headless) used to take care of authentication if you pass distinctId, workspaceKey and subscriberId. But in new SDK you can use SuprSendProvider to authenticate user and all other features like inbox, preferences, webpush etc can be accessed inside that context provide.

Toast functionality has been removed

SuprSendInboxused to have inbuilt toast notification feature using react-toastify library. But the latest versions of this library created few peerDependencies which created issues for us. So we have exposed event listener to listen to new notification arrival and in that callback you will get new notification payload which you can use to show toast notification using any of your toast library. Refer implementation guide here.

Steps to migrate SuprSendInbox component (Drop-in)

1. Remove existing @suprsend/react-inbox and install @suprsend/react.

npm uninstall @suprsend/react-inbox

npm install @suprsend/react

yarn remove @suprsend/react-inbox

yarn add @suprsend/react

2. For authenticating user, follow integration steps of SuprSendProvider.
3. Import Inbox component and use it instead of SuprSendInbox. Remove distinctId, workspaceKey and subscriberId props since authentication is handled by SuprSendProvider in above step. Please remove any invalid prop present in existing component. Check all available props in new component.

import SuprSendInbox from '@suprsend/react-inbox'; // remove it
import { Inbox } from '@suprsend/react';

// old code
function Example() {
  return (
    <div>
      <SuprSendInbox />
    </div>
  );
}

// new code
function Example() {
  return (
    <div>
      <SuprSendProvider publicApiKey="" distinctId="">
        <Inbox />
      </SuprSendProvider>
    </div>
  );
}

4. Since default toast notification feature has been removed, you can refer this section to integrate toast notification functionality.

Steps to migrate headless implementation

If you are migrating headless version of inbox then its better to re-implement the headless inbox, as architecture of methods have been changed. Please refer this guide.

Please reach out to use if you face any issues in migration.