@shipengine/elements 2.21.0 → 2.23.0

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/fund-and-purchase/fund-and-purchase.js

@@ -34,12 +34,12 @@ const FundAndPurchase = ({
   currency,
   disabled,
   isFundingEnabled,
-  showVatSettings,
-  onSave,
+  isInvalidatedByError,
   onPurchase,
+  onSave,
   onVatRegistrationComplete,
-  isInvalidatedByError,
-  rateData
+  rateData,
+  showVatSettings
 }) => {
   var _a, _b, _c;
   const {
@@ -71,10 +71,18 @@ const FundAndPurchase = ({
   const purchaseAmount = getTotalRateAmount(rate);
   const [isSavingRate, setIsSavingRate] = useState(false);
   const [isSavingError, setIsSavingError] = useState(false);
-  const [isAddFundsFormOpen, setIsAddFundsFormOpen] = useState(() => {
-    var _a;
-    return (_a = isFundingEnabled && isFundingRequired && (fundingOrigin === null || fundingOrigin === void 0 ? void 0 : fundingOrigin.balance) !== undefined && fundingOrigin.balance < purchaseAmount && !isInvalidatedByError) !== null && _a !== void 0 ? _a : false;
-  });
+  const purchaseRequiresAddingFunds = isFundingEnabled && isFundingRequired && (fundingOrigin === null || fundingOrigin === void 0 ? void 0 : fundingOrigin.balance) !== undefined && fundingOrigin.balance < purchaseAmount && !isInvalidatedByError;
+  const [isFormManuallyToggled, setIsFormManuallyToggled] = useState(false);
+  const isAddFundsFormOpen = purchaseRequiresAddingFunds || isFormManuallyToggled;
+  const toggleAddFundsForm = () => {
+    if (!purchaseRequiresAddingFunds) {
+      // If the label can be purchased without adding funds, allow manual toggling of the form
+      setIsFormManuallyToggled(!isFormManuallyToggled);
+    } else if (isFormManuallyToggled) {
+      // If the form is already open, close it
+      setIsFormManuallyToggled(false);
+    }
+  };
   useEffect(() => {
     resetAddFundsMutationState();
   }, [isAddFundsFormOpen, resetAddFundsMutationState]);
@@ -82,7 +90,7 @@ const FundAndPurchase = ({
     setIsSavingRate(true);
     setIsSavingError(false);
     try {
-      yield onSave();
+      yield onSave === null || onSave === void 0 ? void 0 : onSave();
     } catch (e) {
       setIsSavingError(true);
     } finally {
@@ -108,7 +116,7 @@ const FundAndPurchase = ({
         breakpoint: "mobileLarge",
         justify: "end"
       }, {
-        children: [jsx(Button, Object.assign({
+        children: [onSave && jsx(Button, Object.assign({
           bold: false,
           css: styles.saveRateButton,
           disabled: disableSaveButton,
@@ -139,7 +147,7 @@ const FundAndPurchase = ({
         }), isFundingEnabled ? jsx(LinkAction, {
           icon: "add",
           isDisabled: !isFundingRequired || isAddFundsFormOpen || isRateFormSubmitting,
-          onClick: () => setIsAddFundsFormOpen(!isAddFundsFormOpen),
+          onClick: toggleAddFundsForm,
           title: t("manage-funding:actions.addFunds")
         }) : null]
       }), jsx(Spacer, {
@@ -185,7 +193,7 @@ const FundAndPurchase = ({
           }), isFundingEnabled && jsx(LinkAction, {
             icon: "add",
             isDisabled: isAddFundsFormOpen || isRateFormSubmitting,
-            onClick: () => setIsAddFundsFormOpen(!isAddFundsFormOpen),
+            onClick: toggleAddFundsForm,
             title: t("manage-funding:actions.addFunds")
           })]
         }), jsx(Spacer, {
@@ -206,7 +214,7 @@ const FundAndPurchase = ({
           currency: currency,
           minimumAmount: purchaseAmount - balance,
           onSuccess: () => {
-            setIsAddFundsFormOpen(false);
+            setIsFormManuallyToggled(false);
             onPurchase();
           }
         }, {
@@ -243,7 +251,7 @@ const FundAndPurchase = ({
                 }, {
                   children: jsx(Button, Object.assign({
                     disabled: addFundsForm.isSubmitting || isRateFormSubmitting,
-                    onClick: () => setIsAddFundsFormOpen(false),
+                    onClick: () => setIsFormManuallyToggled(false),
                     variant: ButtonVariant.TEXT
                   }, {
                     children: t("actions.cancel")

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

@@ -215,7 +215,7 @@ const RateForm = ({
         isFundingEnabled: !!(features === null || features === void 0 ? void 0 : features.enableFunding),
         isInvalidatedByError: !!(labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length),
         onPurchase: handleSubmit,
-        onSave: handleSaveRate,
+        onSave: (features === null || features === void 0 ? void 0 : features.saveRate) ? handleSaveRate : undefined,
         onVatRegistrationComplete: onVatRegistrationComplete,
         rateData: {
           isPreferredRate,

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

@@ -18,7 +18,9 @@ const getInitialFilters = (showShipmentIdFilter, showCreatedDateFilter) => ({
 const useShipmentsGrid = ({
   shipmentStatus,
   showShipmentIdFilter: _showShipmentIdFilter = true,
-  showCreatedDateFilter: _showCreatedDateFilter = true
+  showCreatedDateFilter: _showCreatedDateFilter = true,
+  sortBy,
+  sortDir
 }) => {
   var _a, _b, _c, _d;
   const initialFilters = getInitialFilters(_showShipmentIdFilter, _showCreatedDateFilter);
@@ -30,6 +32,7 @@ const useShipmentsGrid = ({
     pageSize,
     pagerProps
   } = usePager(PAGE_SIZE);
+  const [activeShipmentId, setActiveShipmentId] = useState();
   const [filters, setFilters] = useState(initialFilters);
   const clearAllFilters = () => {
     setFilters(initialFilters);
@@ -58,14 +61,14 @@ const useShipmentsGrid = ({
     page,
     pageSize,
     shipmentStatus,
-    sortBy: "modified_at",
-    sortDir: "desc"
+    sortBy: sortBy,
+    sortDir: sortDir
   }, 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]);
-  const shouldShowFilters = isAnyFilterEnabled && (isAnyFilterActive || Boolean(shipments === null || shipments === void 0 ? void 0 : shipments.length));
+  })), [activeShipmentId, data === null || data === void 0 ? void 0 : data.shipments, getServiceName]);
   const {
     data: shipmentById,
     error: shipmentErrors,
@@ -106,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) {
@@ -130,9 +134,10 @@ 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
+    shouldShowFilters: isAnyFilterEnabled
   };
 };
 

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

@@ -1,14 +1,17 @@
+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';
 import { useTranslation } from 'react-i18next';
-import { TagColor, Typography, Tag, TagVariant, EmptyState, Button } from '@shipengine/giger';
+import { EmptyState, Button, TagColor, Typography, Tag, TagVariant } from '@shipengine/giger';
 import { useShipmentsGrid } from './hooks/use-shipments-grid.js';
 import { styles } from './shipments-grid.styles.js';
 import { ActionsMenu, Actions } from '../../components/actions-menu/actions-menu.js';
 import { GridFilters } from '../../components/grid-filters/grid-filters.js';
 import en from '../../locales/en/index.js';
 import { useElements } from '../../elements-provider/elements-context-provider.js';
-import { Loader } from '../../components/loader/loader.js';
 import { ErrorState } from '../../components/error-state/error-state.js';
+import { SortableHeader } from '../../components/grid-controller/sortable-header/sortable-header.js';
 import { CellFormattedDate } from '../../components/grid-controller/cell-formatted-date.js';
 import { GridController } from '../../components/grid-controller/grid-controller.js';
 import { GridFooter } from '../../components/grid-controller/grid-footer.js';
@@ -39,18 +42,25 @@ 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 {
+    globalFeatures
+  } = useElements();
   const {
     t
   } = useTranslation(["common", "list-shipments"]);
   const {
-    globalFeatures
-  } = useElements();
+    toggleSort,
+    sortState
+  } = useSortableQuery({
+    defaultSortBy: "modified_at",
+    defaultSortDir: "desc"
+  });
   const {
     isLoading,
     isError,
@@ -60,17 +70,50 @@ const Component = ({
     getGridData,
     isAnyFilterActive,
     shouldShowFilters,
-    clearAllFilters
+    clearAllFilters,
+    setActiveShipmentId
   } = useShipmentsGrid({
     shipmentStatus,
     showCreatedDateFilter: _showCreatedDateFilter,
-    showShipmentIdFilter: _showShipmentIdFilter
+    showShipmentIdFilter: _showShipmentIdFilter,
+    sortBy: sortState.by,
+    sortDir: sortState.dir
   });
-  if (isLoading) {
-    return jsx(Loader, {
-      message: t("loading.shipments")
-    });
-  }
+  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");
+  };
+  const handleUpdatedDateSort = () => {
+    toggleSort("modified_at");
+  };
+  const emptyContentComponent = useMemo(() => {
+    if (isLoading) {
+      return undefined;
+    }
+    if (isAnyFilterActive) {
+      return jsx(EmptyState, Object.assign({
+        isElevated: false,
+        subtitle: t("list-shipments:emptyState.filtersSubtitle"),
+        title: t("list-shipments:emptyState.filtersTitle")
+      }, {
+        children: jsx(Button, Object.assign({
+          onClick: clearAllFilters
+        }, {
+          children: t("list-shipments:emptyState.viewAll")
+        }))
+      }));
+    } else {
+      return jsx(EmptyState, {
+        isElevated: false,
+        subtitle: t("list-shipments:emptyState.subtitle"),
+        title: t("list-shipments:emptyState.title")
+      });
+    }
+  }, [clearAllFilters, isAnyFilterActive, isLoading, t]);
   if (isError) {
     return jsx(ErrorState, {
       css: styles.errorState,
@@ -156,7 +199,11 @@ const Component = ({
       }));
     }
   }, {
-    headerContent: t("list-shipments:headers.created"),
+    headerContent: jsx(SortableHeader, {
+      headerText: t("list-shipments:headers.created"),
+      onToggleSort: handleCreatedDateSort,
+      sortDirection: sortState.createdAtDir
+    }),
     renderCellContent: shipment => {
       return jsx(CellFormattedDate, {
         date: shipment.createdAt,
@@ -164,7 +211,11 @@ const Component = ({
       });
     }
   }, {
-    headerContent: t("list-shipments:headers.modified"),
+    headerContent: jsx(SortableHeader, {
+      headerText: t("list-shipments:headers.modified"),
+      onToggleSort: handleUpdatedDateSort,
+      sortDirection: sortState.modifiedAtDir
+    }),
     renderCellContent: shipment => {
       return jsx(CellFormattedDate, {
         date: shipment.modifiedAt,
@@ -196,23 +247,10 @@ const Component = ({
     children: [jsx(GridController, {
       columns: columns,
       data: getGridData(),
-      emptyContent: isAnyFilterActive ? jsx(EmptyState, Object.assign({
-        isElevated: false,
-        subtitle: t("list-shipments:emptyState.filtersSubtitle"),
-        title: t("list-shipments:emptyState.filtersTitle")
-      }, {
-        children: jsx(Button, Object.assign({
-          onClick: clearAllFilters
-        }, {
-          children: t("list-shipments:emptyState.viewAll")
-        }))
-      })) : jsx(EmptyState, {
-        isElevated: false,
-        subtitle: t("list-shipments:emptyState.subtitle"),
-        title: t("list-shipments:emptyState.title")
-      }),
+      emptyContent: emptyContentComponent,
       filters: shouldShowFilters && jsx(GridFilters, {
         filters: filters,
+        filtersDisabled: isLoading,
         onClearAllFilters: clearAllFilters,
         onFiltersUpdated: setFilters
       }),
@@ -224,6 +262,7 @@ const Component = ({
         showPagination: pageConfig.showPagination,
         total: pageConfig.totalElements
       }),
+      isLoading: isLoading,
       onRowClick: onRowClick
     }), globalFeatures.poweredByShipEngine && jsxs(Fragment, {
       children: [jsx(Spacer, {}), jsx(PoweredByShipEngine, {})]

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';

package/esm/hooks/use-configure-shipment.js

@@ -1,15 +1,13 @@
 import { __awaiter } from 'tslib';
-import { useQueryClient } from '@tanstack/react-query';
 import { getDefaultShipFromAddress } from '../utilities/shipengine/address.js';
 import { getIsCustomsRequiredForSalesOrder, getCustomsFromSalesOrder } from '../utilities/shipengine/sales-order.js';
-import { getShipmentByStatus, moveCustomsItemsToProducts } from '../utilities/shipengine/shipment.js';
+import { getShipmentByStatus } from '../utilities/shipengine/shipment.js';
 import { getDefaultWarehouse, getWarehouseById } from '../utilities/shipengine/warehouses.js';
 import { useMemo, useCallback, useEffect } from 'react';
-import { useListCarriers, useListWarehouses, useUpdateSalesOrderShipment, useCreateShipment, useGetShipmentByExternalId, useListSalesOrderShipments, useCreateSalesOrderShipment, CodedError } from '@shipengine/react-api';
+import { useListCarriers, useListWarehouses, useCreateShipment, useGetShipmentByExternalId, useListSalesOrderShipments, useCreateSalesOrderShipment, CodedError } from '@shipengine/react-api';
 import { useImportSalesOrder } from './use-import-sales-order.js';
 
 const useConfigureShipment = ({
-  onShipmentUpdated,
   onLoad,
   errorWhenShipmentCancelled: _errorWhenShipmentCancelled = false,
   externalOrderId,
@@ -22,7 +20,6 @@ const useConfigureShipment = ({
   warehouseId,
   useWarehouses: _useWarehouses = true
 }) => {
-  const queryClient = useQueryClient();
   // Queue of incomplete requirement keys (i.e., Ship From addresses, Warehouses, Carriers)
   const incompleteRequirementsKeys = useMemo(() => [], []);
   const {
@@ -50,10 +47,6 @@ const useConfigureShipment = ({
     orderSourceCode,
     salesOrderId
   });
-  const {
-    error: updateShipmentErrors,
-    mutate: updateShipment
-  } = useUpdateSalesOrderShipment();
   const {
     data: newV1Shipment,
     mutateAsync: createV1Shipment,
@@ -157,25 +150,6 @@ const useConfigureShipment = ({
       }
     }
   }), [createSalesOrderShipment, createV1Shipment, creatingSalesOrderShipment, creatingV1Shipment, defaultShipFromAddress, defaultWarehouse, externalOrderId, externalOrderNumber, externalShipmentId, incompleteRequirementsKeys, isExternalShipmentFetching, isExternalShipmentInitialLoading, isFetchingWarehouses, isInitialLoadingWarehouses, labelPurchasedSalesOrderShipment, listSalesOrderShipmentsInitiallyLoading, listSalesOrderShipmentsIsFetching, orderSourceCode, pendingSalesOrderShipment, refetchSalesOrderShipments, salesOrder, salesOrderId, salesOrderShipmentCreated, shipFromAddresses === null || shipFromAddresses === void 0 ? void 0 : shipFromAddresses.length, shipmentId, _useWarehouses, v1shipmentCreated, warehouseId, warehouses]);
-  /**
-   * Update a shipment with deprecated customs items. Move items to the products array on the Shipment's packages array
-   *
-   * Invalidate useGetShipment's cache
-   */
-  const formatCustoms = useCallback(shipment => {
-    const formattedShipment = moveCustomsItemsToProducts(shipment);
-    updateShipment(formattedShipment, {
-      onSuccess(data) {
-        void (onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(data));
-        void queryClient.invalidateQueries(["useListSalesOrderShipments", {
-          shipmentId: data.shipmentId
-        }], {
-          exact: false
-        } // Invalidate queries with similar keys
-        );
-      }
-    });
-  }, [onShipmentUpdated, queryClient, updateShipment]);
   const refetchPendingSalesOrderShipments = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
     const {
       data: shipments
@@ -188,13 +162,6 @@ const useConfigureShipment = ({
       yield handleShipmentCreation();
     }))();
   }, [shipmentId, externalShipmentId, salesOrderId, salesOrder, warehouses, warehouseId, handleShipmentCreation]);
-  // useEffect to handle formating customs
-  useEffect(() => {
-    var _a, _b;
-    if ((_b = (_a = pendingSalesOrderShipment === null || pendingSalesOrderShipment === void 0 ? void 0 : pendingSalesOrderShipment.customs) === null || _a === void 0 ? void 0 : _a.customsItems) === null || _b === void 0 ? void 0 : _b.length) {
-      formatCustoms(pendingSalesOrderShipment);
-    }
-  }, [formatCustoms, pendingSalesOrderShipment]);
   // useEffect to check and run the onLoad prop
   useEffect(() => {
     if ((salesOrderShipments === null || salesOrderShipments === void 0 ? void 0 : salesOrderShipments.length) && salesOrderShipments.every(s => s.shipmentStatus === "label_purchased")) {
@@ -206,7 +173,7 @@ const useConfigureShipment = ({
     if (isInitialLoadingCarriers || isFetchingCarriers) return;
     if ((carriers === null || carriers === void 0 ? void 0 : carriers.length) === 0) incompleteRequirementsKeys.push("no_carriers");
   }, [carriers, incompleteRequirementsKeys, isFetchingCarriers, isInitialLoadingCarriers]);
-  const errors = [...(listWarehouseErrors !== null && listWarehouseErrors !== void 0 ? listWarehouseErrors : []), ...(createSalesOrderShipmentErrors !== null && createSalesOrderShipmentErrors !== void 0 ? createSalesOrderShipmentErrors : []), ...(createV1ShipmentErrors !== null && createV1ShipmentErrors !== void 0 ? createV1ShipmentErrors : []), ...(listSalesOrderShipmentsErrors !== null && listSalesOrderShipmentsErrors !== void 0 ? listSalesOrderShipmentsErrors : []), ...(getExternalShipmentErrors !== null && getExternalShipmentErrors !== void 0 ? getExternalShipmentErrors : []), ...(importSalesOrderErrors !== null && importSalesOrderErrors !== void 0 ? importSalesOrderErrors : []), ...(updateShipmentErrors !== null && updateShipmentErrors !== void 0 ? updateShipmentErrors : []), ...(_errorWhenShipmentCancelled && cancelledShipment ? [new CodedError("shipment_cancelled", {
+  const errors = [...(listWarehouseErrors !== null && listWarehouseErrors !== void 0 ? listWarehouseErrors : []), ...(createSalesOrderShipmentErrors !== null && createSalesOrderShipmentErrors !== void 0 ? createSalesOrderShipmentErrors : []), ...(createV1ShipmentErrors !== null && createV1ShipmentErrors !== void 0 ? createV1ShipmentErrors : []), ...(listSalesOrderShipmentsErrors !== null && listSalesOrderShipmentsErrors !== void 0 ? listSalesOrderShipmentsErrors : []), ...(getExternalShipmentErrors !== null && getExternalShipmentErrors !== void 0 ? getExternalShipmentErrors : []), ...(importSalesOrderErrors !== null && importSalesOrderErrors !== void 0 ? importSalesOrderErrors : []), ...(_errorWhenShipmentCancelled && cancelledShipment ? [new CodedError("shipment_cancelled", {
     errorCode: "invalid_status",
     errorSource: "elements",
     errorType: "business_rules"