50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
import { FeatureStatus } from '@standardnotes/snjs'
|
|
import { FunctionComponent } from 'react'
|
|
import Button from '@/Components/Button/Button'
|
|
import IndicatorCircle from '../IndicatorCircle/IndicatorCircle'
|
|
|
|
type Props = {
|
|
expiredDate: string
|
|
componentName: string
|
|
featureStatus: FeatureStatus
|
|
manageSubscription: () => void
|
|
}
|
|
|
|
const statusString = (featureStatus: FeatureStatus, expiredDate: string, componentName: string) => {
|
|
switch (featureStatus) {
|
|
case FeatureStatus.InCurrentPlanButExpired:
|
|
return `Your subscription expired on ${expiredDate}`
|
|
case FeatureStatus.NoUserSubscription:
|
|
return 'You do not have an active subscription'
|
|
case FeatureStatus.NotInCurrentPlan:
|
|
return `Please upgrade your plan to access ${componentName}`
|
|
default:
|
|
return `${componentName} is valid and you should not be seeing this message`
|
|
}
|
|
}
|
|
|
|
const IsExpired: FunctionComponent<Props> = ({ expiredDate, featureStatus, componentName, manageSubscription }) => {
|
|
return (
|
|
<div className={'sn-component'}>
|
|
<div className="flex min-h-[1.625rem] w-full select-none items-center justify-between border-b border-border bg-contrast py-2.5 px-2 text-text">
|
|
<div className={'left'}>
|
|
<div className="flex items-center">
|
|
<IndicatorCircle style="danger" />
|
|
<div className="ml-2">
|
|
<strong>{statusString(featureStatus, expiredDate, componentName)}</strong>
|
|
<div className={'sk-p'}>{componentName} is in a read-only state.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={'right'}>
|
|
<Button onClick={manageSubscription} primary colorStyle="success" small>
|
|
Manage subscription
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default IsExpired
|