@shipengine/elements 2.24.1 → 2.26.0

package/dist/cjs/workflows/label-workflow/label-workflow.cjs

@@ -46,6 +46,7 @@ const Component = _a => {
     data: accountSettings
   } = reactApi.useGetAccountSettings();
   const {
+    createNewShipmentForNotFound,
     shipment: shipment$1,
     salesOrder,
     isLoading: isConfiguringShipment,
@@ -59,19 +60,24 @@ const Component = _a => {
     useWarehouses: (_b = propFeatures === null || propFeatures === void 0 ? void 0 : propFeatures.shipmentForm) === null || _b === void 0 ? void 0 : _b.useWarehouses,
     warehouseId
   }));
+  // Track if we have a shipment_not_found error to avoid reusing the bad shipment ID
+  const hasShipmentNotFoundError = configureShipmentErrors === null || configureShipmentErrors === void 0 ? void 0 : configureShipmentErrors.some(error => error.message === "shipment_not_found");
+  const shipmentId = _multiplexedId && "shipmentId" in _multiplexedId ? _multiplexedId.shipmentId : undefined;
   const {
     data: insuranceAccount,
     isInitialLoading: insuranceIsLoading
   } = reactApi.useGetInsuranceAccount((shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.insuranceProvider) === reactApi.SE.InsuranceProviderType.SHIPSURANCE ? reactApi.SE.InsuranceProviderType.SHIPSURANCE : undefined);
   const {
     data: labelsResponse,
-    isLoading: isLabelsLoading,
+    isFetching: isLabelsLoading,
     error: listLabelsErrors,
     refetch: refetchLabels
   } = reactApi.useListLabels({
-    enabled: _multiplexedId && "shipmentId" in _multiplexedId ? true : !!(shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.shipmentId),
+    enabled:
+    // Don't enable if we have a shipment_not_found error (avoid reusing bad ID)
+    hasShipmentNotFoundError ? false : _multiplexedId && "shipmentId" in _multiplexedId ? true : !!(shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.shipmentId),
     queryFnParams: {
-      shipmentId: _multiplexedId && "shipmentId" in _multiplexedId ? _multiplexedId.shipmentId : shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.shipmentId
+      shipmentId: (shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.shipmentId) || (!hasShipmentNotFoundError ? shipmentId : undefined)
     }
   });
   /**
@@ -175,6 +181,8 @@ const Component = _a => {
     data: shipment$1 || salesOrder,
     errors: errors.length ? errors : undefined,
     isLoading: isLabelsLoading || isConfiguringShipment || insuranceIsLoading,
+    onCreateNewShipment: createNewShipmentForNotFound,
+    shipmentId: shipmentId,
     children: element && getElement(element)
   });
 };

package/dist/cjs/workflows/onboarding/components/confirmation-and-submission-step/confirmation-and-submission-step.cjs

@@ -73,7 +73,7 @@ const ConfirmationAndSubmissionStep = ({
       }),
       children: [jsxRuntime.jsx(ccProviderLogo.CcProviderLogo, {
         provider: provider,
-        width: 36
+        width: 56
       }), jsxRuntime.jsx(giger.Typography, {
         variant: "body2",
         children: `**** **** **** ${last4 !== null && last4 !== void 0 ? last4 : "****"}`

package/dist/cjs/workflows/onboarding/components/confirmation-and-submission-step/use-confirmation-and-submission-step.cjs

@@ -1,10 +1,12 @@
 'use strict';
 
 var _tslib = require('../../../../_virtual/_tslib.cjs');
+var useScrubErrors = require('../../../../hooks/use-scrub-errors.cjs');
 var reactApi = require('@shipengine/react-api');
 var checks = require('../../../../utilities/checks.cjs');
 var warehouses = require('../../../../utilities/shipengine/warehouses.cjs');
 var React = require('react');
+var reactI18next = require('react-i18next');
 var useManageWarehouses = require('../../../../features/manage-warehouses/use-manage-warehouses.cjs');
 var elementsContextProvider = require('../../../../elements-provider/elements-context-provider.cjs');
 
@@ -15,6 +17,9 @@ const useConfirmationAndSubmissionStep = ({
     globalFeatures,
     getToken
   } = elementsContextProvider.useElements();
+  const {
+    t
+  } = reactI18next.useTranslation();
   const [isSubmittingOnboarding, setIsSubmittingOnboarding] = React.useState(false);
   const {
     createWarehouse,
@@ -35,6 +40,15 @@ const useConfirmationAndSubmissionStep = ({
     mutateAsync: createFundingSource,
     reset: resetCreateFundingSource
   } = reactApi.useCreateFundingSource();
+  const displayableCreateFundingSourceErrors = useScrubErrors.useScrubErrors({
+    errors: createFundingSourceErrors !== null && createFundingSourceErrors !== void 0 ? createFundingSourceErrors : undefined,
+    predicate: React.useCallback(e => e.message.includes("An unexpected error occurred."), []),
+    scrubber: React.useCallback(() => {
+      return `${t("common:errorMessages.fundingSourceCreationFailed", {
+        email: globalFeatures.supportEmailAddress
+      })} `;
+    }, [globalFeatures.supportEmailAddress, t])
+  });
   const {
     error: updatePaymentMethodErrors,
     isLoading: isUpdatingPaymentMethod,
@@ -296,7 +310,9 @@ const useConfirmationAndSubmissionStep = ({
     setIsSubmittingOnboarding(false);
   }), [onboardSeller, updateExistingFundingSource, onStepComplete, createFundingSourceErrors, registerCarrierErrors, updatePaymentMethodErrors, updateWarehouseErrors]);
   return {
-    createFundingSourceErrors,
+    createFundingSourceErrors: displayableCreateFundingSourceErrors === null || displayableCreateFundingSourceErrors === void 0 ? void 0 : displayableCreateFundingSourceErrors.map(message => ({
+      message
+    })),
     createOnboardingSubmissionHandler,
     isLoading: {
       connectingCarriers: isRegisteringCarriers,

package/dist/cjs/workflows/onboarding/components/onboarding-wizard/onboarding-wizard.cjs

@@ -61,6 +61,7 @@ const OnboardingWizard = ({
     isLoadingTermsAgreementStep,
     fundingSourceRequiredTerms,
     fundingSourceMetadata,
+    hasFreeStampsConnected,
     handleSubmitTermsAgreement,
     refetchCarriers,
     refetchFundingSources,
@@ -167,8 +168,10 @@ const OnboardingWizard = ({
       return jsxRuntime.jsx(termsAgreementStep.TermsAgreementStep, {
         carrierProfilesToRegister: carrierProfilesToRegister,
         enabledCarrierProfiles: enabledCarrierProfiles,
+        fundingSourceRequiredTerms: fundingSourceRequiredTerms,
         insuranceProviderProfiles: insuranceProviderProfiles,
-        onSubmit: handleSubmitTermsAgreement
+        onSubmit: handleSubmitTermsAgreement,
+        showStampsLogo: hasFreeStampsConnected
       });
     },
     label: t("onboarding:stepLabel.termsAgreement")

package/dist/cjs/workflows/onboarding/components/terms-agreement-form/terms-agreement-form.cjs

@@ -20,6 +20,7 @@ var submitButton = require('../../../../components/field/submit-button/submit-bu
 const TermsAgreementForm = ({
   carrierTerms,
   hideTerms,
+  requiredTerms = [],
   insuranceProviderTerms,
   isSubmitDisabled,
   onSubmit
@@ -87,32 +88,38 @@ const TermsAgreementForm = ({
           variant: "body1",
           children: t("terms.shipEngineTitle")
         }), jsxRuntime.jsx(displayTerm.DisplayTerm, {
-          term: {
+          terms: {
             links: [{
               link: "https://www.shipengine.com/terms-of-service/",
-              locale: "en-US",
-              title: t("onboarding:termsAndAgreementLinkText.shipEngineToS")
+              title: "ShipEngine Terms of Service",
+              locale: "en-US"
             }, {
-              link: "https://auctane.com/legal/privacy-policy/",
-              locale: "en-US",
-              title: t("onboarding:termsAndAgreementLinkText.auctanePrivacyPolicy")
+              link: "https://www.auctane.com/terms-of-service/",
+              title: "Auctane Terms of Service",
+              locale: "en-US"
+            }, {
+              link: "https://www.stamps.com/wallet-terms-of-service/",
+              title: "Stamps Wallet Terms of Service",
+              locale: "en-US"
             }]
           }
-        }), !!carrierTerms.length && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        }), requiredTerms.map(term => jsxRuntime.jsx(displayTerm.DisplayTerm, {
+          terms: term
+        }, term.termType)), !!carrierTerms.length && jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [jsxRuntime.jsx(spacer.Spacer, {}), jsxRuntime.jsx(giger.Typography, {
             bold: true,
             variant: "body1",
             children: t("terms.carriersTitle")
-          }), carrierTerms.map(term => jsxRuntime.jsx(displayTerm.DisplayTerm, {
-            term: term
-          }, term.termType))]
+          }), carrierTerms.map((term, idx) => jsxRuntime.jsx(displayTerm.DisplayTerm, {
+            terms: term
+          }, idx))]
         }), enableParcelGuard && !!insuranceProviderTerms.length && jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [jsxRuntime.jsx(spacer.Spacer, {}), jsxRuntime.jsx(giger.Typography, {
             bold: true,
             variant: "body1",
             children: t("terms.insuranceProvidersTitle")
           }), insuranceProviderTerms.map(term => jsxRuntime.jsx(displayTerm.DisplayTerm, {
-            term: term
+            terms: term
           }, term.termType))]
         })]
       }), jsxRuntime.jsx(buttonGroup.ButtonGroup, {

package/dist/cjs/workflows/onboarding/components/terms-agreement-form/terms-agreement-form.styles.cjs

@@ -15,9 +15,6 @@ const styles = styles$1.createStyles({
     display: "inline-flex",
     fontWeight: styles$1.scopeTheme(theme).typography.fontWeight.normal
   }),
-  fullWidth: {
-    width: "100%"
-  },
   termsWell: theme => ({
     backgroundColor: styles$1.scopeTheme(theme).palette.gray.ultraLight,
     marginBottom: styles$1.scopeTheme(theme).spacing(6),

package/dist/cjs/workflows/onboarding/components/terms-agreement-step/terms-agreement-step.cjs

@@ -8,15 +8,19 @@ var termsAgreementStep_styles = require('./terms-agreement-step.styles.cjs');
 var termsAgreementForm = require('../terms-agreement-form/terms-agreement-form.cjs');
 var useCarrierMetadata = require('../../../../features/manage-carriers/hooks/use-carrier-metadata.cjs');
 var elementsContextProvider = require('../../../../elements-provider/elements-context-provider.cjs');
+var upsTermsDisclosure = require('../../../../components/ups-terms-disclosure/ups-terms-disclosure.cjs');
 var spacer = require('../../../../components/spacer/spacer.cjs');
 var stepHeader = require('../step-header/step-header.cjs');
+var carrierIcon = require('../../../../components/carrier-icon/carrier-icon.cjs');
 var carrierLogo = require('../../../../components/carrier-logo/carrier-logo.cjs');
 
 const TermsAgreementStep = ({
   carrierProfilesToRegister,
   insuranceProviderProfiles,
   onSubmit,
-  enabledCarrierProfiles
+  enabledCarrierProfiles,
+  fundingSourceRequiredTerms,
+  showStampsLogo = false
 }) => {
   var _a, _b, _c, _d, _e;
   const {
@@ -29,11 +33,17 @@ const TermsAgreementStep = ({
   } = elementsContextProvider.useElements();
   const carrierFriendlyNames = useCarrierMetadata.useCarrierMetadata();
   const hideTerms = carrierProfilesToRegister.length === 0 && (insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles.length) === 0;
-  const carrierTerms = carrierProfilesToRegister.flatMap(c => c.requiredTerms);
+  const carrierTerms = carrierProfilesToRegister.map(c => {
+    const disclosure = c.carrierCode === "ups_walleted" ? jsxRuntime.jsx(upsTermsDisclosure.UPSTermsDisclosure, {}) : undefined;
+    return {
+      links: c.requiredTerms.flatMap(term => term.links),
+      disclosure
+    };
+  });
   const insuranceProviderTerms = (_a = insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles.flatMap(p => p.terms)) !== null && _a !== void 0 ? _a : [];
   const showParcelGuard = enableParcelGuard && ((_b = insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles.length) !== null && _b !== void 0 ? _b : 0) > 0;
   const hasInsuranceToRegister = showParcelGuard && ((_c = insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles.length) !== null && _c !== void 0 ? _c : 0) > 0;
-  const hasEnabledCarriersConfigurationError = !enabledCarrierProfiles || (enabledCarrierProfiles === null || enabledCarrierProfiles === void 0 ? void 0 : enabledCarrierProfiles.length) === 0;
+  const hasEnabledCarriersConfigurationError = !showStampsLogo && (!enabledCarrierProfiles || (enabledCarrierProfiles === null || enabledCarrierProfiles === void 0 ? void 0 : enabledCarrierProfiles.length) === 0);
   const hasAlreadyConnectedCarriers = ((_d = enabledCarrierProfiles === null || enabledCarrierProfiles === void 0 ? void 0 : enabledCarrierProfiles.length) !== null && _d !== void 0 ? _d : 0) > 0 && carrierProfilesToRegister.length === 0 && (insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles.length) === 0;
   const hasCarriersToRegister = ((_e = enabledCarrierProfiles === null || enabledCarrierProfiles === void 0 ? void 0 : enabledCarrierProfiles.length) !== null && _e !== void 0 ? _e : 0) > 0 && carrierProfilesToRegister.length > 0;
   // Handle case where partner has not correctly enabled carriers and there is no insurance to register
@@ -48,20 +58,33 @@ const TermsAgreementStep = ({
       children: t("errors.noCarriers.subtitle")
     });
   }
-  const renderCarrierLogos = () => {
-    if (!carrierProfilesToRegister.length) return null;
-    return carrierProfilesToRegister.map(p => {
+  const renderCarrierIcons = () => {
+    var _a;
+    const stampsCarrierProfile = {
+      carrierCode: "stamps_com",
+      carrierName: (_a = carrierFriendlyNames["stamps_com"]) === null || _a === void 0 ? void 0 : _a.name
+    };
+    let carriersToDisplay;
+    // kind of a goofy way to just display stamps/usps logo without sending it in the payload to register
+    // we don't want to register stamps as a carrier if it's not being used as the primary payment method
+    if (showStampsLogo) {
+      carriersToDisplay = [stampsCarrierProfile, ...carrierProfilesToRegister];
+    } else {
+      carriersToDisplay = carrierProfilesToRegister;
+    }
+    return carriersToDisplay.map(p => {
       var _a;
-      return jsxRuntime.jsx(carrierLogo.CarrierLogo, {
+      return jsxRuntime.jsx(carrierIcon.CarrierIcon, {
         carrierCode: p.carrierCode,
         carrierName: ((_a = carrierFriendlyNames[p.carrierCode]) === null || _a === void 0 ? void 0 : _a.name) || p.carrierCode,
-        size: "lg"
+        size: giger.IconSize.SIZE_EXTRA_LARGE
       }, p.carrierCode);
     });
   };
   const renderInsuranceLogos = () => {
     if (!hasInsuranceToRegister) return null;
-    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    return jsxRuntime.jsxs("div", {
+      css: termsAgreementStep_styles.styles.insuranceLogosContainer,
       children: [hasCarriersToRegister && jsxRuntime.jsx(giger.Icon, {
         css: termsAgreementStep_styles.styles.plus,
         name: gigerTheme.IconNames.PLUS,
@@ -87,13 +110,13 @@ const TermsAgreementStep = ({
       }), jsxRuntime.jsx(spacer.Spacer, {
         multiplier: 4
       })]
-    }), (hasCarriersToRegister || hasInsuranceToRegister) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    }), (hasCarriersToRegister || hasInsuranceToRegister || showStampsLogo) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(stepHeader.StepHeader, {
         subtitle: t("termsAgreement.subtitle"),
         title: t("termsAgreement.title")
       }), jsxRuntime.jsxs("div", {
         css: termsAgreementStep_styles.styles.carrierLogos,
-        children: [renderCarrierLogos(), renderInsuranceLogos()]
+        children: [renderCarrierIcons(), renderInsuranceLogos()]
       })]
     }), jsxRuntime.jsx("div", {
       css: termsAgreementStep_styles.styles.fullWidth,
@@ -101,7 +124,8 @@ const TermsAgreementStep = ({
         carrierTerms: carrierTerms,
         hideTerms: hideTerms,
         insuranceProviderTerms: insuranceProviderTerms,
-        onSubmit: onSubmit
+        onSubmit: onSubmit,
+        requiredTerms: fundingSourceRequiredTerms
       })
     })]
   });

package/dist/cjs/workflows/onboarding/components/terms-agreement-step/terms-agreement-step.styles.cjs

@@ -9,7 +9,8 @@ const styles = styles$1.createStyles({
     flexWrap: "wrap",
     gap: styles$1.scopeTheme(theme).spacing(1),
     justifyContent: "center",
-    padding: `${styles$1.scopeTheme(theme).spacing(3)}px 0`
+    alignItems: "center",
+    padding: `${styles$1.scopeTheme(theme).spacing(2)}px 0`
   }),
   container: theme => ({
     alignItems: "center",
@@ -22,9 +23,14 @@ const styles = styles$1.createStyles({
   fullWidth: {
     width: "100%"
   },
-  plus: () => ({
-    alignItems: "center",
-    display: "flex"
+  plus: theme => ({
+    alignSelf: "center",
+    paddingBottom: styles$1.scopeTheme(theme).spacing(1)
+  }),
+  insuranceLogosContainer: theme => ({
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(1),
+    paddingTop: styles$1.scopeTheme(theme).spacing(1)
   })
 });
 

package/dist/cjs/workflows/onboarding/components/terms-agreement-step/use-terms-agreement-step.cjs

@@ -34,26 +34,25 @@ const useTermsAgreementStep = ({
   const fundingSourceRegion = fundingSourceMetadata === null || fundingSourceMetadata === void 0 ? void 0 : fundingSourceMetadata.defaultRegionProfile.countryCode;
   const fundingSourceCarrierProfiles = fundingSourceMetadata === null || fundingSourceMetadata === void 0 ? void 0 : fundingSourceMetadata.defaultRegionProfile.carrierProfiles;
   const carrierProfilesFilteredByRegion = carrier.filterFundingSourceCarriers(fundingSourceCarrierProfiles, fundingSourceRegion);
+  const hasFreeStampsConnected = carriers === null || carriers === void 0 ? void 0 : carriers.some(c => c.carrierCode === "stamps_com" && c.fundingSourceId === null);
   // filter carrier profiles based on enabled carriers
-  const enabledCarrierProfiles = carrierProfilesFilteredByRegion === null || carrierProfilesFilteredByRegion === void 0 ? void 0 : carrierProfilesFilteredByRegion.filter(c => enabledCarriers.includes(c.carrierCode));
+  const enabledCarrierProfiles = carrierProfilesFilteredByRegion === null || carrierProfilesFilteredByRegion === void 0 ? void 0 : carrierProfilesFilteredByRegion.filter(c => {
+    if (c.carrierCode === "stamps_com" && hasFreeStampsConnected) {
+      // if stamps_com is connected as a free account, we don't want to show it in the list of carriers to register. The funding source creation will convert it to a walleted carrier as the default carrier.
+      return false;
+    }
+    // filter out carriers that are not enabled by the feature flag
+    return enabledCarriers.includes(c.carrierCode);
+  });
   const carrierProfilesToRegister = React.useMemo(() => {
     if (!enabledCarrierProfiles) return [];
-    // add Stamps/USPS carrier ToS from funding source terms
-    const carrierProfiles = enabledCarrierProfiles.map(c => {
-      if (c.carrierCode === "stamps_com" && fundingSourceRequiredTerms) {
-        return Object.assign(Object.assign({}, c), {
-          requiredTerms: [...fundingSourceRequiredTerms, ...c.requiredTerms]
-        });
-      }
-      return c;
-    });
     // handle existing funding source
     const {
       fundingSourceId
     } = (fundingSources === null || fundingSources === void 0 ? void 0 : fundingSources[0]) || {};
-    if (!fundingSourceId || !carriers) return carrierProfiles;
+    if (!fundingSourceId || !carriers) return enabledCarrierProfiles;
     const connectedCarriers = carriers.filter(c => c.fundingSourceId === fundingSourceId);
-    return carrierProfiles.filter(profile => {
+    return enabledCarrierProfiles.filter(profile => {
       // filter out carriers that are already connected
       const isConnected = connectedCarriers.some(c => c.carrierCode === profile.carrierCode && c.fundingSourceId === fundingSourceId);
       // if stamps_com is enabled, and usps is connected to the funding source,
@@ -100,6 +99,7 @@ const useTermsAgreementStep = ({
     carrierProfilesToRegister,
     enabledCarrierProfiles,
     fundingSourceMetadata,
+    hasFreeStampsConnected,
     fundingSourceRequiredTerms,
     fundingSources,
     handleSubmitTermsAgreement,

package/dist/esm/components/display-term/display-term.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import { Link, Icon, IconSize } from '@shipengine/giger';
 import { IconNames } from '@shipengine/giger-theme';
 import { encode } from 'js-base64';
@@ -6,14 +6,23 @@ import { useTranslation } from 'react-i18next';
 import { styles } from './display-term.styles.js';
 
 const DisplayTerm = ({
-  term
+  terms
 }) => {
   const {
     t
   } = useTranslation();
-  return jsx("ul", {
+  const {
+    links,
+    disclosure
+  } = terms;
+  return jsxs("ul", {
     css: styles.container,
-    children: term.links.map(({
+    children: [disclosure && jsx("li", {
+      css: {
+        listStyle: "none"
+      },
+      children: disclosure
+    }), links.map(({
       link,
       title
     }) => jsx("li", {
@@ -31,7 +40,7 @@ const DisplayTerm = ({
           size: IconSize.SIZE_SMALL
         })]
       })
-    }, title))
+    }, title))]
   });
 };
 

package/dist/esm/components/field/credit-card-input/credit-card-input.js

@@ -1,42 +1,59 @@
 import { __rest } from '../../../_virtual/_tslib.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { Input } from '@shipengine/giger';
-import { formatCreditCardNumber } from '../../../utilities/money.js';
+import { formatCreditCardNumber, maskCreditCardNumber } from '../../../utilities/money.js';
+import { useState } from 'react';
 import { createFieldController } from '../create-field-controller.js';
 import { styles } from '../field.styles.js';
 
 const CreditCardInputController = createFieldController();
 const transform = {
-  in: v => v ? formatCreditCardNumber(v) : "",
+  in: (v, isFocused) => {
+    if (!v) return "";
+    return isFocused ? formatCreditCardNumber(v) : maskCreditCardNumber(v);
+  },
   out: event => event.target.value === "" ? null : event.target.value.replace(/\s/g, "")
 };
-const CreditCardInput = fieldProps => jsx(CreditCardInputController, Object.assign({}, fieldProps, {
-  children: _a => {
-    var {
-        onChange,
-        value
-      } = _a,
-      creditCardInputProps = __rest(_a, ["onChange", "value"]);
-    return jsx("div", {
-      css: styles.overrideStyles,
-      children: jsx(Input, Object.assign({}, creditCardInputProps, {
-        onChange: e => {
-          // Amex allows 15 digits, all others allow 16
-          if (e.target.value.replace(/\s/g, "").length > 16) {
-            e.preventDefault();
-          } else {
-            onChange(transform.out(e));
-          }
-        },
-        onKeyDown: e => {
-          // Prevent non-numeric characters
-          if (!/^([0-9]|Backspace|Delete|Enter|Tab)$/i.test(e.key)) e.preventDefault();
-        },
-        type: "text",
-        value: transform.in(value)
-      }))
-    });
-  }
-}));
+const CreditCardInput = fieldProps => {
+  const [isFocused, setIsFocused] = useState(false);
+  return jsx(CreditCardInputController, Object.assign({}, fieldProps, {
+    children: _a => {
+      var {
+          onChange,
+          value
+        } = _a,
+        creditCardInputProps = __rest(_a, ["onChange", "value"]);
+      return jsx("div", {
+        css: styles.overrideStyles,
+        children: jsx(Input, Object.assign({}, creditCardInputProps, {
+          onBlur: () => {
+            var _a;
+            setIsFocused(false);
+            (_a = creditCardInputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(creditCardInputProps);
+          },
+          onChange: e => {
+            // Amex allows 15 digits, all others allow 16
+            if (e.target.value.replace(/\s/g, "").length > 16) {
+              e.preventDefault();
+            } else {
+              onChange(transform.out(e));
+            }
+          },
+          onFocus: e => {
+            var _a;
+            setIsFocused(true);
+            (_a = creditCardInputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(creditCardInputProps, e);
+          },
+          onKeyDown: e => {
+            // Prevent non-numeric characters
+            if (!/^([0-9]|Backspace|Delete|Enter|Tab)$/i.test(e.key)) e.preventDefault();
+          },
+          type: "text",
+          value: transform.in(value, isFocused)
+        }))
+      });
+    }
+  }));
+};
 
 export { CreditCardInput };

package/dist/esm/components/field/rate-select/rate-card/rate-card.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
-import { Icon, IconSize, Divider, Checkbox, Link } from '@shipengine/giger';
+import { Icon, IconSize, Typography, Divider, Checkbox, Link } from '@shipengine/giger';
 import { IconNames } from '@shipengine/giger-theme';
 import { getTotalRateAmount } from '../../../../utilities/rates.js';
 import { useMemo } from 'react';
@@ -82,6 +82,7 @@ const RateCard = ({
   messages,
   onClick,
   onClickAcknowledgement,
+  onPaperlessAcknowledgementChange,
   onSelectServicePoint,
   otherAmount,
   rateId,
@@ -99,7 +100,9 @@ const RateCard = ({
   selectedRateCost,
   servicePoints,
   mapViewEnabled,
-  rateDetails
+  rateDetails,
+  paperlessDisplaySchemes,
+  paperlessLabelChecked = false
 }) => {
   /* TODO: ENGINE-7366: TODO Remove showVatSettings flag once this is fully in production */
   const showRateDetails = showVatFeatures && rateDetails && rateDetails.length > 0;
@@ -143,7 +146,8 @@ const RateCard = ({
       return undefined;
     }
   }, [confirmationAmount, insuranceAmount, isPreferredRate, otherAmount, selectedRateCost, shippingAmount, taxAmount]);
-  const hasFooterData = !!(rateMessages === null || rateMessages === void 0 ? void 0 : rateMessages.length) || requiresAcknowledgement;
+  const requiresPaperlessAcknowledgement = paperlessDisplaySchemes === null || paperlessDisplaySchemes === void 0 ? void 0 : paperlessDisplaySchemes.includes("qr_code");
+  const hasFooterData = !!(rateMessages === null || rateMessages === void 0 ? void 0 : rateMessages.length) || requiresAcknowledgement || requiresPaperlessAcknowledgement;
   const costBreakdownCommonProps = {
     confirmationAmount,
     insuranceAmount,
@@ -184,6 +188,17 @@ const RateCard = ({
       serviceInfo: {
         line1: carrierNickname,
         line2: getDeliveryDaysLabel(deliveryDays),
+        line3: paperlessDisplaySchemes && paperlessDisplaySchemes.length > 0 ? jsxs("div", {
+          "aria-label": t("purchase-label:paperlessAvailable"),
+          css: styles.paperlessText,
+          children: [jsx(Icon, {
+            name: IconNames.SCAN_QR,
+            size: IconSize.SIZE_MEDIUM
+          }), jsx(Typography, {
+            variant: "small",
+            children: t("purchase-label:paperlessAvailable")
+          })]
+        }) : undefined,
         type: serviceType
       }
     }), servicePoints && jsxs(Fragment, {
@@ -198,16 +213,25 @@ const RateCard = ({
         rateSelected: selected,
         servicePoints: servicePoints
       })]
-    }), selected && hasFooterData && jsx(ServiceCardFooter, {
+    }), selected && hasFooterData && jsxs(ServiceCardFooter, {
       messages: rateMessages,
-      children: requiresAcknowledgement && onClickAcknowledgement && jsx(Checkbox, {
+      children: [requiresAcknowledgement && onClickAcknowledgement && jsx(Checkbox, {
         "aria-required": true,
         checked: isAcknowledged,
         css: styles.acknowledgment,
         "data-testid": "rate-acknowledgement",
         label: rateAcknowledgementMessage ? getPreferredRateAcknowledgementLabel(rateAcknowledgementMessage) : getAcknowledgementLabel(serviceCode, packageType),
         onChange: e => onClickAcknowledgement(e.target.checked)
-      })
+      }), requiresPaperlessAcknowledgement && jsx(Checkbox, {
+        "aria-required": true,
+        checked: paperlessLabelChecked,
+        css: styles.acknowledgment,
+        "data-testid": "paperless-acknowledgement",
+        label: t("purchase-label:usePaperlessLabel"),
+        onChange: e => {
+          onPaperlessAcknowledgementChange === null || onPaperlessAcknowledgementChange === void 0 ? void 0 : onPaperlessAcknowledgementChange(e.target.checked, "qr_code");
+        }
+      })]
     })]
   });
 };

package/dist/esm/components/field/rate-select/rate-card/rate-card.styles.js

@@ -3,10 +3,8 @@ import { scopeTheme, createStyles } from '../../../../utilities/styles.js';
 const getRateCardFirstLineSize = theme => `${scopeTheme(theme).spacing(3.25)}px`;
 const styles = createStyles({
   acknowledgment: theme => ({
-    alignItems: "center",
     color: scopeTheme(theme).palette.gray.main,
-    display: "flex",
-    paddingTop: scopeTheme(theme).spacing(1.5)
+    display: "flex"
   }),
   divider: theme => ({
     borderColor: scopeTheme(theme).palette.primary.main,
@@ -27,6 +25,13 @@ const styles = createStyles({
     position: "absolute",
     right: 0,
     top: 0
+  }),
+  paperlessText: theme => ({
+    display: "flex",
+    gap: scopeTheme(theme).spacing(0.25),
+    paddingTop: scopeTheme(theme).spacing(0.5),
+    color: scopeTheme(theme).palette.gray[600],
+    alignItems: "center"
   })
 });