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.
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>
);
};// 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. |
onClickTrackingNumber | optional | function, (labelId: string, trackingNumber: string, trackingUrl: string ) => void An optional callback function with three required parameters: labelId which is the ID of the label, trackingNumber which is the tracking number of the shipment, and trackingUrl which is the URL to track the shipment. The onClickTrackingNumber callback will be invoked when the tracking number link is clicked. If not provided, the tracking number will open the tracking URL in a new tab. |
features | optional | Object, features are optional configuration keys used to customize the Shipment Summary experience. For a comprehensive list of feature keys. |
| 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.