@shipengine/elements 2.20.0 → 2.22.0

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,
@@ -208,7 +215,7 @@ const RateForm = ({
         isFundingEnabled: !!(features === null || features === void 0 ? void 0 : features.enableFunding),
         isInvalidatedByError: !!(labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length),
         onPurchase: handleSubmit,
-        onSave: handleSaveRate,
+        onSave: (features === null || features === void 0 ? void 0 : features.saveRate) ? handleSaveRate : undefined,
         onVatRegistrationComplete: onVatRegistrationComplete,
         rateData: {
           isPreferredRate,

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

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

@@ -19,7 +19,7 @@ import mergeWith from 'lodash/mergeWith.js';
 import { useState, useMemo, useEffect, useRef, useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation, Trans } from 'react-i18next';
-import { Typography, Link, Button, ButtonVariant, Skeleton, SkeletonAnimation, SkeletonBackgroundColor, SkeletonVariant, InlineNotification, NotificationType, Icon, DropdownOptionList, OptionGroup, Option, Divider } from '@shipengine/giger';
+import { Typography, Button, ButtonVariant, Skeleton, SkeletonAnimation, SkeletonBackgroundColor, SkeletonVariant, InlineNotification, NotificationType, DropdownOptionList, OptionGroup, Option, Divider, Link, Icon } from '@shipengine/giger';
 import { IconNames } from '@shipengine/giger-theme';
 import { SE } from '@shipengine/react-api';
 import { styles } from './shipment-form.styles.js';
@@ -48,9 +48,10 @@ import { DatePicker } from '../../../../components/field/date-picker/date-picker
 import { AddressPreferenceProvider } from '../../../../components/address-preference-context/address-preference-context.js';
 import { Spacer } from '../../../../components/spacer/spacer.js';
 import { SelectWithCategories } from '../../../../components/field/select/select-with-categories.js';
+import { LinkAction } from '../../../../components/link-action/link-action.js';
 import { FieldLabel } from '../../../../components/field-label/field-label.js';
 import { AddressDisplay } from '../../../../components/address-display/address-display.js';
-import { ButtonGroup } from '../../../../components/button-group/button-group.js';
+import { SegmentedControl } from '../../../../components/segmented-control/segemented-control.js';
 import { InputGroup } from '../../../../components/field/input-group/input-group.js';
 import { NumberInput } from '../../../../components/field/number-input/number-input.js';
 import { TextInput } from '../../../../components/field/text-input/text-input.js';
@@ -650,7 +651,7 @@ const ShipmentForm = ({
               });
             }),
             options: shipFromAddressOptions || []
-          }), jsx(Link, Object.assign({
+          }), jsx(LinkAction, {
             css: styles.shipFromEditButton,
             onClick: event => {
               event.preventDefault();
@@ -660,20 +661,8 @@ const ShipmentForm = ({
                 toggleIsEditWarehouseFormOpen();
               }
             },
-            onKeyDown: event => {
-              if (event.key === "Enter") {
-                if (editShipFromAddressId === null || editShipFromAddressId === void 0 ? void 0 : editShipFromAddressId.includes("custom")) {
-                  toggleIsEditShipFromAddressFormOpen();
-                } else {
-                  toggleIsEditWarehouseFormOpen();
-                }
-              }
-            },
-            role: "button",
-            tabIndex: 0
-          }, {
-            children: t("actions.edit")
-          }))]
+            title: t("actions.edit")
+          })]
         }) : jsx(FieldLabel, Object.assign({
           label: isEditShipFromAddressFormOpen ? "" : t("purchase-label:fields.warehouse")
         }, {
@@ -760,28 +749,18 @@ const ShipmentForm = ({
         }, {
           children: [jsx(Typography, {
             children: salesOrder.salesOrderItems.reduce((total, i) => i.quantity + total, 0).toString()
-          }), jsxs(Link, Object.assign({
+          }), jsx(LinkAction, {
             css: theme => ({
-              alignItems: "center",
-              display: "flex",
               fontWeight: scopeTheme(theme).typography.fontWeight.normal
             }),
+            icon: showItems ? "chevronTop" : "chevronBottom",
+            iconPlacement: "right",
             onClick: event => {
               event.preventDefault();
               setShowItems(!showItems);
             },
-            onKeyDown: event => {
-              if (event.key === "Enter") {
-                setShowItems(!showItems);
-              }
-            },
-            role: "button",
-            tabIndex: 0
-          }, {
-            children: [showItems ? t("purchase-label:actions.hideItems") : t("purchase-label:actions.showItems"), jsx(Icon, {
-              name: showItems ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM
-            })]
-          }))]
+            title: showItems ? t("purchase-label:actions.hideItems") : t("purchase-label:actions.showItems")
+          })]
         }))
       })), showItems && jsx(ItemsBreakdown, {
         items: salesOrderItems
@@ -801,29 +780,16 @@ const ShipmentForm = ({
     }), jsxs(Section, Object.assign({
       "data-testid": "packageDetail",
       rightContent: (features === null || features === void 0 ? void 0 : features.shippingPresets) && shippingPresetOptions.length > 0 ? jsxs(Fragment, {
-        children: [jsxs(Link, Object.assign({
-          css: theme => ({
-            alignItems: "center",
-            display: "flex",
-            fontWeight: scopeTheme(theme).typography.fontWeight.normal
-          }),
+        children: [jsx(LinkAction, {
+          icon: showApplyPreset ? "chevronTop" : "chevronBottom",
+          iconPlacement: "right",
           onClick: event => {
             event.preventDefault();
             setShowApplyPreset(!showApplyPreset);
           },
-          onKeyDown: event => {
-            if (event.key === "Enter") {
-              setShowApplyPreset(!showApplyPreset);
-            }
-          },
           ref: applyPresetRef,
-          role: "button",
-          tabIndex: 0
-        }, {
-          children: [t("shippingPresets.apply"), jsx(Icon, {
-            name: showApplyPreset ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM
-          })]
-        })), jsx(DropdownOptionList, Object.assign({
+          title: t("shippingPresets.apply")
+        }), jsx(DropdownOptionList, Object.assign({
           "data-id": "dropdown",
           dropdownWidth: "400px",
           hideWhenReferenceNotVisible: true,
@@ -857,31 +823,22 @@ const ShipmentForm = ({
       title: t("purchase-label:sections.shipment")
     }, {
       children: [(features === null || features === void 0 ? void 0 : features.browseRates) && (features === null || features === void 0 ? void 0 : features.selectService) && jsxs(Fragment, {
-        children: [jsxs(ButtonGroup, Object.assign({
-          toolbar: true
-        }, {
-          children: [jsx(Button, Object.assign({
-            bold: false,
-            css: () => ({
-              transition: "none"
-            }),
-            isFullWidth: true,
-            onClick: () => handleChangeMode("browse_rates"),
-            variant: selectedMode === "browse_rates" ? undefined : ButtonVariant.OUTLINED
-          }, {
-            children: t("purchase-label:modes.browseRates")
-          })), jsx(Button, Object.assign({
-            bold: false,
-            css: () => ({
-              transition: "none"
-            }),
-            isFullWidth: true,
-            onClick: () => handleChangeMode("select_service"),
-            variant: selectedMode === "select_service" ? undefined : ButtonVariant.OUTLINED
+        children: [jsx(SegmentedControl, {
+          fullWidth: true,
+          onSelect: value => {
+            void handleChangeMode(value);
+          },
+          segments: [{
+            label: t("purchase-label:modes.browseRates"),
+            value: "browse_rates"
           }, {
-            children: t("purchase-label:modes.selectService")
-          }))]
-        })), jsx(Spacer, {})]
+            label: t("purchase-label:modes.selectService"),
+            value: "select_service"
+          }],
+          selectedSegment: selectedMode
+        }), jsx(Spacer, {
+          multiplier: 3
+        })]
       }), selectedMode === "select_service" && jsx(SelectWithCategories, {
         control: form.control,
         disabled: !serviceCodeOptions.length,

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

@@ -27,13 +27,13 @@ const styles = createStyles({
   shipFromEditButton: theme => ({
     border: 0,
     fontWeight: scopeTheme(theme).typography.fontWeight.normal,
+    height: scopeTheme(theme).spacing(3),
     marginTop: scopeTheme(theme).spacing(1.75)
   }),
   shipFromSelectContainer: theme => ({
     display: "flex",
     gap: scopeTheme(theme).spacing(1.375),
-    justifyContent: "space-between",
-    marginBottom: scopeTheme(theme).spacing(1.75)
+    justifyContent: "space-between"
   }),
   well: theme => ({
     backgroundColor: scopeTheme(theme).palette.gray.ultraLight,

package/esm/elements/purchase-label/hooks/index.js

@@ -17,4 +17,5 @@ export { useCustomsNonDeliveryOptions } from './use-customs-non-delivery-options
 export { useCustomsContentsOptions } from './use-customs-contents-options.js';
 export { useConfirmationOptions } from './use-confirmation-options.js';
 export { useShippingPresetsOptions } from './use-shipping-presets-options.js';
+export { COLLAPSED_RATE_VIEW_LIMIT, useFilterVisibleRateOptions } from './use-filter-visible-rate-options/use-filter-visible-rate-options.js';
 export { useServiceCodeOptions } from './use-service-code-options/use-service-code-options.js';

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

@@ -0,0 +1,29 @@
+import { useMemo, useCallback } from 'react';
+
+const COLLAPSED_RATE_VIEW_LIMIT = 4;
+const filterRateOptions = (rateOptions, selectedRate, preferredServiceCodes) => {
+  // Show the selected rate
+  const isSelectedRate = option => !!(selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.rateId) && option.rateId === selectedRate.rateId;
+  // Show the rate if it is a preferred service
+  const isPreferredService = option => !!option.serviceCode && !!(preferredServiceCodes === null || preferredServiceCodes === void 0 ? void 0 : preferredServiceCodes.includes(option.serviceCode));
+  // Show the first 5 rates in the list
+  const isWithinRateViewLimit = index => index < COLLAPSED_RATE_VIEW_LIMIT;
+  return rateOptions.filter((option, index) => isSelectedRate(option) || isPreferredService(option) || isWithinRateViewLimit(index));
+};
+/**
+ * @internal
+ *
+ * # Filter Visible Rate Options Hook
+ *
+ */
+const useFilterVisibleRateOptions = (rateOptions, selectedRate, preferredServiceCodes) => {
+  const collapsedRateOptionList = useMemo(() => filterRateOptions(rateOptions, selectedRate, preferredServiceCodes), [rateOptions, selectedRate, preferredServiceCodes]);
+  const filterVisibleRateOptions = useCallback(options => filterRateOptions(options, selectedRate, preferredServiceCodes), [selectedRate, preferredServiceCodes]);
+  return {
+    COLLAPSED_RATE_VIEW_LIMIT,
+    collapsedRateOptionList,
+    filterVisibleRateOptions
+  };
+};
+
+export { COLLAPSED_RATE_VIEW_LIMIT, useFilterVisibleRateOptions };

package/esm/elements/purchase-label/hooks/use-rates-form.js

@@ -26,11 +26,13 @@ const useRatesForm = ({
   onRatesCalculated,
   onShipmentUpdated,
   printLabelLayout,
+  selectedRate,
   shipment
 }) => {
   var _a, _b, _c;
   const [beforeCreateError, setBeforeCreateError] = useState();
   const [beforeSaveError, setBeforeSaveError] = useState();
+  const [isSavingRate, setIsSavingRate] = useState(false);
   const fundingSourceMetadata = useGetFundingSourceMetadata();
   const fundingSourceRegion = (_a = fundingSourceMetadata.data) === null || _a === void 0 ? void 0 : _a.defaultRegionProfile.countryCode;
   const isVatRequiredCountry = getIsVatRequired(fundingSourceRegion);
@@ -42,7 +44,9 @@ const useRatesForm = ({
   } = useListCarriers();
   const {
     fundingOrigin
-  } = useBalanceServices();
+  } = useBalanceServices({
+    carrierId: selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.carrierId
+  });
   const {
     data: {
       labels = []
@@ -117,6 +121,7 @@ const useRatesForm = ({
     if (!shipment) throw new Error("shipment not found");
     // clear any errors before attempting to save
     setBeforeSaveError(undefined);
+    setIsSavingRate(true);
     try {
       const beforeSaveResponse = yield onBeforeRateSaved === null || onBeforeRateSaved === void 0 ? void 0 : onBeforeRateSaved(carrierId, serviceCode);
       let updatedShipment;
@@ -128,6 +133,7 @@ const useRatesForm = ({
         }));
         if (updatedShipment) {
           yield onUpdatedShipment(updatedShipment);
+          setIsSavingRate(false);
         }
         return;
       }
@@ -149,6 +155,7 @@ const useRatesForm = ({
         }));
         if (updatedShipment) {
           yield onUpdatedShipment(updatedShipment);
+          setIsSavingRate(false);
         }
         return;
       }
@@ -168,6 +175,7 @@ const useRatesForm = ({
           message: (_f = e.message) !== null && _f !== void 0 ? _f : "An unknown error occurred"
         });
       }
+      setIsSavingRate(false);
       return;
     }
   }), [onBeforeRateSaved, onUpdatedShipment, resetRates, shipment, updateShipment]);
@@ -259,7 +267,8 @@ const useRatesForm = ({
     errors: errors.length > 0 ? errors : undefined,
     fetchServicePoints,
     fundingOrigin,
-    isLoading: ratesCalculating,
+    isCalculatingRates: ratesCalculating,
+    isSavingRate,
     labelErrors: displayableLabelErrors,
     labels,
     labelsLoading,

package/esm/elements/purchase-label/hooks/use-rates-with-cache.js

@@ -1,5 +1,5 @@
 import { useShipmentMetadata } from '../../../hooks/options/use-shipment-metadata.js';
-import { useState, useEffect, useCallback } from 'react';
+import { useMemo, useState, useCallback, useEffect } from 'react';
 import { useGetShipmentRates } from '@shipengine/react-api';
 import { useRequestRates } from './use-request-rates.js';
 
@@ -18,19 +18,23 @@ const useRatesWithCache = ({
   getPreferredRates,
   shipment
 }) => {
-  /* Flag to ignore cached rates once rates have ever been actually requested */
-  const [bypassRateCache, setBypassRateCache] = useState(false);
-  const [mustRequestRates, setMustRequestRates] = useState(false);
-  const shouldGetCachedRates = !!(shipment === null || shipment === void 0 ? void 0 : shipment.packages[0].weight.value) || !!(shipment === null || shipment === void 0 ? void 0 : shipment.carrierId) || !!(shipment === null || shipment === void 0 ? void 0 : shipment.serviceCode);
-  const cachedRates = useGetShipmentRates({
-    enabled: shouldGetCachedRates && !!(shipment === null || shipment === void 0 ? void 0 : shipment.shipmentId),
+  const shouldFetchCachedRates = useMemo(() => {
+    return !!(shipment === null || shipment === void 0 ? void 0 : shipment.shipmentId) && (!!(shipment === null || shipment === void 0 ? void 0 : shipment.packages[0].weight.value) || !!(shipment === null || shipment === void 0 ? void 0 : shipment.carrierId) || !!(shipment === null || shipment === void 0 ? void 0 : shipment.serviceCode));
+  }, [shipment]);
+  const [cachedRatesEnabled, setCachedRatesEnabled] = useState(shouldFetchCachedRates);
+  const {
+    isInternational
+  } = useShipmentMetadata(shipment);
+  const {
+    data: cachedRatesResponse,
+    isFetching: cachedRatesFetching,
+    status: cachedRatesStatus
+  } = useGetShipmentRates({
+    enabled: cachedRatesEnabled,
     queryFnParams: {
       shipmentId: shipment === null || shipment === void 0 ? void 0 : shipment.shipmentId
     }
   });
-  const {
-    isInternational
-  } = useShipmentMetadata(shipment);
   const {
     isCalculating,
     preferredRatesResponse: preferredRates,
@@ -44,39 +48,44 @@ const useRatesWithCache = ({
     getPreferredRates,
     onRatesCalculated
   });
+  const hasCachedRates = useMemo(() => {
+    return cachedRatesResponse && cachedRatesResponse.length > 0 && cachedRatesResponse[0].rates.length > 0;
+  }, [cachedRatesResponse]);
+  const cachedRates = cachedRatesResponse ? cachedRatesResponse[0] : undefined;
+  const enableCache = useCallback(() => {
+    setCachedRatesEnabled(true);
+  }, []);
+  const disableCache = useCallback(() => {
+    setCachedRatesEnabled(false);
+  }, []);
   useEffect(() => {
-    if (
-    // if we don't have a preferredRates fetcher don't proceed
-    getPreferredRates !== undefined &&
-    // if there is no cached data, we'll have to fetch manually instead
-    cachedRates.data && cachedRates.data.length > 0 && cachedRates.data[0].rates.length > 0 &&
-    // as these are dependencies for the effect only proceed when they have actual values as to not call the mutator multiple times
-    shipment && isInternational !== undefined) {
+    var _a, _b;
+    // Handle preferred rates
+    if (getPreferredRates !== undefined && hasCachedRates && shipment && isInternational !== undefined) {
       void requestPreferredRates([shipment, isInternational]);
     }
-  }, [requestPreferredRates, isInternational, shipment, getPreferredRates, cachedRates.data]);
-  // if there is a serviceCode on the shipment and more than one rate in cache,
-  // refetch rates to ensure only the one rate is returned
-  useEffect(() => {
-    if ((shipment === null || shipment === void 0 ? void 0 : shipment.serviceCode) && cachedRates.data && cachedRates.data.length > 0 && cachedRates.data[0].rates.length > 1) {
-      setMustRequestRates(true);
-      setBypassRateCache(true);
+    // determine if the cached rates are valid for the current shipment by comparing the service code and carrier id
+    if (hasCachedRates && (shipment === null || shipment === void 0 ? void 0 : shipment.serviceCode) && (shipment === null || shipment === void 0 ? void 0 : shipment.carrierId)) {
+      const {
+        serviceCode: cachedRateServiceCode,
+        carrierId: cachedRateCarrierId
+      } = (_b = (_a = cachedRates === null || cachedRates === void 0 ? void 0 : cachedRates.rates) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : {};
+      const ratesMatch = shipment.serviceCode === cachedRateServiceCode && shipment.carrierId === cachedRateCarrierId;
+      // enable or disable the cache based on whether the rates match
+      ratesMatch ? enableCache() : disableCache();
     }
-  }, [shipment === null || shipment === void 0 ? void 0 : shipment.serviceCode, cachedRates.data]);
+  }, [requestPreferredRates, isInternational, shipment, getPreferredRates, hasCachedRates, cachedRates === null || cachedRates === void 0 ? void 0 : cachedRates.rates, shipment === null || shipment === void 0 ? void 0 : shipment.carrierId, shipment === null || shipment === void 0 ? void 0 : shipment.serviceCode, enableCache, disableCache]);
   const resetAllRates = useCallback(() => {
     resetRates();
-    setBypassRateCache(true);
+    // Clear the cached rates by disabling cache and forcing a refetch
+    setCachedRatesEnabled(false);
   }, [resetRates]);
-  const ratesCalculating = shouldGetCachedRates ? bypassRateCache || mustRequestRates ? isCalculating : isCalculating || cachedRates.status !== "success" : false;
-  useEffect(() => {
-    if (shipment && mustRequestRates) {
-      void requestRates(shipment, isInternational);
-      setMustRequestRates(false);
-    }
-  }, [isInternational, mustRequestRates, requestRates, shipment]);
-  const ratesResponse = !bypassRateCache && !ratesCalculating && cachedRates.status === "success" && cachedRates.data.length > 0 ? cachedRates.data[0] : standardRequestedRateResponse;
+  const ratesCalculating = useMemo(() => {
+    return isCalculating || cachedRatesFetching;
+  }, [isCalculating, cachedRatesFetching]);
+  const ratesResponse = cachedRatesEnabled ? cachedRates : standardRequestedRateResponse;
   // If there is a carrierId on the shipment then don't show preferred rates. There is a saved rate on the shipment.
-  const preferredRatesResponse = cachedRates.status === "success" && cachedRates.data.length > 0 && (shipment === null || shipment === void 0 ? void 0 : shipment.carrierId) ? undefined : preferredRates;
+  const preferredRatesResponse = cachedRatesStatus === "success" && hasCachedRates && (shipment === null || shipment === void 0 ? void 0 : shipment.carrierId) ? undefined : preferredRates;
   return {
     preferredRatesResponse,
     ratesCalculating,

package/esm/elements/shipment-summary/components/shipment/shipment.js

@@ -11,8 +11,7 @@ import { scopeTheme } from '../../../../utilities/styles.js';
 import { getIsVatRequired } from '../../../../utilities/vat.js';
 import { useState, useMemo, useCallback, Fragment as Fragment$1 } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
-import { Link, Icon, Typography, Button, Next } from '@shipengine/giger';
-import { IconNames } from '@shipengine/giger-theme';
+import { Link, Typography, Button, Next } from '@shipengine/giger';
 import { useGetFundingSourceMetadata } from '@shipengine/react-api';
 import { LabelDisplay } from '../label-display/label-display.js';
 import { EnableInsuranceBanner } from '../../../../components/enable-insurance-banner/enable-insurance-banner.js';
@@ -21,6 +20,7 @@ import { Section } from '../../../../components/section/section.js';
 import { FieldLabel } from '../../../../components/field-label/field-label.js';
 import { Spacer } from '../../../../components/spacer/spacer.js';
 import { AddressDisplay } from '../../../../components/address-display/address-display.js';
+import { LinkAction } from '../../../../components/link-action/link-action.js';
 import { ItemsBreakdown } from '../../../../components/items-breakdown/items-breakdown.js';
 import { ButtonGroup } from '../../../../components/button-group/button-group.js';
 import { RateDetails } from '../../../../components/rate-details/rate-details.js';
@@ -172,30 +172,16 @@ const Shipment = ({
             justifyContent: "space-between"
           }
         }, {
-          children: [salesOrder.salesOrderItems.reduce((total, i) => i.quantity + total, 0), jsxs(Link, Object.assign({
-            css: theme => ({
-              alignItems: "center",
-              display: "flex",
-              fontWeight: scopeTheme(theme).typography.fontWeight.normal
-            }),
+          children: [salesOrder.salesOrderItems.reduce((total, i) => i.quantity + total, 0), jsx(LinkAction, {
             "data-testid": "view-shipment:actions.showItems",
+            icon: showItems ? "chevronTop" : "chevronBottom",
+            iconPlacement: "right",
             onClick: event => {
               event.preventDefault();
               setShowItems(!showItems);
             },
-            onKeyDown: event => {
-              if (event.key === "Enter") {
-                event.preventDefault();
-                setShowItems(!showItems);
-              }
-            },
-            role: "button",
-            tabIndex: 0
-          }, {
-            children: [showItems ? t("view-shipment:actions.hideItems") : t("view-shipment:actions.showItems"), jsx(Icon, {
-              name: showItems ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM
-            })]
-          }))]
+            title: showItems ? t("view-shipment:actions.hideItems") : t("view-shipment:actions.showItems")
+          })]
         })), jsx(Spacer, {})]
       })), showItems && jsxs("div", Object.assign({
         "data-testid": "itemsBreakdown"