57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import { observer } from 'mobx-react-lite'
|
|
import { FunctionComponent } from 'react'
|
|
import { HistoryLockedIllustration } from '@standardnotes/icons'
|
|
import Button from '@/Components/Button/Button'
|
|
import { SubscriptionController } from '@/Controllers/Subscription/SubscriptionController'
|
|
|
|
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`
|
|
}
|
|
|
|
type Props = {
|
|
subscriptionController: SubscriptionController
|
|
}
|
|
|
|
const RevisionContentLocked: FunctionComponent<Props> = ({ subscriptionController }) => {
|
|
const { userSubscriptionName, isUserSubscriptionExpired, isUserSubscriptionCanceled } = subscriptionController
|
|
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center">
|
|
<div className="max-w-40% flex flex-col items-center 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(
|
|
!isUserSubscriptionCanceled && !isUserSubscriptionExpired && userSubscriptionName
|
|
? userSubscriptionName
|
|
: 'free',
|
|
)}
|
|
. 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)
|