@shopgate/engage/locations/components/StoreFinder/StoreFinderGetDirectionsButton.js

Shopgate's ENGAGE library.

import React, { useMemo, useCallback } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { i18n, generateGoogleMapsDirectionsUrl } from '@shopgate/engage/core';
import { RippleButton } from '@shopgate/engage/components';
import { container, button } from "./StoreFinderGetDirectionsButton.style";
import connect from "./StoreFinderGetDirectionsButton.connector";

/**
 * @param {Object} props The component props
 * @returns {JSX}
 */
import { jsx as _jsx } from "react/jsx-runtime";
const StoreFinderGetDirectionsButton = ({
  address,
  openMap,
  className
}) => {
  const url = useMemo(() => address && generateGoogleMapsDirectionsUrl(address), [address]);
  const handleClick = useCallback(() => {
    openMap(url);
  }, [openMap, url]);
  if (!address) {
    return null;
  }
  return /*#__PURE__*/_jsx("div", {
    className: classNames(container, className),
    children: /*#__PURE__*/_jsx(RippleButton, {
      onClick: handleClick,
      className: button,
      children: i18n.text('locations.get_directions')
    })
  });
};
StoreFinderGetDirectionsButton.defaultProps = {
  address: null,
  openMap: () => {},
  className: null
};
export default connect(StoreFinderGetDirectionsButton);