@shipengine/elements 2.25.0 → 2.26.0

package/dist/cjs/components/display-term/display-term.cjs

@@ -8,14 +8,23 @@ var reactI18next = require('react-i18next');
 var displayTerm_styles = require('./display-term.styles.cjs');
 
 const DisplayTerm = ({
-  term
+  terms
 }) => {
   const {
     t
   } = reactI18next.useTranslation();
-  return jsxRuntime.jsx("ul", {
+  const {
+    links,
+    disclosure
+  } = terms;
+  return jsxRuntime.jsxs("ul", {
     css: displayTerm_styles.styles.container,
-    children: term.links.map(({
+    children: [disclosure && jsxRuntime.jsx("li", {
+      css: {
+        listStyle: "none"
+      },
+      children: disclosure
+    }), links.map(({
       link,
       title
     }) => jsxRuntime.jsx("li", {
@@ -33,7 +42,7 @@ const DisplayTerm = ({
           size: giger.IconSize.SIZE_SMALL
         })]
       })
-    }, title))
+    }, title))]
   });
 };
 

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

@@ -0,0 +1,74 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var React = require('react');
+var reload = require('../../../assets/reload.svg.cjs');
+var errorBanner_styles = require('./error-banner.styles.cjs');
+var label = require('../../history/history-card/label/label.cjs');
+var linkAction = require('../../link-action/link-action.cjs');
+
+// This component is a temporary solution to handle error display, design is working to improve more error patterns to display
+const ErrorBanner = ({
+  labelText,
+  linkTitle,
+  onClick,
+  showReloadIcon,
+  duration,
+  onDurationEnd
+}) => {
+  const [isVisible, setIsVisible] = React.useState(true);
+  const timerRef = React.useRef(null);
+  // Set up the timer when the component mounts or duration changes
+  React.useEffect(() => {
+    if (duration && duration > 0) {
+      // Clear any existing timer
+      if (timerRef.current) clearTimeout(timerRef.current);
+      // Set up a new timer to hide the component after the specified duration
+      timerRef.current = setTimeout(() => {
+        setIsVisible(false);
+        // Call the onDurationEnd callback if provided
+        if (onDurationEnd) {
+          onDurationEnd();
+        }
+      }, duration);
+    }
+    // Clean up the timer when the component unmounts or duration changes
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [duration, onDurationEnd]);
+  if (!isVisible) return null;
+  return jsxRuntime.jsxs("div", {
+    css: errorBanner_styles.styles.errorContainer,
+    children: [showReloadIcon && jsxRuntime.jsx(reload, {
+      height: 24,
+      width: 24
+    }), linkTitle && !labelText && !onClick && jsxRuntime.jsxs("div", {
+      css: errorBanner_styles.styles.errorContent,
+      children: [jsxRuntime.jsx(giger.Icon, {
+        name: gigerTheme.IconNames.ALERT
+      }), jsxRuntime.jsx(giger.Typography, {
+        component: "p",
+        variant: "body2",
+        children: linkTitle
+      })]
+    }), linkTitle && labelText && onClick && jsxRuntime.jsx(label.Label, {
+      spacing: 0,
+      text: labelText !== null && labelText !== void 0 ? labelText : "",
+      textProps: {
+        css: errorBanner_styles.styles.errorHeading
+      },
+      variant: "subtitle",
+      children: jsxRuntime.jsx(linkAction.LinkAction, {
+        css: errorBanner_styles.styles.errorCTA,
+        isBold: false,
+        onClick: onClick,
+        title: linkTitle
+      })
+    })]
+  });
+};
+
+exports.ErrorBanner = ErrorBanner;

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/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, {})]
     })]

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

@@ -2,6 +2,7 @@
 
 var useGetServiceName = require('../../../hooks/use-get-service-name.cjs');
 var reactApi = require('@shipengine/react-api');
+var files = require('../../../utilities/files.cjs');
 var React = require('react');
 var createdDateValue = require('../utils/created-date-value.cjs');
 var usePager = require('../../../components/pager/usePager.cjs');
@@ -22,9 +23,10 @@ const useShipmentsGrid = ({
   showShipmentIdFilter = true,
   showCreatedDateFilter = true,
   sortBy,
-  sortDir
+  sortDir,
+  columns
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const initialFilters = getInitialFilters(showShipmentIdFilter, showCreatedDateFilter);
   const {
     getServiceName
@@ -35,6 +37,7 @@ const useShipmentsGrid = ({
     pagerProps
   } = usePager.usePager(PAGE_SIZE);
   const [activeShipmentId, setActiveShipmentId] = React.useState();
+  const [enabled, setEnabled] = React.useState(false);
   const [filters, setFilters] = React.useState(initialFilters);
   const clearAllFilters = () => {
     setFilters(initialFilters);
@@ -66,6 +69,37 @@ const useShipmentsGrid = ({
     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 {
+    data: exportShipmentsData,
+    isInitialLoading: isExportShipmentsinitialLoading,
+    isRefetching,
+    isError: isExportShipmentsError
+  } = reactApi.useExportShipments({
+    enabled,
+    queryFnParams: Object.assign({
+      shipmentId: filters.shipmentId.value || undefined,
+      sortDir: sortDir !== null && sortDir !== void 0 ? sortDir : "desc",
+      columns
+    }, createdDateValue.getCreatedDateFilterValue((_f = (_e = filters.createdDate) === null || _e === void 0 ? void 0 : _e.value) === null || _f === void 0 ? void 0 : _f.start, (_h = (_g = filters.createdDate) === null || _g === void 0 ? void 0 : _g.value) === null || _h === void 0 ? void 0 : _h.end))
+  });
+  React.useEffect(() => {
+    if (exportShipmentsData && !isExportShipmentsinitialLoading && !isRefetching) {
+      files.createLocalFileFromBlobResponse("shipment", exportShipmentsData);
+      setEnabled(false);
+    }
+  }, [isExportShipmentsinitialLoading, isRefetching, exportShipmentsData]);
+  // This function will be called when the error display duration ends
+  const onExportErrorDurationEnd = () => {
+    setEnabled(false);
+  };
+  const onClickDownloadShipmentsCSV = () => {
+    if (exportShipmentsData) {
+      files.createLocalFileFromBlobResponse("shipment", exportShipmentsData);
+      setEnabled(false);
+    } else {
+      setEnabled(true);
+    }
+  };
   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,
@@ -122,12 +156,15 @@ const useShipmentsGrid = ({
     return [];
   };
   return {
+    onClickDownloadShipmentsCSV,
     clearAllFilters,
     filters,
     getGridData,
     isAnyFilterActive,
+    isExportShipmentsError,
     isError,
     isLoading: isLoadingShipments || isLoadingShipment,
+    onExportErrorDurationEnd,
     pageConfig: {
       currentPage: shipmentFilteredById ? 1 : (data === null || data === void 0 ? void 0 : data.page) || 0,
       pagerProps,
@@ -139,7 +176,8 @@ const useShipmentsGrid = ({
     setActiveShipmentId,
     setFilters: onSetFilters,
     shipments,
-    shouldShowFilters: isAnyFilterEnabled
+    shouldShowFilters: isAnyFilterEnabled,
+    isExportShipmentsLoading: isExportShipmentsinitialLoading || isRefetching
   };
 };
 

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

@@ -48,7 +48,9 @@ const Component = ({
   onClickCancelShipment,
   shipmentStatus,
   showShipmentIdFilter = true,
-  showCreatedDateFilter = true
+  showCreatedDateFilter = true,
+  onShipmentsCSVExportClick,
+  showExportCSVButton = false
 }) => {
   const {
     globalFeatures
@@ -73,7 +75,11 @@ const Component = ({
     isAnyFilterActive,
     shouldShowFilters,
     clearAllFilters,
-    setActiveShipmentId
+    setActiveShipmentId,
+    onClickDownloadShipmentsCSV,
+    isExportShipmentsError,
+    isExportShipmentsLoading,
+    onExportErrorDurationEnd
   } = useShipmentsGrid.useShipmentsGrid({
     shipmentStatus,
     showCreatedDateFilter,
@@ -256,8 +262,17 @@ const Component = ({
         showPagination: pageConfig.showPagination,
         total: pageConfig.totalElements
       }),
+      hasExportCSVError: isExportShipmentsError,
+      isExportCSVLoading: isExportShipmentsLoading,
       isLoading: isLoading,
-      onRowClick: onRowClick
+      onClickExportCSV: () => {
+        onClickDownloadShipmentsCSV();
+        onShipmentsCSVExportClick === null || onShipmentsCSVExportClick === void 0 ? void 0 : onShipmentsCSVExportClick();
+      },
+      onExportErrorDurationEnd: onExportErrorDurationEnd,
+      onRowClick: onRowClick,
+      showExportCSV: showExportCSVButton,
+      totalAmountGridItems: pageConfig.totalElements
     }), globalFeatures.poweredByShipEngine && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(spacer.Spacer, {}), jsxRuntime.jsx(poweredByShipengine.PoweredByShipEngine, {})]
     })]