pixflow-upgrade-planning 0.0.3 → 0.0.5

package/index.js

@@ -1,6 +1,9 @@
 const parse = new DOMParser();
 const fs = require("fs");
 const path = require("path");
+const price_details = require("pixflow-price-details");
+const PurchaseCodeActivate = require("pixflow-purchase-code-activate");
+const PixflowCEPManifest = require("pixflow-cep-manifest");
 
 class PixflowUpgradePlanning extends HTMLElement {
 
@@ -10,7 +13,8 @@ class PixflowUpgradePlanning extends HTMLElement {
         this.port = localStorage.getItem("port");
     }
 
-    connectedCallback(){
+    async connectedCallback(){
+        this.cep_manifest = new PixflowCEPManifest();
         const style = document.createElement("style");
         style.textContent = fs.readFileSync(path.join(__dirname, "styles", `${this.port}.css`));
         this.appendChild(style);
@@ -18,13 +22,39 @@ class PixflowUpgradePlanning extends HTMLElement {
         this.template = parse.parseFromString(fs.readFileSync(path.join(__dirname, "template.html")).toString("utf8"), "text/html");
         this.appendChild(this.template.querySelector(`div.${this.port}`));
 
-        this.querySelector(`img.close`).addEventListener("click", this.close_click);
-
         if(this.port == "pixflow"){
+            const p = await price_details(this.cep_manifest.get_post_id());
+            this.querySelector("div.pixflow > div.plan > div.single > div > div").innerHTML = p.single;
+            this.querySelector("div.pixflow > div.plan > div.team > div > div").innerHTML = p.team;
             this.appendChild(this.template.querySelector("div.purchase-code"));
             this.querySelector("div.activate-code").addEventListener("click", this.activate_code_click);
+            this.querySelector("div.pixflow > div.activate-code-block > button").addEventListener("click", this.activate_code_block_click);
+            this.querySelector("div.purchase-code > div > button").addEventListener("click", this.purchase_code_click);
         }
 
+        this.querySelectorAll(`img.close`).forEach(function(element){
+            element.addEventListener("click", self.close_click)
+        });
+
+    }
+
+    async purchase_code_click(e){
+        e.preventDefault();
+        const purchase_code_activate = new PurchaseCodeActivate(
+            e.target.parentNode.parentNode.querySelector("input[type='text']").value,
+            e.target.parentNode.parentNode.parentNode.getAttribute("item-name"),
+            e.target.parentNode.parentNode.parentNode.getAttribute("item-id")
+        );
+        await purchase_code_activate.check_devices();
+    }
+
+    activate_code_block_click(e){
+        const item_name = this.parentNode.parentNode.parentNode.getAttribute("item-name");
+        const license = this.parentNode.parentNode.querySelector("div.plan > div > div.active").parentNode.className.split(" ")[0];
+        var link = `https://pixflow.net/product/px-${item_name}/?active-license=free`;
+        if(license != "free")
+            link = `https://pixflow.net/aff/${item_name}-plugin-${license}/`;
+        window.cep.util.openURLInDefaultBrowser(link);
     }
 
     activate_code_click(e){
@@ -35,12 +65,8 @@ class PixflowUpgradePlanning extends HTMLElement {
         this.querySelector(`div.${this.port}`).classList.add("active");
     }
 
-    close(){
-        this.querySelector(`div.${this.port}`).classList.remove("active");
-    }
-
     close_click(e){
-        e.target.parentNode.parentNode.close();
+        e.target.parentNode.classList.remove("active");
     }
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixflow-upgrade-planning",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -8,5 +8,10 @@
   },
   "keywords": [],
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {
+    "pixflow-price-details": "^1.0.0",
+    "pixflow-purchase-code-activate": "^1.0.0",
+    "pixflow-cep-manifest": "^1.0.0"
+  }
 }

package/template.html

@@ -60,10 +60,10 @@
     <img src="./node_modules/pixflow-upgrade-planning/images/drawer.svg" class="close">
     <img src="./node_modules/pixflow-upgrade-planning/images/pixflow/purchase-code.svg">
     <p class="describe">Use the code you received after the purchase process to activate the plugin</p>
-    <form>
+    <div>
         <input type="text" spellcheck="false" placeholder="Purchase code">
         <p class="message"></p>
         <button>ACTIVATE</button>
         <div class="back-upgrade-plan">Purchase Pro Membership</div>
-    </form>
+    </div>
 </div>