import { useCallback, useState, ReactNode } from 'react' import { useTranslation } from 'react-i18next' import AccessibleModal from '../../../../shared/components/accessible-modal' import { Button, Modal } from 'react-bootstrap' import getMeta from '../../../../utils/meta' type IntegrationLinkingWidgetProps = { logo: ReactNode title: string description: string helpPath: string hasFeature?: boolean statusIndicator?: ReactNode linked?: boolean linkPath: string unlinkPath: string unlinkConfirmationTitle: string unlinkConfirmationText: string disabled?: boolean } export function IntegrationLinkingWidget({ logo, title, description, helpPath, hasFeature, statusIndicator, linked, linkPath, unlinkPath, unlinkConfirmationTitle, unlinkConfirmationText, disabled, }: IntegrationLinkingWidgetProps) { const { t } = useTranslation() const [showModal, setShowModal] = useState(false) const handleUnlinkClick = useCallback(() => { setShowModal(true) }, []) const handleModalHide = useCallback(() => { setShowModal(false) }, []) return (
{logo}

{title}

{!hasFeature && ( {t('premium_feature')} )}

{description}{' '} {t('learn_more')}

{hasFeature && statusIndicator}
) } type ActionButtonProps = { hasFeature?: boolean upgradePath: string linked?: boolean handleUnlinkClick: () => void linkPath: string disabled?: boolean } function ActionButton({ hasFeature, upgradePath, linked, handleUnlinkClick, linkPath, disabled, }: ActionButtonProps) { const { t } = useTranslation() if (!hasFeature) { return ( {t('upgrade')} ) } else if (linked) { return ( ) } else { return ( {t('link')} ) } } type UnlinkConfirmModalProps = { show: boolean title: string content: string unlinkPath: string handleHide: () => void } function UnlinkConfirmationModal({ show, title, content, unlinkPath, handleHide, }: UnlinkConfirmModalProps) { const { t } = useTranslation() const handleCancel = event => { event.preventDefault() handleHide() } return ( {title}

{content}

) }