@shipengine/elements 2.24.1 → 2.26.0

package/dist/cjs/components/{error-display/error-display.styles.cjs → grid-controller/error-banner/error-banner.styles.cjs}

@@ -1,15 +1,13 @@
 'use strict';
 
-var styles$1 = require('../../utilities/styles.cjs');
+var styles$1 = require('../../../utilities/styles.cjs');
 
 const styles = styles$1.createStyles({
   errorContainer: theme => ({
     alignItems: "center",
-    backgroundColor: styles$1.scopeTheme(theme).palette.gray.ultraLight,
+    backgroundColor: styles$1.scopeTheme(theme).palette.error.light,
     display: "flex",
     flexDirection: "column",
-    paddingBottom: styles$1.scopeTheme(theme).spacing(2),
-    paddingTop: styles$1.scopeTheme(theme).spacing(2),
     rowGap: styles$1.scopeTheme(theme).spacing(1)
   }),
   errorCTA: theme => ({
@@ -19,6 +17,12 @@ const styles = styles$1.createStyles({
   }),
   errorHeading: theme => ({
     fontSize: styles$1.scopeTheme(theme).typography.fontSize.S
+  }),
+  errorContent: theme => ({
+    display: "flex",
+    alignItems: "center",
+    gap: styles$1.scopeTheme(theme).spacing(),
+    color: styles$1.scopeTheme(theme).palette.error.main
   })
 });
 

package/dist/cjs/components/grid-controller/error-banner/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var errorBanner = require('./error-banner.cjs');
+
+
+
+exports.ErrorBanner = errorBanner.ErrorBanner;

package/dist/cjs/components/grid-controller/grid-controller.cjs

@@ -2,9 +2,14 @@
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
 var React = require('react');
+var reactI18next = require('react-i18next');
 var gridController_styles = require('./grid-controller.styles.cjs');
+var errorBanner = require('./error-banner/error-banner.cjs');
 
+const LIMIT_GRID_ITEMS_EXPORT = 10000;
+const ERROR_DISPLAY_DURATION = 7000;
 /**
  * @internal
  *
@@ -22,10 +27,23 @@ const GridController = ({
   isLoading = false,
   useCheckboxes = false,
   filters,
-  emptyContent
+  emptyContent,
+  showExportCSV = false,
+  onClickExportCSV,
+  totalAmountGridItems,
+  hasTrackingStatusFilter,
+  hasExportCSVError = false,
+  isExportCSVLoading = false,
+  onExportErrorDurationEnd
 }) => {
   var _a, _b, _c;
   const [isChecked, setIsChecked] = React.useState((_a = data === null || data === void 0 ? void 0 : data.map(() => false)) !== null && _a !== void 0 ? _a : []);
+  const {
+    t
+  } = reactI18next.useTranslation(["common", "grid-controller"]);
+  const dataAvailable = !!data.length;
+  const isItemsOverExportLimit = !!((totalAmountGridItems !== null && totalAmountGridItems !== void 0 ? totalAmountGridItems : 0) > LIMIT_GRID_ITEMS_EXPORT);
+  const isDisableExportButton = isItemsOverExportLimit || !dataAvailable;
   const columnHeaderContents = React.useMemo(() => columns.map(column => column.headerContent), [columns]);
   const loadingRows = React.useMemo(() => {
     const items = [];
@@ -65,8 +83,36 @@ const GridController = ({
     css: gridController_styles.styles.wrapper,
     children: [filters && jsxRuntime.jsx("div", {
       css: gridController_styles.styles.filters,
-      children: filters
-    }), data.length === 0 && emptyContent ? emptyContent : jsxRuntime.jsx(giger.Table, {
+      children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [filters, showExportCSV && !hasTrackingStatusFilter && jsxRuntime.jsxs(giger.Button, {
+          bold: false,
+          css: gridController_styles.styles.button,
+          disabled: isItemsOverExportLimit || !dataAvailable || hasExportCSVError,
+          isLoading: isExportCSVLoading && !isDisableExportButton,
+          onClick: onClickExportCSV,
+          type: "button",
+          variant: giger.ButtonVariant.FILLED,
+          children: [isItemsOverExportLimit ? jsxRuntime.jsx(giger.IconTooltip, {
+            css: gridController_styles.styles.iconTooltip,
+            icon: gigerTheme.IconNames.DOWNLOAD,
+            size: giger.IconSize.SIZE_MEDIUM,
+            children: jsxRuntime.jsx("div", {
+              children: t("grid-controller:showExportCSV.limit-error", {
+                LIMIT_GRID_ITEMS_EXPORT: new Intl.NumberFormat().format(LIMIT_GRID_ITEMS_EXPORT)
+              })
+            })
+          }) : jsxRuntime.jsx(giger.Icon, {
+            css: gridController_styles.styles.iconTooltip,
+            name: gigerTheme.IconNames.UPLOAD,
+            size: giger.IconSize.SIZE_MEDIUM
+          }), t("grid-controller:showExportCSV.button")]
+        })]
+      })
+    }), hasExportCSVError && !isDisableExportButton && jsxRuntime.jsx(errorBanner.ErrorBanner, {
+      duration: ERROR_DISPLAY_DURATION,
+      linkTitle: t("grid-controller:showExportCSV.generic-error-message"),
+      onDurationEnd: onExportErrorDurationEnd
+    }), !dataAvailable && emptyContent ? emptyContent : jsxRuntime.jsx(giger.Table, {
       "data-testid": "grid",
       footer: footerContent && !isLoading && jsxRuntime.jsx(giger.TableFooter, {
         css: gridController_styles.styles.tableFooter,

package/dist/cjs/components/grid-controller/grid-controller.styles.cjs

@@ -7,10 +7,17 @@ const styles = styles$1.createStyles({
     width: styles$1.scopeTheme(theme).spacing(6)
   }),
   filters: theme => ({
+    display: "flex",
     backgroundColor: styles$1.scopeTheme(theme).palette.white,
     borderBottom: `1px solid ${styles$1.scopeTheme(theme).palette.gray[200]}`,
     padding: styles$1.scopeTheme(theme).spacing()
   }),
+  button: () => ({
+    marginLeft: "auto"
+  }),
+  iconTooltip: theme => ({
+    marginRight: styles$1.scopeTheme(theme).spacing()
+  }),
   skeletonTableRow: () => ({
     height: "68px"
   }),
@@ -30,7 +37,10 @@ const styles = styles$1.createStyles({
   wrapper: theme => Object.assign({
     height: "auto",
     overflow: "hidden"
-  }, styles$1.scopeTheme(theme).getComponentOverride("Table"))
+  }, styles$1.scopeTheme(theme).getComponentOverride("Table")),
+  filtersWrapper: () => ({
+    display: "flex"
+  })
 });
 
 exports.styles = styles;

package/dist/cjs/components/history/history-card/history-card.cjs

@@ -8,8 +8,8 @@ var React = require('react');
 var reactI18next = require('react-i18next');
 var funding = require('../../../assets/funding.svg.cjs');
 var historyCard_styles = require('./history-card.styles.cjs');
-var label = require('./label/label.cjs');
 var elementsContextProvider = require('../../../elements-provider/elements-context-provider.cjs');
+var label = require('./label/label.cjs');
 
 const HistoryCard = ({
   transaction,

package/dist/cjs/components/history/history-card-extension/history-card-extension.cjs

@@ -31,7 +31,6 @@ var spacer = require('../../spacer/spacer.cjs');
 //   </div>
 // );
 //
-// const ErrorState = () => <ErrorDisplay />;
 //
 // // replace type call with its se version - lmnt-936
 // const SuccessState = ({ adjustment }: { adjustment: WalletAdjustment }) => {

package/dist/cjs/components/service-card/service-card.cjs

@@ -66,7 +66,7 @@ const ServiceCardHeader = ({
           children: line1
         }), line2 && jsxRuntime.jsx(giger.Typography, {
           children: line2
-        }), line3 && jsxRuntime.jsx(giger.Typography, {
+        }), line3 && jsxRuntime.jsx("div", {
           children: line3
         })]
       }), jsxRuntime.jsx("div", {
@@ -81,15 +81,15 @@ const ServiceCardHeader = ({
 };
 const ServiceCardFooter = ({
   children,
-  messages
+  messages = []
 }) => {
   return jsxRuntime.jsxs("div", {
     "data-testid": "service-card-footer",
     children: [jsxRuntime.jsx(giger.Divider, {
       css: serviceCard_styles.styles.divider
     }), jsxRuntime.jsxs("section", {
-      css: serviceCard_styles.styles.footer,
-      children: [messages && jsxRuntime.jsx("ul", {
+      css: serviceCard_styles.styles.footerStyles,
+      children: [messages.length > 0 && jsxRuntime.jsx("ul", {
         css: [serviceCard_styles.styles.footerList, messages.length > 1 && serviceCard_styles.styles.footerListWithMultipleMessages],
         children: messages.map((m, index) => jsxRuntime.jsxs("li", {
           css: serviceCard_styles.styles.footerListItem,

package/dist/cjs/components/service-card/service-card.styles.cjs

@@ -16,8 +16,11 @@ const styles = styles$1.createStyles({
     opacity: 0.3,
     width: `calc(100% - ${styles$1.scopeTheme(theme).spacing(4)}px)`
   }),
-  footer: theme => ({
-    padding: styles$1.scopeTheme(theme).spacing(2)
+  footerStyles: theme => ({
+    padding: styles$1.scopeTheme(theme).spacing(2),
+    display: "flex",
+    flexDirection: "column",
+    gap: styles$1.scopeTheme(theme).spacing(2)
   }),
   footerList: {
     listStyle: "none"

package/dist/cjs/components/service-point-display/service-point-display.cjs

@@ -2,18 +2,10 @@
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var giger = require('@shipengine/giger');
-var gigerTheme = require('@shipengine/giger-theme');
-var React = require('react');
 var reactI18next = require('react-i18next');
 var operatingHours = require('./operating-hours.cjs');
 var servicePointDisplay_styles = require('./service-point-display.styles.cjs');
 
-/* https://auctane.atlassian.net/browse/ENGINE-7329
- * For iteration one we would hardcode services for which it will be available  (in the future this data will be in the registry. We will change hardcoding then)
- * carriersWithPaperless and servicesWithPaperless are hardcoded for iteration one
- */
-const carriersWithPaperless = "hermes";
-const servicesWithPaperless = ["hermes_domestic_parcelshop_dropoff", "hermes_domestic_parcelshop_dropoff_next_day", "hermes_postable", "hermes_postable_next_day"];
 const formatDistance = meters => {
   return meters < 1000 ? "< 1 km" : `${parseFloat((meters / 1000).toFixed(1))} km`;
 };
@@ -27,36 +19,9 @@ const ServicePointDisplay = ({
   const {
     t
   } = reactI18next.useTranslation("purchase-label");
-  const [isFilteredServicesWithPaperless, setIsFilteredServicesWithPaperless] = React.useState(false);
-  /* https://auctane.atlassian.net/browse/ENGINE-7329
-   * For iteration one we would hardcode services for which it will be available  (in the future this data will be in the registry. We will change hardcoding then)
-   */
-  React.useEffect(() => {
-    if (carriersWithPaperless === servicePoint.carrierCode) {
-      const filteredServicesWithPaperless = servicePoint.serviceCodes.map(serviceCode => {
-        return servicesWithPaperless.filter(service => service === serviceCode);
-      }).length > 0;
-      setIsFilteredServicesWithPaperless(filteredServicesWithPaperless);
-    }
-  }, [servicePoint.carrierCode, servicePoint.serviceCodes]);
   return jsxRuntime.jsxs("div", {
     css: servicePointDisplay_styles.styles.container,
-    children: [isFilteredServicesWithPaperless && jsxRuntime.jsxs("section", {
-      css: servicePointDisplay_styles.styles.paperlessWrapper,
-      children: [jsxRuntime.jsx(giger.Icon, {
-        css: servicePointDisplay_styles.styles.paperlessIcon,
-        name: gigerTheme.IconNames.PRINTER,
-        size: giger.IconSize.SIZE_MEDIUM
-      }), jsxRuntime.jsx(giger.Icon, {
-        css: servicePointDisplay_styles.styles.paperlessIcon,
-        name: gigerTheme.IconNames.SCAN_QR,
-        size: giger.IconSize.SIZE_MEDIUM
-      }), jsxRuntime.jsx(giger.Typography, {
-        css: servicePointDisplay_styles.styles.paperlessText,
-        variant: "small",
-        children: t("servicePoints.paperless")
-      })]
-    }), jsxRuntime.jsx("div", {
+    children: [jsxRuntime.jsx("div", {
       css: servicePointDisplay_styles.styles.getSelectedStyles(),
       children: jsxRuntime.jsx(giger.Typography, {
         bold: true,

package/dist/cjs/components/service-point-display/service-point-display.styles.cjs

@@ -19,18 +19,6 @@ const styles = styles$1.createStyles({
     gap: styles$1.scopeTheme(theme).spacing(1),
     justifyContent: "space-between"
   }),
-  paperlessIcon: theme => ({
-    color: styles$1.scopeTheme(theme).palette.gray[600],
-    paddingRight: "4px"
-  }),
-  paperlessText: theme => ({
-    color: styles$1.scopeTheme(theme).palette.gray[600],
-    paddingLeft: styles$1.scopeTheme(theme).spacing(0.5)
-  }),
-  paperlessWrapper: () => ({
-    display: "flex",
-    marginBottom: "12px"
-  }),
   selectButton: theme => ({
     backgroundColor: styles$1.scopeTheme(theme).palette.primary.main,
     borderRadius: styles$1.scopeTheme(theme).borderRadius.S,

package/dist/cjs/components/shipment-not-found-error/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var shipmentNotFoundError = require('./shipment-not-found-error.cjs');
+
+
+
+exports.ShipmentNotFoundError = shipmentNotFoundError.ShipmentNotFoundError;

package/dist/cjs/components/shipment-not-found-error/shipment-not-found-error.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var reactI18next = require('react-i18next');
+var shipmentNotFoundError_styles = require('./shipment-not-found-error.styles.cjs');
+
+const ShipmentNotFoundError = ({
+  shipmentId,
+  onCreateNewShipment
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation(["common", "purchase-label"]);
+  return jsxRuntime.jsxs("div", {
+    css: shipmentNotFoundError_styles.styles.container,
+    children: [jsxRuntime.jsx("div", {
+      css: shipmentNotFoundError_styles.styles.iconContainer,
+      children: jsxRuntime.jsx(giger.Icon, {
+        name: gigerTheme.IconNames.CANCEL,
+        size: giger.IconSize.SIZE_LARGE
+      })
+    }), jsxRuntime.jsx("div", {
+      css: shipmentNotFoundError_styles.styles.message,
+      children: t("common:errorMessages.shipmentNotFound", {
+        id: shipmentId
+      })
+    }), jsxRuntime.jsx(giger.Button, {
+      "data-testid": "create-new-shipment",
+      onClick: () => {
+        void (onCreateNewShipment === null || onCreateNewShipment === void 0 ? void 0 : onCreateNewShipment());
+      },
+      type: "button",
+      children: t("purchase-label:actions.createNewShipment")
+    })]
+  });
+};
+
+exports.ShipmentNotFoundError = ShipmentNotFoundError;

package/dist/cjs/components/shipment-not-found-error/shipment-not-found-error.styles.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  container: {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    justifyContent: "center",
+    textAlign: "center",
+    width: "100%"
+  },
+  iconContainer: theme => ({
+    color: styles$1.scopeTheme(theme).palette.error.main,
+    marginBottom: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  message: theme => ({
+    marginBottom: styles$1.scopeTheme(theme).spacing(2)
+  })
+});
+
+exports.styles = styles;

package/dist/cjs/components/suspend-purchase/suspend-purchase.cjs

@@ -2,13 +2,16 @@
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var reactI18next = require('react-i18next');
+var shipmentNotFoundError = require('../shipment-not-found-error/shipment-not-found-error.cjs');
 var loader = require('../loader/loader.cjs');
 
 const SuspendPurchase = ({
   children,
   errors,
   isLoading,
-  data
+  data,
+  onCreateNewShipment,
+  shipmentId
 }) => {
   const {
     t
@@ -17,7 +20,7 @@ const SuspendPurchase = ({
     message: t("loading.shipment")
   });
   if (errors) {
-    errors.forEach(error => {
+    for (const error of errors) {
       switch (error.message) {
         case "no_carriers":
           throw new Error(t("common:errorMessages.incompleteLabelPurchaseRequirements", {
@@ -33,8 +36,13 @@ const SuspendPurchase = ({
           }));
         case "label_purchased":
           throw new Error(t("common:errorMessages.labelHasBeenPurchased"));
+        case "shipment_not_found":
+          return jsxRuntime.jsx(shipmentNotFoundError.ShipmentNotFoundError, {
+            onCreateNewShipment: onCreateNewShipment,
+            shipmentId: shipmentId
+          });
       }
-    });
+    }
     throw new Error(errors.map(e => e.message).join(", "));
   }
   if (!data) throw new Error("errorMessages.unableToLoad.shipment");

package/dist/cjs/components/ups-terms-disclosure/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var upsTermsDisclosure = require('./ups-terms-disclosure.cjs');
+
+
+
+exports.UPSTermsDisclosure = upsTermsDisclosure.UPSTermsDisclosure;

package/dist/cjs/components/ups-terms-disclosure/ups-terms-disclosure.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var styles$1 = require('../../utilities/styles.cjs');
+var reactI18next = require('react-i18next');
+
+const styles = styles$1.createStyles({
+  upsDisclosure: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: styles$1.scopeTheme(theme).spacing(1)
+  })
+});
+const UPSTermsDisclosure = () => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  return jsxRuntime.jsxs("div", {
+    css: styles.upsDisclosure,
+    children: [jsxRuntime.jsx(giger.Typography, {
+      bold: true,
+      variant: "body1",
+      children: t("onboarding:upsDisclosure.title")
+    }), jsxRuntime.jsx(giger.Typography, {
+      variant: "body1",
+      children: t("onboarding:upsDisclosure.line1")
+    }), jsxRuntime.jsx(giger.Typography, {
+      variant: "body1",
+      children: t("onboarding:upsDisclosure.line2")
+    })]
+  });
+};
+
+exports.UPSTermsDisclosure = UPSTermsDisclosure;

package/dist/cjs/elements/labels-grid/hooks/use-labels-grid.cjs

@@ -3,6 +3,7 @@
 var react = require('@emotion/react');
 var useGetServiceName = require('../../../hooks/use-get-service-name.cjs');
 var reactApi = require('@shipengine/react-api');
+var files = require('../../../utilities/files.cjs');
 var styles = require('../../../utilities/styles.cjs');
 var React = require('react');
 var useTrackingStatusFilter = require('./use-tracking-status-filter.cjs');
@@ -16,9 +17,10 @@ const useLabelsGrid = ({
   showStatusFilter,
   showTrackingStatusFilter,
   fetchShipments,
-  sortDir
+  sortDir,
+  columns
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
   const initialFilters = {
     labelId: {
       enabled: !!showLabelIdFilter,
@@ -47,6 +49,7 @@ const useLabelsGrid = ({
     pagerProps
   } = usePager.usePager(PAGE_SIZE);
   const [filters, setFilters] = React.useState(initialFilters);
+  const [enabledLabelsExport, setEnabledLabelsExport] = React.useState(false);
   const clearAllFilters = () => {
     setFilters(initialFilters);
   };
@@ -134,6 +137,39 @@ const useLabelsGrid = ({
       sortDir: sortDir !== null && sortDir !== void 0 ? sortDir : "desc"
     }
   });
+  const {
+    data: exportLabelsData,
+    isInitialLoading: isExportLabelsinitialLoading,
+    isRefetching,
+    isError: isExportLabelsError
+  } = reactApi.useExportLabels({
+    enabled: enabledLabelsExport,
+    queryFnParams: {
+      labelStatus: ((_g = filters.status) === null || _g === void 0 ? void 0 : _g.value) || labelStatus,
+      labelId: ((_h = filters.labelId) === null || _h === void 0 ? void 0 : _h.value) || undefined,
+      shipmentId: filters.shipmentId.value || undefined,
+      sortDir: sortDir !== null && sortDir !== void 0 ? sortDir : "desc",
+      columns
+    }
+  });
+  React.useEffect(() => {
+    if (exportLabelsData && !isExportLabelsinitialLoading && !isRefetching) {
+      files.createLocalFileFromBlobResponse("label", exportLabelsData);
+      setEnabledLabelsExport(false);
+    }
+  }, [isExportLabelsinitialLoading, isRefetching, exportLabelsData]);
+  // This function will be called when the error display duration ends
+  const onExportErrorDurationEnd = () => {
+    setEnabledLabelsExport(false);
+  };
+  const onClickExportLabelsCSV = () => {
+    if (exportLabelsData) {
+      files.createLocalFileFromBlobResponse("label", exportLabelsData);
+      setEnabledLabelsExport(false);
+    } else {
+      setEnabledLabelsExport(true);
+    }
+  };
   const labels = React.useMemo(() => {
     // If tracking status filter is active, use the filtered labels from the hook
     if (isTrackingStatusFilterActive) {
@@ -169,8 +205,8 @@ const useLabelsGrid = ({
     data: labelFilterData,
     isError: isLabelFilterError,
     isInitialLoading: isLabelFilterLoading
-  } = reactApi.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;
+  } = reactApi.useGetLabel(((_j = filters.labelId) === null || _j === void 0 ? void 0 : _j.value) || undefined);
+  const isLabelFilterActive = (_k = filters.labelId) === null || _k === void 0 ? void 0 : _k.value;
   const isStatusFilteredOut = (status, filter) => {
     return (filter === null || filter === void 0 ? void 0 : filter.length) && !filter.includes(status);
   };
@@ -227,13 +263,16 @@ const useLabelsGrid = ({
     return [];
   };
   return {
+    onClickExportLabelsCSV,
     clearAllFilters,
     filters,
     getGridData,
     hasMoreUnfetchedResults: isTrackingStatusFilterActive ? hasMoreUnfetchedResults : false,
     isAnyFilterActive,
+    isExportLabelsError,
     isError: isListLabelsError || isListShipmentsError && fetchShipments,
     isFetchingNextPage: isTrackingStatusFilterActive ? isFetchingNextPage : false,
+    onExportErrorDurationEnd,
     // Calculate isLoading based on which query should be active
     isLoading:
     // Always include label filter loading when label ID filter is active
@@ -251,7 +290,8 @@ const useLabelsGrid = ({
       totalElements: labelFilteredById ? 1 : isTrackingStatusFilterActive ? (statusFilteredPaginationInfo === null || statusFilteredPaginationInfo === void 0 ? void 0 : statusFilteredPaginationInfo.totalCount) || 0 : (listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.total) || 0
     },
     setFilters: onSetFilters,
-    shouldShowFilters: isAnyFilterEnabled
+    shouldShowFilters: isAnyFilterEnabled,
+    isExportLabelsLoading: isExportLabelsinitialLoading || isRefetching
   };
 };
 

package/dist/cjs/elements/labels-grid/labels-grid.cjs

@@ -3,6 +3,7 @@
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var useSortableQuery = require('../../hooks/use-sortable-query.cjs');
 var giger = require('@shipengine/giger');
+var formatString = require('../../utilities/formatString.cjs');
 var React = require('react');
 var reactI18next = require('react-i18next');
 var useLabelsGrid = require('./hooks/use-labels-grid.cjs');
@@ -32,9 +33,10 @@ const Component = ({
   onRowClick,
   onClickExternalOrderId,
   onClickExternalShipmentId,
-  onClickShipmentNumber
+  onClickShipmentNumber,
+  onLabelsCSVExportClick
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const {
     t
   } = reactI18next.useTranslation(["common", "list-labels"]);
@@ -76,6 +78,7 @@ const Component = ({
   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 columnsArray = (_d = features === null || features === void 0 ? void 0 : features.columns) === null || _d === void 0 ? void 0 : _d.map(column => formatString.toSnakeCase(column.name));
   const {
     labels,
     getGridData,
@@ -88,7 +91,11 @@ const Component = ({
     pageConfig,
     isAnyFilterActive,
     shouldShowFilters,
-    clearAllFilters
+    clearAllFilters,
+    onClickExportLabelsCSV,
+    isExportLabelsError,
+    isExportLabelsLoading,
+    onExportErrorDurationEnd
   } = useLabelsGrid.useLabelsGrid({
     fetchShipments: !!shipmentNumberColumn,
     labelStatus,
@@ -96,7 +103,8 @@ const Component = ({
     showShipmentIdFilter,
     showStatusFilter,
     showTrackingStatusFilter,
-    sortDir: sortState.dir
+    sortDir: sortState.dir,
+    columns: columnsArray
   });
   React.useEffect(() => {
     if (prevStatus.current !== labelStatus) {
@@ -383,7 +391,7 @@ const Component = ({
       });
     }
     return cols;
-  }, [t, toggleCreatedDateSort, sortState.createdAtDir, features === null || features === void 0 ? void 0 : features.columns, features === null || features === void 0 ? void 0 : features.showActions, labels, onClickExternalOrderId, onClickExternalShipmentId, onClickShipmentNumber, onClickVoidLabel, onClickViewDetails, onClickPrintLabel, onClickPrintForms]);
+  }, [t, toggleCreatedDateSort, sortState.createdAtDir, features === null || features === void 0 ? void 0 : features.columns, features === null || features === void 0 ? void 0 : features.showActions, labels, onClickExternalOrderId, onClickExternalShipmentId, onClickShipmentNumber, onClickTrackingNumber, onClickVoidLabel, onClickViewDetails, onClickPrintLabel, onClickPrintForms]);
   const emptyContentComponent = React.useMemo(() => {
     if (isLoading) {
       return undefined;
@@ -434,8 +442,18 @@ const Component = ({
         showPagination: pageConfig.showPagination,
         total: pageConfig.totalElements
       }),
+      hasExportCSVError: isExportLabelsError,
+      hasTrackingStatusFilter: showTrackingStatusFilter,
+      isExportCSVLoading: isExportLabelsLoading,
       isLoading: isLoading,
-      onRowClick: onRowClick
+      onClickExportCSV: () => {
+        onClickExportLabelsCSV();
+        onLabelsCSVExportClick === null || onLabelsCSVExportClick === void 0 ? void 0 : onLabelsCSVExportClick();
+      },
+      onExportErrorDurationEnd: onExportErrorDurationEnd,
+      onRowClick: onRowClick,
+      showExportCSV: features === null || features === void 0 ? void 0 : features.showExportCSVButton,
+      totalAmountGridItems: pageConfig.totalElements
     }), globalFeatures.poweredByShipEngine && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(spacer.Spacer, {}), jsxRuntime.jsx(poweredByShipengine.PoweredByShipEngine, {})]
     })]