@shipengine/elements 2.20.0 → 2.22.0

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

@@ -1,10 +1,11 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
-import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import { useSortableQuery } from '../../hooks/use-sortable-query.js';
+import { useRef, useMemo, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TagColor, Next, Typography, Tag, TagVariant, EmptyState, Button } from '@shipengine/giger';
 import { useLabelsGrid } from './hooks/use-labels-grid.js';
 import { styles } from './labels-grid.styles.js';
-import { SortableHeader } from '../../components/grid-controller/sortable-header.js';
+import { SortableHeader } from '../../components/grid-controller/sortable-header/sortable-header.js';
 import { CellFormattedDate } from '../../components/grid-controller/cell-formatted-date.js';
 import { ActionsMenu, Actions } from '../../components/actions-menu/actions-menu.js';
 import { ErrorState } from '../../components/error-state/error-state.js';
@@ -13,7 +14,6 @@ import { GridFilters } from '../../components/grid-filters/grid-filters.js';
 import { GridFooter } from '../../components/grid-controller/grid-footer.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 { Spacer } from '../../components/spacer/spacer.js';
 import { PoweredByShipEngine } from '../../components/powered-by-shipengine/powered-by-shipengine.js';
 import { createElement } from '../../create-element/create-element.js';
@@ -28,9 +28,10 @@ const Component = ({
   onClickViewDetails,
   onRowClick,
   onClickExternalOrderId,
-  onClickExternalShipmentId
+  onClickExternalShipmentId,
+  onClickShipmentNumber
 }) => {
-  var _a, _b, _c;
+  var _a, _b;
   const {
     t
   } = useTranslation(["common", "list-labels"]);
@@ -40,7 +41,13 @@ const Component = ({
   } = useElements();
   const defaultFeatures = getFeatures("labelsGridFeatures");
   const prevStatus = useRef(labelStatus);
-  const [createdDateSortBy, setCreatedDateSortBy] = useState("desc");
+  const {
+    toggleSort,
+    sortState
+  } = useSortableQuery({
+    defaultSortBy: "modified_at",
+    defaultSortDir: "desc"
+  });
   features = Object.assign(Object.assign({}, defaultFeatures), features !== null && features !== void 0 ? features : {});
   const labelIdColumn = useMemo(() => {
     var _a;
@@ -54,14 +61,20 @@ const Component = ({
     var _a;
     return (_a = features === null || features === void 0 ? void 0 : features.columns) === null || _a === void 0 ? void 0 : _a.find(c => c.name === "trackingStatus");
   }, [features]);
+  const shipmentNumberColumn = useMemo(() => {
+    var _a;
+    return (_a = features === null || features === void 0 ? void 0 : features.columns) === null || _a === void 0 ? void 0 : _a.find(c => c.name === "shipmentNumber");
+  }, [features]);
   const showLabelIdFilter = labelIdColumn && ((_a = labelIdColumn.allowFilter) !== null && _a !== void 0 ? _a : true);
   const showShipmentIdFilter = shipmentIdColumn && ((_b = shipmentIdColumn.allowFilter) !== null && _b !== void 0 ? _b : true);
-  const showTrackingStatusFilter = trackingStatusColumn && ((_c = trackingStatusColumn.allowFilter) !== null && _c !== void 0 ? _c : true);
+  const showTrackingStatusFilter = trackingStatusColumn && !!trackingStatusColumn.allowFilter;
   const {
     labels,
     getGridData,
     isError,
     isLoading,
+    isFetchingNextPage,
+    hasMoreUnfetchedResults,
     filters,
     setFilters,
     pageConfig,
@@ -69,11 +82,12 @@ const Component = ({
     shouldShowFilters,
     clearAllFilters
   } = useLabelsGrid({
-    createdDateSortBy,
+    fetchShipments: !!shipmentNumberColumn,
     labelStatus,
     showLabelIdFilter,
     showShipmentIdFilter,
-    showTrackingStatusFilter
+    showTrackingStatusFilter,
+    sortDir: sortState.dir
   });
   useEffect(() => {
     if (prevStatus.current !== labelStatus) {
@@ -95,8 +109,8 @@ const Component = ({
     };
   }, [filters, labelIdColumn, shipmentIdColumn, trackingStatusColumn]);
   const toggleCreatedDateSort = useCallback(() => {
-    setCreatedDateSortBy(createdDateSortBy === "desc" ? "asc" : "desc");
-  }, [createdDateSortBy]);
+    toggleSort("created_at");
+  }, [toggleSort]);
   const columns = useMemo(() => {
     var _a;
     const labelTags = {
@@ -140,7 +154,7 @@ const Component = ({
         headerContent: jsx(SortableHeader, {
           headerText: t("list-labels:headers.created"),
           onToggleSort: toggleCreatedDateSort,
-          sortDirection: createdDateSortBy
+          sortDirection: sortState.createdAtDir
         }),
         renderCellContent: label => {
           return jsx(CellFormattedDate, {
@@ -249,6 +263,25 @@ const Component = ({
           }));
         }
       },
+      shipmentNumber: {
+        headerContent: t("list-labels:headers.shipmentNumber"),
+        renderCellContent: label => {
+          return label.shipmentNumber && onClickShipmentNumber ? jsx(Next.Link, Object.assign({
+            bold: false,
+            onClick: () => {
+              var _a;
+              return onClickShipmentNumber === null || onClickShipmentNumber === void 0 ? void 0 : onClickShipmentNumber((_a = label.shipmentNumber) !== null && _a !== void 0 ? _a : undefined);
+            }
+          }, {
+            children: label.shipmentNumber
+          })) : jsx(Typography, Object.assign({
+            component: "span",
+            variant: "body2"
+          }, {
+            children: label.shipmentNumber
+          }));
+        }
+      },
       shippingService: {
         headerContent: t("list-labels:headers.shipping"),
         renderCellContent: label => {
@@ -349,24 +382,13 @@ const Component = ({
       });
     }
     return cols;
-  }, [t, toggleCreatedDateSort, createdDateSortBy, features === null || features === void 0 ? void 0 : features.columns, features === null || features === void 0 ? void 0 : features.showActions, labels, onClickExternalOrderId, onClickExternalShipmentId, onClickViewDetails, onClickVoidLabel, onClickPrintLabel, onClickPrintForms]);
-  if (isLoading) {
-    return jsx(Loader, {
-      message: t("loading.labels")
-    });
-  }
-  if (isError) {
-    return jsx(ErrorState, {
-      css: styles.errorState,
-      subtitle: [t("list-labels:errorMessages.subtitle"), t("errorMessages.refreshAndTryAgain")],
-      title: t("list-labels:errorMessages.title")
-    });
-  }
-  return jsxs(Fragment, {
-    children: [jsx(GridController, {
-      columns: columns,
-      data: getGridData(),
-      emptyContent: isAnyFilterActive ? jsx(EmptyState, Object.assign({
+  }, [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, onClickVoidLabel, onClickViewDetails, onClickPrintLabel, onClickPrintForms]);
+  const emptyContentComponent = useMemo(() => {
+    if (isLoading) {
+      return undefined;
+    }
+    if (isAnyFilterActive) {
+      return jsx(EmptyState, Object.assign({
         isElevated: false,
         subtitle: t("list-labels:emptyWithFilters.subtitle"),
         title: t("list-labels:emptyWithFilters.title")
@@ -376,17 +398,36 @@ const Component = ({
         }, {
           children: t("list-labels:emptyWithFilters.button")
         }))
-      })) : jsx(EmptyState, {
+      }));
+    } else {
+      return jsx(EmptyState, {
         isElevated: false,
         subtitle: t("list-labels:empty.subtitle"),
         title: t("list-labels:empty.title")
-      }),
+      });
+    }
+  }, [clearAllFilters, isAnyFilterActive, isLoading, t]);
+  if (isError) {
+    return jsx(ErrorState, {
+      css: styles.errorState,
+      subtitle: [t("list-labels:errorMessages.subtitle"), t("errorMessages.refreshAndTryAgain")],
+      title: t("list-labels:errorMessages.title")
+    });
+  }
+  return jsxs(Fragment, {
+    children: [jsx(GridController, {
+      columns: columns,
+      data: getGridData(),
+      emptyContent: emptyContentComponent,
       filters: shouldShowFilters && jsx(GridFilters, {
         filters: gridFilters,
+        filtersDisabled: isLoading,
         onClearAllFilters: clearAllFilters,
         onFiltersUpdated: setFilters
       }),
       footerContent: jsx(GridFooter, {
+        hasMoreUnfetchedResults: hasMoreUnfetchedResults,
+        isLoadingMore: isFetchingNextPage,
         onPageChange: pageConfig.pagerProps.onPageSelect,
         page: pageConfig.currentPage,
         pages: pageConfig.pagesAmount,
@@ -394,6 +435,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/purchase-label/components/customs-forms/customs-forms.js

@@ -120,16 +120,18 @@ const CustomsForms = ({
       shouldUnregister: true
     }), _requiresWindsorFramework && jsx(WindsorFramework, {
       form: form
+    }), ((_b = (_a = (packageErrors !== null && packageErrors !== void 0 ? packageErrors : [])[0]) === null || _a === void 0 ? void 0 : _a.products) === null || _b === void 0 ? void 0 : _b.type) === "too_small" && jsxs(Fragment, {
+      children: [jsx(InlineNotification, {
+        title: t("purchase-label:errorMessages.customsItemsRequired"),
+        type: NotificationType.ERROR
+      }), jsx(Spacer, {
+        multiplier: 2
+      })]
     }), jsx(ProductsDisplay, {
       currency: currency,
       harmonizedTariffCodes: harmonizedTariffCodes,
       onUpdate: handleUpdateProducts,
       shipment: shipment
-    }), ((_b = (_a = (packageErrors !== null && packageErrors !== void 0 ? packageErrors : [])[0]) === null || _a === void 0 ? void 0 : _a.products) === null || _b === void 0 ? void 0 : _b.type) === "too_small" && jsxs(Fragment, {
-      children: [jsx(Spacer, {}), jsx(InlineNotification, {
-        title: t("purchase-label:errorMessages.customsItemsRequired"),
-        type: NotificationType.ERROR
-      }), jsx(Spacer, {})]
     }), jsx(TaxIds, {
       onDirty: onDirty,
       onUpdateTaxableIds: onUpdateTaxableIds,

package/esm/elements/purchase-label/components/customs-forms/products-display/products-display.js

@@ -6,10 +6,11 @@ import { formatMoney } from '../../../../../utilities/money.js';
 import { scopeTheme } from '../../../../../utilities/styles.js';
 import { useState, Fragment as Fragment$1, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Grid, GridChild, Typography, Link, Table, TableHeader, TableBaseRow, TableHeaderCell, TableBody, TableBodyCell, Icon, IconSize, Button, ButtonVariant, Popover, SpinnerSize } from '@shipengine/giger';
+import { Grid, GridChild, Typography, Table, TableHeader, TableBaseRow, TableHeaderCell, TableBody, TableBodyCell, Icon, IconSize, Link, Popover, Button, ButtonVariant, SpinnerSize } from '@shipengine/giger';
 import { IconNames } from '@shipengine/giger-theme';
 import { styles } from './products-display.styles.js';
 import { ProductForm } from '../product-form/product-form.js';
+import { LinkAction } from '../../../../../components/link-action/link-action.js';
 import { Loader } from '../../../../../components/loader/loader.js';
 
 const ProductActions = ({
@@ -21,7 +22,7 @@ const ProductActions = ({
     t
   } = useTranslation();
   const [showCustomsPopover, toggleShowCustomsPopover] = useToggle(false);
-  const buttonRef = useRef(null);
+  const actionsRef = useRef(null);
   const [isDeleting, setIsDeleting] = useState(false);
   const handleDelete = () => __awaiter(void 0, void 0, void 0, function* () {
     setIsDeleting(true);
@@ -29,28 +30,16 @@ const ProductActions = ({
     toggleShowCustomsPopover();
   });
   return jsxs(Fragment, {
-    children: [hasMultipleProducts ? jsx(Button, Object.assign({
+    children: [hasMultipleProducts ? jsx(LinkAction, {
       css: styles.actionsButton,
+      icon: "dots",
       onClick: toggleShowCustomsPopover,
-      ref: buttonRef,
-      variant: ButtonVariant.TEXT
-    }, {
-      children: jsx(Icon, {
-        name: IconNames.DOTS,
-        size: IconSize.SIZE_SMALL
-      })
-    })) : jsx(Button, Object.assign({
-      "aria-label": t("actions.edit"),
+      ref: actionsRef
+    }) : jsx(LinkAction, {
       css: styles.actionsButton,
-      onClick: onEditClick,
-      ref: buttonRef,
-      variant: ButtonVariant.TEXT
-    }, {
-      children: jsx(Icon, {
-        name: IconNames.EDIT,
-        size: IconSize.SIZE_SMALL
-      })
-    })), jsx(Popover
+      icon: "edit",
+      onClick: onEditClick
+    }), jsx(Popover
     // must be attached at a minimum, as a child to the theme provider
     , Object.assign({
       // must be attached at a minimum, as a child to the theme provider
@@ -58,10 +47,10 @@ const ProductActions = ({
       isOpen: showCustomsPopover,
       onClickAway: e => {
         var _a;
-        return !((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) && toggleShowCustomsPopover();
+        return !((_a = actionsRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) && toggleShowCustomsPopover();
       },
       placement: "left",
-      reference: buttonRef.current
+      reference: actionsRef.current
     }, {
       children: jsxs("div", Object.assign({
         css: styles.actions
@@ -143,22 +132,15 @@ const ProductsDisplay = ({
       })), jsx(GridChild, Object.assign({
         colSpan: 6
       }, {
-        children: !isCustomsItemFormOpen && jsxs(Link, Object.assign({
+        children: !isCustomsItemFormOpen && jsx(LinkAction, {
           css: theme => ({
             alignSelf: "end",
             fontWeight: scopeTheme(theme).typography.fontWeight.normal
           }),
+          icon: "add",
           onClick: toggleIsCustomsItemFormOpen,
-          onKeyDown: e => {
-            if (e.key === "Enter") {
-              toggleIsCustomsItemFormOpen();
-            }
-          },
-          role: "button",
-          tabIndex: 0
-        }, {
-          children: ["+ ", t("customs.addDeclaration")]
-        }))
+          title: t("customs.addDeclaration")
+        })
       }))]
     })), products.length > 0 && jsx(Table, Object.assign({
       header: jsx(TableHeader, Object.assign({

package/esm/elements/purchase-label/components/customs-forms/tax-ids/tax-ids.js

@@ -3,12 +3,13 @@ import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
 import { useNestedForm } from '../../../../../hooks/use-nested-form.js';
 import { useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Grid, GridChild, Typography, IconTooltip, IconSize, Link, InlineNotification, NotificationType } from '@shipengine/giger';
+import { Grid, GridChild, Typography, IconTooltip, IconSize, InlineNotification, NotificationType } from '@shipengine/giger';
 import { IconNames } from '@shipengine/giger-theme';
 import { FormID, TaxIdForm } from './tax-id-form.js';
 import { TaxIdList } from './tax-id-list.js';
 import { styles } from './tax-ids.styles.js';
 import { Actions } from '../../../../../components/actions-menu/actions-menu.js';
+import { LinkAction } from '../../../../../components/link-action/link-action.js';
 
 const mapTaxIdFormValuesToApi = values => ({
   identifierType: values.tax.type,
@@ -60,6 +61,10 @@ const TaxIds = ({
   }), [handleTaxIdCreation, handleTaxIdUpdate, taxIdToEdit]);
   const [taxableIdsForm, taxIdFormOpen, toggleTaxIdFormOpen] = useNestedForm(TaxIdForm, {
     formId: FormID,
+    onCancel: () => {
+      setTaxIdToEdit(undefined);
+      setTaxIdUpdateError(undefined);
+    },
     onSubmit: handleFormSubmit,
     taxIdToEdit: taxIdToEdit === null || taxIdToEdit === void 0 ? void 0 : taxIdToEdit.tax
   });
@@ -119,19 +124,13 @@ const TaxIds = ({
       })), jsx(GridChild, Object.assign({
         colSpan: 6
       }, {
-        children: jsxs(Link, Object.assign({
+        children: jsx(LinkAction, {
           css: [styles.addTaxIdLink, taxIdFormOpen && styles.addTaxIdLinkOpened],
+          icon: "add",
+          isDisabled: taxIdFormOpen,
           onClick: handleAddTaxIdClick,
-          onKeyDown: e => {
-            if (e.key === "Enter") {
-              handleAddTaxIdClick();
-            }
-          },
-          role: "button",
-          tabIndex: 0
-        }, {
-          children: ["+ ", t("customs.taxIds.addTaxId")]
-        }))
+          title: t("customs.taxIds.addTaxId")
+        })
       }))]
     })), jsxs(Grid, Object.assign({
       noPadding: true

package/esm/elements/purchase-label/components/fund-and-purchase/fund-and-purchase.js

@@ -34,14 +34,14 @@ const FundAndPurchase = ({
   currency,
   disabled,
   isFundingEnabled,
-  showVatSettings,
-  onSave,
+  isInvalidatedByError,
   onPurchase,
+  onSave,
   onVatRegistrationComplete,
-  isInvalidatedByError,
-  rateData
+  rateData,
+  showVatSettings
 }) => {
-  var _a, _b;
+  var _a, _b, _c;
   const {
     t
   } = useTranslation();
@@ -51,7 +51,9 @@ const FundAndPurchase = ({
     addFundsMutation,
     resetAddFundsMutationState,
     fundingOrigin
-  } = useBalanceServices();
+  } = useBalanceServices({
+    carrierId: (_a = rateData === null || rateData === void 0 ? void 0 : rateData.rate) === null || _a === void 0 ? void 0 : _a.carrierId
+  });
   const {
     isSubmitting: isRateFormSubmitting,
     isValid: isRateFormValid
@@ -69,10 +71,18 @@ const FundAndPurchase = ({
   const purchaseAmount = getTotalRateAmount(rate);
   const [isSavingRate, setIsSavingRate] = useState(false);
   const [isSavingError, setIsSavingError] = useState(false);
-  const [isAddFundsFormOpen, setIsAddFundsFormOpen] = useState(() => {
-    var _a;
-    return (_a = isFundingEnabled && isFundingRequired && (fundingOrigin === null || fundingOrigin === void 0 ? void 0 : fundingOrigin.balance) !== undefined && fundingOrigin.balance < purchaseAmount && !isInvalidatedByError) !== null && _a !== void 0 ? _a : false;
-  });
+  const purchaseRequiresAddingFunds = isFundingEnabled && isFundingRequired && (fundingOrigin === null || fundingOrigin === void 0 ? void 0 : fundingOrigin.balance) !== undefined && fundingOrigin.balance < purchaseAmount && !isInvalidatedByError;
+  const [isFormManuallyToggled, setIsFormManuallyToggled] = useState(false);
+  const isAddFundsFormOpen = purchaseRequiresAddingFunds || isFormManuallyToggled;
+  const toggleAddFundsForm = () => {
+    if (!purchaseRequiresAddingFunds) {
+      // If the label can be purchased without adding funds, allow manual toggling of the form
+      setIsFormManuallyToggled(!isFormManuallyToggled);
+    } else if (isFormManuallyToggled) {
+      // If the form is already open, close it
+      setIsFormManuallyToggled(false);
+    }
+  };
   useEffect(() => {
     resetAddFundsMutationState();
   }, [isAddFundsFormOpen, resetAddFundsMutationState]);
@@ -80,7 +90,7 @@ const FundAndPurchase = ({
     setIsSavingRate(true);
     setIsSavingError(false);
     try {
-      yield onSave();
+      yield onSave === null || onSave === void 0 ? void 0 : onSave();
     } catch (e) {
       setIsSavingError(true);
     } finally {
@@ -106,7 +116,7 @@ const FundAndPurchase = ({
         breakpoint: "mobileLarge",
         justify: "end"
       }, {
-        children: [jsx(Button, Object.assign({
+        children: [onSave && jsx(Button, Object.assign({
           bold: false,
           css: styles.saveRateButton,
           disabled: disableSaveButton,
@@ -137,7 +147,7 @@ const FundAndPurchase = ({
         }), isFundingEnabled ? jsx(LinkAction, {
           icon: "add",
           isDisabled: !isFundingRequired || isAddFundsFormOpen || isRateFormSubmitting,
-          onClick: () => setIsAddFundsFormOpen(!isAddFundsFormOpen),
+          onClick: toggleAddFundsForm,
           title: t("manage-funding:actions.addFunds")
         }) : null]
       }), jsx(Spacer, {
@@ -169,7 +179,7 @@ const FundAndPurchase = ({
     // A rate has been selected. Show the balance and add funds form if walleted carrier with funding enabled
     if (rate.requiresFundedAmount) {
       // Satisfy TS. Error is throw before we get to this point.
-      const balance = (_a = fundingOrigin === null || fundingOrigin === void 0 ? void 0 : fundingOrigin.balance) !== null && _a !== void 0 ? _a : 0;
+      const balance = (_b = fundingOrigin === null || fundingOrigin === void 0 ? void 0 : fundingOrigin.balance) !== null && _b !== void 0 ? _b : 0;
       return jsxs(Fragment, {
         children: [showVatSettings && !!rate.rateDetails.length && jsx(RateDetails, {
           onVatRegistrationComplete: onVatRegistrationComplete,
@@ -183,7 +193,7 @@ const FundAndPurchase = ({
           }), isFundingEnabled && jsx(LinkAction, {
             icon: "add",
             isDisabled: isAddFundsFormOpen || isRateFormSubmitting,
-            onClick: () => setIsAddFundsFormOpen(!isAddFundsFormOpen),
+            onClick: toggleAddFundsForm,
             title: t("manage-funding:actions.addFunds")
           })]
         }), jsx(Spacer, {
@@ -204,7 +214,7 @@ const FundAndPurchase = ({
           currency: currency,
           minimumAmount: purchaseAmount - balance,
           onSuccess: () => {
-            setIsAddFundsFormOpen(false);
+            setIsFormManuallyToggled(false);
             onPurchase();
           }
         }, {
@@ -241,7 +251,7 @@ const FundAndPurchase = ({
                 }, {
                   children: jsx(Button, Object.assign({
                     disabled: addFundsForm.isSubmitting || isRateFormSubmitting,
-                    onClick: () => setIsAddFundsFormOpen(false),
+                    onClick: () => setIsFormManuallyToggled(false),
                     variant: ButtonVariant.TEXT
                   }, {
                     children: t("actions.cancel")
@@ -268,7 +278,7 @@ const FundAndPurchase = ({
       return jsxs(Fragment, {
         children: [jsx(Typography, {
           children: t("manage-funding:byoc.invoiceNotification", {
-            carrierNickname: (_b = rate.carrierNickname) !== null && _b !== void 0 ? _b : rate.carrierFriendlyName
+            carrierNickname: (_c = rate.carrierNickname) !== null && _c !== void 0 ? _c : rate.carrierFriendlyName
           })
         }), jsx(Spacer, {
           multiplier: 2

package/esm/elements/purchase-label/components/pudo/pudo-rate-tabs/pudo-list-view/pudo-list-view.js

@@ -2,9 +2,10 @@ import { __rest } from 'tslib';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link, Typography } from '@shipengine/giger';
 import { styles } from './pudo-list-view.styles.js';
+import { COLLAPSED_RATE_VIEW_LIMIT } from '../../../../hooks/use-filter-visible-rate-options/use-filter-visible-rate-options.js';
 import { RateSelect } from '../../../../../../components/field/rate-select/rate-select.js';
+import { LinkAction } from '../../../../../../components/link-action/link-action.js';
 
 const PudoListView = ({
   form,
@@ -14,11 +15,11 @@ const PudoListView = ({
   nicknameFeature,
   preferredServiceCodes,
   showHiddenRates,
-  setShowHiddenRates,
-  getFilteredRateOptions,
+  handleShowMoreRates,
   rateFormScrollToRef,
   options: rateOptions,
-  showServicePoints: _showServicePoints = true
+  showServicePoints: _showServicePoints = true,
+  filterVisibleRateOptions
 }) => {
   const {
     t
@@ -35,7 +36,10 @@ const PudoListView = ({
       return hasServicePoints ? Object.assign({}, rest) : rate;
     });
   }, [rateOptions]);
-  const ratesToDisplay = _showServicePoints ? rateOptions : ratesWithoutServicePoints;
+  const expandedRateOptions = _showServicePoints ? rateOptions : ratesWithoutServicePoints;
+  const collapsedRateOptions = useMemo(() => {
+    return filterVisibleRateOptions(expandedRateOptions);
+  }, [expandedRateOptions, filterVisibleRateOptions]);
   return jsx("div", {
     children: form && jsxs(Fragment, {
       children: [jsx(RateSelect, {
@@ -48,38 +52,16 @@ const PudoListView = ({
         nicknameFeature: nicknameFeature,
         onClick: onSelectRate,
         onSelectServicePoint: servicePoint => onViewServicePoint(servicePoint),
-        options: showHiddenRates ? ratesToDisplay : (getFilteredRateOptions === null || getFilteredRateOptions === void 0 ? void 0 : getFilteredRateOptions(ratesToDisplay).splice(0, 4)) || ratesToDisplay,
+        options: showHiddenRates ? expandedRateOptions : collapsedRateOptions,
         preferredServiceCodes: preferredServiceCodes,
-        rateFormScrollToRef: rateFormScrollToRef,
-        setShowHiddenRates: setShowHiddenRates,
-        showHiddenRates: showHiddenRates
-      }), ratesToDisplay.length > 4 && jsx(Link, Object.assign({
+        rateFormScrollToRef: rateFormScrollToRef
+      }), expandedRateOptions.length > COLLAPSED_RATE_VIEW_LIMIT && jsx(LinkAction, {
         css: styles.showMoreOrLessRatesButton,
-        onClick: () => {
-          var _a;
-          setShowHiddenRates === null || setShowHiddenRates === void 0 ? void 0 : setShowHiddenRates(!showHiddenRates);
-          if (!showHiddenRates && rateFormScrollToRef) {
-            // scroll to top of Rates if we are showing hidden rates
-            (_a = rateFormScrollToRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-              behavior: "smooth",
-              block: "start"
-            });
-          }
-        },
-        onKeyDown: e => {
-          if (e.key === "Enter") {
-            setShowHiddenRates === null || setShowHiddenRates === void 0 ? void 0 : setShowHiddenRates(!showHiddenRates);
-          }
-        },
-        role: "button",
-        tabIndex: 0
-      }, {
-        children: jsx(Typography, Object.assign({
-          variant: "body1"
-        }, {
-          children: showHiddenRates ? t("purchase-label:actions.showFewerRates") : t("purchase-label:actions.showMoreRates")
-        }))
-      }))]
+        icon: showHiddenRates ? "chevronTop" : "chevronBottom",
+        iconPlacement: "right",
+        onClick: handleShowMoreRates,
+        title: showHiddenRates ? t("purchase-label:actions.showFewerRates") : t("purchase-label:actions.showMoreRates")
+      })]
     })
   });
 };

package/esm/elements/purchase-label/components/pudo/pudo-rate-tabs/pudo-rate-tabs.js

@@ -2,14 +2,13 @@ import { __rest } from 'tslib';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Icon, IconSize, Button, ButtonVariant, InlineNotification, NotificationType } from '@shipengine/giger';
+import { Icon, IconSize, InlineNotification, NotificationType } from '@shipengine/giger';
 import { IconNames } from '@shipengine/giger-theme';
 import { PudoListView } from './pudo-list-view/pudo-list-view.js';
 import { PudoMapView } from './pudo-map-view/pudo-map-view.js';
+import { SegmentedControl } from '../../../../../components/segmented-control/segemented-control.js';
 import { SearchBar } from '../../../../../components/search-bar/search-bar.js';
-import { Tabs } from '../../../../../components/tabs/tabs.js';
 import { PudoType } from '../../../../../types/pudo.js';
-import { ButtonGroup } from '../../../../../components/button-group/button-group.js';
 import { Spacer } from '../../../../../components/spacer/spacer.js';
 
 const PudoRateTabs = _a => {
@@ -97,10 +96,10 @@ const PudoRateTabs = _a => {
               onSearch(value);
               setSelectedServicePoint(undefined);
             }
-          }), jsx(Tabs, {
-            onSelectTab: selectedTab => setSelectedView(selectedTab),
-            selectedTab: selectedView,
-            tabs: viewTabs
+          }), jsx(SegmentedControl, {
+            onSelect: value => setSelectedView(value),
+            segments: viewTabs,
+            selectedSegment: selectedView
           })]
         })), servicePointsErrors && jsxs(Fragment, {
           children: [jsx(Spacer, {
@@ -140,20 +139,12 @@ const PudoRateTabs = _a => {
     value: PudoType.PICKUP
   }];
   return jsxs(Fragment, {
-    children: [jsx(ButtonGroup, Object.assign({
-      toolbar: true
-    }, {
-      children: tabs.map(tab => jsx(Button, Object.assign({
-        "aria-label": tab.label,
-        "aria-selected": selectedType === tab.value,
-        bold: false,
-        isFullWidth: true,
-        onClick: () => handleChangePudoType(tab.value),
-        variant: selectedType === tab.value ? undefined : ButtonVariant.OUTLINED
-      }, {
-        children: tab.label
-      }), tab.value))
-    })), jsx(Spacer, {
+    children: [jsx(SegmentedControl, {
+      fullWidth: true,
+      onSelect: value => handleChangePudoType(value),
+      segments: tabs,
+      selectedSegment: selectedType
+    }), jsx(Spacer, {
       multiplier: 3
     }), displayPudoRatesByType(selectedType)]
   });