@shipengine/elements 0.37.2 → 0.37.4

package/index.cjs

@@ -2648,6 +2648,15 @@ const featureFlags = {
      * Elements.
      */
     compatibleCountryCodes: ["AU", "CA", "FR", "DE", "GB", "IL", "IT", "NO", "ES", "SE", "US"],
+    /**
+     * `configureShipment` is a group of flags related to the useConfigureShipment functionality
+     */
+    configureShipment: {
+      /**
+       * `enableErrorWhenShipmentCancelled` when enabled will modify the default behavior of creating a new shipment for a salesorder to throwing an error
+       */
+      enableErrorWhenShipmentCancelled: false
+    },
     /**
      * @internal
      *
@@ -3960,11 +3969,29 @@ const getIsCustomsRequiredForShipment = ({
 /**
  * @internal
  *
+ * @deprecated please use getShipmentByStatus instead
  * # Shipment Utilities - getPendingShipment
  *
  * @category Utilities
  */
 const getPendingShipment = shipments => shipments === null || shipments === void 0 ? void 0 : shipments.filter(s => s.shipmentStatus === "pending").sort(sortByCreationDate)[0];
+/**
+ *
+ * @deprecated please use getShipmentByStatus instead
+ * @internal
+ * @param shipments
+ * @returns the latest created shipment whose status is `cancelled`
+ */
+const getCancelledShipment = shipments => shipments === null || shipments === void 0 ? void 0 : shipments.filter(shipment => shipment.shipmentStatus === "cancelled").sort(sortByCreationDate)[0];
+/**
+ *
+ * @param status string containing one of the following values - "pending", "processing", "label_purchased", "cancelled"
+ * @param shipments optional list of shipments to filter from
+ * @returns latest created shipment whose shipmentStatus matches the param status
+ */
+const getShipmentByStatus = (status, shipments) => shipments === null || shipments === void 0 ? void 0 : shipments.filter(({
+  shipmentStatus
+}) => shipmentStatus === status).sort(sortByCreationDate)[0];
 
 var uncurryThis$6 = functionUncurryThis;
 
@@ -4509,8 +4536,7 @@ const useShipmentMetadata = shipment => {
 };
 
 let _$2 = t => t,
-  _t$2,
-  _t2$2;
+  _t$2;
 const findGenericPackageFromCarriers = carriers => {
   const carrier = carriers.find(c => c.packages.some(p => p.packageCode === "package"));
   return carrier === null || carrier === void 0 ? void 0 : carrier.packages.find(p => p.packageCode === "package");
@@ -4537,17 +4563,14 @@ const usePackageOptions = (carriers, customPackageTypes, shipment) => {
       [c.carrierCode]: partialResults[c.carrierCode] === undefined
     }));
     const genericPackage = findGenericPackageFromCarriers(carriers);
-    const packageOptions = [...(genericPackage ? [{
-      label: t(_t$2 || (_t$2 = _$2`packageCategories.browseRates`)),
-      options: [{
+    const customPackageOptions = [...(genericPackage || (customPackageTypes === null || customPackageTypes === void 0 ? void 0 : customPackageTypes.length) ? [{
+      label: t(_t$2 || (_t$2 = _$2`packageCategories.customPackages`)),
+      options: [...(genericPackage ? [{
         label: t("packageCodes.package"),
         value: {
           code: "package"
         }
-      }]
-    }] : []), ...((customPackageTypes === null || customPackageTypes === void 0 ? void 0 : customPackageTypes.length) ? [{
-      label: t(_t2$2 || (_t2$2 = _$2`packageCategories.myCustomPackages`)),
-      options: customPackageTypes.sort((a, b) => a.name.localeCompare(b.name)).map(({
+      }] : []), ...((customPackageTypes === null || customPackageTypes === void 0 ? void 0 : customPackageTypes.length) ? customPackageTypes.sort((a, b) => a.name.localeCompare(b.name)).map(({
         dimensions,
         name,
         packageId
@@ -4558,7 +4581,7 @@ const usePackageOptions = (carriers, customPackageTypes, shipment) => {
             code: packageId
           }
         };
-      })
+      }) : [])]
     }] : [])];
     return carriers.reduce((options, carrier) => {
       if (carrier.packages.length === 0) return options;
@@ -4579,7 +4602,7 @@ const usePackageOptions = (carriers, customPackageTypes, shipment) => {
         })),
         value: carrier.carrierId
       }];
-    }, packageOptions);
+    }, customPackageOptions);
   }, [carriers, customPackageTypes, isPoBox, isUnsupportedUpsCountry, t]);
 };
 
@@ -14884,15 +14907,29 @@ const SuspendSalesOrder = ({
 };
 
 const styles$2 = createStyles({
+  itemDescription: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    padding: `${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(0)}px ${theme.spacing(0)}px`
+  }),
   itemDetail: theme => ({
-    padding: `${theme.spacing(0)}px ${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(0)}px`
+    padding: `${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(0.5)}px ${theme.spacing(0)}px`,
+    verticalAlign: "top"
   }),
   itemName: theme => ({
-    padding: `${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(0.5)}px ${theme.spacing(0)}px`
+    // Set item name to max 3 lines and truncate with ellipsis
+    "-webkit-box-orient": "vertical",
+    "-webkit-line-clamp": "3",
+    display: "-webkit-box",
+    lineHeight: `${theme.spacing(2.5)}px`,
+    maxHeight: `${theme.spacing(7.5)}px`,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "normal"
   }),
   numericCell: () => ({
     textAlign: "right",
-    width: "100px"
+    width: "80px"
   }),
   tableWrapper: theme => ({
     "&& > div": {
@@ -14951,23 +14988,18 @@ const ItemsBreakdown = ({
           quantity,
           value,
           totalValue
-        }, index) => jsxRuntime.jsxs(React.Fragment, {
-          children: [jsxRuntime.jsx(giger.TableBaseRow, {
-            children: jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
-              colSpan: 4,
-              css: styles$2.itemName
+        }, index) => jsxRuntime.jsx(React.Fragment, {
+          children: jsxRuntime.jsxs(giger.TableBaseRow, {
+            children: [jsxRuntime.jsxs(giger.TableBodyCell, Object.assign({
+              css: styles$2.itemDescription
             }, {
-              children: jsxRuntime.jsx(giger.Typography, {
+              children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+                css: styles$2.itemName
+              }, {
                 children: name
-              })
-            }))
-          }), jsxRuntime.jsxs(giger.TableBaseRow, {
-            children: [jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
-              css: styles$2.itemDetail
-            }, {
-              children: jsxRuntime.jsx(giger.Typography, {
+              })), jsxRuntime.jsx(giger.Typography, {
                 children: detail
-              })
+              })]
             })), jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
               css: [styles$2.numericCell, styles$2.itemDetail]
             }, {
@@ -14981,7 +15013,7 @@ const ItemsBreakdown = ({
             }, {
               children: totalValue && formatMoney(totalValue)
             }))]
-          })]
+          })
         }, index))
       })
     }))
@@ -15978,6 +16010,7 @@ const ShipmentForm = ({
           }, {
             children: presetCategory.options.map(preset => jsxRuntime.jsx(giger.Option, Object.assign({
               onClick: () => {
+                onDirty(); // bypass rate cache
                 handleApplyPreset(preset.value);
               },
               selected: ___default["default"].isEqual(selectedPreset, preset.value),
@@ -16862,6 +16895,7 @@ var common = {
 		invalidNameOrCompany: "Recipient name and company name (if provided) must have two characters in first and last name.",
 		parsingFailure: "Parsing failed. Please check address and try again.",
 		incompleteLabelPurchaseRequirements: "Please add your {{requirements}} to continue purchasing a label.",
+		shipmentCancelled: "This shipment is Cancelled in ShipStation. Log into ShipStation to restore the order to Awaiting Shipment status.",
 		unableToLoad: {
 			accountSettings: "Unable to load account settings",
 			autoFundingSettings: "Unable to load auto funding settings",
@@ -16882,6 +16916,7 @@ var common = {
 		purchase: "Purchase error",
 		rateInvalid: "Invalid rate configuration",
 		security: "Security error",
+		shipmentStatus: "Shipment status error",
 		system: "System error",
 		unknown: "Unknown error",
 		validation: "Unable to validate address"
@@ -16920,8 +16955,7 @@ var common = {
 		december: "December"
 	},
 	packageCategories: {
-		browseRates: "Browse Rates",
-		myCustomPackages: "My Custom Packages"
+		customPackages: "Custom Packages"
 	},
 	packageCodes: {
 		"package": "Custom"
@@ -18400,7 +18434,9 @@ const useShipmentForm = ({
 };
 
 const ConfigureShipment = _a => {
+  var _b;
   var {
+      errors,
       features,
       getPreferredRates,
       onAddressValidation,
@@ -18418,12 +18454,13 @@ const ConfigureShipment = _a => {
       shipment,
       onBeforeRateSaved
     } = _a,
-    props = __rest(_a, ["features", "getPreferredRates", "onAddressValidation", "onApplyPreset", "onBeforeLabelCreate", "onChangeAddress", "onLabelCreateFailure", "onLabelCreateSuccess", "onRateSaved", "onRatesCalculated", "onShipmentUpdated", "printLabelLayout", "preferredServiceCodes", "salesOrder", "shipment", "onBeforeRateSaved"]);
+    props = __rest(_a, ["errors", "features", "getPreferredRates", "onAddressValidation", "onApplyPreset", "onBeforeLabelCreate", "onChangeAddress", "onLabelCreateFailure", "onLabelCreateSuccess", "onRateSaved", "onRatesCalculated", "onShipmentUpdated", "printLabelLayout", "preferredServiceCodes", "salesOrder", "shipment", "onBeforeRateSaved"]);
   const hydrateRef = React.useRef();
+  reactI18next.useTranslation();
   const {
     isInternational
   } = useShipmentMetadata(shipment);
-  const _b = useRatesForm({
+  const _c = useRatesForm({
       getPreferredRates,
       onBeforeLabelCreate,
       onBeforeRateSaved,
@@ -18444,17 +18481,17 @@ const ConfigureShipment = _a => {
       resetRates,
       resetLabel,
       preferredRates
-    } = _b,
-    rateFormProps = __rest(_b, ["requestRates", "resetRates", "resetLabel", "preferredRates"]);
-  const _c = useShipmentForm({
+    } = _c,
+    rateFormProps = __rest(_c, ["requestRates", "resetRates", "resetLabel", "preferredRates"]);
+  const _d = useShipmentForm({
       compatibleCountryCodes: features === null || features === void 0 ? void 0 : features.compatibleCountryCodes,
       onAddressValidation,
       onApplyPreset: React.useCallback((_preset, shipment) => __awaiter(void 0, void 0, void 0, function* () {
-        var _d;
+        var _e;
         if (shipment.packages[0].weight.value) {
           yield requestRates(shipment, isInternational);
         }
-        (_d = hydrateRef.current) === null || _d === void 0 ? void 0 : _d.call(hydrateRef, shipment);
+        (_e = hydrateRef.current) === null || _e === void 0 ? void 0 : _e.call(hydrateRef, shipment);
       }), [requestRates, isInternational]),
       onChangeAddress,
       onShipmentUpdated,
@@ -18467,8 +18504,8 @@ const ConfigureShipment = _a => {
     {
       charsetWarning,
       resetSalesOrderShipment
-    } = _c,
-    shipmentFormProps = __rest(_c, ["charsetWarning", "resetSalesOrderShipment"]);
+    } = _d,
+    shipmentFormProps = __rest(_d, ["charsetWarning", "resetSalesOrderShipment"]);
   const handleOnDirty = React.useCallback(() => {
     resetRates();
     resetLabel();
@@ -18488,6 +18525,9 @@ const ConfigureShipment = _a => {
       return self.indexOf(item) === pos;
     });
   }, [preferredRates, preferredServiceCodes]);
+  if (((_b = features === null || features === void 0 ? void 0 : features.configureShipment) === null || _b === void 0 ? void 0 : _b.enableErrorWhenShipmentCancelled) && (errors === null || errors === void 0 ? void 0 : errors.filter(e => e.message === "shipment_cancelled"))) {
+    throw new Error("errorMessages.shipmentCancelled");
+  }
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx(ShipmentForm, Object.assign({}, shipmentFormProps, props, {
       charsetWarning: charsetWarning,
@@ -18506,6 +18546,7 @@ const ConfigureShipment = _a => {
 };
 
 const usePendingShipment = ({
+  breakOnCancelledShipment: _breakOnCancelledShipment = false,
   onLoad,
   salesOrder,
   warehouseId
@@ -18529,17 +18570,18 @@ const usePendingShipment = ({
     isLoading: isShipmentCreating,
     mutateAsync: createShipment
   } = alchemy.useCreateSalesOrderShipment();
-  const pendingShipment = getPendingShipment(shipments);
+  const pendingShipment = getShipmentByStatus("pending", shipments);
+  const cancelledShipment = getShipmentByStatus("cancelled", shipments);
   const defaultWarehouse = (_a = warehouses === null || warehouses === void 0 ? void 0 : warehouses.find(w => w.warehouseId === warehouseId)) !== null && _a !== void 0 ? _a : warehouses === null || warehouses === void 0 ? void 0 : warehouses[0];
   // On page load, check for a shipment and either call the onLoad callback or create a new shipment
   React.useEffect(() => {
     if (salesOrder && (shipments === null || shipments === void 0 ? void 0 : shipments.length) && shipments.every(s => s.shipmentStatus === "label_purchased")) {
-      onLoad === null || onLoad === void 0 ? void 0 : onLoad(salesOrder, shipments, pendingShipment);
+      void (onLoad === null || onLoad === void 0 ? void 0 : onLoad(salesOrder, shipments, pendingShipment));
       return;
     }
-    if (!salesOrder || !defaultWarehouse || !shipments || pendingShipment) return;
+    if (!salesOrder || !defaultWarehouse || !shipments || _breakOnCancelledShipment && cancelledShipment || pendingShipment) return;
     if (isListShipmentsLoading || isListShipmentsValidating || isShipmentCreating) return;
-    createShipment(Object.assign(Object.assign({
+    void createShipment(Object.assign(Object.assign({
       salesOrderId: salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.salesOrderId,
       // /v-beta/shipments/sales_order/:salesOrderId requires at minimum
       // a (warehouseId or shipFrom)
@@ -18555,14 +18597,18 @@ const usePendingShipment = ({
         }
       }]
     })).then(shipment => shipment && reloadShipments());
-  }, [createShipment, defaultWarehouse, isListShipmentsLoading, isListShipmentsValidating, isShipmentCreating, onLoad, pendingShipment, reloadShipments, salesOrder, shipments, warehouseId]);
+  }, [cancelledShipment, createShipment, defaultWarehouse, isListShipmentsLoading, isListShipmentsValidating, isShipmentCreating, onLoad, pendingShipment, reloadShipments, salesOrder, shipments, warehouseId, _breakOnCancelledShipment]);
   const reloadPendingShipment = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
     const {
       data: shipments
     } = yield reloadShipments();
-    return getPendingShipment(shipments);
+    return getShipmentByStatus("pending", shipments);
   }), [reloadShipments]);
-  const errors = [...(listWarehouseErrors !== null && listWarehouseErrors !== void 0 ? listWarehouseErrors : []), ...(createShipmentErrors !== null && createShipmentErrors !== void 0 ? createShipmentErrors : []), ...(listShipmentsErrors !== null && listShipmentsErrors !== void 0 ? listShipmentsErrors : [])];
+  const errors = [...(listWarehouseErrors !== null && listWarehouseErrors !== void 0 ? listWarehouseErrors : []), ...(createShipmentErrors !== null && createShipmentErrors !== void 0 ? createShipmentErrors : []), ...(listShipmentsErrors !== null && listShipmentsErrors !== void 0 ? listShipmentsErrors : []), ...(_breakOnCancelledShipment && cancelledShipment ? [new alchemy.CodedError("shipment_cancelled", {
+    errorCode: "invalid_status",
+    errorSource: "elements",
+    errorType: "business_rules"
+  })] : [])];
   return {
     isPendingShipmentLoading: !pendingShipment && errors.length === 0,
     pendingShipment,
@@ -18573,6 +18619,7 @@ const usePendingShipment = ({
 
 const useConfigureShipment = ({
   onLoad,
+  errorWhenShipmentCancelled: _errorWhenShipmentCancelled = false,
   onShipmentUpdated,
   salesOrder,
   warehouseId,
@@ -18585,6 +18632,7 @@ const useConfigureShipment = ({
     pendingShipmentErrors,
     reloadPendingShipment
   } = usePendingShipment({
+    breakOnCancelledShipment: _errorWhenShipmentCancelled,
     onLoad,
     salesOrder,
     warehouseId
@@ -18661,6 +18709,7 @@ const useImportSalesOrder = ({
 };
 
 const PurchaseLabelBySalesOrder = _a => {
+  var _b;
   var {
       features,
       externalOrderId,
@@ -18673,7 +18722,7 @@ const PurchaseLabelBySalesOrder = _a => {
       printLabelLayout
     } = _a,
     props = __rest(_a, ["features", "externalOrderId", "externalOrderNumber", "onLoad", "onShipmentUpdated", "orderSourceCode", "salesOrderId", "warehouseId", "printLabelLayout"]);
-  const _b = useImportSalesOrder({
+  const _c = useImportSalesOrder({
       externalOrderId,
       externalOrderNumber,
       orderSourceCode,
@@ -18682,22 +18731,28 @@ const PurchaseLabelBySalesOrder = _a => {
     {
       salesOrder,
       isLoading: salesOrderLoading
-    } = _b,
-    salesOrderProps = __rest(_b, ["salesOrder", "isLoading"]);
+    } = _c,
+    salesOrderProps = __rest(_c, ["salesOrder", "isLoading"]);
   const configureShipmentProps = useConfigureShipment({
+    errorWhenShipmentCancelled: (_b = features === null || features === void 0 ? void 0 : features.configureShipment) === null || _b === void 0 ? void 0 : _b.enableErrorWhenShipmentCancelled,
     onLoad,
     onShipmentUpdated,
     printLabelLayout,
     salesOrder,
     warehouseId
   });
+  const {
+    data: insuranceAccount,
+    isLoading: insuranceIsLoading
+  } = alchemy.useGetInsuranceAccount("shipsurance");
   return jsxRuntime.jsx(SuspendSalesOrder, Object.assign({
     salesOrder: salesOrder
   }, salesOrderProps, {
-    isLoading: salesOrderLoading || configureShipmentProps.isLoading
+    isLoading: salesOrderLoading || configureShipmentProps.isLoading || insuranceIsLoading
   }, {
     children: salesOrder && jsxRuntime.jsx(ConfigureShipment, Object.assign({
       features: features,
+      insuranceAccount: insuranceAccount,
       salesOrder: salesOrder
     }, configureShipmentProps, props))
   }));
@@ -18766,11 +18821,16 @@ const PurchaseLabelByShipment = _a => {
     void shipmentProps.refetchShipment();
     onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(shipment);
   };
+  const {
+    data: insuranceAccount,
+    isLoading: insuranceIsLoading
+  } = alchemy.useGetInsuranceAccount("shipsurance");
   return jsxRuntime.jsx(SuspendShipment, Object.assign({
     shipment: shipment
   }, shipmentProps, {
     children: shipment && jsxRuntime.jsx(ConfigureShipment, Object.assign({
       errors: shipmentProps.errors,
+      insuranceAccount: insuranceAccount,
       isLoading: shipmentProps.isLoading,
       onShipmentUpdated: handleShipmentUpdated,
       shipment: shipment
@@ -18825,7 +18885,9 @@ const Component$2 = _a => {
   });
   if (incompleteRequirementsKeys.length > 0) throw new Error(incompleteRequirementsError);
   if ("salesOrderId" in props || "orderSourceCode" in props) {
-    return jsxRuntime.jsx(PurchaseLabelBySalesOrder, Object.assign({}, props));
+    return jsxRuntime.jsx(PurchaseLabelBySalesOrder, Object.assign({
+      features: features
+    }, props));
   } else {
     return jsxRuntime.jsx(PurchaseLabelByShipment, Object.assign({}, props));
   }
@@ -19446,6 +19508,7 @@ exports.formatExpiration = formatExpiration;
 exports.formatFractionalWeight = formatFractionalWeight;
 exports.formatMoney = formatMoney;
 exports.getAddFundsSchema = getAddFundsSchema;
+exports.getCancelledShipment = getCancelledShipment;
 exports.getCarrierIdByCarrierCode = getCarrierIdByCarrierCode;
 exports.getCustomsFromSalesOrder = getCustomsFromSalesOrder;
 exports.getExpirationYears = getExpirationYears;
@@ -19458,6 +19521,7 @@ exports.getRateRequiresAcknowledgement = getRateRequiresAcknowledgement;
 exports.getRelativeDates = getRelativeDates;
 exports.getRequestedServices = getRequestedServices;
 exports.getSalesOrderItemsFromSalesOrderOrShipment = getSalesOrderItemsFromSalesOrderOrShipment;
+exports.getShipmentByStatus = getShipmentByStatus;
 exports.getTotalRateAmount = getTotalRateAmount;
 exports.isDecimalWeight = isDecimalWeight;
 exports.isDomesticAddress = isDomesticAddress;

package/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { useTranslation, Trans } from 'react-i18next';
 import { InlineNotification, NotificationType, Typography, Link, ButtonSize, Spinner, Icon, IconSize, Divider, Skeleton, SkeletonAnimation, SkeletonVariant, Grid, GridChild, Pagination, SkeletonBackgroundColor, RadioGroup, Radio, SpinnerSize, FormField, FieldMessageType, Checkbox, Input, SelectAutocomplete, Select as Select$1, OptionGroup, Option, Button, Switch as Switch$1, Textarea, ChipList, Chip, ButtonVariant, ButtonColor, Tag, TagColor, Stepper, Step, IconTooltip, Table, TableBody, TableBaseRow, TableBodyCell, TableHeader, TableHeaderCell, Popover, DropdownOptionList, DatePicker as DatePicker$1, BottomSheet } from '@packlink/giger';
-import alchemy, { SE, logger, useValidateAddresses, useListCarriers, useConnectCarrier, useListWarehouses, useUpdateWarehouse, useCreateWarehouse, useDeleteWarehouse, useGetWalletHistory, useGetAccountSettings, useUpdateAccountSettings, AlchemyContext, useAddFunds, useGetCarrierById, useUpdateAutoFunding, useGetAutoFundingConfiguration, Currency, useUpdateFundingSource, useListFundingSources, useCreateFundingSource, useRegisterCarrier, useUpdateSalesOrderShipment, useParseAddress, useListCustomPackageTypes, useCalculateRates, useGetShipmentRates, useListLabels, useCreateLabel, useListSalesOrderShipments, useCreateSalesOrderShipment, useListSalesOrders, useGetSalesOrder, useListOrderSources, useRefreshOrderSource, useCreateShipment, useGetShipment, useGetSalesOrderShipment, useGetLabel, useVoidLabel } from '@shipengine/alchemy';
+import alchemy, { SE, logger, useValidateAddresses, useListCarriers, useConnectCarrier, useListWarehouses, useUpdateWarehouse, useCreateWarehouse, useDeleteWarehouse, useGetWalletHistory, useGetAccountSettings, useUpdateAccountSettings, AlchemyContext, useAddFunds, useGetCarrierById, useUpdateAutoFunding, useGetAutoFundingConfiguration, Currency, useUpdateFundingSource, useListFundingSources, useCreateFundingSource, useRegisterCarrier, useUpdateSalesOrderShipment, useParseAddress, useListCustomPackageTypes, useCalculateRates, useGetShipmentRates, useListLabels, useCreateLabel, useListSalesOrderShipments, useCreateSalesOrderShipment, CodedError, useListSalesOrders, useGetSalesOrder, useListOrderSources, useRefreshOrderSource, useGetInsuranceAccount, useCreateShipment, useGetShipment, useGetSalesOrderShipment, useGetLabel, useVoidLabel } from '@shipengine/alchemy';
 import axios from 'axios';
 import _$3, { get as get$1, isEqual } from 'lodash';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -2616,6 +2616,15 @@ const featureFlags = {
      * Elements.
      */
     compatibleCountryCodes: ["AU", "CA", "FR", "DE", "GB", "IL", "IT", "NO", "ES", "SE", "US"],
+    /**
+     * `configureShipment` is a group of flags related to the useConfigureShipment functionality
+     */
+    configureShipment: {
+      /**
+       * `enableErrorWhenShipmentCancelled` when enabled will modify the default behavior of creating a new shipment for a salesorder to throwing an error
+       */
+      enableErrorWhenShipmentCancelled: false
+    },
     /**
      * @internal
      *
@@ -3928,11 +3937,29 @@ const getIsCustomsRequiredForShipment = ({
 /**
  * @internal
  *
+ * @deprecated please use getShipmentByStatus instead
  * # Shipment Utilities - getPendingShipment
  *
  * @category Utilities
  */
 const getPendingShipment = shipments => shipments === null || shipments === void 0 ? void 0 : shipments.filter(s => s.shipmentStatus === "pending").sort(sortByCreationDate)[0];
+/**
+ *
+ * @deprecated please use getShipmentByStatus instead
+ * @internal
+ * @param shipments
+ * @returns the latest created shipment whose status is `cancelled`
+ */
+const getCancelledShipment = shipments => shipments === null || shipments === void 0 ? void 0 : shipments.filter(shipment => shipment.shipmentStatus === "cancelled").sort(sortByCreationDate)[0];
+/**
+ *
+ * @param status string containing one of the following values - "pending", "processing", "label_purchased", "cancelled"
+ * @param shipments optional list of shipments to filter from
+ * @returns latest created shipment whose shipmentStatus matches the param status
+ */
+const getShipmentByStatus = (status, shipments) => shipments === null || shipments === void 0 ? void 0 : shipments.filter(({
+  shipmentStatus
+}) => shipmentStatus === status).sort(sortByCreationDate)[0];
 
 var uncurryThis$6 = functionUncurryThis;
 
@@ -4477,8 +4504,7 @@ const useShipmentMetadata = shipment => {
 };
 
 let _$2 = t => t,
-  _t$2,
-  _t2$2;
+  _t$2;
 const findGenericPackageFromCarriers = carriers => {
   const carrier = carriers.find(c => c.packages.some(p => p.packageCode === "package"));
   return carrier === null || carrier === void 0 ? void 0 : carrier.packages.find(p => p.packageCode === "package");
@@ -4505,17 +4531,14 @@ const usePackageOptions = (carriers, customPackageTypes, shipment) => {
       [c.carrierCode]: partialResults[c.carrierCode] === undefined
     }));
     const genericPackage = findGenericPackageFromCarriers(carriers);
-    const packageOptions = [...(genericPackage ? [{
-      label: t(_t$2 || (_t$2 = _$2`packageCategories.browseRates`)),
-      options: [{
+    const customPackageOptions = [...(genericPackage || (customPackageTypes === null || customPackageTypes === void 0 ? void 0 : customPackageTypes.length) ? [{
+      label: t(_t$2 || (_t$2 = _$2`packageCategories.customPackages`)),
+      options: [...(genericPackage ? [{
         label: t("packageCodes.package"),
         value: {
           code: "package"
         }
-      }]
-    }] : []), ...((customPackageTypes === null || customPackageTypes === void 0 ? void 0 : customPackageTypes.length) ? [{
-      label: t(_t2$2 || (_t2$2 = _$2`packageCategories.myCustomPackages`)),
-      options: customPackageTypes.sort((a, b) => a.name.localeCompare(b.name)).map(({
+      }] : []), ...((customPackageTypes === null || customPackageTypes === void 0 ? void 0 : customPackageTypes.length) ? customPackageTypes.sort((a, b) => a.name.localeCompare(b.name)).map(({
         dimensions,
         name,
         packageId
@@ -4526,7 +4549,7 @@ const usePackageOptions = (carriers, customPackageTypes, shipment) => {
             code: packageId
           }
         };
-      })
+      }) : [])]
     }] : [])];
     return carriers.reduce((options, carrier) => {
       if (carrier.packages.length === 0) return options;
@@ -4547,7 +4570,7 @@ const usePackageOptions = (carriers, customPackageTypes, shipment) => {
         })),
         value: carrier.carrierId
       }];
-    }, packageOptions);
+    }, customPackageOptions);
   }, [carriers, customPackageTypes, isPoBox, isUnsupportedUpsCountry, t]);
 };
 
@@ -14852,15 +14875,29 @@ const SuspendSalesOrder = ({
 };
 
 const styles$2 = createStyles({
+  itemDescription: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    padding: `${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(0)}px ${theme.spacing(0)}px`
+  }),
   itemDetail: theme => ({
-    padding: `${theme.spacing(0)}px ${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(0)}px`
+    padding: `${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(0.5)}px ${theme.spacing(0)}px`,
+    verticalAlign: "top"
   }),
   itemName: theme => ({
-    padding: `${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(0.5)}px ${theme.spacing(0)}px`
+    // Set item name to max 3 lines and truncate with ellipsis
+    "-webkit-box-orient": "vertical",
+    "-webkit-line-clamp": "3",
+    display: "-webkit-box",
+    lineHeight: `${theme.spacing(2.5)}px`,
+    maxHeight: `${theme.spacing(7.5)}px`,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "normal"
   }),
   numericCell: () => ({
     textAlign: "right",
-    width: "100px"
+    width: "80px"
   }),
   tableWrapper: theme => ({
     "&& > div": {
@@ -14919,23 +14956,18 @@ const ItemsBreakdown = ({
           quantity,
           value,
           totalValue
-        }, index) => jsxs(Fragment$1, {
-          children: [jsx(TableBaseRow, {
-            children: jsx(TableBodyCell, Object.assign({
-              colSpan: 4,
-              css: styles$2.itemName
+        }, index) => jsx(Fragment$1, {
+          children: jsxs(TableBaseRow, {
+            children: [jsxs(TableBodyCell, Object.assign({
+              css: styles$2.itemDescription
             }, {
-              children: jsx(Typography, {
+              children: [jsx(Typography, Object.assign({
+                css: styles$2.itemName
+              }, {
                 children: name
-              })
-            }))
-          }), jsxs(TableBaseRow, {
-            children: [jsx(TableBodyCell, Object.assign({
-              css: styles$2.itemDetail
-            }, {
-              children: jsx(Typography, {
+              })), jsx(Typography, {
                 children: detail
-              })
+              })]
             })), jsx(TableBodyCell, Object.assign({
               css: [styles$2.numericCell, styles$2.itemDetail]
             }, {
@@ -14949,7 +14981,7 @@ const ItemsBreakdown = ({
             }, {
               children: totalValue && formatMoney(totalValue)
             }))]
-          })]
+          })
         }, index))
       })
     }))
@@ -15946,6 +15978,7 @@ const ShipmentForm = ({
           }, {
             children: presetCategory.options.map(preset => jsx(Option, Object.assign({
               onClick: () => {
+                onDirty(); // bypass rate cache
                 handleApplyPreset(preset.value);
               },
               selected: _$3.isEqual(selectedPreset, preset.value),
@@ -16830,6 +16863,7 @@ var common = {
 		invalidNameOrCompany: "Recipient name and company name (if provided) must have two characters in first and last name.",
 		parsingFailure: "Parsing failed. Please check address and try again.",
 		incompleteLabelPurchaseRequirements: "Please add your {{requirements}} to continue purchasing a label.",
+		shipmentCancelled: "This shipment is Cancelled in ShipStation. Log into ShipStation to restore the order to Awaiting Shipment status.",
 		unableToLoad: {
 			accountSettings: "Unable to load account settings",
 			autoFundingSettings: "Unable to load auto funding settings",
@@ -16850,6 +16884,7 @@ var common = {
 		purchase: "Purchase error",
 		rateInvalid: "Invalid rate configuration",
 		security: "Security error",
+		shipmentStatus: "Shipment status error",
 		system: "System error",
 		unknown: "Unknown error",
 		validation: "Unable to validate address"
@@ -16888,8 +16923,7 @@ var common = {
 		december: "December"
 	},
 	packageCategories: {
-		browseRates: "Browse Rates",
-		myCustomPackages: "My Custom Packages"
+		customPackages: "Custom Packages"
 	},
 	packageCodes: {
 		"package": "Custom"
@@ -18368,7 +18402,9 @@ const useShipmentForm = ({
 };
 
 const ConfigureShipment = _a => {
+  var _b;
   var {
+      errors,
       features,
       getPreferredRates,
       onAddressValidation,
@@ -18386,12 +18422,13 @@ const ConfigureShipment = _a => {
       shipment,
       onBeforeRateSaved
     } = _a,
-    props = __rest(_a, ["features", "getPreferredRates", "onAddressValidation", "onApplyPreset", "onBeforeLabelCreate", "onChangeAddress", "onLabelCreateFailure", "onLabelCreateSuccess", "onRateSaved", "onRatesCalculated", "onShipmentUpdated", "printLabelLayout", "preferredServiceCodes", "salesOrder", "shipment", "onBeforeRateSaved"]);
+    props = __rest(_a, ["errors", "features", "getPreferredRates", "onAddressValidation", "onApplyPreset", "onBeforeLabelCreate", "onChangeAddress", "onLabelCreateFailure", "onLabelCreateSuccess", "onRateSaved", "onRatesCalculated", "onShipmentUpdated", "printLabelLayout", "preferredServiceCodes", "salesOrder", "shipment", "onBeforeRateSaved"]);
   const hydrateRef = useRef();
+  useTranslation();
   const {
     isInternational
   } = useShipmentMetadata(shipment);
-  const _b = useRatesForm({
+  const _c = useRatesForm({
       getPreferredRates,
       onBeforeLabelCreate,
       onBeforeRateSaved,
@@ -18412,17 +18449,17 @@ const ConfigureShipment = _a => {
       resetRates,
       resetLabel,
       preferredRates
-    } = _b,
-    rateFormProps = __rest(_b, ["requestRates", "resetRates", "resetLabel", "preferredRates"]);
-  const _c = useShipmentForm({
+    } = _c,
+    rateFormProps = __rest(_c, ["requestRates", "resetRates", "resetLabel", "preferredRates"]);
+  const _d = useShipmentForm({
       compatibleCountryCodes: features === null || features === void 0 ? void 0 : features.compatibleCountryCodes,
       onAddressValidation,
       onApplyPreset: useCallback((_preset, shipment) => __awaiter(void 0, void 0, void 0, function* () {
-        var _d;
+        var _e;
         if (shipment.packages[0].weight.value) {
           yield requestRates(shipment, isInternational);
         }
-        (_d = hydrateRef.current) === null || _d === void 0 ? void 0 : _d.call(hydrateRef, shipment);
+        (_e = hydrateRef.current) === null || _e === void 0 ? void 0 : _e.call(hydrateRef, shipment);
       }), [requestRates, isInternational]),
       onChangeAddress,
       onShipmentUpdated,
@@ -18435,8 +18472,8 @@ const ConfigureShipment = _a => {
     {
       charsetWarning,
       resetSalesOrderShipment
-    } = _c,
-    shipmentFormProps = __rest(_c, ["charsetWarning", "resetSalesOrderShipment"]);
+    } = _d,
+    shipmentFormProps = __rest(_d, ["charsetWarning", "resetSalesOrderShipment"]);
   const handleOnDirty = useCallback(() => {
     resetRates();
     resetLabel();
@@ -18456,6 +18493,9 @@ const ConfigureShipment = _a => {
       return self.indexOf(item) === pos;
     });
   }, [preferredRates, preferredServiceCodes]);
+  if (((_b = features === null || features === void 0 ? void 0 : features.configureShipment) === null || _b === void 0 ? void 0 : _b.enableErrorWhenShipmentCancelled) && (errors === null || errors === void 0 ? void 0 : errors.filter(e => e.message === "shipment_cancelled"))) {
+    throw new Error("errorMessages.shipmentCancelled");
+  }
   return jsxs(Fragment, {
     children: [jsx(ShipmentForm, Object.assign({}, shipmentFormProps, props, {
       charsetWarning: charsetWarning,
@@ -18474,6 +18514,7 @@ const ConfigureShipment = _a => {
 };
 
 const usePendingShipment = ({
+  breakOnCancelledShipment: _breakOnCancelledShipment = false,
   onLoad,
   salesOrder,
   warehouseId
@@ -18497,17 +18538,18 @@ const usePendingShipment = ({
     isLoading: isShipmentCreating,
     mutateAsync: createShipment
   } = useCreateSalesOrderShipment();
-  const pendingShipment = getPendingShipment(shipments);
+  const pendingShipment = getShipmentByStatus("pending", shipments);
+  const cancelledShipment = getShipmentByStatus("cancelled", shipments);
   const defaultWarehouse = (_a = warehouses === null || warehouses === void 0 ? void 0 : warehouses.find(w => w.warehouseId === warehouseId)) !== null && _a !== void 0 ? _a : warehouses === null || warehouses === void 0 ? void 0 : warehouses[0];
   // On page load, check for a shipment and either call the onLoad callback or create a new shipment
   useEffect(() => {
     if (salesOrder && (shipments === null || shipments === void 0 ? void 0 : shipments.length) && shipments.every(s => s.shipmentStatus === "label_purchased")) {
-      onLoad === null || onLoad === void 0 ? void 0 : onLoad(salesOrder, shipments, pendingShipment);
+      void (onLoad === null || onLoad === void 0 ? void 0 : onLoad(salesOrder, shipments, pendingShipment));
       return;
     }
-    if (!salesOrder || !defaultWarehouse || !shipments || pendingShipment) return;
+    if (!salesOrder || !defaultWarehouse || !shipments || _breakOnCancelledShipment && cancelledShipment || pendingShipment) return;
     if (isListShipmentsLoading || isListShipmentsValidating || isShipmentCreating) return;
-    createShipment(Object.assign(Object.assign({
+    void createShipment(Object.assign(Object.assign({
       salesOrderId: salesOrder === null || salesOrder === void 0 ? void 0 : salesOrder.salesOrderId,
       // /v-beta/shipments/sales_order/:salesOrderId requires at minimum
       // a (warehouseId or shipFrom)
@@ -18523,14 +18565,18 @@ const usePendingShipment = ({
         }
       }]
     })).then(shipment => shipment && reloadShipments());
-  }, [createShipment, defaultWarehouse, isListShipmentsLoading, isListShipmentsValidating, isShipmentCreating, onLoad, pendingShipment, reloadShipments, salesOrder, shipments, warehouseId]);
+  }, [cancelledShipment, createShipment, defaultWarehouse, isListShipmentsLoading, isListShipmentsValidating, isShipmentCreating, onLoad, pendingShipment, reloadShipments, salesOrder, shipments, warehouseId, _breakOnCancelledShipment]);
   const reloadPendingShipment = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
     const {
       data: shipments
     } = yield reloadShipments();
-    return getPendingShipment(shipments);
+    return getShipmentByStatus("pending", shipments);
   }), [reloadShipments]);
-  const errors = [...(listWarehouseErrors !== null && listWarehouseErrors !== void 0 ? listWarehouseErrors : []), ...(createShipmentErrors !== null && createShipmentErrors !== void 0 ? createShipmentErrors : []), ...(listShipmentsErrors !== null && listShipmentsErrors !== void 0 ? listShipmentsErrors : [])];
+  const errors = [...(listWarehouseErrors !== null && listWarehouseErrors !== void 0 ? listWarehouseErrors : []), ...(createShipmentErrors !== null && createShipmentErrors !== void 0 ? createShipmentErrors : []), ...(listShipmentsErrors !== null && listShipmentsErrors !== void 0 ? listShipmentsErrors : []), ...(_breakOnCancelledShipment && cancelledShipment ? [new CodedError("shipment_cancelled", {
+    errorCode: "invalid_status",
+    errorSource: "elements",
+    errorType: "business_rules"
+  })] : [])];
   return {
     isPendingShipmentLoading: !pendingShipment && errors.length === 0,
     pendingShipment,
@@ -18541,6 +18587,7 @@ const usePendingShipment = ({
 
 const useConfigureShipment = ({
   onLoad,
+  errorWhenShipmentCancelled: _errorWhenShipmentCancelled = false,
   onShipmentUpdated,
   salesOrder,
   warehouseId,
@@ -18553,6 +18600,7 @@ const useConfigureShipment = ({
     pendingShipmentErrors,
     reloadPendingShipment
   } = usePendingShipment({
+    breakOnCancelledShipment: _errorWhenShipmentCancelled,
     onLoad,
     salesOrder,
     warehouseId
@@ -18629,6 +18677,7 @@ const useImportSalesOrder = ({
 };
 
 const PurchaseLabelBySalesOrder = _a => {
+  var _b;
   var {
       features,
       externalOrderId,
@@ -18641,7 +18690,7 @@ const PurchaseLabelBySalesOrder = _a => {
       printLabelLayout
     } = _a,
     props = __rest(_a, ["features", "externalOrderId", "externalOrderNumber", "onLoad", "onShipmentUpdated", "orderSourceCode", "salesOrderId", "warehouseId", "printLabelLayout"]);
-  const _b = useImportSalesOrder({
+  const _c = useImportSalesOrder({
       externalOrderId,
       externalOrderNumber,
       orderSourceCode,
@@ -18650,22 +18699,28 @@ const PurchaseLabelBySalesOrder = _a => {
     {
       salesOrder,
       isLoading: salesOrderLoading
-    } = _b,
-    salesOrderProps = __rest(_b, ["salesOrder", "isLoading"]);
+    } = _c,
+    salesOrderProps = __rest(_c, ["salesOrder", "isLoading"]);
   const configureShipmentProps = useConfigureShipment({
+    errorWhenShipmentCancelled: (_b = features === null || features === void 0 ? void 0 : features.configureShipment) === null || _b === void 0 ? void 0 : _b.enableErrorWhenShipmentCancelled,
     onLoad,
     onShipmentUpdated,
     printLabelLayout,
     salesOrder,
     warehouseId
   });
+  const {
+    data: insuranceAccount,
+    isLoading: insuranceIsLoading
+  } = useGetInsuranceAccount("shipsurance");
   return jsx(SuspendSalesOrder, Object.assign({
     salesOrder: salesOrder
   }, salesOrderProps, {
-    isLoading: salesOrderLoading || configureShipmentProps.isLoading
+    isLoading: salesOrderLoading || configureShipmentProps.isLoading || insuranceIsLoading
   }, {
     children: salesOrder && jsx(ConfigureShipment, Object.assign({
       features: features,
+      insuranceAccount: insuranceAccount,
       salesOrder: salesOrder
     }, configureShipmentProps, props))
   }));
@@ -18734,11 +18789,16 @@ const PurchaseLabelByShipment = _a => {
     void shipmentProps.refetchShipment();
     onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(shipment);
   };
+  const {
+    data: insuranceAccount,
+    isLoading: insuranceIsLoading
+  } = useGetInsuranceAccount("shipsurance");
   return jsx(SuspendShipment, Object.assign({
     shipment: shipment
   }, shipmentProps, {
     children: shipment && jsx(ConfigureShipment, Object.assign({
       errors: shipmentProps.errors,
+      insuranceAccount: insuranceAccount,
       isLoading: shipmentProps.isLoading,
       onShipmentUpdated: handleShipmentUpdated,
       shipment: shipment
@@ -18793,7 +18853,9 @@ const Component$2 = _a => {
   });
   if (incompleteRequirementsKeys.length > 0) throw new Error(incompleteRequirementsError);
   if ("salesOrderId" in props || "orderSourceCode" in props) {
-    return jsx(PurchaseLabelBySalesOrder, Object.assign({}, props));
+    return jsx(PurchaseLabelBySalesOrder, Object.assign({
+      features: features
+    }, props));
   } else {
     return jsx(PurchaseLabelByShipment, Object.assign({}, props));
   }
@@ -19345,4 +19407,4 @@ var labelWorkflow = /*#__PURE__*/Object.freeze({
 	Element: Element
 });
 
-export { accountSettings as AccountSettings, AddFundsForm, AutoFundingForm, ButtonGroup, CarrierBalance, CollapsiblePanel, CopyButton, Country, Cube, DateRangeCombo, DateRangeSelect, ErrorFallback, fields as Field, FieldLabel, FormPortal, FundAndPurchase, InlineLabel, ItemsBreakdown, labelWorkflow as LabelWorkflow, LinkAction, listCarriers$1 as ListCarriers, Loader, ManageFunding, manageWarehouses$1 as ManageWarehouses, onboarding as Onboarding, PageLayoutProvider, PaymentMethodSettings, Portal, PoweredByShipEngine, purchaseLabel as PurchaseLabel, RootPortalProvider, Section, Spacer, Spread, StoryNotes, index as Templates, UsState, UsaCity, viewShipment as ViewShipment, voidLabel as VoidLabel, autoFundingSchema, calculateTotal, capitalizeFirstLetter, convertDecimalWeightToFractionalWeight, convertDimensions, convertFractionalWeightToDecimalWeight, convertPoundsAndOuncesToOunces, convertWeight, countries, countryCodes, createCodedErrors, createDictionary, createStyles, currencySymbol, daysAfter, errorMap, euCountryCodes, extendZod, featureFlagComponentNameLookup, featureFlags, formLogger, formatCreditCardNumber, formatDate, formatDateDDMMYY, formatDimensions, formatExpiration, formatFractionalWeight, formatMoney, getAddFundsSchema, getCarrierIdByCarrierCode, getCustomsFromSalesOrder, getExpirationYears, getFeatures, getIsCustomsRequiredForSalesOrder, getIsCustomsRequiredForShipment, getIsInternationalShipment, getPendingShipment, getRateRequiresAcknowledgement, getRelativeDates, getRequestedServices, getSalesOrderItemsFromSalesOrderOrShipment, getTotalRateAmount, isDecimalWeight, isDomesticAddress, isEmptyAddress, isFlatRatePackageCode, isMetricWeightUnit, isMilitaryAddress, isNowOrInTheFuture, isPoBox, isPoBoxAddress, isString, isUnitedStatesTerritory, isUnsupportedByUps, isUpsCarrier, isUspsCarrier, moneySchema, mostRecent, nextDayCutoff, omitTime, overrideCarrierCodes$1 as overrideCarrierCodes, phoneSchema, phoneSchemaUnvalidated, postalCodeRegex$3 as postalCodeRegex, sortByCreationDate, throwAny, throwJoinedMessages, usCities, usStateCodes, usStates, useAddressValidation, useBlackboxDetection, useCarrierMetadata, useConfirmationOptions, useCountryCodeOptions, useCustomsContentsOptions, useCustomsNonDeliveryOptions, useDateRangeOptions, useExpirationMonthOptions, useFeatures, useInsuranceProviderOptions, useNestedForm, usePackageOptions, usePageLayout, useRateOptions, useRootPortal, useRunOnceOnTrue, useScrubErrors, useServiceCodeOptions, useShipmentMetadata, useShippingPresetsOptions, useStateCodeOptions, useToggle, useWarehouseOptions, validationResolver };
+export { accountSettings as AccountSettings, AddFundsForm, AutoFundingForm, ButtonGroup, CarrierBalance, CollapsiblePanel, CopyButton, Country, Cube, DateRangeCombo, DateRangeSelect, ErrorFallback, fields as Field, FieldLabel, FormPortal, FundAndPurchase, InlineLabel, ItemsBreakdown, labelWorkflow as LabelWorkflow, LinkAction, listCarriers$1 as ListCarriers, Loader, ManageFunding, manageWarehouses$1 as ManageWarehouses, onboarding as Onboarding, PageLayoutProvider, PaymentMethodSettings, Portal, PoweredByShipEngine, purchaseLabel as PurchaseLabel, RootPortalProvider, Section, Spacer, Spread, StoryNotes, index as Templates, UsState, UsaCity, viewShipment as ViewShipment, voidLabel as VoidLabel, autoFundingSchema, calculateTotal, capitalizeFirstLetter, convertDecimalWeightToFractionalWeight, convertDimensions, convertFractionalWeightToDecimalWeight, convertPoundsAndOuncesToOunces, convertWeight, countries, countryCodes, createCodedErrors, createDictionary, createStyles, currencySymbol, daysAfter, errorMap, euCountryCodes, extendZod, featureFlagComponentNameLookup, featureFlags, formLogger, formatCreditCardNumber, formatDate, formatDateDDMMYY, formatDimensions, formatExpiration, formatFractionalWeight, formatMoney, getAddFundsSchema, getCancelledShipment, getCarrierIdByCarrierCode, getCustomsFromSalesOrder, getExpirationYears, getFeatures, getIsCustomsRequiredForSalesOrder, getIsCustomsRequiredForShipment, getIsInternationalShipment, getPendingShipment, getRateRequiresAcknowledgement, getRelativeDates, getRequestedServices, getSalesOrderItemsFromSalesOrderOrShipment, getShipmentByStatus, getTotalRateAmount, isDecimalWeight, isDomesticAddress, isEmptyAddress, isFlatRatePackageCode, isMetricWeightUnit, isMilitaryAddress, isNowOrInTheFuture, isPoBox, isPoBoxAddress, isString, isUnitedStatesTerritory, isUnsupportedByUps, isUpsCarrier, isUspsCarrier, moneySchema, mostRecent, nextDayCutoff, omitTime, overrideCarrierCodes$1 as overrideCarrierCodes, phoneSchema, phoneSchemaUnvalidated, postalCodeRegex$3 as postalCodeRegex, sortByCreationDate, throwAny, throwJoinedMessages, usCities, usStateCodes, usStates, useAddressValidation, useBlackboxDetection, useCarrierMetadata, useConfirmationOptions, useCountryCodeOptions, useCustomsContentsOptions, useCustomsNonDeliveryOptions, useDateRangeOptions, useExpirationMonthOptions, useFeatures, useInsuranceProviderOptions, useNestedForm, usePackageOptions, usePageLayout, useRateOptions, useRootPortal, useRunOnceOnTrue, useScrubErrors, useServiceCodeOptions, useShipmentMetadata, useShippingPresetsOptions, useStateCodeOptions, useToggle, useWarehouseOptions, validationResolver };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shipengine/elements",
-  "version": "0.37.2",
+  "version": "0.37.4",
   "peerDependencies": {
     "@packlink/giger": "*",
     "react-i18next": "*",

package/src/components/items-breakdown/items-breakdown.styles.d.ts

@@ -1,9 +1,22 @@
 export declare const styles: {
+    itemDescription: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
+        display: "flex";
+        flexDirection: "column";
+        padding: string;
+    };
     itemDetail: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
         padding: string;
+        verticalAlign: string;
     };
     itemName: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
-        padding: string;
+        "-webkit-box-orient": string;
+        "-webkit-line-clamp": string;
+        display: "-webkit-box";
+        lineHeight: string;
+        maxHeight: string;
+        overflow: "hidden";
+        textOverflow: "ellipsis";
+        whiteSpace: "normal";
     };
     numericCell: () => {
         textAlign: "right";

package/src/elements/account-settings/account-settings.d.ts

@@ -624,6 +624,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     invalidNameOrCompany: string;
                     parsingFailure: string;
                     incompleteLabelPurchaseRequirements: string;
+                    shipmentCancelled: string;
                     unableToLoad: {
                         accountSettings: string;
                         autoFundingSettings: string;
@@ -644,6 +645,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     purchase: string;
                     rateInvalid: string;
                     security: string;
+                    shipmentStatus: string;
                     system: string;
                     unknown: string;
                     validation: string;
@@ -682,8 +684,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     december: string;
                 };
                 packageCategories: {
-                    browseRates: string;
-                    myCustomPackages: string;
+                    customPackages: string;
                 };
                 packageCodes: {
                     package: string;

package/src/elements/configure-shipment/configure-shipment.d.ts

@@ -25,6 +25,9 @@ export type RateFormFeatures = {
 };
 export type ConfigureShipmentFeatures = {
     compatibleCountryCodes?: UseShipmentFormProps["compatibleCountryCodes"];
+    configureShipment?: {
+        enableErrorWhenShipmentCancelled: boolean;
+    };
     partnerMessages?: {
         incompleteLabelPurchaseRequirements?: string;
     };
@@ -38,6 +41,7 @@ export type ConfigureShipmentProps = {
     errors?: Templates.ShipmentFormProps["errors"];
     features?: ConfigureShipmentFeatures;
     getPreferredRates?: (shipment: SE.SalesOrderShipment, isInternational: boolean) => Promise<PreferredRatesResponse | undefined>;
+    insuranceAccount?: SE.InsuranceAccount;
     isLoading?: Templates.ShipmentFormProps["isLoading"];
     onAddressValidation?: UseShipmentFormProps["onAddressValidation"];
     onApplyPreset?: UseShipmentFormProps["onApplyPreset"];
@@ -58,4 +62,4 @@ export type ConfigureShipmentProps = {
     shippingPresets?: UseShippingPresetsOptionsProps;
     warehouseId?: string;
 };
-export declare const ConfigureShipment: ({ features, getPreferredRates, onAddressValidation, onApplyPreset, onBeforeLabelCreate, onChangeAddress, onLabelCreateFailure, onLabelCreateSuccess, onRateSaved, onRatesCalculated, onShipmentUpdated, printLabelLayout, preferredServiceCodes, salesOrder, shipment, onBeforeRateSaved, ...props }: ConfigureShipmentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ConfigureShipment: ({ errors, features, getPreferredRates, onAddressValidation, onApplyPreset, onBeforeLabelCreate, onChangeAddress, onLabelCreateFailure, onLabelCreateSuccess, onRateSaved, onRatesCalculated, onShipmentUpdated, printLabelLayout, preferredServiceCodes, salesOrder, shipment, onBeforeRateSaved, ...props }: ConfigureShipmentProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/elements/onboarding/onboarding.d.ts

@@ -586,6 +586,29 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     invalidNameOrCompany: string;
                     parsingFailure: string;
                     incompleteLabelPurchaseRequirements: string;
+                    shipmentCancelled: string;
+                    /**
+                     * # Registered Onboarding Element
+                     *
+                     * - This is the registered `<Onboarding />` element that will be used to render the
+                     * `<Onboarding.Element />` component.
+                     *
+                     * @param ElementProps The props, callbacks, and resources necessary to render
+                     * the `<Onboarding.Element />` component.
+                     *
+                     * @example
+                     * The `<Component />` is the source JSX that is rendered when you make use of the `Onboarding`
+                     * Element directly. Here is a brief example of how you would use it within your application.
+                     * ```tsx
+                     * <Onboarding.Element
+                     *   onCompleteOnboarding={() => console.log('Onboarding Complete!')}
+                     * />
+                     * ```
+                     *
+                     * <br />
+                     *
+                     * @see {@link Onboarding.ComponentProps | The **props** that can be passed into the `<Onboarding.Element />` component}
+                     */
                     unableToLoad: {
                         accountSettings: string;
                         autoFundingSettings: string;
@@ -606,6 +629,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     purchase: string;
                     rateInvalid: string;
                     security: string;
+                    shipmentStatus: string;
                     system: string;
                     unknown: string;
                     validation: string;
@@ -644,8 +668,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     december: string;
                 };
                 packageCategories: {
-                    browseRates: string;
-                    myCustomPackages: string;
+                    customPackages: string;
                 };
                 packageCodes: {
                     package: string;

package/src/elements/purchase-label/hooks/use-configure-shipment.d.ts

@@ -2,13 +2,14 @@ import { SE } from "@shipengine/alchemy";
 import { ConfigureShipmentProps } from "../../configure-shipment";
 import { UsePendingShipmentProps } from "./use-pending-shipment";
 export type UseConfigureShipmentProps = {
+    errorWhenShipmentCancelled?: boolean;
     onLoad?: UsePendingShipmentProps["onLoad"];
     onShipmentUpdated?: ConfigureShipmentProps["onShipmentUpdated"];
     printLabelLayout?: SE.LabelLayout;
     salesOrder?: SE.SalesOrder;
     warehouseId?: UsePendingShipmentProps["warehouseId"];
 };
-export declare const useConfigureShipment: ({ onLoad, onShipmentUpdated, salesOrder, warehouseId, printLabelLayout, }: UseConfigureShipmentProps) => {
+export declare const useConfigureShipment: ({ onLoad, errorWhenShipmentCancelled, onShipmentUpdated, salesOrder, warehouseId, printLabelLayout, }: UseConfigureShipmentProps) => {
     errors: SE.CodedError[] | undefined;
     isLoading: boolean;
     onShipmentUpdated: (shipment: SE.SalesOrderShipment) => Promise<void>;

package/src/elements/purchase-label/hooks/use-pending-shipment.d.ts

@@ -1,12 +1,13 @@
-import { SE } from "@shipengine/alchemy";
+import { CodedError, SE } from "@shipengine/alchemy";
 export type UsePendingShipmentProps = {
+    breakOnCancelledShipment?: boolean;
     onLoad?: (salesOrder: SE.SalesOrder, shipments: SE.SalesOrderShipment[], pendingShipment?: SE.SalesOrderShipment) => Promise<void> | void;
     salesOrder?: SE.SalesOrder;
     warehouseId?: string;
 };
-export declare const usePendingShipment: ({ onLoad, salesOrder, warehouseId, }: UsePendingShipmentProps) => {
+export declare const usePendingShipment: ({ breakOnCancelledShipment, onLoad, salesOrder, warehouseId, }: UsePendingShipmentProps) => {
     isPendingShipmentLoading: boolean;
     pendingShipment: SE.SalesOrderShipment | undefined;
-    pendingShipmentErrors: SE.CodedError[] | undefined;
+    pendingShipmentErrors: CodedError[] | undefined;
     reloadPendingShipment: () => Promise<SE.SalesOrderShipment | undefined>;
 };

package/src/elements/purchase-label/purchase-label.d.ts

@@ -705,17 +705,12 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                     invalidNameOrCompany: string;
                     parsingFailure: string;
                     incompleteLabelPurchaseRequirements: string;
+                    shipmentCancelled: string;
                     unableToLoad: {
                         accountSettings: string;
                         autoFundingSettings: string;
                         carrier: string;
                         carriers: string;
-                        /**
-                         * `onToggleAddressPreferenceDisclosure` is an async/sync callback function that will be invoked
-                         * each time the user toggles the `Address Preference` disclosure. This disclosure component
-                         * allows the user to select whether they would like to use the address they entered, or
-                         * the formatted address that we return after validation.
-                         */
                         label: string;
                         salesOrder: string;
                         shipment: string;
@@ -731,6 +726,7 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                     purchase: string;
                     rateInvalid: string;
                     security: string;
+                    shipmentStatus: string;
                     system: string;
                     unknown: string;
                     validation: string;
@@ -748,10 +744,7 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                     connectingCarriers: string;
                     data: string;
                     importingSalesOrder: string;
-                    label: string; /**
-                     * `warehouseId` is a string that represents a previously configured warehouse you would
-                     * like to use as the `Ship From Address` when purchasing a label.
-                     */
+                    label: string;
                     onboarding: string;
                     salesOrder: string;
                     shipment: string;
@@ -769,11 +762,34 @@ export declare const Element: ({ resources, ...props }: ElementProps & {
                     september: string;
                     october: string;
                     november: string;
+                    /**
+                     * # 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 = alchemy.createElement(Component, ErrorFallback, {
+                     *   css: { height: "100%", maxWidth: "800px", minWidth: "440px", width: "100%" },
+                     *   resources: { en },
+                     * });
+                     * ```
+                     *
+                     * <br />
+                     *
+                     * @see {@link PurchaseLabel.Element | The **Element** created to render `<PurchaseLabel />`}
+                     */
                     december: string;
                 };
                 packageCategories: {
-                    browseRates: string;
-                    myCustomPackages: string;
+                    customPackages: string;
                 };
                 packageCodes: {
                     package: string;

package/src/elements/view-shipment/view-shipment.d.ts

@@ -621,9 +621,17 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     invalidNameOrCompany: string;
                     parsingFailure: string;
                     incompleteLabelPurchaseRequirements: string;
+                    shipmentCancelled: string;
                     unableToLoad: {
                         accountSettings: string;
                         autoFundingSettings: string;
+                        /**
+                         * # View Shipment Element Props
+                         *
+                         * - These are the base props that will be passed into the `<ViewShipment />` element.
+                         *
+                         * @see {@link ViewShipment.Element | See the full type that `typeof Element` will return}
+                         */
                         carrier: string;
                         carriers: string;
                         label: string;
@@ -641,6 +649,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     purchase: string;
                     rateInvalid: string;
                     security: string;
+                    shipmentStatus: string;
                     system: string;
                     unknown: string;
                     validation: string;
@@ -679,8 +688,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     december: string;
                 };
                 packageCategories: {
-                    browseRates: string;
-                    myCustomPackages: string;
+                    customPackages: string;
                 };
                 packageCodes: {
                     package: string;

package/src/elements/void-label/void-label.d.ts

@@ -624,6 +624,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     invalidNameOrCompany: string;
                     parsingFailure: string;
                     incompleteLabelPurchaseRequirements: string;
+                    shipmentCancelled: string;
                     unableToLoad: {
                         accountSettings: string;
                         autoFundingSettings: string;
@@ -644,6 +645,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     purchase: string;
                     rateInvalid: string;
                     security: string;
+                    shipmentStatus: string;
                     system: string;
                     unknown: string;
                     validation: string;
@@ -682,8 +684,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     december: string;
                 };
                 packageCategories: {
-                    browseRates: string;
-                    myCustomPackages: string;
+                    customPackages: string;
                 };
                 packageCodes: {
                     package: string;

package/src/locales/en/index.d.ts

@@ -496,6 +496,7 @@ declare const _default: {
             invalidNameOrCompany: string;
             parsingFailure: string;
             incompleteLabelPurchaseRequirements: string;
+            shipmentCancelled: string;
             unableToLoad: {
                 accountSettings: string;
                 autoFundingSettings: string;
@@ -516,6 +517,7 @@ declare const _default: {
             purchase: string;
             rateInvalid: string;
             security: string;
+            shipmentStatus: string;
             system: string;
             unknown: string;
             validation: string;
@@ -554,8 +556,7 @@ declare const _default: {
             december: string;
         };
         packageCategories: {
-            browseRates: string;
-            myCustomPackages: string;
+            customPackages: string;
         };
         packageCodes: {
             package: string;

package/src/utilities/feature-flags.d.ts

@@ -51,6 +51,15 @@ export declare const featureFlags: {
          * Elements.
          */
         readonly compatibleCountryCodes: readonly ["AU", "CA", "FR", "DE", "GB", "IL", "IT", "NO", "ES", "SE", "US"];
+        /**
+         * `configureShipment` is a group of flags related to the useConfigureShipment functionality
+         */
+        readonly configureShipment: {
+            /**
+             * `enableErrorWhenShipmentCancelled` when enabled will modify the default behavior of creating a new shipment for a salesorder to throwing an error
+             */
+            readonly enableErrorWhenShipmentCancelled: false;
+        };
         /**
          * @internal
          *

package/src/utilities/shipengine/shipment.d.ts

@@ -18,8 +18,24 @@ export declare const getIsCustomsRequiredForShipment: ({ shipFrom, shipTo }: SE.
 /**
  * @internal
  *
+ * @deprecated please use getShipmentByStatus instead
  * # Shipment Utilities - getPendingShipment
  *
  * @category Utilities
  */
 export declare const getPendingShipment: (shipments?: SE.SalesOrderShipment[]) => SE.SalesOrderShipment | undefined;
+/**
+ *
+ * @deprecated please use getShipmentByStatus instead
+ * @internal
+ * @param shipments
+ * @returns the latest created shipment whose status is `cancelled`
+ */
+export declare const getCancelledShipment: (shipments?: SE.SalesOrderShipment[]) => SE.SalesOrderShipment | undefined;
+/**
+ *
+ * @param status string containing one of the following values - "pending", "processing", "label_purchased", "cancelled"
+ * @param shipments optional list of shipments to filter from
+ * @returns latest created shipment whose shipmentStatus matches the param status
+ */
+export declare const getShipmentByStatus: (status: SE.ShipmentStatus, shipments?: SE.SalesOrderShipment[]) => SE.SalesOrderShipment | undefined;