pixflow-upgrade-planning 0.0.7 → 0.0.8

package/index.js

@@ -47,12 +47,24 @@ class PixflowUpgradePlanning extends HTMLElement {
 
     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();
+        const purchase_code_activate = new PurchaseCodeActivate(e.target.parentNode.parentNode.querySelector("input[type='text']").value);
+        const result = await purchase_code_activate.check_user_license_type();
+        var index = 3;
+        if(result.license_type == "single" || result.license_type == "team"){
+            const check_device_query = await purchase_code_activate.check_device_query(result.license_type);
+            if(check_device_query.error == 0){
+                index = 1;
+                localStorage.setItem("active", result.license_type);
+            } else if(check_device_query.error == -2){
+                index = 2;
+            }
+        }
+        e.target.parentNode.querySelector(`div.message > p:nth-child(${index})`).classList.add("active");
+        if(index == 1){
+            setTimeout(() => {
+                window.location.href = "./index.html";
+            }, 1200);
+        }
     }
 
     activate_code_block_click(e){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixflow-upgrade-planning",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "",
   "main": "index.js",
   "scripts": {

package/styles/pixflow.css

@@ -7,7 +7,7 @@
     }
 }
 
-pixflow-upgrade-planning > div.pixflow > div.plan > div, div.purchase-code button {
+pixflow-upgrade-planning > div.pixflow > div.plan > div, pixflow-upgrade-planning > div.purchase-code button {
     cursor: pointer;
 }
 
@@ -238,7 +238,7 @@ pixflow-upgrade-planning > div.pixflow > img:nth-child(2) {
     margin-top: 12px;
 }
 
-div.close {
+pixflow-upgrade-planning div.close {
     background-image: url(./images/drawer.svg);
     background-repeat: no-repeat;
     background-position: center center;
@@ -246,7 +246,7 @@ div.close {
     height: 27px;
 }
 
-div.purchase-code {
+pixflow-upgrade-planning > div.purchase-code {
     display: none;
     flex-direction: column;
     position: fixed;
@@ -260,6 +260,7 @@ div.purchase-code {
     border-radius: 17px 17px 0px 0px;
     z-index: 1001;
     align-items: center;
+    justify-content: space-between;
     font-family: 'Inter';
     font-style: normal;
     font-weight: 700;
@@ -268,46 +269,46 @@ div.purchase-code {
     background: linear-gradient(180deg, #005DFF -86.53%, #2273FF -13.89%, #0C0C0C 47.55%, rgb(221 0 27) 47.56%, #0C0C0C 47.57%);
 }
 
-div.purchase-code.active {
+pixflow-upgrade-planning > div.purchase-code.active {
     top: calc(100vh - 95%);
 }
 
-div.purchase-code > form > input[type=text]:nth-child(1) {
+pixflow-upgrade-planning > div.purchase-code > div.form > input[type=text]:nth-child(1) {
     margin-top: 39px;
     background: rgb(185 210 255 / 10%);
 }
 
-div.purchase-code > form > div {
+pixflow-upgrade-planning > div.purchase-code > div.form > div {
     color: #7C879A;
     margin: 15px 0;
     cursor: pointer;
 }
 
-div.purchase-code > img:nth-child(1) {
+pixflow-upgrade-planning > div.purchase-code > img:nth-child(1) {
     position: absolute;
     z-index: -1;
     top: -8px;
 }
 
-div.purchase-code > img:nth-child(2) {
+pixflow-upgrade-planning > div.purchase-code > img:nth-child(2) {
     margin-top: 8px;
+    position: absolute;
 }
 
-div.purchase-code > img:nth-child(3) {
+pixflow-upgrade-planning > div.purchase-code > img:nth-child(3) {
     margin-top: 82px;
 }
 
-div.purchase-code.active, div#block.active, div#logout.active, div#revoke-access.active, div#store.active, #font-selector.active {
+pixflow-upgrade-planning > div.purchase-code.active, div#block.active, div#logout.active, div#revoke-access.active, div#store.active, #font-selector.active {
     opacity: 1;
     display: flex!important;
 }
 
-div.purchase-code > div {
-    margin-top: 136px;
+pixflow-upgrade-planning > div.purchase-code > div {
     color: #7C879A;
 }
 
-div.purchase-code > p.describe {
+pixflow-upgrade-planning > div.purchase-code > p.describe {
     font-family: Inter;
     font-style: normal;
     font-weight: bold;
@@ -319,18 +320,18 @@ div.purchase-code > p.describe {
     margin-top: 69px;
 }
 
-div.purchase-code > p {
+pixflow-upgrade-planning > div.purchase-code > p {
     width: fit-content;
 }
 
-div.purchase-code > form {
+pixflow-upgrade-planning > div.purchase-code > div.form {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-direction: column;
 }
 
-div.purchase-code > form > input[type="text"] {
+pixflow-upgrade-planning > div.purchase-code > div.form > input[type="text"] {
     background-color: rgba(226, 226, 226, 0.6);
     border: 0;
     color: #8D8D8D;
@@ -347,21 +348,21 @@ div.purchase-code > form > input[type="text"] {
     margin: 0;
 }
 
-div.purchase-code > form > input[type="text"]::selection {
+pixflow-upgrade-planning > div.purchase-code > div.form > input[type="text"]::selection {
     filter: invert(1);
 }
 
-div.purchase-code > form > p {
+pixflow-upgrade-planning > div.purchase-code > div.form > p {
     color: #fff;
     height: 15px;
 }
 
-div.purchase-code > p {
+pixflow-upgrade-planning > div.purchase-code > p {
     width: fit-content;
     text-align: center;
 }
 
-div.purchase-code > p.buy {
+pixflow-upgrade-planning > div.purchase-code > p.buy {
     font-family: Inter;
     font-style: normal;
     font-weight: 500;
@@ -372,26 +373,50 @@ div.purchase-code > p.buy {
     color: #FFFFFF;
 }
 
-div.purchase-code > p.buy > a {
+pixflow-upgrade-planning > div.purchase-code > p.buy > a {
     color: #5c92ff;
     text-decoration: underline;
     transition: color 0.2s;
 }
 
-div.purchase-code > p.buy > a:hover {
+pixflow-upgrade-planning > div.purchase-code > p.buy > a:hover {
     color: #0A48C4;
 }
 
-div.purchase-code > p.help > a {
+pixflow-upgrade-planning > div.purchase-code > p.help > a {
     text-decoration: underline;
 }
 
-div.purchase-code > p.buy > a {
+pixflow-upgrade-planning > div.purchase-code > p.buy > a {
     color: #5c92ff;
     text-decoration: underline;
     display: contents;
 }
 
-div.purchase-code div.result {
+pixflow-upgrade-planning > div.purchase-code div.result {
+    color: #FFFFFF;
+}
+
+pixflow-upgrade-planning > div.purchase-code > div.form > div.message > p {
+    display: none;
+}
+
+pixflow-upgrade-planning > div.purchase-code > div.form > div.message > p.active {
+    display: block;
+}
+
+pixflow-upgrade-planning > div.purchase-code button {
     color: #FFFFFF;
-}
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    border: 0;
+    outline: none;
+    transition: background-color 0.2s;
+    cursor: pointer;
+    padding: 9px;
+    margin: 9px;
+    border-radius: 7px;
+    background-color: #005dff;
+}

package/template.html

@@ -60,9 +60,13 @@
     <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>
-    <div>
+    <div class="form">
         <input type="text" spellcheck="false" placeholder="Purchase code">
-        <p class="message"></p>
+        <div class="message">
+            <p>Activation was successful</p>
+            <p>Your code has been activated on 1 machines. Revoke them and try again.</p>
+            <p>Invalid purchase code!</p>
+        </div>
         <button>ACTIVATE</button>
         <div class="back-upgrade-plan">Purchase Pro Membership</div>
     </div>