55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
import { observer } from 'mobx-react-lite'
|
|
import { FunctionComponent } from 'react'
|
|
import { HistoryLockedIllustration } from '@standardnotes/icons'
|
|
import Button from '@/Components/Button/Button'
|
|
import { useApplication } from '../ApplicationProvider'
|
|
|
|
const getPlanHistoryDuration = (planName: string | undefined) => {
|
|
switch (planName) {
|
|
case 'Core':
|
|
return '30 days'
|
|
case 'Plus':
|
|
return '365 days'
|
|
default:
|
|
return "the current session's changes"
|
|
}
|
|
}
|
|
|
|
const getPremiumContentCopy = (planName: string | undefined) => {
|
|
return `Version history is limited to ${getPlanHistoryDuration(planName)} in the ${planName} plan`
|
|
}
|
|
|
|
const RevisionContentLocked: FunctionComponent = () => {
|
|
const application = useApplication()
|
|
|
|
let planName = 'free'
|
|
if (application.subscriptions.hasOnlineSubscription()) {
|
|
if (!application.subscriptions.isUserSubscriptionCanceled && !application.subscriptions.isUserSubscriptionExpired) {
|
|
planName = application.subscriptions.userSubscriptionName
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center">
|
|
<div className="max-w-40% flex flex-col items-center px-8 text-center">
|
|
<HistoryLockedIllustration />
|
|
<div className="mt-2 mb-1 text-lg font-bold">Can't access this version</div>
|
|
<div className="leading-140% mb-4 text-passive-0">
|
|
{getPremiumContentCopy(planName)}. Learn more about our other plans to upgrade your history capacity.
|
|
</div>
|
|
<Button
|
|
primary
|
|
label="Discover plans"
|
|
onClick={() => {
|
|
if (window.plansUrl) {
|
|
window.location.assign(window.plansUrl)
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default observer(RevisionContentLocked)
|