pixflow-upgrade-planning 0.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.js CHANGED
@@ -1,21 +1,21 @@
1
1
  const parse = new DOMParser();
2
2
  const fs = require("fs");
3
3
  const path = require("path");
4
- const price_details = require("pixflow-price-details");
5
- const PurchaseCodeActivate = require("pixflow-purchase-code-activate");
6
- const PixflowCEPManifest = require("pixflow-cep-manifest");
4
+ const CepManifest = require("pixflow-cep-manifest");
5
+ const cep_manifest = new CepManifest();
6
+ const token = require("pixflow-token");
7
+ const PixflowPurchaseCodeActivate = require("pixflow-purchase-code-activate");
8
+ const purchase_code = new PixflowPurchaseCodeActivate();
7
9
 
8
10
  class PixflowUpgradePlanning extends HTMLElement {
9
11
 
10
12
  constructor(){
11
13
  super();
12
- self = this;
13
14
  this.port = localStorage.getItem("port");
14
15
  }
15
16
 
16
- async connectedCallback(){
17
- self = this;
18
- this.cep_manifest = new PixflowCEPManifest();
17
+ connectedCallback(){
18
+ const self = this;
19
19
  const style = document.createElement("style");
20
20
  style.textContent = fs.readFileSync(path.join(__dirname, "styles", `${this.port}.css`));
21
21
  this.appendChild(style);
@@ -23,70 +23,98 @@ class PixflowUpgradePlanning extends HTMLElement {
23
23
  this.template = parse.parseFromString(fs.readFileSync(path.join(__dirname, "template.html")).toString("utf8"), "text/html");
24
24
  this.appendChild(this.template.querySelector(`div.${this.port}`));
25
25
 
26
+ purchase_code.check_device_select();
27
+
28
+ this.querySelector(`img.close`).addEventListener("click", this.close_click);
29
+
26
30
  if(this.port == "pixflow"){
27
- const p = await price_details(this.cep_manifest.get_post_id());
28
- this.querySelector("div.pixflow > div.plan > div.single > div > div").innerHTML = p.single;
29
- this.querySelector("div.pixflow > div.plan > div.team > div > div").innerHTML = p.team;
30
31
  this.appendChild(this.template.querySelector("div.purchase-code"));
32
+ this.get_product_price_detail();
33
+ this.active_next_license();
34
+ this.querySelector("div.purchase-code > img.close").addEventListener("click", function(){
35
+ this.parentNode.classList.remove("active");
36
+ })
31
37
  this.querySelector("div.activate-code").addEventListener("click", this.activate_code_click);
32
- this.querySelector("div.pixflow > div.activate-code-block > button").addEventListener("click", this.activate_code_block_click);
33
- this.querySelector("div.purchase-code > div.form > div.back-upgrade-plan").addEventListener("click", this.back_upgrade_plan_click);
34
- this.querySelector("div.purchase-code > div > button").addEventListener("click", this.purchase_code_click);
38
+ this.querySelector("div.pixflow div.activate-code-block button").addEventListener("click", function(){
39
+ const license = self.querySelector("div.plan > div > div.active").parentNode.className.split(" ")[0];
40
+ const link = `https://pixflow.net/product/${cep_manifest.get_link()}/?active-license=${license}`;
41
+ window.cep.util.openURLInDefaultBrowser(link);
42
+ })
43
+ this.querySelector("div.purchase-code form div.back-upgrade-plan").addEventListener("click", function(){
44
+ this.parentNode.parentNode.classList.remove("active");
45
+ })
35
46
  this.querySelectorAll("div.plan > div > div").forEach(function(element){
36
47
  element.addEventListener("click", function(){
37
- element.parentNode.parentNode.querySelector("div.plan > div > div.active").classList.remove("active");
48
+ try {
49
+ self.querySelector("div.plan > div > div.active").classList.remove("active");
50
+ } catch(e) {}
38
51
  this.classList.add("active");
39
52
  })
40
53
  })
41
- }
42
54
 
43
- this.querySelectorAll(`img.close`).forEach(function(element){
44
- element.addEventListener("click", element.parentNode.parentNode.close_click)
45
- });
55
+ this.querySelector("div.purchase-code > form > button").addEventListener("click", async function(e){
56
+ e.preventDefault();
57
+ purchase_code.set_code(self.querySelector("div.purchase-code > form > input[type=text]").value);
58
+ const message = self.querySelector("div.purchase-code > form > p.message");
59
+ const msg = self.querySelectorAll("div.purchase-code > form > ul.msg > *");
60
+ const res = await purchase_code.activate_code();
61
+ if(!res.error){
62
+ message.innerHTML = msg[0].innerHTML;
63
+ setTimeout(function(){
64
+ window.location.href = cep_manifest.get_main_path();
65
+ }, 1500);
66
+ } else {
67
+ message.innerHTML = msg[1].innerHTML;
68
+ }
69
+ })
70
+ }
46
71
 
47
72
  }
48
73
 
49
- async purchase_code_click(e){
50
- e.preventDefault();
51
- const purchase_code_activate = new PurchaseCodeActivate(e.target.parentNode.parentNode.querySelector("input[type='text']").value);
52
- const result = await purchase_code_activate.check_user_license_type();
53
- var index = 3;
54
- if(result.license_type == "single" || result.license_type == "team"){
55
- const check_device_query = await purchase_code_activate.check_device_query(result.license_type);
56
- if(check_device_query.error == 0){
57
- index = 1;
58
- localStorage.setItem("active", result.license_type);
59
- } else if(check_device_query.error == -2){
60
- index = 2;
61
- }
62
- }
63
- e.target.parentNode.querySelector(`div.message > p:nth-child(${index})`).classList.add("active");
64
- if(index == 1){
65
- setTimeout(() => {
66
- window.location.href = "./index.html";
67
- }, 1200);
74
+ active_next_license(){
75
+ var license;
76
+ this.querySelectorAll("div.plan > div > div").forEach(e => e.classList.remove("active"));
77
+ switch(localStorage.getItem("active")){
78
+ case "free":
79
+ license = "single";
80
+ break;
81
+ case "single":
82
+ license = "team";
83
+ break;
68
84
  }
85
+ try {
86
+ this.querySelector(`div.plan > div.${license} > div`).classList.add("active");
87
+ } catch(e) {}
88
+ return license;
69
89
  }
70
90
 
71
- activate_code_block_click(e){
72
- const cep_manifest = new PixflowCEPManifest();
73
- const item_name = cep_manifest.get_item_name();
74
- const license = this.parentNode.parentNode.querySelector("div.plan > div > div.active").parentNode.className.split(" ")[0];
75
- var link = `https://pixflow.net/product/px-${item_name}/?active-license=free`;
76
- if(license != "free")
77
- link = `https://pixflow.net/aff/${item_name}-plugin-${license}/`;
78
- window.cep.util.openURLInDefaultBrowser(link);
79
- }
80
-
81
- back_upgrade_plan_click(e){
82
- const purchase_code_panel = e.target.parentNode.parentNode;
83
- purchase_code_panel.classList.remove("active");
84
- const upgrade_planning_panel = purchase_code_panel.parentNode.querySelector("div.pixflow");
85
- upgrade_planning_panel.classList.add("active");
91
+ get_product_price_detail(){
92
+ const self = this;
93
+ const xhr = new XMLHttpRequest();
94
+ xhr.open("GET", `https://pixflow.net/wp-json/pixflow/get_product_price_detail?product-id=${cep_manifest.get_post_id()}&token=${token()}`);
95
+ xhr.addEventListener("load", function(){
96
+ const json = JSON.parse(this.responseText);
97
+ self.querySelectorAll("img.loading").forEach(function(element){
98
+ element.remove();
99
+ })
100
+ var off = parseInt(json.off_percentage);
101
+ var single = parseInt(json.single.price);
102
+ var team = parseInt(json.team.price);
103
+ var strSingle = `$${single}`;
104
+ var strTeam = `$${team}`;
105
+ if(off > 0){
106
+ single = Math.floor((100 - off) / 100 * parseInt(json.single.price));
107
+ team = Math.floor((100 - off) / 100 * parseInt(json.team.price));
108
+ strSingle = `$${single} <del>$${json.single.price}</del>`;
109
+ strTeam = `$${team} <del>$${json.team.price}</del>`;
110
+ }
111
+ self.querySelector("div.pixflow > div.plan > div.single > div > div:nth-child(2)").innerHTML = strSingle;
112
+ self.querySelector("div.pixflow > div.plan > div.team > div > div:nth-child(2)").innerHTML = strTeam;
113
+ })
114
+ xhr.send(null);
86
115
  }
87
116
 
88
117
  activate_code_click(e){
89
- e.target.parentNode.parentNode.classList.remove("active");
90
118
  e.target.parentNode.parentNode.parentNode.querySelector("div.purchase-code").classList.add("active");
91
119
  }
92
120
 
@@ -94,8 +122,12 @@ class PixflowUpgradePlanning extends HTMLElement {
94
122
  this.querySelector(`div.${this.port}`).classList.add("active");
95
123
  }
96
124
 
125
+ close(){
126
+ this.querySelector(`div.${this.port}`).classList.remove("active");
127
+ }
128
+
97
129
  close_click(e){
98
- e.target.parentNode.classList.remove("active");
130
+ e.target.parentNode.parentNode.close();
99
131
  }
100
132
 
101
133
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixflow-upgrade-planning",
3
- "version": "0.1.0",
3
+ "version": "1.1.1",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -10,8 +10,8 @@
10
10
  "author": "",
11
11
  "license": "ISC",
12
12
  "dependencies": {
13
- "pixflow-price-details": "^1.0.0",
14
- "pixflow-purchase-code-activate": "^1.0.0",
15
- "pixflow-cep-manifest": "^1.0.0"
13
+ "pixflow-token": "^1.0.0",
14
+ "pixflow-cep-manifest": "^1.0.0",
15
+ "pixflow-purchase-code-activate": "^1.0.0"
16
16
  }
17
17
  }
@@ -7,7 +7,7 @@
7
7
  }
8
8
  }
9
9
 
10
- pixflow-upgrade-planning > div.pixflow > div.plan > div, pixflow-upgrade-planning > div.purchase-code button {
10
+ pixflow-upgrade-planning > div.pixflow > div.plan > div, pixflow-upgrade-planning div.purchase-code button {
11
11
  cursor: pointer;
12
12
  }
13
13
 
@@ -121,7 +121,7 @@ div.activate-code-block {
121
121
  background: linear-gradient(180deg, rgba(12,12,12,0) 0%, rgba(12,12,12,1) 34%, rgba(12,12,12,1) 100%);
122
122
  }
123
123
 
124
- pixflow-upgrade-planning > div.pixflow button {
124
+ pixflow-upgrade-planning > div.pixflow button, pixflow-upgrade-planning > div.purchase-code > form > button {
125
125
  width: 147px;
126
126
  height: 34px;
127
127
  border-radius: 17px;
@@ -129,6 +129,8 @@ pixflow-upgrade-planning > div.pixflow button {
129
129
  color: #fff;
130
130
  transition: filter 200ms;
131
131
  border: 0;
132
+ outline: 0;
133
+ cursor: pointer;
132
134
  }
133
135
 
134
136
  pixflow-upgrade-planning > div.pixflow > div:nth-child(5) {
@@ -190,13 +192,6 @@ pixflow-upgrade-planning > div.pixflow div.activate-code {
190
192
  color: #7C879A;
191
193
  font-size: 13px;
192
194
  margin: 15px 0;
193
- }
194
-
195
- a, .btn, button, ul > li > div, ul > li > img, ul > li > div.arrow.right, pixflow-upgrade-planning > div.pixflow > div.plan > div, #activate, #dashboard > div, #dashboard img, .apply, .unlock, #customize > div.params > div.header > div, pixflow-upgrade-planning > div.pixflow > div.activate-code, .view-details, body > div.right-side > div.header > div.views > img.view-small-icon {
196
- cursor: pointer;
197
- }
198
-
199
- pixflow-upgrade-planning > div.pixflow div.activate-code {
200
195
  color: #7C879A;
201
196
  font-size: 13px;
202
197
  cursor: pointer;
@@ -237,6 +232,7 @@ pixflow-upgrade-planning > div.pixflow > div.container-button > div.button:hover
237
232
 
238
233
  pixflow-upgrade-planning > div.pixflow > img:nth-child(2) {
239
234
  margin-top: 12px;
235
+ cursor: pointer;
240
236
  }
241
237
 
242
238
  pixflow-upgrade-planning div.close {
@@ -245,10 +241,11 @@ pixflow-upgrade-planning div.close {
245
241
  background-position: center center;
246
242
  width: 73px;
247
243
  height: 27px;
244
+ cursor: pointer;
248
245
  }
249
246
 
250
- pixflow-upgrade-planning > div.purchase-code {
251
- display: none;
247
+ pixflow-upgrade-planning div.purchase-code {
248
+ display: flex;
252
249
  flex-direction: column;
253
250
  position: fixed;
254
251
  top: calc(100vh + 10px);
@@ -261,55 +258,47 @@ pixflow-upgrade-planning > div.purchase-code {
261
258
  border-radius: 17px 17px 0px 0px;
262
259
  z-index: 1001;
263
260
  align-items: center;
264
- justify-content: space-between;
265
261
  font-family: 'Inter';
266
262
  font-style: normal;
267
263
  font-weight: 700;
268
264
  font-size: 12px;
269
265
  transition: top 400ms;
270
266
  background: linear-gradient(180deg, #005DFF -86.53%, #2273FF -13.89%, #0C0C0C 47.55%, rgb(221 0 27) 47.56%, #0C0C0C 47.57%);
267
+ justify-content: space-between;
271
268
  }
272
269
 
273
- pixflow-upgrade-planning > div.purchase-code.active {
270
+ pixflow-upgrade-planning div.purchase-code.active {
274
271
  top: calc(100vh - 95%);
275
272
  }
276
273
 
277
- pixflow-upgrade-planning > div.purchase-code > div.form > input[type=text]:nth-child(1) {
278
- margin-top: 39px;
274
+ pixflow-upgrade-planning div.purchase-code > form > input[type=text]:nth-child(1) {
279
275
  background: rgb(185 210 255 / 10%);
280
276
  }
281
277
 
282
- pixflow-upgrade-planning > div.purchase-code > div.form > div {
278
+ pixflow-upgrade-planning div.purchase-code > form > div {
283
279
  color: #7C879A;
284
280
  margin: 15px 0;
285
281
  cursor: pointer;
286
282
  }
287
283
 
288
- pixflow-upgrade-planning > div.purchase-code > img:nth-child(1) {
284
+ pixflow-upgrade-planning div.purchase-code > img:nth-child(1) {
289
285
  position: absolute;
290
286
  z-index: -1;
291
287
  top: -8px;
292
288
  }
293
289
 
294
- pixflow-upgrade-planning > div.purchase-code > img:nth-child(2) {
295
- margin-top: 8px;
290
+ pixflow-upgrade-planning div.purchase-code > img:nth-child(2) {
296
291
  position: absolute;
292
+ top: 0;
293
+ cursor: pointer;
297
294
  }
298
295
 
299
- pixflow-upgrade-planning > div.purchase-code > img:nth-child(3) {
300
- margin-top: 82px;
301
- }
302
-
303
- pixflow-upgrade-planning > div.purchase-code.active, div#block.active, div#logout.active, div#revoke-access.active, div#store.active, #font-selector.active {
304
- opacity: 1;
305
- display: flex!important;
306
- }
307
-
308
- pixflow-upgrade-planning > div.purchase-code > div {
296
+ pixflow-upgrade-planning div.purchase-code > div {
297
+ margin-top: 0px;
309
298
  color: #7C879A;
310
299
  }
311
300
 
312
- pixflow-upgrade-planning > div.purchase-code > p.describe {
301
+ pixflow-upgrade-planning div.purchase-code > p.describe {
313
302
  font-family: Inter;
314
303
  font-style: normal;
315
304
  font-weight: bold;
@@ -321,18 +310,18 @@ pixflow-upgrade-planning > div.purchase-code > p.describe {
321
310
  margin-top: 69px;
322
311
  }
323
312
 
324
- pixflow-upgrade-planning > div.purchase-code > p {
313
+ pixflow-upgrade-planning div.purchase-code > p {
325
314
  width: fit-content;
326
315
  }
327
316
 
328
- pixflow-upgrade-planning > div.purchase-code > div.form {
317
+ pixflow-upgrade-planning div.purchase-code > form {
329
318
  display: flex;
330
319
  justify-content: space-between;
331
320
  align-items: center;
332
321
  flex-direction: column;
333
322
  }
334
323
 
335
- pixflow-upgrade-planning > div.purchase-code > div.form > input[type="text"] {
324
+ pixflow-upgrade-planning div.purchase-code > form > input[type="text"] {
336
325
  background-color: rgba(226, 226, 226, 0.6);
337
326
  border: 0;
338
327
  color: #8D8D8D;
@@ -349,21 +338,21 @@ pixflow-upgrade-planning > div.purchase-code > div.form > input[type="text"] {
349
338
  margin: 0;
350
339
  }
351
340
 
352
- pixflow-upgrade-planning > div.purchase-code > div.form > input[type="text"]::selection {
341
+ pixflow-upgrade-planning div.purchase-code > form > input[type="text"]::selection {
353
342
  filter: invert(1);
354
343
  }
355
344
 
356
- pixflow-upgrade-planning > div.purchase-code > div.form > p {
345
+ pixflow-upgrade-planning div.purchase-code > form > p {
357
346
  color: #fff;
358
347
  height: 15px;
359
348
  }
360
349
 
361
- pixflow-upgrade-planning > div.purchase-code > p {
350
+ pixflow-upgrade-planning div.purchase-code > p {
362
351
  width: fit-content;
363
352
  text-align: center;
364
353
  }
365
354
 
366
- pixflow-upgrade-planning > div.purchase-code > p.buy {
355
+ pixflow-upgrade-planning div.purchase-code > p.buy {
367
356
  font-family: Inter;
368
357
  font-style: normal;
369
358
  font-weight: 500;
@@ -374,50 +363,30 @@ pixflow-upgrade-planning > div.purchase-code > p.buy {
374
363
  color: #FFFFFF;
375
364
  }
376
365
 
377
- pixflow-upgrade-planning > div.purchase-code > p.buy > a {
366
+ pixflow-upgrade-planning div.purchase-code > p.buy > a {
378
367
  color: #5c92ff;
379
368
  text-decoration: underline;
380
369
  transition: color 0.2s;
381
370
  }
382
371
 
383
- pixflow-upgrade-planning > div.purchase-code > p.buy > a:hover {
372
+ pixflow-upgrade-planning div.purchase-code > p.buy > a:hover {
384
373
  color: #0A48C4;
385
374
  }
386
375
 
387
- pixflow-upgrade-planning > div.purchase-code > p.help > a {
376
+ pixflow-upgrade-planning div.purchase-code > p.help > a {
388
377
  text-decoration: underline;
389
378
  }
390
379
 
391
- pixflow-upgrade-planning > div.purchase-code > p.buy > a {
380
+ pixflow-upgrade-planning div.purchase-code > p.buy > a {
392
381
  color: #5c92ff;
393
382
  text-decoration: underline;
394
383
  display: contents;
395
384
  }
396
385
 
397
- pixflow-upgrade-planning > div.purchase-code div.result {
386
+ pixflow-upgrade-planning div.purchase-code div.result {
398
387
  color: #FFFFFF;
399
388
  }
400
389
 
401
- pixflow-upgrade-planning > div.purchase-code > div.form > div.message > p {
390
+ pixflow-upgrade-planning div.purchase-code ul.msg {
402
391
  display: none;
403
392
  }
404
-
405
- pixflow-upgrade-planning > div.purchase-code > div.form > div.message > p.active {
406
- display: block;
407
- }
408
-
409
- pixflow-upgrade-planning > div.purchase-code button {
410
- color: #FFFFFF;
411
- font-family: Inter;
412
- font-style: normal;
413
- font-weight: 500;
414
- font-size: 14px;
415
- border: 0;
416
- outline: none;
417
- transition: background-color 0.2s;
418
- cursor: pointer;
419
- padding: 9px;
420
- margin: 9px;
421
- border-radius: 7px;
422
- background-color: #005dff;
423
- }
package/template.html CHANGED
@@ -60,14 +60,14 @@
60
60
  <img src="./node_modules/pixflow-upgrade-planning/images/drawer.svg" class="close">
61
61
  <img src="./node_modules/pixflow-upgrade-planning/images/pixflow/purchase-code.svg">
62
62
  <p class="describe">Use the code you received after the purchase process to activate the plugin</p>
63
- <div class="form">
63
+ <form>
64
64
  <input type="text" spellcheck="false" placeholder="Purchase code">
65
- <div class="message">
66
- <p>Activation was successful</p>
67
- <p>Your code has been activated on 1 machines. Revoke them and try again.</p>
68
- <p>Invalid purchase code!</p>
69
- </div>
65
+ <p class="message"></p>
70
66
  <button>ACTIVATE</button>
67
+ <ul class="msg">
68
+ <li>Activation was successful.</li>
69
+ <li>Invalid purchase code!</li>
70
+ </ul>
71
71
  <div class="back-upgrade-plan">Purchase Pro Membership</div>
72
- </div>
72
+ </form>
73
73
  </div>