| 1 |
<?php |
| 2 |
/** |
| 3 |
* Reusable "Upgrade to Pro" modal — shown on load over a Pro feature preview page. |
| 4 |
* |
| 5 |
* Including file must set, before the include: |
| 6 |
* string $modal_title — heading, e.g. "Unlock Subscription Health". |
| 7 |
* string $modal_desc — supporting copy. |
| 8 |
* string $upgrade_url — Pro upgrade URL. |
| 9 |
* |
| 10 |
* @package SpringDevs\Subscription\Admin |
| 11 |
*/ |
| 12 |
|
| 13 |
defined( 'ABSPATH' ) || exit; |
| 14 |
|
| 15 |
$modal_title = isset( $modal_title ) ? $modal_title : __( 'Unlock this feature', 'subscription' ); |
| 16 |
$modal_desc = isset( $modal_desc ) ? $modal_desc : __( 'This feature requires WPSubscription Pro. Unlock advanced features, priority support, and more with WPSubscription Pro.', 'subscription' ); |
| 17 |
$upgrade_url = isset( $upgrade_url ) ? $upgrade_url : 'https://wpsubscription.co/?utm_source=plugin&utm_medium=admin&utm_campaign=upgrade_pro'; |
| 18 |
?> |
| 19 |
|
| 20 |
<div class="wpsubs-modal" id="subscrpt-pro-modal" role="dialog" aria-modal="true" aria-labelledby="subscrpt-pro-modal-title" hidden> |
| 21 |
<div class="wpsubs-modal__backdrop" data-subscrpt-modal-close style="backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);"></div> |
| 22 |
<div class="wpsubs-modal__dialog" role="document" style="width:min(440px,calc(100vw - 40px));"> |
| 23 |
<button type="button" class="wpsubs-modal__close" data-subscrpt-modal-close aria-label="<?php esc_attr_e( 'Close', 'subscription' ); ?>" style="position:absolute;top:12px;right:14px;">×</button> |
| 24 |
<div class="wpsubs-modal__body" style="display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:28px 28px 24px;"> |
| 25 |
<div style="position:relative;display:flex;align-items:center;justify-content:center;"> |
| 26 |
<div style="position:absolute;width:100px;height:100px;background:radial-gradient(circle,rgba(255,106,52,0.22) 0%,transparent 70%);border-radius:50%;"></div> |
| 27 |
<div style="position:relative;width:56px;height:56px;border:1.5px solid #ff6a34;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#fff;"> |
| 28 |
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="#ff6a34" stroke-width="2" aria-hidden="true"> |
| 29 |
<rect x="5" y="11" width="14" height="10" rx="2"/> |
| 30 |
<path stroke-linecap="round" d="M8 11V7a4 4 0 018 0v4"/> |
| 31 |
</svg> |
| 32 |
</div> |
| 33 |
</div> |
| 34 |
<h2 class="wpsubs-modal__title" id="subscrpt-pro-modal-title" style="font-size:1.25rem;line-height:1.25;margin:0;"><?php echo esc_html( $modal_title ); ?></h2> |
| 35 |
<p style="margin:0;font-size:13px;line-height:1.55;color:var(--wpsubs-text-muted);"><?php echo esc_html( $modal_desc ); ?></p> |
| 36 |
<a class="wpsubs-btn wpsubs-btn--primary" href="<?php echo esc_url( $upgrade_url ); ?>" target="_blank" rel="noreferrer noopener" style="box-sizing:border-box;width:100%;margin-top:4px;height:42px;font-size:14px;"> |
| 37 |
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="margin-right:6px;"><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z" /></svg> |
| 38 |
<?php esc_html_e( 'Upgrade to Pro', 'subscription' ); ?> |
| 39 |
</a> |
| 40 |
</div> |
| 41 |
</div> |
| 42 |
</div> |
| 43 |
|
| 44 |
<script> |
| 45 |
( function () { |
| 46 |
var modal = document.getElementById( 'subscrpt-pro-modal' ); |
| 47 |
if ( ! modal ) { |
| 48 |
return; |
| 49 |
} |
| 50 |
|
| 51 |
function openModal() { |
| 52 |
modal.hidden = false; |
| 53 |
document.body.style.overflow = 'hidden'; |
| 54 |
} |
| 55 |
|
| 56 |
function closeModal() { |
| 57 |
modal.hidden = true; |
| 58 |
document.body.style.overflow = ''; |
| 59 |
} |
| 60 |
|
| 61 |
modal.querySelectorAll( '[data-subscrpt-modal-close]' ).forEach( function ( el ) { |
| 62 |
el.addEventListener( 'click', closeModal ); |
| 63 |
} ); |
| 64 |
|
| 65 |
document.addEventListener( 'keydown', function ( e ) { |
| 66 |
if ( 'Escape' === e.key && ! modal.hidden ) { |
| 67 |
closeModal(); |
| 68 |
} |
| 69 |
} ); |
| 70 |
|
| 71 |
// Show on page load. |
| 72 |
openModal(); |
| 73 |
}() ); |
| 74 |
</script> |
| 75 |
|
