@shipengine/elements 2.20.0 → 2.21.0

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

@@ -28,7 +28,8 @@ const Component = ({
   onClickViewDetails,
   onRowClick,
   onClickExternalOrderId,
-  onClickExternalShipmentId
+  onClickExternalShipmentId,
+  onClickShipmentNumber
 }) => {
   var _a, _b, _c;
   const {
@@ -54,6 +55,10 @@ 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);
@@ -70,6 +75,7 @@ const Component = ({
     clearAllFilters
   } = useLabelsGrid({
     createdDateSortBy,
+    fetchShipments: !!shipmentNumberColumn,
     labelStatus,
     showLabelIdFilter,
     showShipmentIdFilter,
@@ -249,6 +255,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,7 +374,7 @@ 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]);
+  }, [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, onClickShipmentNumber]);
   if (isLoading) {
     return jsx(Loader, {
       message: t("loading.labels")

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

@@ -41,7 +41,7 @@ const FundAndPurchase = ({
   isInvalidatedByError,
   rateData
 }) => {
-  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
@@ -169,7 +171,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,
@@ -268,7 +270,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)]
   });

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

@@ -28,7 +28,8 @@ const RateForm = ({
   features,
   fetchServicePoints,
   fundingOrigin,
-  isLoading,
+  isCalculatingRates,
+  isSavingRate,
   labelErrors,
   labels,
   labelsLoading,
@@ -176,8 +177,14 @@ const RateForm = ({
           windsorFrameworkEnabled: !!(defaultFeatures === null || defaultFeatures === void 0 ? void 0 : defaultFeatures.betaEnableWindsorFramework)
         }),
         form: form,
-        isLoading: isLoading,
-        onSelectRate: onSelectRate,
+        isCalculatingRates: isCalculatingRates,
+        isSavingRate: isSavingRate,
+        onSelectRate: rateId => {
+          const selectedRate = rateOptions.find(r => r.rateId === rateId);
+          if (selectedRate) {
+            onSelectRate === null || onSelectRate === void 0 ? void 0 : onSelectRate(selectedRate);
+          }
+        },
         preferredServiceCodes: preferredServiceCodes,
         pudoServicePointDetails: {
           fetchServicePoints,

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

@@ -3,21 +3,24 @@ import { formatMoney } from '../../../../utilities/money.js';
 import { getRequestedServices } from '../../../../utilities/shipengine/sales-order.js';
 import { useState, useMemo, useCallback } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
-import { Typography, InlineNotification, NotificationType, Link } from '@shipengine/giger';
+import { Typography, InlineNotification, NotificationType } from '@shipengine/giger';
 import { styles } from './rate-form.styles.js';
 import { useWindsorFramework } from '../../hooks/use-windsor-framework.js';
+import { useFilterVisibleRateOptions } from '../../hooks/use-filter-visible-rate-options/use-filter-visible-rate-options.js';
 import { Cube } from '../../../../components/cube/cube.js';
 import { PudoRateTabs } from '../pudo/pudo-rate-tabs/pudo-rate-tabs.js';
 import { Spacer } from '../../../../components/spacer/spacer.js';
 import { SearchBar } from '../../../../components/search-bar/search-bar.js';
 import { RateSelect } from '../../../../components/field/rate-select/rate-select.js';
+import { LinkAction } from '../../../../components/link-action/link-action.js';
 
 const RateView = ({
   carriers,
   errors,
   features,
   form,
-  isLoading,
+  isCalculatingRates,
+  isSavingRate,
   onSelectRate,
   preferredServiceCodes,
   pudoServicePointDetails: _pudoServicePointDetails = {
@@ -64,17 +67,17 @@ const RateView = ({
   const requestedServices = useMemo(() => getRequestedServices(salesOrder), [salesOrder]);
   const formatRequestedService = () => requestedServices.length > 1 ? t("purchase-label:multipleShippingServices") : requestedServices[0];
   const pudoRateOptions = useMemo(() => rateOptions === null || rateOptions === void 0 ? void 0 : rateOptions.filter(rate => rate.pudoType), [rateOptions]);
-  const getFilteredRateOptions = useCallback(rateOptions => {
-    return rateOptions.filter((option, index) =>
-    // show first 5 rates if there are 6 or fewer rate options
-    index < 5 && rateOptions.length <= 6 ||
-    // show the rates if they don't require acknowledgement and there are more than 6 rates
-    !option.requiresAcknowledgement && index < 6 && rateOptions.length > 6 ||
-    // show the rate if it matches the selectedRateId
-    option.rateId === (selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.rateId) || (
-    // show the rates if they are a preferred service
-    preferredServiceCodes === null || preferredServiceCodes === void 0 ? void 0 : preferredServiceCodes.includes(option.serviceCode)));
-  }, [preferredServiceCodes, selectedRate]);
+  const expandedRateOptionList = useMemo(() => {
+    if ((features === null || features === void 0 ? void 0 : features.enablePudoUI) && pudoRateOptions.length) {
+      return pudoRateOptions;
+    }
+    return rateOptions;
+  }, [features === null || features === void 0 ? void 0 : features.enablePudoUI, pudoRateOptions, rateOptions]);
+  const {
+    collapsedRateOptionList,
+    COLLAPSED_RATE_VIEW_LIMIT,
+    filterVisibleRateOptions
+  } = useFilterVisibleRateOptions(expandedRateOptionList, selectedRate, preferredServiceCodes);
   const handleShowMoreRates = useCallback(() => {
     var _a;
     setShowHiddenRates === null || setShowHiddenRates === void 0 ? void 0 : setShowHiddenRates(!showHiddenRates);
@@ -86,11 +89,6 @@ const RateView = ({
       });
     }
   }, [showHiddenRates, rateFormScrollToRef]);
-  const handleOnKeyDownShowMoreRates = useCallback(e => {
-    if (e.key === "Enter") {
-      setShowHiddenRates === null || setShowHiddenRates === void 0 ? void 0 : setShowHiddenRates(!showHiddenRates);
-    }
-  }, [showHiddenRates]);
   // Return true if User has multiple accounts for a single carrier.
   const hasDuplicateCarrierCode = () => {
     if (!carriers) return false;
@@ -108,6 +106,7 @@ const RateView = ({
     return false;
   };
   const rateSelectCommonProps = {
+    handleShowMoreRates,
     nicknameFeature: (features === null || features === void 0 ? void 0 : features.nicknameRate) && hasDuplicateCarrierCode(),
     preferredServiceCodes,
     rateFormScrollToRef,
@@ -115,16 +114,19 @@ const RateView = ({
     showHiddenRates,
     showVatFeatures
   };
-  if (isLoading) return jsxs("article", Object.assign({
-    css: styles.ratesInterstitial,
-    role: "presentation"
-  }, {
-    children: [jsx(Cube, {
-      animate: isLoading
-    }), jsx(Spacer, {}), jsx(Typography, {
-      children: t("purchase-label:loading.calculatingRates")
-    })]
-  }));
+  const isFetchingRates = isCalculatingRates || isSavingRate;
+  if (isFetchingRates) {
+    return jsxs("article", Object.assign({
+      css: styles.ratesInterstitial,
+      role: "presentation"
+    }, {
+      children: [jsx(Cube, {
+        animate: isFetchingRates
+      }), jsx(Spacer, {}), jsx(Typography, {
+        children: isSavingRate ? t("purchase-label:loading.savingRate") : t("purchase-label:loading.calculatingRates")
+      })]
+    }));
+  }
   if (isWindsorFrameworkInvalid.isInvalid) return jsx(InlineNotification, Object.assign({
     title: t("common:errorMessages.windsorFramework.doNotConform"),
     type: NotificationType.ERROR
@@ -160,8 +162,8 @@ const RateView = ({
         multiplier: 3
       })]
     }), !!(features === null || features === void 0 ? void 0 : features.enablePudoUI) && pudoRateOptions.length ? jsx(PudoRateTabs, Object.assign({
+      filterVisibleRateOptions: filterVisibleRateOptions,
       form: form,
-      getFilteredRateOptions: getFilteredRateOptions,
       mapCenter: {
         lat: addressQueryCoordinates.lat,
         lng: addressQueryCoordinates.long
@@ -198,20 +200,14 @@ const RateView = ({
         name: "rate",
         onClick: onSelectRate,
         onSelectServicePoint: onSelectServicePoint,
-        options: showHiddenRates ? rateOptions : getFilteredRateOptions(rateOptions)
-      }, rateSelectCommonProps)), rateOptions.length > 4 && jsx(Link, Object.assign({
+        options: showHiddenRates ? expandedRateOptionList : collapsedRateOptionList
+      }, rateSelectCommonProps)), expandedRateOptionList.length > COLLAPSED_RATE_VIEW_LIMIT && jsx(LinkAction, {
         css: styles.showMoreOrLessRatesButton,
+        icon: showHiddenRates ? "chevronTop" : "chevronBottom",
+        iconPlacement: "right",
         onClick: handleShowMoreRates,
-        onKeyDown: handleOnKeyDownShowMoreRates,
-        role: "button",
-        tabIndex: 0
-      }, {
-        children: jsx(Typography, Object.assign({
-          variant: "body1"
-        }, {
-          children: showHiddenRates ? t("purchase-label:actions.showFewerRates") : t("purchase-label:actions.showMoreRates")
-        }))
-      }))]
+        title: showHiddenRates ? t("purchase-label:actions.showFewerRates") : t("purchase-label:actions.showMoreRates")
+      })]
     }), errors && jsxs(Fragment, {
       children: [jsx(Spacer, {
         multiplier: 2