91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
import { AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
|
|
import { useCallback } from 'react'
|
|
import { WebApplication } from '@/Application/Application'
|
|
import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
|
|
import Icon from '@/Components/Icon/Icon'
|
|
import { PremiumFeatureIconClass, PremiumFeatureIconName } from '@/Components/Icon/PremiumFeatureIcon'
|
|
|
|
export const UpgradePrompt = ({
|
|
featureName,
|
|
ctaRef,
|
|
application,
|
|
hasSubscription,
|
|
onClose,
|
|
}: {
|
|
featureName?: string
|
|
ctaRef: React.RefObject<HTMLButtonElement>
|
|
application: WebApplication
|
|
hasSubscription: boolean
|
|
onClose: () => void
|
|
}) => {
|
|
const handleClick = useCallback(() => {
|
|
if (hasSubscription) {
|
|
void openSubscriptionDashboard(application)
|
|
} else {
|
|
void application.openPurchaseFlow()
|
|
}
|
|
onClose()
|
|
}, [application, hasSubscription, onClose])
|
|
|
|
return (
|
|
<>
|
|
<AlertDialogLabel>
|
|
<div className="flex justify-end p-1">
|
|
<button
|
|
className="flex cursor-pointer border-0 bg-transparent p-0"
|
|
onClick={onClose}
|
|
aria-label="Close modal"
|
|
>
|
|
<Icon className="text-neutral" type="close" />
|
|
</button>
|
|
</div>
|
|
<div
|
|
className="mx-auto mb-5 flex h-24 w-24 items-center justify-center rounded-[50%] bg-contrast"
|
|
aria-hidden={true}
|
|
>
|
|
<Icon className={`h-12 w-12 ${PremiumFeatureIconClass}`} size={'custom'} type={PremiumFeatureIconName} />
|
|
</div>
|
|
<div className="mb-1 text-center text-lg font-bold">Enable Advanced Features</div>
|
|
</AlertDialogLabel>
|
|
<AlertDialogDescription className="mb-2 px-4.5 text-center text-sm text-passive-1">
|
|
{featureName && (
|
|
<span>
|
|
To take advantage of <span className="font-semibold">{featureName}</span> and other advanced features,
|
|
upgrade your current plan.
|
|
</span>
|
|
)}
|
|
{!featureName && (
|
|
<span>
|
|
To take advantage of all the advanced features Standard Notes has to offer, upgrade your current plan.
|
|
</span>
|
|
)}
|
|
{application.isNativeIOS() && (
|
|
<div className="mt-2">
|
|
<div className="mb-2 font-bold">The Professional Plan costs $119.99/year and includes benefits like</div>
|
|
<ul className="list-inside list-[circle]">
|
|
<li>100GB encrypted file storage</li>
|
|
<li>
|
|
Access to all note types, including Super, markdown, rich text, authenticator, tasks, and spreadsheets
|
|
</li>
|
|
<li>Access to Daily Notebooks and Moments journals</li>
|
|
<li>Note history going back indefinitely</li>
|
|
<li>Nested folders for your tags</li>
|
|
<li>Premium support</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</AlertDialogDescription>
|
|
|
|
<div className="p-4">
|
|
<button
|
|
onClick={handleClick}
|
|
className="no-border w-full cursor-pointer rounded bg-info py-2 font-bold text-info-contrast hover:brightness-125 focus:brightness-125"
|
|
ref={ctaRef}
|
|
>
|
|
{application.isNativeIOS() ? 'Start Free Trial' : 'Upgrade'}
|
|
</button>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|