@shipengine/elements 2.20.0 → 2.21.0

package/cjs/elements/purchase-label/components/preset-descriptor/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var presetDescriptor = require('./preset-descriptor.cjs');
+
+
+
+exports.PresetDescriptor = presetDescriptor.PresetDescriptor;

package/cjs/elements/purchase-label/components/preset-descriptor/preset-descriptor.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var dimensions = require('../../../../utilities/shipengine/dimensions.cjs');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var presetDescriptor_styles = require('./preset-descriptor.styles.cjs');
+
+const PresetDescriptor = preset => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  return jsxRuntime.jsx("div", Object.assign({
+    css: presetDescriptor_styles.styles.containerStyles
+  }, {
+    children: jsxRuntime.jsxs("div", {
+      children: [jsxRuntime.jsxs("div", {
+        children: [jsxRuntime.jsx("span", Object.assign({
+          css: presetDescriptor_styles.styles.presetNameStyles
+        }, {
+          children: preset.name
+        })), jsxRuntime.jsx("span", Object.assign({
+          css: presetDescriptor_styles.styles.dimensionStyles
+        }, {
+          children: (preset.dimensions || preset.weight) && " - "
+        })), preset.dimensions && jsxRuntime.jsx("span", Object.assign({
+          css: presetDescriptor_styles.styles.dimensionStyles
+        }, {
+          children: `${dimensions.formatDimensions(preset.dimensions)} ` + t(`units.${preset.dimensions.unit}`)
+        }))]
+      }), jsxRuntime.jsx("div", Object.assign({
+        css: presetDescriptor_styles.styles.serviceNameStyles
+      }, {
+        children: preset.serviceName && preset.serviceName
+      })), preset.serviceName && ["USPS Parcel Select Ground", "USPS First Class Mail"].includes(preset.serviceName) && jsxRuntime.jsx(giger.InlineNotification, {
+        css: presetDescriptor_styles.styles.warningStyles,
+        type: giger.NotificationType.ALERT
+      })]
+    })
+  }));
+};
+
+exports.PresetDescriptor = PresetDescriptor;

package/cjs/elements/purchase-label/components/preset-descriptor/preset-descriptor.styles.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  containerStyles: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    paddingTop: styles$1.scopeTheme(theme).spacing(0.5),
+    width: "max-content"
+  }),
+  dimensionStyles: theme => ({
+    color: styles$1.scopeTheme(theme).palette.gray.main,
+    fontSize: styles$1.scopeTheme(theme).typography.fontSize.XS
+  }),
+  presetNameStyles: theme => ({
+    fontSize: styles$1.scopeTheme(theme).typography.fontSize.XS,
+    fontWeight: styles$1.scopeTheme(theme).typography.fontWeight.bold
+  }),
+  serviceNameStyles: theme => ({
+    fontSize: styles$1.scopeTheme(theme).typography.fontSize.XXS,
+    lineHeight: 0,
+    paddingTop: styles$1.scopeTheme(theme).spacing()
+  }),
+  warningStyles: theme => ({
+    background: "none",
+    marginLeft: "auto",
+    marginRight: styles$1.scopeTheme(theme).spacing(-3),
+    marginTop: styles$1.scopeTheme(theme).spacing(-5),
+    width: styles$1.scopeTheme(theme).spacing()
+  })
+});
+
+exports.styles = styles;

package/cjs/elements/purchase-label/components/pudo/here-map/here-map.cjs

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var hereMap_styles = require('./here-map.styles.cjs');
+var useHereMap = require('./use-here-map.cjs');
+var useHereMapUi = require('./use-here-map-ui.cjs');
+
+const HereMap = ({
+  mapOptions,
+  children,
+  markerData,
+  onClickMarker,
+  showZoomControl: _showZoomControl = false,
+  zoomControlPosition,
+  showMapSettingsControl: _showMapSettingsControl = false,
+  informationCardContent,
+  showScaleBarControl: _showScaleBarControl = true,
+  onMapCenterChange
+}) => {
+  const mapRef = React.useRef(null);
+  const markersRef = React.useRef([]);
+  const [scriptsLoaded, setScriptsLoaded] = React.useState(false);
+  React.useEffect(() => {
+    const scriptUrls = [`https://js.api.here.com/v3/3.1/mapsjs-core.js`, `https://js.api.here.com/v3/3.1/mapsjs-service.js`, `https://js.api.here.com/v3/3.1/mapsjs-mapevents.js`, `https://js.api.here.com/v3/3.1/mapsjs-ui.js`];
+    const appendScript = url => tslib.__awaiter(void 0, void 0, void 0, function* () {
+      return new Promise((resolve, reject) => {
+        const script = document.createElement("script");
+        script.src = url;
+        script.async = true;
+        script.onload = () => resolve();
+        script.onerror = () => reject(new Error(`Failed to load script: ${url}`));
+        document.body.appendChild(script);
+      });
+    });
+    const loadScripts = urls => tslib.__awaiter(void 0, void 0, void 0, function* () {
+      for (const url of urls) {
+        try {
+          yield appendScript(url);
+        } catch (error) {
+          console.error("Failed to load HERE API scripts", error);
+          setScriptsLoaded(false);
+          return;
+        }
+      }
+      setScriptsLoaded(true);
+    });
+    loadScripts(scriptUrls).catch(error => console.error("Failed to load HERE API scripts", error));
+  }, []);
+  const {
+    hereMap,
+    defaultLayers
+  } = useHereMap.useHereMap(mapRef, mapOptions, scriptsLoaded);
+  useHereMapUi.useHereMapUI(defaultLayers, hereMap, mapOptions, markersRef, _showZoomControl, _showMapSettingsControl, _showScaleBarControl, zoomControlPosition, markerData, onClickMarker, onMapCenterChange);
+  if (!scriptsLoaded) {
+    return null;
+  }
+  return jsxRuntime.jsxs("div", Object.assign({
+    css: hereMap_styles.styles.container
+  }, {
+    children: [jsxRuntime.jsx("div", Object.assign({
+      css: hereMap_styles.styles.map,
+      ref: mapRef
+    }, {
+      children: children
+    })), informationCardContent && jsxRuntime.jsx("div", Object.assign({
+      css: hereMap_styles.styles.informationOverlay
+    }, {
+      children: informationCardContent
+    }))]
+  }));
+};
+
+exports.HereMap = HereMap;

package/cjs/elements/purchase-label/components/pudo/here-map/here-map.styles.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  container: {
+    position: "relative"
+  },
+  informationOverlay: theme => ({
+    backgroundColor: "white",
+    borderRadius: "5px",
+    bottom: 40,
+    boxShadow: "0px 4px 2px 0px rgba(161, 161, 161, 0.25)",
+    left: "50%",
+    padding: styles$1.scopeTheme(theme).spacing(1.5),
+    position: "absolute",
+    transform: "translateX(-50%)",
+    width: "90%",
+    zIndex: 1000
+  }),
+  map: theme => ({
+    border: `1px solid ${styles$1.scopeTheme(theme).palette.gray.light}`,
+    borderRadius: styles$1.scopeTheme(theme).borderRadius.S,
+    height: "500px",
+    width: "100%"
+  })
+});
+
+exports.styles = styles;

package/cjs/elements/purchase-label/components/pudo/here-map/init.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const initHerePlatform = token => {
+  return new H.service.Platform({
+    apikey: "-",
+    headers: {
+      Authorization: `Bearer ${token.accessToken}`
+    }
+  });
+};
+const initDefaultLayers = platform => {
+  return platform.createDefaultLayers();
+};
+const initInteractiveBehaviors = map => {
+  return new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
+};
+const initDefaultUI = (map, zoomControlPosition = H.ui.LayoutAlignment.RIGHT_TOP, defaultLayers, showZoomControl, showMapSettingsControl, showScaleBarControl, locale) => {
+  const ui = H.ui.UI.createDefault(map, defaultLayers);
+  // Set units by locale
+  locale && ui.setUnitSystem(locale === "en-US" ? H.ui.UnitSystem.IMPERIAL : H.ui.UnitSystem.METRIC);
+  // Zoom Control
+  const zoom = ui.getControl("zoom");
+  showZoomControl && zoom && zoom.setAlignment(zoomControlPosition);
+  // remove box shadow around zoom control
+  const style = document.createElement("style");
+  style.innerHTML = `.H_ctl.H_grp { box-shadow: none !important }`;
+  document.head.appendChild(style);
+  !showZoomControl && ui.removeControl("zoom");
+  // Map Settings Control
+  !showMapSettingsControl && ui.removeControl("mapsettings");
+  // Scale Bar Control
+  !showScaleBarControl && ui.removeControl("scalebar");
+  return ui;
+};
+
+exports.initDefaultLayers = initDefaultLayers;
+exports.initDefaultUI = initDefaultUI;
+exports.initHerePlatform = initHerePlatform;
+exports.initInteractiveBehaviors = initInteractiveBehaviors;

package/cjs/elements/purchase-label/components/pudo/here-map/use-here-map-ui.cjs

@@ -0,0 +1,82 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var init = require('./init.cjs');
+var elementsContextProvider = require('../../../../../elements-provider/elements-context-provider.cjs');
+
+const useHereMapUI = (defaultLayers, map, mapOptions, markersRef, showZoomControl, showMapSettingsControl, showScaleBarControl, zoomControlPosition, markerData, onClickMarker, onMapCenterChange) => {
+  const prevMapCenter = React.useRef(mapOptions.center);
+  const {
+    locale: defaultLocale
+  } = elementsContextProvider.useElements();
+  React.useEffect(() => {
+    if (!map || !defaultLayers) return;
+    window.addEventListener("resize", () => {
+      map.getViewPort().resize();
+    });
+    const defaultUI = init.initDefaultUI(map, zoomControlPosition, defaultLayers, showZoomControl, showMapSettingsControl, showScaleBarControl, defaultLocale);
+    if (!defaultUI) return;
+    const {
+      center,
+      zoom
+    } = mapOptions;
+    // Workaround to check if map center has actually changed
+    // ex: service points are refetched due to react-query staleTime, which would briefly set the center coordinates undefined and this would trigger a recentering of the map
+    const mapCenterChanged = !prevMapCenter.current || (center === null || center === void 0 ? void 0 : center.lat) !== prevMapCenter.current.lat || (center === null || center === void 0 ? void 0 : center.lng) !== prevMapCenter.current.lng;
+    if (center && mapCenterChanged) {
+      prevMapCenter.current = center;
+      onMapCenterChange === null || onMapCenterChange === void 0 ? void 0 : onMapCenterChange();
+      // Set the map center
+      map.setCenter(center);
+    }
+    // Change cursors to show drag
+    const changeCursorOnDragStart = () => {
+      map.getViewPort().element.style.cursor = "grab";
+    };
+    const changeCursorOnDragEnd = () => {
+      map.getViewPort().element.style.cursor = "pointer";
+    };
+    map.addEventListener("dragstart", changeCursorOnDragStart);
+    map.addEventListener("dragend", changeCursorOnDragEnd);
+    // Set zoom level
+    if (zoom && mapCenterChanged) {
+      map.setZoom(zoom, true);
+    }
+    // Add markers to map
+    if (markerData) {
+      markersRef.current = markerData.map(data => {
+        const marker = new H.map.DomMarker(data.coordinates, {
+          data: null,
+          icon: new H.map.DomIcon(data.icon),
+          zIndex: data.zIndex
+        });
+        marker.addEventListener("tap", () => {
+          onClickMarker === null || onClickMarker === void 0 ? void 0 : onClickMarker(data);
+        });
+        return marker;
+      }) || [];
+      markersRef.current.forEach(marker => {
+        map.addObject(marker);
+      });
+    }
+    return () => {
+      window.removeEventListener("resize", () => {
+        map.getViewPort().resize();
+      });
+      map.removeEventListener("dragstart", changeCursorOnDragStart);
+      map.removeEventListener("dragend", changeCursorOnDragEnd);
+      // Remove markers
+      markersRef.current.forEach(marker => {
+        map.removeObject(marker);
+        marker.removeEventListener("tap", () => {
+          onClickMarker === null || onClickMarker === void 0 ? void 0 : onClickMarker(marker.getData());
+        });
+      });
+      markersRef.current = [];
+    };
+  }, [map, mapOptions, markerData, onClickMarker, markersRef, onMapCenterChange, prevMapCenter, showMapSettingsControl, showScaleBarControl, showZoomControl, defaultLayers, defaultLocale, zoomControlPosition]);
+};
+
+exports.useHereMapUI = useHereMapUI;

package/cjs/elements/purchase-label/components/pudo/here-map/use-here-map.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactApi = require('@shipengine/react-api');
+var init = require('./init.cjs');
+
+const useHereMap = (mapRef, mapOptions, scriptsLoaded) => {
+  const [hereMap, setHereMap] = React.useState(null);
+  const [defaultLayers, setDefaultLayers] = React.useState(null);
+  const {
+    data: hereToken
+  } = reactApi.useGetHereToken({
+    enabled: true,
+    staleTime: 1000 * 60 * 60 * 23 // Here tokens expire after 24 hours
+  });
+  // Initialize HERE Map and default layers on mount, prevents flashing of HERE UI components before the styles are loaded
+  React.useLayoutEffect(() => {
+    if (!scriptsLoaded) return;
+    const hereUIStyles = document.createElement("link");
+    hereUIStyles.rel = "stylesheet";
+    hereUIStyles.type = "text/css";
+    hereUIStyles.href = "https://js.api.here.com/v3/3.1/mapsjs-ui.css";
+    document.head.appendChild(hereUIStyles);
+    if (!hereToken || hereMap || !mapRef.current) return;
+    const platform = init.initHerePlatform(hereToken);
+    const mapLayers = init.initDefaultLayers(platform);
+    const map = new H.Map(mapRef.current, mapLayers.vector.normal.map, mapOptions);
+    init.initInteractiveBehaviors(map);
+    setHereMap(map);
+    setDefaultLayers(mapLayers);
+  }, [hereToken, mapRef, mapOptions, hereMap, scriptsLoaded]);
+  return {
+    defaultLayers,
+    hereMap
+  };
+};
+
+exports.useHereMap = useHereMap;

package/cjs/elements/purchase-label/components/pudo/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var pudoRateTabs = require('./pudo-rate-tabs/pudo-rate-tabs.cjs');
+
+
+
+exports.PudoRateTabs = pudoRateTabs.PudoRateTabs;

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

@@ -0,0 +1,73 @@
+'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 pudoListView_styles = require('./pudo-list-view.styles.cjs');
+var useFilterVisibleRateOptions = require('../../../../hooks/use-filter-visible-rate-options/use-filter-visible-rate-options.cjs');
+var rateSelect = require('../../../../../../components/field/rate-select/rate-select.cjs');
+var linkAction = require('../../../../../../components/link-action/link-action.cjs');
+
+const PudoListView = ({
+  form,
+  onSelectRate,
+  servicePointsLoading,
+  onViewServicePoint,
+  nicknameFeature,
+  preferredServiceCodes,
+  showHiddenRates,
+  handleShowMoreRates,
+  rateFormScrollToRef,
+  options: rateOptions,
+  showServicePoints: _showServicePoints = true,
+  filterVisibleRateOptions
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const ratesWithoutServicePoints = React.useMemo(() => {
+    return rateOptions.map(rate => {
+      const {
+          servicePoints
+        } = rate,
+        rest = tslib.__rest(rate, ["servicePoints"]);
+      // Return service points only if the servicePoints field is an empty array.
+      // This is used in Map view to display a warning in rate card for why there are no map markers for that rate.
+      const hasServicePoints = servicePoints && servicePoints.length > 0;
+      return hasServicePoints ? Object.assign({}, rest) : rate;
+    });
+  }, [rateOptions]);
+  const expandedRateOptions = _showServicePoints ? rateOptions : ratesWithoutServicePoints;
+  const collapsedRateOptions = React.useMemo(() => {
+    return filterVisibleRateOptions(expandedRateOptions);
+  }, [expandedRateOptions, filterVisibleRateOptions]);
+  return jsxRuntime.jsx("div", {
+    children: form && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(rateSelect.RateSelect, {
+        control: form.control,
+        displayErrors: false,
+        isLoading: servicePointsLoading,
+        label: "Rate",
+        mapViewEnabled: true,
+        name: "rate",
+        nicknameFeature: nicknameFeature,
+        onClick: onSelectRate,
+        onSelectServicePoint: servicePoint => onViewServicePoint(servicePoint),
+        options: showHiddenRates ? expandedRateOptions : collapsedRateOptions,
+        preferredServiceCodes: preferredServiceCodes,
+        rateFormScrollToRef: rateFormScrollToRef
+      }), expandedRateOptions.length > useFilterVisibleRateOptions.COLLAPSED_RATE_VIEW_LIMIT && jsxRuntime.jsx(linkAction.LinkAction, {
+        css: pudoListView_styles.styles.showMoreOrLessRatesButton,
+        icon: showHiddenRates ? "chevronTop" : "chevronBottom",
+        iconPlacement: "right",
+        onClick: handleShowMoreRates,
+        title: showHiddenRates ? t("purchase-label:actions.showFewerRates") : t("purchase-label:actions.showMoreRates")
+      })]
+    })
+  });
+};
+
+exports.PudoListView = PudoListView;

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

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  showMoreOrLessRatesButton: theme => ({
+    alignItems: "center",
+    display: "flex",
+    paddingTop: styles$1.scopeTheme(theme).spacing(2)
+  })
+});
+
+exports.styles = styles;

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

@@ -0,0 +1,105 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var carrier = require('../../../../../../utilities/shipengine/carrier.cjs');
+var React = require('react');
+var hereMap = require('../../here-map/here-map.cjs');
+var pudoListView = require('../pudo-list-view/pudo-list-view.cjs');
+var servicePointDisplay = require('../../../../../../components/service-point-display/service-point-display.cjs');
+var spacer = require('../../../../../../components/spacer/spacer.cjs');
+
+const PudoMapView = ({
+  rates,
+  servicePointsErrors,
+  mapCenter,
+  selectedMarker,
+  setSelectedMarker,
+  listViewProps
+}) => {
+  const filterRatesByServicePoint = servicePointId => {
+    if (!servicePointId) return rates;
+    return rates.filter(rate => {
+      var _a;
+      return (_a = rate.servicePoints) === null || _a === void 0 ? void 0 : _a.some(servicePoint => (servicePoint === null || servicePoint === void 0 ? void 0 : servicePoint.servicePointId) === servicePointId);
+    });
+  };
+  const [rateSelectOptions, setRateSelectOptions] = React.useState(filterRatesByServicePoint(selectedMarker === null || selectedMarker === void 0 ? void 0 : selectedMarker.servicePointId));
+  const uniqueServicePoints = Array.from(new Set(rates.map(rate => rate.servicePoints).flatMap(servicePoint => servicePoint !== null && servicePoint !== void 0 ? servicePoint : [])));
+  const getMarkerIcon = servicePoint => {
+    const carrierSvg = carrier.getLogoOrIconByCarrierCode(servicePoint.carrierCode, "icon");
+    const isSelected = (selectedMarker === null || selectedMarker === void 0 ? void 0 : selectedMarker.servicePointId) === servicePoint.servicePointId;
+    // Service Point markers should not be themeable per design
+    const svgSize = isSelected ? 70 : 60;
+    const strokeColor = isSelected ? "#11003A" : "#DFE4E8";
+    const strokeWidth = 2;
+    const carrierIconSize = isSelected ? "30px" : "25px";
+    const carrierIconStyle = `
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -80%);
+      width: ${carrierIconSize};
+      height: ${carrierIconSize};
+    `;
+    return `
+      <div>
+        <svg xmlns="http://www.w3.org/2000/svg" width="${svgSize}" height="${svgSize}" viewBox="0 0 22 26" fill="none">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M20.6364 10.8182C20.6364 18.4545 10.8182 25 10.8182 25C10.8182 25 1 18.4545 1 10.8182C1 5.39575 5.39575 1 10.8182 1C16.2406 1 20.6364 5.39575 20.6364 10.8182Z" fill="white" stroke="${strokeColor}" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round"/>
+          <img src="${carrierSvg}" alt="${servicePoint.carrierCode}" style="${carrierIconStyle}" />
+        </svg>
+      </div>
+    `;
+  };
+  const servicePointsData = uniqueServicePoints.map(servicePoint => {
+    return {
+      coordinates: {
+        lat: servicePoint.lat,
+        lng: servicePoint.long
+      },
+      icon: getMarkerIcon(servicePoint),
+      key: servicePoint.servicePointId,
+      zIndex: servicePoint.servicePointId === (selectedMarker === null || selectedMarker === void 0 ? void 0 : selectedMarker.servicePointId) ? 1 : 0
+    };
+  });
+  const handleMarkerClick = data => {
+    const matchingServicePoint = uniqueServicePoints.find(servicePoint => servicePoint.servicePointId === data.key);
+    setSelectedMarker(matchingServicePoint);
+    setRateSelectOptions(filterRatesByServicePoint(data.key));
+  };
+  return jsxRuntime.jsxs("section", {
+    children: [!servicePointsErrors && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx("div", Object.assign({
+        css: {
+          height: "500px"
+        }
+      }, {
+        children: jsxRuntime.jsx(hereMap.HereMap, {
+          informationCardContent: selectedMarker && jsxRuntime.jsx(servicePointDisplay.ServicePointDisplay, {
+            rateSelected: true,
+            servicePoint: selectedMarker,
+            showViewMapButton: false
+          }),
+          mapOptions: {
+            center: mapCenter,
+            zoom: 14.5
+          },
+          markerData: servicePointsData,
+          onClickMarker: data => handleMarkerClick(data),
+          onMapCenterChange: () => {
+            setSelectedMarker(undefined);
+            setRateSelectOptions(rates);
+          }
+        })
+      })), jsxRuntime.jsx(spacer.Spacer, {
+        multiplier: 3
+      })]
+    }), jsxRuntime.jsx(pudoListView.PudoListView, Object.assign({}, listViewProps, {
+      options: rateSelectOptions,
+      showServicePoints: false
+    }))]
+  });
+};
+
+exports.PudoMapView = PudoMapView;