| 1 |
import React from 'react' |
| 2 |
import { __ } from '@wordpress/i18n' |
| 3 |
import { Button } from '../Button' |
| 4 |
import type { ReactNode } from 'react' |
| 5 |
|
| 6 |
const PRICING_URL = 'https://codesnippets.pro/pricing/' |
| 7 |
|
| 8 |
export interface DemoUpsellProps { |
| 9 |
title: string |
| 10 |
children: ReactNode |
| 11 |
onReplay: VoidFunction |
| 12 |
} |
| 13 |
|
| 14 |
/** |
| 15 |
* Closing panel shared by the feature walkthroughs: what the visitor just saw, |
| 16 |
* what the real feature does, and the route to it. |
| 17 |
*/ |
| 18 |
export const DemoUpsell: React.FC<DemoUpsellProps> = ({ title, children, onReplay }) => |
| 19 |
<div className="demo-upsell"> |
| 20 |
<h2 className="demo-upsell__title">{title}</h2> |
| 21 |
|
| 22 |
{children} |
| 23 |
|
| 24 |
<div className="demo-upsell__actions"> |
| 25 |
<a |
| 26 |
className="button button-primary button-large" |
| 27 |
href={PRICING_URL} |
| 28 |
target="_blank" |
| 29 |
rel="noopener noreferrer" |
| 30 |
> |
| 31 |
{__('Upgrade to Pro', 'code-snippets')} |
| 32 |
</a> |
| 33 |
|
| 34 |
<Button secondary type="button" onClick={onReplay}> |
| 35 |
{__('Run demo again', 'code-snippets')} |
| 36 |
</Button> |
| 37 |
</div> |
| 38 |
</div> |
| 39 |
|
