52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
import { FeatureStatus } from '@standardnotes/snjs'
|
|
import { FunctionComponent } from 'react'
|
|
|
|
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={'sk-app-bar no-edges no-top-edge dynamic-height'}>
|
|
<div className={'left'}>
|
|
<div className={'sk-app-bar-item'}>
|
|
<div className={'sk-app-bar-item-column'}>
|
|
<div className={'sk-circle danger small'} />
|
|
</div>
|
|
<div className={'sk-app-bar-item-column'}>
|
|
<div>
|
|
<strong>{statusString(featureStatus, expiredDate, componentName)}</strong>
|
|
<div className={'sk-p'}>{componentName} is in a read-only state.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={'right'}>
|
|
<div className={'sk-app-bar-item'} onClick={() => manageSubscription()}>
|
|
<button className={'sn-button small success'}>Manage Subscription</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default IsExpired
|