@shipengine/elements 2.20.0 → 2.21.0

package/cjs/elements/purchase-label/hooks/use-ship-from-address-options.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var formatString = require('../../../utilities/formatString.cjs');
+var address = require('../../../utilities/shipengine/address.cjs');
+var React = require('react');
+
+/**
+ * @internal
+ *
+ * # Warehouse Options Hook
+ *
+ * @category Hooks
+ */
+const useShipFromAddressOptions = (warehouses, shipFromAddresses, shipment) => {
+  return React.useMemo(() => {
+    var _a, _b, _c, _d, _e;
+    if (!warehouses && !shipFromAddresses && !shipment) return undefined;
+    // Check if the shipment has a warehouse Id
+    const shipmentHasWarehouse = !!(shipment === null || shipment === void 0 ? void 0 : shipment.warehouseId);
+    const shipmentUsingSavedShipFromAddress = address.getIsShipmentUsingSavedShipFromAddress(shipment, shipFromAddresses);
+    const shipmentAddressOption = {
+      label: (_b = (_a = shipment === null || shipment === void 0 ? void 0 : shipment.shipFrom) === null || _a === void 0 ? void 0 : _a.addressLine1) !== null && _b !== void 0 ? _b : "",
+      subLabel: `${formatString.capitalizeFirstLetterOfEachWord((_d = (_c = shipment === null || shipment === void 0 ? void 0 : shipment.shipFrom) === null || _c === void 0 ? void 0 : _c.cityLocality) !== null && _d !== void 0 ? _d : "")}, ${(_e = shipment === null || shipment === void 0 ? void 0 : shipment.shipFrom) === null || _e === void 0 ? void 0 : _e.stateProvince} `,
+      value: "custom-shipment-address"
+    };
+    const warehouseOptions = warehouses === null || warehouses === void 0 ? void 0 : warehouses.map(warehouse => ({
+      label: warehouse.name,
+      subLabel: `${formatString.capitalizeFirstLetterOfEachWord(warehouse.originAddress.addressLine1)}. ${formatString.capitalizeFirstLetterOfEachWord(warehouse.originAddress.cityLocality)}, ${warehouse.originAddress.stateProvince} `,
+      value: warehouse.warehouseId
+    }));
+    const shipFromAddressOptions = shipFromAddresses === null || shipFromAddresses === void 0 ? void 0 : shipFromAddresses.map(address => {
+      var _a;
+      return {
+        label: (_a = address.name) !== null && _a !== void 0 ? _a : address.originAddress.addressLine1,
+        subLabel: address.name ? `${formatString.capitalizeFirstLetterOfEachWord(address.originAddress.addressLine1)}. ${formatString.capitalizeFirstLetterOfEachWord(address.originAddress.cityLocality)}, ${address.originAddress.stateProvince}  ` : `${formatString.capitalizeFirstLetterOfEachWord(address.originAddress.cityLocality)}, ${address.originAddress.stateProvince} `,
+        value: address.addressId
+      };
+    });
+    return [...(!shipmentHasWarehouse && !shipmentUsingSavedShipFromAddress ? [{
+      label: "Shipment Address",
+      options: [shipmentAddressOption]
+    }] : []), ...((shipFromAddressOptions === null || shipFromAddressOptions === void 0 ? void 0 : shipFromAddressOptions.length) || (warehouseOptions === null || warehouseOptions === void 0 ? void 0 : warehouseOptions.length) ? [{
+      label: "Saved Ship From Locations",
+      options: [...(shipFromAddressOptions !== null && shipFromAddressOptions !== void 0 ? shipFromAddressOptions : []), ...(warehouseOptions !== null && warehouseOptions !== void 0 ? warehouseOptions : [])]
+    }] : [])];
+  }, [shipFromAddresses, shipment, warehouses]);
+};
+
+exports.useShipFromAddressOptions = useShipFromAddressOptions;

package/cjs/elements/purchase-label/hooks/use-shipment-form.cjs

@@ -0,0 +1,174 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var useScrubErrors = require('../../../hooks/use-scrub-errors.cjs');
+var date = require('../../../utilities/date.cjs');
+var isEqual = require('lodash/isEqual.js');
+var React = require('react');
+var zod = require('zod');
+var reactApi = require('@shipengine/react-api');
+var useAddress = require('./use-address.cjs');
+var useCustoms = require('./use-customs.cjs');
+var usePresets = require('./use-presets.cjs');
+var shipFromAddressFormSchema = require('../../../components/forms/ship-from-address-form/ship-from-address-form-schema.cjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+
+const useShipmentForm = ({
+  compatibleCountryCodes,
+  onAddressValidation,
+  onApplyPreset,
+  onChangeAddress,
+  onShipmentUpdated,
+  onSubmit,
+  salesOrder,
+  shipment,
+  shipFromAddresses: shipFromAddressesProp,
+  useWarehouses: _useWarehouses = true
+}) => {
+  const {
+    data: carriers
+  } = reactApi.useListCarriers();
+  const {
+    data: customPackageTypes
+  } = reactApi.useListCustomPackageTypes();
+  const {
+    data: warehouses
+  } = reactApi.useListWarehouses({
+    enabled: _useWarehouses
+  });
+  const {
+    data: accountSettings
+  } = reactApi.useGetAccountSettings();
+  const {
+    error: updateShipmentErrors,
+    mutateAsync: updateShipment,
+    reset: resetSalesOrderShipment
+  } = reactApi.useUpdateSalesOrderShipment();
+  const {
+    addressLoading,
+    addressErrors,
+    addressPreference: shipToAddressPreference,
+    charsetWarning,
+    handleChangeAddress,
+    handleParseAddress,
+    parseAddressErrors,
+    resetParseAddress
+  } = useAddress.useAddress({
+    compatibleCountryCodes,
+    onChange: React.useCallback((oldShipment, updatedShipment) => tslib.__awaiter(void 0, void 0, void 0, function* () {
+      yield onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(updatedShipment);
+      yield onChangeAddress === null || onChangeAddress === void 0 ? void 0 : onChangeAddress(oldShipment, updatedShipment);
+    }), [onShipmentUpdated, onChangeAddress]),
+    onValidation: onAddressValidation,
+    salesOrder,
+    shipment
+  });
+  const {
+    handleApplyPreset,
+    presetErrors
+  } = usePresets.usePresets({
+    onApply: onApplyPreset,
+    onShipmentUpdated: onShipmentUpdated,
+    shipment
+  });
+  const {
+    customsErrors,
+    handleUpdateCustoms,
+    handleUpdateTaxableIds
+  } = useCustoms.useCustoms({
+    onUpdate: onShipmentUpdated,
+    shipment
+  });
+  // Adds a unique id to each address in the ship from address prop
+  const shipFromAddresses = React.useMemo(() => {
+    if (!shipFromAddressesProp) return;
+    return shipFromAddressesProp.map((address, index) => Object.assign(Object.assign({}, address), {
+      addressId: `custom-${index}`
+    }));
+  }, [shipFromAddressesProp]);
+  // if the shipment is not using warehouses, run the ship from address through the schema to check for errors
+  const shipFromAddressSchemaErrors = React.useMemo(() => {
+    if (shipment === null || shipment === void 0 ? void 0 : shipment.warehouseId) return;
+    try {
+      shipFromAddressFormSchema.shipFromAddressFormSchema.parse({
+        originAddress: shipment === null || shipment === void 0 ? void 0 : shipment.shipFrom,
+        returnAddress: shipment === null || shipment === void 0 ? void 0 : shipment.returnTo,
+        returnToAddressIsDifferent: !isEqual__default["default"](shipment === null || shipment === void 0 ? void 0 : shipment.shipFrom, shipment === null || shipment === void 0 ? void 0 : shipment.returnTo)
+      });
+    } catch (error) {
+      if (error instanceof zod.ZodError) {
+        return [new reactApi.CodedError("Invalid Ship From Address", {
+          errorCode: "invalid_address",
+          errorSource: "elements",
+          errorType: "validation"
+        })];
+      }
+    }
+    return;
+  }, [shipment]);
+  const handleSubmit = React.useCallback(values => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    if (!shipment) throw new Error("shipment not found");
+    const updatedShipment = yield updateShipment(Object.assign(Object.assign(Object.assign({}, shipment), values), {
+      shipDate: date.isNowOrInTheFuture(values.shipDate) ? values.shipDate : undefined
+    }));
+    if (updatedShipment) {
+      yield onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(updatedShipment);
+      yield onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(updatedShipment);
+    }
+    return updatedShipment;
+  }), [onShipmentUpdated, onSubmit, updateShipment, shipment]);
+  // We now allow users to ship from and to countries outside the US. Update the shipments warehouseId
+  // when it is changed in the UI to include or remove customs requirements.
+  const handleChangeShipFromAddress = React.useCallback((id, shipFromAddress) => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    if (!shipment) throw new Error("shipment not found");
+    const shipFrom = (_a = shipFromAddresses === null || shipFromAddresses === void 0 ? void 0 : shipFromAddresses.find(address => address.addressId === id)) !== null && _a !== void 0 ? _a : shipFromAddress;
+    const warehouse = warehouses === null || warehouses === void 0 ? void 0 : warehouses.find(warehouse => warehouse.warehouseId === id);
+    const updatedShipment = yield updateShipment(Object.assign(Object.assign({}, shipment), {
+      returnTo: shipFrom ? shipFrom === null || shipFrom === void 0 ? void 0 : shipFrom.returnAddress : undefined,
+      shipFrom: shipFrom ? shipFrom === null || shipFrom === void 0 ? void 0 : shipFrom.originAddress : undefined,
+      warehouseId: warehouse ? id : undefined
+    }));
+    if (updatedShipment) {
+      yield onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(updatedShipment);
+      yield onChangeAddress === null || onChangeAddress === void 0 ? void 0 : onChangeAddress(shipment, updatedShipment);
+    }
+  }), [onChangeAddress, onShipmentUpdated, shipFromAddresses, shipment, updateShipment, warehouses]);
+  const errors = React.useMemo(() => [...(addressErrors !== null && addressErrors !== void 0 ? addressErrors : []), ...(customsErrors !== null && customsErrors !== void 0 ? customsErrors : []), ...(presetErrors !== null && presetErrors !== void 0 ? presetErrors : []), ...(shipFromAddressSchemaErrors !== null && shipFromAddressSchemaErrors !== void 0 ? shipFromAddressSchemaErrors : []), ...(updateShipmentErrors !== null && updateShipmentErrors !== void 0 ? updateShipmentErrors : [])], [addressErrors, customsErrors, presetErrors, shipFromAddressSchemaErrors, updateShipmentErrors]);
+  const displayableErrors = useScrubErrors.useScrubErrors({
+    errors: errors,
+    predicate: React.useCallback(e => e.errorSource === "shipengine" && e.errorType === "business_rules", []),
+    scrubber: React.useCallback(() => "common:errorMessages.noRatesAvailable", [])
+  });
+  return {
+    accountSettings,
+    addressLoading,
+    carriers,
+    charsetWarning,
+    customPackageTypes,
+    displayableErrors,
+    errors: errors.length > 0 ? errors : undefined,
+    onApplyPreset: handleApplyPreset,
+    onChangeAddress: handleChangeAddress,
+    onChangeShipFromAddress: handleChangeShipFromAddress,
+    onSubmit: handleSubmit,
+    onSubmitParseAddress: handleParseAddress,
+    onUpdateCustoms: handleUpdateCustoms,
+    onUpdateTaxableIds: handleUpdateTaxableIds,
+    parseAddressErrors,
+    resetParseAddress,
+    resetSalesOrderShipment,
+    salesOrder,
+    shipFromAddresses,
+    shipment,
+    shipToAddressPreference,
+    warehouses
+  };
+};
+
+exports.useShipmentForm = useShipmentForm;

package/cjs/elements/purchase-label/hooks/use-shipping-presets-options.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useShipmentMetadata = require('../../../hooks/options/use-shipment-metadata.cjs');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var presetDescriptor = require('../components/preset-descriptor/preset-descriptor.cjs');
+
+const createCategoryFromShippingPresets = (categoryName, presets) => presets ? [{
+  categoryName: categoryName,
+  options: presets.map(p => ({
+    description: jsxRuntime.jsx(presetDescriptor.PresetDescriptor, Object.assign({}, p)),
+    displayName: p.name,
+    value: p
+  }))
+}] : [];
+/**
+ * @internal
+ *
+ * # Shipping Preset Options Component
+ */
+const useShippingPresetsOptions = ({
+  platform,
+  user
+} = {}, shipment) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const {
+    isInternational
+  } = useShipmentMetadata.useShipmentMetadata(shipment);
+  return React.useMemo(() => [...createCategoryFromShippingPresets(t("shippingPresets.user"), isInternational ? user === null || user === void 0 ? void 0 : user.international : user === null || user === void 0 ? void 0 : user.domestic),
+  // TODO - platform name should probably be a platform-specific environmental variable ?
+  ...createCategoryFromShippingPresets(t("shippingPresets.platform"), isInternational ? platform === null || platform === void 0 ? void 0 : platform.international : platform === null || platform === void 0 ? void 0 : platform.domestic)], [isInternational, platform, t, user]);
+};
+
+exports.useShippingPresetsOptions = useShippingPresetsOptions;

package/cjs/elements/purchase-label/hooks/use-windsor-framework.cjs

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useWindsorFramework = (shipment, enabled) => {
+  // Windsor Framework movement indicator
+  const movementIndicator = React.useMemo(() => {
+    var _a, _b;
+    return (_b = (_a = shipment === null || shipment === void 0 ? void 0 : shipment.advancedOptions) === null || _a === void 0 ? void 0 : _a.windsorFrameworkDetails) === null || _b === void 0 ? void 0 : _b.movementIndicator;
+  }, [shipment]);
+  /**
+   * Check if shipment is fits under the Windsor framework guidelines.
+   *
+   * The Windsor framework only applies to shipments that are coming from mainland Great Britain i.e., England or Scotland and going to Norther Ireland.
+   * The Windsor framework does NOT apply to the reverse i.e., Shipping from Northern Ireland to England or Scotland.
+   * The Windsor framework also does not apply to shipments from within Northern Ireland
+   */
+  const requiresWindsorFramework = React.useMemo(() => {
+    var _a, _b;
+    if (!shipment) return false;
+    const shipFromCountryCode = (_a = shipment.shipFrom) === null || _a === void 0 ? void 0 : _a.countryCode;
+    const shipToCountryCode = shipment.shipTo.countryCode;
+    const shippingFromNorthernIreland = (_b = shipment.shipFrom) === null || _b === void 0 ? void 0 : _b.postalCode.includes("BT");
+    const shippingToNorthernIreland = shipment.shipTo.postalCode.includes("BT");
+    return shipFromCountryCode === "GB" && shipToCountryCode === "GB" && shippingToNorthernIreland && !shippingFromNorthernIreland;
+  }, [shipment]);
+  const isWindsorFrameworkInvalid = React.useMemo(() => {
+    var _a;
+    const windsorFrameworkDetails = (_a = shipment === null || shipment === void 0 ? void 0 : shipment.advancedOptions) === null || _a === void 0 ? void 0 : _a.windsorFrameworkDetails;
+    if (!windsorFrameworkDetails || !enabled) return {
+      isInvalid: false
+    };
+    const {
+      movementIndicator
+    } = windsorFrameworkDetails;
+    if (movementIndicator === "b2b") {
+      const taxIds = shipment.taxIdentifiers;
+      // If there are no Tax IDs on the Shipment show messaging for all required tax IDs.
+      if (!taxIds) return {
+        isInvalid: true,
+        messages: ["shipperEori", "recipientEori", "ukims"]
+      };
+      // Determine if Shipment has all the required Tax IDs for Windsor Framwork Shipment
+      const taxIdentifiers = taxIds.reduce((acc, taxId) => {
+        switch (taxId.identifierType) {
+          case "eori":
+            acc[`${taxId.taxableEntityType}Eori`] = true;
+            break;
+          case "ukims":
+            acc["ukims"] = true;
+            break;
+        }
+        return acc;
+      }, {
+        recipientEori: false,
+        shipperEori: false,
+        ukims: false
+      });
+      const missingFields = [];
+      // Check for missing identifiers and build the error message
+      if (!taxIdentifiers.shipperEori) {
+        missingFields.push("shipperEori");
+      }
+      if (!taxIdentifiers.recipientEori) {
+        missingFields.push("recipientEori");
+      }
+      if (!taxIdentifiers.ukims) {
+        missingFields.push("ukims");
+      }
+      // If all necessary tax ids are present, return success
+      if (missingFields.length === 0) {
+        return {
+          isInvalid: false
+        };
+      }
+      return {
+        isInvalid: true,
+        messages: missingFields
+      };
+    } else return {
+      isInvalid: false
+    };
+  }, [enabled, shipment]);
+  return {
+    isWindsorFrameworkInvalid,
+    movementIndicator,
+    requiresWindsorFramework: requiresWindsorFramework && enabled
+  };
+};
+
+exports.useWindsorFramework = useWindsorFramework;

package/cjs/elements/purchase-label/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var purchaseLabel = require('./purchase-label.cjs');
+
+
+
+exports.PurchaseLabel = purchaseLabel;

package/cjs/elements/purchase-label/purchase-label.cjs

@@ -0,0 +1,157 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useConfigureShipment = require('../../hooks/use-configure-shipment.cjs');
+var money = require('../../utilities/money.cjs');
+var React = require('react');
+var reactApi = require('@shipengine/react-api');
+var configureShipment = require('./configure-shipment.cjs');
+var suspendPurchase = require('../../components/suspend-purchase/suspend-purchase.cjs');
+var index = require('../../locales/en/index.cjs');
+var createElement = require('../../create-element/create-element.cjs');
+var errorFallback = require('../../components/error-fallback/error-fallback.cjs');
+
+/**
+ * # Purchase Label Component
+ *
+ * The `<PurchaseLabel />` component is used to purchase shipping labels from various carriers
+ *
+ * @param ElementProps The props necessary to render the `<PurchaseLabel />` component for shipment
+ * based or sales order based label purchasing.
+ *
+ * @returns Element An EmotionJSX.Element that will render the `<PurchaseLabel />` component
+ * with all the appropriate wrappers.
+ *
+ * @example
+ * You can see how the `<Component />` is used in the `createElement` function call below.
+ * ```tsx
+ * export const Element = createElement(Component, ErrorFallback, {
+ *
+ *   resources: { en },
+ * });
+ * ```
+ *
+ * <br />
+ *
+ * @see {@link PurchaseLabel.Element | The **Element** created to render `<PurchaseLabel />`}
+ */
+const Component = _a => {
+  var _b, _c;
+  var {
+      features,
+      externalOrderId,
+      externalOrderNumber,
+      externalShipmentId,
+      onLoad,
+      onShipmentUpdated,
+      orderSourceCode,
+      salesOrderId,
+      shipFromAddresses,
+      warehouseId,
+      shipmentId,
+      printLabelLayout,
+      currency: currencyProp
+    } = _a,
+    props = tslib.__rest(_a, ["features", "externalOrderId", "externalOrderNumber", "externalShipmentId", "onLoad", "onShipmentUpdated", "orderSourceCode", "salesOrderId", "shipFromAddresses", "warehouseId", "shipmentId", "printLabelLayout", "currency"]);
+  const {
+    data: fundingSource
+  } = reactApi.useListFundingSources();
+  const {
+    data: accountSettings
+  } = reactApi.useGetAccountSettings();
+  const {
+    shipment,
+    salesOrder,
+    refetchPendingSalesOrderShipments,
+    isLoading,
+    errors
+  } = useConfigureShipment.useConfigureShipment({
+    errorWhenShipmentCancelled: features === null || features === void 0 ? void 0 : features.enableErrorWhenShipmentCancelled,
+    externalOrderId,
+    externalOrderNumber,
+    externalShipmentId,
+    onLoad,
+    onShipmentUpdated,
+    orderSourceCode,
+    salesOrderId,
+    shipFromAddresses,
+    shipmentId,
+    useWarehouses: (_b = features === null || features === void 0 ? void 0 : features.shipmentForm) === null || _b === void 0 ? void 0 : _b.useWarehouses,
+    warehouseId
+  });
+  const {
+    data: insuranceAccount,
+    isInitialLoading: insuranceIsLoading
+  } = reactApi.useGetInsuranceAccount((shipment === null || shipment === void 0 ? void 0 : shipment.insuranceProvider) === reactApi.SE.InsuranceProviderType.SHIPSURANCE ? reactApi.SE.InsuranceProviderType.SHIPSURANCE : undefined);
+  const currency = currencyProp !== null && currencyProp !== void 0 ? currencyProp : money.getCurrencyFromString((_c = fundingSource === null || fundingSource === void 0 ? void 0 : fundingSource[0]) === null || _c === void 0 ? void 0 : _c.currencyCode);
+  const handleShipmentUpdated = React.useCallback(shipment => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    yield refetchPendingSalesOrderShipments();
+    yield onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(shipment);
+  }), [onShipmentUpdated, refetchPendingSalesOrderShipments]);
+  return jsxRuntime.jsx(suspendPurchase.SuspendPurchase, Object.assign({
+    data: shipment || salesOrder,
+    errors: errors,
+    isLoading: isLoading || insuranceIsLoading
+  }, {
+    children: jsxRuntime.jsx(configureShipment.ConfigureShipment, Object.assign({
+      currency: currency,
+      features: features,
+      insuranceAccount: insuranceAccount,
+      isLoading: isLoading || insuranceIsLoading,
+      onShipmentUpdated: handleShipmentUpdated,
+      printLabelLayout: printLabelLayout !== null && printLabelLayout !== void 0 ? printLabelLayout : accountSettings === null || accountSettings === void 0 ? void 0 : accountSettings.defaultLabelLayout,
+      salesOrder: salesOrder,
+      shipFromAddresses: shipFromAddresses,
+      shipment: shipment
+    }, props))
+  }));
+};
+/**
+ * # Registered Purchase Label Element
+ *
+ * @param ElementProps The props necessary to render the `<PurchaseLabel.Element />` for shipment
+ * based or sales order based label purchasing.
+ *
+ * @example
+ * The `<Component />` is the source JSX that is rendered when you make use of the `PurchaseLabel`
+ * Element directly.
+ * ```tsx
+ * <PurchaseLabel.Element
+ *   key={currentSalesOrderId}
+ *   printLabelLayout='4x6'
+ *   shippingPresets={presets}
+ *   onShipmentUpdated={(shipment) => console.log('Shipment Updated', shipment)}
+ *   onRateSaved={(
+ *     shipment: SE.SalesOrderShipment,
+ *     rate?: SE.Rate,
+ *     rateOptions?: SE.Rate[]
+ *   ) => console.log('Rate Saved', shipment, rate, rateOptions)}
+ *   onRatesCalculated={() => console.log('Rates Calculated')}
+ *   onBeforeLabelCreate={onBeforeLabelPurchase}
+ *   onLabelCreateSuccess={onLabelPurchaseSuccess}
+ *   onLabelCreateFailure={(rate) => console.log('Label Purchase Failed', rate)}
+ *   warehouseId={defaultWarehouseId}
+ * />
+ * ```
+ *
+ * <br />
+ *
+ * - Once a label has been purchased using this Element, you can take the `shipmentId` for the
+ * associated shipment and pass it into the `<ShipmentSummary.Element />` Element in order to view
+ * the shipment details.
+ *
+ * @see {@link PurchaseLabel.PurchaseLabelCommonProps | The **Common props** used in `<PurchaseLabel.Element />`}
+ *
+ * @see {@link ShipmentSummary.Element | The next step in the label purchase workflow `<ShipmentSummary.Element />`}
+ */
+const Element = createElement.createElement(Component, errorFallback.ErrorFallback, {
+  resources: {
+    en: index
+  }
+});
+
+exports.Component = Component;
+exports.Element = Element;

package/cjs/elements/select-label-layout/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var selectLabelLayoutElement = require('./select-label-layout-element.cjs');
+
+
+
+exports.SelectLabelLayout = selectLabelLayoutElement;

package/cjs/elements/select-label-layout/select-label-layout-element.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useLabelLayout = require('../../features/select-label-layout/use-label-layout.cjs');
+var index = require('../../locales/en/index.cjs');
+var selectLabelLayout = require('../../features/select-label-layout/select-label-layout.cjs');
+var createElement = require('../../create-element/create-element.cjs');
+var errorFallback = require('../../components/error-fallback/error-fallback.cjs');
+
+const Component = () => {
+  const props = tslib.__rest(useLabelLayout.useLabelLayout(), []);
+  return jsxRuntime.jsx(selectLabelLayout.Settings, Object.assign({}, props));
+};
+const Element = createElement.createElement(Component, errorFallback.ErrorFallback, {
+  resources: {
+    en: index
+  }
+});
+
+exports.Component = Component;
+exports.Element = Element;

package/cjs/elements/shipment-summary/components/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var shipment = require('./shipment/shipment.cjs');
+
+
+
+exports.Shipment = shipment.Shipment;
+exports.schedulePickupForCarrier = shipment.schedulePickupForCarrier;

package/cjs/elements/shipment-summary/components/label-display/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var labelDisplay = require('./label-display.cjs');
+
+
+
+exports.LabelDisplay = labelDisplay.LabelDisplay;