| 1 |
<?php |
| 2 |
/** |
| 3 |
* License Page Template |
| 4 |
* |
| 5 |
* Shows license information and activation form |
| 6 |
* |
| 7 |
* @package EasyInvoice |
| 8 |
* @since 1.0.0 |
| 9 |
*/ |
| 10 |
|
| 11 |
if ( ! defined( 'ABSPATH' ) ) { |
| 12 |
exit; |
| 13 |
} |
| 14 |
// Get current page |
| 15 |
$current_page = isset($_GET['page']) ? sanitize_key(wp_unslash($_GET['page'])) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Recommended |
| 16 |
|
| 17 |
// Check if Pro plugin wants to override the content |
| 18 |
$pro_content = apply_filters('easy_invoice_license_page_content', ''); |
| 19 |
?> |
| 20 |
|
| 21 |
<div class="wrap easy-invoice-admin"> |
| 22 |
<div class="easy-invoice-content"> |
| 23 |
<?php if (!empty($pro_content)): ?> |
| 24 |
<?php echo $pro_content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- markup rendered by Easy Invoice Pro's license screen. ?> |
| 25 |
<?php else: ?> |
| 26 |
<div class="free-version-card"> |
| 27 |
<div class="card-header"> |
| 28 |
<h2><?php esc_html_e('You\'re Using the Free Version', 'easy-invoice'); ?></h2> |
| 29 |
<p><?php esc_html_e('No license activation required. You can continue using all free features.', 'easy-invoice'); ?></p> |
| 30 |
</div> |
| 31 |
|
| 32 |
<div class="card-content"> |
| 33 |
<div class="premium-features"> |
| 34 |
<h3><?php esc_html_e('Upgrade to Pro and Unlock These Premium Features:', 'easy-invoice'); ?></h3> |
| 35 |
<div class="features-grid"> |
| 36 |
<div class="feature-item"> |
| 37 |
<div class="feature-icon"> |
| 38 |
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 39 |
<path d="M12 1V23" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| 40 |
<path d="M17 5H9.5C8.57174 5 7.6815 5.36875 7.02513 6.02513C6.36875 6.6815 6 7.57174 6 8.5C6 9.42826 6.36875 10.3185 7.02513 10.9749C7.6815 11.6313 8.57174 12 9.5 12H14.5C15.4283 12 16.3185 12.3687 16.9749 13.0251C17.6313 13.6815 18 14.5717 18 15.5C18 16.4283 17.6313 17.3185 16.9749 17.9749C16.3185 18.6313 15.4283 19 14.5 19H6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| 41 |
</svg> |
| 42 |
</div> |
| 43 |
<div class="feature-content"> |
| 44 |
<h4><?php esc_html_e('Recurring Invoices', 'easy-invoice'); ?></h4> |
| 45 |
<p><?php esc_html_e('Automatically generate and send recurring invoices on schedule.', 'easy-invoice'); ?></p> |
| 46 |
</div> |
| 47 |
</div> |
| 48 |
|
| 49 |
<div class="feature-item"> |
| 50 |
<div class="feature-icon"> |
| 51 |
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 52 |
<path d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| 53 |
<path d="M14 2V8H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| 54 |
</svg> |
| 55 |
</div> |
| 56 |
<div class="feature-content"> |
| 57 |
<h4><?php esc_html_e('Advanced PDF Customization', 'easy-invoice'); ?></h4> |
| 58 |
<p><?php esc_html_e('Customize PDF templates with your branding, colors, and layout preferences.', 'easy-invoice'); ?></p> |
| 59 |
</div> |
| 60 |
</div> |
| 61 |
|
| 62 |
<div class="feature-item"> |
| 63 |
<div class="feature-icon"> |
| 64 |
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 65 |
<path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| 66 |
<circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| 67 |
</svg> |
| 68 |
</div> |
| 69 |
<div class="feature-content"> |
| 70 |
<h4><?php esc_html_e('Multiple Payment Gateways', 'easy-invoice'); ?></h4> |
| 71 |
<p><?php esc_html_e('Accept payments via PayPal, Stripe, Square, Authorize.Net, and more.', 'easy-invoice'); ?></p> |
| 72 |
</div> |
| 73 |
</div> |
| 74 |
|
| 75 |
<div class="feature-item"> |
| 76 |
<div class="feature-icon"> |
| 77 |
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 78 |
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| 79 |
<line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| 80 |
<line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| 81 |
<line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| 82 |
</svg> |
| 83 |
</div> |
| 84 |
<div class="feature-content"> |
| 85 |
<h4><?php esc_html_e('Partial Payments', 'easy-invoice'); ?></h4> |
| 86 |
<p><?php esc_html_e('Allow customers to pay invoices in installments with flexible payment options.', 'easy-invoice'); ?></p> |
| 87 |
</div> |
| 88 |
</div> |
| 89 |
|
| 90 |
<div class="feature-item"> |
| 91 |
<div class="feature-icon"> |
| 92 |
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 93 |
<path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| 94 |
<circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| 95 |
<path d="M23 21V19C23 18.1137 22.6485 17.2628 22.0237 16.6425C21.3989 16.0221 20.5471 15.6722 19.66 15.6722C18.7729 15.6722 17.9211 16.0221 17.2963 16.6425C16.6715 17.2628 16.32 18.1137 16.32 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| 96 |
</svg> |
| 97 |
</div> |
| 98 |
<div class="feature-content"> |
| 99 |
<h4><?php esc_html_e('Client Portal', 'easy-invoice'); ?></h4> |
| 100 |
<p><?php esc_html_e('Give clients access to view invoices, make payments, and manage their account.', 'easy-invoice'); ?></p> |
| 101 |
</div> |
| 102 |
</div> |
| 103 |
|
| 104 |
<div class="feature-item"> |
| 105 |
<div class="feature-icon"> |
| 106 |
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 107 |
<path d="M18 20V10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| 108 |
<path d="M12 20V4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| 109 |
<path d="M6 20V14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| 110 |
</svg> |
| 111 |
</div> |
| 112 |
<div class="feature-content"> |
| 113 |
<h4><?php esc_html_e('Advanced Reports', 'easy-invoice'); ?></h4> |
| 114 |
<p><?php esc_html_e('Detailed analytics, revenue reports, and business insights.', 'easy-invoice'); ?></p> |
| 115 |
</div> |
| 116 |
</div> |
| 117 |
</div> |
| 118 |
</div> |
| 119 |
|
| 120 |
<div class="upgrade-actions"> |
| 121 |
<a href="https://matrixaddons.com/plugins/easy-invoice/#free-vs-pro" target="_blank" class="upgrade-button"> |
| 122 |
<?php esc_html_e('Upgrade to Pro', 'easy-invoice'); ?> |
| 123 |
</a> |
| 124 |
</div> |
| 125 |
</div> |
| 126 |
</div> |
| 127 |
<?php endif; ?> |
| 128 |
</div> |
| 129 |
</div> |
| 130 |
|
| 131 |
<style> |
| 132 |
/* License Page Styles */ |
| 133 |
|
| 134 |
/* |
| 135 |
* These used to target `.easy-invoice-admin` and `.easy-invoice-content` directly. |
| 136 |
* Both are global app-shell classes used by every Easy Invoice screen, so this |
| 137 |
* page-specific stylesheet was restyling the whole shell — it just happened to |
| 138 |
* only load here. |
| 139 |
* |
| 140 |
* The damage: `.easy-invoice-admin` is a flex item (`flex: 1`, see |
| 141 |
* templates/main-template.php) whose default `min-width: auto` means it cannot |
| 142 |
* shrink below its content. Adding 20px of horizontal padding here pushed its |
| 143 |
* min-content width to 439px, so on a 390px phone the licence screen — and only |
| 144 |
* the licence screen — overflowed by 49px. |
| 145 |
* |
| 146 |
* Scoped to this page's own container instead, with the padding kept but no |
| 147 |
* longer able to inflate the shell. |
| 148 |
*/ |
| 149 |
.easy-invoice-license-manager { |
| 150 |
max-width: 1000px; |
| 151 |
margin: 0 auto; |
| 152 |
padding: 20px; |
| 153 |
/* A flex item must be allowed to shrink below its content, or long licence |
| 154 |
keys and wide cards force the whole page wider than the viewport. */ |
| 155 |
min-width: 0; |
| 156 |
} |
| 157 |
|
| 158 |
.easy-invoice-license-manager .easy-invoice-content, |
| 159 |
.easy-invoice-license-manager.easy-invoice-content { |
| 160 |
display: flex; |
| 161 |
flex-direction: column; |
| 162 |
gap: 30px; |
| 163 |
min-width: 0; |
| 164 |
} |
| 165 |
|
| 166 |
@media (max-width: 782px) { |
| 167 |
.easy-invoice-license-manager { |
| 168 |
padding: 12px; |
| 169 |
} |
| 170 |
} |
| 171 |
|
| 172 |
/* Free Version Styles */ |
| 173 |
.free-version-card { |
| 174 |
background: #fff; |
| 175 |
border-radius: 12px; |
| 176 |
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
| 177 |
overflow: hidden; |
| 178 |
border: 1px solid #e5e7eb; |
| 179 |
} |
| 180 |
|
| 181 |
.free-version-card .card-header { |
| 182 |
background: linear-gradient(135deg, #10b981 0%, #059669 100%); |
| 183 |
color: #fff; |
| 184 |
padding: 40px 30px; |
| 185 |
text-align: center; |
| 186 |
} |
| 187 |
|
| 188 |
.free-version-card .card-header .header-icon { |
| 189 |
font-size: 48px; |
| 190 |
margin-bottom: 20px; |
| 191 |
opacity: 0.9; |
| 192 |
} |
| 193 |
|
| 194 |
.free-version-card .card-header h2 { |
| 195 |
margin: 0 0 15px 0; |
| 196 |
font-size: 28px; |
| 197 |
font-weight: 600; |
| 198 |
} |
| 199 |
|
| 200 |
.free-version-card .card-header p { |
| 201 |
margin: 0; |
| 202 |
font-size: 16px; |
| 203 |
opacity: 0.9; |
| 204 |
} |
| 205 |
|
| 206 |
.free-version-card .card-content { |
| 207 |
padding: 40px 30px; |
| 208 |
} |
| 209 |
|
| 210 |
/* Premium Features */ |
| 211 |
.premium-features { |
| 212 |
margin-bottom: 40px; |
| 213 |
} |
| 214 |
|
| 215 |
.premium-features h3 { |
| 216 |
margin: 0 0 30px 0; |
| 217 |
color: #1d2327; |
| 218 |
font-size: 22px; |
| 219 |
font-weight: 600; |
| 220 |
text-align: center; |
| 221 |
} |
| 222 |
|
| 223 |
.features-grid { |
| 224 |
display: grid; |
| 225 |
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| 226 |
gap: 20px; |
| 227 |
} |
| 228 |
|
| 229 |
.feature-item { |
| 230 |
display: flex; |
| 231 |
align-items: flex-start; |
| 232 |
gap: 15px; |
| 233 |
padding: 20px; |
| 234 |
background: #f8f9fa; |
| 235 |
border-radius: 8px; |
| 236 |
border-left: 4px solid #8b5cf6; |
| 237 |
transition: all 0.2s ease; |
| 238 |
} |
| 239 |
|
| 240 |
.feature-item:hover { |
| 241 |
background: #f0f0ff; |
| 242 |
transform: translateY(-2px); |
| 243 |
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1); |
| 244 |
} |
| 245 |
|
| 246 |
.feature-icon { |
| 247 |
color: #8b5cf6; |
| 248 |
margin-top: 2px; |
| 249 |
} |
| 250 |
|
| 251 |
.feature-content h4 { |
| 252 |
margin: 0 0 8px 0; |
| 253 |
color: #1d2327; |
| 254 |
font-size: 16px; |
| 255 |
font-weight: 600; |
| 256 |
} |
| 257 |
|
| 258 |
.feature-content p { |
| 259 |
margin: 0; |
| 260 |
color: #646970; |
| 261 |
font-size: 14px; |
| 262 |
line-height: 1.5; |
| 263 |
} |
| 264 |
|
| 265 |
.upgrade-actions { |
| 266 |
text-align: center; |
| 267 |
padding: 30px 0; |
| 268 |
border-top: 1px solid #e5e7eb; |
| 269 |
} |
| 270 |
|
| 271 |
.upgrade-button { |
| 272 |
display: inline-block; |
| 273 |
padding: 12px 24px; |
| 274 |
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); |
| 275 |
color: #fff; |
| 276 |
text-decoration: none; |
| 277 |
border-radius: 8px; |
| 278 |
font-weight: 600; |
| 279 |
font-size: 16px; |
| 280 |
transition: all 0.3s ease; |
| 281 |
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3); |
| 282 |
} |
| 283 |
|
| 284 |
.upgrade-button:hover { |
| 285 |
transform: translateY(-1px); |
| 286 |
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4); |
| 287 |
color: #fff; |
| 288 |
} |
| 289 |
|
| 290 |
/* Responsive Design */ |
| 291 |
@media (max-width: 768px) { |
| 292 |
.features-grid { |
| 293 |
grid-template-columns: 1fr; |
| 294 |
} |
| 295 |
|
| 296 |
.upgrade-card .card-header, |
| 297 |
.free-version-card .card-header { |
| 298 |
padding: 30px 20px; |
| 299 |
} |
| 300 |
|
| 301 |
.upgrade-card .card-content, |
| 302 |
.free-version-card .card-content { |
| 303 |
padding: 30px 20px; |
| 304 |
} |
| 305 |
|
| 306 |
.upgrade-button { |
| 307 |
padding: 10px 20px; |
| 308 |
font-size: 14px; |
| 309 |
} |
| 310 |
} |
| 311 |
</style> |
