@shipengine/elements 2.20.0 → 2.22.0

package/cjs/elements/shipment-summary/components/label-display/label-card.cjs

@@ -0,0 +1,176 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useToggle = require('../../../../hooks/use-toggle.cjs');
+var date = require('../../../../utilities/date.cjs');
+var trackingFormatter = require('../../../../utilities/tracking-formatter.cjs');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var labelCard_styles = require('./label-card.styles.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');
+var copyButton = require('../../../../components/copy/copy-button.cjs');
+
+const LabelCard = ({
+  carrierCode,
+  carrierFriendlyName,
+  insuranceAmount,
+  insuranceClaim,
+  insuranceProvider,
+  fundingSourceInsuranceProvider,
+  insuredValue,
+  messages,
+  selected: _selected = false,
+  serviceType,
+  shippingAmount,
+  trackable,
+  trackingStatus,
+  voided: _voided = false,
+  voidedAt,
+  trackingNumber,
+  showVatFeatures,
+  rateDetails,
+  paperlessDownload
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation(["common", "purchase-label", "void-label"]);
+  const {
+    locale: defaultLocale,
+    globalFeatures: {
+      enableParcelGuard
+    }
+  } = elementsContextProvider.useElements();
+  const iconRef = React.useRef(null);
+  const [showPopover, toggleShowPopover] = useToggle.useToggle(false);
+  const getInsuranceMessageIcon = msg => {
+    if (msg.includes("Insured") &&
+    // we have all the required data to show the insurance popover
+    fundingSourceInsuranceProvider && insuranceProvider === fundingSourceInsuranceProvider && insuredValue) {
+      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(giger.Icon, {
+          "aria-label": "Insurance Information",
+          css: labelCard_styles.styles.insuranceInfoIcon,
+          name: gigerTheme.IconNames.INFO,
+          onClick: () => {
+            toggleShowPopover();
+          },
+          onKeyDown: e => {
+            if (e.key === "Enter") {
+              toggleShowPopover();
+            }
+          },
+          ref: iconRef,
+          size: giger.IconSize.SIZE_SMALL,
+          tabIndex: 0
+        }), jsxRuntime.jsx(insurancePopover.InsurancePopover, {
+          fundingSourceInsuranceProvider: fundingSourceInsuranceProvider,
+          iconRef: iconRef,
+          insuranceClaim: insuranceClaim,
+          insuredValue: insuredValue,
+          showPopover: showPopover,
+          toggleShowPopover: () => toggleShowPopover()
+        })]
+      });
+    } else return null;
+  };
+  const labelMessages = messages === null || messages === void 0 ? void 0 : messages.map(msg => {
+    const insuranceTooltip = enableParcelGuard ? getInsuranceMessageIcon(msg) : null;
+    return insuranceTooltip ? {
+      message: msg,
+      rightContent: insuranceTooltip
+    } : {
+      message: msg
+    };
+  });
+  /* TODO: ENGINE-7366: TODO Remove showVatSettings flag once this is fully in production */
+  const showRateDetails = showVatFeatures && rateDetails && rateDetails.length > 0;
+  const hasFooterData = !!(messages === null || messages === void 0 ? void 0 : messages.length);
+  const showFooter = !_voided && !voidedAt && _selected && hasFooterData;
+  const TrackingNumberDisplay = () => {
+    return jsxRuntime.jsxs("div", Object.assign({
+      css: labelCard_styles.styles.trackingNumberWrapper
+    }, {
+      children: [trackingStatus && jsxRuntime.jsx(giger.Tag, Object.assign({
+        "aria-label": "Tracking Status"
+      }, {
+        children: trackingFormatter.trackingStatusFormatter(trackingStatus)
+      })), trackingNumber && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+          "aria-label": "Tracking Number"
+        }, {
+          children: trackingFormatter.formatTrackingNumber(trackingNumber.toString())
+        })), jsxRuntime.jsx(copyButton.CopyButton, {
+          content: trackingNumber.toString()
+        })]
+      })]
+    }));
+  };
+  const costBreakdownCommonProps = {
+    insuranceAmount,
+    shippingAmount,
+    showExtendedData: _selected
+  };
+  return jsxRuntime.jsxs(serviceCard.ServiceCardContainer, Object.assign({
+    selected: _selected,
+    voided: _voided
+  }, {
+    children: [jsxRuntime.jsx(serviceCard.ServiceCardHeader, Object.assign({
+      carrierCode: carrierCode,
+      carrierFriendlyName: carrierFriendlyName,
+      costBreakdownProps: costBreakdownCommonProps,
+      rateDetailsProps: showRateDetails ? {
+        rateDetails: rateDetails
+      } : undefined,
+      serviceInfo: {
+        line1: voidedAt ? `${t("void-label:voidedOn")}  ${date.formatDateDDMMYY(voidedAt, defaultLocale)}` : undefined,
+        type: serviceType
+      },
+      voided: _voided
+    }, {
+      children: trackable && jsxRuntime.jsx(TrackingNumberDisplay, {})
+    })), !_voided && paperlessDownload && jsxRuntime.jsxs("div", Object.assign({
+      css: labelCard_styles.styles.paperlessDownloadwrapper
+    }, {
+      children: [jsxRuntime.jsxs("div", Object.assign({
+        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", Object.assign({
+          css: labelCard_styles.styles.handoffCode
+        }, {
+          children: paperlessDownload === null || paperlessDownload === void 0 ? void 0 : paperlessDownload.handoffCode.toString()
+        })), jsxRuntime.jsxs(giger.Next.Link, Object.assign({
+          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, {
+      messages: labelMessages
+    })]
+  }));
+};
+
+exports.LabelCard = LabelCard;

package/cjs/elements/shipment-summary/components/label-display/label-card.styles.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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)
+  }),
+  trackingNumberWrapper: theme => ({
+    alignItems: "center",
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(1)
+  })
+});
+
+exports.styles = styles;

package/cjs/elements/shipment-summary/components/label-display/label-display.cjs

@@ -0,0 +1,109 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var money = require('../../../../utilities/money.cjs');
+var humps = require('humps');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var labelCard = require('./label-card.cjs');
+var spacer = require('../../../../components/spacer/spacer.cjs');
+var buttonGroup = require('../../../../components/button-group/button-group.cjs');
+
+const LabelDisplay = ({
+  label,
+  onClickVoid,
+  onClickPrintLabel,
+  showVatFeatures,
+  fundingSourceInsuranceProvider
+}) => {
+  var _a, _b, _c, _d;
+  const {
+    t
+  } = reactI18next.useTranslation(["common", "view-shipment"]);
+  const insuranceOrConfirmationMessages = [];
+  const renderLabelActionButtons = label.status === "completed" && label.trackingStatus !== "delivered";
+  if (label.insuredValue && label.insuredValue.amount !== 0) {
+    insuranceOrConfirmationMessages.push(t("view-shipment:fields.insuredValue", {
+      insuredValue: money.formatMoney(label.insuredValue)
+    }));
+  }
+  if (label.deliveryConfirmation) {
+    insuranceOrConfirmationMessages.push(t("view-shipment:fields.deliveryConfirmation", {
+      deliveryConfirmation: t(`common:confirmationTypes.${humps.camelize(label.deliveryConfirmation)}`)
+    }));
+  }
+  const labelCardCommonProps = {
+    carrierCode: (_a = label.carrier) === null || _a === void 0 ? void 0 : _a.carrierCode,
+    carrierFriendlyName: (_b = label.carrier) === null || _b === void 0 ? void 0 : _b.friendlyName,
+    insuranceAmount: label.insuranceCost,
+    insuranceClaim: label.insuranceClaim,
+    rateDetails: label.rateDetails,
+    selected: true,
+    serviceType: (_c = label.service) === null || _c === void 0 ? void 0 : _c.name,
+    shippingAmount: label.shipmentCost,
+    showVatFeatures: showVatFeatures
+    // TODO: LMNT-418 Enable Nickname via FF
+    // carrierNickname={label.carrier?.nickname}
+  };
+
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [["processing", "completed"].includes(label.status) ? jsxRuntime.jsx(labelCard.LabelCard, Object.assign({}, labelCardCommonProps, {
+      fundingSourceInsuranceProvider: fundingSourceInsuranceProvider,
+      insuranceProvider: label.insuranceProvider,
+      insuredValue: label.insuredValue,
+      messages: insuranceOrConfirmationMessages,
+      paperlessDownload: label.paperlessDownload,
+      trackable: label.trackable,
+      trackingNumber: label.trackingNumber,
+      trackingStatus: label.trackingStatus
+    })) : jsxRuntime.jsx(labelCard.LabelCard, Object.assign({}, labelCardCommonProps, {
+      voided: label.voided,
+      voidedAt: (_d = label.voidedAt) !== null && _d !== void 0 ? _d : undefined
+    })), renderLabelActionButtons && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(spacer.Spacer, {
+        multiplier: 2
+      }), jsxRuntime.jsxs(buttonGroup.ButtonGroup, Object.assign({
+        breakpoint: "mobileLarge",
+        justify: "end"
+      }, {
+        children: [onClickVoid && label.status === "completed" && jsxRuntime.jsx(giger.Button, Object.assign({
+          bold: false,
+          css: {
+            whiteSpace: "nowrap"
+          },
+          onClick: () => onClickVoid(label),
+          type: "submit",
+          variant: giger.ButtonVariant.OUTLINED
+        }, {
+          children: t("view-shipment:actions.void")
+        })), label.formDownload && jsxRuntime.jsx(giger.Button, Object.assign({
+          bold: false,
+          css: {
+            whiteSpace: "nowrap"
+          },
+          onClick: () => {
+            window.open(label.formDownload.href, "_blank", "noopener, noreferrer");
+          },
+          variant: giger.ButtonVariant.OUTLINED
+        }, {
+          children: t("view-shipment:actions.printForms")
+        })), jsxRuntime.jsx(giger.Button, Object.assign({
+          bold: false,
+          css: {
+            whiteSpace: "nowrap"
+          },
+          onClick: () => {
+            onClickPrintLabel === null || onClickPrintLabel === void 0 ? void 0 : onClickPrintLabel();
+            window.open(label.labelDownload.href, "_blank", "noopener, noreferrer");
+          }
+        }, {
+          children: t("view-shipment:actions.printLabel")
+        }))]
+      }))]
+    })]
+  });
+};
+
+exports.LabelDisplay = LabelDisplay;

package/cjs/elements/shipment-summary/components/shipment/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var shipment = require('./shipment.cjs');
+
+
+
+exports.Shipment = shipment.Shipment;
+exports.schedulePickupForCarrier = shipment.schedulePickupForCarrier;

package/cjs/elements/shipment-summary/components/shipment/shipment.cjs

@@ -0,0 +1,312 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useGetFundingSourceInsuranceProvider = require('../../../../hooks/use-get-funding-source-insurance-provider.cjs');
+var useManageFundingSourceInsurance = require('../../../../hooks/use-manage-funding-source-insurance.cjs');
+var date = require('../../../../utilities/date.cjs');
+var money = require('../../../../utilities/money.cjs');
+var dimensions = require('../../../../utilities/shipengine/dimensions.cjs');
+var salesOrder = require('../../../../utilities/shipengine/sales-order.cjs');
+var weight = require('../../../../utilities/shipengine/weight.cjs');
+var styles = require('../../../../utilities/styles.cjs');
+var vat = require('../../../../utilities/vat.cjs');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var reactApi = require('@shipengine/react-api');
+var labelDisplay = require('../label-display/label-display.cjs');
+var enableInsuranceBanner = require('../../../../components/enable-insurance-banner/enable-insurance-banner.cjs');
+var elementsContextProvider = require('../../../../elements-provider/elements-context-provider.cjs');
+var section = require('../../../../components/section/section.cjs');
+var fieldLabel = require('../../../../components/field-label/field-label.cjs');
+var spacer = require('../../../../components/spacer/spacer.cjs');
+var addressDisplay = require('../../../../components/address-display/address-display.cjs');
+var linkAction = require('../../../../components/link-action/link-action.cjs');
+var itemsBreakdown = require('../../../../components/items-breakdown/items-breakdown.cjs');
+var buttonGroup = require('../../../../components/button-group/button-group.cjs');
+var rateDetails = require('../../../../components/rate-details/rate-details.cjs');
+var poweredByShipengine = require('../../../../components/powered-by-shipengine/powered-by-shipengine.cjs');
+
+const pickupCapableCarriers = ["stamps_com", "ups_walleted", "dhl_express", "fedex", "usps", "ups" // TODO: is this pickup capable?
+];
+
+const schedulePickupForCarrier = (carrierCode, plaftformSchedulePickupUrl) => {
+  if (!carrierCode) return undefined;
+  if (pickupCapableCarriers.includes(carrierCode)) {
+    if (plaftformSchedulePickupUrl) {
+      // TODO: LMNT-418 | Make this configurable so the integrating platform can provide their own Shipment Pickup URL
+      return plaftformSchedulePickupUrl;
+    }
+    if (["stamps_com", "usps"].includes(carrierCode)) {
+      return "https://tools.usps.com/schedule-pickup-steps.htm";
+    } else if (["ups", "ups_walleted"].includes(carrierCode)) {
+      return "https://wwwapps.ups.com/pickup/schedule?loc=en_US";
+    } else if (["dhl_express"].includes(carrierCode)) {
+      return "https://mydhl.express.dhl/us/en/schedule-pickup.html";
+    }
+  }
+  return undefined;
+};
+const sortLabels = labels => {
+  if (!labels) return [];
+  return labels.sort((labelA, labelB) => {
+    if (labelA.status === "completed") return -1;
+    return labelA.createdAt < labelB.createdAt ? 0 : 1;
+  });
+};
+const isHighValueRequired = (shipment, carriers = []) => {
+  var _a;
+  return shipment.packages.some(p => p.insuredValue ? p.insuredValue.amount > 1000 : false) && shipment.insuranceProvider === "carrier" && ((_a = carriers.find(c => c.carrierId === shipment.carrierId)) === null || _a === void 0 ? void 0 : _a.carrierCode) === "ups";
+};
+const Shipment = ({
+  carriers,
+  features,
+  labels,
+  onClickPrintLabel,
+  onClickPurchaseLabel,
+  onClickVoidLabel,
+  salesOrder: salesOrder$1,
+  shipment,
+  warehouse
+}) => {
+  var _a, _b;
+  const {
+    locale: defaultLocale,
+    globalFeatures,
+    getFeatures
+  } = elementsContextProvider.useElements();
+  const defaultFeatures = getFeatures("shipmentSummaryFeatures");
+  features = Object.assign(Object.assign({}, defaultFeatures), features !== null && features !== void 0 ? features : {});
+  const {
+    t
+  } = reactI18next.useTranslation(["common", "view-shipment"]);
+  const [showItems, setShowItems] = React.useState(false);
+  const {
+    confirmation: deliveryConfirmation,
+    packages,
+    insuranceProvider
+  } = shipment;
+  const {
+    dimensions: dimensions$1,
+    weight: weight$1,
+    insuredValue
+  } = packages[0];
+  const {
+    whole: pounds,
+    fractional: ounces
+  } = weight.convertWeight(weight$1);
+  const requestedServices = React.useMemo(() => salesOrder.getRequestedServices(salesOrder$1), [salesOrder$1]);
+  const activeLabel = React.useMemo(() => labels === null || labels === void 0 ? void 0 : labels.find(l => l.status === "completed"), [labels]);
+  const hasSalesOrder = React.useMemo(() => shipment.salesOrderIds.length > 0, [shipment.salesOrderIds.length]);
+  const fundingSourceMetadata = reactApi.useGetFundingSourceMetadata();
+  const fundingSourceRegion = (_a = fundingSourceMetadata.data) === null || _a === void 0 ? void 0 : _a.defaultRegionProfile.countryCode;
+  const isVatRequiredCountry = vat.getIsVatRequired(fundingSourceRegion);
+  const showVatFeatures = globalFeatures.showVatSettings && isVatRequiredCountry;
+  const {
+    fundingSourceInsuranceProvider
+  } = useGetFundingSourceInsuranceProvider.useGetFundingSourceInsuranceProvider();
+  const {
+    hasInsuranceToRegister,
+    insuranceProviderProfiles,
+    registerInsuranceProvider
+  } = useManageFundingSourceInsurance.useManageFundingSourceInsurance();
+  const handleEnableInsuranceSubmit = React.useCallback(() => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    return yield registerInsuranceProvider();
+  }), [registerInsuranceProvider]);
+  const formatWeight = weight$1 => weight.isMetricWeightUnit(weight$1.unit) ? t(`weight.${weight$1.unit}`, {
+    count: weight$1.value
+  }) : [pounds > 0 ? t("weight.pounds", {
+    count: pounds
+  }) : "", ounces > 0 ? t("weight.ounces", {
+    count: ounces
+  }) : ""].filter(msg => msg.length).join(" ");
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs(section.Section, Object.assign({
+      "data-testid": "orderDetail"
+    }, {
+      children: [jsxRuntime.jsxs(fieldLabel.FieldLabel, Object.assign({
+        "data-testid": "shipDate",
+        label: t("view-shipment:fields.shipDate")
+      }, {
+        children: [date.formatDate(date.omitTime(shipment.shipDate).toISOString(), defaultLocale), jsxRuntime.jsx(spacer.Spacer, {})]
+      })), jsxRuntime.jsxs(fieldLabel.FieldLabel, Object.assign({
+        "data-testid": "shipFrom",
+        label: t("view-shipment:fields.warehouse")
+      }, {
+        children: [warehouse ? warehouse.name : shipment.shipFrom ? jsxRuntime.jsx(addressDisplay.AddressDisplay, {
+          address: shipment.shipFrom,
+          typographyVariant: "body1"
+        }) : t("loading.warehouses"), jsxRuntime.jsx(spacer.Spacer, {})]
+      })), jsxRuntime.jsxs(fieldLabel.FieldLabel, Object.assign({
+        "data-testid": "shipTo",
+        label: t("view-shipment:fields.shipTo")
+      }, {
+        children: [jsxRuntime.jsx(addressDisplay.AddressDisplay, {
+          address: shipment.shipTo,
+          typographyVariant: "body1"
+        }), jsxRuntime.jsx(spacer.Spacer, {})]
+      })), hasSalesOrder && jsxRuntime.jsxs(fieldLabel.FieldLabel, Object.assign({
+        "data-testid": "orderDate",
+        label: t("view-shipment:fields.orderDate")
+      }, {
+        children: [salesOrder$1 ? date.formatDate(salesOrder$1.orderDate, defaultLocale) : t("loading.salesOrder"), jsxRuntime.jsx(spacer.Spacer, {})]
+      })), hasSalesOrder && jsxRuntime.jsxs(fieldLabel.FieldLabel, Object.assign({
+        "data-testid": "orderValue",
+        label: t("view-shipment:fields.orderValue")
+      }, {
+        children: [salesOrder$1 ? money.formatMoney(salesOrder$1.paymentDetails.grandTotal) : t("loading.salesOrder"), jsxRuntime.jsx(spacer.Spacer, {})]
+      })), !!requestedServices.length && jsxRuntime.jsxs(fieldLabel.FieldLabel, Object.assign({
+        "data-testid": "requested",
+        label: t("view-shipment:fields.requestedShipping")
+      }, {
+        children: [requestedServices.length > 1 ? t("view-shipment:multipleShippingServices") : requestedServices[0], jsxRuntime.jsx(spacer.Spacer, {})]
+      })), salesOrder$1 && jsxRuntime.jsxs(fieldLabel.FieldLabel, Object.assign({
+        label: t("view-shipment:fields.estimatedShipping")
+      }, {
+        children: [money.formatMoney(salesOrder$1.paymentDetails.estimatedShipping), jsxRuntime.jsx(spacer.Spacer, {})]
+      })), salesOrder$1 && salesOrder$1.salesOrderItems.length > 0 && jsxRuntime.jsxs(fieldLabel.FieldLabel, Object.assign({
+        label: t("view-shipment:fields.items")
+      }, {
+        children: [jsxRuntime.jsxs("div", Object.assign({
+          css: {
+            display: "flex",
+            justifyContent: "space-between"
+          }
+        }, {
+          children: [salesOrder$1.salesOrderItems.reduce((total, i) => i.quantity + total, 0), jsxRuntime.jsx(linkAction.LinkAction, {
+            "data-testid": "view-shipment:actions.showItems",
+            icon: showItems ? "chevronTop" : "chevronBottom",
+            iconPlacement: "right",
+            onClick: event => {
+              event.preventDefault();
+              setShowItems(!showItems);
+            },
+            title: showItems ? t("view-shipment:actions.hideItems") : t("view-shipment:actions.showItems")
+          })]
+        })), jsxRuntime.jsx(spacer.Spacer, {})]
+      })), showItems && jsxRuntime.jsxs("div", Object.assign({
+        "data-testid": "itemsBreakdown"
+      }, {
+        children: [jsxRuntime.jsx(itemsBreakdown.ItemsBreakdown, {
+          items: (salesOrder$1 === null || salesOrder$1 === void 0 ? void 0 : salesOrder$1.salesOrderItems.map(item => {
+            var _a;
+            return {
+              detail: `SKU ${item.lineItemDetails.sku}`,
+              name: item.lineItemDetails.name,
+              quantity: item.quantity,
+              subDetail: (_a = item.requestedShippingOptions) === null || _a === void 0 ? void 0 : _a.shippingService,
+              subDetailValue: item.priceSummary.estimatedShipping,
+              totalValue: item.priceSummary.total,
+              value: item.priceSummary.unitPrice
+            };
+          })) || []
+        }), jsxRuntime.jsx(spacer.Spacer, {})]
+      })), dimensions$1 && jsxRuntime.jsxs(fieldLabel.FieldLabel, Object.assign({
+        "data-testid": "dimensions",
+        label: t("view-shipment:fields.dimensions")
+      }, {
+        children: [`${dimensions.formatDimensions(dimensions$1)} ` + t(`units.${dimensions$1.unit}`), jsxRuntime.jsx(spacer.Spacer, {})]
+      })), jsxRuntime.jsx(fieldLabel.FieldLabel, Object.assign({
+        "data-testid": "weight",
+        label: t("view-shipment:fields.weight")
+      }, {
+        children: formatWeight(weight$1)
+      }))]
+    })), jsxRuntime.jsxs(section.Section, Object.assign({
+      rightContent: features.schedulePickup && schedulePickupForCarrier(activeLabel === null || activeLabel === void 0 ? void 0 : activeLabel.carrierCode) ? jsxRuntime.jsx(giger.Link, Object.assign({
+        css: theme => ({
+          fontWeight: styles.scopeTheme(theme).typography.fontWeight.normal
+        }),
+        href: schedulePickupForCarrier(activeLabel === null || activeLabel === void 0 ? void 0 : activeLabel.carrierCode),
+        rel: "noreferrer",
+        target: "_blank"
+      }, {
+        children: t("view-shipment:actions.schedulePickup")
+      })) : undefined,
+      title: t("view-shipment:sections.labels")
+    }, {
+      children: [!(labels === null || labels === void 0 ? void 0 : labels.length) && jsxRuntime.jsx(giger.Typography, {
+        children: t("view-shipment:noLabels")
+      }), (_b = sortLabels(labels)) === null || _b === void 0 ? void 0 : _b.map((label, i, data) => {
+        const carrier = carriers === null || carriers === void 0 ? void 0 : carriers.find(c => c.carrierCode === label.carrierCode);
+        const service = carrier === null || carrier === void 0 ? void 0 : carrier.services.find(s => s.serviceCode === label.serviceCode);
+        return jsxRuntime.jsxs(React.Fragment, {
+          children: [jsxRuntime.jsx(labelDisplay.LabelDisplay, {
+            fundingSourceInsuranceProvider: fundingSourceInsuranceProvider,
+            label: Object.assign(Object.assign({}, label), {
+              carrier,
+              deliveryConfirmation,
+              insuranceProvider,
+              insuredValue,
+              service
+            }),
+            onClickPrintLabel: onClickPrintLabel,
+            onClickVoid: onClickVoidLabel,
+            showVatFeatures: showVatFeatures
+          }), i !== data.length - 1 ? jsxRuntime.jsx(spacer.Spacer, {
+            multiplier: 2
+          }) : null]
+        }, label.labelId);
+      }), onClickPurchaseLabel && (labels === null || labels === void 0 ? void 0 : labels.every(l => l.voided)) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(spacer.Spacer, {
+          multiplier: 2
+        }), jsxRuntime.jsx(buttonGroup.ButtonGroup, Object.assign({
+          breakpoint: "mobileLarge",
+          justify: "end"
+        }, {
+          children: jsxRuntime.jsx(giger.Button, Object.assign({
+            bold: false,
+            "data-testid": "buyAnotherLabel",
+            onClick: () => onClickPurchaseLabel(shipment, salesOrder$1),
+            type: "button"
+          }, {
+            children: t("view-shipment:actions.buyAnotherLabel")
+          }))
+        }))]
+      })]
+    })), (labels === null || labels === void 0 ? void 0 : labels.some(l => !!l.formDownload)) && isHighValueRequired(shipment, carriers) && jsxRuntime.jsx(section.Section, Object.assign({
+      title: "Forms"
+    }, {
+      children: jsxRuntime.jsx("div", Object.assign({
+        "data-testid": "highVolumeForms"
+      }, {
+        children: jsxRuntime.jsxs(reactI18next.Trans, Object.assign({
+          i18nKey: "view-shipment:highVolumeForms"
+        }, {
+          children: ["UPS requires two printed copies of a High-Value Report for shipments valued at $1,000 or more. One copy is for UPS, and the other must be signed by a UPS driver or", jsxRuntime.jsx(giger.Next.Link, Object.assign({
+            bold: false,
+            href: "https://locations.ups.com/us/en/",
+            rel: "noreferrer",
+            target: "_blank",
+            title: "Review our guide to international forms"
+          }, {
+            children: "UPS Customer Center"
+          })), "representative."]
+        }))
+      }))
+    })), activeLabel && activeLabel.rateDetails.length > 0 && showVatFeatures && jsxRuntime.jsx(section.Section, Object.assign({
+      title: t("view-shipment:sections.shipmentSummary")
+    }, {
+      children: jsxRuntime.jsx(rateDetails.RateDetails, {
+        rateDetails: activeLabel.rateDetails
+      })
+    })), hasInsuranceToRegister ? jsxRuntime.jsx("div", Object.assign({
+      css: {
+        padding: "16px"
+      }
+    }, {
+      children: jsxRuntime.jsx(enableInsuranceBanner.EnableInsuranceBanner, {
+        insuranceProviderProfile: insuranceProviderProfiles === null || insuranceProviderProfiles === void 0 ? void 0 : insuranceProviderProfiles[0],
+        onSubmit: handleEnableInsuranceSubmit
+      })
+    })) : null, globalFeatures.poweredByShipEngine && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(spacer.Spacer, {}), jsxRuntime.jsx(poweredByShipengine.PoweredByShipEngine, {})]
+    })]
+  });
+};
+
+exports.Shipment = Shipment;
+exports.schedulePickupForCarrier = schedulePickupForCarrier;

package/cjs/elements/shipment-summary/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var shipmentSummary = require('./shipment-summary.cjs');
+
+
+
+exports.ShipmentSummary = shipmentSummary;