@shipengine/elements 2.20.0 → 2.21.0

package/cjs/elements/purchase-label/components/pudo/pudo-rate-tabs/pudo-rate-tabs.cjs

@@ -0,0 +1,157 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var pudoListView = require('./pudo-list-view/pudo-list-view.cjs');
+var pudoMapView = require('./pudo-map-view/pudo-map-view.cjs');
+var segementedControl = require('../../../../../components/segmented-control/segemented-control.cjs');
+var searchBar = require('../../../../../components/search-bar/search-bar.cjs');
+var pudo = require('../../../../../types/pudo.cjs');
+var spacer = require('../../../../../components/spacer/spacer.cjs');
+
+const PudoRateTabs = _a => {
+  var {
+      form,
+      mapCenter,
+      onSearch,
+      onViewServicePoint,
+      onSelectRate,
+      servicePointSearchQuery,
+      options: pudoRateOptions,
+      servicePointsErrors
+    } = _a,
+    pudoRateTabProps = tslib.__rest(_a, ["form", "mapCenter", "onSearch", "onViewServicePoint", "onSelectRate", "servicePointSearchQuery", "options", "servicePointsErrors"]);
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const [selectedType, setSelectedType] = React.useState(pudo.PudoType.DROPOFF);
+  const handleChangePudoType = type => {
+    setSelectedType(type);
+  };
+  const viewTabs = [{
+    label: jsxRuntime.jsx(giger.Icon, {
+      name: gigerTheme.IconNames.LIST,
+      size: giger.IconSize.SIZE_SMALL
+    }),
+    value: "list view"
+  }, {
+    label: jsxRuntime.jsx(giger.Icon, {
+      name: gigerTheme.IconNames.MAP,
+      size: giger.IconSize.SIZE_SMALL
+    }),
+    value: "map view"
+  }];
+  const [selectedView, setSelectedView] = React.useState(viewTabs[0].value);
+  const [selectedServicePoint, setSelectedServicePoint] = React.useState();
+  const displayPudoRatesByType = type => {
+    if (!(pudoRateOptions === null || pudoRateOptions === void 0 ? void 0 : pudoRateOptions.some(rate => rate.pudoType === type))) {
+      return jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+        title: "No Rates Found",
+        type: giger.NotificationType.ALERT
+      }, {
+        children: t("purchase-label:servicePoints.noRatesForType", {
+          type: type
+        })
+      }));
+    }
+    const ratesByType = pudoRateOptions.filter(rate => rate.pudoType === type);
+    const handleRateSelect = rateId => {
+      setSelectedServicePoint(undefined);
+      onSelectRate === null || onSelectRate === void 0 ? void 0 : onSelectRate(rateId);
+    };
+    const handleViewServicePoint = servicePoint => {
+      setSelectedServicePoint(servicePoint);
+      onViewServicePoint(servicePoint);
+      setSelectedView("map view");
+    };
+    const handleSelectMarker = servicePoint => {
+      setSelectedServicePoint(servicePoint);
+      //TODO: Temporary fix to clear rate selection if the selected service point does not include the carrier from the selected rate
+      const selectedRate = ratesByType.find(rate => {
+        var _a;
+        return rate.rateId === ((_a = form === null || form === void 0 ? void 0 : form.getValues("rate")) === null || _a === void 0 ? void 0 : _a.rateId);
+      });
+      if ((servicePoint === null || servicePoint === void 0 ? void 0 : servicePoint.carrierCode) !== (selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.carrierCode)) {
+        form === null || form === void 0 ? void 0 : form.setValue("rate", {
+          isAcknowledged: false,
+          rateId: ""
+        });
+      }
+    };
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [type === pudo.PudoType.DROPOFF && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsxs("div", Object.assign({
+          css: {
+            display: "flex",
+            gap: "8px"
+          }
+        }, {
+          children: [jsxRuntime.jsx(searchBar.SearchBar, {
+            defaultValue: servicePointSearchQuery,
+            label: t("purchase-label:servicePoints.searchLabel"),
+            loading: pudoRateTabProps.servicePointsLoading,
+            onSearch: value => {
+              onSearch(value);
+              setSelectedServicePoint(undefined);
+            }
+          }), jsxRuntime.jsx(segementedControl.SegmentedControl, {
+            onSelect: value => setSelectedView(value),
+            segments: viewTabs,
+            selectedSegment: selectedView
+          })]
+        })), servicePointsErrors && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(spacer.Spacer, {
+            multiplier: 3
+          }), jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+            type: giger.NotificationType.INFO
+          }, {
+            children: t("purchase-label:servicePoints.error")
+          }))]
+        }), jsxRuntime.jsx(spacer.Spacer, {
+          multiplier: 3
+        })]
+      }), selectedView === "list view" || type === pudo.PudoType.PICKUP ? jsxRuntime.jsx(pudoListView.PudoListView, Object.assign({
+        form: form,
+        onSelectRate: rateId => handleRateSelect(rateId),
+        onViewServicePoint: handleViewServicePoint,
+        options: ratesByType
+      }, pudoRateTabProps)) : jsxRuntime.jsx(pudoMapView.PudoMapView, {
+        listViewProps: Object.assign({
+          form,
+          onViewServicePoint,
+          options: ratesByType
+        }, pudoRateTabProps),
+        mapCenter: mapCenter,
+        rates: ratesByType,
+        selectedMarker: selectedServicePoint,
+        servicePointsErrors: servicePointsErrors,
+        setSelectedMarker: handleSelectMarker
+      })]
+    });
+  };
+  const tabs = [{
+    label: t("purchase-label:servicePoints.dropOff"),
+    value: pudo.PudoType.DROPOFF
+  }, {
+    label: t("purchase-label:servicePoints.pickUp"),
+    value: pudo.PudoType.PICKUP
+  }];
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(segementedControl.SegmentedControl, {
+      fullWidth: true,
+      onSelect: value => handleChangePudoType(value),
+      segments: tabs,
+      selectedSegment: selectedType
+    }), jsxRuntime.jsx(spacer.Spacer, {
+      multiplier: 3
+    }), displayPudoRatesByType(selectedType)]
+  });
+};
+
+exports.PudoRateTabs = PudoRateTabs;

package/cjs/elements/purchase-label/components/rate-form/rate-form.cjs

@@ -0,0 +1,236 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactQuery = require('@tanstack/react-query');
+var formLogger = require('../../../../utilities/form-logger.cjs');
+var validation = require('../../../../utilities/validation.cjs');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var reactI18next = require('react-i18next');
+var rateSchema = require('./rate-schema.cjs');
+var rateView = require('./rate-view.cjs');
+var useRateOptions = require('../../hooks/use-rate-options.cjs');
+var section = require('../../../../components/section/section.cjs');
+var fundAndPurchase = require('../fund-and-purchase/fund-and-purchase.cjs');
+var poweredByShipengine = require('../../../../components/powered-by-shipengine/powered-by-shipengine.cjs');
+var elementsContextProvider = require('../../../../elements-provider/elements-context-provider.cjs');
+var selectLabelLayout = require('../../../../features/select-label-layout/select-label-layout.cjs');
+var spacer = require('../../../../components/spacer/spacer.cjs');
+
+const RateForm = ({
+  carriers,
+  currency,
+  defaultFeatures,
+  disabled,
+  displayableRateErrors,
+  displayableSaveRateErrors,
+  displayableShipmentErrors,
+  errors,
+  features,
+  fetchServicePoints,
+  fundingOrigin,
+  isCalculatingRates,
+  isSavingRate,
+  labelErrors,
+  labels,
+  labelsLoading,
+  listServicePointsErrors,
+  onSave,
+  onSelectRate,
+  onSubmit,
+  onVatRegistrationComplete,
+  preferredRates,
+  preferredServiceCodes,
+  rates,
+  salesOrder,
+  servicePointSearchQuery,
+  servicePointsFetching,
+  servicePointsResponse,
+  shipment,
+  hasShipFromAddressErrors,
+  showVatFeatures
+}) => {
+  const {
+    globalFeatures
+  } = elementsContextProvider.useElements();
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const queryClient = reactQuery.useQueryClient();
+  const rateFormScrollToRef = React.useRef(null);
+  const [selectedServicePoint, setSelectedServicePoint] = React.useState();
+  const form = reactHookForm.useForm({
+    defaultValues: {
+      rate: {
+        isAcknowledged: true,
+        rateId: undefined
+      }
+    },
+    mode: "onChange",
+    resolver: validation.validationResolver(rateSchema.rateSchema)
+  });
+  const {
+    rateId: selectedRateId
+  } = form.watch("rate");
+  const handleSubmit = formLogger.formLogger.capture(form.handleSubmit(values => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const rateId = values;
+    try {
+      yield onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(rateId, selectedServicePoint);
+    } finally {
+      // Invalidate carrier queries after the rate form is submitted, regardless of success.
+      // This allows the carrier balance to refresh if the purchase failed but funding succeeded.
+      void queryClient.invalidateQueries(["useGetCarrierById", selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.carrierId], {
+        exact: true
+      });
+      void queryClient.invalidateQueries(["useListCarriers"], {
+        exact: true
+      });
+    }
+  })));
+  const rateOptions = useRateOptions.useRateOptions(rates, fundingOrigin, preferredRates, carriers, shipment, servicePointsResponse === null || servicePointsResponse === void 0 ? void 0 : servicePointsResponse.servicePoints, !!(features === null || features === void 0 ? void 0 : features.requireDhlTermsAcknowledgement), !!(defaultFeatures === null || defaultFeatures === void 0 ? void 0 : defaultFeatures.betaEnableWindsorFramework));
+  const selectedRate = React.useMemo(() => rateOptions === null || rateOptions === void 0 ? void 0 : rateOptions.find(r => r.rateId === selectedRateId), [rateOptions, selectedRateId]);
+  const handleSaveRate = React.useCallback(() => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const isValid = yield form.trigger();
+    if (!isValid) return;
+    if (selectedRate) yield onSave === null || onSave === void 0 ? void 0 : onSave(selectedRate);
+    // sets the form to not be dirty, so that Save is disabled
+    form.reset(form.getValues());
+  }), [form, onSave, selectedRate]);
+  const onSelectServicePoint = React.useCallback(servicePoint => setSelectedServicePoint(servicePoint), [setSelectedServicePoint]);
+  // When rateOptions update, handle scrolling and single-rate auto-selection and form reset
+  React.useEffect(() => {
+    if (!(rateOptions === null || rateOptions === void 0 ? void 0 : rateOptions.length)) {
+      form.setValue("rate", {
+        isAcknowledged: false,
+        rateId: ""
+      }, {
+        shouldDirty: true
+      });
+    }
+    if (rateOptions.length === 1) {
+      form.setValue("rate", {
+        isAcknowledged: !rateOptions[0].requiresAcknowledgement,
+        rateId: rateOptions[0].rateId
+      }, {
+        shouldDirty: true,
+        shouldValidate: true
+      });
+    }
+    if (rateOptions.length || !!(errors === null || errors === void 0 ? void 0 : errors.length)) {
+      setTimeout(() => {
+        var _a;
+        (_a = rateFormScrollToRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+      }, 0);
+    }
+  }, [form, rateOptions, errors === null || errors === void 0 ? void 0 : errors.length]);
+  // If the selected rate is preferred and requires acknowledgement, then we know that this rate has come from a house account
+  // and we are not going to be able to fund and purchase.
+  const isPreferredRate = React.useMemo(() => {
+    const preferredRate = preferredRates === null || preferredRates === void 0 ? void 0 : preferredRates.find(r => r.rate.rateId === (selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.rateId));
+    return !!preferredRate;
+  }, [preferredRates, selectedRate]);
+  const displayableErrors = React.useMemo(() => {
+    const rateAndShipmentErrors = [...(displayableRateErrors !== null && displayableRateErrors !== void 0 ? displayableRateErrors : []), ...(displayableShipmentErrors !== null && displayableShipmentErrors !== void 0 ? displayableShipmentErrors : [])];
+    if (hasShipFromAddressErrors) {
+      return {
+        messages: [t("errorMessages.updateShipFromAddress")],
+        title: "errorTypes.shipFromAddress"
+      };
+    }
+    if (rateAndShipmentErrors.length && rateOptions.length === 0) {
+      return {
+        messages: rateAndShipmentErrors,
+        title: "errorTypes.rateInvalid"
+      };
+    }
+    if (displayableSaveRateErrors === null || displayableSaveRateErrors === void 0 ? void 0 : displayableSaveRateErrors.length) {
+      return {
+        messages: displayableSaveRateErrors,
+        title: "errorTypes.saveRate"
+      };
+    }
+    if (labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length) {
+      return {
+        messages: labelErrors,
+        title: "errorTypes.purchase"
+      };
+    }
+    return undefined;
+  }, [displayableRateErrors, displayableShipmentErrors, hasShipFromAddressErrors, rateOptions.length, displayableSaveRateErrors, labelErrors, t]);
+  return jsxRuntime.jsxs("form", Object.assign({
+    id: "rate-form",
+    onSubmit: handleSubmit,
+    ref: rateFormScrollToRef
+  }, {
+    children: [jsxRuntime.jsx(section.Section, Object.assign({
+      "data-testid": "rates",
+      title: t("purchase-label:sections.rate", {
+        count: rateOptions.length
+      })
+    }, {
+      children: jsxRuntime.jsx(rateView.RateView, {
+        carriers: carriers,
+        errors: displayableErrors,
+        features: Object.assign(Object.assign({}, features), {
+          windsorFrameworkEnabled: !!(defaultFeatures === null || defaultFeatures === void 0 ? void 0 : defaultFeatures.betaEnableWindsorFramework)
+        }),
+        form: form,
+        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,
+          isFetching: servicePointsFetching,
+          onSelectServicePoint,
+          servicePointSearchQuery: servicePointSearchQuery,
+          servicePointsErrors: listServicePointsErrors,
+          servicePointsResponse
+        },
+        rateOptions: rateOptions,
+        rates: rates,
+        salesOrder: salesOrder,
+        selectedRate: selectedRate,
+        shipment: shipment,
+        showVatFeatures: showVatFeatures
+      })
+    })), (features === null || features === void 0 ? void 0 : features.labelLayout) && !labelsLoading && !(labels === null || labels === void 0 ? void 0 : labels.length) && jsxRuntime.jsx(section.Section, Object.assign({
+      title: t("manage-defaults:label.title")
+    }, {
+      children: jsxRuntime.jsx(selectLabelLayout.Purchase, {})
+    })), jsxRuntime.jsx(section.Section, Object.assign({
+      title: t("purchase-label:sections.payment")
+    }, {
+      children: jsxRuntime.jsx(fundAndPurchase.FundAndPurchase, {
+        control: form.control,
+        currency: currency,
+        disabled: disabled,
+        isFundingEnabled: !!(features === null || features === void 0 ? void 0 : features.enableFunding),
+        isInvalidatedByError: !!(labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length),
+        onPurchase: handleSubmit,
+        onSave: handleSaveRate,
+        onVatRegistrationComplete: onVatRegistrationComplete,
+        rateData: {
+          isPreferredRate,
+          rate: selectedRate
+        },
+        showVatSettings: showVatFeatures && (globalFeatures === null || globalFeatures === void 0 ? void 0 : globalFeatures.showVatSettings)
+      })
+    })), (globalFeatures === null || globalFeatures === void 0 ? void 0 : globalFeatures.poweredByShipEngine) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(spacer.Spacer, {}), jsxRuntime.jsx(poweredByShipengine.PoweredByShipEngine, {})]
+    })]
+  }));
+};
+
+exports.RateForm = RateForm;

package/cjs/elements/purchase-label/components/rate-form/rate-form.styles.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  ratesErrorMessage: theme => ({
+    marginTop: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  ratesInterstitial: {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    textAlign: "center"
+  },
+  showMoreOrLessRatesButton: theme => ({
+    alignItems: "center",
+    display: "flex",
+    paddingTop: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  windsorFrameworkMessages: theme => ({
+    marginLeft: styles$1.scopeTheme(theme).spacing(4)
+  })
+});
+
+exports.styles = styles;

package/cjs/elements/purchase-label/components/rate-form/rate-schema.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var zod = require('zod');
+
+const rateSchema = zod.z.object({
+  rate: zod.z.object({
+    isAcknowledged: zod.z.boolean().refine(v => v === true, "purchase-label:schemaErrors.needToAcknowledge"),
+    rateId: zod.z.string()
+  })
+}).transform(schema => schema.rate.rateId);
+
+exports.rateSchema = rateSchema;

package/cjs/elements/purchase-label/components/rate-form/rate-view.cjs

@@ -0,0 +1,247 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var money = require('../../../../utilities/money.cjs');
+var salesOrder = require('../../../../utilities/shipengine/sales-order.cjs');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var rateForm_styles = require('./rate-form.styles.cjs');
+var useWindsorFramework = require('../../hooks/use-windsor-framework.cjs');
+var useFilterVisibleRateOptions = require('../../hooks/use-filter-visible-rate-options/use-filter-visible-rate-options.cjs');
+var cube = require('../../../../components/cube/cube.cjs');
+var pudoRateTabs = require('../pudo/pudo-rate-tabs/pudo-rate-tabs.cjs');
+var spacer = require('../../../../components/spacer/spacer.cjs');
+var searchBar = require('../../../../components/search-bar/search-bar.cjs');
+var rateSelect = require('../../../../components/field/rate-select/rate-select.cjs');
+var linkAction = require('../../../../components/link-action/link-action.cjs');
+
+const RateView = ({
+  carriers,
+  errors,
+  features,
+  form,
+  isCalculatingRates,
+  isSavingRate,
+  onSelectRate,
+  preferredServiceCodes,
+  pudoServicePointDetails: _pudoServicePointDetails = {
+    fetchServicePoints: () => {},
+    onSelectServicePoint: () => {}
+  },
+  rateFormScrollToRef,
+  rateOptions,
+  rates,
+  salesOrder: salesOrder$1,
+  selectedRate,
+  shipment,
+  showVatFeatures
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const {
+    fetchServicePoints,
+    onSelectServicePoint,
+    isFetching: isFetchingServicePoints,
+    servicePointSearchQuery,
+    servicePointsErrors,
+    servicePointsResponse
+  } = _pudoServicePointDetails;
+  const [showHiddenRates, setShowHiddenRates] = React.useState(false);
+  const {
+    isWindsorFrameworkInvalid
+  } = useWindsorFramework.useWindsorFramework(shipment, features === null || features === void 0 ? void 0 : features.windsorFrameworkEnabled);
+  const addressQueryCoordinates = React.useMemo(() => {
+    if (!servicePointsResponse) return {
+      lat: 0,
+      long: 0
+    };
+    const {
+      lat,
+      long
+    } = servicePointsResponse;
+    return {
+      lat,
+      long
+    };
+  }, [servicePointsResponse]);
+  const requestedServices = React.useMemo(() => salesOrder.getRequestedServices(salesOrder$1), [salesOrder$1]);
+  const formatRequestedService = () => requestedServices.length > 1 ? t("purchase-label:multipleShippingServices") : requestedServices[0];
+  const pudoRateOptions = React.useMemo(() => rateOptions === null || rateOptions === void 0 ? void 0 : rateOptions.filter(rate => rate.pudoType), [rateOptions]);
+  const expandedRateOptionList = React.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.useFilterVisibleRateOptions(expandedRateOptionList, selectedRate, preferredServiceCodes);
+  const handleShowMoreRates = React.useCallback(() => {
+    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"
+      });
+    }
+  }, [showHiddenRates, rateFormScrollToRef]);
+  // Return true if User has multiple accounts for a single carrier.
+  const hasDuplicateCarrierCode = () => {
+    if (!carriers) return false;
+    const uniqueCarrierCodes = new Set();
+    for (const carrier of carriers) {
+      // account for usps & stamps_com being different carrier codes, but the same carrier
+      if (uniqueCarrierCodes.has("stamps_com") && carrier.carrierCode === "usps" || uniqueCarrierCodes.has("usps") && carrier.carrierCode === "stamps_com") {
+        return true;
+      }
+      if (uniqueCarrierCodes.has(carrier.carrierCode)) {
+        return true;
+      }
+      uniqueCarrierCodes.add(carrier.carrierCode);
+    }
+    return false;
+  };
+  const rateSelectCommonProps = {
+    handleShowMoreRates,
+    nicknameFeature: (features === null || features === void 0 ? void 0 : features.nicknameRate) && hasDuplicateCarrierCode(),
+    preferredServiceCodes,
+    rateFormScrollToRef,
+    setShowHiddenRates,
+    showHiddenRates,
+    showVatFeatures
+  };
+  const isFetchingRates = isCalculatingRates || isSavingRate;
+  if (isFetchingRates) {
+    return jsxRuntime.jsxs("article", Object.assign({
+      css: rateForm_styles.styles.ratesInterstitial,
+      role: "presentation"
+    }, {
+      children: [jsxRuntime.jsx(cube.Cube, {
+        animate: isFetchingRates
+      }), jsxRuntime.jsx(spacer.Spacer, {}), jsxRuntime.jsx(giger.Typography, {
+        children: isSavingRate ? t("purchase-label:loading.savingRate") : t("purchase-label:loading.calculatingRates")
+      })]
+    }));
+  }
+  if (isWindsorFrameworkInvalid.isInvalid) return jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+    title: t("common:errorMessages.windsorFramework.doNotConform"),
+    type: giger.NotificationType.ERROR
+  }, {
+    children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [t("common:errorMessages.windsorFramework.windsorFrameworkDefaultMessage"), jsxRuntime.jsx(spacer.Spacer, {
+        multiplier: 1
+      }), isWindsorFrameworkInvalid.messages && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [t("common:errorMessages.windsorFramework.pleaseAddTheFollowingTaxIds"), jsxRuntime.jsx("ul", Object.assign({
+          css: rateForm_styles.styles.windsorFrameworkMessages
+        }, {
+          children: isWindsorFrameworkInvalid.messages.map((message, index) => jsxRuntime.jsx("li", {
+            children: t(`common:errorMessages.windsorFramework.${message}`)
+          }, index))
+        }))]
+      })]
+    })
+  }));
+  if (rateOptions.length) return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [salesOrder$1 && !!requestedServices.length && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+        type: giger.NotificationType.INFO
+      }, {
+        children: jsxRuntime.jsx(reactI18next.Trans, {
+          components: [jsxRuntime.jsx("strong", {}), jsxRuntime.jsx("strong", {})],
+          i18nKey: "purchase-label:rates.requestedShippingNotification",
+          values: {
+            amount: money.formatMoney(salesOrder$1.paymentDetails.estimatedShipping),
+            service: formatRequestedService()
+          }
+        })
+      })), jsxRuntime.jsx(spacer.Spacer, {
+        multiplier: 3
+      })]
+    }), !!(features === null || features === void 0 ? void 0 : features.enablePudoUI) && pudoRateOptions.length ? jsxRuntime.jsx(pudoRateTabs.PudoRateTabs, Object.assign({
+      filterVisibleRateOptions: filterVisibleRateOptions,
+      form: form,
+      mapCenter: {
+        lat: addressQueryCoordinates.lat,
+        lng: addressQueryCoordinates.long
+      },
+      onSearch: value => fetchServicePoints(value),
+      onSelectRate: onSelectRate,
+      onViewServicePoint: onSelectServicePoint,
+      options: pudoRateOptions,
+      rates: rates,
+      servicePointSearchQuery: typeof servicePointSearchQuery === "string" ? servicePointSearchQuery : "",
+      servicePointsErrors: servicePointsErrors,
+      servicePointsLoading: isFetchingServicePoints
+    }, rateSelectCommonProps)) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [pudoRateOptions.length > 0 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(searchBar.SearchBar, {
+          defaultValue: typeof servicePointSearchQuery === "string" ? servicePointSearchQuery : "",
+          label: t("purchase-label:servicePoints.searchLabel"),
+          loading: isFetchingServicePoints,
+          onSearch: value => fetchServicePoints(value)
+        }), servicePointsErrors && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(spacer.Spacer, {
+            multiplier: 3
+          }), jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+            type: giger.NotificationType.INFO
+          }, {
+            children: t("purchase-label:servicePoints.error")
+          }))]
+        }), jsxRuntime.jsx(spacer.Spacer, {})]
+      }), jsxRuntime.jsx(rateSelect.RateSelect, Object.assign({
+        control: form.control,
+        displayErrors: false,
+        isLoading: isFetchingServicePoints,
+        label: "Rate",
+        name: "rate",
+        onClick: onSelectRate,
+        onSelectServicePoint: onSelectServicePoint,
+        options: showHiddenRates ? expandedRateOptionList : collapsedRateOptionList
+      }, rateSelectCommonProps)), expandedRateOptionList.length > COLLAPSED_RATE_VIEW_LIMIT && jsxRuntime.jsx(linkAction.LinkAction, {
+        css: rateForm_styles.styles.showMoreOrLessRatesButton,
+        icon: showHiddenRates ? "chevronTop" : "chevronBottom",
+        iconPlacement: "right",
+        onClick: handleShowMoreRates,
+        title: showHiddenRates ? t("purchase-label:actions.showFewerRates") : t("purchase-label:actions.showMoreRates")
+      })]
+    }), errors && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(spacer.Spacer, {
+        multiplier: 2
+      }), jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+        title: t(errors.title),
+        type: giger.NotificationType.ERROR
+      }, {
+        children: errors.messages
+      }))]
+    })]
+  });
+  if (errors) return jsxRuntime.jsx("article", Object.assign({
+    css: rateForm_styles.styles.ratesInterstitial,
+    role: "presentation"
+  }, {
+    children: jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+      title: t(errors.title),
+      type: giger.NotificationType.ERROR
+    }, {
+      children: errors === null || errors === void 0 ? void 0 : errors.messages
+    }))
+  }));
+  return jsxRuntime.jsxs("article", Object.assign({
+    css: rateForm_styles.styles.ratesInterstitial,
+    role: "presentation"
+  }, {
+    children: [jsxRuntime.jsx(cube.Cube, {}), jsxRuntime.jsx(spacer.Spacer, {}), jsxRuntime.jsx(giger.Typography, {
+      children: (rates === null || rates === void 0 ? void 0 : rates.length) === 0 ? t("purchase-label:errorMessages.noRates") : t("purchase-label:cta.addPackageDetails")
+    })]
+  }));
+};
+
+exports.RateView = RateView;