mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-24 21:12:38 -04:00
Simplify handling of BS3 props in button wrapper component GitOrigin-RevId: 12a6b1374da5084e075775f3cef23f0b24d098fc
126 lines
2.8 KiB
TypeScript
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
|