@shipengine/elements 2.24.1 → 2.25.0

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/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;