149 lines
4.3 KiB
JavaScript
149 lines
4.3 KiB
JavaScript
import {
|
|
useContext,
|
|
createElement,
|
|
useState,
|
|
Fragment,
|
|
} from '@wordpress/element'
|
|
import { Overlay } from 'blocksy-options'
|
|
import { __, sprintf } from 'ct-i18n'
|
|
|
|
const plans = {
|
|
free: __('Free', 'blocksy-companion'),
|
|
|
|
personal: __('Personal', 'blocksy-companion'),
|
|
professional: __('Business', 'blocksy-companion'),
|
|
agency: __('Agency', 'blocksy-companion'),
|
|
|
|
personal_v2: __('Personal', 'blocksy-companion'),
|
|
professional_v2: __('Business', 'blocksy-companion'),
|
|
agency_v2: __('Agency', 'blocksy-companion'),
|
|
}
|
|
|
|
const useUpsellModal = ({
|
|
currentPlan = 'free',
|
|
requiredPlan = 'personal',
|
|
|
|
personal = {
|
|
title: __('This is a Pro feature', 'blocksy-companion'),
|
|
description: __(
|
|
'Upgrade to any pro plan and get instant access to this and many other feature.',
|
|
'blocksy-companion'
|
|
),
|
|
},
|
|
|
|
professional = {
|
|
description: __(
|
|
'Upgrade to the business or agency plan and get instant access to this and many other features.',
|
|
'blocksy-companion'
|
|
),
|
|
},
|
|
|
|
agency = {
|
|
description: __(
|
|
'Upgrade to the agency plan and get instant access to this and many other features.',
|
|
'blocksy-companion'
|
|
),
|
|
},
|
|
} = {}) => {
|
|
const [isDisplayed, setIsDisplayed] = useState(false)
|
|
|
|
const content = (
|
|
<Overlay
|
|
items={isDisplayed}
|
|
className="ct-onboarding-modal"
|
|
onDismiss={() => setIsDisplayed(false)}
|
|
render={() => (
|
|
<div className="ct-modal-content">
|
|
<svg width="55" height="55" viewBox="0 0 40.5 48.3">
|
|
<path
|
|
fill="#2d82c8"
|
|
d="M33.4 29.4l7.1 12.3-7.4.6-4 6-7.3-12.9"
|
|
/>
|
|
<path
|
|
d="M33.5 29.6L26 42.7l-4.2-7.3 11.6-6 .1.2zM0 41.7l7.5.6 3.9 6 7.2-12.4-11-7.3L0 41.7z"
|
|
fill="#2271b1"
|
|
/>
|
|
<path
|
|
d="M39.5 18.7c0 1.6-2.4 2.8-2.7 4.3-.4 1.5 1 3.8.2 5.1-.8 1.3-3.4 1.2-4.5 2.3-1.1 1.1-1 3.7-2.3 4.5-1.3.8-3.6-.6-5.1-.2-1.5.4-2.7 2.7-4.3 2.7S18 35 16.5 34.7c-1.5-.4-3.8 1-5.1.2s-1.2-3.4-2.3-4.5-3.7-1-4.5-2.3.6-3.6.2-5.1-2.7-2.7-2.7-4.3 2.4-2.8 2.7-4.3c.4-1.5-1-3.8-.2-5.1C5.4 8 8.1 8.1 9.1 7c1.1-1.1 1-3.7 2.3-4.5s3.6.6 5.1.2C18 2.4 19.2 0 20.8 0c1.6 0 2.8 2.4 4.3 2.7 1.5.4 3.8-1 5.1-.2 1.3.8 1.2 3.4 2.3 4.5 1.1 1.1 3.7 1 4.5 2.3s-.6 3.6-.2 5.1c.3 1.5 2.7 2.7 2.7 4.3z"
|
|
fill="#599fd9"
|
|
/>
|
|
<path
|
|
d="M23.6 7c-6.4-1.5-12.9 2.5-14.4 8.9-.7 3.1-.2 6.3 1.5 9.1 1.7 2.7 4.3 4.6 7.4 5.4.9.2 1.9.3 2.8.3 2.2 0 4.4-.6 6.3-1.8 2.7-1.7 4.6-4.3 5.4-7.5C34 15 30 8.5 23.6 7zm7 14c-.6 2.6-2.2 4.8-4.5 6.2-2.3 1.4-5 1.8-7.6 1.2-2.6-.6-4.8-2.2-6.2-4.5-1.4-2.3-1.8-5-1.2-7.6.6-2.6 2.2-4.8 4.5-6.2 1.6-1 3.4-1.5 5.2-1.5.8 0 1.5.1 2.3.3 5.4 1.3 8.7 6.7 7.5 12.1zm-8.2-4.5l3.7.5-2.7 2.7.7 3.7-3.4-1.8-3.3 1.8.6-3.7-2.7-2.7 3.8-.5 1.6-3.4 1.7 3.4z"
|
|
fill="#fff"
|
|
/>
|
|
</svg>
|
|
|
|
{requiredPlan === 'personal' && (
|
|
<Fragment>
|
|
<h2 className="ct-modal-title">{personal.title}</h2>
|
|
<p>{personal.description}</p>
|
|
</Fragment>
|
|
)}
|
|
|
|
{requiredPlan === 'professional' && (
|
|
<Fragment>
|
|
<span>Required plan</span>
|
|
|
|
<h2 className="ct-modal-title">
|
|
{__('Business or Agency', 'blocksy-companion')}
|
|
</h2>
|
|
|
|
<p>{professional.description}</p>
|
|
</Fragment>
|
|
)}
|
|
|
|
{requiredPlan === 'agency' && (
|
|
<Fragment>
|
|
<span>Required plan</span>
|
|
|
|
<h2 className="ct-modal-title">
|
|
{__('Agency', 'blocksy-companion')}
|
|
</h2>
|
|
|
|
<p>{agency.description}</p>
|
|
</Fragment>
|
|
)}
|
|
|
|
<div
|
|
className="ct-modal-actions has-divider"
|
|
data-buttons="2">
|
|
<a
|
|
href={
|
|
ctDashboardLocalizations.plugin_data
|
|
? ctDashboardLocalizations.plugin_data
|
|
.modal_links['compare-plans']
|
|
: 'https://creativethemes.com/blocksy/pricing/#comparison-free-vs-pro'
|
|
}
|
|
target="_blank"
|
|
className="button">
|
|
{__('Compare Plans', 'blocksy-companion')}
|
|
</a>
|
|
|
|
<a
|
|
href={
|
|
ctDashboardLocalizations.plugin_data.modal_links
|
|
? ctDashboardLocalizations.plugin_data
|
|
.modal_links.pricing
|
|
: 'https://creativethemes.com/blocksy/pricing/'
|
|
}
|
|
target="_blank"
|
|
className="button button-primary">
|
|
{__('Upgrade Now', 'blocksy-companion')}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
/>
|
|
)
|
|
|
|
return {
|
|
showNotice: (requiredPlan) => {
|
|
setIsDisplayed(requiredPlan || true)
|
|
},
|
|
|
|
content,
|
|
}
|
|
}
|
|
|
|
export default useUpsellModal
|