ShippedSuite React Native SDK

Shipped Shield offers premium package assurance for shipments that are lost, damaged or stolen. Instantly track and resolve shipment issues hassle-free with the app.

Example

To run the example project, clone the repo, run yarn in the root directory to install the required dependencies for each package:

yarn

To run the example app on iOS:

yarn example ios

To run the example app on Android:

yarn example android

Requirements

iOS

Xcode 13.3.1 or later and is compatible with apps targeting iOS 11.0 or above.

Android

Android 5.0 (API level 21) and above

Installation

yarn add react-native-shipped-suite-sdk
or
npm install react-native-shipped-suite-sdk

Usage

import {
  ShippedSuite
} from 'react-native-shipped-suite-sdk'

ShippedSuite.configure({
  publicKey: 'Your public key',
  mode: 'development',
});

Create a Widget view with offers

You can initialize it and put it where you want.

import {
  ShippedSuite,
  ShippedSuiteAppearance,
  ShippedSuiteType,
  WidgetChangeEventData,
  WidgetView
} from 'react-native-shipped-suite-sdk';

<WidgetView
  ref={widgetRef}
  style={styles.widget}
  configuration={{
    type: ShippedSuiteType.Green,
    isInformational: true,
    isMandatory: false,
    isRespectServer: false,
    currency: "USD",
    appearance: ShippedSuiteAppearance.Auto
  }}
  onChange={onWidgetChange}
/>

Whenever the cart value changes, update the widget view with the latest cart value. This value should be the sum of the value of the order items, prior to discounts, shipping, taxes, etc.

widgetRef.current?.updateOrderValue(amount);

To get the callback from widget, you need implement the onChange.

const onWidgetChange = (
    event: NativeSyntheticEvent<WidgetChangeEventData>
  ) => {
    console.log(event.nativeEvent);
  };

Print log:

{"isSelected": true, "totalFee": 0.39}

Within the callback, implement any logic necessary to add or remove Shield or Green from the cart, based on whether isSelected is true or false.

Customization

If you plan to implement the widget yourself to fit the app style, you can still use the functionality provided by the SDK.

• Request the Offers Fee

ShippedSuite.getOffersFee(amount, currency)
      .then((results: any) => console.log('Get offers fee:', results))
      .catch((error: any) => console.log('Failed to get offers fee:', error));

• Display learn more modal

ShippedSuite.displayLearnMoreModal({
  type: ShippedSuiteType.Green,
  isInformational: true,
  appearance: ShippedSuiteAppearance.Auto
});

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

ShippedSuite is available under the MIT license. See the LICENSE file for more info.