import React, { memo } from 'react'; import { string, number, object } from 'prop-types'; import { trackGoogleEvent } from '../../analytics/google'; import { runtimeConfig } from '../../config'; import { trackUmamiEvent } from '../../analytics/umami'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { trackMatomoEvent } from '../../analytics/matomo'; function Button(props) { const { name, href, displayName, logo, styles, alt, icon } = props; const handleClick = () => { const eventName = `${name}-button`; if (runtimeConfig?.GA_TRACKING_ID) { trackGoogleEvent(eventName); } if (runtimeConfig?.UMAMI_WEBSITE_ID && runtimeConfig?.UMAMI_APP_URL) { trackUmamiEvent(eventName); } if (runtimeConfig?.MATOMO_SITE_ID && runtimeConfig?.MATOMO_URL) { trackMatomoEvent(eventName); } }; return ( <> <a className={styles ? 'button' : `button button-${name}`} href={href} target={runtimeConfig?.BUTTON_TARGET || '_blank'} rel="noopener noreferrer" onClick={handleClick} style={styles ? styles : undefined} title={alt || displayName} > {logo && ( <img className="icon" src={logo} alt={`${displayName} logo`} /> )} {icon && <FontAwesomeIcon className="icon" icon={icon.split(' ')} />} {displayName} </a> </> ); } export default memo(Button); Button.propType = { src: string.isRequired, alt: string.isRequired, displayName: string.isRequired, href: string.isRequired, name: string.isRequired, order: number.isRequired, logo: string, icon: string, styles: object, };