@shipengine/elements 2.20.0 → 2.21.0

package/cjs/components/service-card/service-card.cjs

@@ -0,0 +1,121 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var serviceCard_styles = require('./service-card.styles.cjs');
+var carrierIcon = require('../carrier-icon/carrier-icon.cjs');
+var rateDetailCostBreakdown = require('../field/rate-select/rate-card/rate-detail-cost-breakdown/rate-detail-cost-breakdown.cjs');
+var costBreakdown = require('../field/rate-select/rate-card/cost-breakdown/cost-breakdown.cjs');
+
+const ServiceCardContainer = ({
+  children,
+  selected: _selected = false,
+  onClick,
+  className,
+  voided
+}) => {
+  return jsxRuntime.jsx("div", Object.assign({
+    className: className,
+    css: serviceCard_styles.styles.getContainerStyles(_selected, voided),
+    "data-testid": "service-card",
+    onClick: onClick,
+    onKeyDown: onClick ? event => {
+      if (event.key === "Enter" || event.key === " ") {
+        onClick();
+      }
+    } : undefined,
+    role: "button",
+    tabIndex: onClick ? 0 : undefined
+  }, {
+    children: children
+  }));
+};
+const ServiceCardHeader = ({
+  children,
+  carrierCode,
+  serviceInfo,
+  carrierFriendlyName,
+  rateDetailsProps,
+  costBreakdownProps,
+  rightContentCss,
+  voided
+}) => {
+  const {
+    type,
+    line1,
+    line2,
+    line3
+  } = serviceInfo || {};
+  return jsxRuntime.jsxs("div", Object.assign({
+    "data-testid": "service-card-header"
+  }, {
+    children: [jsxRuntime.jsxs("section", Object.assign({
+      css: serviceCard_styles.styles.section
+    }, {
+      children: [carrierCode && jsxRuntime.jsx("div", Object.assign({
+        css: serviceCard_styles.styles.carrierImage
+      }, {
+        children: jsxRuntime.jsx(carrierIcon.CarrierIcon, {
+          carrierCode: carrierCode,
+          carrierName: carrierFriendlyName
+        })
+      })), serviceInfo && jsxRuntime.jsxs("div", Object.assign({
+        css: serviceCard_styles.styles.serviceInfo
+      }, {
+        children: [type && jsxRuntime.jsx(giger.Typography, Object.assign({
+          bold: true,
+          component: "h3",
+          css: [serviceCard_styles.styles.serviceType, voided ? serviceCard_styles.styles.typographyVoided : null]
+        }, {
+          children: type
+        })), line1 && jsxRuntime.jsx(giger.Typography, {
+          children: line1
+        }), line2 && jsxRuntime.jsx(giger.Typography, {
+          children: line2
+        }), line3 && jsxRuntime.jsx(giger.Typography, {
+          children: line3
+        })]
+      })), jsxRuntime.jsx("div", Object.assign({
+        css: [rightContentCss, voided && serviceCard_styles.styles.typographyVoided]
+      }, {
+        children: rateDetailsProps ? jsxRuntime.jsx(rateDetailCostBreakdown.RateDetailCostBreakdown, Object.assign({}, rateDetailsProps)) : costBreakdownProps && jsxRuntime.jsx(costBreakdown.CostBreakdown, Object.assign({}, costBreakdownProps))
+      }))]
+    })), children && jsxRuntime.jsx("div", Object.assign({
+      css: serviceCard_styles.styles.headerChildren
+    }, {
+      children: children
+    }))]
+  }));
+};
+const ServiceCardFooter = ({
+  children,
+  messages
+}) => {
+  return jsxRuntime.jsxs("div", Object.assign({
+    "data-testid": "service-card-footer"
+  }, {
+    children: [jsxRuntime.jsx(giger.Divider, {
+      css: serviceCard_styles.styles.divider
+    }), jsxRuntime.jsxs("section", Object.assign({
+      css: serviceCard_styles.styles.footer
+    }, {
+      children: [messages && jsxRuntime.jsx("ul", Object.assign({
+        css: [serviceCard_styles.styles.footerList, messages.length > 1 && serviceCard_styles.styles.footerListWithMultipleMessages]
+      }, {
+        children: messages.map((m, index) => jsxRuntime.jsxs("li", Object.assign({
+          css: serviceCard_styles.styles.footerListItem
+        }, {
+          children: [jsxRuntime.jsx(giger.Typography, {
+            children: m.message
+          }), m.rightContent]
+        }), index))
+      })), children]
+    }))]
+  }));
+};
+
+exports.ServiceCardContainer = ServiceCardContainer;
+exports.ServiceCardFooter = ServiceCardFooter;
+exports.ServiceCardHeader = ServiceCardHeader;

package/cjs/components/service-card/service-card.styles.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const serviceCardFirstLineSize = theme => `${styles$1.scopeTheme(theme).spacing(3.25)}px`;
+const styles = styles$1.createStyles({
+  carrierImage: theme => ({
+    flex: "0 0 auto",
+    marginRight: styles$1.scopeTheme(theme).spacing(2),
+    maxHeight: serviceCardFirstLineSize(theme),
+    maxWidth: serviceCardFirstLineSize(theme)
+  }),
+  divider: theme => ({
+    borderColor: styles$1.scopeTheme(theme).palette.primary.main,
+    margin: "0 auto",
+    opacity: 0.3,
+    width: `calc(100% - ${styles$1.scopeTheme(theme).spacing(4)}px)`
+  }),
+  footer: theme => ({
+    padding: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  footerList: {
+    listStyle: "none"
+  },
+  footerListItem: {
+    alignItems: "center",
+    display: "flex"
+  },
+  footerListWithMultipleMessages: {
+    listStyle: "initial"
+  },
+  getContainerStyles: (selected, voided) => theme => ({
+    ":hover": !selected ? {
+      borderColor: styles$1.scopeTheme(theme).palette.primary.main
+    } : {},
+    background: selected ? styles$1.scopeTheme(theme).palette.primary.ultraLight : styles$1.scopeTheme(theme).palette.white,
+    border: voided ? "none" : `1px solid ${selected ? styles$1.scopeTheme(theme).palette.primary.main : styles$1.scopeTheme(theme).palette.gray.light}`,
+    borderRadius: styles$1.scopeTheme(theme).spacing(),
+    cursor: selected ? "default" : "pointer",
+    minWidth: styles$1.scopeTheme(theme).spacing(40),
+    opacity: voided ? 0.6 : 1,
+    position: "relative"
+  }),
+  headerChildren: theme => ({
+    padding: `${styles$1.scopeTheme(theme).spacing(0)}px ${styles$1.scopeTheme(theme).spacing(2)}px ${styles$1.scopeTheme(theme).spacing(2)}px ${styles$1.scopeTheme(theme).spacing(2)}px`
+  }),
+  section: theme => ({
+    alignItems: "flex-start",
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "nowrap",
+    padding: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  serviceInfo: theme => ({
+    display: "flex",
+    flex: "1",
+    flexDirection: "column",
+    marginRight: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  serviceType: theme => ({
+    display: "block",
+    lineHeight: serviceCardFirstLineSize(theme),
+    marginBottom: styles$1.scopeTheme(theme).spacing(0)
+  }),
+  typographyVoided: theme => ({
+    color: styles$1.scopeTheme(theme).palette.gray.main,
+    textDecoration: "line-through"
+  })
+});
+
+exports.serviceCardFirstLineSize = serviceCardFirstLineSize;
+exports.styles = styles;

package/cjs/components/service-point-display/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var servicePointDisplay = require('./service-point-display.cjs');
+
+
+
+exports.ServicePointDisplay = servicePointDisplay.ServicePointDisplay;
+exports.formatDistance = servicePointDisplay.formatDistance;

package/cjs/components/service-point-display/operating-hours.cjs

@@ -0,0 +1,258 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useToggle = require('../../hooks/use-toggle.cjs');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var operatingHours_styles = require('./operating-hours.styles.cjs');
+
+const OperatingHoursDisplay = ({
+  hoursOfOperation,
+  rateSelected
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation("purchase-label");
+  const [hoursExpanded, setHoursExpanded] = useToggle.useToggle(false);
+  const daysOfTheWeek = React.useMemo(() => Object.keys(hoursOfOperation), [hoursOfOperation]);
+  const today = React.useMemo(() => {
+    const currentDayIndex = new Date().getDay();
+    return daysOfTheWeek[currentDayIndex - 1] || "sunday";
+  }, [daysOfTheWeek]);
+  const isToday = React.useCallback(day => day === today, [today]);
+  const formatTime = time => {
+    const timeInHHMMSS = time.match(/^(\d{2}):(\d{2}):(\d+)$/);
+    if (!timeInHHMMSS) return time;
+    return `${timeInHHMMSS[1]}:${timeInHHMMSS[2]}`;
+  };
+  const formatDay = day => day.charAt(0).toUpperCase() + day.slice(1);
+  const formatServicePointHours = hours => {
+    // if no hours return "closed"
+    if (hours.length === 0) return t("servicePoints.closed");
+    // if only one set of hours return the formatted time
+    if (hours.length === 1) {
+      return `${formatTime(hours[0].open)} - ${formatTime(hours[0].close)}`;
+    }
+    // if multiple sets of hours, handle possible overlapping hours
+    // example should return: ["8:00 - 13:00", "14:00 - 20:00"]
+    // monday: [
+    //   { open: "08:00:00", close: "10:00:00" },
+    //   { open: "10:00:00", close: "12:00:00" },
+    //   { open: "12:00:00", close: "13:00:00" },
+    //   { open: "14:00:00", close: "20:00:00" },
+    // ],
+    const formattedHours = [];
+    let currentOpen = hours[0].open;
+    let currentClose = hours[0].close;
+    for (let i = 1; i < hours.length; i++) {
+      const nextOpen = hours[i].open;
+      const nextClose = hours[i].close;
+      if (currentClose === nextOpen) {
+        currentClose = nextClose;
+      } else {
+        // if there is a gap in the hours, add the current set and start a new comparison
+        formattedHours.push(`${formatTime(currentOpen)} - ${formatTime(currentClose)}`);
+        currentOpen = nextOpen;
+        currentClose = nextClose;
+      }
+    }
+    // add the last set of hours
+    formattedHours.push(`${formatTime(currentOpen)} - ${formatTime(currentClose)}`);
+    return formattedHours;
+  };
+  const getHoursOfOperationByDay = day => {
+    const hours = hoursOfOperation[day];
+    return {
+      day: formatDay(day),
+      hours: formatServicePointHours(hours)
+    };
+  };
+  const TypographyWrapper = ({
+    day,
+    children,
+    isClosed
+  }) => {
+    return jsxRuntime.jsx(giger.Typography, Object.assign({
+      css: operatingHours_styles.styles.getTextStyles(isToday(day), hoursExpanded, isClosed)
+    }, {
+      children: children
+    }));
+  };
+  const HoursDisplay = ({
+    day,
+    hours
+  }) => {
+    return jsxRuntime.jsx("div", Object.assign({
+      css: operatingHours_styles.styles.hoursDisplayContainer
+    }, {
+      children: Array.isArray(hours) ? hours.map((hour, index) => jsxRuntime.jsx(TypographyWrapper, Object.assign({
+        day: day
+      }, {
+        children: hour
+      }), index)) : jsxRuntime.jsx(TypographyWrapper, Object.assign({
+        day: day,
+        isClosed: hours === t("servicePoints.closed")
+      }, {
+        children: hours
+      }))
+    }));
+  };
+  // TODO: No longer using this function until we can compare local time zone to service points time zone and/or API returns timezone data or times in UTC. Keeping for future reference.
+  // const displayOpenOrClosedStatus = useCallback(
+  //   (hoursOfOperation: ServicePoint["hoursOfOperation"]) => {
+  //     const todaysHoursOfOperation = hoursOfOperation[today as keyof typeof hoursOfOperation];
+  //     if (!todaysHoursOfOperation) {
+  //       return <Typography>{t("servicePoints.closed")}</Typography>;
+  //     }
+  //     const currentTime = new Date().getHours();
+  //     const { open, close } = todaysHoursOfOperation[0];
+  //     const isBeforeOpenTime = currentTime <= parseInt(open.split(":")[0]) - 1 && currentTime < 12;
+  //     const isAfterCloseTime = currentTime >= parseInt(close.split(":")[0]);
+  //     const isOpen = !isBeforeOpenTime && !isAfterCloseTime;
+  //     const findNextOpenDayAndTime = () => {
+  //       const currentDayIdx = daysOfTheWeek.indexOf(today);
+  //       if (isBeforeOpenTime) {
+  //         return {
+  //           nextOpenDay: t("servicePoints.today"),
+  //           nextOpenTime: formatTime(open),
+  //         };
+  //       }
+  //       let i = currentDayIdx + 1;
+  //       // Loop until we find a day with hours of operation
+  //       while (i !== currentDayIdx) {
+  //         i = i % daysOfTheWeek.length;
+  //         const nextDay = daysOfTheWeek[i];
+  //         const nextDayHours = hoursOfOperation[nextDay as keyof typeof hoursOfOperation];
+  //         if (nextDay && nextDayHours.length > 0) {
+  //           return {
+  //             nextOpenDay: formatDay(nextDay),
+  //             nextOpenTime: formatTime(nextDayHours[0].open),
+  //           };
+  //         }
+  //         i++;
+  //       }
+  //       return {
+  //         nextOpenDay: "",
+  //         nextOpenTime: "",
+  //       };
+  //     };
+  //     const { nextOpenDay, nextOpenTime } = findNextOpenDayAndTime();
+  //     return isOpen ? (
+  //       <>
+  //         <Typography bold css={styles.open}>
+  //           {`${t("servicePoints.open")} `}
+  //         </Typography>
+  //         <Typography>{`${t("servicePoints.until", {
+  //           time: formatTime(close),
+  //         })}`}</Typography>
+  //       </>
+  //     ) : (
+  //       <>
+  //         <Typography bold css={styles.closed}>
+  //           {`${t("servicePoints.closed")} `}
+  //         </Typography>
+  //         <Typography>{`| ${t("servicePoints.nextOpeningDay", {
+  //           day: nextOpenDay,
+  //           time: nextOpenTime,
+  //         })}`}</Typography>
+  //       </>
+  //     );
+  //   },
+  //   [daysOfTheWeek, today, formatDay, t]
+  // );
+  const displayTodaysHours = day => {
+    const {
+      day: formattedDay,
+      hours
+    } = getHoursOfOperationByDay(day);
+    return (
+      // TODO: uncomment open/closed status below and remove lines 223 - 228 when line 124 TODO is resolved
+      // <div css={{ alignItems: "center", display: "flex" }}>
+      //   {displayOpenOrClosedStatus(hoursOfOperation)}
+      //   {rateSelected && (
+      //     <Icon
+      //       aria-label={hoursExpanded ? "collapse hours" : "expand hours"}
+      //       name={hoursExpanded ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM}
+      //       onClick={setHoursExpanded}
+      //       size={IconSize.SIZE_MEDIUM}
+      //     />
+      //   )}
+      // </div>
+      jsxRuntime.jsxs("div", Object.assign({
+        css: operatingHours_styles.styles.inlineWrapper
+      }, {
+        children: [jsxRuntime.jsx(TypographyWrapper, Object.assign({
+          day: day
+        }, {
+          children: formattedDay
+        })), jsxRuntime.jsxs("div", Object.assign({
+          css: operatingHours_styles.styles.inlineWrapper
+        }, {
+          children: [jsxRuntime.jsx(HoursDisplay, {
+            day: day,
+            hours: hours
+          }), rateSelected && jsxRuntime.jsx(giger.Icon, {
+            "aria-label": hoursExpanded ? "collapse hours" : "expand hours",
+            name: hoursExpanded ? gigerTheme.IconNames.CHEVRON_TOP : gigerTheme.IconNames.CHEVRON_BOTTOM,
+            onClick: setHoursExpanded,
+            onKeyDown: e => e.key === "Enter" && setHoursExpanded(),
+            size: giger.IconSize.SIZE_MEDIUM,
+            tabIndex: 0
+          })]
+        }))]
+      }))
+    );
+  };
+  const displayAllHours = days => {
+    return jsxRuntime.jsxs("section", {
+      children: [jsxRuntime.jsxs("div", Object.assign({
+        css: operatingHours_styles.styles.inlineWrapper
+      }, {
+        children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+          css: operatingHours_styles.styles.getTextStyles(false, hoursExpanded)
+        }, {
+          children: t("servicePoints.localTimeDisclaimer")
+        })), rateSelected && jsxRuntime.jsx(giger.Icon, {
+          "aria-label": hoursExpanded ? "collapse hours" : "expand hours",
+          name: hoursExpanded ? gigerTheme.IconNames.CHEVRON_TOP : gigerTheme.IconNames.CHEVRON_BOTTOM,
+          onClick: setHoursExpanded,
+          onKeyDown: e => e.key === "Enter" && setHoursExpanded(),
+          size: giger.IconSize.SIZE_MEDIUM,
+          tabIndex: 0
+        })]
+      })), jsxRuntime.jsx("ul", {
+        children: days.map((day, idx) => {
+          const {
+            day: formattedDay,
+            hours
+          } = getHoursOfOperationByDay(day);
+          return jsxRuntime.jsxs("li", Object.assign({
+            css: operatingHours_styles.styles.hoursListItem
+          }, {
+            children: [jsxRuntime.jsx("div", Object.assign({
+              css: operatingHours_styles.styles.dayColumn
+            }, {
+              children: jsxRuntime.jsx(TypographyWrapper, Object.assign({
+                day: day
+              }, {
+                children: formattedDay
+              }))
+            })), jsxRuntime.jsx(HoursDisplay, {
+              day: day,
+              hours: hours
+            })]
+          }), idx);
+        })
+      })]
+    });
+  };
+  return jsxRuntime.jsx("section", {
+    children: hoursExpanded ? displayAllHours(daysOfTheWeek) : displayTodaysHours(today)
+  });
+};
+
+exports.OperatingHoursDisplay = OperatingHoursDisplay;

package/cjs/components/service-point-display/operating-hours.styles.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  closed: theme => ({
+    color: styles$1.scopeTheme(theme).palette.error.main,
+    whiteSpace: "pre"
+  }),
+  dayColumn: theme => ({
+    gridColumn: "1",
+    minWidth: styles$1.scopeTheme(theme).spacing(12)
+  }),
+  getTextStyles: (isToday, expanded, isClosed) => theme => ({
+    color: expanded ? styles$1.scopeTheme(theme).palette.gray.main : styles$1.scopeTheme(theme).palette.gray.dark,
+    fontStyle: isClosed ? "italic" : "normal",
+    fontWeight: isToday && expanded ? "bold" : "normal"
+  }),
+  hoursDisplayContainer: theme => ({
+    "& > span": {
+      lineHeight: `${styles$1.scopeTheme(theme).typography.lineHeight.S} !important`
+    },
+    "& > span:last-child": {
+      marginBottom: styles$1.scopeTheme(theme).spacing(0.5)
+    },
+    display: "flex",
+    flexDirection: "column"
+  }),
+  hoursListItem: theme => ({
+    display: "grid",
+    gap: styles$1.scopeTheme(theme).spacing(1),
+    gridTemplateColumns: "auto 1fr",
+    listStyle: "none",
+    marginBottom: styles$1.scopeTheme(theme).spacing(0.5)
+  }),
+  inlineWrapper: theme => ({
+    "& > span": {
+      lineHeight: `${styles$1.scopeTheme(theme).typography.lineHeight.S} !important`
+    },
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(1)
+  }),
+  open: theme => ({
+    color: styles$1.scopeTheme(theme).palette.success.main,
+    whiteSpace: "pre"
+  })
+});
+
+exports.styles = styles;

package/cjs/components/service-point-display/service-point-display.cjs

@@ -0,0 +1,133 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 operatingHours = require('./operating-hours.cjs');
+var servicePointDisplay_styles = require('./service-point-display.styles.cjs');
+
+/* https://auctane.atlassian.net/browse/ENGINE-7329
+ * For iteration one we would hardcode services for which it will be available  (in the future this data will be in the registry. We will change hardcoding then)
+ * carriersWithPaperless and servicesWithPaperless are hardcoded for iteration one
+ */
+const carriersWithPaperless = "hermes";
+const servicesWithPaperless = ["hermes_domestic_parcelshop_dropoff", "hermes_domestic_parcelshop_dropoff_next_day", "hermes_postable", "hermes_postable_next_day"];
+const formatDistance = meters => {
+  return meters < 1000 ? "< 1 km" : `${parseFloat((meters / 1000).toFixed(1))} km`;
+};
+const ServicePointDisplay = ({
+  onViewMapClick,
+  servicePoint,
+  rateSelected,
+  mapViewEnabled: _mapViewEnabled = false,
+  showViewMapButton: _showViewMapButton = true
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation("purchase-label");
+  const [isFilteredServicesWithPaperless, setIsFilteredServicesWithPaperless] = React.useState(false);
+  /* https://auctane.atlassian.net/browse/ENGINE-7329
+   * For iteration one we would hardcode services for which it will be available  (in the future this data will be in the registry. We will change hardcoding then)
+   */
+  React.useEffect(() => {
+    if (carriersWithPaperless === servicePoint.carrierCode) {
+      const filteredServicesWithPaperless = servicePoint.serviceCodes.map(serviceCode => {
+        return servicesWithPaperless.filter(service => service === serviceCode);
+      }).length > 0;
+      setIsFilteredServicesWithPaperless(filteredServicesWithPaperless);
+    }
+  }, [servicePoint.carrierCode, servicePoint.serviceCodes]);
+  return jsxRuntime.jsxs("div", Object.assign({
+    css: servicePointDisplay_styles.styles.container
+  }, {
+    children: [isFilteredServicesWithPaperless && jsxRuntime.jsxs("section", Object.assign({
+      css: servicePointDisplay_styles.styles.paperlessWrapper
+    }, {
+      children: [jsxRuntime.jsx(giger.Icon, {
+        css: servicePointDisplay_styles.styles.paperlessIcon,
+        name: gigerTheme.IconNames.PRINTER,
+        size: giger.IconSize.SIZE_MEDIUM
+      }), jsxRuntime.jsx(giger.Icon, {
+        css: servicePointDisplay_styles.styles.paperlessIcon,
+        name: gigerTheme.IconNames.SCAN_QR,
+        size: giger.IconSize.SIZE_MEDIUM
+      }), jsxRuntime.jsx(giger.Typography, Object.assign({
+        css: servicePointDisplay_styles.styles.paperlessText,
+        variant: "small"
+      }, {
+        children: t("servicePoints.paperless")
+      }))]
+    })), jsxRuntime.jsx("div", Object.assign({
+      css: servicePointDisplay_styles.styles.getSelectedStyles()
+    }, {
+      children: jsxRuntime.jsx(giger.Typography, Object.assign({
+        bold: true,
+        css: {
+          whiteSpace: "nowrap"
+        }
+      }, {
+        children: servicePoint.companyName
+      }))
+    })), jsxRuntime.jsx(giger.Typography, {
+      children: `${servicePoint.addressLine1}, ${servicePoint.postalCode}`
+    }), jsxRuntime.jsx(operatingHours.OperatingHoursDisplay, {
+      hoursOfOperation: servicePoint.hoursOfOperation,
+      rateSelected: rateSelected
+    }), jsxRuntime.jsx("div", Object.assign({
+      css: servicePointDisplay_styles.styles.inlineWrapper
+    }, {
+      children: jsxRuntime.jsxs("div", Object.assign({
+        css: servicePointDisplay_styles.styles.inlineWrapper
+      }, {
+        children: [jsxRuntime.jsx(giger.Typography, {
+          children: formatDistance(servicePoint.distanceInMeters)
+        }), _showViewMapButton && !_mapViewEnabled ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+            "aria-hidden": "true"
+          }, {
+            children: "|"
+          })), jsxRuntime.jsx("a", Object.assign({
+            "aria-hidden": !rateSelected,
+            css: servicePointDisplay_styles.styles.viewMap,
+            href: `https://wego.here.com/discover/${encodeURIComponent(servicePoint.companyName)}%20${encodeURIComponent(servicePoint.addressLine1)},%20${encodeURIComponent(servicePoint.cityLocality)},%20${encodeURIComponent(servicePoint.postalCode)}?map=${servicePoint.lat},${servicePoint.long}`,
+            rel: "noreferrer",
+            target: "_blank"
+          }, {
+            children: jsxRuntime.jsx(giger.Typography, Object.assign({
+              "aria-hidden": !rateSelected
+            }, {
+              children: t("servicePoints.viewMap")
+            }))
+          }))]
+        }) : _mapViewEnabled && rateSelected && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+            "aria-hidden": "true"
+          }, {
+            children: "|"
+          })), jsxRuntime.jsx(giger.Link, Object.assign({
+            "aria-hidden": !rateSelected,
+            "aria-label": "View Map",
+            onClick: () => onViewMapClick === null || onViewMapClick === void 0 ? void 0 : onViewMapClick(servicePoint),
+            onKeyDown: e => {
+              if (e.key === "Enter") {
+                onViewMapClick === null || onViewMapClick === void 0 ? void 0 : onViewMapClick(servicePoint);
+              }
+            },
+            role: "button"
+          }, {
+            children: jsxRuntime.jsx(giger.Typography, {
+              children: t("servicePoints.viewMap")
+            })
+          }))]
+        })]
+      }))
+    }))]
+  }));
+};
+
+exports.ServicePointDisplay = ServicePointDisplay;
+exports.formatDistance = formatDistance;