@shipengine/elements 2.22.0 → 2.23.0

package/esm/components/grid-filters/components/label-status-filter/label-status-filter.styles.js

@@ -0,0 +1,17 @@
+import { createStyles, scopeTheme } from '../../../../utilities/styles.js';
+
+const styles = createStyles({
+  buttons: theme => ({
+    display: "flex",
+    gap: scopeTheme(theme).spacing(),
+    justifyContent: "end",
+    paddingTop: scopeTheme(theme).spacing(2)
+  }),
+  radioGroup: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: scopeTheme(theme).spacing(0.5)
+  })
+});
+
+export { styles };

package/esm/components/grid-filters/components/tracking-status-filter/tracking-status-filter.js

@@ -25,7 +25,7 @@ const TrackingStatusFilter = ({
   filters,
   onFiltersUpdated
 }) => {
-  var _a;
+  var _a, _b, _c, _d;
   const {
     t
   } = useTranslation();
@@ -42,21 +42,24 @@ const TrackingStatusFilter = ({
     },
     resolver: validationResolver(trackingStatusFormSchema)
   });
-  const determineButtonText = useCallback(filters => {
-    if (filters.length === 0) {
-      return t("list-labels:headers.trackingStatus");
-    } else if (filters.length === 1) {
+  const determineButtonText = useCallback(statuses => {
+    var _a, _b, _c;
+    if (statuses.length === 0) {
+      return ((_a = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.nickname) || t("list-labels:headers.trackingStatus");
+    } else if (statuses.length === 1) {
       return t("common:grid.filteredTrackingStatus", {
-        filter: t(`list-labels:trackingStatus.${filters[0]}`)
+        filter: t(`list-labels:trackingStatus.${statuses[0]}`),
+        name: ((_b = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _b === void 0 ? void 0 : _b.nickname) || t("list-labels:headers.trackingStatus")
       });
     } else {
       return t("common:grid.filteredTrackingStatus", {
-        filter: t(`list-labels:trackingStatus.${filters[0]}`)
+        filter: t(`list-labels:trackingStatus.${statuses[0]}`),
+        name: ((_c = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _c === void 0 ? void 0 : _c.nickname) || t("list-labels:headers.trackingStatus")
       }) + t("common:grid.more", {
-        count: filters.length - 1
+        count: statuses.length - 1
       });
     }
-  }, [t]);
+  }, [t, (_a = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.nickname]);
   const getUpdatedKeys = useCallback(updatedFields => {
     return Object.keys(updatedFields).filter(key => updatedFields[key]);
   }, []);
@@ -76,9 +79,13 @@ const TrackingStatusFilter = ({
         unknown: filters.trackingStatus.value.includes("unknown")
       };
       form.reset(updatedFields);
-      setButtonText(determineButtonText(getUpdatedKeys(updatedFields)));
+      // Only set buttonText when filters are applied
+      const updatedKeys = getUpdatedKeys(updatedFields);
+      if (updatedKeys.length > 0) {
+        setButtonText(determineButtonText(updatedKeys));
+      }
     }
-  }, [determineButtonText, (_a = filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.value, form, getUpdatedKeys, t]);
+  }, [determineButtonText, (_b = filters.trackingStatus) === null || _b === void 0 ? void 0 : _b.value, form, getUpdatedKeys]);
   const onClearFilters = useCallback(() => {
     onFiltersUpdated(Object.assign(Object.assign({}, filters), {
       trackingStatus: Object.assign(Object.assign({}, filters.trackingStatus), {
@@ -111,8 +118,10 @@ const TrackingStatusFilter = ({
       ref: buttonRef,
       variant: ButtonVariant.TEXT
     }, {
-      children: [jsx("span", {
+      children: [isAnyCheckboxChecked ? jsx("span", {
         children: buttonText
+      }) : jsx("span", {
+        children: (_d = (_c = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _c === void 0 ? void 0 : _c.nickname) !== null && _d !== void 0 ? _d : t("list-labels:headers.trackingStatus")
       }), isAnyCheckboxChecked ?
       // Show Close Icon
       jsx(Icon, {

package/esm/components/grid-filters/grid-filters.js

@@ -5,6 +5,7 @@ import { ShipmentIdFilter } from './components/shipment-id-filter/shipment-id-fi
 import { LabelIdFilter } from './components/label-id-filter/label-id-filter.js';
 import { CreatedDateFilter } from './components/created-date-filter/created-date-filter.js';
 import { TrackingStatusFilter } from './components/tracking-status-filter/tracking-status-filter.js';
+import { LabelStatusFilter } from './components/label-status-filter/label-status-filter.js';
 
 /**
  * @internal
@@ -21,7 +22,7 @@ const GridFilters = ({
   filtersDisabled: _filtersDisabled = false,
   onClearAllFilters
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const {
     t
   } = useTranslation(["common"]);
@@ -53,6 +54,10 @@ const GridFilters = ({
       disabled: _filtersDisabled,
       filters: filters,
       onFiltersUpdated: onFiltersUpdated
+    }), ((_d = filters.status) === null || _d === void 0 ? void 0 : _d.enabled) && jsx(LabelStatusFilter, {
+      disabled: _filtersDisabled,
+      filters: filters,
+      onFiltersUpdated: onFiltersUpdated
     }), shouldShowClearAll && jsx(Button, Object.assign({
       disabled: _filtersDisabled,
       onClick: () => {

package/esm/elements/labels-grid/hooks/use-labels-grid.js

@@ -10,11 +10,12 @@ const useLabelsGrid = ({
   labelStatus,
   showShipmentIdFilter,
   showLabelIdFilter,
+  showStatusFilter,
   showTrackingStatusFilter,
   fetchShipments,
   sortDir
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const initialFilters = {
     labelId: {
       enabled: !!showLabelIdFilter,
@@ -24,6 +25,10 @@ const useLabelsGrid = ({
       enabled: !!showShipmentIdFilter,
       value: ""
     },
+    status: {
+      enabled: !!showStatusFilter,
+      value: ""
+    },
     trackingStatus: {
       enabled: !!showTrackingStatusFilter,
       value: []
@@ -80,13 +85,17 @@ const useLabelsGrid = ({
         enabled: !!showShipmentIdFilter,
         value: ""
       },
+      status: {
+        enabled: !!showStatusFilter,
+        value: ""
+      },
       trackingStatus: {
         enabled: !!showTrackingStatusFilter,
         value: []
       }
     };
     setFilters(updatedFilters);
-  }, [showLabelIdFilter, showShipmentIdFilter, showTrackingStatusFilter]);
+  }, [showLabelIdFilter, showShipmentIdFilter, showStatusFilter, showTrackingStatusFilter]);
   const isTrackingStatusFilterActive = useMemo(() => {
     var _a, _b;
     return !!(((_a = filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.enabled) && hasActiveFilterValue((_b = filters.trackingStatus) === null || _b === void 0 ? void 0 : _b.value));
@@ -101,11 +110,11 @@ const useLabelsGrid = ({
   } = useTrackingStatusFilter({
     currentPage: page,
     isActive: isTrackingStatusFilterActive,
-    labelStatus,
+    labelStatus: ((_c = filters.status) === null || _c === void 0 ? void 0 : _c.value) || labelStatus,
     pageSize,
-    shipmentId: ((_c = filters.shipmentId) === null || _c === void 0 ? void 0 : _c.value) || undefined,
+    shipmentId: ((_d = filters.shipmentId) === null || _d === void 0 ? void 0 : _d.value) || undefined,
     sortDir: sortDir !== null && sortDir !== void 0 ? sortDir : "desc",
-    trackingStatusFilters: ((_d = filters.trackingStatus) === null || _d === void 0 ? void 0 : _d.value) || []
+    trackingStatusFilters: ((_e = filters.trackingStatus) === null || _e === void 0 ? void 0 : _e.value) || []
   });
   // Use regular API pagination when tracking status filter is not active
   const {
@@ -115,7 +124,7 @@ const useLabelsGrid = ({
   } = useListLabels({
     enabled: !isTrackingStatusFilterActive,
     queryFnParams: {
-      labelStatus,
+      labelStatus: ((_f = filters.status) === null || _f === void 0 ? void 0 : _f.value) || labelStatus,
       page,
       pageSize,
       shipmentId: filters.shipmentId.value || undefined,
@@ -157,13 +166,13 @@ const useLabelsGrid = ({
     data: labelFilterData,
     isError: isLabelFilterError,
     isInitialLoading: isLabelFilterLoading
-  } = useGetLabel(((_e = filters.labelId) === null || _e === void 0 ? void 0 : _e.value) || undefined);
-  const isLabelFilterActive = (_f = filters.labelId) === null || _f === void 0 ? void 0 : _f.value;
+  } = useGetLabel(((_g = filters.labelId) === null || _g === void 0 ? void 0 : _g.value) || undefined);
+  const isLabelFilterActive = (_h = filters.labelId) === null || _h === void 0 ? void 0 : _h.value;
   const isStatusFilteredOut = (status, filter) => {
     return (filter === null || filter === void 0 ? void 0 : filter.length) && !filter.includes(status);
   };
   const getLabelById = labelById => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g;
     // Check if filter by label id is active and there are no errors
     if (isLabelFilterActive && !isLabelFilterError) {
       let labelPassFilters = true;
@@ -171,15 +180,19 @@ const useLabelsGrid = ({
       if (labelStatus && labelStatus !== (labelById === null || labelById === void 0 ? void 0 : labelById.status)) {
         labelPassFilters = false;
       }
+      // Check if status filter is active and if the label has the same status
+      if (((_a = filters === null || filters === void 0 ? void 0 : filters.status) === null || _a === void 0 ? void 0 : _a.enabled) && ((_b = filters === null || filters === void 0 ? void 0 : filters.status) === null || _b === void 0 ? void 0 : _b.value) && ((_c = filters === null || filters === void 0 ? void 0 : filters.status) === null || _c === void 0 ? void 0 : _c.value) !== (labelById === null || labelById === void 0 ? void 0 : labelById.status)) {
+        labelPassFilters = false;
+      }
       // Check if shipment filter has the same value if defined
-      if (((_a = filters === null || filters === void 0 ? void 0 : filters.shipmentId) === null || _a === void 0 ? void 0 : _a.value) !== "" && ((_b = filters === null || filters === void 0 ? void 0 : filters.shipmentId) === null || _b === void 0 ? void 0 : _b.value) !== (labelById === null || labelById === void 0 ? void 0 : labelById.shipmentId)) {
+      if (((_d = filters === null || filters === void 0 ? void 0 : filters.shipmentId) === null || _d === void 0 ? void 0 : _d.value) !== "" && ((_e = filters === null || filters === void 0 ? void 0 : filters.shipmentId) === null || _e === void 0 ? void 0 : _e.value) !== (labelById === null || labelById === void 0 ? void 0 : labelById.shipmentId)) {
         labelPassFilters = false;
       }
       if (
       // If Label status is voided and voided status is filtered out, don't show the label
-      (labelById === null || labelById === void 0 ? void 0 : labelById.status) === "voided" && isStatusFilteredOut("voided", (_c = filters.trackingStatus) === null || _c === void 0 ? void 0 : _c.value) ||
+      (labelById === null || labelById === void 0 ? void 0 : labelById.status) === "voided" && isStatusFilteredOut("voided", (_f = filters.trackingStatus) === null || _f === void 0 ? void 0 : _f.value) ||
       //  If Label status is not voided and tracking status is filtered out, don't show the label
-      (labelById === null || labelById === void 0 ? void 0 : labelById.status) !== "voided" && (labelById === null || labelById === void 0 ? void 0 : labelById.trackingStatus) && isStatusFilteredOut(labelById.trackingStatus, (_d = filters.trackingStatus) === null || _d === void 0 ? void 0 : _d.value)) {
+      (labelById === null || labelById === void 0 ? void 0 : labelById.status) !== "voided" && (labelById === null || labelById === void 0 ? void 0 : labelById.trackingStatus) && isStatusFilteredOut(labelById.trackingStatus, (_g = filters.trackingStatus) === null || _g === void 0 ? void 0 : _g.value)) {
         labelPassFilters = false;
       }
       return labelPassFilters ? labelById : undefined;

package/esm/elements/labels-grid/labels-grid.js

@@ -31,7 +31,7 @@ const Component = ({
   onClickExternalShipmentId,
   onClickShipmentNumber
 }) => {
-  var _a, _b;
+  var _a, _b, _c;
   const {
     t
   } = useTranslation(["common", "list-labels"]);
@@ -65,8 +65,13 @@ const Component = ({
     var _a;
     return (_a = features === null || features === void 0 ? void 0 : features.columns) === null || _a === void 0 ? void 0 : _a.find(c => c.name === "shipmentNumber");
   }, [features]);
+  const statusColumn = useMemo(() => {
+    var _a;
+    return (_a = features === null || features === void 0 ? void 0 : features.columns) === null || _a === void 0 ? void 0 : _a.find(c => c.name === "status");
+  }, [features]);
   const showLabelIdFilter = labelIdColumn && ((_a = labelIdColumn.allowFilter) !== null && _a !== void 0 ? _a : true);
   const showShipmentIdFilter = shipmentIdColumn && ((_b = shipmentIdColumn.allowFilter) !== null && _b !== void 0 ? _b : true);
+  const showStatusFilter = statusColumn && ((_c = statusColumn.allowFilter) !== null && _c !== void 0 ? _c : true);
   const showTrackingStatusFilter = trackingStatusColumn && !!trackingStatusColumn.allowFilter;
   const {
     labels,
@@ -86,6 +91,7 @@ const Component = ({
     labelStatus,
     showLabelIdFilter,
     showShipmentIdFilter,
+    showStatusFilter,
     showTrackingStatusFilter,
     sortDir: sortState.dir
   });
@@ -103,11 +109,14 @@ const Component = ({
       shipmentId: Object.assign(Object.assign({}, filters.shipmentId), {
         nickname: shipmentIdColumn === null || shipmentIdColumn === void 0 ? void 0 : shipmentIdColumn.nickname
       }),
+      status: Object.assign(Object.assign({}, filters.status), {
+        nickname: statusColumn === null || statusColumn === void 0 ? void 0 : statusColumn.nickname
+      }),
       trackingStatus: Object.assign(Object.assign({}, filters.trackingStatus), {
         nickname: trackingStatusColumn === null || trackingStatusColumn === void 0 ? void 0 : trackingStatusColumn.nickname
       })
     };
-  }, [filters, labelIdColumn, shipmentIdColumn, trackingStatusColumn]);
+  }, [filters, labelIdColumn, shipmentIdColumn, statusColumn, trackingStatusColumn]);
   const toggleCreatedDateSort = useCallback(() => {
     toggleSort("created_at");
   }, [toggleSort]);

package/esm/elements/purchase-label/components/customs-forms/customs-forms.js

@@ -1,10 +1,11 @@
 import { __awaiter } from 'tslib';
 import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
 import isEqual from 'lodash/isEqual.js';
-import { useCallback } from 'react';
+import { useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { InlineNotification, NotificationType } from '@shipengine/giger';
 import { WindsorFramework } from './windsor-framework/windsor-framework.js';
+import { moveCustomsItemsToProducts } from '../../../../utilities/shipengine/shipment.js';
 import { useCustomsContentsOptions } from '../../hooks/use-customs-contents-options.js';
 import { useCustomsNonDeliveryOptions } from '../../hooks/use-customs-non-delivery-options.js';
 import { ProductsDisplay } from './products-display/products-display.js';
@@ -29,6 +30,12 @@ const CustomsForms = ({
   const {
     t
   } = useTranslation(["purchase-label", "common"]);
+  // Convert deprecated customs items to the products format
+  const formattedShipment = useMemo(() => {
+    var _a, _b, _c, _d;
+    const hasDeprecatedCustomsItems = !!((_b = (_a = shipment.customs) === null || _a === void 0 ? void 0 : _a.customsItems) === null || _b === void 0 ? void 0 : _b.length) && !((_d = (_c = shipment.packages) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.products);
+    return hasDeprecatedCustomsItems ? moveCustomsItemsToProducts(shipment) : shipment;
+  }, [shipment]);
   const {
     errors: {
       packages: packageErrors
@@ -131,11 +138,11 @@ const CustomsForms = ({
       currency: currency,
       harmonizedTariffCodes: harmonizedTariffCodes,
       onUpdate: handleUpdateProducts,
-      shipment: shipment
+      shipment: formattedShipment
     }), jsx(TaxIds, {
       onDirty: onDirty,
       onUpdateTaxableIds: onUpdateTaxableIds,
-      shipment: shipment
+      shipment: formattedShipment
     })]
   }));
 };

package/esm/elements/purchase-label/components/rate-form/rate-view.js

@@ -219,16 +219,11 @@ const RateView = ({
       }))]
     })]
   });
-  if (errors) return jsx("article", Object.assign({
-    css: styles.ratesInterstitial,
-    role: "presentation"
+  if (errors) return jsx(InlineNotification, Object.assign({
+    title: t(errors.title),
+    type: NotificationType.ERROR
   }, {
-    children: jsx(InlineNotification, Object.assign({
-      title: t(errors.title),
-      type: NotificationType.ERROR
-    }, {
-      children: errors === null || errors === void 0 ? void 0 : errors.messages
-    }))
+    children: errors === null || errors === void 0 ? void 0 : errors.messages
   }));
   return jsxs("article", Object.assign({
     css: styles.ratesInterstitial,

package/esm/elements/purchase-label/components/shipment-form/shipment-form.js

@@ -866,7 +866,13 @@ const ShipmentForm = ({
         label: t("purchase-label:fields.packageCode"),
         name: "packages.0.type",
         onCategoryChange: value => {
-          form.setValue("carrierId", value);
+          // Set carrierId to value if:
+          // 1. value exists (carrier-specific package) - set to that carrier
+          // 2. in browse_rates mode (even for custom packages) - could be set to undefined
+          // Otherwise (custom package in select_service mode) - keep existing carrierId
+          if (value || form.getValues("__mode") === "browse_rates") {
+            form.setValue("carrierId", value);
+          }
           // we have deviated from preset so we need to clear it in order to keep required dims and weight fields in sync
           setSelectedPreset(undefined);
         },
@@ -953,17 +959,17 @@ const ShipmentForm = ({
             })
           })), hasUpsOptions && jsx(Switch, {
             defaultChecked: ((_k = shipment === null || shipment === void 0 ? void 0 : shipment.advancedOptions) === null || _k === void 0 ? void 0 : _k.additionalHandling) || false,
-            label: jsx(Trans, {
+            label: (features === null || features === void 0 ? void 0 : features.additionalHandlingHref) ? jsx(Trans, {
               components: {
                 Link: jsx(Link, {
-                  href: "https://help.paypal.shipstation.com/hc/en-us/articles/13823149193755-UPS-Additional-Handling",
+                  href: features === null || features === void 0 ? void 0 : features.additionalHandlingHref,
                   rel: "noopener noreferrer",
                   target: "_blank"
                 })
               },
-              i18nKey: "purchase-label:fields.requires-additional-handling",
+              i18nKey: "purchase-label:fields.requires-additional-handling-link",
               t: t
-            }),
+            }) : t("purchase-label:fields.requires-additional-handling"),
             name: "advancedOptions.additionalHandling",
             onChange: e => form.setValue("advancedOptions.additionalHandling", e.target.checked, {
               shouldDirty: true

package/esm/elements/purchase-label/configure-shipment.js

@@ -138,7 +138,9 @@ const ConfigureShipment = _a => {
     }
   });
   // Capture ship from address schema validation error to toggle form and display error message
-  const hasShipFromAddressErrors = useMemo(() => !!(shipmentFormErrors === null || shipmentFormErrors === void 0 ? void 0 : shipmentFormErrors.filter(error => error.errorCode === "invalid_address")), [shipmentFormErrors]);
+  const hasShipFromAddressErrors = useMemo(() => {
+    return (shipmentFormErrors === null || shipmentFormErrors === void 0 ? void 0 : shipmentFormErrors.some(error => error.errorCode === "invalid_address")) || false;
+  }, [shipmentFormErrors]);
   return jsxs(Fragment, {
     children: [jsx(ShipmentForm, Object.assign({}, shipmentFormProps, props, ((_c = features === null || features === void 0 ? void 0 : features.shipmentForm) === null || _c === void 0 ? void 0 : _c.useWarehouses) && {
       warehouses

package/esm/elements/purchase-label/hooks/use-rates-form.js

@@ -57,7 +57,7 @@ const useRatesForm = ({
     mutateAsync: updateShipment
   } = useUpdateSalesOrderShipment();
   const {
-    error: labelErrors,
+    error: createLabelErrors,
     reset: resetLabel,
     mutateAsync: createLabel
   } = useCreateLabel();
@@ -180,7 +180,7 @@ const useRatesForm = ({
     }
   }), [onBeforeRateSaved, onUpdatedShipment, resetRates, shipment, updateShipment]);
   const handleSubmit = useCallback((rateId, servicePoint) => __awaiter(void 0, void 0, void 0, function* () {
-    var _g, _h, _j;
+    var _g, _h, _j, _k;
     setBeforeCreateError(undefined);
     if (!shipment) return;
     const preferredRates = preferredRatesResponse === null || preferredRatesResponse === void 0 ? void 0 : preferredRatesResponse.map(r => r.rate);
@@ -188,17 +188,35 @@ const useRatesForm = ({
     if (rate) {
       try {
         const beforePurchaseResponse = yield onBeforeLabelCreate === null || onBeforeLabelCreate === void 0 ? void 0 : onBeforeLabelCreate(rate, shipment);
-        if (!beforePurchaseResponse || Object.keys(beforePurchaseResponse).length === 0) {
-          yield purchaseLabel(rateId, shipment, rate, servicePoint);
-          return;
-        }
-        // The user has selected a house rate that requires some type of set up to happen before purchase.
-        // For white label this would be a user has selected a house account UPS ground saver rate and needs to register and
-        // re-rate their shipment to get a real rate. If its successful, we'll purchase a label with the new rate.
-        if (beforePurchaseResponse.error) {
+        // If the callback has returned an error, abort label purchase
+        if (beforePurchaseResponse === null || beforePurchaseResponse === void 0 ? void 0 : beforePurchaseResponse.error) {
           resetRates();
           throw new Error(beforePurchaseResponse.error.message);
-        } else if (beforePurchaseResponse.rate && !beforePurchaseResponse.error) {
+        }
+        let updatedShipment;
+        if (beforePurchaseResponse === null || beforePurchaseResponse === void 0 ? void 0 : beforePurchaseResponse.labelMessages) {
+          // The callback has returned custom label messages to be added to the shipment.
+          // Merge those messages in with the shipment
+          updatedShipment = Object.assign(Object.assign({}, shipment), {
+            packages: (_h = shipment.packages) === null || _h === void 0 ? void 0 : _h.map(pkg => Object.assign(Object.assign({}, pkg), {
+              labelMessages: beforePurchaseResponse.labelMessages
+            }))
+          });
+        }
+        if (updatedShipment) {
+          // The shipment needs to be updated before purchase
+          try {
+            yield updateShipment(Object.assign(Object.assign({}, updatedShipment), {
+              shipDate: isNowOrInTheFuture(updatedShipment.shipDate) ? updatedShipment.shipDate : undefined
+            }));
+          } catch (_l) {
+            throw new Error("Unable to update shipment before creating label.");
+          }
+        }
+        if (beforePurchaseResponse === null || beforePurchaseResponse === void 0 ? void 0 : beforePurchaseResponse.rate) {
+          // The user has selected a house rate that requires some type of set up to happen before purchase.
+          // For white label this would be a user has selected a house account UPS ground saver rate and needs to register and
+          // re-rate their shipment to get a real rate. If its successful, we'll purchase a label with the new rate.
           const _rate = beforePurchaseResponse.rate;
           const totalRateAmount = getTotalRateAmount(_rate);
           if (!fundingOrigin) throw new Error("Unable to find balance");
@@ -209,24 +227,27 @@ const useRatesForm = ({
             });
             throw new Error("Insufficient funds. Please add funds before purchasing and try again.");
           } else {
-            yield purchaseLabel(_rate.rateId, shipment, _rate, servicePoint);
+            yield purchaseLabel(_rate.rateId, updatedShipment !== null && updatedShipment !== void 0 ? updatedShipment : shipment, _rate, servicePoint);
             return;
           }
         }
+        // The user has selected a standard rate and no further action is required before purchase
+        yield purchaseLabel(rateId, shipment, rate, servicePoint);
+        return;
       } catch (e) {
         if (Array.isArray(e)) {
           if (e[0] instanceof SE.CodedError) setBeforeCreateError(e[0]);else setBeforeCreateError({
             errorCode: "unknown",
             errorSource: "client",
             errorType: "unknown",
-            message: (_h = e[0].message) !== null && _h !== void 0 ? _h : "An unknown error occurred"
+            message: (_j = e[0].message) !== null && _j !== void 0 ? _j : "An unknown error occurred"
           });
         } else {
           if (e instanceof SE.CodedError) setBeforeCreateError(e);else setBeforeCreateError({
             errorCode: "unknown",
             errorSource: "client",
             errorType: "unknown",
-            message: (_j = e.message) !== null && _j !== void 0 ? _j : "An unknown error occurred"
+            message: (_k = e.message) !== null && _k !== void 0 ? _k : "An unknown error occurred"
           });
         }
         return;
@@ -234,7 +255,8 @@ const useRatesForm = ({
     }
   }), [fundingOrigin, handleSave, onBeforeLabelCreate, preferredRatesResponse, purchaseLabel, ratesResponse === null || ratesResponse === void 0 ? void 0 : ratesResponse.rates, resetRates, shipment]);
   let errors = [...(ratesErrors !== null && ratesErrors !== void 0 ? ratesErrors : []), ...((_b = ratesResponse === null || ratesResponse === void 0 ? void 0 : ratesResponse.errors) !== null && _b !== void 0 ? _b : [])];
-  if (beforeCreateError) errors = [...errors, beforeCreateError];
+  let labelErrors = createLabelErrors !== null && createLabelErrors !== void 0 ? createLabelErrors : [];
+  if (beforeCreateError) labelErrors = [...labelErrors, beforeCreateError];
   if (beforeSaveError) errors = [...errors, beforeSaveError];
   // Sometimes no rates are returned and no top-level errors are returned
   // but there are invalid rates with errors. This will filter out duplicate error messages and expose those to the user
@@ -255,7 +277,7 @@ const useRatesForm = ({
     scrubber: useCallback(() => "common:errorMessages.noRatesAvailable", [])
   });
   const displayableLabelErrors = useScrubErrors({
-    errors: labelErrors !== null && labelErrors !== void 0 ? labelErrors : undefined,
+    errors: labelErrors,
     scrubber: useCallback(e => {
       if (e.message.includes("The ship from email is required") || e.message.includes("The ship to email is required")) return "common:errorMessages.emailIsRequired";
       return e.message.replace(/Exception with code \w+; module \d+, category \d+, item \d+/g, "");

package/esm/elements/purchase-label/purchase-label.js

@@ -70,7 +70,6 @@ const Component = _a => {
     externalOrderNumber,
     externalShipmentId,
     onLoad,
-    onShipmentUpdated,
     orderSourceCode,
     salesOrderId,
     shipFromAddresses,

package/esm/elements/shipments-grid/hooks/use-shipments-grid.js

@@ -32,6 +32,7 @@ const useShipmentsGrid = ({
     pageSize,
     pagerProps
   } = usePager(PAGE_SIZE);
+  const [activeShipmentId, setActiveShipmentId] = useState();
   const [filters, setFilters] = useState(initialFilters);
   const clearAllFilters = () => {
     setFilters(initialFilters);
@@ -65,8 +66,9 @@ const useShipmentsGrid = ({
   }, getCreatedDateFilterValue((_b = (_a = filters.createdDate) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.start, (_d = (_c = filters.createdDate) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.end)));
   const shipments = useMemo(() => data === null || data === void 0 ? void 0 : data.shipments.map(shipment => Object.assign(Object.assign({}, shipment), {
     disableOnRowClick: shipment.shipmentStatus === "cancelled",
+    isLoading: activeShipmentId === shipment.shipmentId,
     serviceName: getServiceName(shipment)
-  })), [data === null || data === void 0 ? void 0 : data.shipments, getServiceName]);
+  })), [activeShipmentId, data === null || data === void 0 ? void 0 : data.shipments, getServiceName]);
   const {
     data: shipmentById,
     error: shipmentErrors,
@@ -107,6 +109,7 @@ const useShipmentsGrid = ({
     if (shipmentFilteredById) {
       return [Object.assign(Object.assign({}, shipmentFilteredById), {
         disableOnRowClick: shipmentFilteredById.shipmentStatus === "cancelled",
+        isLoading: activeShipmentId === shipmentFilteredById.shipmentId,
         serviceName: getServiceName(shipmentFilteredById)
       })];
     } else if (shipmentFilteredByIdHasErrors) {
@@ -131,6 +134,7 @@ const useShipmentsGrid = ({
       showPagination: shipmentFilteredById ? false : ((data === null || data === void 0 ? void 0 : data.total) || 0) > pageSize,
       totalElements: shipmentFilteredById ? 1 : (data === null || data === void 0 ? void 0 : data.total) || 0
     },
+    setActiveShipmentId,
     setFilters: onSetFilters,
     shipments,
     shouldShowFilters: isAnyFilterEnabled

package/esm/elements/shipments-grid/shipments-grid.js

@@ -1,3 +1,4 @@
+import { __awaiter } from 'tslib';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { useSortableQuery } from '../../hooks/use-sortable-query.js';
 import { useMemo } from 'react';
@@ -41,18 +42,18 @@ import { ErrorFallback } from '../../components/error-fallback/error-fallback.js
  * @see {@link ShipmentsGrid.Element | The **Element** created to render `<ShipmentsGrid />`}
  */
 const Component = ({
-  onRowClick,
+  onRowClick: onRowClickProp,
   onClickCancelShipment,
   shipmentStatus,
   showShipmentIdFilter: _showShipmentIdFilter = true,
   showCreatedDateFilter: _showCreatedDateFilter = true
 }) => {
-  const {
-    t
-  } = useTranslation(["common", "list-shipments"]);
   const {
     globalFeatures
   } = useElements();
+  const {
+    t
+  } = useTranslation(["common", "list-shipments"]);
   const {
     toggleSort,
     sortState
@@ -69,7 +70,8 @@ const Component = ({
     getGridData,
     isAnyFilterActive,
     shouldShowFilters,
-    clearAllFilters
+    clearAllFilters,
+    setActiveShipmentId
   } = useShipmentsGrid({
     shipmentStatus,
     showCreatedDateFilter: _showCreatedDateFilter,
@@ -77,6 +79,11 @@ const Component = ({
     sortBy: sortState.by,
     sortDir: sortState.dir
   });
+  const onRowClick = shipment => __awaiter(void 0, void 0, void 0, function* () {
+    setActiveShipmentId(shipment.shipmentId);
+    yield onRowClickProp === null || onRowClickProp === void 0 ? void 0 : onRowClickProp(shipment);
+    setActiveShipmentId(undefined);
+  });
   const handleCreatedDateSort = () => {
     toggleSort("created_at");
   };

package/esm/hooks/index.js

@@ -3,3 +3,4 @@ export { useHelpers } from './use-helpers.js';
 export { useConfigureShipment } from './use-configure-shipment.js';
 export { useImportSalesOrder } from './use-import-sales-order.js';
 export { useBalanceServices } from './use-balance-services.js';
+export { RootPortalProvider, useRootPortal } from './use-root-portal.js';