import { useCallback, useState } from 'react' import { useTranslation } from 'react-i18next' import { Button, Modal } from 'react-bootstrap' import AccessibleModal from '../../../../shared/components/accessible-modal' import IEEELogo from '../../../../shared/svgs/ieee-logo' import GoogleLogo from '../../../../shared/svgs/google-logo' import OrcidLogo from '../../../../shared/svgs/orcid-logo' const providerLogos = { collabratec: , google: , orcid: , } type SSOLinkingWidgetProps = { providerId: string title: string description: string helpPath?: string linked?: boolean linkPath: string onUnlink: () => Promise } export function SSOLinkingWidget({ providerId, title, description, helpPath, linked, linkPath, onUnlink, }: SSOLinkingWidgetProps) { const { t } = useTranslation() const [showModal, setShowModal] = useState(false) const [unlinkRequestInflight, setUnlinkRequestInflight] = useState(false) const [errorMessage, setErrorMessage] = useState('') const handleUnlinkClick = useCallback(() => { setShowModal(true) }, []) const handleUnlinkConfirmationClick = useCallback(() => { setShowModal(false) setUnlinkRequestInflight(true) onUnlink() .catch((error: Error) => { setErrorMessage(error.message) }) .finally(() => { setUnlinkRequestInflight(false) }) }, [onUnlink]) const handleModalHide = useCallback(() => { setShowModal(false) }, []) return (
{providerLogos[providerId]}

{title}

{description?.replace(/<[^>]+>/g, '')}{' '} {helpPath ? ( {t('learn_more')} ) : null}

{errorMessage &&
{errorMessage}
}
) } type ActionButtonProps = { unlinkRequestInflight: boolean accountIsLinked?: boolean linkPath: string onUnlinkClick: () => void } function ActionButton({ unlinkRequestInflight, accountIsLinked, linkPath, onUnlinkClick, }: ActionButtonProps) { const { t } = useTranslation() if (unlinkRequestInflight) { return ( ) } else if (accountIsLinked) { return ( ) } else { return ( {t('link')} ) } } type UnlinkConfirmModalProps = { title: string show: boolean handleConfirmation: () => void handleHide: () => void } function UnlinkConfirmModal({ title, show, handleConfirmation, handleHide, }: UnlinkConfirmModalProps) { const { t } = useTranslation() return ( {t('unlink_provider_account_title', { provider: title })}

{t('unlink_provider_account_warning', { provider: title })}

) }