@shopgate/engage/locations/components/StoreList/StorePhoneNumber.js

Shopgate's ENGAGE library.

import React from 'react';
import PropTypes from 'prop-types';
import { I18n, PhoneIcon } from '@shopgate/engage/components';
import { i18n } from '@shopgate/engage/core';
import { StoreDetailsLine } from "./StoreDetailsLine";
import { detailsPrimary, detailsSecondary } from "./Store.style";

/**
 * Renders the store's phone number.
 * @param {Object} props The component props.
 * @param {string} props.phone The store's phone number.
 * @returns {JSX.Element}
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function StorePhoneNumber({
  phone
}) {
  if (!phone) {
    return null;
  }
  return /*#__PURE__*/_jsx("a", {
    href: `tel:${phone}`,
    "aria-label": `${i18n.text('locations.phone')}: ${phone}`,
    tabIndex: 0,
    children: /*#__PURE__*/_jsxs(StoreDetailsLine, {
      icon: PhoneIcon,
      linked: true,
      children: [/*#__PURE__*/_jsx("div", {
        className: detailsPrimary,
        "aria-hidden": true,
        children: phone
      }), /*#__PURE__*/_jsx(I18n.Text, {
        string: "locations.phone",
        className: detailsSecondary,
        "aria-hidden": true
      })]
    })
  });
}
StorePhoneNumber.defaultProps = {
  phone: null
};