@shipengine/elements 2.20.0 → 2.22.0

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

@@ -18,7 +18,9 @@ const getInitialFilters = (showShipmentIdFilter, showCreatedDateFilter) => ({
 const useShipmentsGrid = ({
   shipmentStatus,
   showShipmentIdFilter: _showShipmentIdFilter = true,
-  showCreatedDateFilter: _showCreatedDateFilter = true
+  showCreatedDateFilter: _showCreatedDateFilter = true,
+  sortBy,
+  sortDir
 }) => {
   var _a, _b, _c, _d;
   const initialFilters = getInitialFilters(_showShipmentIdFilter, _showCreatedDateFilter);
@@ -58,14 +60,13 @@ const useShipmentsGrid = ({
     page,
     pageSize,
     shipmentStatus,
-    sortBy: "modified_at",
-    sortDir: "desc"
+    sortBy: sortBy,
+    sortDir: sortDir
   }, getCreatedDateFilterValue((_b = (_a = filters.createdDate) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.start, (_d = (_c = filters.createdDate) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.end)));
   const shipments = useMemo(() => data === null || data === void 0 ? void 0 : data.shipments.map(shipment => Object.assign(Object.assign({}, shipment), {
     disableOnRowClick: shipment.shipmentStatus === "cancelled",
     serviceName: getServiceName(shipment)
   })), [data === null || data === void 0 ? void 0 : data.shipments, getServiceName]);
-  const shouldShowFilters = isAnyFilterEnabled && (isAnyFilterActive || Boolean(shipments === null || shipments === void 0 ? void 0 : shipments.length));
   const {
     data: shipmentById,
     error: shipmentErrors,
@@ -132,7 +133,7 @@ const useShipmentsGrid = ({
     },
     setFilters: onSetFilters,
     shipments,
-    shouldShowFilters
+    shouldShowFilters: isAnyFilterEnabled
   };
 };
 

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

@@ -1,14 +1,16 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { useSortableQuery } from '../../hooks/use-sortable-query.js';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { TagColor, Typography, Tag, TagVariant, EmptyState, Button } from '@shipengine/giger';
+import { EmptyState, Button, TagColor, Typography, Tag, TagVariant } from '@shipengine/giger';
 import { useShipmentsGrid } from './hooks/use-shipments-grid.js';
 import { styles } from './shipments-grid.styles.js';
 import { ActionsMenu, Actions } from '../../components/actions-menu/actions-menu.js';
 import { GridFilters } from '../../components/grid-filters/grid-filters.js';
 import en from '../../locales/en/index.js';
 import { useElements } from '../../elements-provider/elements-context-provider.js';
-import { Loader } from '../../components/loader/loader.js';
 import { ErrorState } from '../../components/error-state/error-state.js';
+import { SortableHeader } from '../../components/grid-controller/sortable-header/sortable-header.js';
 import { CellFormattedDate } from '../../components/grid-controller/cell-formatted-date.js';
 import { GridController } from '../../components/grid-controller/grid-controller.js';
 import { GridFooter } from '../../components/grid-controller/grid-footer.js';
@@ -51,6 +53,13 @@ const Component = ({
   const {
     globalFeatures
   } = useElements();
+  const {
+    toggleSort,
+    sortState
+  } = useSortableQuery({
+    defaultSortBy: "modified_at",
+    defaultSortDir: "desc"
+  });
   const {
     isLoading,
     isError,
@@ -64,13 +73,40 @@ const Component = ({
   } = useShipmentsGrid({
     shipmentStatus,
     showCreatedDateFilter: _showCreatedDateFilter,
-    showShipmentIdFilter: _showShipmentIdFilter
+    showShipmentIdFilter: _showShipmentIdFilter,
+    sortBy: sortState.by,
+    sortDir: sortState.dir
   });
-  if (isLoading) {
-    return jsx(Loader, {
-      message: t("loading.shipments")
-    });
-  }
+  const handleCreatedDateSort = () => {
+    toggleSort("created_at");
+  };
+  const handleUpdatedDateSort = () => {
+    toggleSort("modified_at");
+  };
+  const emptyContentComponent = useMemo(() => {
+    if (isLoading) {
+      return undefined;
+    }
+    if (isAnyFilterActive) {
+      return jsx(EmptyState, Object.assign({
+        isElevated: false,
+        subtitle: t("list-shipments:emptyState.filtersSubtitle"),
+        title: t("list-shipments:emptyState.filtersTitle")
+      }, {
+        children: jsx(Button, Object.assign({
+          onClick: clearAllFilters
+        }, {
+          children: t("list-shipments:emptyState.viewAll")
+        }))
+      }));
+    } else {
+      return jsx(EmptyState, {
+        isElevated: false,
+        subtitle: t("list-shipments:emptyState.subtitle"),
+        title: t("list-shipments:emptyState.title")
+      });
+    }
+  }, [clearAllFilters, isAnyFilterActive, isLoading, t]);
   if (isError) {
     return jsx(ErrorState, {
       css: styles.errorState,
@@ -156,7 +192,11 @@ const Component = ({
       }));
     }
   }, {
-    headerContent: t("list-shipments:headers.created"),
+    headerContent: jsx(SortableHeader, {
+      headerText: t("list-shipments:headers.created"),
+      onToggleSort: handleCreatedDateSort,
+      sortDirection: sortState.createdAtDir
+    }),
     renderCellContent: shipment => {
       return jsx(CellFormattedDate, {
         date: shipment.createdAt,
@@ -164,7 +204,11 @@ const Component = ({
       });
     }
   }, {
-    headerContent: t("list-shipments:headers.modified"),
+    headerContent: jsx(SortableHeader, {
+      headerText: t("list-shipments:headers.modified"),
+      onToggleSort: handleUpdatedDateSort,
+      sortDirection: sortState.modifiedAtDir
+    }),
     renderCellContent: shipment => {
       return jsx(CellFormattedDate, {
         date: shipment.modifiedAt,
@@ -196,23 +240,10 @@ const Component = ({
     children: [jsx(GridController, {
       columns: columns,
       data: getGridData(),
-      emptyContent: isAnyFilterActive ? jsx(EmptyState, Object.assign({
-        isElevated: false,
-        subtitle: t("list-shipments:emptyState.filtersSubtitle"),
-        title: t("list-shipments:emptyState.filtersTitle")
-      }, {
-        children: jsx(Button, Object.assign({
-          onClick: clearAllFilters
-        }, {
-          children: t("list-shipments:emptyState.viewAll")
-        }))
-      })) : jsx(EmptyState, {
-        isElevated: false,
-        subtitle: t("list-shipments:emptyState.subtitle"),
-        title: t("list-shipments:emptyState.title")
-      }),
+      emptyContent: emptyContentComponent,
       filters: shouldShowFilters && jsx(GridFilters, {
         filters: filters,
+        filtersDisabled: isLoading,
         onClearAllFilters: clearAllFilters,
         onFiltersUpdated: setFilters
       }),
@@ -224,6 +255,7 @@ const Component = ({
         showPagination: pageConfig.showPagination,
         total: pageConfig.totalElements
       }),
+      isLoading: isLoading,
       onRowClick: onRowClick
     }), globalFeatures.poweredByShipEngine && jsxs(Fragment, {
       children: [jsx(Spacer, {}), jsx(PoweredByShipEngine, {})]

package/esm/elements/theme-creator/components/configure-theme/configure-theme.js

@@ -11,7 +11,7 @@ import { Drawer } from '../../../../components/drawer/drawer.js';
 import { CopyButton } from '../../../../components/copy/copy-button.js';
 import { TypographyEditor } from '../typography-editor/typography-editor.js';
 import { ColorPaletteEditor } from '../color-palette-editor/color-palette-editor.js';
-import { Tabs } from '../../../../components/tabs/tabs.js';
+import { SegmentedControl } from '../../../../components/segmented-control/segemented-control.js';
 import { Spacer } from '../../../../components/spacer/spacer.js';
 import { ButtonGroup } from '../../../../components/button-group/button-group.js';
 
@@ -183,10 +183,10 @@ const ConfigureTheme = ({
             width: "100%"
           }
         }, {
-          children: jsx(Tabs, {
-            onSelectTab: handleSelectedTab,
-            selectedTab: selectedTab,
-            tabs: formattedThemeTabs
+          children: jsx(SegmentedControl, {
+            onSelect: handleSelectedTab,
+            segments: formattedThemeTabs,
+            selectedSegment: selectedTab
           })
         })), jsxs("div", {
           children: [jsxs("button", Object.assign({

package/esm/features/manage-carriers/manage-carriers.styles.js

@@ -7,6 +7,8 @@ const styles = createStyles({
     },
     border: `1px solid ${scopeTheme(theme).palette.gray.light}`,
     borderRadius: scopeTheme(theme).borderRadius.S,
+    display: "flex",
+    flexDirection: "column",
     listStyle: "none"
   })
 });

package/esm/features/manage-carriers/register-funding-source-carrier-form/register-funding-source-carrier-form.styles.js

@@ -10,17 +10,17 @@ const styles = createStyles({
     fontWeight: scopeTheme(theme).typography.fontWeight.normal
   }),
   getFormHeaderStyles: addressFormOpen => theme => ({
-    backgroundColor: addressFormOpen ? scopeTheme(theme).palette.gray.megaLight : "none",
+    backgroundColor: addressFormOpen ? scopeTheme(theme).palette.gray.ultraLight : "none",
     padding: addressFormOpen ? `${scopeTheme(theme).spacing(2)}px ${scopeTheme(theme).spacing(2)}px 0` : 0,
     textAlign: "left"
   }),
   newAddressForm: theme => ({
-    backgroundColor: scopeTheme(theme).palette.gray.megaLight,
+    backgroundColor: scopeTheme(theme).palette.gray.ultraLight,
     marginBottom: scopeTheme(theme).spacing(2),
     padding: `0 ${scopeTheme(theme).spacing(2)}px`
   }),
   termsWell: theme => ({
-    backgroundColor: scopeTheme(theme).palette.gray.megaLight,
+    backgroundColor: scopeTheme(theme).palette.gray.ultraLight,
     padding: scopeTheme(theme).spacing(2),
     width: "100%"
   })

package/esm/features/manage-external-carriers/use-manage-external-carriers.js

@@ -20,7 +20,7 @@ const useManageExternalCarriers = () => {
   return {
     carrierMetadata,
     carrierMetadataLoading,
-    connectedExternalCarriers: connectedCarriersList === null || connectedCarriersList === void 0 ? void 0 : connectedCarriersList.filter(carrier => !carrier.requiresFundedAmount),
+    connectedExternalCarriers: connectedCarriersList === null || connectedCarriersList === void 0 ? void 0 : connectedCarriersList.filter(carrier => !carrier.fundingSourceId && !(carrier.carrierCode === "stamps_com" && carrier.nickname === "Free")),
     deleteCarrier,
     deleteCarrierErrors,
     deleteCarrierSuccess,

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

@@ -109,18 +109,16 @@ const ManageWarehouses = ({
         }),
         submitButtonTitle: t("actions.save")
       })
-    })) : jsxs(Fragment, {
-      children: [jsx(ButtonGroup, Object.assign({
-        justify: "end"
-      }, {
-        children: jsx(LinkAction, {
-          icon: "add",
-          onClick: () => toggleShowAddNewWarehouseForm(true),
-          title: t("manage-warehouses:addNew")
-        })
-      })), jsx(Spacer, {
-        multiplier: 2
-      })]
+    })) : jsx(ButtonGroup, Object.assign({
+      justify: "end"
+    }, {
+      children: jsx(LinkAction, {
+        icon: "add",
+        onClick: () => toggleShowAddNewWarehouseForm(true),
+        title: t("manage-warehouses:addNew")
+      })
+    })), jsx(Spacer, {
+      multiplier: 2
     }), jsx("div", Object.assign({
       css: styles.cardSpacing
     }, {

package/esm/features/select-label-layout/select-label-layout.styles.js

@@ -1,17 +1,17 @@
 import { createStyles, scopeTheme } from '../../utilities/styles.js';
 
 const styles = createStyles({
-  button: theme => ({
+  button: () => ({
     backgroundColor: "transparent",
     padding: 0
   }),
-  buttonContainer: theme => ({
+  buttonContainer: () => ({
     alignItems: "center",
     display: "flex",
     justifyContent: "left"
   }),
   icon: theme => ({
-    color: scopeTheme(theme).palette.secondary.main,
+    color: scopeTheme(theme).palette.gray[900],
     position: "absolute",
     right: scopeTheme(theme).spacing(1),
     top: scopeTheme(theme).spacing(1)
@@ -49,7 +49,7 @@ const styles = createStyles({
     backgroundColor: scopeTheme(theme).palette.white,
     border: `1px solid ${scopeTheme(theme).palette.secondary.main}`,
     borderRadius: "10px",
-    boxShadow: `0 0 0 3px ${scopeTheme(theme).palette.secondary.main}`,
+    boxShadow: `0 0 0 1px ${scopeTheme(theme).palette.secondary.main}`,
     boxSizing: "border-box",
     cursor: "pointer",
     display: "flex",
@@ -64,7 +64,7 @@ const styles = createStyles({
     backgroundColor: scopeTheme(theme).palette.white,
     border: `1px solid ${scopeTheme(theme).palette.secondary.main}`,
     borderRadius: "10px",
-    boxShadow: `0 0 0 3px ${scopeTheme(theme).palette.secondary.main}`,
+    boxShadow: `0 0 0 1px ${scopeTheme(theme).palette.secondary.main}`,
     cursor: "pointer",
     display: "flex",
     flexDirection: "column",

package/esm/hooks/use-balance-services.js

@@ -8,7 +8,10 @@ import { useFundingSourcesAddFunds, useAddFunds, useListCarriers, useListFunding
  *
  * @returns `UseBalanceServicesReturnType`
  */
-const useBalanceServices = () => {
+const useBalanceServices = ({
+  carrierId,
+  fundingSourceId
+}) => {
   const {
     mutateAsync: addFSFundsMutation,
     error: addFSFundsErrors,
@@ -30,31 +33,56 @@ const useBalanceServices = () => {
     isInitialLoading: isFundingSourceInitialLoading
   } = useListFundingSources();
   const [fundingOriginError, setFundingOriginError] = useState(null);
-  const useCarrierBalance = useMemo(() => (fundingSources === null || fundingSources === void 0 ? void 0 : fundingSources.length) === 0, [fundingSources]);
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-ignore
   const fundingOrigin = useMemo(() => {
-    if (useCarrierBalance && (carriersData === null || carriersData === void 0 ? void 0 : carriersData.length)) {
-      // find first availible carrier with a balance.
-      const walletedCarrier = carriersData.find(carrier => carrier.requiresFundedAmount);
-      if (walletedCarrier) {
-        return {
-          balance: walletedCarrier.balance,
-          currency: SE.Currency.USD,
-          id: walletedCarrier.carrierId
-        };
+    let fundingSource;
+    let walletedCarrier;
+    // If a funding source ID is provided, prioritize that as the origin.
+    if (fundingSourceId) {
+      fundingSource = fundingSources === null || fundingSources === void 0 ? void 0 : fundingSources.find(source => source.fundingSourceId === fundingSourceId);
+    }
+    // If a carrier ID is provided, see if it has a funding source,
+    // otherwise use that carrier as the origin.
+    if (carrierId) {
+      const carrier = carriersData === null || carriersData === void 0 ? void 0 : carriersData.find(carrier => carrier.carrierId === carrierId);
+      // Use the carrier's funding source if available.
+      if (!fundingSource && (carrier === null || carrier === void 0 ? void 0 : carrier.fundingSourceId)) {
+        fundingSource = fundingSources === null || fundingSources === void 0 ? void 0 : fundingSources.find(source => source.fundingSourceId === (carrier === null || carrier === void 0 ? void 0 : carrier.fundingSourceId));
+      }
+      // Use the carrier itself if it's walleted
+      if (carrier && carrier.requiresFundedAmount) {
+        walletedCarrier = carrier;
+      }
+    }
+    // Otherwise, use the first available funding source or carrier balance.
+    if (!fundingSource && !walletedCarrier) {
+      if (!fundingSource && (fundingSources === null || fundingSources === void 0 ? void 0 : fundingSources.length)) {
+        fundingSource = fundingSources[0];
       }
-    } else if (fundingSources === null || fundingSources === void 0 ? void 0 : fundingSources.length) {
-      const fundingSource = fundingSources[0];
-      if (fundingSource) {
-        return {
-          balance: fundingSource.balance,
-          currency: getCurrencyFromString(fundingSource.currencyCode),
-          id: fundingSource.fundingSourceId
-        };
+      if (!walletedCarrier && (carriersData === null || carriersData === void 0 ? void 0 : carriersData.length)) {
+        walletedCarrier = carriersData.find(carrier => carrier.requiresFundedAmount);
       }
     }
-  }, [carriersData, fundingSources, useCarrierBalance]);
+    // If we found a funding source, use that as funding origin.
+    if (fundingSource) {
+      return {
+        balance: fundingSource.balance,
+        currency: getCurrencyFromString(fundingSource.currencyCode),
+        id: fundingSource.fundingSourceId,
+        originType: "fundingSource"
+      };
+    }
+    // Otherwise, use walleted carrier as funding origin.
+    if (walletedCarrier) {
+      return {
+        balance: walletedCarrier.balance,
+        currency: SE.Currency.USD,
+        id: walletedCarrier.carrierId,
+        originType: "carrier"
+      };
+    }
+  }, [carriersData, fundingSources, fundingSourceId, carrierId]);
   const addFundsMutation = useCallback(funds => __awaiter(void 0, void 0, void 0, function* () {
     try {
       if (!fundingOrigin) throw new CodedError("No funding origin", {
@@ -62,7 +90,7 @@ const useBalanceServices = () => {
         errorSource: "elements",
         errorType: "business_rules"
       });
-      if (useCarrierBalance) {
+      if (fundingOrigin.originType === "carrier") {
         yield addCarrierFundsMutation({
           carrierId: fundingOrigin.id,
           funds
@@ -79,7 +107,7 @@ const useBalanceServices = () => {
         setFundingOriginError(error);
       }
     }
-  }), [addCarrierFundsMutation, addFSFundsMutation, fundingOrigin, fundingOriginError, useCarrierBalance]);
+  }), [addCarrierFundsMutation, addFSFundsMutation, fundingOrigin, fundingOriginError]);
   const resetAddFundsMutationState = useCallback(() => {
     resetCarrierAddfunds();
     resetFSAddFunds();

package/esm/hooks/use-sortable-query.js

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+const useSortableQuery = ({
+  defaultSortBy: _defaultSortBy = "modified_at",
+  defaultSortDir: _defaultSortDir = "desc"
+}) => {
+  const [sortState, setSortState] = useState({
+    by: _defaultSortBy,
+    createdAtDir: _defaultSortDir,
+    dir: _defaultSortDir,
+    modifiedAtDir: _defaultSortDir
+  });
+  const toggleSort = sortQuery => {
+    const newSortState = Object.assign({}, sortState);
+    if (sortQuery === "created_at") {
+      newSortState.createdAtDir = sortState.createdAtDir === "asc" ? "desc" : "asc";
+      newSortState.dir = newSortState.createdAtDir;
+      newSortState.by = "created_at";
+    } else if (sortQuery === "modified_at") {
+      newSortState.modifiedAtDir = sortState.modifiedAtDir === "asc" ? "desc" : "asc";
+      newSortState.dir = newSortState.modifiedAtDir;
+      newSortState.by = "modified_at";
+    }
+    setSortState(newSortState);
+  };
+  return {
+    sortState,
+    toggleSort
+  };
+};
+
+export { useSortableQuery };

package/esm/locales/en/common.js

@@ -212,6 +212,7 @@ var common = {
 	grid: {
 		"row-count_one": "Showing {{firstIndex}}-{{lastIndex}} of <0>{{count}} item</0>",
 		"row-count_other": "Showing {{firstIndex}}-{{lastIndex}} of <0>{{count}} items</0>",
+		"row-count-plus_other": "Showing {{firstIndex}}-{{lastIndex}} of <0>{{count}}+ items</0>",
 		rows: "Rows",
 		clearAll: "Clear all",
 		shipmentId: "Shipment ID",
@@ -249,6 +250,9 @@ var common = {
 		connectCarrierForm: "Loading carrier registration form...",
 		connectingCarriers: "Connecting carriers...",
 		creatingFundingSource: "Creating wallet...",
+		submittingOnboarding: "Submitting...",
+		submittingWarehouse: "Saving ship from address...",
+		updatingPaymentMethod: "Updating payment method...",
 		data: "Loading...",
 		importingSalesOrder: "Importing order...",
 		label: "Loading label...",

package/esm/locales/en/list-labels.js

@@ -12,16 +12,17 @@ var listLabels = {
 		trackingStatus: "Delivery Status",
 		labelId: "Label ID",
 		externalOrderId: "External Order ID",
-		externalShipmentId: "External Shipment ID"
+		externalShipmentId: "External Shipment ID",
+		shipmentNumber: "Shipment Number"
 	},
 	empty: {
-		title: "You currently don’t have any labels",
+		title: "No labels have been created yet.",
 		subtitle: "Once labels are created, they will appear here for easy management."
 	},
 	emptyWithFilters: {
 		title: "No labels found",
-		subtitle: "Try changing the filters for this view.",
-		button: "View all Labels"
+		subtitle: "We couldn't find any labels matching the applied filters.",
+		button: "View All Labels"
 	},
 	status: {
 		voided: "Voided",

package/esm/locales/en/onboarding.js

@@ -1,11 +1,16 @@
 var onboarding = {
 	title: "Onboarding",
+	previouslyOnboarded: {
+		title: "You have already completed onboarding.",
+		subtitle: "Continue to update your ship from address or payment information"
+	},
 	confirmation: {
 		title: "Confirmation",
 		warehouse: "Ship From Address",
 		billingAddress: "Billing Address",
 		paymentMethod: "Payment Method",
-		action: "Confirm"
+		action: "Confirm",
+		noPaymentMethod: "No payment method found. Please add a payment method to avoid errors."
 	},
 	stepLabel: {
 		confirmation: "Confirmation",
@@ -26,6 +31,10 @@ var onboarding = {
 		noCarriers: {
 			title: "No ShipEngine carriers have been enabled.",
 			subtitle: "You cannot continue onboarding at this time. Please contact support."
+		},
+		unableToLoad: {
+			title: "Unable to load onboarding data.",
+			subtitle: "Please try again later."
 		}
 	},
 	success: {

package/esm/locales/en/purchase-label.js

@@ -21,7 +21,7 @@ var purchaseLabel = {
 		parcelguard: "Protect your shipments with ParcelGuard. <0>Enable now</0>"
 	},
 	errorMessages: {
-		customsItemsRequired: "Customs Items are required",
+		customsItemsRequired: "Customs declarations are required",
 		invalidAddress: "The address cannot be validated. Please confirm the address details with your customer and <link>edit the address in ShipStation</link>.",
 		noRates: "We were unable to find any rates matching your shipment information",
 		salesOrderNotLoaded: "Sales order has not been loaded",
@@ -68,7 +68,8 @@ var purchaseLabel = {
 		contentDescription: "Required for all shipments to Mexico"
 	},
 	loading: {
-		calculatingRates: "Calculating rates..."
+		calculatingRates: "Calculating rates...",
+		savingRate: "Saving rate..."
 	},
 	modes: {
 		browseRates: "Browse Rates",

package/esm/package.js

@@ -1,3 +1,3 @@
-var version = "2.20.0";
+var version = "2.22.0";
 
 export { version };

package/esm/themes/auctane.js

@@ -52,8 +52,8 @@ const auctaneThemeData = {
       dark: "#0F0F10",
       light: "#CFD1D3",
       main: "#56595D",
-      megaLight: "#E4E5E7",
-      ultraLight: "#F1F2F3"
+      megaLight: "#F1F2F3",
+      ultraLight: "#E4E5E7"
     },
     info: {
       light: "#E5EBFF",

package/esm/utilities/feature-flags/feature-flags.js

@@ -4,7 +4,7 @@ const defaultLabelsGridColumns = [{
   allowFilter: true,
   name: "labelId"
 }, {
-  allowFilter: true,
+  allowFilter: false,
   name: "trackingStatus"
 }, {
   name: "recipient"
@@ -12,8 +12,6 @@ const defaultLabelsGridColumns = [{
   name: "shippingService"
 }, {
   name: "createdDate"
-}, {
-  name: "trackingStatus"
 }];
 const defaultFeatureFlags = {
   accountSettingsFeatures: {

package/esm/workflows/connect-external-carrier/components/custom-external-carrier-form/custom-external-carrier-form.js

@@ -1,11 +1,13 @@
 import { __rest } from 'tslib';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { CustomExternalCarrierFormFedex } from './custom-form-fedex.js';
+import { CustomExternalCarrierFormStampsCom } from './custom-form-stamps_com.js';
 
 const hasCustomExternalCarrierConnectionForm = carrierCode => {
   switch (carrierCode) {
     case "fedex":
     case "fedex_uk":
+    case "stamps_com":
       return true;
     default:
       return false;
@@ -27,6 +29,10 @@ const CustomExternalCarrierForm = _a => {
       }, props, {
         isUK: true
       }));
+    case "stamps_com":
+      return jsx(CustomExternalCarrierFormStampsCom, Object.assign({
+        carrierName: carrierName
+      }, props));
     default:
       throw new Error(`No form found for carrier '${carrierName}'.`);
   }

package/esm/workflows/connect-external-carrier/components/custom-external-carrier-form/custom-form-fedex.js

@@ -163,6 +163,10 @@ const fedexJsonSchema = isUK => ({
       title: "Contact Last Name",
       type: "string"
     },
+    nickname: {
+      title: "Account Nickname",
+      type: "string"
+    },
     phone: {
       maxLength: 20,
       title: "Phone #",
@@ -181,7 +185,7 @@ const fedexJsonSchema = isUK => ({
       type: "string"
     }
   },
-  required: ["accountNumber", "firstName", "lastName", "email", "countryCode", "address1", "city", "state", "postalCode", "phone"],
+  required: ["accountNumber", "firstName", "lastName", "email", "countryCode", "address1", "city", "state", "postalCode", "phone", "nickname"],
   title: "Connect Your FedEx Account",
   type: "object"
 });
@@ -203,7 +207,7 @@ const fedexUiSchema = {
       inputType: "tel"
     }
   },
-  "ui:order": ["accountNumber", "firstName", "lastName", "company", "email", "countryCode", "address1", "address2", "city", "state", "postalCode", "phone", "agreeToEula"]
+  "ui:order": ["accountNumber", "firstName", "lastName", "company", "email", "countryCode", "address1", "address2", "city", "state", "postalCode", "phone", "agreeToEula", "nickname"]
 };
 const CustomExternalCarrierFormFedex = ({
   carrierName,