@shipengine/elements 2.24.1 → 2.26.0

package/dist/esm/components/ups-terms-disclosure/ups-terms-disclosure.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { Typography } from '@shipengine/giger';
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+import { useTranslation } from 'react-i18next';
+
+const styles = createStyles({
+  upsDisclosure: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: scopeTheme(theme).spacing(1)
+  })
+});
+const UPSTermsDisclosure = () => {
+  const {
+    t
+  } = useTranslation();
+  return jsxs("div", {
+    css: styles.upsDisclosure,
+    children: [jsx(Typography, {
+      bold: true,
+      variant: "body1",
+      children: t("onboarding:upsDisclosure.title")
+    }), jsx(Typography, {
+      variant: "body1",
+      children: t("onboarding:upsDisclosure.line1")
+    }), jsx(Typography, {
+      variant: "body1",
+      children: t("onboarding:upsDisclosure.line2")
+    })]
+  });
+};
+
+export { UPSTermsDisclosure };

package/dist/esm/elements/labels-grid/hooks/use-labels-grid.js

@@ -1,6 +1,7 @@
 import { useTheme } from '@emotion/react';
 import { useGetServiceName } from '../../../hooks/use-get-service-name.js';
-import { useListLabels, useListSalesOrderShipments, useGetLabel } from '@shipengine/react-api';
+import { useListLabels, useExportLabels, useListSalesOrderShipments, useGetLabel } from '@shipengine/react-api';
+import { createLocalFileFromBlobResponse } from '../../../utilities/files.js';
 import { scopeTheme } from '../../../utilities/styles.js';
 import { useState, useCallback, useEffect, useMemo } from 'react';
 import { useTrackingStatusFilter } from './use-tracking-status-filter.js';
@@ -14,9 +15,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,
@@ -45,6 +47,7 @@ const useLabelsGrid = ({
     pagerProps
   } = usePager(PAGE_SIZE);
   const [filters, setFilters] = useState(initialFilters);
+  const [enabledLabelsExport, setEnabledLabelsExport] = useState(false);
   const clearAllFilters = () => {
     setFilters(initialFilters);
   };
@@ -132,6 +135,39 @@ const useLabelsGrid = ({
       sortDir: sortDir !== null && sortDir !== void 0 ? sortDir : "desc"
     }
   });
+  const {
+    data: exportLabelsData,
+    isInitialLoading: isExportLabelsinitialLoading,
+    isRefetching,
+    isError: isExportLabelsError
+  } = 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
+    }
+  });
+  useEffect(() => {
+    if (exportLabelsData && !isExportLabelsinitialLoading && !isRefetching) {
+      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) {
+      createLocalFileFromBlobResponse("label", exportLabelsData);
+      setEnabledLabelsExport(false);
+    } else {
+      setEnabledLabelsExport(true);
+    }
+  };
   const labels = useMemo(() => {
     // If tracking status filter is active, use the filtered labels from the hook
     if (isTrackingStatusFilterActive) {
@@ -167,8 +203,8 @@ const useLabelsGrid = ({
     data: labelFilterData,
     isError: isLabelFilterError,
     isInitialLoading: isLabelFilterLoading
-  } = 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;
+  } = 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);
   };
@@ -225,13 +261,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
@@ -249,7 +288,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/esm/elements/labels-grid/labels-grid.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { useSortableQuery } from '../../hooks/use-sortable-query.js';
 import { EmptyState, Button, Tag, TagColor, TagVariant, Typography, Next } from '@shipengine/giger';
+import { toSnakeCase } from '../../utilities/formatString.js';
 import { useRef, useMemo, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLabelsGrid } from './hooks/use-labels-grid.js';
@@ -30,9 +31,10 @@ const Component = ({
   onRowClick,
   onClickExternalOrderId,
   onClickExternalShipmentId,
-  onClickShipmentNumber
+  onClickShipmentNumber,
+  onLabelsCSVExportClick
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const {
     t
   } = useTranslation(["common", "list-labels"]);
@@ -74,6 +76,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 => toSnakeCase(column.name));
   const {
     labels,
     getGridData,
@@ -86,7 +89,11 @@ const Component = ({
     pageConfig,
     isAnyFilterActive,
     shouldShowFilters,
-    clearAllFilters
+    clearAllFilters,
+    onClickExportLabelsCSV,
+    isExportLabelsError,
+    isExportLabelsLoading,
+    onExportErrorDurationEnd
   } = useLabelsGrid({
     fetchShipments: !!shipmentNumberColumn,
     labelStatus,
@@ -94,7 +101,8 @@ const Component = ({
     showShipmentIdFilter,
     showStatusFilter,
     showTrackingStatusFilter,
-    sortDir: sortState.dir
+    sortDir: sortState.dir,
+    columns: columnsArray
   });
   useEffect(() => {
     if (prevStatus.current !== labelStatus) {
@@ -381,7 +389,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 = useMemo(() => {
     if (isLoading) {
       return undefined;
@@ -432,8 +440,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 && jsxs(Fragment, {
       children: [jsx(Spacer, {}), jsx(PoweredByShipEngine, {})]
     })]

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

@@ -3,7 +3,7 @@ import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
 import { useQueryClient } from '@tanstack/react-query';
 import { formLogger } from '../../../../utilities/form-logger.js';
 import { validationResolver } from '../../../../utilities/validation.js';
-import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { rateSchema } from './rate-schema.js';
@@ -62,19 +62,28 @@ const RateForm = ({
     defaultValues: {
       rate: {
         isAcknowledged: true,
-        rateId: undefined
+        rateId: undefined,
+        labelDisplayScheme: undefined
       }
     },
     mode: "onChange",
     resolver: validationResolver(rateSchema)
   });
+  const handlePaperlessAcknowledgementChange = useCallback((_usePaperlessLabel, labelDisplayScheme) => {
+    form.setValue("rate.labelDisplayScheme", labelDisplayScheme, {
+      shouldDirty: true
+    });
+  }, [form]);
   const {
     rateId: selectedRateId
   } = form.watch("rate");
   const handleSubmit = formLogger.capture(form.handleSubmit(values => __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.
@@ -177,6 +186,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/esm/elements/purchase-label/components/rate-form/rate-schema.js

@@ -1,10 +1,15 @@
 import { z } from 'zod';
 
+const labelDisplaySchemeEnum = z.enum(["label", "paperless", "qr_code", "label_and_paperless"]);
 const rateSchema = z.object({
   rate: z.object({
     isAcknowledged: z.boolean().refine(v => v === true, "purchase-label:schemaErrors.needToAcknowledge"),
-    rateId: z.string()
+    rateId: z.string(),
+    labelDisplayScheme: labelDisplaySchemeEnum.optional()
   })
-}).transform(schema => schema.rate.rateId);
+}).transform(schema => ({
+  rateId: schema.rate.rateId,
+  labelDisplayScheme: schema.rate.labelDisplayScheme
+}));
 
 export { rateSchema };

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

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

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

@@ -9,6 +9,22 @@ import { useWindsorFramework } from './use-windsor-framework.js';
 import { PudoType } from '../../../types/pudo.js';
 import { CanadaDeliveredDutyOptions } from '../../../types/canada-ddp.js';
 
+/* 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
  *
@@ -35,6 +51,17 @@ const useRateOptions = (rates, fundingOrigin, preferredRates, carriers, shipment
     var _a;
     return ((_a = shipment === null || shipment === void 0 ? void 0 : shipment.advancedOptions) === null || _a === void 0 ? void 0 : _a.canadaDeliveredDuty) === 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 = useCallback(carrierCode => {
     return (
       // Filter out non-USPS carriers for Canada Delivered Duty prepaid shipments
@@ -57,7 +84,8 @@ const useRateOptions = (rates, fundingOrigin, preferredRates, carriers, shipment
       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");
@@ -73,7 +101,8 @@ const useRateOptions = (rates, fundingOrigin, preferredRates, carriers, shipment
         balance: fundingOrigin === null || fundingOrigin === void 0 ? void 0 : fundingOrigin.balance,
         messages: r.warningMessages,
         requiresAcknowledgement: 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/esm/elements/purchase-label/hooks/use-rates-form.js

@@ -12,11 +12,6 @@ import { useRatesWithCache } from './use-rates-with-cache.js';
 import { useServicePoints } from './use-service-points.js';
 import { useElements } from '../../../elements-provider/elements-context-provider.js';
 
-/* 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,
@@ -89,17 +84,11 @@ const useRatesForm = ({
     listServicePointsErrors,
     servicePointSearchQuery
   } = 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 = useCallback((rateId, shipment, rate, servicePoint) => __awaiter(void 0, void 0, void 0, function* () {
+  const purchaseLabel = useCallback((rateId, shipment, rate, servicePoint, displayScheme) => __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",
@@ -112,8 +101,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 SE.CodedError) {
+          callbackErrors = error;
+        }
+      }
+      yield onLabelCreateFailure === null || onLabelCreateFailure === void 0 ? void 0 : onLabelCreateFailure(rate, shipment, callbackErrors);
     }
   }), [createLabel, onLabelCreateFailure, onLabelCreateSuccess, printLabelLayout]);
   const onUpdatedShipment = useCallback(shipment => __awaiter(void 0, void 0, void 0, function* () {
@@ -187,7 +183,7 @@ const useRatesForm = ({
       return;
     }
   }), [onBeforeRateSaved, onUpdatedShipment, resetRates, shipment, updateShipment]);
-  const handleSubmit = useCallback((rateId, servicePoint) => __awaiter(void 0, void 0, void 0, function* () {
+  const handleSubmit = useCallback((rateId, servicePoint, displayScheme) => __awaiter(void 0, void 0, void 0, function* () {
     var _a, _b, _c, _d;
     setBeforeCreateError(undefined);
     if (!shipment) return;
@@ -235,12 +231,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/esm/elements/purchase-label/hooks/use-request-rates.js

@@ -2,7 +2,7 @@ import { __awaiter } from '../../../_virtual/_tslib.js';
 import { useListCarriers, useListCustomPackageTypes, useCalculateRates } from '@shipengine/react-api';
 import { omitTime } from '../../../utilities/date.js';
 import { useCallback, useMemo } from 'react';
-import rateMessages from '../../../data/rate-messages.json.js';
+import { buildRateWarningMessages } from '../../../utilities/rate-warning-messages.js';
 import { useRequestPreferredRates } from './use-request-preferred-rates.js';
 import { isShippingServiceServiceDisabled } from '../../../utilities/feature-flags/utils.js';
 
@@ -89,26 +89,26 @@ const useRequestRates = ({
   }, [ratedShipment]);
   const ratesCalculating = getPreferredRates ? preferredRatesCalculating || standardRatesCalculating : standardRatesCalculating;
   ratesResponse = 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[`${rate.serviceCode}:${shipDay}`]) !== null && _a !== void 0 ? _a : []), ...((_b = rateMessages[`${rate.serviceCode}:${rate.packageType}`]) !== null && _b !== void 0 ? _b : []), ...((_c = rateMessages[rate.serviceCode]) !== null && _c !== void 0 ? _c : []), ...rate.warningMessages]
-      });
-    })
+    rates: ratesResponse.rates.map(rate => Object.assign(Object.assign({}, rate), {
+      warningMessages: buildRateWarningMessages({
+        serviceCode: rate.serviceCode,
+        packageType: rate.packageType,
+        shipDay,
+        existingWarningMessages: rate.warningMessages
+      })
+    }))
   }), [ratesResponse, shipDay]);
-  const preferredRatesResponse = 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[`${r.rate.serviceCode}:${shipDay}`]) !== null && _a !== void 0 ? _a : []), ...((_b = rateMessages[`${r.rate.serviceCode}:${r.rate.packageType}`]) !== null && _b !== void 0 ? _b : []), ...((_c = rateMessages[r.rate.serviceCode]) !== null && _c !== void 0 ? _c : []), ...r.rate.warningMessages]
-      }),
-      rateAcknowledgementMessage: r.rateAcknowledgementMessage
-    };
-  }), [preferredResponse, shipDay]);
+  const preferredRatesResponse = useMemo(() => preferredResponse && preferredResponse.map(r => ({
+    rate: Object.assign(Object.assign({}, r.rate), {
+      warningMessages: 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/esm/elements/purchase-label/purchase-label.js

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

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

@@ -1,12 +1,13 @@
 import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
 import { useToggle } from '../../../../hooks/use-toggle.js';
-import { Next, ButtonVariant, Icon, IconSize, Typography, Tag } from '@shipengine/giger';
+import { Icon, IconSize, Tag, Next, Typography } from '@shipengine/giger';
 import { IconNames } from '@shipengine/giger-theme';
 import { formatDateDDMMYY } from '../../../../utilities/date.js';
 import { trackingStatusFormatter } from '../../../../utilities/tracking-formatter.js';
-import { useRef } from 'react';
+import { useRef, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { styles } from './label-card.styles.js';
+import { PaperlessLabelDisplay } from './paperless-label-display.js';
 import { ServiceCardContainer, ServiceCardHeader, ServiceCardFooter } from '../../../../components/service-card/service-card.js';
 import { InsurancePopover } from '../../../../components/insurance-popover/insurance-popover.js';
 import { useElements } from '../../../../elements-provider/elements-context-provider.js';
@@ -44,7 +45,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;
@@ -142,6 +144,18 @@ const LabelCard = ({
     shippingAmount,
     showExtendedData: selected
   };
+  const paperlessDownloadProps = 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 jsxs(ServiceCardContainer, {
     selected: selected,
     voided: displayAsVoided,
@@ -158,36 +172,7 @@ const LabelCard = ({
       },
       voided: displayAsVoided,
       children: trackable && jsx(TrackingNumberDisplay, {})
-    }), paperlessDownload && jsxs("div", {
-      css: styles.paperlessDownloadwrapper,
-      children: [jsxs("div", {
-        css: styles.codewrapper,
-        children: [jsx("img", {
-          alt: "paperless code",
-          css: styles.codeImage,
-          src: paperlessDownload === null || paperlessDownload === void 0 ? void 0 : paperlessDownload.href
-        }), jsx("div", {
-          css: styles.handoffCode,
-          children: paperlessDownload === null || paperlessDownload === void 0 ? void 0 : paperlessDownload.handoffCode.toString()
-        }), jsxs(Next.Link, {
-          buttonProps: {
-            variant: ButtonVariant.OUTLINED
-          },
-          css: styles.button,
-          download: true,
-          href: paperlessDownload === null || paperlessDownload === void 0 ? void 0 : paperlessDownload.href,
-          isButton: true,
-          children: [jsx(Icon, {
-            name: IconNames.PRINTER,
-            size: IconSize.SIZE_SMALL
-          }), jsx("span", {
-            children: t("view-shipment:actions.download")
-          })]
-        })]
-      }), jsx(Typography, {
-        children: paperlessDownload === null || paperlessDownload === void 0 ? void 0 : paperlessDownload.instructions
-      })]
-    }), showFooter && jsx(ServiceCardFooter, {
+    }), paperlessDownloadProps && "href" in paperlessDownloadProps && jsx(PaperlessLabelDisplay, Object.assign({}, paperlessDownloadProps)), showFooter && jsx(ServiceCardFooter, {
       messages: labelMessages
     })]
   });

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

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