Shipment Summary Element

The Shipment Summary Element allows users to see all the essential information regarding the shipment and any labels attached to the shipment. It also includes post-purchase actions such as printing a label, voiding a label, and purchasing a label on an active shipment.

React Component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { ShipmentSummary, ElementsProvider } from '@shipengine/elements';
import { themeConfig } from '../themeConfig';

const tokenPath = '/path/to/token/endpoint';

const Foo = ({
  shipmentId,
  label,
  order,
  printLabel,
  voidLabel,
  purchaseLabel,
}) => {
  const getToken = useCallback(() => {
    return fetch(tokenPath).then((res) => res.text());
  }, []);

  return (
    <ElementsProvider
      getToken={getToken}
      themeConfig={themeConfig}
      onError={handleError}
    >
      <ShipmentSummary.Element
        shipmentId={shipmentId}
        onClickPrintLabel={printLabel()}
        onClickVoidLabel={(label) => voidLabel(label)}
        onClickPurchaseLabel={(order) => purchaseLabel(order)}
      />
    </ElementsProvider>
  );
};

SDK

1
2
3
4
5
6
7
8
9
10
11
12
13
// Creates a new instance of the Elements SDK.
const elements = new ElementsSDK(getToken, {
  onError: (err: Error) => console.error(err),
  themeConfig: themeConfig,
  locale: 'en-US',
});

const shipmentSummary = elements.create('shipmentSummary', {
  onClickPrintLabel: () => printLabel(),
  onClickVoidLabel: (label) => voidLabel(label),
  onClickPurchaseLabel: (order) => purchaseLabel(order),
  shipmentId: 'se-103889776',
});

Args/Props	Required?	Description
`shipmentId`	required	*string*, The ShipEngine `shipment_id` of the shipment being viewed.
`onClickPrintLabel`	optional	*function*, `() => void` An optional callback function that has no parameters, to be invoked with the onClick event of the 'Print Label' button.
`onClickPurchaseLabel`	optional	*function*, `(shipment: SE.SalesOrderShipment order?: SE.SalesOrder) => void` An optional callback function with one required parameter, `shipment`, and one optional parameter, `order`. The `shipment` will be fetched and provided via the `shipmentId` prop provided, and the `order` will be provided if one is associated with the shipment. The `onClickPurchaseLabel` callback will be invoked with the onClick event of the 'Buy Another Label' button. The 'Buy Another Label' button is only available when active labels are available to print. We recommend using this callback to render the Purchase Label Element.
`onClickVoidLabel`	optional	*function, `(label: SE.Label) => void` An optional callback function with one required parameter: `label` which is the label that is intended to be voided. The onClickVoidLabel callback will be invoked with the onClick event of the 'Void Label' button. We recommend using this callback to render the* Void Label Element.
`features`	optional	*Object*, features are optional configuration keys used to customize the Shipment Summary experience. For a comprehensive list of feature keys, refer to Features section.

Shipment Summary Features

feature	Default	Description
`schedulePickup`	true	*boolean*, Enables the `Schedule Pickup` feature in Shipment Summary which displays a link to Carrier Pick Up services if the label is eligible.

For an in depth overview of the global features object, please review the Configuring Elements Features step in either the ElementsProvider or the Elements SDK guides.