upgradeView.php in Tagembed: Social Media Feeds and Customer Reviews Widget 7.9, at views/upgrade/upgradeView.php

412 lines 10.7 KB Raw Download Zip

1	<?php
2	if (!defined('ABSPATH')) :
3	exit;
4	endif;
5	include_once TAGEMBED_PLUGIN_DIR_PATH . 'views/includes/headView.php';
6	include_once TAGEMBED_PLUGIN_DIR_PATH . 'views/includes/headerView.php';
7	wp_enqueue_script('__tagembed__script-upgrade-js', TAGEMBED_PLUGIN_URL . '/assets/js/upgrade/tagembed.upgrade.script.js', ['jquery'], TAGEMBED_PLUGIN_VERSION, true);
8	?>
9
10	<div class="__tagembed__support" id="__tagembed__support_section" style="display: none;">
11	<h3><span style="font-size: 12px;">🔗</span> <a href="https://tagembed.com/support/" target="_blank">We’re Here to Help You Succeed -</a></h3>
12	<p>You've signed up with Tagembed, and your upgrade will be managed from your Tagembed account.
13	To upgrade your plan, manage your subscription, or view billing details, please visit the Tagembed app.</p>
14	</br>
15	<a class="__tagembed__btn" href="https://app.tagembed.com/price" target="_blank" id="__tagembed__book_demo_free_btn"> Upgrade Now</a>
16	<a class="__tagembed__btn __tagembed__intercom_chat_btn" href="javascript:void(0);"> Chat with Us</a>
17	</div>
18
19	<div id="__tagembed__upgrade_plan_section" style="display: none;">
20	<div class="__tagembed__billing_head">
21	<h2 class="__tagembed__billing_title">Billing & Plans</h2>
22	<div class="__tagembed__billing_stats" id="__tagembed__billing_stats" style="display: none;">
23	<div class="__tagembed__billing_stat">
24	<span>Current Plan</span>
25	<strong id="__tagembed__billing_stat_plan">–</strong>
26	</div>
27	<div class="__tagembed__billing_stat">
28	<span>Renews</span>
29	<strong id="__tagembed__billing_stat_renews">–</strong>
30	</div>
31	<div class="__tagembed__billing_stat">
32	<span>Views Used</span>
33	<strong id="__tagembed__billing_stat_views">–</strong>
34	</div>
35	</div>
36	</div>
37	<div class="__tagembed__plan_notice" id="__tagembed__plan_notice" style="display: none;">
38	<strong id="__tagembed__plan_notice_title"></strong>
39	<span id="__tagembed__plan_notice_message"></span>
40	</div>
41	<div class="__tagembed__upgrade_tabarea" id="__tagembed__upgrade_tabarea">
42	<ul>
43	<li><a href="javascript:void(0);" id="__tagembed__upgrade_tab_plan" class="__tagembed__active" onclick="__tagembed__manageUpgradeTab('plan');">Plan Subscriptions</a></li>
44	<li id="__tagembed__upgrade_tab_invoice_item"><a href="javascript:void(0);" id="__tagembed__upgrade_tab_invoice" onclick="__tagembed__manageUpgradeTab('invoice');">Billing History<span class="__tagembed__tab_count" id="__tagembed__upgrade_tab_count" style="display: none;"></span></a></li>
45	</ul>
46	</div>
47	<div class="__tagembed__sourcerow __tagembed__pricesection" id="__tagembed__upgrade_plan_panel">
48	<div class="__tagembed__priceswitcher">
49	<a href="javascript:void(0);" id="__tagembbed__monthely_price_button" onclick="__tagembed__manageSelectPlanPrice('monthely');">Monthly</a>
50	<a href="javascript:void(0);" id="__tagembbed__yearly_price_button" onclick="__tagembed__manageSelectPlanPrice('yearly');" class="__tagembed__active">Yearly (Save 20%)</a>
51	</div>
52	<div class="__tagembed__fourplan" id="__tagembed__plan"></div>
53	<!--Start--All Feature Section -->
54	<div id="__tagembed__all_feacture_section" class="__tagembed__planfeatures" style="display:none;"></div>
55	<div class="__tagembed__showallfeatures">
56	<button id="__tagembed__all_feacture_button" onclick="__tagembed__manageAllFeactureHideShow();" class="__tagembed__btn">Compare All Plans</button>
57	</div>
58	<!--End--All Feature Section -->
59	</div>
60	<div class="__tagembed__sourcerow __tagembed__pricesection __tagembed__invoicesection" id="__tagembed__invoice_section" style="display: none;">
61	<div class="__tagembed__invoice_wrap" id="__tagembed__invoice_wrap"></div>
62	<p class="__tagembed__invoice_note" id="__tagembed__invoice_note" style="display: none;"></p>
63	</div>
64	<!--Start--Account Upgrade Popup-->
65	<div id="__tagembed__upgrade_account_popup" class="__tagembed__overlay" style="display:none;"></div>
66	<!--End--Account Upgrade Popup-->
67	</div>
68
69	<style>
70	#__tagembed__upgrade_plan_section {
71	float: left;
72	clear: both;
73	width: 100%;
74	padding: 0 15px 6px;
75	box-sizing: border-box;
76	height: 100%;
77	overflow-y: auto;
78	max-height: calc(100% - 80px);
79	}
80
81	#__tagembed__upgrade_plan_section::-webkit-scrollbar {
82	background-color: #f5f5f5;
83	width: 6px;
84	}
85
86	#__tagembed__upgrade_plan_section::-webkit-scrollbar-thumb {
87	background-color: #4179ff;
88	border-radius: 0;
89	-moz-border-radius: 0;
90	-webkit-border-radius: 0;
91	}
92
93	.notice~.__tagembed__container #__tagembed__upgrade_plan_section {
94	max-height: calc(100% - 50px);
95	}
96
97	.notice+.notice~.__tagembed__container #__tagembed__upgrade_plan_section {
98	max-height: calc(100% - 90px);
99	}
100
101	#__tagembed__upgrade_plan_section .__tagembed__pricesection {
102	height: auto;
103	max-height: none;
104	overflow-y: visible;
105	}
106
107	.__tagembed__billing_head {
108	display: -webkit-box;
109	display: -ms-flexbox;
110	display: flex;
111	-webkit-box-align: start;
112	-ms-flex-align: start;
113	align-items: flex-start;
114	-webkit-box-pack: justify;
115	-ms-flex-pack: justify;
116	justify-content: space-between;
117	-ms-flex-wrap: wrap;
118	flex-wrap: wrap;
119	gap: 12px;
120	margin: 14px 0 0;
121	}
122
123	.__tagembed__billing_title {
124	margin: 0;
125	padding: 4px 0 0;
126	font-size: 20px;
127	font-weight: 700;
128	line-height: 1.2;
129	color: #1d2327;
130	}
131
132	.__tagembed__plan_notice {
133	margin: 14px 0 0;
134	padding: 11px 16px;
135	background: #fff;
136	border: 1px solid #e5e5e5;
137	border-left: 4px solid #dba617;
138	border-radius: 0;
139	}
140
141	.__tagembed__plan_notice > strong {
142	display: block;
143	font-size: 13px;
144	font-weight: 600;
145	line-height: 1.4;
146	color: #1d2327;
147	margin: 0 0 2px;
148	}
149
150	.__tagembed__plan_notice span strong {
151	display: inline;
152	font-weight: 600;
153	color: #1d2327;
154	}
155
156	.__tagembed__plan_notice span {
157	display: block;
158	font-size: 13px;
159	font-weight: 400;
160	line-height: 1.5;
161	color: #50575e;
162	}
163
164
165	.__tagembed__billing_stats {
166	display: -webkit-box;
167	display: -ms-flexbox;
168	display: flex;
169	background: #fff;
170	border: 1px solid #e5e5e5;
171	}
172
173	.__tagembed__billing_stat {
174	padding: 6px 14px;
175	border-right: 1px solid #e5e5e5;
176	min-width: 104px;
177	}
178
179	.__tagembed__billing_stat:last-child {
180	border-right: 0;
181	}
182
183	.__tagembed__billing_stat span {
184	display: block;
185	font-size: 10px;
186	font-weight: 500;
187	letter-spacing: .6px;
188	text-transform: uppercase;
189	line-height: 1.4;
190	color: #8c8f94;
191	margin-bottom: 1px;
192	}
193
194	.__tagembed__billing_stat strong {
195	display: block;
196	font-size: 14px;
197	font-weight: 600;
198	line-height: 1.25;
199	color: #1d2327;
200	}
201
202	.__tagembed__upgrade_tabarea {
203	border-bottom: 1px solid #c3c4c7;
204	margin: 12px 0 0;
205	}
206
207	.__tagembed__upgrade_tabarea ul {
208	display: -webkit-box;
209	display: -ms-flexbox;
210	display: flex;
211	margin: 0;
212	padding: 0;
213	list-style: none;
214	}
215
216	.__tagembed__upgrade_tabarea ul li {
217	margin: 0 28px 0 0;
218	}
219
220	.__tagembed__upgrade_tabarea ul li a {
221	display: block;
222	padding: 0 0 9px;
223	font-size: 14px;
224	font-weight: 600;
225	line-height: 20px;
226	color: #8c8f94;
227	text-decoration: none;
228	border-bottom: 3px solid transparent;
229	margin-bottom: -1px;
230	-webkit-transition: 0.3s ease-in-out;
231	-o-transition: 0.3s ease-in-out;
232	transition: 0.3s ease-in-out;
233	}
234
235	.__tagembed__upgrade_tabarea ul li a:hover {
236	color: #2271b1;
237	}
238
239	.__tagembed__upgrade_tabarea ul li a:focus {
240	outline: 0;
241	-webkit-box-shadow: none;
242	box-shadow: none;
243	}
244
245	.__tagembed__upgrade_tabarea ul li a.__tagembed__active {
246	color: #1d2327;
247	border-bottom-color: #2271b1;
248	}
249
250	.__tagembed__tab_count {
251	display: inline-block;
252	margin-left: 7px;
253	padding: 1px 7px;
254	font-size: 11px;
255	font-weight: 600;
256	line-height: 17px;
257	color: #2271b1;
258	background: #eaf2f9;
259	vertical-align: middle;
260	}
261
262	#__tagembed__upgrade_plan_panel,
263	.__tagembed__invoicesection {
264	margin-top: 18px;
265	}
266
267	.__tagembed__invoicesection {
268	margin-bottom: 10px;
269	}
270
271	.__tagembed__invoice_wrap {
272	background: #fff;
273	border: 1px solid #e5e5e5;
274	border-radius: 0;
275	overflow-x: auto;
276	}
277
278	.__tagembed__invoice_table {
279	width: 100%;
280	max-width: 100%;
281	border-collapse: separate;
282	border-spacing: 0;
283	margin-bottom: 0;
284	}
285
286	.__tagembed__invoice_table th {
287	background-color: #f6f7f7;
288	color: #646970;
289	font-size: 11px;
290	font-weight: 600;
291	letter-spacing: .6px;
292	text-transform: uppercase;
293	text-align: left;
294	white-space: nowrap;
295	vertical-align: middle;
296	padding: 11px 15px;
297	border-bottom: 1px solid #e5e5e5;
298	}
299
300	.__tagembed__invoice_table td {
301	background-color: #fff;
302	color: #3f4254;
303	font-size: 13px;
304	font-weight: 400;
305	vertical-align: middle;
306	white-space: nowrap;
307	padding: 13px 15px;
308	border-bottom: 1px solid #f0f0f1;
309	}
310
311	.__tagembed__invoice_table tbody tr:last-child td {
312	border-bottom: 0;
313	}
314
315	.__tagembed__invoice_table tbody tr:hover td {
316	background-color: #fafafa;
317	}
318
319	.__tagembed__invoice_table .__tagembed__invoice_col_amount,
320	.__tagembed__invoice_table .__tagembed__invoice_amount {
321	text-align: left;
322	}
323
324	.__tagembed__invoice_table .__tagembed__invoice_col_action,
325	.__tagembed__invoice_table .__tagembed__invoice_action {
326	text-align: right;
327	}
328
329	.__tagembed__invoice_table .__tagembed__invoice_number {
330	font-weight: 600;
331	color: #1d2327;
332	}
333
334	.__tagembed__invoice_table .__tagembed__invoice_plan {
335	white-space: normal;
336	}
337
338	.__tagembed__invoice_table .__tagembed__invoice_muted {
339	color: #a1a5b7;
340	}
341
342	.__tagembed__invoice_table .__tagembed__invoice_coupon {
343	display: block;
344	margin-top: 3px;
345	font-size: 11px;
346	font-weight: 400;
347	color: #4fa746;
348	}
349
350	.__tagembed__invoice_table .__tagembed__invoice_was {
351	display: inline-block;
352	margin-right: 6px;
353	font-size: 12px;
354	font-weight: 400;
355	color: #a1a5b7;
356	text-decoration: line-through;
357	}
358
359	.__tagembed__invoice_state {
360	font-size: 13px;
361	font-weight: 400;
362	color: #3f4254;
363	}
364
365	.__tagembed__invoice_state.__tagembed__invoice_state_refunded {
366	color: #b32d2e;
367	}
368
369	.__tagembed__invoice_action_link {
370	cursor: pointer;
371	font-size: 13px;
372	font-weight: 600;
373	color: #2271b1;
374	text-decoration: none;
375	box-shadow: none;
376	}
377
378	.__tagembed__invoice_action_link:hover,
379	.__tagembed__invoice_action_link:focus {
380	color: #135e96;
381	text-decoration: none;
382	}
383
384	.__tagembed__invoice_empty {
385	text-align: center;
386	color: #646970;
387	padding: 30px 15px;
388	font-size: 13px;
389	}
390
391	.__tagembed__invoice_note {
392	margin: 12px 2px 0;
393	font-size: 12px;
394	color: #a1a5b7;
395	}
396	.__tagembed__container .__tagembed__row .__tagembed__pricesection .__tagembed__fourplan .__tagembed__planbox span.__tagembed__selectbtn_cancelled {
397	background: #f6f7f7;
398	color: #8c8f94;
399	border: 1px solid #dcdcde;
400	cursor: default;
401	pointer-events: none;
402	user-select: none;
403	border-radius: 0;
404	}
405
406	.__tagembed__container .__tagembed__row .__tagembed__pricesection .__tagembed__fourplan .__tagembed__planbox span.__tagembed__selectbtn_cancelled:hover {
407	background: #f6f7f7;
408	color: #8c8f94;
409	}
410	</style>
411
412	<?php include_once TAGEMBED_PLUGIN_DIR_PATH . 'views/includes/footerView.php'; ?>