@shipengine/elements 2.24.1 → 2.26.0

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

@@ -64,19 +64,28 @@ const RateForm = ({
     defaultValues: {
       rate: {
         isAcknowledged: true,
-        rateId: undefined
+        rateId: undefined,
+        labelDisplayScheme: undefined
       }
     },
     mode: "onChange",
     resolver: validation.validationResolver(rateSchema.rateSchema)
   });
+  const handlePaperlessAcknowledgementChange = React.useCallback((_usePaperlessLabel, labelDisplayScheme) => {
+    form.setValue("rate.labelDisplayScheme", labelDisplayScheme, {
+      shouldDirty: true
+    });
+  }, [form]);
   const {
     rateId: selectedRateId
   } = form.watch("rate");
   const handleSubmit = formLogger.formLogger.capture(form.handleSubmit(values => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-    const rateId = values;
+    const {
+      rateId,
+      labelDisplayScheme
+    } = values;
     try {
-      yield onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(rateId, selectedServicePoint);
+      yield onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(rateId, selectedServicePoint, labelDisplayScheme);
     } finally {
       // Invalidate carrier queries after the rate form is submitted, regardless of success.
       // This allows the carrier balance to refresh if the purchase failed but funding succeeded.
@@ -179,6 +188,7 @@ const RateForm = ({
         form: form,
         isCalculatingRates: isCalculatingRates,
         isSavingRate: isSavingRate,
+        onPaperlessAcknowledgementChange: handlePaperlessAcknowledgementChange,
         onSelectRate: rateId => {
           const selectedRate = rateOptions.find(r => r.rateId === rateId);
           if (selectedRate) {

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

@@ -2,11 +2,16 @@
 
 var zod = require('zod');
 
+const labelDisplaySchemeEnum = zod.z.enum(["label", "paperless", "qr_code", "label_and_paperless"]);
 const rateSchema = zod.z.object({
   rate: zod.z.object({
     isAcknowledged: zod.z.boolean().refine(v => v === true, "purchase-label:schemaErrors.needToAcknowledge"),
-    rateId: zod.z.string()
+    rateId: zod.z.string(),
+    labelDisplayScheme: labelDisplaySchemeEnum.optional()
   })
-}).transform(schema => schema.rate.rateId);
+}).transform(schema => ({
+  rateId: schema.rate.rateId,
+  labelDisplayScheme: schema.rate.labelDisplayScheme
+}));
 
 exports.rateSchema = rateSchema;

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

@@ -23,6 +23,7 @@ const RateView = ({
   form,
   isCalculatingRates,
   isSavingRate,
+  onPaperlessAcknowledgementChange,
   onSelectRate,
   preferredServiceCodes,
   pudoServicePointDetails = {
@@ -196,6 +197,7 @@ const RateView = ({
         label: "Rate",
         name: "rate",
         onClick: onSelectRate,
+        onPaperlessAcknowledgementChange: onPaperlessAcknowledgementChange,
         onSelectServicePoint: onSelectServicePoint,
         options: showHiddenRates ? expandedRateOptionList : collapsedRateOptionList
       }, rateSelectCommonProps)), expandedRateOptionList.length > COLLAPSED_RATE_VIEW_LIMIT && jsxRuntime.jsx(linkAction.LinkAction, {

package/dist/cjs/elements/purchase-label/hooks/use-rate-options.cjs

@@ -11,6 +11,22 @@ var useWindsorFramework = require('./use-windsor-framework.cjs');
 var pudo$1 = require('../../../types/pudo.cjs');
 var canadaDdp = require('../../../types/canada-ddp.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 hermesPaperlessSupportedServices = ["hermes_domestic_parcelshop_dropoff", "hermes_domestic_parcelshop_dropoff_next_day", "hermes_postable", "hermes_postable_next_day"];
+const paperlessSupportedCarriers = [{
+  carrier: "hermes",
+  services: hermesPaperlessSupportedServices,
+  displaySchemes: ["label_and_paperless"]
+}, {
+  carrier: "usps",
+  displaySchemes: ["qr_code"]
+}, {
+  carrier: "stamps_com",
+  displaySchemes: ["qr_code"]
+}];
 /**
  * @internal
  *
@@ -37,6 +53,17 @@ const useRateOptions = (rates$1, fundingOrigin, preferredRates, carriers, shipme
     var _a;
     return ((_a = shipment === null || shipment === void 0 ? void 0 : shipment.advancedOptions) === null || _a === void 0 ? void 0 : _a.canadaDeliveredDuty) === canadaDdp.CanadaDeliveredDutyOptions.SENDER_PREPAY;
   }, [(_a = shipment === null || shipment === void 0 ? void 0 : shipment.advancedOptions) === null || _a === void 0 ? void 0 : _a.canadaDeliveredDuty]);
+  const buildSupportedLabelDisplaySchemes = (carrierCode, serviceCode) => {
+    const carrier = paperlessSupportedCarriers.find(c => c.carrier === carrierCode);
+    if (!carrier || carrier.services && !carrier.services.includes(serviceCode)) {
+      return [];
+    }
+    // Only return USPS/stamps_com display schemes for domestic shipments
+    if ((carrierCode === 'usps' || carrierCode === 'stamps_com') && isInternational) {
+      return [];
+    }
+    return [...carrier.displaySchemes];
+  };
   const rateOptionsFilters = React.useCallback(carrierCode => {
     return (
       // Filter out non-USPS carriers for Canada Delivered Duty prepaid shipments
@@ -59,7 +86,8 @@ const useRateOptions = (rates$1, fundingOrigin, preferredRates, carriers, shipme
       messages: r.rate.warningMessages,
       rateAcknowledgementMessage: r.rateAcknowledgementMessage,
       requiresAcknowledgement: !!r.rateAcknowledgementMessage,
-      requiresFundedAmount: false
+      requiresFundedAmount: false,
+      paperlessDisplaySchemes: buildSupportedLabelDisplaySchemes(r.rate.carrierCode, r.rate.serviceCode)
     }));
   }, [preferredRates, rateOptionsFilters]);
   const noRatesForServiceMessage = t("purchase-label:rates.noRateService");
@@ -75,7 +103,8 @@ const useRateOptions = (rates$1, fundingOrigin, preferredRates, carriers, shipme
         balance: fundingOrigin === null || fundingOrigin === void 0 ? void 0 : fundingOrigin.balance,
         messages: r.warningMessages,
         requiresAcknowledgement: rates.getRateRequiresAcknowledgement(r.serviceCode, r.packageType, !!requireDhlTermsAcknowledgement),
-        requiresFundedAmount
+        requiresFundedAmount,
+        paperlessDisplaySchemes: buildSupportedLabelDisplaySchemes(r.carrierCode, r.serviceCode)
       });
       if (r.shippingAmount.amount === 0 && !r.warningMessages.includes(noRatesForServiceMessage)) {
         baseRateOption.messages.push(noRatesForServiceMessage);

package/dist/cjs/elements/purchase-label/hooks/use-rates-form.cjs

@@ -14,11 +14,6 @@ var useRatesWithCache = require('./use-rates-with-cache.cjs');
 var useServicePoints = require('./use-service-points.cjs');
 var elementsContextProvider = require('../../../elements-provider/elements-context-provider.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 servicesWithPaperless = ["hermes_domestic_parcelshop_dropoff", "hermes_domestic_parcelshop_dropoff_next_day", "hermes_postable", "hermes_postable_next_day"];
 const useRatesForm = ({
   getPreferredRates,
   disabledShippingServices,
@@ -91,17 +86,11 @@ const useRatesForm = ({
     listServicePointsErrors,
     servicePointSearchQuery
   } = useServicePoints.useServicePoints(ratesResponse === null || ratesResponse === void 0 ? void 0 : ratesResponse.rates, shipment);
-  const isDisplaySchemePaperless = rate => {
-    if ("hermes" === rate.carrierCode) {
-      return !!servicesWithPaperless.find(service => service === rate.serviceCode);
-    }
-    return false;
-  };
-  const purchaseLabel = React.useCallback((rateId, shipment, rate, servicePoint) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+  const purchaseLabel = React.useCallback((rateId, shipment, rate, servicePoint, displayScheme) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
     var _a;
     try {
       const label = yield createLabel({
-        displayScheme: isDisplaySchemePaperless(rate) ? "label_and_paperless" : "label",
+        displayScheme: displayScheme !== null && displayScheme !== void 0 ? displayScheme : "label",
         labelDownloadType: "url",
         labelFormat: "pdf",
         labelLayout: (_a = printLabelLayout === null || printLabelLayout === void 0 ? void 0 : printLabelLayout.toLowerCase()) !== null && _a !== void 0 ? _a : "4x6",
@@ -114,8 +103,15 @@ const useRatesForm = ({
       } else {
         yield onLabelCreateFailure === null || onLabelCreateFailure === void 0 ? void 0 : onLabelCreateFailure(rate, shipment);
       }
-    } catch (_b) {
-      yield onLabelCreateFailure === null || onLabelCreateFailure === void 0 ? void 0 : onLabelCreateFailure(rate, shipment);
+    } catch (error) {
+      // Only return errors from the createLabel mutation in the callback
+      let callbackErrors;
+      if (Array.isArray(error)) {
+        if (error[0] instanceof reactApi.SE.CodedError) {
+          callbackErrors = error;
+        }
+      }
+      yield onLabelCreateFailure === null || onLabelCreateFailure === void 0 ? void 0 : onLabelCreateFailure(rate, shipment, callbackErrors);
     }
   }), [createLabel, onLabelCreateFailure, onLabelCreateSuccess, printLabelLayout]);
   const onUpdatedShipment = React.useCallback(shipment => _tslib.__awaiter(void 0, void 0, void 0, function* () {
@@ -189,7 +185,7 @@ const useRatesForm = ({
       return;
     }
   }), [onBeforeRateSaved, onUpdatedShipment, resetRates, shipment, updateShipment]);
-  const handleSubmit = React.useCallback((rateId, servicePoint) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+  const handleSubmit = React.useCallback((rateId, servicePoint, displayScheme) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
     var _a, _b, _c, _d;
     setBeforeCreateError(undefined);
     if (!shipment) return;
@@ -237,12 +233,12 @@ const useRatesForm = ({
             });
             throw new Error("Insufficient funds. Please add funds before purchasing and try again.");
           } else {
-            yield purchaseLabel(rate.rateId, updatedShipment !== null && updatedShipment !== void 0 ? updatedShipment : shipment, rate, servicePoint);
+            yield purchaseLabel(rate.rateId, updatedShipment !== null && updatedShipment !== void 0 ? updatedShipment : shipment, rate, servicePoint, displayScheme);
             return;
           }
         }
         // The user has selected a standard rate and no further action is required before purchase
-        yield purchaseLabel(rateId, shipment, rate, servicePoint);
+        yield purchaseLabel(rateId, shipment, rate, servicePoint, displayScheme);
         return;
       } catch (e) {
         if (Array.isArray(e)) {

package/dist/cjs/elements/purchase-label/hooks/use-request-rates.cjs

@@ -4,7 +4,7 @@ var _tslib = require('../../../_virtual/_tslib.cjs');
 var reactApi = require('@shipengine/react-api');
 var date = require('../../../utilities/date.cjs');
 var React = require('react');
-var rateMessages = require('../../../data/rate-messages.json.cjs');
+var rateWarningMessages = require('../../../utilities/rate-warning-messages.cjs');
 var useRequestPreferredRates = require('./use-request-preferred-rates.cjs');
 var utils = require('../../../utilities/feature-flags/utils.cjs');
 
@@ -91,26 +91,26 @@ const useRequestRates = ({
   }, [ratedShipment]);
   const ratesCalculating = getPreferredRates ? preferredRatesCalculating || standardRatesCalculating : standardRatesCalculating;
   ratesResponse = React.useMemo(() => ratesResponse && Object.assign(Object.assign({}, ratesResponse), {
-    rates: ratesResponse.rates.map(rate => {
-      var _a, _b, _c;
-      return Object.assign(Object.assign({}, rate), {
-        warningMessages: [
-        // add additional rateMessages based on combinations of serviceCode, packageType and shipDay
-        ...((_a = rateMessages.default[`${rate.serviceCode}:${shipDay}`]) !== null && _a !== void 0 ? _a : []), ...((_b = rateMessages.default[`${rate.serviceCode}:${rate.packageType}`]) !== null && _b !== void 0 ? _b : []), ...((_c = rateMessages.default[rate.serviceCode]) !== null && _c !== void 0 ? _c : []), ...rate.warningMessages]
-      });
-    })
+    rates: ratesResponse.rates.map(rate => Object.assign(Object.assign({}, rate), {
+      warningMessages: rateWarningMessages.buildRateWarningMessages({
+        serviceCode: rate.serviceCode,
+        packageType: rate.packageType,
+        shipDay,
+        existingWarningMessages: rate.warningMessages
+      })
+    }))
   }), [ratesResponse, shipDay]);
-  const preferredRatesResponse = React.useMemo(() => preferredResponse && preferredResponse.map(r => {
-    var _a, _b, _c;
-    return {
-      rate: Object.assign(Object.assign({}, r.rate), {
-        warningMessages: [
-        // add additional rateMessages based on combinations of serviceCode, packageType and shipDay
-        ...((_a = rateMessages.default[`${r.rate.serviceCode}:${shipDay}`]) !== null && _a !== void 0 ? _a : []), ...((_b = rateMessages.default[`${r.rate.serviceCode}:${r.rate.packageType}`]) !== null && _b !== void 0 ? _b : []), ...((_c = rateMessages.default[r.rate.serviceCode]) !== null && _c !== void 0 ? _c : []), ...r.rate.warningMessages]
-      }),
-      rateAcknowledgementMessage: r.rateAcknowledgementMessage
-    };
-  }), [preferredResponse, shipDay]);
+  const preferredRatesResponse = React.useMemo(() => preferredResponse && preferredResponse.map(r => ({
+    rate: Object.assign(Object.assign({}, r.rate), {
+      warningMessages: rateWarningMessages.buildRateWarningMessages({
+        serviceCode: r.rate.serviceCode,
+        packageType: r.rate.packageType,
+        shipDay,
+        existingWarningMessages: r.rate.warningMessages
+      })
+    }),
+    rateAcknowledgementMessage: r.rateAcknowledgementMessage
+  })), [preferredResponse, shipDay]);
   return {
     isCalculating: ratesCalculating,
     preferredRatesResponse,

package/dist/cjs/elements/purchase-label/purchase-label.cjs

@@ -65,7 +65,8 @@ const Component = _a => {
     salesOrder,
     refetchPendingSalesOrderShipments,
     isLoading,
-    errors
+    errors,
+    createNewShipmentForNotFound
   } = useConfigureShipment.useConfigureShipment({
     errorWhenShipmentCancelled: features === null || features === void 0 ? void 0 : features.enableErrorWhenShipmentCancelled,
     externalOrderId,
@@ -92,6 +93,8 @@ const Component = _a => {
     data: shipment || salesOrder,
     errors: errors,
     isLoading: isLoading || insuranceIsLoading,
+    onCreateNewShipment: createNewShipmentForNotFound,
+    shipmentId: shipmentId,
     children: jsxRuntime.jsx(configureShipment.ConfigureShipment, Object.assign({
       currency: currency,
       features: features,

package/dist/cjs/elements/shipment-summary/components/label-display/label-card.cjs

@@ -9,6 +9,7 @@ var trackingFormatter = require('../../../../utilities/tracking-formatter.cjs');
 var React = require('react');
 var reactI18next = require('react-i18next');
 var labelCard_styles = require('./label-card.styles.cjs');
+var paperlessLabelDisplay = require('./paperless-label-display.cjs');
 var serviceCard = require('../../../../components/service-card/service-card.cjs');
 var insurancePopover = require('../../../../components/insurance-popover/insurance-popover.cjs');
 var elementsContextProvider = require('../../../../elements-provider/elements-context-provider.cjs');
@@ -46,7 +47,8 @@ const LabelCard = ({
     trackable = undefined,
     trackingNumber = undefined,
     trackingStatus = undefined,
-    trackingUrl = undefined
+    trackingUrl = undefined,
+    qrCodeDownload = undefined
   } = !displayAsVoided ? label : {};
   const carrierCode = carrier === null || carrier === void 0 ? void 0 : carrier.carrierCode;
   const carrierFriendlyName = carrier === null || carrier === void 0 ? void 0 : carrier.friendlyName;
@@ -144,6 +146,18 @@ const LabelCard = ({
     shippingAmount,
     showExtendedData: selected
   };
+  const paperlessDownloadProps = React.useMemo(() => {
+    // USPS paperless labels populate the qrCodeDownload property instead of paperlessDownload, use qrCodeDownload href if available and paperlessDownload is empty
+    if (!paperlessDownload || Object.keys(paperlessDownload).length === 0) {
+      if (qrCodeDownload && qrCodeDownload.href) {
+        return {
+          href: qrCodeDownload.href
+        };
+      }
+      return undefined;
+    }
+    return paperlessDownload;
+  }, [paperlessDownload, qrCodeDownload]);
   return jsxRuntime.jsxs(serviceCard.ServiceCardContainer, {
     selected: selected,
     voided: displayAsVoided,
@@ -160,36 +174,7 @@ const LabelCard = ({
       },
       voided: displayAsVoided,
       children: trackable && jsxRuntime.jsx(TrackingNumberDisplay, {})
-    }), paperlessDownload && jsxRuntime.jsxs("div", {
-      css: labelCard_styles.styles.paperlessDownloadwrapper,
-      children: [jsxRuntime.jsxs("div", {
-        css: labelCard_styles.styles.codewrapper,
-        children: [jsxRuntime.jsx("img", {
-          alt: "paperless code",
-          css: labelCard_styles.styles.codeImage,
-          src: paperlessDownload === null || paperlessDownload === void 0 ? void 0 : paperlessDownload.href
-        }), jsxRuntime.jsx("div", {
-          css: labelCard_styles.styles.handoffCode,
-          children: paperlessDownload === null || paperlessDownload === void 0 ? void 0 : paperlessDownload.handoffCode.toString()
-        }), jsxRuntime.jsxs(giger.Next.Link, {
-          buttonProps: {
-            variant: giger.ButtonVariant.OUTLINED
-          },
-          css: labelCard_styles.styles.button,
-          download: true,
-          href: paperlessDownload === null || paperlessDownload === void 0 ? void 0 : paperlessDownload.href,
-          isButton: true,
-          children: [jsxRuntime.jsx(giger.Icon, {
-            name: gigerTheme.IconNames.PRINTER,
-            size: giger.IconSize.SIZE_SMALL
-          }), jsxRuntime.jsx("span", {
-            children: t("view-shipment:actions.download")
-          })]
-        })]
-      }), jsxRuntime.jsx(giger.Typography, {
-        children: paperlessDownload === null || paperlessDownload === void 0 ? void 0 : paperlessDownload.instructions
-      })]
-    }), showFooter && jsxRuntime.jsx(serviceCard.ServiceCardFooter, {
+    }), paperlessDownloadProps && "href" in paperlessDownloadProps && jsxRuntime.jsx(paperlessLabelDisplay.PaperlessLabelDisplay, Object.assign({}, paperlessDownloadProps)), showFooter && jsxRuntime.jsx(serviceCard.ServiceCardFooter, {
       messages: labelMessages
     })]
   });

package/dist/cjs/elements/shipment-summary/components/label-display/label-card.styles.cjs

@@ -3,31 +3,12 @@
 var styles$1 = require('../../../../utilities/styles.cjs');
 
 const styles = styles$1.createStyles({
-  button: () => ({
-    cursor: "pointer"
-  }),
-  codeImage: () => ({
-    height: "120px",
-    maxWidth: "200px",
-    width: "auto"
-  }),
-  codewrapper: () => ({
-    alignItems: "center",
-    display: "flex",
-    flexDirection: "column"
-  }),
-  handoffCode: theme => ({
-    margin: `${styles$1.scopeTheme(theme).spacing(2)}px 0`
-  }),
   insuranceInfoIcon: theme => ({
     ":hover": {
       cursor: "pointer"
     },
     marginLeft: styles$1.scopeTheme(theme).spacing(0.5)
   }),
-  paperlessDownloadwrapper: theme => ({
-    padding: styles$1.scopeTheme(theme).spacing(2)
-  }),
   trackingNumber: () => ({
     maxWidth: "100%",
     overflow: "hidden",

package/dist/cjs/elements/shipment-summary/components/label-display/paperless-label-display.cjs

@@ -0,0 +1,54 @@
+'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 paperlessLabelDisplay_styles = require('./paperless-label-display.styles.cjs');
+var spacer = require('../../../../components/spacer/spacer.cjs');
+
+const PaperlessLabelDisplay = ({
+  handoffCode,
+  href,
+  instructions
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  return jsxRuntime.jsxs("div", {
+    css: paperlessLabelDisplay_styles.styles.paperlessDownloadwrapper,
+    children: [jsxRuntime.jsxs("div", {
+      css: paperlessLabelDisplay_styles.styles.codewrapper,
+      children: [jsxRuntime.jsx("img", {
+        alt: "paperless code",
+        css: paperlessLabelDisplay_styles.styles.codeImage,
+        src: href
+      }), handoffCode && jsxRuntime.jsx("div", {
+        css: paperlessLabelDisplay_styles.styles.handoffCode,
+        children: handoffCode
+      }), jsxRuntime.jsxs(giger.Next.Link, {
+        buttonProps: {
+          variant: giger.ButtonVariant.OUTLINED
+        },
+        css: paperlessLabelDisplay_styles.styles.button,
+        download: true,
+        href: href,
+        isButton: true,
+        children: [jsxRuntime.jsx(giger.Icon, {
+          name: gigerTheme.IconNames.PRINTER,
+          size: giger.IconSize.SIZE_SMALL
+        }), jsxRuntime.jsx("span", {
+          children: t("view-shipment:actions.download")
+        })]
+      })]
+    }), instructions && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(spacer.Spacer, {
+        multiplier: 2
+      }), " ", jsxRuntime.jsx(giger.Typography, {
+        children: instructions
+      })]
+    })]
+  });
+};
+
+exports.PaperlessLabelDisplay = PaperlessLabelDisplay;

package/dist/cjs/elements/shipment-summary/components/label-display/paperless-label-display.styles.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var styles$1 = require('../../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  button: () => ({
+    cursor: "pointer"
+  }),
+  codeImage: () => ({
+    height: "120px",
+    maxWidth: "200px",
+    width: "auto"
+  }),
+  codewrapper: () => ({
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column"
+  }),
+  handoffCode: theme => ({
+    margin: `${styles$1.scopeTheme(theme).spacing(2)}px 0`
+  }),
+  paperlessDownloadwrapper: theme => ({
+    padding: styles$1.scopeTheme(theme).spacing(2)
+  })
+});
+
+exports.styles = styles;

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

package/dist/cjs/features/manage-carriers/hooks/use-list-funding-source-carriers.cjs

@@ -45,22 +45,21 @@ const useListFundingSourceCarriers = () => {
       }, insurance.getInsuranceProviderWithFriendlyName(t.termType));
     });
   }, [optionalTerms, insuranceProviderAcceptedTerms]);
-  const normalizeConnectedCarrierCodes = new Set(connectedCarriers === null || connectedCarriers === void 0 ? void 0 : connectedCarriers.map(c => {
-    var _a;
-    return c.carrierCode === "usps" || ((_a = c.nickname) === null || _a === void 0 ? void 0 : _a.includes("free")) ? "stamps_com" : c.carrierCode;
-  }));
-  const fundingSourceCarrierMetadata = carrierProfiles === null || carrierProfiles === void 0 ? void 0 : carrierProfiles.map(cp => {
+  const normalizeCarrierCode = (carrierCode, nickname) => carrierCode === "usps" || (nickname === null || nickname === void 0 ? void 0 : nickname.includes("free")) ? "stamps_com" : carrierCode;
+  const normalizeConnectedCarrierCodes = new Set(connectedCarriers === null || connectedCarriers === void 0 ? void 0 : connectedCarriers.map(c => normalizeCarrierCode(c.carrierCode, c.nickname)));
+  const fundingSourceCarriersData = carrierProfiles === null || carrierProfiles === void 0 ? void 0 : carrierProfiles.map(cp => {
     var _a, _b;
-    return {
+    const carrier = {
       carrierProfile: cp,
       friendlyName: (_b = (_a = carrierMetadata[cp.carrierCode]) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : cp.carrierCode
     };
+    return {
+      carrier,
+      isConnected: normalizeConnectedCarrierCodes.has(cp.carrierCode)
+    };
   });
   return {
-    data: fundingSourceCarrierMetadata === null || fundingSourceCarrierMetadata === void 0 ? void 0 : fundingSourceCarrierMetadata.map(m => ({
-      carrier: m,
-      isConnected: normalizeConnectedCarrierCodes.has(m.carrierProfile.carrierCode)
-    })),
+    data: fundingSourceCarriersData,
     error: error,
     insuranceProviderProfiles,
     isLoading: isInitialLoading || isFundingSourceMetadataLoading || isInsuranceProviderAcceptedTermsLoading,