@shipengine/elements 2.24.1 → 2.26.0

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/grid-controller/error-banner/error-banner.js

@@ -0,0 +1,72 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { Icon, Typography } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { useState, useRef, useEffect } from 'react';
+import SvgReload from '../../../assets/reload.svg.js';
+import { styles } from './error-banner.styles.js';
+import { Label } from '../../history/history-card/label/label.js';
+import { LinkAction } from '../../link-action/link-action.js';
+
+// This component is a temporary solution to handle error display, design is working to improve more error patterns to display
+const ErrorBanner = ({
+  labelText,
+  linkTitle,
+  onClick,
+  showReloadIcon,
+  duration,
+  onDurationEnd
+}) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const timerRef = useRef(null);
+  // Set up the timer when the component mounts or duration changes
+  useEffect(() => {
+    if (duration && duration > 0) {
+      // Clear any existing timer
+      if (timerRef.current) clearTimeout(timerRef.current);
+      // Set up a new timer to hide the component after the specified duration
+      timerRef.current = setTimeout(() => {
+        setIsVisible(false);
+        // Call the onDurationEnd callback if provided
+        if (onDurationEnd) {
+          onDurationEnd();
+        }
+      }, duration);
+    }
+    // Clean up the timer when the component unmounts or duration changes
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [duration, onDurationEnd]);
+  if (!isVisible) return null;
+  return jsxs("div", {
+    css: styles.errorContainer,
+    children: [showReloadIcon && jsx(SvgReload, {
+      height: 24,
+      width: 24
+    }), linkTitle && !labelText && !onClick && jsxs("div", {
+      css: styles.errorContent,
+      children: [jsx(Icon, {
+        name: IconNames.ALERT
+      }), jsx(Typography, {
+        component: "p",
+        variant: "body2",
+        children: linkTitle
+      })]
+    }), linkTitle && labelText && onClick && jsx(Label, {
+      spacing: 0,
+      text: labelText !== null && labelText !== void 0 ? labelText : "",
+      textProps: {
+        css: styles.errorHeading
+      },
+      variant: "subtitle",
+      children: jsx(LinkAction, {
+        css: styles.errorCTA,
+        isBold: false,
+        onClick: onClick,
+        title: linkTitle
+      })
+    })]
+  });
+};
+
+export { ErrorBanner };

package/dist/esm/components/{error-display/error-display.styles.js → grid-controller/error-banner/error-banner.styles.js}

@@ -1,13 +1,11 @@
-import { createStyles, scopeTheme } from '../../utilities/styles.js';
+import { createStyles, scopeTheme } from '../../../utilities/styles.js';
 
 const styles = createStyles({
   errorContainer: theme => ({
     alignItems: "center",
-    backgroundColor: scopeTheme(theme).palette.gray.ultraLight,
+    backgroundColor: scopeTheme(theme).palette.error.light,
     display: "flex",
     flexDirection: "column",
-    paddingBottom: scopeTheme(theme).spacing(2),
-    paddingTop: scopeTheme(theme).spacing(2),
     rowGap: scopeTheme(theme).spacing(1)
   }),
   errorCTA: theme => ({
@@ -17,6 +15,12 @@ const styles = createStyles({
   }),
   errorHeading: theme => ({
     fontSize: scopeTheme(theme).typography.fontSize.S
+  }),
+  errorContent: theme => ({
+    display: "flex",
+    alignItems: "center",
+    gap: scopeTheme(theme).spacing(),
+    color: scopeTheme(theme).palette.error.main
   })
 });
 

package/dist/esm/components/grid-controller/error-banner/index.js

@@ -0,0 +1 @@
+export { ErrorBanner } from './error-banner.js';

package/dist/esm/components/grid-controller/grid-controller.js

@@ -1,8 +1,13 @@
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { TableRow, TableBodyCell, Skeleton, SkeletonVariant, SkeletonAnimation, Table, TableBody, Checkbox, TableHeader, TableHeaderRow, TableHeaderCell, TableFooter } from '@shipengine/giger';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { TableRow, TableBodyCell, Skeleton, SkeletonVariant, SkeletonAnimation, Button, ButtonVariant, IconTooltip, IconSize, Icon, Table, TableBody, Checkbox, TableHeader, TableHeaderRow, TableHeaderCell, TableFooter } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
 import { useState, useMemo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { styles } from './grid-controller.styles.js';
+import { ErrorBanner } from './error-banner/error-banner.js';
 
+const LIMIT_GRID_ITEMS_EXPORT = 10000;
+const ERROR_DISPLAY_DURATION = 7000;
 /**
  * @internal
  *
@@ -20,10 +25,23 @@ const GridController = ({
   isLoading = false,
   useCheckboxes = false,
   filters,
-  emptyContent
+  emptyContent,
+  showExportCSV = false,
+  onClickExportCSV,
+  totalAmountGridItems,
+  hasTrackingStatusFilter,
+  hasExportCSVError = false,
+  isExportCSVLoading = false,
+  onExportErrorDurationEnd
 }) => {
   var _a, _b, _c;
   const [isChecked, setIsChecked] = useState((_a = data === null || data === void 0 ? void 0 : data.map(() => false)) !== null && _a !== void 0 ? _a : []);
+  const {
+    t
+  } = useTranslation(["common", "grid-controller"]);
+  const dataAvailable = !!data.length;
+  const isItemsOverExportLimit = !!((totalAmountGridItems !== null && totalAmountGridItems !== void 0 ? totalAmountGridItems : 0) > LIMIT_GRID_ITEMS_EXPORT);
+  const isDisableExportButton = isItemsOverExportLimit || !dataAvailable;
   const columnHeaderContents = useMemo(() => columns.map(column => column.headerContent), [columns]);
   const loadingRows = useMemo(() => {
     const items = [];
@@ -63,8 +81,36 @@ const GridController = ({
     css: styles.wrapper,
     children: [filters && jsx("div", {
       css: styles.filters,
-      children: filters
-    }), data.length === 0 && emptyContent ? emptyContent : jsx(Table, {
+      children: jsxs(Fragment, {
+        children: [filters, showExportCSV && !hasTrackingStatusFilter && jsxs(Button, {
+          bold: false,
+          css: styles.button,
+          disabled: isItemsOverExportLimit || !dataAvailable || hasExportCSVError,
+          isLoading: isExportCSVLoading && !isDisableExportButton,
+          onClick: onClickExportCSV,
+          type: "button",
+          variant: ButtonVariant.FILLED,
+          children: [isItemsOverExportLimit ? jsx(IconTooltip, {
+            css: styles.iconTooltip,
+            icon: IconNames.DOWNLOAD,
+            size: IconSize.SIZE_MEDIUM,
+            children: jsx("div", {
+              children: t("grid-controller:showExportCSV.limit-error", {
+                LIMIT_GRID_ITEMS_EXPORT: new Intl.NumberFormat().format(LIMIT_GRID_ITEMS_EXPORT)
+              })
+            })
+          }) : jsx(Icon, {
+            css: styles.iconTooltip,
+            name: IconNames.UPLOAD,
+            size: IconSize.SIZE_MEDIUM
+          }), t("grid-controller:showExportCSV.button")]
+        })]
+      })
+    }), hasExportCSVError && !isDisableExportButton && jsx(ErrorBanner, {
+      duration: ERROR_DISPLAY_DURATION,
+      linkTitle: t("grid-controller:showExportCSV.generic-error-message"),
+      onDurationEnd: onExportErrorDurationEnd
+    }), !dataAvailable && emptyContent ? emptyContent : jsx(Table, {
       "data-testid": "grid",
       footer: footerContent && !isLoading && jsx(TableFooter, {
         css: styles.tableFooter,

package/dist/esm/components/grid-controller/grid-controller.styles.js

@@ -5,10 +5,17 @@ const styles = createStyles({
     width: scopeTheme(theme).spacing(6)
   }),
   filters: theme => ({
+    display: "flex",
     backgroundColor: scopeTheme(theme).palette.white,
     borderBottom: `1px solid ${scopeTheme(theme).palette.gray[200]}`,
     padding: scopeTheme(theme).spacing()
   }),
+  button: () => ({
+    marginLeft: "auto"
+  }),
+  iconTooltip: theme => ({
+    marginRight: scopeTheme(theme).spacing()
+  }),
   skeletonTableRow: () => ({
     height: "68px"
   }),
@@ -28,7 +35,10 @@ const styles = createStyles({
   wrapper: theme => Object.assign({
     height: "auto",
     overflow: "hidden"
-  }, scopeTheme(theme).getComponentOverride("Table"))
+  }, scopeTheme(theme).getComponentOverride("Table")),
+  filtersWrapper: () => ({
+    display: "flex"
+  })
 });
 
 export { styles };

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

@@ -6,8 +6,8 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import SvgFunding from '../../../assets/funding.svg.js';
 import { styles } from './history-card.styles.js';
-import { Label } from './label/label.js';
 import { useElements } from '../../../elements-provider/elements-context-provider.js';
+import { Label } from './label/label.js';
 
 const HistoryCard = ({
   transaction,

package/dist/esm/components/history/history-card-extension/history-card-extension.js

@@ -29,7 +29,6 @@ import { Spacer } from '../../spacer/spacer.js';
 //   </div>
 // );
 //
-// const ErrorState = () => <ErrorDisplay />;
 //
 // // replace type call with its se version - lmnt-936
 // const SuccessState = ({ adjustment }: { adjustment: WalletAdjustment }) => {

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

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

@@ -0,0 +1 @@
+export { UPSTermsDisclosure } from './ups-terms-disclosure.js';