@shipengine/elements 2.27.0 → 2.29.0

package/dist/esm/elements/labels-grid/hooks/use-labels-grid.js

@@ -1,5 +1,5 @@
 import { useTheme } from '@emotion/react';
-import { useGetServiceName } from '../../../hooks/use-get-service-name.js';
+import { useGetServiceData } from '../../../hooks/use-get-service-data.js';
 import { useListLabels, useExportLabels, useListSalesOrderShipments, useGetLabel } from '@shipengine/react-api';
 import { createLocalFileFromBlobResponse } from '../../../utilities/files.js';
 import { scopeTheme } from '../../../utilities/styles.js';
@@ -40,7 +40,7 @@ const useLabelsGrid = ({
   const theme = useTheme();
   const {
     getServiceName
-  } = useGetServiceName();
+  } = useGetServiceData();
   const {
     page,
     pageSize,

package/dist/esm/elements/labels-grid/labels-grid.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { useGetServiceData } from '../../hooks/use-get-service-data.js';
 import { useSortableQuery } from '../../hooks/use-sortable-query.js';
-import { EmptyState, Button, Tag, TagColor, TagVariant, Typography, Next } from '@shipengine/giger';
+import { EmptyState, Button, Tag, TagColor, TagVariant, Skeleton, IconSize, Typography, Next } from '@shipengine/giger';
 import { toSnakeCase } from '../../utilities/formatString.js';
 import { useRef, useMemo, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -19,6 +20,7 @@ import { useElements } from '../../elements-provider/elements-context-provider.j
 import { Spacer } from '../../components/spacer/spacer.js';
 import { PoweredByShipEngine } from '../../components/powered-by-shipengine/powered-by-shipengine.js';
 import { ErrorFallback } from '../../components/error-fallback/error-fallback.js';
+import { CarrierIcon } from '../../components/carrier-icon/carrier-icon.js';
 
 const Component = ({
   labelStatus,
@@ -104,6 +106,10 @@ const Component = ({
     sortDir: sortState.dir,
     columns: columnsArray
   });
+  const {
+    getServiceInfo,
+    isLoadingCarriers
+  } = useGetServiceData();
   useEffect(() => {
     if (prevStatus.current !== labelStatus) {
       pageConfig.pagerProps.resetCurrentPage();
@@ -290,14 +296,22 @@ const Component = ({
         }
       },
       shippingService: {
-        headerContent: t("list-labels:headers.shipping"),
+        headerContent: t("list-labels:headers.service"),
         renderCellContent: label => {
+          const serviceInfo = getServiceInfo(label);
           return jsxs(Fragment, {
-            children: [jsx(Typography, {
-              component: "p",
-              css: styles.tableParagraph,
-              variant: "body2",
-              children: label.serviceName || label.serviceCode
+            children: [isLoadingCarriers ? jsx(Skeleton, {}) : jsxs("div", {
+              css: styles.serviceCell,
+              children: [serviceInfo.hasCarrierIcon && serviceInfo.carrierCode && jsx(CarrierIcon, {
+                carrierCode: serviceInfo.carrierCode,
+                carrierName: serviceInfo.serviceName || serviceInfo.carrierCode,
+                size: IconSize.SIZE_SMALL
+              }), jsx(Typography, {
+                component: "p",
+                css: styles.tableParagraph,
+                variant: "body2",
+                children: serviceInfo.serviceName || t("list-labels:none")
+              })]
             }), label.trackable && jsx(Next.Link, {
               bold: false,
               href: label.trackingUrl,
@@ -350,17 +364,23 @@ const Component = ({
         }
       }
     });
+    const labelExpired = label => {
+      const ninetyDaysAgo = new Date();
+      ninetyDaysAgo.setDate(ninetyDaysAgo.getDate() - 90);
+      return new Date(label.createdAt) < ninetyDaysAgo;
+    };
     // Actual actions are only allowed for completed labels
     if ((features === null || features === void 0 ? void 0 : features.showActions) && labels.some(label => label.status === "completed")) {
       cols.push({
         headerContent: "",
         renderCellContent: label => {
           var _a, _b;
+          const isLabelExpired = labelExpired(label);
           const isLabelDelivered = label.trackingStatus === "delivered";
-          const isReprintAllowed = !!((_a = label.labelDownload) === null || _a === void 0 ? void 0 : _a.href) && label.status === "completed";
           const isVoidAllowed = !!onClickVoidLabel && label.status === "completed";
-          const isPrintFormsAllowed = !!((_b = label.formDownload) === null || _b === void 0 ? void 0 : _b.href) && label.status === "completed";
           const isViewDetailsAllowed = !!onClickViewDetails;
+          const isReprintAllowed = !!((_a = label.labelDownload) === null || _a === void 0 ? void 0 : _a.href) && label.status === "completed" && !isLabelExpired;
+          const isPrintFormsAllowed = !!((_b = label.formDownload) === null || _b === void 0 ? void 0 : _b.href) && label.status === "completed" && !isLabelExpired;
           const allowActionsMenu = isReprintAllowed || isVoidAllowed || isPrintFormsAllowed || isViewDetailsAllowed;
           if (isLabelDelivered || !allowActionsMenu) {
             return null;
@@ -389,7 +409,7 @@ const Component = ({
       });
     }
     return cols;
-  }, [t, toggleCreatedDateSort, sortState.createdAtDir, features === null || features === void 0 ? void 0 : features.columns, features === null || features === void 0 ? void 0 : features.showActions, labels, onClickExternalOrderId, onClickExternalShipmentId, onClickShipmentNumber, onClickTrackingNumber, onClickVoidLabel, onClickViewDetails, onClickPrintLabel, onClickPrintForms]);
+  }, [t, toggleCreatedDateSort, sortState.createdAtDir, features === null || features === void 0 ? void 0 : features.columns, features === null || features === void 0 ? void 0 : features.showActions, labels, onClickExternalOrderId, onClickExternalShipmentId, onClickShipmentNumber, getServiceInfo, isLoadingCarriers, onClickTrackingNumber, onClickVoidLabel, onClickViewDetails, onClickPrintLabel, onClickPrintForms]);
   const emptyContentComponent = useMemo(() => {
     if (isLoading) {
       return undefined;

package/dist/esm/elements/labels-grid/labels-grid.styles.js

@@ -6,6 +6,11 @@ const styles = createStyles({
   }, scopeTheme(theme).getComponentOverride("Table")),
   tableParagraph: {
     margin: 0
+  },
+  serviceCell: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
   }
 });
 

package/dist/esm/elements/purchase-label/components/rate-form/rate-view.js

@@ -32,7 +32,6 @@ const RateView = ({
   rateOptions,
   rates,
   salesOrder,
-  selectedRate,
   shipment,
   showVatFeatures
 }) => {
@@ -76,9 +75,8 @@ const RateView = ({
   }, [features === null || features === void 0 ? void 0 : features.enablePudoUI, pudoRateOptions, rateOptions]);
   const {
     collapsedRateOptionList,
-    COLLAPSED_RATE_VIEW_LIMIT,
     filterVisibleRateOptions
-  } = useFilterVisibleRateOptions(expandedRateOptionList);
+  } = useFilterVisibleRateOptions(expandedRateOptionList, features);
   const handleShowMoreRates = useCallback(() => {
     var _a;
     setShowHiddenRates === null || setShowHiddenRates === void 0 ? void 0 : setShowHiddenRates(!showHiddenRates);
@@ -197,8 +195,8 @@ const RateView = ({
         onClick: onSelectRate,
         onPaperlessAcknowledgementChange: onPaperlessAcknowledgementChange,
         onSelectServicePoint: onSelectServicePoint,
-        options: showHiddenRates ? expandedRateOptionList : collapsedRateOptionList
-      }, rateSelectCommonProps)), expandedRateOptionList.length > COLLAPSED_RATE_VIEW_LIMIT && jsx(LinkAction, {
+        options: showHiddenRates || !collapsedRateOptionList.length ? expandedRateOptionList : collapsedRateOptionList
+      }, rateSelectCommonProps)), expandedRateOptionList.length > collapsedRateOptionList.length && !!collapsedRateOptionList.length && jsx(LinkAction, {
         css: styles.showMoreOrLessRatesButton,
         icon: showHiddenRates ? "chevronTop" : "chevronBottom",
         iconPlacement: "right",

package/dist/esm/elements/purchase-label/components/shipment-form/shipment-form.js

@@ -515,13 +515,15 @@ const ShipmentForm = ({
   useEffect(() => {
     hasShipFromAddressErrors && toggleIsEditShipFromAddressFormOpen();
   }, [hasShipFromAddressErrors, toggleIsEditShipFromAddressFormOpen]);
+  const warehouseToEdit = useMemo(() => warehouses === null || warehouses === void 0 ? void 0 : warehouses.find(w => w.warehouseId === editShipFromAddressId), [editShipFromAddressId, warehouses]);
   const [editWarehouseForm, isEditWarehouseFormOpen, toggleIsEditWarehouseFormOpen] = useNestedForm(WarehouseForm, {
     formId: "edit-warehouse-form",
     onSubmit: payload => __awaiter(void 0, void 0, void 0, function* () {
       editShipFromAddressId && (yield handleSubmitEditWarehouse(payload, editShipFromAddressId));
     }),
     submitButtonTitle: t("actions.save"),
-    warehouse: warehouses === null || warehouses === void 0 ? void 0 : warehouses.find(w => w.warehouseId === editShipFromAddressId)
+    warehouse: warehouseToEdit,
+    shouldForceDefault: warehouseToEdit === null || warehouseToEdit === void 0 ? void 0 : warehouseToEdit.isDefault
   });
   const getFundingSourceInsuranceProviderKey = useCallback(provider => {
     if (provider === "parcelguard") {

package/dist/esm/elements/purchase-label/hooks/use-filter-visible-rate-options/use-filter-visible-rate-options.js

@@ -1,7 +1,7 @@
 import { useMemo, useCallback } from 'react';
 
 const COLLAPSED_RATE_VIEW_LIMIT = 4;
-const filterRateOptions = rateOptions => {
+const filterRateOptions = (rateOptions, showMediaMail) => {
   const hasRateAttributes = option => {
     var _a;
     return !!((_a = option.rateAttributes) === null || _a === void 0 ? void 0 : _a.length);
@@ -12,7 +12,7 @@ const filterRateOptions = rateOptions => {
   const ratesWithoutAttributes = [];
   // Classify rates (excluding Media Mail from both categories)
   for (const option of rateOptions) {
-    if (isMediaMail(option)) {
+    if (!showMediaMail && isMediaMail(option)) {
       continue; // Skip Media Mail entirely - it will only show in "Show more"
     }
     if (hasRateAttributes(option)) {
@@ -40,9 +40,9 @@ const filterRateOptions = rateOptions => {
  * - Fill remaining slots with regular rates
  * - Media Mail is always excluded from the collapsed view
  */
-const useFilterVisibleRateOptions = rateOptions => {
-  const collapsedRateOptionList = useMemo(() => filterRateOptions(rateOptions), [rateOptions]);
-  const filterVisibleRateOptions = useCallback(options => filterRateOptions(options), []);
+const useFilterVisibleRateOptions = (rateOptions, features) => {
+  const collapsedRateOptionList = useMemo(() => filterRateOptions(rateOptions, features === null || features === void 0 ? void 0 : features.showMediaMail), [rateOptions, features]);
+  const filterVisibleRateOptions = useCallback(options => filterRateOptions(options, features === null || features === void 0 ? void 0 : features.showMediaMail), [features]);
   return {
     COLLAPSED_RATE_VIEW_LIMIT,
     collapsedRateOptionList,

package/dist/esm/elements/shipments-grid/hooks/use-shipments-grid.js

@@ -1,4 +1,4 @@
-import { useGetServiceName } from '../../../hooks/use-get-service-name.js';
+import { useGetServiceData } from '../../../hooks/use-get-service-data.js';
 import { useListShipments, useExportShipments, useGetShipment } from '@shipengine/react-api';
 import { createLocalFileFromBlobResponse } from '../../../utilities/files.js';
 import { useState, useEffect, useMemo } from 'react';
@@ -28,7 +28,7 @@ const useShipmentsGrid = ({
   const initialFilters = getInitialFilters(showShipmentIdFilter, showCreatedDateFilter);
   const {
     getServiceName
-  } = useGetServiceName();
+  } = useGetServiceData();
   const {
     page,
     pageSize,

package/dist/esm/elements/shipments-grid/shipments-grid.js

@@ -1,7 +1,8 @@
 import { __awaiter } from '../../_virtual/_tslib.js';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { useGetServiceData } from '../../hooks/use-get-service-data.js';
 import { useSortableQuery } from '../../hooks/use-sortable-query.js';
-import { EmptyState, Button, Typography, Tag, TagColor, TagVariant } from '@shipengine/giger';
+import { EmptyState, Button, Typography, Skeleton, IconSize, Tag, TagColor, TagVariant } from '@shipengine/giger';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useShipmentsGrid } from './hooks/use-shipments-grid.js';
@@ -12,6 +13,7 @@ import en from '../../locales/en/index.js';
 import { createElement } from '../../create-element/create-element.js';
 import { useElements } from '../../elements-provider/elements-context-provider.js';
 import { ErrorState } from '../../components/error-state/error-state.js';
+import { CarrierIcon } from '../../components/carrier-icon/carrier-icon.js';
 import { CellFormattedDate } from '../../components/grid-controller/cell-formatted-date.js';
 import { SortableHeader } from '../../components/grid-controller/sortable-header/sortable-header.js';
 import { GridController } from '../../components/grid-controller/grid-controller.js';
@@ -85,6 +87,10 @@ const Component = ({
     sortBy: sortState.by,
     sortDir: sortState.dir
   });
+  const {
+    getServiceInfo,
+    isLoadingCarriers
+  } = useGetServiceData();
   const onRowClick = shipment => __awaiter(void 0, void 0, void 0, function* () {
     setActiveShipmentId(shipment.shipmentId);
     yield onRowClickProp === null || onRowClickProp === void 0 ? void 0 : onRowClickProp(shipment);
@@ -188,13 +194,21 @@ const Component = ({
       }) : "--";
     }
   }, {
-    headerContent: t("list-shipments:headers.shipping"),
+    headerContent: t("list-shipments:headers.service"),
     renderCellContent: shipment => {
-      return jsx(Typography, {
-        component: "p",
-        css: styles.tableParagraph,
-        variant: "body2",
-        children: shipment.serviceName || t("list-shipments:none")
+      const serviceInfo = getServiceInfo(shipment);
+      return isLoadingCarriers ? jsx(Skeleton, {}) : jsxs("div", {
+        css: styles.serviceCell,
+        children: [serviceInfo.hasCarrierIcon && serviceInfo.carrierCode && jsx(CarrierIcon, {
+          carrierCode: serviceInfo.carrierCode,
+          carrierName: serviceInfo.serviceName || serviceInfo.carrierCode,
+          size: IconSize.SIZE_SMALL
+        }), jsx(Typography, {
+          component: "p",
+          css: styles.tableParagraph,
+          variant: "body2",
+          children: serviceInfo.serviceName || t("list-shipments:none")
+        })]
       });
     }
   }, {

package/dist/esm/elements/shipments-grid/shipments-grid.styles.js

@@ -6,6 +6,11 @@ const styles = createStyles({
   }, scopeTheme(theme).getComponentOverride("Table")),
   tableParagraph: {
     margin: 0
+  },
+  serviceCell: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
   }
 });
 

package/dist/esm/features/manage-warehouses/manage-warehouses.js

@@ -105,6 +105,7 @@ const ManageWarehouses = ({
           yield handleSubmitAddNewWarehouse(payload);
           toggleShowAddNewWarehouseForm(false);
         }),
+        shouldForceDefault: !(warehouses === null || warehouses === void 0 ? void 0 : warehouses.length),
         submitButtonTitle: t("actions.save")
       })
     }) : jsx(ButtonGroup, {
@@ -139,17 +140,20 @@ const ManageWarehouses = ({
               yield handleSubmitEditWarehouse(Object.assign(Object.assign({}, rest), warehouseData), warehouse.warehouseId);
               setEditWarehouseId(undefined);
             }),
-            children: jsx(WarehouseForm, {
-              onCancel: () => setEditWarehouseId(undefined),
-              // eslint-disable-next-line @typescript-eslint/no-misused-promises
-              onDelete: warehouse.isDefault ? undefined : () => handleDeleteWarehouse(warehouse.warehouseId),
+            children: jsx(WarehouseForm
+            // eslint-disable-next-line @typescript-eslint/no-misused-promises
+            , {
               // eslint-disable-next-line @typescript-eslint/no-misused-promises
               onSubmit: payload => __awaiter(void 0, void 0, void 0, function* () {
                 yield handleSubmitEditWarehouse(payload, warehouse.warehouseId);
                 setEditWarehouseId(undefined);
               }),
+              shouldForceDefault: warehouse.isDefault,
               submitButtonTitle: t("actions.save"),
-              warehouse: warehouse
+              warehouse: warehouse,
+              onCancel: () => setEditWarehouseId(undefined),
+              // eslint-disable-next-line @typescript-eslint/no-misused-promises
+              onDelete: warehouse.isDefault ? undefined : () => handleDeleteWarehouse(warehouse.warehouseId)
             })
           }, warehouse.warehouseId);
         } else {

package/dist/esm/features/payment-method-settings/payment-method-settings.js

@@ -1,5 +1,6 @@
 import { __awaiter } from '../../_virtual/_tslib.js';
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { AuctanePaySessionProvider } from '../../contexts/auctane-pay-session-context.js';
 import { useToggle } from '../../hooks/use-toggle.js';
 import { InlineNotification, NotificationType } from '@shipengine/giger';
 import { useUpdateFundingSource, useListFundingSources } from '@shipengine/react-api';
@@ -41,13 +42,13 @@ const PaymentMethodSettings = ({
     fundingSourceId,
     billingInfo
   } = (_a = fundingSources === null || fundingSources === void 0 ? void 0 : fundingSources[0]) !== null && _a !== void 0 ? _a : {};
-  const handleUpdateBilling = (billingInfo, creditCardInfo) => __awaiter(void 0, void 0, void 0, function* () {
+  const handleUpdateBilling = (billingInfo, auctanePayInfo) => __awaiter(void 0, void 0, void 0, function* () {
     if (fundingSourceId) {
       try {
         setIsUpdatingBilling(true);
         yield updateBilling({
           billingInfo,
-          creditCardInfo,
+          auctanePayInfo,
           fundingSourceId
         });
         yield refetchFundingSources();
@@ -60,7 +61,7 @@ const PaymentMethodSettings = ({
       }
     }
   });
-  if (showEditBilling) return jsxs(Fragment, {
+  if (showEditBilling) return jsxs(AuctanePaySessionProvider, {
     children: [jsx(EditBillingForm, {
       billingInfo: billingInfo,
       isLoading: isUpdatingBilling,