@shipengine/elements 2.21.0 → 2.23.0

package/cjs/elements/purchase-label/components/fund-and-purchase/fund-and-purchase.cjs

@@ -38,12 +38,12 @@ const FundAndPurchase = ({
   currency,
   disabled,
   isFundingEnabled,
-  showVatSettings,
-  onSave,
+  isInvalidatedByError,
   onPurchase,
+  onSave,
   onVatRegistrationComplete,
-  isInvalidatedByError,
-  rateData
+  rateData,
+  showVatSettings
 }) => {
   var _a, _b, _c;
   const {
@@ -75,10 +75,18 @@ const FundAndPurchase = ({
   const purchaseAmount = rates.getTotalRateAmount(rate);
   const [isSavingRate, setIsSavingRate] = React.useState(false);
   const [isSavingError, setIsSavingError] = React.useState(false);
-  const [isAddFundsFormOpen, setIsAddFundsFormOpen] = React.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] = React.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);
+    }
+  };
   React.useEffect(() => {
     resetAddFundsMutationState();
   }, [isAddFundsFormOpen, resetAddFundsMutationState]);
@@ -86,7 +94,7 @@ const FundAndPurchase = ({
     setIsSavingRate(true);
     setIsSavingError(false);
     try {
-      yield onSave();
+      yield onSave === null || onSave === void 0 ? void 0 : onSave();
     } catch (e) {
       setIsSavingError(true);
     } finally {
@@ -112,7 +120,7 @@ const FundAndPurchase = ({
         breakpoint: "mobileLarge",
         justify: "end"
       }, {
-        children: [jsxRuntime.jsx(giger.Button, Object.assign({
+        children: [onSave && jsxRuntime.jsx(giger.Button, Object.assign({
           bold: false,
           css: fundAndPurchase_styles.styles.saveRateButton,
           disabled: disableSaveButton,
@@ -143,7 +151,7 @@ const FundAndPurchase = ({
         }), isFundingEnabled ? jsxRuntime.jsx(linkAction.LinkAction, {
           icon: "add",
           isDisabled: !isFundingRequired || isAddFundsFormOpen || isRateFormSubmitting,
-          onClick: () => setIsAddFundsFormOpen(!isAddFundsFormOpen),
+          onClick: toggleAddFundsForm,
           title: t("manage-funding:actions.addFunds")
         }) : null]
       }), jsxRuntime.jsx(spacer.Spacer, {
@@ -189,7 +197,7 @@ const FundAndPurchase = ({
           }), isFundingEnabled && jsxRuntime.jsx(linkAction.LinkAction, {
             icon: "add",
             isDisabled: isAddFundsFormOpen || isRateFormSubmitting,
-            onClick: () => setIsAddFundsFormOpen(!isAddFundsFormOpen),
+            onClick: toggleAddFundsForm,
             title: t("manage-funding:actions.addFunds")
           })]
         }), jsxRuntime.jsx(spacer.Spacer, {
@@ -210,7 +218,7 @@ const FundAndPurchase = ({
           currency: currency,
           minimumAmount: purchaseAmount - balance,
           onSuccess: () => {
-            setIsAddFundsFormOpen(false);
+            setIsFormManuallyToggled(false);
             onPurchase();
           }
         }, {
@@ -247,7 +255,7 @@ const FundAndPurchase = ({
                 }, {
                   children: jsxRuntime.jsx(giger.Button, Object.assign({
                     disabled: addFundsForm.isSubmitting || isRateFormSubmitting,
-                    onClick: () => setIsAddFundsFormOpen(false),
+                    onClick: () => setIsFormManuallyToggled(false),
                     variant: giger.ButtonVariant.TEXT
                   }, {
                     children: t("actions.cancel")

package/cjs/elements/purchase-label/components/rate-form/rate-form.cjs

@@ -219,7 +219,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/cjs/elements/purchase-label/components/rate-form/rate-view.cjs

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

package/cjs/elements/purchase-label/components/shipment-form/shipment-form.cjs

@@ -875,7 +875,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);
         },
@@ -962,17 +968,17 @@ const ShipmentForm = ({
             })
           })), hasUpsOptions && jsxRuntime.jsx(_switch.Switch, {
             defaultChecked: ((_k = shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.advancedOptions) === null || _k === void 0 ? void 0 : _k.additionalHandling) || false,
-            label: jsxRuntime.jsx(reactI18next.Trans, {
+            label: (features === null || features === void 0 ? void 0 : features.additionalHandlingHref) ? jsxRuntime.jsx(reactI18next.Trans, {
               components: {
                 Link: jsxRuntime.jsx(giger.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/cjs/elements/purchase-label/configure-shipment.cjs

@@ -146,7 +146,9 @@ const ConfigureShipment = _a => {
     }
   });
   // Capture ship from address schema validation error to toggle form and display error message
-  const hasShipFromAddressErrors = React.useMemo(() => !!(shipmentFormErrors === null || shipmentFormErrors === void 0 ? void 0 : shipmentFormErrors.filter(error => error.errorCode === "invalid_address")), [shipmentFormErrors]);
+  const hasShipFromAddressErrors = React.useMemo(() => {
+    return (shipmentFormErrors === null || shipmentFormErrors === void 0 ? void 0 : shipmentFormErrors.some(error => error.errorCode === "invalid_address")) || false;
+  }, [shipmentFormErrors]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx(shipmentForm.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/cjs/elements/purchase-label/hooks/use-rates-form.cjs

@@ -61,7 +61,7 @@ const useRatesForm = ({
     mutateAsync: updateShipment
   } = reactApi.useUpdateSalesOrderShipment();
   const {
-    error: labelErrors,
+    error: createLabelErrors,
     reset: resetLabel,
     mutateAsync: createLabel
   } = reactApi.useCreateLabel();
@@ -184,7 +184,7 @@ const useRatesForm = ({
     }
   }), [onBeforeRateSaved, onUpdatedShipment, resetRates, shipment, updateShipment]);
   const handleSubmit = React.useCallback((rateId, servicePoint) => tslib.__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);
@@ -192,17 +192,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: date.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 = rates.getTotalRateAmount(_rate);
           if (!fundingOrigin) throw new Error("Unable to find balance");
@@ -213,24 +231,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 reactApi.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 reactApi.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;
@@ -238,7 +259,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
@@ -259,7 +281,7 @@ const useRatesForm = ({
     scrubber: React.useCallback(() => "common:errorMessages.noRatesAvailable", [])
   });
   const displayableLabelErrors = useScrubErrors.useScrubErrors({
-    errors: labelErrors !== null && labelErrors !== void 0 ? labelErrors : undefined,
+    errors: labelErrors,
     scrubber: React.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/cjs/elements/purchase-label/purchase-label.cjs

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

package/cjs/elements/shipments-grid/hooks/use-shipments-grid.cjs

@@ -22,7 +22,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);
@@ -34,6 +36,7 @@ const useShipmentsGrid = ({
     pageSize,
     pagerProps
   } = usePager.usePager(PAGE_SIZE);
+  const [activeShipmentId, setActiveShipmentId] = React.useState();
   const [filters, setFilters] = React.useState(initialFilters);
   const clearAllFilters = () => {
     setFilters(initialFilters);
@@ -62,14 +65,14 @@ const useShipmentsGrid = ({
     page,
     pageSize,
     shipmentStatus,
-    sortBy: "modified_at",
-    sortDir: "desc"
+    sortBy: sortBy,
+    sortDir: sortDir
   }, createdDateValue.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 = React.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,
@@ -110,6 +113,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) {
@@ -134,9 +138,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/cjs/elements/shipments-grid/shipments-grid.cjs

@@ -2,7 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useSortableQuery = require('../../hooks/use-sortable-query.cjs');
+var React = require('react');
 var reactI18next = require('react-i18next');
 var giger = require('@shipengine/giger');
 var useShipmentsGrid = require('./hooks/use-shipments-grid.cjs');
@@ -11,8 +14,8 @@ var actionsMenu = require('../../components/actions-menu/actions-menu.cjs');
 var gridFilters = require('../../components/grid-filters/grid-filters.cjs');
 var index = require('../../locales/en/index.cjs');
 var elementsContextProvider = require('../../elements-provider/elements-context-provider.cjs');
-var loader = require('../../components/loader/loader.cjs');
 var errorState = require('../../components/error-state/error-state.cjs');
+var sortableHeader = require('../../components/grid-controller/sortable-header/sortable-header.cjs');
 var cellFormattedDate = require('../../components/grid-controller/cell-formatted-date.cjs');
 var gridController = require('../../components/grid-controller/grid-controller.cjs');
 var gridFooter = require('../../components/grid-controller/grid-footer.cjs');
@@ -43,18 +46,25 @@ var errorFallback = require('../../components/error-fallback/error-fallback.cjs'
  * @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
+  } = elementsContextProvider.useElements();
   const {
     t
   } = reactI18next.useTranslation(["common", "list-shipments"]);
   const {
-    globalFeatures
-  } = elementsContextProvider.useElements();
+    toggleSort,
+    sortState
+  } = useSortableQuery.useSortableQuery({
+    defaultSortBy: "modified_at",
+    defaultSortDir: "desc"
+  });
   const {
     isLoading,
     isError,
@@ -64,17 +74,50 @@ const Component = ({
     getGridData,
     isAnyFilterActive,
     shouldShowFilters,
-    clearAllFilters
+    clearAllFilters,
+    setActiveShipmentId
   } = useShipmentsGrid.useShipmentsGrid({
     shipmentStatus,
     showCreatedDateFilter: _showCreatedDateFilter,
-    showShipmentIdFilter: _showShipmentIdFilter
+    showShipmentIdFilter: _showShipmentIdFilter,
+    sortBy: sortState.by,
+    sortDir: sortState.dir
   });
-  if (isLoading) {
-    return jsxRuntime.jsx(loader.Loader, {
-      message: t("loading.shipments")
-    });
-  }
+  const onRowClick = shipment => tslib.__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 = React.useMemo(() => {
+    if (isLoading) {
+      return undefined;
+    }
+    if (isAnyFilterActive) {
+      return jsxRuntime.jsx(giger.EmptyState, Object.assign({
+        isElevated: false,
+        subtitle: t("list-shipments:emptyState.filtersSubtitle"),
+        title: t("list-shipments:emptyState.filtersTitle")
+      }, {
+        children: jsxRuntime.jsx(giger.Button, Object.assign({
+          onClick: clearAllFilters
+        }, {
+          children: t("list-shipments:emptyState.viewAll")
+        }))
+      }));
+    } else {
+      return jsxRuntime.jsx(giger.EmptyState, {
+        isElevated: false,
+        subtitle: t("list-shipments:emptyState.subtitle"),
+        title: t("list-shipments:emptyState.title")
+      });
+    }
+  }, [clearAllFilters, isAnyFilterActive, isLoading, t]);
   if (isError) {
     return jsxRuntime.jsx(errorState.ErrorState, {
       css: shipmentsGrid_styles.styles.errorState,
@@ -160,7 +203,11 @@ const Component = ({
       }));
     }
   }, {
-    headerContent: t("list-shipments:headers.created"),
+    headerContent: jsxRuntime.jsx(sortableHeader.SortableHeader, {
+      headerText: t("list-shipments:headers.created"),
+      onToggleSort: handleCreatedDateSort,
+      sortDirection: sortState.createdAtDir
+    }),
     renderCellContent: shipment => {
       return jsxRuntime.jsx(cellFormattedDate.CellFormattedDate, {
         date: shipment.createdAt,
@@ -168,7 +215,11 @@ const Component = ({
       });
     }
   }, {
-    headerContent: t("list-shipments:headers.modified"),
+    headerContent: jsxRuntime.jsx(sortableHeader.SortableHeader, {
+      headerText: t("list-shipments:headers.modified"),
+      onToggleSort: handleUpdatedDateSort,
+      sortDirection: sortState.modifiedAtDir
+    }),
     renderCellContent: shipment => {
       return jsxRuntime.jsx(cellFormattedDate.CellFormattedDate, {
         date: shipment.modifiedAt,
@@ -200,23 +251,10 @@ const Component = ({
     children: [jsxRuntime.jsx(gridController.GridController, {
       columns: columns,
       data: getGridData(),
-      emptyContent: isAnyFilterActive ? jsxRuntime.jsx(giger.EmptyState, Object.assign({
-        isElevated: false,
-        subtitle: t("list-shipments:emptyState.filtersSubtitle"),
-        title: t("list-shipments:emptyState.filtersTitle")
-      }, {
-        children: jsxRuntime.jsx(giger.Button, Object.assign({
-          onClick: clearAllFilters
-        }, {
-          children: t("list-shipments:emptyState.viewAll")
-        }))
-      })) : jsxRuntime.jsx(giger.EmptyState, {
-        isElevated: false,
-        subtitle: t("list-shipments:emptyState.subtitle"),
-        title: t("list-shipments:emptyState.title")
-      }),
+      emptyContent: emptyContentComponent,
       filters: shouldShowFilters && jsxRuntime.jsx(gridFilters.GridFilters, {
         filters: filters,
+        filtersDisabled: isLoading,
         onClearAllFilters: clearAllFilters,
         onFiltersUpdated: setFilters
       }),
@@ -228,6 +266,7 @@ const Component = ({
         showPagination: pageConfig.showPagination,
         total: pageConfig.totalElements
       }),
+      isLoading: isLoading,
       onRowClick: onRowClick
     }), globalFeatures.poweredByShipEngine && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(spacer.Spacer, {}), jsxRuntime.jsx(poweredByShipengine.PoweredByShipEngine, {})]

package/cjs/hooks/index.cjs

@@ -7,6 +7,7 @@ var useHelpers = require('./use-helpers.cjs');
 var useConfigureShipment = require('./use-configure-shipment.cjs');
 var useImportSalesOrder = require('./use-import-sales-order.cjs');
 var useBalanceServices = require('./use-balance-services.cjs');
+var useRootPortal = require('./use-root-portal.cjs');
 
 
 
@@ -15,3 +16,5 @@ exports.useHelpers = useHelpers.useHelpers;
 exports.useConfigureShipment = useConfigureShipment.useConfigureShipment;
 exports.useImportSalesOrder = useImportSalesOrder.useImportSalesOrder;
 exports.useBalanceServices = useBalanceServices.useBalanceServices;
+exports.RootPortalProvider = useRootPortal.RootPortalProvider;
+exports.useRootPortal = useRootPortal.useRootPortal;

package/cjs/hooks/use-configure-shipment.cjs

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var reactQuery = require('@tanstack/react-query');
 var address = require('../utilities/shipengine/address.cjs');
 var salesOrder = require('../utilities/shipengine/sales-order.cjs');
 var shipment = require('../utilities/shipengine/shipment.cjs');
@@ -13,7 +12,6 @@ var reactApi = require('@shipengine/react-api');
 var useImportSalesOrder = require('./use-import-sales-order.cjs');
 
 const useConfigureShipment = ({
-  onShipmentUpdated,
   onLoad,
   errorWhenShipmentCancelled: _errorWhenShipmentCancelled = false,
   externalOrderId,
@@ -26,7 +24,6 @@ const useConfigureShipment = ({
   warehouseId,
   useWarehouses: _useWarehouses = true
 }) => {
-  const queryClient = reactQuery.useQueryClient();
   // Queue of incomplete requirement keys (i.e., Ship From addresses, Warehouses, Carriers)
   const incompleteRequirementsKeys = React.useMemo(() => [], []);
   const {
@@ -54,10 +51,6 @@ const useConfigureShipment = ({
     orderSourceCode,
     salesOrderId
   });
-  const {
-    error: updateShipmentErrors,
-    mutate: updateShipment
-  } = reactApi.useUpdateSalesOrderShipment();
   const {
     data: newV1Shipment,
     mutateAsync: createV1Shipment,
@@ -161,25 +154,6 @@ const useConfigureShipment = ({
       }
     }
   }), [createSalesOrderShipment, createV1Shipment, creatingSalesOrderShipment, creatingV1Shipment, defaultShipFromAddress, defaultWarehouse, externalOrderId, externalOrderNumber, externalShipmentId, incompleteRequirementsKeys, isExternalShipmentFetching, isExternalShipmentInitialLoading, isFetchingWarehouses, isInitialLoadingWarehouses, labelPurchasedSalesOrderShipment, listSalesOrderShipmentsInitiallyLoading, listSalesOrderShipmentsIsFetching, orderSourceCode, pendingSalesOrderShipment, refetchSalesOrderShipments, salesOrder$1, salesOrderId, salesOrderShipmentCreated, shipFromAddresses === null || shipFromAddresses === void 0 ? void 0 : shipFromAddresses.length, shipmentId, _useWarehouses, v1shipmentCreated, warehouseId, warehouses$1]);
-  /**
-   * 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 = React.useCallback(shipment$1 => {
-    const formattedShipment = shipment.moveCustomsItemsToProducts(shipment$1);
-    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 = React.useCallback(() => tslib.__awaiter(void 0, void 0, void 0, function* () {
     const {
       data: shipments
@@ -192,13 +166,6 @@ const useConfigureShipment = ({
       yield handleShipmentCreation();
     }))();
   }, [shipmentId, externalShipmentId, salesOrderId, salesOrder$1, warehouses$1, warehouseId, handleShipmentCreation]);
-  // useEffect to handle formating customs
-  React.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
   React.useEffect(() => {
     if ((salesOrderShipments === null || salesOrderShipments === void 0 ? void 0 : salesOrderShipments.length) && salesOrderShipments.every(s => s.shipmentStatus === "label_purchased")) {
@@ -210,7 +177,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 reactApi.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 reactApi.CodedError("shipment_cancelled", {
     errorCode: "invalid_status",
     errorSource: "elements",
     errorType: "business_rules"

package/cjs/hooks/use-sortable-query.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useSortableQuery = ({
+  defaultSortBy: _defaultSortBy = "modified_at",
+  defaultSortDir: _defaultSortDir = "desc"
+}) => {
+  const [sortState, setSortState] = React.useState({
+    by: _defaultSortBy,
+    createdAtDir: _defaultSortDir,
+    dir: _defaultSortDir,
+    modifiedAtDir: _defaultSortDir
+  });
+  const toggleSort = sortQuery => {
+    const newSortState = Object.assign({}, sortState);
+    if (sortQuery === "created_at") {
+      newSortState.createdAtDir = sortState.createdAtDir === "asc" ? "desc" : "asc";
+      newSortState.dir = newSortState.createdAtDir;
+      newSortState.by = "created_at";
+    } else if (sortQuery === "modified_at") {
+      newSortState.modifiedAtDir = sortState.modifiedAtDir === "asc" ? "desc" : "asc";
+      newSortState.dir = newSortState.modifiedAtDir;
+      newSortState.by = "modified_at";
+    }
+    setSortState(newSortState);
+  };
+  return {
+    sortState,
+    toggleSort
+  };
+};
+
+exports.useSortableQuery = useSortableQuery;