pixflow-upgrade-planning 1.1.4 → 1.1.6

package/index.js

@@ -1,3 +1,4 @@
+require("pixflow-loader-mf");
 const parse = new DOMParser();
 const fs = require("fs");
 const path = require("path");
@@ -14,7 +15,7 @@ class PixflowUpgradePlanning extends HTMLElement {
         this.port = localStorage.getItem("port");
     }
 
-    connectedCallback(){
+    async connectedCallback(){
         const self = this;
         const style = document.createElement("style");
         style.textContent = fs.readFileSync(path.join(__dirname, "styles", `${this.port}.css`));
@@ -23,7 +24,7 @@ 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}`));
 
-        purchase_code.check_device_select();
+        await purchase_code.check_device_select();
 
         this.querySelector(`img.close`).addEventListener("click", this.close_click);
 
@@ -35,22 +36,9 @@ class PixflowUpgradePlanning extends HTMLElement {
                 this.parentNode.classList.remove("active");
             })
             this.querySelector("div.activate-code").addEventListener("click", this.activate_code_click);
-            this.querySelector("div.pixflow div.activate-code-block button").addEventListener("click", function(){
-                const license = self.querySelector("div.plan > div > div.active").parentNode.className.split(" ")[0];
-                const link = `https://pixflow.net/product/${cep_manifest.get_link()}/?active-license=${license}`;
-                window.cep.util.openURLInDefaultBrowser(link);
-            })
             this.querySelector("div.purchase-code form div.back-upgrade-plan").addEventListener("click", function(){
                 this.parentNode.parentNode.classList.remove("active");
             })
-            this.querySelectorAll("div.plan > div > div").forEach(function(element){
-                element.addEventListener("click", function(){
-                    try {
-                        self.querySelector("div.plan > div > div.active").classList.remove("active");
-                    } catch(e) {}
-                    this.classList.add("active");
-                })
-            })
 
             this.querySelector("div.purchase-code > form > button").addEventListener("click", async function(e){
                 e.preventDefault();
@@ -70,6 +58,11 @@ class PixflowUpgradePlanning extends HTMLElement {
             })
         }
 
+        const device = await purchase_code.check_device_select();
+        if(cep_manifest.get_link_market() || !device){
+            this.querySelector("div.activate-code").classList.add("active");
+        }
+
     }
 
     active_next_license(){
@@ -98,21 +91,44 @@ class PixflowUpgradePlanning extends HTMLElement {
             self.querySelectorAll("img.loading").forEach(function(element){
                 element.remove();
             })
-            var off = parseInt(json.off_percentage);
-            var single = json.single != null ? parseInt(json.single.price) : 0;
-            var team = json.team != null ? parseInt(json.team.price) : 0;
-            var strSingle = `$${single}`;
-            var strTeam = `$${team}`;
-            if(off > 0){
-                single = Math.floor((100 - off) / 100 * parseInt(json.single.price));
-                team = Math.floor((100 - off) / 100 * parseInt(json.team.price));
-                strSingle = `$${single} <del>$${json.single.price}</del>`;
-                strTeam = `$${team} <del>$${json.team.price}</del>`;
+            for(const plan in json){
+                if(plan == "free" || plan == "price_without_off")
+                    continue;
+                const el_plan = self.querySelector("div.plan").appendChild(self.template.querySelector("div.template-plan").cloneNode(true));
+                el_plan.className = plan.toLowerCase().replace(/\s/g, "-");
+                var off = parseInt(json.off_percentage);
+                var price = json[plan] != null ? parseFloat(json[plan].price) : 0;
+                var url = json[plan].URL != null ? json[plan].URL : "";
+                var str_price = `$${price}`;
+                if(off > 0){
+                    price = Math.floor((100 - off) / 100 * parseInt(json[plan].price));
+                    str_price = `$${price} <del>$${json[plan].price}</del>`;
+                }
+                el_plan.querySelector("div > div:nth-child(2)").innerHTML = str_price;
+                el_plan.querySelector("div > img").src = json[plan].icon;
+                el_plan.setAttribute("data-url", url);
+                el_plan.querySelector("div > p").textContent = plan;
             }
-            self.querySelector("div.pixflow > div.plan > div.single > div > div:nth-child(2)").innerHTML = strSingle;
-            self.querySelector("div.pixflow > div.plan > div.team > div > div:nth-child(2)").innerHTML = strTeam;
+            self.querySelector("div.pixflow div.activate-code-block button").addEventListener("click", function(){
+                const plan = self.querySelector("div.plan > div > div.active").parentNode;
+                const license = plan.className.split(" ")[0];
+                let link;
+                if(license == "pixflow-full-access")
+                    link = plan.getAttribute("data-url");
+                else
+                    link = `https://pixflow.net/product/${cep_manifest.get_link()}/?active-license=${license}`;
+                window.cep.util.openURLInDefaultBrowser(link);
+            })
+            self.querySelectorAll("div.plan > div > div").forEach(function(element){
+                element.addEventListener("click", function(){
+                    try {
+                        self.querySelector("div.plan > div > div.active").classList.remove("active");
+                    } catch(e) {}
+                    this.classList.add("active");
+                })
+            })
         })
-        xhr.send(null);        
+        xhr.send(null);
     }
 
     activate_code_click(e){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixflow-upgrade-planning",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -10,8 +10,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "pixflow-token": "^1.0.0",
     "pixflow-cep-manifest": "^1.0.0",
-    "pixflow-purchase-code-activate": "^1.0.0"
+    "pixflow-loader-mf": "^1.0.3",
+    "pixflow-purchase-code-activate": "^1.0.0",
+    "pixflow-token": "^1.0.0"
   }
 }

package/styles/pixflow.css

@@ -11,15 +11,13 @@ pixflow-upgrade-planning > div.pixflow > div.plan > div, pixflow-upgrade-plannin
     cursor: pointer;
 }
 
-pixflow-upgrade-planning > div.pixflow > div.plan > div > div > div:nth-child(2) > img {
+pixflow-upgrade-planning > div.pixflow > div.plan > img {
     animation-name: rotate-loading;
     animation-duration: 2s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
-}
-
-pixflow-upgrade-planning > div.pixflow > div.plan > div > div > div:nth-child(2) > img {
     margin-top: 10px;
+    width: 128px;
 }
 
 pixflow-upgrade-planning > div.pixflow {
@@ -195,6 +193,11 @@ pixflow-upgrade-planning > div.pixflow div.activate-code {
     color: #7C879A;
     font-size: 13px;
     cursor: pointer;
+    display: none;
+}
+
+pixflow-upgrade-planning > div.pixflow div.activate-code.active {
+    display: block!important;
 }
 
 pixflow-upgrade-planning > div.pixflow > div.plan > div {
@@ -206,6 +209,7 @@ pixflow-upgrade-planning > div.pixflow > div.plan > div {
 pixflow-upgrade-planning > div.pixflow > div.plan > div > p, pixflow-upgrade-planning > div.pixflow > div.plan > div > div > div:nth-child(2) {
     color: #fff;
     font-size: 12px;
+    text-transform: capitalize;
 }
 
 pixflow-upgrade-planning > div.pixflow > div.container-button {

package/template.html

@@ -4,22 +4,7 @@
     <img src="./node_modules/pixflow-upgrade-planning/images/pixflow/upgrade-planning-icon.svg" alt="">
     <p>Pro Membership unlocks all the features and templates and in higher tier also lets you use the plugin with your team members.</p>
     <div class="plan">
-        <div class="single">
-            <div class="active">
-                <img src="./node_modules/pixflow-upgrade-planning/images/pixflow/single.png">
-                <div><img src="./node_modules/pixflow-upgrade-planning/images/pixflow/loading.png" class="loading"></div>
-                <div></div>    
-            </div>
-            <p>Single</p>
-        </div>
-        <div class="team">
-            <div>
-                <img src="./node_modules/pixflow-upgrade-planning/images/team.png">
-                <div><img src="./node_modules/pixflow-upgrade-planning/images/pixflow/loading.png" class="loading"></div>
-                <div></div>    
-            </div>
-            <p>5 Users</p>
-        </div>
+        <img src="./node_modules/pixflow-upgrade-planning/images/pixflow/loading.png" class="loading">
     </div>
     <div class="activate-code-block">
         <button class="btn">Go premium <img src="./node_modules/pixflow-upgrade-planning/images/pixflow/outside-link.svg"></button>
@@ -70,4 +55,13 @@
         </ul>
         <div class="back-upgrade-plan">Purchase Pro Membership</div>
     </form>
+</div>
+
+<div class="template-plan"> <!-- plan name -->
+    <div class=""> <!-- active -->
+        <img src=""> <!-- icon -->
+        <div><!-- price --></div>
+        <div></div>
+    </div>
+    <p></p> <!-- plan name -->
 </div>