@shopgate/engage
Version:
Shopgate's ENGAGE library.
62 lines (61 loc) • 2.49 kB
JavaScript
import React, { Fragment, useMemo } from 'react';
import PropTypes from 'prop-types';
import { i18n, generateGoogleMapsDirectionsUrl } from '@shopgate/engage/core';
import { LocationIcon, Link, Ellipsis, I18n } from '@shopgate/engage/components';
import { StoreDetailsLine } from "./StoreDetailsLine";
import { detailsPrimary, detailsSecondary } from "./Store.style";
/**
* Renders the pickup location's address information.
* @param {Object} props The component props.
* @param {Object} props.address The address object.
* @param {boolean} props.showFull Whether to show the full address.
* @returns {JSX.Element}
*/
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export function StoreAddressShort({
address,
showFull
}) {
const mapsUrl = useMemo(() => address && generateGoogleMapsDirectionsUrl(address), [address]);
if (!address) {
return null;
}
const addressLabel = `${address.street + (address.street2 ? `, ${address.street2}` : '') + (address.street3 ? `, ${address.street3}` : '') + (address.street4 ? `, ${address.street4}` : '') + i18n.text('locations.address', address)}: ${i18n.text('locations.map_open')}`;
return /*#__PURE__*/_jsx(Link, {
target: "_blank",
href: mapsUrl,
role: "button",
"aria-label": addressLabel,
children: /*#__PURE__*/_jsxs(StoreDetailsLine, {
icon: LocationIcon,
linked: true,
children: [showFull && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx("p", {
className: detailsPrimary,
children: address.street
}), address.street2 && address.street2 !== '' && /*#__PURE__*/_jsx("p", {
className: detailsPrimary,
children: address.street2
}), address.street3 && address.street3 !== '' && /*#__PURE__*/_jsx("p", {
className: detailsPrimary,
children: address.street3
}), address.street4 && address.street4 !== '' && /*#__PURE__*/_jsx("p", {
className: detailsPrimary,
children: address.street4
})]
}), /*#__PURE__*/_jsx(Ellipsis, {
rows: 1,
className: detailsPrimary,
children: i18n.text('locations.address', address)
}), /*#__PURE__*/_jsx(I18n.Text, {
string: "locations.map_open",
className: detailsSecondary,
"aria-label": `: ${i18n.text('locations.map_open')}`
})]
})
});
}
StoreAddressShort.defaultProps = {
address: null,
showFull: false
};