pixflow-upgrade-planning 0.0.1

package/drawer.svg

@@ -0,0 +1,3 @@
+<svg width="85" height="35" viewBox="0 0 85 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 17C16 14.2386 18.2386 12 21 12H42.5H64C66.7614 12 69 14.2386 69 17C69 19.7614 66.7614 22 64 22H42.5H21C18.2386 22 16 19.7614 16 17Z" fill="#0B0B0B"/>
+</svg>

package/index.js

@@ -0,0 +1,163 @@
+const price_details = require("pixflow-price-details");
+const PurchaseCodeActivate = require("pixflow-purchase-code-activate");
+var item_id = 13871;
+
+class UpgradePlanning extends HTMLElement {
+    constructor(){
+        super();
+
+        document.querySelector("#upgrade-plan-pixflow div.activate-code").addEventListener("click", function(){
+            pnlUpgradePlan.classList.remove("active");
+            block.style.display = "flex";
+            setTimeout(() => {
+                pcode.style.display = "flex";
+                setTimeout(() => {
+                    pnlUpgradePlan.style.display = "none";
+                    pcode.classList.add("active");
+                }, 310);
+            }, 310);
+        })
+        
+        document.getElementById("back-upgrade-plan").addEventListener("click", function(){
+            pcode.classList.remove("active");
+            setTimeout(() => {
+                pcode.style.display = "none";
+                pnlUpgradePlan.classList.add("active");
+            }, 300);
+        })
+
+        /* upgrade plan block pixflow */
+        document.querySelectorAll("#upgrade-plan-pixflow > div.plan > div > div").forEach(function(element){
+            element.addEventListener("click", function(){
+                document.querySelector("#upgrade-plan-pixflow > div.plan > div > div.active").classList.remove("active");
+                this.classList.add("active");
+            })
+        })
+
+        /* upgrade plan block postpace */
+        document.querySelectorAll("#upgrade-plan-postpace > div.plan > div > div").forEach(function(element){
+            element.addEventListener("click", function(){
+                document.querySelector("#upgrade-plan-postpace > div.plan > div > div.active").classList.remove("active");
+                this.classList.add("active");
+            })
+        })
+
+        /* go premium */
+        document.querySelector("#upgrade-plan-pixflow > button").addEventListener("click", function(){
+            var license = document.querySelector("#upgrade-plan-pixflow > div.plan > div > div.active").parentNode.className.split(" ")[0];
+            var link = "https://pixflow.net/product/px-crt/?active-license=free";
+            if(license != "free")
+                link = `https://pixflow.net/aff/crt-plugin-${license}/`;
+            window.cep.util.openURLInDefaultBrowser(link);
+        })
+
+        document.querySelector("#upgrade-plan-postpace > div.container-button > div").addEventListener("click", async function(){
+            var license = document.querySelector("#upgrade-plan-postpace > div.plan > div > div.active").parentNode.className.split(" ")[0];
+            window.cep.util.openURLInDefaultBrowser(`${await pixflow_auth.get_postpace_address()}/?showUpgradeModal=true&UpgradeModal=${license}`);
+        })
+
+        activate.addEventListener("click", async function(){
+            var $text = document.querySelector("div.pcode input[type=text]");
+            var $activate = document.querySelector("#activate");
+            var code = $text.value;
+            var oldcolor = $activate.style.backgroundColor;
+            var msg = document.querySelector("div.pcode p.message");
+            isActivate(false, $activate, oldcolor, $text);
+        
+            const purchase_code_activate = new PurchaseCodeActivate(code, "CRT", item_id);
+            const json_check_user_purchase_code = await purchase_code_activate.check_user_purchase_code();
+        
+            if(json_check_user_purchase_code.message == "true"){
+                const json_check_devices = await purchase_code_activate.check_devices();
+                try {
+                    if(!json_check_devices.error){
+                        localStorage.setItem("active", json_check_user_purchase_code.license_type);
+                        txtUpgradePlan.innerHTML = localStorage.getItem("active");
+                        msg.innerHTML = "Activation was successful.";
+                        setTimeout(function(){
+                            isActivate(true, $activate, oldcolor, $text);
+                            window.location.href = "./node_modules/pixflow-auth-hello-theme/index.html";
+                        }, 1500);
+                    } else {
+                        msg.innerHTML = json_check_devices.msg;
+                        isActivate(true, $activate, oldcolor, $text);
+                    }
+                    localStorage.setItem("unlock", json_check_devices.error >= 0 ? 1 : 0);
+                    unlock();    
+                } catch(e){
+                    msg.innerHTML = "Invalid purchase code!";
+                    isActivate(true, $activate, oldcolor, $text);            
+                }
+            } else {
+                msg.innerHTML = "Invalid purchase code!";
+                isActivate(true, $activate, oldcolor, $text);
+            }
+        })
+
+        document.querySelectorAll("img.postpace-close, img.pixflow-close, img.activate-close").forEach(function(element){
+            element.addEventListener("click", function(){
+                var $this = this;
+                $this.parentNode.classList.remove("active");
+                setTimeout(() => {
+                    $this.parentNode.style.display = "none";
+                    block.classList.remove("active");
+                    block.style.display = "none";
+                }, 300);
+            })
+        })
+
+        price_details_async();
+
+        
+
+
+    }
+
+    upgradePlanClick(){
+        block.style.display = "flex";
+        var panel = port == "pixflow" ? pnlUpgradePlan : pnlUpgradePlanPostpace;
+        panel.style.display = "flex";
+        setTimeout(function(){
+            block.classList.add("active");
+            panel.classList.add("active");
+        }, 50);
+    };
+
+    activeNextLicense(){
+        var license;
+        document.querySelectorAll("#upgrade-plan-pixflow > div.plan > div").forEach(e => e.classList.remove("active"));
+        switch(localStorage.getItem("active")){
+            case "free":
+                license = "single";
+                break;
+            case "single":
+                license = "team";
+                break;
+        }
+        try { document.querySelector(`#upgrade-plan-pixflow div.plan > div.${license} > div`).classList.add("active"); } catch(e) {}
+    }
+
+    async price_details_async(){
+        let content_price_details = await price_details(item_id);
+        document.querySelectorAll("img.loading").forEach(function(element){
+            element.remove();
+        })
+        document.querySelector("#upgrade-plan-pixflow > div.plan > div.single > div > div:nth-child(2)").innerHTML = content_price_details.single;
+        document.querySelector("#upgrade-plan-pixflow > div.plan > div.team > div > div:nth-child(2)").innerHTML = content_price_details.team;
+    }    
+
+    function isActivate(flag, $activate, oldcolor, $text){
+        $activate.style.backgroundColor = !flag ? "#dbdbdb" : oldcolor;
+        $activate.style.cursor = !flag ? "default" : "pointer";
+        $activate.disabled = !flag;
+        $text.disabled = !flag;
+    }
+    
+    
+    
+
+}
+
+customElements.define("upgrade-planning", UpgradePlanning);
+
+module.exports = UpgradePlanning;

package/outside-link.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.48152 8.35879C9.64555 8.35879 9.80286 8.29362 9.91885 8.17763C10.0348 8.06165 10.1 7.90433 10.1 7.7403V1.51848C10.1 1.35445 10.0348 1.19714 9.91885 1.08115C9.80286 0.965161 9.64555 0.9 9.48152 0.9H3.2597C3.09567 0.9 2.93835 0.965162 2.82237 1.08115C2.70638 1.19714 2.64122 1.35445 2.64122 1.51848C2.64122 1.68252 2.70638 1.83983 2.82237 1.95582C2.93835 2.07181 3.09567 2.13697 3.2597 2.13697H7.98882L1.0955 9.03029C1.03536 9.08666 0.987095 9.15449 0.953542 9.22979C0.919738 9.30566 0.901561 9.38756 0.900096 9.4706C0.898631 9.55365 0.913907 9.63614 0.945014 9.71315C0.97612 9.79016 1.02242 9.86012 1.08115 9.91885C1.13988 9.97758 1.20984 10.0239 1.28685 10.055C1.36386 10.0861 1.44635 10.1014 1.5294 10.0999C1.61244 10.0984 1.69434 10.0803 1.7702 10.0465C1.84551 10.0129 1.91334 9.96464 1.96971 9.9045L8.86303 3.01118V7.7403C8.86303 8.08173 9.14008 8.35879 9.48152 8.35879Z" fill="white" stroke="white" stroke-width="0.2"/>
+</svg>

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "pixflow-upgrade-planning",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

package/postpace-one.svg

@@ -0,0 +1,32 @@
+<svg width="192" height="60" viewBox="0 0 192 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M110.916 25.0002C110.916 30.193 109.927 34.6108 107.948 38.2535C105.985 41.8963 103.305 44.6787 99.9085 46.6008C96.5276 48.5074 92.726 49.4608 88.5037 49.4608C84.2503 49.4608 80.4331 48.4997 77.0521 46.5776C73.6712 44.6555 70.9992 41.873 69.0361 38.2303C67.0729 34.5876 66.0914 30.1775 66.0914 25.0002C66.0914 19.8074 67.0729 15.3896 69.0361 11.7468C70.9992 8.10411 73.6712 5.32943 77.0521 3.42281C80.4331 1.50069 84.2503 0.539626 88.5037 0.539626C92.726 0.539626 96.5276 1.50069 99.9085 3.42281C103.305 5.32943 105.985 8.10411 107.948 11.7468C109.927 15.3896 110.916 19.8074 110.916 25.0002ZM100.656 25.0002C100.656 21.6365 100.15 18.7998 99.1373 16.4901C98.1401 14.1805 96.7301 12.4289 94.9072 11.2353C93.0843 10.0417 90.9498 9.44495 88.5037 9.44495C86.0576 9.44495 83.9231 10.0417 82.1002 11.2353C80.2773 12.4289 78.8595 14.1805 77.8467 16.4901C76.8496 18.7998 76.351 21.6365 76.351 25.0002C76.351 28.3639 76.8496 31.2006 77.8467 33.5102C78.8595 35.8199 80.2773 37.5715 82.1002 38.7651C83.9231 39.9587 86.0576 40.5554 88.5037 40.5554C90.9498 40.5554 93.0843 39.9587 94.9072 38.7651C96.7301 37.5715 98.1401 35.8199 99.1373 33.5102C100.15 31.2006 100.656 28.3639 100.656 25.0002Z" fill="url(#paint0_linear_3706_2179)"/>
+<path d="M128.181 28.1624V48.8097H118.225V13.0954H127.714V19.3966H128.134C128.929 17.3195 130.261 15.6763 132.131 14.4673C134 13.2427 136.267 12.6304 138.931 12.6304C141.424 12.6304 143.598 13.1729 145.452 14.258C147.306 15.3431 148.747 16.8932 149.775 18.9083C150.804 20.9079 151.318 23.2951 151.318 26.0698V48.8097H141.362V27.8369C141.378 25.6512 140.817 23.9461 139.679 22.7215C138.542 21.4815 136.976 20.8614 134.982 20.8614C133.642 20.8614 132.458 21.1482 131.429 21.7217C130.417 22.2953 129.622 23.1323 129.046 24.2329C128.485 25.318 128.197 26.6278 128.181 28.1624Z" fill="url(#paint1_linear_3706_2179)"/>
+<path d="M175.524 49.5073C171.831 49.5073 168.653 48.7632 165.989 47.2751C163.34 45.7715 161.299 43.6479 159.866 40.9042C158.432 38.145 157.715 34.8821 157.715 31.1153C157.715 27.4416 158.432 24.2174 159.866 21.4427C161.299 18.668 163.317 16.5056 165.919 14.9555C168.536 13.4055 171.605 12.6304 175.126 12.6304C177.495 12.6304 179.699 13.0102 181.74 13.7697C183.797 14.5138 185.589 15.6376 187.116 17.1412C188.658 18.6448 189.858 20.5359 190.715 22.8146C191.572 25.0777 192 27.7284 192 30.7666V33.487H161.688V27.3486H182.628C182.628 25.9225 182.317 24.6592 181.694 23.5586C181.07 22.458 180.206 21.5977 179.099 20.9777C178.009 20.3421 176.739 20.0244 175.29 20.0244C173.779 20.0244 172.439 20.3731 171.27 21.0707C170.117 21.7527 169.214 22.675 168.559 23.8376C167.905 24.9847 167.57 26.2635 167.554 27.6741V33.5102C167.554 35.2774 167.882 36.8042 168.536 38.0908C169.206 39.3774 170.149 40.3694 171.364 41.067C172.579 41.7645 174.02 42.1133 175.687 42.1133C176.794 42.1133 177.806 41.9583 178.726 41.6483C179.645 41.3382 180.432 40.8732 181.086 40.2532C181.74 39.6331 182.239 38.8736 182.582 37.9745L191.79 38.5791C191.322 40.7802 190.364 42.7023 188.915 44.3454C187.482 45.973 185.628 47.2441 183.353 48.1587C181.094 49.0577 178.484 49.5073 175.524 49.5073Z" fill="url(#paint2_linear_3706_2179)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M54.2742 27.0029C54.2736 30.6312 54.3145 32.3618 53.0231 35.7059C49.0802 44.6757 38.8116 44.4136 38.8116 44.4136H25.5664L11.3061 60V32.8224L0 39.1537V5.33211L11.2964 11.5563V0H40.3586C51.7658 0.793672 54.2764 10.9006 54.2764 15.1048C54.2764 18.6504 54.2747 20.3135 54.2742 27.0029ZM39.6445 15.5223C39.6445 11.685 35.7339 11.883 35.7339 11.883H11.4481L11.4384 32.5743C13.1048 32.5796 30.0713 32.632 34.9101 32.632C39.5058 32.632 39.6445 29.5941 39.6445 29.5941V15.5223Z" fill="url(#paint3_linear_3706_2179)"/>
+<defs>
+<linearGradient id="paint0_linear_3706_2179" x1="2.78358e-08" y1="38.9362" x2="179.664" y2="35.033" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1A85E"/>
+<stop offset="0.255203" stop-color="#E284BC"/>
+<stop offset="0.588543" stop-color="#AB96D6"/>
+<stop offset="1" stop-color="#2891FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_3706_2179" x1="2.78358e-08" y1="38.9362" x2="179.664" y2="35.033" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1A85E"/>
+<stop offset="0.255203" stop-color="#E284BC"/>
+<stop offset="0.588543" stop-color="#AB96D6"/>
+<stop offset="1" stop-color="#2891FF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_3706_2179" x1="2.78358e-08" y1="38.9362" x2="179.664" y2="35.033" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1A85E"/>
+<stop offset="0.255203" stop-color="#E284BC"/>
+<stop offset="0.588543" stop-color="#AB96D6"/>
+<stop offset="1" stop-color="#2891FF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_3706_2179" x1="2.78358e-08" y1="38.9362" x2="179.664" y2="35.033" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1A85E"/>
+<stop offset="0.255203" stop-color="#E284BC"/>
+<stop offset="0.588543" stop-color="#AB96D6"/>
+<stop offset="1" stop-color="#2891FF"/>
+</linearGradient>
+</defs>
+</svg>

package/purchase-code.svg

@@ -0,0 +1,3 @@
+<svg width="51" height="61" viewBox="0 0 51 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.8438 3.8125C36.8215 3.8125 34.882 4.61585 33.4521 6.04581C32.0221 7.47578 31.2188 9.41522 31.2188 11.4375V26.6875C33.241 26.6875 35.1805 27.4908 36.6104 28.9208C38.0404 30.3508 38.8438 32.2902 38.8438 34.3125V53.375C38.8438 55.3973 38.0404 57.3367 36.6104 58.7667C35.1805 60.1967 33.241 61 31.2188 61H8.34375C6.32147 61 4.38203 60.1967 2.95206 58.7667C1.5221 57.3367 0.71875 55.3973 0.71875 53.375V34.3125C0.71875 32.2902 1.5221 30.3508 2.95206 28.9208C4.38203 27.4908 6.32147 26.6875 8.34375 26.6875H27.4062V11.4375C27.4062 8.40409 28.6113 5.49491 30.7562 3.34997C32.9012 1.20502 35.8103 0 38.8438 0C41.8772 0 44.7863 1.20502 46.9313 3.34997C49.0762 5.49491 50.2812 8.40409 50.2812 11.4375V26.6875C50.2812 27.1931 50.0804 27.6779 49.7229 28.0354C49.3654 28.3929 48.8806 28.5938 48.375 28.5938C47.8694 28.5938 47.3846 28.3929 47.0271 28.0354C46.6696 27.6779 46.4688 27.1931 46.4688 26.6875V11.4375C46.4688 9.41522 45.6654 7.47578 44.2354 6.04581C42.8055 4.61585 40.866 3.8125 38.8438 3.8125Z" fill="white"/>
+</svg>

package/template.html

@@ -0,0 +1,65 @@
+<div id="upgrade-plan-pixflow">
+    <div></div>
+    <img src="./assets/images/drawer.svg" class="pixflow-close">
+    <img src="./assets/images/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>
+                <img src="./assets/images/single.png">
+                <div><img src="./assets/images/loading.png" class="loading"></div>
+                <div></div>    
+            </div>
+            <p>Single</p>
+        </div>
+        <div class="team">
+            <div>
+                <img src="./assets/images/team.png">
+                <div><img src="./assets/images/loading.png" class="loading"></div>
+                <div></div>    
+            </div>
+            <p>5 Users</p>
+        </div>
+    </div>
+    <button class="btn">Go premium <img src="./assets/images/outside-link.svg"></button>
+    <div class="activate-code">Do you have the purchase code?</div>
+</div>
+<div id="upgrade-plan-postpace">
+    <div></div>
+    <img src="./assets/images/drawer.svg" class="postpace-close">
+    <img src="./assets/images/postpace-one.svg">
+    <p>Enjoy all Nle Plugins, live collaboration, cloud storage and secure project managing, Postpace One bundles up to six great services into one easy subscription.</p>
+    <div class="plan">
+        <div class="team">
+            <div class="active">
+                <img src="./assets/images/team.png">
+                <div>Team</div>
+                <div></div>    
+            </div>
+            <p>Start at $19/m</p>
+        </div>
+        <div class="studio">
+            <div>
+                <img src="./assets/images/team.png">
+                <div>Studio</div>
+                <div></div>    
+            </div>
+            <p>$99 for 10 Seat</p>
+        </div>
+    </div>
+    <div class="container-button">
+        <div class="button"></div>
+    </div>
+</div>
+<div class="pcode">
+    <div></div>
+    <img src="assets/images/drawer.svg" class="activate-close">
+    <img src="assets/images/purchase-code.svg">
+    <p class="describe">Use your purchase code to activate account</p>
+    <form>
+        <input type="text" spellcheck="false" placeholder="Purchase code">
+        <p class="message"></p>
+        <input type="button" value="ACTIVATE" id="activate">
+        <div id="back-upgrade-plan">Purchase Pro Membership</div>
+    </form>
+</div>

package/upgrade-planning-icon.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="63" viewBox="0 0 36 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.9411 26.1983H21.8823V0.935757C21.8823 0.501907 21.5445 0.124316 21.0668 0.0257405C20.5878 -0.0756205 20.0955 0.129328 19.8762 0.51806L0.111595 35.4485C-0.0522661 35.7387 -0.0346237 36.0823 0.157603 36.3585C0.351086 36.6336 0.692055 36.8018 1.05885 36.8018H14.1177V62.0644C14.1177 62.4982 14.4555 62.8758 14.9332 62.9744C15.0145 62.9916 15.0958 63 15.1765 63C15.5711 63 15.941 62.8051 16.1238 62.4821L35.8884 27.5516C36.0523 27.2615 36.0346 26.9178 35.8424 26.6416C35.6489 26.3665 35.3079 26.1983 34.9411 26.1983Z" fill="white"/>
+</svg>