@shipengine/elements 0.37.1 → 0.37.3

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, 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;
 
@@ -12800,7 +12827,7 @@ const CustomsItemForm = ({
   }));
   const formInterface = jsxs("section", Object.assign({
     css: theme => ({
-      backgroundColor: theme.palette.gray.megaLight,
+      backgroundColor: theme.palette.gray.ultraLight,
       padding: theme.spacing(2)
     })
   }, {
@@ -14603,22 +14630,21 @@ const rateSchema = z.object({
 const RateForm = ({
   carriers,
   disabled,
-  errors,
   displayableRateErrors,
-  displayableLabelErrors,
+  errors,
   features,
+  isLoading,
   labelErrors,
   labels,
   labelsLoading,
-  isLoading,
   onSave,
   onSelectRate,
   onSubmit,
-  rates,
-  preferredRates,
-  shipment,
   outOfBandDisplayableErrors,
-  preferredServiceCodes
+  preferredRates,
+  preferredServiceCodes,
+  rates,
+  shipment
 }) => {
   var _a, _b, _c, _d, _e, _f;
   features = Object.assign({
@@ -14632,7 +14658,6 @@ const RateForm = ({
       saveRate: true
     }
   }, features !== null && features !== void 0 ? features : {});
-  const allDisplayableErrors = [...(displayableRateErrors !== null && displayableRateErrors !== void 0 ? displayableRateErrors : []), ...(outOfBandDisplayableErrors !== null && outOfBandDisplayableErrors !== void 0 ? outOfBandDisplayableErrors : [])];
   const {
     t
   } = useTranslation();
@@ -14730,6 +14755,22 @@ const RateForm = ({
     const preferredRate = preferredRates === null || preferredRates === void 0 ? void 0 : preferredRates.find(r => r.rate.rateId === (selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.rateId));
     return !!preferredRate;
   }, [preferredRates, selectedRate]);
+  const displayableErrors = useMemo(() => {
+    const rateAndShipmentErrors = [...(displayableRateErrors !== null && displayableRateErrors !== void 0 ? displayableRateErrors : []), ...(outOfBandDisplayableErrors !== null && outOfBandDisplayableErrors !== void 0 ? outOfBandDisplayableErrors : [])];
+    if (rateAndShipmentErrors.length && rateOptions.length === 0) {
+      return {
+        messages: rateAndShipmentErrors,
+        title: "errorTypes.rateInvalid"
+      };
+    }
+    if (labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length) {
+      return {
+        messages: labelErrors,
+        title: "errorTypes.purchase"
+      };
+    }
+    return undefined;
+  }, [rateOptions, labelErrors, displayableRateErrors, outOfBandDisplayableErrors]);
   return jsxs("form", Object.assign({
     id: "rate-form",
     onSubmit: handleSubmit,
@@ -14774,7 +14815,7 @@ const RateForm = ({
             children: showHiddenRates ? t("purchase-label:actions.showFewerRates") : t("purchase-label:actions.showMoreRates")
           }))
         }))]
-      }) : !isLoading && !!allDisplayableErrors.length ? null : jsxs("article", Object.assign({
+      }) : !isLoading && !!displayableErrors ? null : jsxs("article", Object.assign({
         css: styles$3.ratesInterstitial,
         role: "presentation"
       }, {
@@ -14783,13 +14824,11 @@ const RateForm = ({
         }), jsx(Spacer, {}), isLoading ? t("purchase-label:loading.calculatingRates") : t("purchase-label:cta.addPackageDetails")]
       })), jsx(Spacer, {
         multiplier: 2
-      }), !isLoading && (!!allDisplayableErrors.length && rateOptions.length === 0 || !!(labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length)) && jsx(InlineNotification, Object.assign({
-        title: t("errorTypes.rateInvalid"),
+      }), !isLoading && !!displayableErrors && jsx(InlineNotification, Object.assign({
+        title: t(displayableErrors.title),
         type: NotificationType.ERROR
       }, {
-        children: jsxs(Fragment, {
-          children: [displayableRateErrors, outOfBandDisplayableErrors, displayableLabelErrors]
-        })
+        children: displayableErrors.messages
       }))]
     })), ((_d = features === null || features === void 0 ? void 0 : features.rateForm) === null || _d === void 0 ? void 0 : _d.labelLayout) && !labelsLoading && !(labels === null || labels === void 0 ? void 0 : labels.length) && jsx(Section, Object.assign({
       title: t("manage-defaults:label.title")
@@ -14958,21 +14997,37 @@ const styles$1 = createStyles({
     padding: `${theme.spacing(1)}px ${theme.spacing(2)}px 0 ${theme.spacing(1)}px`,
     width: theme.spacing(5)
   }),
+  header: theme => ({
+    "& > tr > th": {
+      "&:after": {
+        borderBottom: "none"
+      }
+    }
+  }),
+  headerActions: theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
+    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px 0 ${theme.spacing(1)}px`,
+    width: theme.spacing(5)
+  }),
   headerDescription: theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
     overflow: "visible",
     padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`
   }),
   headerEach: theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
     padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px 0`,
     textAlign: "right",
     width: theme.spacing(10)
   }),
   headerQty: theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
     padding: theme.spacing(1),
     textAlign: "right",
     width: theme.spacing(5)
   }),
   headerTotal: theme => ({
+    backgroundColor: theme.palette.gray.ultraLight,
     padding: `${theme.spacing(1)}px 0 ${theme.spacing(1)}px ${theme.spacing(1)}px`,
     textAlign: "right",
     width: theme.spacing(10)
@@ -14994,7 +15049,7 @@ const styles$1 = createStyles({
   itemQty: theme => ({
     overflow: "visible",
     padding: `${theme.spacing(1)}px ${theme.spacing(1)}px 0`,
-    textAlign: "center",
+    textAlign: "right",
     width: theme.spacing(5)
   }),
   itemTotal: theme => ({
@@ -15002,6 +15057,14 @@ const styles$1 = createStyles({
     padding: `${theme.spacing(1)}px 0 0 ${theme.spacing(1)}px`,
     textAlign: "right",
     width: theme.spacing(10)
+  }),
+  subtitle: () => ({
+    letterSpacing: "0.01em"
+  }),
+  table: () => ({
+    border: "1px solid #d4e4e8",
+    borderRadius: "0",
+    boxShadow: "none"
   })
 });
 
@@ -15112,12 +15175,15 @@ const CustomsItemsDisplay = ({
       }))]
     })), customsItems.length > 0 && jsxs(Fragment, {
       children: [jsx(Spacer, {}), jsx(Table, Object.assign({
-        header: jsx(TableHeader, {
+        header: jsx(TableHeader, Object.assign({
+          css: styles$1.header
+        }, {
           children: jsxs(TableBaseRow, {
             children: [jsx(TableHeaderCell, Object.assign({
               css: styles$1.headerDescription
             }, {
               children: jsx(Typography, Object.assign({
+                css: styles$1.subtitle,
                 variant: "subtitle2"
               }, {
                 children: t("customs.fields.description")
@@ -15126,6 +15192,7 @@ const CustomsItemsDisplay = ({
               css: styles$1.headerEach
             }, {
               children: jsx(Typography, Object.assign({
+                css: styles$1.subtitle,
                 variant: "subtitle2"
               }, {
                 children: t("customs.each", {
@@ -15136,6 +15203,7 @@ const CustomsItemsDisplay = ({
               css: styles$1.headerQty
             }, {
               children: jsx(Typography, Object.assign({
+                css: styles$1.subtitle,
                 variant: "subtitle2"
               }, {
                 children: t("customs.fields.quantity")
@@ -15144,6 +15212,7 @@ const CustomsItemsDisplay = ({
               css: styles$1.headerTotal
             }, {
               children: jsx(Typography, Object.assign({
+                css: styles$1.subtitle,
                 variant: "subtitle2"
               }, {
                 children: t("customs.total", {
@@ -15151,10 +15220,11 @@ const CustomsItemsDisplay = ({
                 })
               }))
             })), jsx(TableHeaderCell, {
-              css: styles$1.actionsColumn
+              css: styles$1.headerActions
             })]
           })
-        })
+        })),
+        outerWrapperStyles: styles$1.table
       }, {
         children: jsx(TableBody, {
           children: customsItems.map(item => jsxs(Fragment$1, {
@@ -16787,6 +16857,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",
@@ -16807,6 +16878,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"
@@ -16865,7 +16937,7 @@ var common = {
 		invalidAddressNameStrict: "Recipient Name must have two characters in First and Last Name.",
 		invalidAddressPoBox: "A physical address is required for wallet registration. You can add a PO Box as a Ship From address.",
 		invalidCreditCardType: "Card type must be Visa, Mastercard, American Express, or Discover",
-		invalidExpiration: "Invalid Expiration Date",
+		invalidExpirationDate: "Invalid Expiration Date",
 		invalidPostalCode: "Invalid Postal Code",
 		invalidStateProvince: "Invalid State",
 		invalidString: "{{fieldLabel}} is invalid",
@@ -17901,12 +17973,12 @@ const useRequestRates = ({
     getPreferredRates
   });
   const requestRates = useCallback((shipment, isInternational) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b;
-    const internationalCarrierIds = (_a = carriers === null || carriers === void 0 ? void 0 : carriers.map(c => c.carrierId)) !== null && _a !== void 0 ? _a : [];
-    const domesticCarrierIds = (_b = carriers === null || carriers === void 0 ? void 0 : carriers.filter(c => !["dhl"].includes(c.carrierCode)).map(c => c.carrierId)) !== null && _b !== void 0 ? _b : [];
+    var _a;
+    // filter out DHL for domestic shipments
+    const carrierIds = (_a = carriers === null || carriers === void 0 ? void 0 : carriers.filter(c => isInternational || !c.carrierCode.includes("dhl")).map(c => c.carrierId)) !== null && _a !== void 0 ? _a : [];
     const standardRatesResponse = yield calculateRates({
       rateOptions: {
-        carrierIds: shipment.carrierId ? [shipment.carrierId] : isInternational ? internationalCarrierIds : domesticCarrierIds,
+        carrierIds: shipment.carrierId ? [shipment.carrierId] : carrierIds,
         packageTypes: (customPackageTypes === null || customPackageTypes === void 0 ? void 0 : customPackageTypes.find(p => p.packageId === shipment.packages[0].packageId)) ? ["package"] // Only specify package types for non-custom packages
         : shipment.packages.map(pkg => pkg.packageCode),
         serviceCodes: shipment.serviceCode ? [shipment.serviceCode] : undefined
@@ -18204,11 +18276,10 @@ const useRatesForm = ({
   });
   return {
     carriers,
-    displayableLabelErrors,
     displayableRateErrors,
     errors: errors.length > 0 ? errors : undefined,
     isLoading: ratesCalculating,
-    labelErrors: (labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length) ? labelErrors : undefined,
+    labelErrors: displayableLabelErrors,
     labels,
     labelsLoading,
     onSave: handleSave,
@@ -18326,7 +18397,9 @@ const useShipmentForm = ({
 };
 
 const ConfigureShipment = _a => {
+  var _b;
   var {
+      errors,
       features,
       getPreferredRates,
       onAddressValidation,
@@ -18344,12 +18417,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,
@@ -18370,17 +18444,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,
@@ -18393,8 +18467,8 @@ const ConfigureShipment = _a => {
     {
       charsetWarning,
       resetSalesOrderShipment
-    } = _c,
-    shipmentFormProps = __rest(_c, ["charsetWarning", "resetSalesOrderShipment"]);
+    } = _d,
+    shipmentFormProps = __rest(_d, ["charsetWarning", "resetSalesOrderShipment"]);
   const handleOnDirty = useCallback(() => {
     resetRates();
     resetLabel();
@@ -18414,6 +18488,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,
@@ -18432,6 +18509,7 @@ const ConfigureShipment = _a => {
 };
 
 const usePendingShipment = ({
+  breakOnCancelledShipment: _breakOnCancelledShipment = false,
   onLoad,
   salesOrder,
   warehouseId
@@ -18455,17 +18533,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)
@@ -18481,14 +18560,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,
@@ -18499,6 +18582,7 @@ const usePendingShipment = ({
 
 const useConfigureShipment = ({
   onLoad,
+  errorWhenShipmentCancelled: _errorWhenShipmentCancelled = false,
   onShipmentUpdated,
   salesOrder,
   warehouseId,
@@ -18511,6 +18595,7 @@ const useConfigureShipment = ({
     pendingShipmentErrors,
     reloadPendingShipment
   } = usePendingShipment({
+    breakOnCancelledShipment: _errorWhenShipmentCancelled,
     onLoad,
     salesOrder,
     warehouseId
@@ -18587,6 +18672,7 @@ const useImportSalesOrder = ({
 };
 
 const PurchaseLabelBySalesOrder = _a => {
+  var _b;
   var {
       features,
       externalOrderId,
@@ -18599,7 +18685,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,
@@ -18608,9 +18694,10 @@ 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,
@@ -18751,7 +18838,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));
   }
@@ -19303,4 +19392,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.1",
+  "version": "0.37.3",
   "peerDependencies": {
     "@packlink/giger": "*",
     "react-i18next": "*",

package/src/components/templates/customs-items-display/customs-items-display.styles.d.ts

@@ -12,21 +12,37 @@ export declare const styles: {
         padding: string;
         width: number;
     };
+    header: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
+        "& > tr > th": {
+            "&:after": {
+                borderBottom: string;
+            };
+        };
+    };
+    headerActions: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
+        backgroundColor: string;
+        padding: string;
+        width: number;
+    };
     headerDescription: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
+        backgroundColor: string;
         overflow: "visible";
         padding: string;
     };
     headerEach: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
+        backgroundColor: string;
         padding: string;
         textAlign: "right";
         width: number;
     };
     headerQty: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
+        backgroundColor: string;
         padding: number;
         textAlign: "right";
         width: number;
     };
     headerTotal: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
+        backgroundColor: string;
         padding: string;
         textAlign: "right";
         width: number;
@@ -48,7 +64,7 @@ export declare const styles: {
     itemQty: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
         overflow: "visible";
         padding: string;
-        textAlign: "center";
+        textAlign: "right";
         width: number;
     };
     itemTotal: (theme: import("@packlink/giger-theme/dist/lib/Theme").Theme) => {
@@ -57,4 +73,12 @@ export declare const styles: {
         textAlign: "right";
         width: number;
     };
+    subtitle: () => {
+        letterSpacing: string;
+    };
+    table: () => {
+        border: string;
+        borderRadius: string;
+        boxShadow: "none";
+    };
 };

package/src/components/templates/rate-form/rate-form.d.ts

@@ -3,12 +3,11 @@ import { ConfigureShipmentFeatures, PreferredRatesResponse } from "../../../elem
 export type RateFormProps = {
     carriers?: SE.Carrier[];
     disabled?: boolean;
-    displayableLabelErrors?: string[];
     displayableRateErrors?: string[];
     errors?: SE.CodedError[];
     features?: ConfigureShipmentFeatures;
     isLoading?: boolean;
-    labelErrors?: SE.CodedError[];
+    labelErrors?: string[];
     labels?: SE.Label[];
     labelsLoading?: boolean;
     onSave?: (rate: Pick<SE.Rate, "carrierId" | "serviceCode">) => Promise<void> | void;
@@ -20,4 +19,4 @@ export type RateFormProps = {
     rates?: SE.Rate[];
     shipment?: SE.SalesOrderShipment;
 };
-export declare const RateForm: ({ carriers, disabled, errors, displayableRateErrors, displayableLabelErrors, features, labelErrors, labels, labelsLoading, isLoading, onSave, onSelectRate, onSubmit, rates, preferredRates, shipment, outOfBandDisplayableErrors, preferredServiceCodes, }: RateFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const RateForm: ({ carriers, disabled, displayableRateErrors, errors, features, isLoading, labelErrors, labels, labelsLoading, onSave, onSelectRate, onSubmit, outOfBandDisplayableErrors, preferredRates, preferredServiceCodes, rates, shipment, }: RateFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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;
@@ -702,7 +704,7 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     invalidAddressNameStrict: string;
                     invalidAddressPoBox: string;
                     invalidCreditCardType: string;
-                    invalidExpiration: string;
+                    invalidExpirationDate: string;
                     invalidPostalCode: string;
                     invalidStateProvince: string;
                     invalidString: 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;
     };
@@ -58,4 +61,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/configure-shipment/hooks/use-rates-form.d.ts

@@ -5,7 +5,7 @@ export type UseRatesFormProps = {
     onBeforeLabelCreate?: (rate: SE.Rate, shipment: SE.SalesOrderShipment) => Promise<void> | Promise<{
         error?: SE.CodedError;
         rate?: SE.Rate;
-    }> | void;
+    } | undefined> | void;
     onBeforeRateSaved?: (carrierId: string, serviceCode: string) => Promise<void> | Promise<{
         data?: {
             carrierId: string;
@@ -23,11 +23,10 @@ export type UseRatesFormProps = {
 };
 export declare const useRatesForm: ({ getPreferredRates, onBeforeRateSaved, onBeforeLabelCreate, onLabelCreateFailure, onLabelCreateSuccess, onRateSaved, onRatesCalculated, onShipmentUpdated, printLabelLayout, shipment, }: UseRatesFormProps) => {
     carriers: SE.Carrier[] | undefined;
-    displayableLabelErrors: string[] | undefined;
     displayableRateErrors: string[] | undefined;
     errors: SE.CodedError[] | undefined;
     isLoading: boolean;
-    labelErrors: SE.CodedError[] | undefined;
+    labelErrors: string[] | undefined;
     labels: SE.Label[] | undefined;
     labelsLoading: boolean;
     onSave: ({ carrierId, serviceCode }: Pick<SE.Rate, "carrierId" | "serviceCode">) => Promise<void>;