overleaf/services/web/frontend/js/features/settings/components/linking/enable-widget.tsx
Tim Down 29837ec838 Merge pull request #18733 from overleaf/td-bs5-button-props
Simplify handling of BS3 props in button wrapper component

GitOrigin-RevId: 12a6b1374da5084e075775f3cef23f0b24d098fc
2024-06-07 08:04:24 +00:00

126 lines
2.8 KiB
TypeScript

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 (
<div className="settings-widget-container">
<div>{logo}</div>
<div className="description-container">
<div className="title-row">
<h4>{title}</h4>
{!hasFeature && isPremiumFeature && (
<OLBadge bg="info">{t('premium_feature')}</OLBadge>
)}
</div>
<p className="small">
{description}{' '}
<a href={helpPath} target="_blank" rel="noreferrer">
{helpText}
</a>
</p>
{children}
{hasFeature && statusIndicator}
</div>
<div>
<ActionButton
hasFeature={hasFeature}
linked={linked}
handleUnlinkClick={handleUnlinkClick}
handleLinkClick={handleLinkClick}
disabled={disabled}
/>
</div>
</div>
)
}
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 (
<OLButton
variant="primary"
href="/user/subscription/plans"
onClick={trackUpgradeClick}
>
<span className="text-capitalize">{t('upgrade')}</span>
</OLButton>
)
} else if (linked) {
return (
<OLButton
variant="danger-ghost"
onClick={handleUnlinkClick}
disabled={disabled}
>
{t('turn_off')}
</OLButton>
)
} else {
return (
<OLButton
variant="secondary"
disabled={disabled}
onClick={handleLinkClick}
>
{t('turn_on')}
</OLButton>
)
}
}
export default EnableWidget