V5.8.0

package.json

@@ -1,6 +1,6 @@
 {
     "name": "hyperfye-frontend",
-    "version": "v5.7.0",
+    "version": "v5.8.0",
     "private": true,
     "scripts": {
         "serve": "vue-cli-service serve --mode production",

src/components/admin/Charts.vue

@@ -40,8 +40,7 @@ export default {
       totalAvailable: 0,
       totalUsed: 0,
       unused: 0,
-      user: {},
-      usage: {},
+      user: {}, 
       sections: [
         { label: "REQUESTS CONSUMED", value: this.totalUsed, color: "#ed5c5c" },
         { label: "REQUESTS LEFT", value: this.unused, color: "#60c860" },
@@ -55,47 +54,14 @@ export default {
     this.user = {
       ...JSON.parse(usrStr),
     };
-    await this.fetchSubscription();
-
-    this.totalAvailable = this.usage["totalAvailable"];
-    this.totalUsed = this.usage["totalUsed"];
+    this.totalAvailable = this.user.usage["totalAvailable"];
+    this.totalUsed = this.user.usage["totalUsed"];
     this.unused = this.totalAvailable - this.totalUsed;
     this.sections[0].value = this.totalUsed;
     this.sections[1].value = this.unused;
-
   },
   methods: {
     handleSectionClick() {},
-    async fetchSubscription() {
-      try {
-        this.isLoading = true;
-
-        // if (!this.user.id) throw new Error("No project owner found");
-
-        const url = `${this.$config.studioServer.BASE_URL}api/v1/subscription?usage=true`;
-        const headers = {
-          Authorization: `Bearer ${this.authToken}`,
-          AccessToken:`Bearer ${this.accessToken}`
-        };
-        const resp = await fetch(url, {
-          headers,
-          method: "GET",
-        });
-
-        if (!resp.ok) {
-          return this.notifyErr(resp.statusText);
-        }
-        const json = await resp.json();
-        this.usage = json["usage"];
-
-        // localStorage.setItem("subscriptions", JSON.stringify(json));
-        // this.notifySuccess("No. of projects fetched " + this.projects.length);
-      } catch (e) {
-        this.notifyErr(e.message);
-      } finally {
-        this.isLoading = false;
-      }
-    },
   },
 };
 </script>

src/components/admin/selectPlanSlider/SelectPlanSlide.vue

@@ -20,6 +20,7 @@
 </style>
 <template>
   <div>
+    <loading :active.sync="isLoading" :can-cancel="true" :is-full-page="fullPage"></loading>
     <b-sidebar
       backdrop
       width="50%"
@@ -85,6 +86,21 @@
             </div>
           </div>
         </div>
+        <hr v-if="showCoupon===true"/>
+      <div style="display:flex" v-if="showCoupon===true">
+        <div class="col-lg-6 col-md-9 px-0">
+            <input type="text" class="form-control w-100"
+            placeholder="Enter Coupon Code"
+            @keydown="handleInput($event)"
+            v-model="coupon">
+        </div>
+          <div class="col-lg-4 col-md-3 " style="display:block">
+            <button type="button" class="btn btn-outline-primary button-theme"
+              :style="buttonThemeCss"
+              @click="applyCoupon"
+              >Apply</button>
+          </div>
+          </div>
         <hr />
         <div>
           <div class="row" style="margin-top: 2%">
@@ -95,6 +111,10 @@
             <div class="col-md-6"><b>Discount</b></div>
             <div class="col-md-6">$ {{ discount }}</div>
           </div>
+          <div class="row" style="margin-top: 2%" v-if="showCoupon===true">
+            <div class="col-md-6"><b>Coupon Discount</b></div>
+            <div class="col-md-6">$ {{ couponDiscount }}</div>
+          </div>
           <!-- <div class="row" style="margin-top: 2%;">
               <div class="col-md-6"><b>Subtotal</b></div>
               <div class="col-md-6"></div>
@@ -182,13 +202,16 @@ import GeneralConfig from "./components/GeneralConfig.vue";
 import ReferralConfig from "./components/ReferralConfig.vue";
 import notificationMixins from "../../../mixins/notificationMixins";
 import Messages from "../../../utils/messages/admin/en";
+import Loading from "vue-loading-overlay";
+import "vue-loading-overlay/dist/vue-loading.css";
 export default {
   name: "CreateProjectSlide",
   components: {
     GeneralConfig,
     EventActionConfig,
     ReferralConfig,
     InputDate,
+    Loading
   },
 
   props: {
@@ -229,27 +252,48 @@ export default {
       '--header-bg-color': config.app.headerBGColor,
       '--header-text-color':config.app.headerTextColor
       }
+  },
+  couponDiscount(){
+  return  this.couponDiscount = (this.plan.price * this.fetchedCouponDiscount)/100
+    // this.discount = (this.plan.price * 30) / 100;
   },
     grandTotal() {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      this.plan.grandTotal = this.plan.price - this.discount;
-      return this.plan.grandTotal;
+
+      let total = this.plan.price - this.discount;
+      if(this.selectedCurrency !=="" && this.selectedNetwork !==""){
+        this.showCoupon = true;
+        this.plan.grandTotal = total - this.couponDiscount;
+
+      }
+      else{
+
+        this.plan.grandTotal = total;
+
+      }
+      return this.plan.grandTotal
     },
   },
-
   data() {
     return {
       /// TODO: Need to do it in a neat way
       // Use api https://localhost:6006/api/v1/actions
       // it returns:
       // {"actionTypes":["INPUT_TEXT","INPUT_NUMBER","TWITTER_FOLLOW","TWITTER_RETWEET","TELEGRAM_JOIN","DISCORD_JOIN","BLOCKCHAIN_ETH","BLOCKCHAIN_TEZ","HYPERSIGN_AUTH"],"length":9}
       authToken: localStorage.getItem("authToken"),
+      showCoupon:false,
       subTotal: 0,
       discount: 0,
+      couponDiscount: 0,
+      fetchedCouponDiscount:0,
       selectedCurrency: "",
       selectedNetwork: "",
       marketPairs: [],
-
+      coupon:"",
+      coupons:[],
+      applied:false,
+      isLoading:false,
+      fullPage: true,
       options: {
         currency: [
           {
@@ -281,8 +325,73 @@ export default {
     this.fetchTokenPriceCMC();
   },
   methods: {
+    handleInput(e){
+      if (e.key === "Backspace" || e.key === "Delete") {
+        this.applied = false;
+        this.couponDiscount=0;
+        this.coupons = []
+      }
+      },
+   async applyCoupon(){
+
+     try{
+       if(this.selectedCurrency !== "" && this.selectedNetwork !== "")
+       {
+         this.applied = true;
+      if(!this.coupon){
+          throw new Error('Enter Coupon and Apply')
+        }   
+       if(!this.coupons.includes(this.coupon)){
+         this.grandTotal
+     this.isLoading = true;
+      const url = `${this.$config.studioServer.BASE_URL}api/v1/subscription/coupon/verify`;
+        let headers = {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${this.authToken}`,
+        };
+        let body={
+          coupon:this.coupon
+        }
+        const resp = await fetch(url, {
+          method: "POST",
+          body:JSON.stringify(body),
+          headers
+        });
+        const json = await resp.json();
+        this.fetchedCouponDiscount = json;
+        if (this.fetchedCouponDiscount) {
+          if (!resp.ok) {
+            this.applied = false;
+            return this.notifyErr(json);
+          } else {
+            this.coupons.push(this.coupon)
+            this.couponDiscount = (this.plan.grandTotal * this.fetchedCouponDiscount) / 100;
+            return this.notifySuccess("Coupon Applied");
+          }
+        } else {
+          throw new Error("Error while applying coupon code");
+        }
+       }
+       else{
+         return this.notifyErr("coupon code already applied")
+       }
+       }
+       else{
+         return this.notifyErr(Messages.SUBSCRIPTIONS.SELECT_CURRENCY_AND_NETWORK)
+       }
+     }catch(e){
+       return this.notifyErr(e.message)
+     }
+     finally{
+       this.isLoading = false
+     }
+    },
     resetAllValues() {
+      this.coupons = [];
+      this.showCoupon = false;
       this.discount = 0;
+      this.couponDiscount = 0;
+      this.coupon = ""
       this.selectedCurrency = "";
       this.selectedNetwork = "";
       this.options.network = [
@@ -292,30 +401,44 @@ export default {
         { text: "Harmony (Coming Soon..)", value: "ONE", disabled: true },
       ];
     },
+    resetAllPayment(){
+      this.coupon = "";
+      this.discount = 0;
+      this.couponDiscount = 0;
+      this.coupons = []
+    },
     setDiscount(__arg) {
       if (__arg) {
         if (__arg == "HID") { 
+          this.resetAllPayment();
+          if(this.selectedNetwork==="BSC"){
           this.selectedNetwork = "";
+          }
           this.options.network = [
             { text: "Ethereum", value: "ETH", disabled: false },
             { text: "Polygon", value: "MATIC", disabled: false },
             {text: "Binance Smart Chain",value: "BSC",disabled: true},
             { text: "Harmony (Coming Soon..)", value: "ONE", disabled: true },
           ];
+          this.plan.grandTotal = 0;
           this.discount = (this.plan.price * 30) / 100;
         } else {
           this.discount = 0;
         }
         if (__arg == "MATIC") {
+          this.resetAllPayment();
+          // this.couponDiscount = (this.plan.price * this.fetchedCouponDiscount) / 100;
           this.options.network = [
             { text: "Ethereum", value: "ETH", disabled: true },
             { text: "Polygon", value: "MATIC", disabled: false },
             { text: "Binance Smart Chain",value: "BSC",disabled: true,},
             { text: "Harmony (Coming Soon..)", value: "ONE", disabled: true },
           ];
           this.selectedNetwork = "MATIC";
+
         }
         if (__arg == "ETH") {
+          this.resetAllPayment();
           this.options.network = [
             { text: "Ethereum", value: "ETH", disabled: false },
             { text: "Polygon", value: "MATIC", disabled: true },
@@ -325,6 +448,7 @@ export default {
           this.selectedNetwork = "ETH";
         }
         if (__arg == "BNB") {
+          this.resetAllPayment();
           this.options.network = [
             { text: "Ethereum", value: "ETH", disabled: true },
             { text: "Polygon", value: "MATIC", disabled: true },
@@ -334,7 +458,7 @@ export default {
           this.selectedNetwork = "BSC";
         }
          if (__arg == "USDT") {
-          this.selectedNetwork = "";
+          this.resetAllPayment();
           this.options.network = [
             { text: "Ethereum", value: "ETH", disabled: false },
             { text: "Polygon", value: "MATIC", disabled: false },
@@ -344,7 +468,7 @@ export default {
           //this.selectedNetwork = "ETH";
         }
          if (__arg == "USDC") {
-          this.selectedNetwork = "";
+          this.resetAllPayment();
           this.options.network = [
             { text: "Ethereum", value: "ETH", disabled: false },
             { text: "Polygon", value: "MATIC", disabled: false },
@@ -400,6 +524,9 @@ export default {
         var planbody = {};
         this.plan.selectedCurrency = this.selectedCurrency;
         this.plan.selectedNetwork = this.selectedNetwork;
+        if(this.applied===true){
+          this.plan.coupon_name =  this.coupon;
+        }
         this.plan.coupon_code = "Dummy30";
         planbody = Object.assign(planbody, this.plan);
 
@@ -425,7 +552,6 @@ export default {
           "Content-Type": "application/json",
           Authorization: `Bearer ${this.authToken}`,
         };
-
         const resp = await fetch(url, {
           method: "POST",
           body: JSON.stringify({

src/components/participant/Banner.vue

@@ -4,13 +4,15 @@
       <b-card no-body class="banner rounded-0">
         <img :src="logoUrl" @error="onBannerError($event)" v-if="!brokenUrl">
         <div class="no-banner" v-if="brokenUrl">
-          {{eventName}}
+          <!-- {{eventName}} -->
+         {{ truncate1(eventName,30) }}
         </div>
       </b-card>
     </b-col>
   </b-row>
 </template>
 <script>
+import {truncate} from '../../mixins/fieldValidationMixin'
 export default {
   props: {
     eventName: String,
@@ -22,10 +24,13 @@ export default {
   },
   data() {
     return {
-      brokenUrl: false
+      brokenUrl: false,
     }
   },
   methods: {
+      truncate1(str, number) {
+      return truncate(str, number);
+    },
     onBannerError(e) {
       console.error(e);
       this.brokenUrl = true

src/components/participant/NavBar.vue

@@ -19,7 +19,7 @@ color: white !important;
 		</b-navbar-brand>
 		<b-nav-item-dropdown size="sm" right class=" m-2 menu ml-auto text-white text-decoration-none">
 			<template #button-content>
-				<b-icon style="color:white" icon="menu-button-wide"></b-icon>
+				<b-icon style="color:var(--theme-text-color)" icon="menu-button-wide"></b-icon>
 			</template>
 			<b-dropdown-item to="/user/home/" @click="updateIsForm">
 				Home
@@ -57,7 +57,8 @@ export default {
 	computed: {
 		themeCss(){
 			return{
-				'--theme-bg-color': (this.themeData.themeColor && this.isForm) ? this.themeData.themeColor : config.app.themeBgColor
+				'--theme-bg-color': (this.themeData.themeColor && this.isForm) ? this.themeData.themeColor : config.app.themeBgColor,
+				'--theme-text-color': (this.themeData.buttonTextColor && this.isForm) ? this.themeData.buttonTextColor : 'white'
 			}
 		}
 	},