@shipengine/elements 2.24.1 → 2.25.0

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/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"
   })
 });
 

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

@@ -20,12 +20,13 @@ const RateSelect = _a => {
       nicknameFeature,
       preferredServiceCodes,
       onClick,
+      onPaperlessAcknowledgementChange,
       onSelectServicePoint,
       isLoading,
       mapViewEnabled,
       showVatFeatures
     } = _a,
-    fieldProps = __rest(_a, ["nicknameFeature", "preferredServiceCodes", "onClick", "onSelectServicePoint", "isLoading", "mapViewEnabled", "showVatFeatures"]);
+    fieldProps = __rest(_a, ["nicknameFeature", "preferredServiceCodes", "onClick", "onPaperlessAcknowledgementChange", "onSelectServicePoint", "isLoading", "mapViewEnabled", "showVatFeatures"]);
   // The calculated cost of the selected rate
   const [selectedRateCost, setSelectedRateCost] = useState();
   return jsx(RateSelectController, Object.assign({}, fieldProps, {
@@ -48,17 +49,37 @@ const RateSelect = _a => {
             isPreferredRate: preferredServiceCodes && preferredServiceCodes.includes(option.serviceCode),
             key: option.rateId,
             onClick: rateId => {
+              var _a;
               onClick === null || onClick === void 0 ? void 0 : onClick(rateId);
-              field.onChange({
-                isAcknowledged: !option.requiresAcknowledgement,
-                rateId
-              });
+              // if the rate supports "label_and_paperless" display scheme, use it by default
+              if ((_a = option.paperlessDisplaySchemes) === null || _a === void 0 ? void 0 : _a.includes("label_and_paperless")) {
+                field.onChange({
+                  usePaperlessLabel: true,
+                  labelDisplayScheme: "label_and_paperless",
+                  isAcknowledged: !option.requiresAcknowledgement,
+                  rateId
+                });
+              } else {
+                field.onChange({
+                  isAcknowledged: !option.requiresAcknowledgement,
+                  rateId
+                });
+              }
               setSelectedRateCost(getTotalRateAmount(option));
             },
             onClickAcknowledgement: isAcknowledged => field.onChange(Object.assign(Object.assign({}, field.value), {
               isAcknowledged
             })),
+            onPaperlessAcknowledgementChange: (usePaperless, labelDisplayScheme) => {
+              field.onChange(Object.assign(Object.assign({}, field.value), {
+                usePaperlessLabel: usePaperless,
+                labelDisplayScheme
+              }));
+              onPaperlessAcknowledgementChange === null || onPaperlessAcknowledgementChange === void 0 ? void 0 : onPaperlessAcknowledgementChange(usePaperless, labelDisplayScheme);
+            },
             onSelectServicePoint: onSelectServicePoint,
+            paperlessDisplaySchemes: option.paperlessDisplaySchemes,
+            paperlessLabelChecked: field.value.usePaperlessLabel,
             rateDetails: option.rateDetails,
             selected: option.rateId === field.value.rateId,
             selectedRateCost: selectedRateCost,

package/dist/esm/components/forms/address-form/address-form-schema.js

@@ -4,12 +4,12 @@ import { usStateCodes, postalCodeRegex, addressNameRegex } from '../../../consta
 import { extendZod } from '../../../extensions/zod.js';
 
 extendZod();
-const refineName = n => n.match(/^[a-zA-Z']/);
 const refineNameStrict = n => n.match(addressNameRegex);
 const shipToAddressSchema = addressSchema.refine(schema => {
-  return refineName(schema.name);
+  // KEEP THIS STRICT, USPS REQUIRES 2 CHARACTERS FOR FIRST AND LAST NAME
+  return refineNameStrict(schema.name);
 }, {
-  message: "schemaErrors.invalidAddressName",
+  message: "schemaErrors.invalidAddressNameStrict",
   path: ["name"]
 }).refine(schema => !schema.phone || isValidPhoneNumber(schema.phone, schema.countryCode), {
   message: "schemaErrors.notAValidPhoneNumber",

package/dist/esm/components/forms/edit-billing-form/edit-billing-form.js

@@ -1,4 +1,5 @@
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { useToggle } from '../../../hooks/use-toggle.js';
 import { Grid, GridChild, Typography, Button, ButtonVariant, ButtonColor } from '@shipengine/giger';
 import { formLogger } from '../../../utilities/form-logger.js';
 import { validationResolver } from '../../../utilities/validation.js';
@@ -8,19 +9,38 @@ import { BillingFields } from '../wallet-form/billing-fields.js';
 import { styles } from './edit-billing-form.styles.js';
 import { getWalletSchema } from '../wallet-form/wallet-schema.js';
 import { AddressFields } from '../address-form/address-fields.js';
+import { AddressDisplay } from '../../address-display/address-display.js';
+import { LinkAction } from '../../link-action/link-action.js';
 import { ButtonGroup } from '../../button-group/button-group.js';
 import { SubmitButton } from '../../field/submit-button/submit-button.js';
 
 const EditBillingForm = ({
   onCancel,
   onSubmit,
-  isLoading
+  isLoading,
+  billingInfo
 }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   const {
     t
   } = useTranslation();
+  const [editBillingInfo, toggleEditBillingInfo] = useToggle(false);
   const form = useForm({
-    resolver: validationResolver(getWalletSchema("emailRequired", "blackboxOptional"), ["creditCard"])
+    resolver: validationResolver(getWalletSchema("emailRequired", "blackboxOptional"), ["creditCard"]),
+    defaultValues: {
+      address: {
+        name: (_a = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.fullName) !== null && _a !== void 0 ? _a : "",
+        companyName: (_b = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.company) !== null && _b !== void 0 ? _b : "",
+        addressLine1: (_c = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.addressLine1) !== null && _c !== void 0 ? _c : "",
+        addressLine2: (_d = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.addressLine2) !== null && _d !== void 0 ? _d : "",
+        cityLocality: (_e = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.cityLocality) !== null && _e !== void 0 ? _e : "",
+        stateProvince: (_f = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.stateProvince) !== null && _f !== void 0 ? _f : "",
+        postalCode: (_g = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.postalCode) !== null && _g !== void 0 ? _g : "",
+        countryCode: billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.countryCode,
+        email: (_h = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.email) !== null && _h !== void 0 ? _h : "",
+        phone: (_j = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.phone) !== null && _j !== void 0 ? _j : ""
+      }
+    }
   });
   const handleSubmit = form.handleSubmit(values => {
     const {
@@ -57,14 +77,47 @@ const EditBillingForm = ({
           variant: "subtitle1",
           children: t("register-wallet:settings.billing.subtitleBilling")
         })
-      }), jsx(GridChild, {
+      }), billingInfo && !editBillingInfo && jsxs(Fragment, {
+        children: [jsx(GridChild, {
+          colSpan: 9,
+          children: jsx(AddressDisplay, {
+            address: Object.assign(Object.assign({}, billingInfo), {
+              name: billingInfo.fullName,
+              companyName: billingInfo.company
+            })
+          })
+        }), jsx(GridChild, {
+          colSpan: 3,
+          css: {
+            textAlign: "right"
+          },
+          children: jsx(LinkAction, {
+            css: {
+              alignSelf: "end"
+            },
+            onClick: () => {
+              toggleEditBillingInfo(true);
+              form.reset({
+                address: Object.assign(Object.assign({}, billingInfo), {
+                  name: billingInfo.fullName,
+                  companyName: billingInfo.company,
+                  countryCode: billingInfo.countryCode
+                })
+              }, {
+                keepDirtyValues: true
+              });
+            },
+            title: t("actions.edit")
+          })
+        })]
+      }), !billingInfo || editBillingInfo ? jsx(GridChild, {
         colSpan: 12,
         children: jsx(AddressFields, {
           form: form,
           formatFieldName: fieldName => `address.${fieldName}`,
           optionalFields: ["addressLine2"]
         })
-      }), jsx(GridChild, {
+      }) : null, jsx(GridChild, {
         colSpan: 12,
         children: jsxs(ButtonGroup, {
           justify: "end",

package/dist/esm/components/service-card/service-card.js

@@ -64,7 +64,7 @@ const ServiceCardHeader = ({
           children: line1
         }), line2 && jsx(Typography, {
           children: line2
-        }), line3 && jsx(Typography, {
+        }), line3 && jsx("div", {
           children: line3
         })]
       }), jsx("div", {
@@ -79,15 +79,15 @@ const ServiceCardHeader = ({
 };
 const ServiceCardFooter = ({
   children,
-  messages
+  messages = []
 }) => {
   return jsxs("div", {
     "data-testid": "service-card-footer",
     children: [jsx(Divider, {
       css: styles.divider
     }), jsxs("section", {
-      css: styles.footer,
-      children: [messages && jsx("ul", {
+      css: styles.footerStyles,
+      children: [messages.length > 0 && jsx("ul", {
         css: [styles.footerList, messages.length > 1 && styles.footerListWithMultipleMessages],
         children: messages.map((m, index) => jsxs("li", {
           css: styles.footerListItem,

package/dist/esm/components/service-card/service-card.styles.js

@@ -14,8 +14,11 @@ const styles = createStyles({
     opacity: 0.3,
     width: `calc(100% - ${scopeTheme(theme).spacing(4)}px)`
   }),
-  footer: theme => ({
-    padding: scopeTheme(theme).spacing(2)
+  footerStyles: theme => ({
+    padding: scopeTheme(theme).spacing(2),
+    display: "flex",
+    flexDirection: "column",
+    gap: scopeTheme(theme).spacing(2)
   }),
   footerList: {
     listStyle: "none"

package/dist/esm/components/service-point-display/service-point-display.js

@@ -1,17 +1,9 @@
 import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
-import { Icon, IconSize, Typography, Link } from '@shipengine/giger';
-import { IconNames } from '@shipengine/giger-theme';
-import { useState, useEffect } from 'react';
+import { Typography, Link } from '@shipengine/giger';
 import { useTranslation } from 'react-i18next';
 import { OperatingHoursDisplay } from './operating-hours.js';
 import { styles } from './service-point-display.styles.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 carriersWithPaperless = "hermes";
-const servicesWithPaperless = ["hermes_domestic_parcelshop_dropoff", "hermes_domestic_parcelshop_dropoff_next_day", "hermes_postable", "hermes_postable_next_day"];
 const formatDistance = meters => {
   return meters < 1000 ? "< 1 km" : `${parseFloat((meters / 1000).toFixed(1))} km`;
 };
@@ -25,36 +17,9 @@ const ServicePointDisplay = ({
   const {
     t
   } = useTranslation("purchase-label");
-  const [isFilteredServicesWithPaperless, setIsFilteredServicesWithPaperless] = useState(false);
-  /* 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)
-   */
-  useEffect(() => {
-    if (carriersWithPaperless === servicePoint.carrierCode) {
-      const filteredServicesWithPaperless = servicePoint.serviceCodes.map(serviceCode => {
-        return servicesWithPaperless.filter(service => service === serviceCode);
-      }).length > 0;
-      setIsFilteredServicesWithPaperless(filteredServicesWithPaperless);
-    }
-  }, [servicePoint.carrierCode, servicePoint.serviceCodes]);
   return jsxs("div", {
     css: styles.container,
-    children: [isFilteredServicesWithPaperless && jsxs("section", {
-      css: styles.paperlessWrapper,
-      children: [jsx(Icon, {
-        css: styles.paperlessIcon,
-        name: IconNames.PRINTER,
-        size: IconSize.SIZE_MEDIUM
-      }), jsx(Icon, {
-        css: styles.paperlessIcon,
-        name: IconNames.SCAN_QR,
-        size: IconSize.SIZE_MEDIUM
-      }), jsx(Typography, {
-        css: styles.paperlessText,
-        variant: "small",
-        children: t("servicePoints.paperless")
-      })]
-    }), jsx("div", {
+    children: [jsx("div", {
       css: styles.getSelectedStyles(),
       children: jsx(Typography, {
         bold: true,

package/dist/esm/components/service-point-display/service-point-display.styles.js

@@ -17,18 +17,6 @@ const styles = createStyles({
     gap: scopeTheme(theme).spacing(1),
     justifyContent: "space-between"
   }),
-  paperlessIcon: theme => ({
-    color: scopeTheme(theme).palette.gray[600],
-    paddingRight: "4px"
-  }),
-  paperlessText: theme => ({
-    color: scopeTheme(theme).palette.gray[600],
-    paddingLeft: scopeTheme(theme).spacing(0.5)
-  }),
-  paperlessWrapper: () => ({
-    display: "flex",
-    marginBottom: "12px"
-  }),
   selectButton: theme => ({
     backgroundColor: scopeTheme(theme).palette.primary.main,
     borderRadius: scopeTheme(theme).borderRadius.S,

package/dist/esm/components/shipment-not-found-error/index.js

@@ -0,0 +1 @@
+export { ShipmentNotFoundError } from './shipment-not-found-error.js';

package/dist/esm/components/shipment-not-found-error/shipment-not-found-error.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { Icon, IconSize, Button } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { useTranslation } from 'react-i18next';
+import { styles } from './shipment-not-found-error.styles.js';
+
+const ShipmentNotFoundError = ({
+  shipmentId,
+  onCreateNewShipment
+}) => {
+  const {
+    t
+  } = useTranslation(["common", "purchase-label"]);
+  return jsxs("div", {
+    css: styles.container,
+    children: [jsx("div", {
+      css: styles.iconContainer,
+      children: jsx(Icon, {
+        name: IconNames.CANCEL,
+        size: IconSize.SIZE_LARGE
+      })
+    }), jsx("div", {
+      css: styles.message,
+      children: t("common:errorMessages.shipmentNotFound", {
+        id: shipmentId
+      })
+    }), jsx(Button, {
+      "data-testid": "create-new-shipment",
+      onClick: () => {
+        void (onCreateNewShipment === null || onCreateNewShipment === void 0 ? void 0 : onCreateNewShipment());
+      },
+      type: "button",
+      children: t("purchase-label:actions.createNewShipment")
+    })]
+  });
+};
+
+export { ShipmentNotFoundError };

package/dist/esm/components/shipment-not-found-error/shipment-not-found-error.styles.js

@@ -0,0 +1,22 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  container: {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    justifyContent: "center",
+    textAlign: "center",
+    width: "100%"
+  },
+  iconContainer: theme => ({
+    color: scopeTheme(theme).palette.error.main,
+    marginBottom: scopeTheme(theme).spacing(2)
+  }),
+  message: theme => ({
+    marginBottom: scopeTheme(theme).spacing(2)
+  })
+});
+
+export { styles };

package/dist/esm/components/suspend-purchase/suspend-purchase.js

@@ -1,12 +1,15 @@
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
+import { ShipmentNotFoundError } from '../shipment-not-found-error/shipment-not-found-error.js';
 import { Loader } from '../loader/loader.js';
 
 const SuspendPurchase = ({
   children,
   errors,
   isLoading,
-  data
+  data,
+  onCreateNewShipment,
+  shipmentId
 }) => {
   const {
     t
@@ -15,7 +18,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", {
@@ -31,8 +34,13 @@ const SuspendPurchase = ({
           }));
         case "label_purchased":
           throw new Error(t("common:errorMessages.labelHasBeenPurchased"));
+        case "shipment_not_found":
+          return jsx(ShipmentNotFoundError, {
+            onCreateNewShipment: onCreateNewShipment,
+            shipmentId: shipmentId
+          });
       }
-    });
+    }
     throw new Error(errors.map(e => e.message).join(", "));
   }
   if (!data) throw new Error("errorMessages.unableToLoad.shipment");