140 lines
4.0 KiB
TypeScript
140 lines
4.0 KiB
TypeScript
import React, { Dispatch, SetStateAction, useState } from 'react'
|
|
import { ExternalLink, Modal } from '@wordpress/components'
|
|
import { __, _n, sprintf } from '@wordpress/i18n'
|
|
|
|
export interface UpgradeDialogProps {
|
|
isOpen: boolean
|
|
setIsOpen: Dispatch<SetStateAction<boolean>>
|
|
}
|
|
|
|
const SMALL_PLAN_SITES = '2'
|
|
const MID_PLAN_SITES = '6'
|
|
const LARGE_PLAN_SITES = '200'
|
|
|
|
const upgradePlanCosts: Record<string, number> = {
|
|
[SMALL_PLAN_SITES]: 39,
|
|
[MID_PLAN_SITES]: 69,
|
|
[LARGE_PLAN_SITES]: 119
|
|
}
|
|
|
|
const UpgradeDialogPlans = () => {
|
|
const [currentPlan, setCurrentPlan] = useState(MID_PLAN_SITES)
|
|
|
|
return (
|
|
<>
|
|
<p><strong>{__('How many websites do you plan to use Code Snippets on?', 'code-snippets')}</strong></p>
|
|
<p>{__('We offer three distinct plans, each tailored to meet your needs.', 'code-snippets')}</p>
|
|
|
|
<p className="upgrade-plans">
|
|
{Object.keys(upgradePlanCosts).map(planSites =>
|
|
<label key={`${planSites}-sites`}>
|
|
<input
|
|
type="radio"
|
|
checked={planSites === currentPlan.toString()}
|
|
onClick={() => setCurrentPlan(planSites)}
|
|
/>
|
|
{' '}
|
|
{sprintf(_n('%d site', '%d sites', Number(planSites), 'code-snippets'), planSites)}
|
|
</label>
|
|
)}
|
|
</p>
|
|
|
|
<p className="action-buttons">
|
|
<span className="current-plan-cost">
|
|
{sprintf(__('$%s per year', 'code-snippets'), upgradePlanCosts[currentPlan])}
|
|
</span>
|
|
|
|
<ExternalLink
|
|
className="button button-primary button-large"
|
|
href={`https://checkout.freemius.com/mode/dialog/plugin/10565/plan/17873/licenses/${currentPlan}/`}
|
|
>
|
|
{__('Upgrade Now', 'code-snippets')}
|
|
</ExternalLink>
|
|
</p>
|
|
</>
|
|
)
|
|
}
|
|
|
|
interface UpgradeInfoProps {
|
|
nextTab: VoidFunction
|
|
}
|
|
|
|
const UpgradeInfo: React.FC<UpgradeInfoProps> = ({ nextTab }) =>
|
|
<>
|
|
<p>
|
|
{__('You are using the free version of Code Snippets.', 'code-snippets')}{' '}
|
|
{__('Upgrade to Code Snippets Pro to unleash its full potential:', 'code-snippets')}
|
|
<ul>
|
|
<li>
|
|
<strong>{__('CSS stylesheet snippets: ', 'code-snippets')}</strong>
|
|
{__('Craft impeccable websites with advanced CSS snippets.', 'code-snippets')}
|
|
</li>
|
|
<li>
|
|
<strong>{__('JavaScript snippets: ', 'code-snippets')}</strong>
|
|
{__('Enhance user interaction with the power of JavaScript.', 'code-snippets')}
|
|
</li>
|
|
<li>
|
|
<strong>{__('Specialized Elementor widgets: ', 'code-snippets')}</strong>
|
|
{__('Easily customize your site with Elementor widgets.', 'code-snippets')}
|
|
</li>
|
|
<li>
|
|
<strong>{__('Integration with block editor: ', 'code-snippets')}</strong>
|
|
{__('Seamlessly incorporate your snippets within the block editor.', 'code-snippets')}
|
|
</li>
|
|
<li>
|
|
<strong>{__('WP-CLI snippet commands: ', 'code-snippets')}</strong>
|
|
{__('Access and control your snippets directly from the command line.', 'code-snippets')}
|
|
</li>
|
|
<li>
|
|
<strong>{__('Premium support: ', 'code-snippets')}</strong>
|
|
{__("Direct access to our team. We're happy to help!", 'code-snippets')}
|
|
</li>
|
|
</ul>
|
|
|
|
{__('…and so much more!', 'code-snippets')}
|
|
</p>
|
|
|
|
<p className="action-buttons">
|
|
<ExternalLink
|
|
className="button button-secondary"
|
|
href="https://codesnippets.pro/pricing/"
|
|
>
|
|
{__('Learn More', 'code-snippets')}
|
|
</ExternalLink>
|
|
|
|
<button
|
|
className="button button-primary button-large"
|
|
onClick={nextTab}
|
|
>
|
|
{__('See Plans', 'code-snippets')}
|
|
<span className="dashicons dashicons-arrow-right"></span>
|
|
</button>
|
|
</p>
|
|
</>
|
|
|
|
export const UpgradeDialog: React.FC<UpgradeDialogProps> = ({ isOpen, setIsOpen }) => {
|
|
const [currentTab, setCurrentTab] = useState(0)
|
|
|
|
return isOpen ?
|
|
<Modal
|
|
title=""
|
|
className="code-snippets-upgrade-dialog"
|
|
onRequestClose={() => {
|
|
setIsOpen(false)
|
|
setCurrentTab(0)
|
|
}}
|
|
>
|
|
<h1 className="logo">
|
|
<img src={`${window.CODE_SNIPPETS?.urls.plugin}/assets/icon.svg`} alt="" />
|
|
{__('Code Snippets Pro', 'code-snippets')}
|
|
</h1>
|
|
|
|
{0 === currentTab ?
|
|
<UpgradeInfo nextTab={() => setCurrentTab(1)} /> :
|
|
<UpgradeDialogPlans />
|
|
}
|
|
|
|
</Modal> :
|
|
null
|
|
}
|