// @flow import Tooltip from '@atlaskit/tooltip'; import React, { useState } from 'react'; import { translate } from '../../../../base/i18n'; import { Icon, IconArrowDownSmall, IconCopy, IconEmail, IconGoogle, IconOutlook, IconYahoo } from '../../../../base/icons'; import { openURLInBrowser } from '../../../../base/util'; import { copyText } from './utils'; type Props = { /** * The encoded invitation subject. */ inviteSubject: string, /** * The encoded invitation text to be sent. */ inviteText: string, /** * Invoked to obtain translated strings. */ t: Function, }; /** * Component that renders email invite options. * * @returns {React$Element} */ function InviteByEmailSection({ inviteSubject, inviteText, t }: Props) { const [ isActive, setIsActive ] = useState(false); const encodedInviteSubject = encodeURIComponent(inviteSubject); const encodedInviteText = encodeURIComponent(inviteText); /** * Copies the conference invitation to the clipboard. * * @returns {void} */ function _onCopyText() { copyText(inviteText); } /** * Opens an email provider containing the conference invite. * * @param {string} url - The url to be opened. * @returns {Function} */ function _onSelectProvider(url) { return function() { openURLInBrowser(url, true); }; } /** * Toggles the email invite drawer. * * @returns {void} */ function _onToggleActiveState() { setIsActive(!isActive); } /** * Renders clickable elements that each open an email client * containing a conference invite. * * @returns {React$Element} */ function renderEmailIcons() { const PROVIDER_MAPPING = [ { icon: IconEmail, tooltipKey: 'addPeople.defaultEmail', url: `mailto:?subject=${encodedInviteSubject}&body=${encodedInviteText}` }, { icon: IconGoogle, tooltipKey: 'addPeople.googleEmail', url: `https://mail.google.com/mail/?view=cm&fs=1&su=${encodedInviteSubject}&body=${encodedInviteText}` }, { icon: IconOutlook, tooltipKey: 'addPeople.outlookEmail', // eslint-disable-next-line max-len url: `https://outlook.office.com/mail/deeplink/compose?subject=${encodedInviteSubject}&body=${encodedInviteText}` }, { icon: IconYahoo, tooltipKey: 'addPeople.yahooEmail', url: `https://compose.mail.yahoo.com/?To=&Subj=${encodedInviteSubject}&Body=${encodedInviteText}` } ]; return ( <> { PROVIDER_MAPPING.map(({ icon, tooltipKey, url }, idx) => (
)) } ); } return ( <>
{t('addPeople.shareInvite')}
{renderEmailIcons()}
); } export default translate(InviteByEmailSection);