Merge pull request #705 from ivpn/bugfix/replace-change-plan-logic

Bugfix/replace change plan logic
ivpn · Oct 26, 2023 · 9b4ea90 · 9b4ea90
2 parents 78c6a6e + 013e42f
commit 9b4ea90
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 35 deletions.
diff --git a/src/themes/ivpn-v3/assets/js/api/api.js b/src/themes/ivpn-v3/assets/js/api/api.js
@@ -233,6 +233,18 @@ export default {
 
     },
 
+    async changeProductDetails(newProductName) {
+        let product = await this.Post(
+            '/web/accounts/change-product-details',
+            {
+                new_product: newProductName.product
+            }
+        )
+
+        return product
+
+    },
+
 
     async setEmailAuth(email, password) {
         await this.Post(

diff --git a/src/themes/ivpn-v3/assets/js/store/module_product.js b/src/themes/ivpn-v3/assets/js/store/module_product.js
@@ -43,6 +43,15 @@ export default {
                 context.commit('failed', { error })
             }
         },
+        async changeDetails(context, newProductName) {
+            context.commit('started')
+            try {
+                context.commit('done')
+                return await Api.changeProductDetails(newProductName);           
+            } catch (error) {
+                context.commit('failed', { error })
+            }
+        },
     },
     getters: {
 

diff --git a/src/themes/ivpn-v3/assets/js/views/Account/Account.vue b/src/themes/ivpn-v3/assets/js/views/Account/Account.vue
@@ -46,7 +46,7 @@
                             <label>Product</label>
                             <div class="value">{{ account.product.name }}</div>
                         </div>
-                        <div class="product-action">
+                        <div class="product-action" v-if="canChange">
                             <router-link :to="{ name: 'change-product' }"
                                 >Change</router-link
                             >
@@ -113,7 +113,8 @@ export default {
 
     data() {
         return {
-            isLight : false
+            isLight : false,
+            canChange: false,
         };
     },
 
@@ -124,13 +125,26 @@ export default {
     },
 
     
-    beforeMount(){
+    async beforeMount(){
         if( this.$store.state.auth.account.product.name == "IVPN Light"){
             this.isLight = true;
             window.location = "/light";
         }
+        if( !this.$store.state.auth.account.is_new){
+            let product= await this.calculateForProduct(this.$store.state.auth.account.product.name).then(response => response);
+            this.canChange = !product.is_locked;
+        }
     },
 
+    methods:{
+        async calculateForProduct(newProduct) {
+            return  await this.$store.dispatch("product/changeDetails", {
+                    product: newProduct,    
+            });
+        }
+
+    }
+
 
 };
 </script>

diff --git a/src/themes/ivpn-v3/assets/js/views/Account/ChangeProduct/ChangeProduct.vue b/src/themes/ivpn-v3/assets/js/views/Account/ChangeProduct/ChangeProduct.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-if="!isLocked">
         <div class="back-link">
             <router-link :to="{name:'account'}">
                 <span class="icon-back"></span>Back to account
@@ -36,7 +36,7 @@
                         <div class="label" v-else>Will be active until:</div>
 
                         <div class="value">
-                            {{ $filters.formatActiveUntil(activeUntilStandard) }}
+                            {{ standardActiveUntil }}
                             <sup
                                 v-if="account.product.name != 'IVPN Standard'"
                             >*</sup>
@@ -66,7 +66,7 @@
                         <div class="label" v-else>Will be active until:</div>
 
                         <div class="value">
-                            {{ $filters.formatActiveUntil(activeUntilPro) }}
+                            {{ proActiveUntil }}
                             <sup
                                 v-if="account.product.name != 'IVPN Pro'"
                             >*</sup>
@@ -90,11 +90,31 @@ import { add, differenceInMinutes } from "date-fns";
 import { mapState } from "vuex";
 
 export default {
+    data() {
+        return {
+            standardActiveUntil: null,
+            proActiveUntil: null,
+            isLocked: true,
+        };
+    },
     components: {
         // SignupSection,
         PriceBox
     },
 
+    
+    async beforeMount() {
+        let standardActiveUntil = await this.calculateForProduct("IVPN Standard").then(response => response.active_until);
+        let proPlan = await this.calculateForProduct("IVPN Pro").then(response => response);
+        this.standardActiveUntil =this.$filters.formatActiveUntil(standardActiveUntil);
+        this.proActiveUntil = this.$filters.formatActiveUntil(proPlan.active_until);
+        this.isLocked = proPlan.is_locked;
+        if( proPlan.is_locked ){
+            window.location = "/account";
+        }
+    },
+    
+
     methods: {
         async selected(newProductName) {
             await this.$store.dispatch("product/change", newProductName);
@@ -111,44 +131,20 @@ export default {
             this.$router.push({ name: "account" });
         },
 
-        calculateForProduct(newProduct) {
-            let now = new Date();
-            let minutesLeft = differenceInMinutes(
-                new Date(this.account.active_until),
-                now
-            );
-
-            if (!this.account.is_active || minutesLeft < 0) {
-                return this.account.active_until;
-            }
-
-            let currentProduct = this.account.product.name;
-
-            if (currentProduct == "IVPN Standard" && newProduct == "IVPN Pro") {
-                return add(now, { minutes: minutesLeft * 0.6 });
-            }
-
-            if (currentProduct == "IVPN Pro" && newProduct == "IVPN Standard") {
-                return add(now, { minutes: minutesLeft / 0.6 });
-            }
-
-            return this.account.active_until;
+        async calculateForProduct(newProduct) {
+            return  await this.$store.dispatch("product/changeDetails", {
+                    product: newProduct,    
+            });
         }
     },
     computed: {
+    
         ...mapState({
             account: state => state.auth.account,
-
             products: state => state.product.all,
             inProgress: state => state.product.inProgress,
             error: state => state.product.error
         }),
-        activeUntilStandard() {
-            return this.calculateForProduct("IVPN Standard");
-        },
-        activeUntilPro() {
-            return this.calculateForProduct("IVPN Pro");
-        }
     }
 };
 </script>