| 1 |
import { Modal } from "@wordpress/components"; |
| 2 |
import { __ } from "@wordpress/i18n"; |
| 3 |
import { priceLink } from "../../../blocks/shared/helpFn"; |
| 4 |
|
| 5 |
const ProModal = ({ isOpen, onClose, hasPostCarouselPosts = false, onViewMoreBlocks = null }) => { |
| 6 |
if (!isOpen) return null; |
| 7 |
|
| 8 |
return ( |
| 9 |
<Modal className="sp-pcp-pro-modal-components" onRequestClose={onClose}> |
| 10 |
<div className="sp-pcp-pro-modal"> |
| 11 |
<div className="sp-pcp-pro-modal-wrapper"> |
| 12 |
<span className="sp-pcp-pro-modal-cross" onClick={onClose}> |
| 13 |
<svg |
| 14 |
xmlns="http://www.w3.org/2000/svg" |
| 15 |
viewBox="0 0 24 24" |
| 16 |
width="24" |
| 17 |
height="24" |
| 18 |
aria-hidden="true" |
| 19 |
focusable="false" |
| 20 |
> |
| 21 |
<path d="m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z"></path> |
| 22 |
</svg> |
| 23 |
</span> |
| 24 |
<div className="sp-pcp-pro-modal-box"> |
| 25 |
<div className="sp-pcp-pro-modal-icon"> |
| 26 |
<img |
| 27 |
src={`${sp_pcp_block_settings.pluginUrl}admin/assets/img/proLockIcon.svg`} |
| 28 |
alt="Pro Lock Icon" |
| 29 |
/> |
| 30 |
</div> |
| 31 |
<div className="sp-pcp-pro-modal-info"> |
| 32 |
<h5>{__("Create Unlimited Saved Templates with Smart Post Pro", "post-carousel")}</h5> |
| 33 |
<p> |
| 34 |
The free version allows <b style={{backgroundColor: "yellow"}}>two saved templates</b>. Upgrade to Smart Post Pro to create and reuse unlimited templates, saving time while building your site. |
| 35 |
</p> |
| 36 |
<p> |
| 37 |
Note: You can use Smart Post blocks <b>directly on any pages or posts for free</b>. |
| 38 |
</p> |
| 39 |
<a |
| 40 |
href={priceLink} |
| 41 |
target="_blank" |
| 42 |
rel="noreferrer" |
| 43 |
className="sp-pcp-pro-modal-btn" |
| 44 |
> |
| 45 |
<svg |
| 46 |
xmlns="http://www.w3.org/2000/svg" |
| 47 |
width="22" |
| 48 |
height="22" |
| 49 |
viewBox="0 0 14 14" |
| 50 |
fill="none" |
| 51 |
> |
| 52 |
<path |
| 53 |
d="M8.637 5.535a.99.99 0 0 0 .66.506.92.92 0 0 0 .814-.23l1.725-1.584-.56 4.45H2.735l-.56-4.45L3.9 5.81a.92.92 0 0 0 .813.23c.287-.06.52-.25.66-.505l1.631-2.992z" |
| 54 |
stroke="#fff" |
| 55 |
></path> |
| 56 |
<path |
| 57 |
d="M11.226 12.057H2.784c-.272 0-.492-.269-.492-.6v-1.32h9.424v1.32c0 .331-.22.6-.492.6" |
| 58 |
fill="#fff" |
| 59 |
></path> |
| 60 |
</svg> |
| 61 |
<span>{__("Upgrade to Pro", "post-carousel")}</span> |
| 62 |
</a> |
| 63 |
{hasPostCarouselPosts && onViewMoreBlocks && ( |
| 64 |
<p className="sp-pcp-qs-classic-editor-link"> |
| 65 |
{__("Switch to Classic Editor?", "post-carousel")}{" "} |
| 66 |
<a className="sp-pcp-switch-to-classic" |
| 67 |
href={`${sp_pcp_block_settings.homeUrl}wp-admin/edit.php?post_type=sp_post_carousel&page=pcp_help#settings=advanced`} |
| 68 |
onClick={() => setTimeout(() => window.location.reload(), 100)} |
| 69 |
> |
| 70 |
{__("Click here", "post-carousel")} |
| 71 |
</a> |
| 72 |
</p> |
| 73 |
)} |
| 74 |
</div> |
| 75 |
</div> |
| 76 |
</div> |
| 77 |
</div> |
| 78 |
</Modal> |
| 79 |
); |
| 80 |
}; |
| 81 |
|
| 82 |
export default ProModal; |
| 83 |
|
