import { ReactNode } from 'react' import { useTranslation } from 'react-i18next' import { sendMB } from '@/infrastructure/event-tracking' import OLBadge from '@/features/ui/components/ol/ol-badge' import OLButton from '@/features/ui/components/ol/ol-button' function trackUpgradeClick() { sendMB('settings-upgrade-click') } type EnableWidgetProps = { logo: ReactNode title: string description: string helpPath: string helpTextOverride?: string hasFeature?: boolean isPremiumFeature?: boolean statusIndicator?: ReactNode children?: ReactNode linked?: boolean handleLinkClick: () => void handleUnlinkClick: () => void disabled?: boolean } export function EnableWidget({ logo, title, description, helpPath, helpTextOverride, hasFeature, isPremiumFeature, statusIndicator, linked, handleLinkClick, handleUnlinkClick, children, disabled, }: EnableWidgetProps) { const { t } = useTranslation() const helpText = helpTextOverride || t('learn_more') return (
{logo}

{title}

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

{description}{' '} {helpText}

{children} {hasFeature && statusIndicator}
) } type ActionButtonProps = { hasFeature?: boolean linked?: boolean handleUnlinkClick: () => void handleLinkClick: () => void disabled?: boolean } function ActionButton({ linked, handleUnlinkClick, handleLinkClick, hasFeature, disabled, }: ActionButtonProps) { const { t } = useTranslation() if (!hasFeature) { return ( {t('upgrade')} ) } else if (linked) { return ( {t('turn_off')} ) } else { return ( {t('turn_on')} ) } } export default EnableWidget