Develop

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,20 @@
             </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"
+            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 +110,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 +201,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,11 +251,27 @@ 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{
+
+        total = this.plan.price;
+        this.plan.grandTotal = total;
+
+      }
+      return this.plan.grandTotal
     },
   },
 
@@ -244,12 +282,17 @@ export default {
       // 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,
+      couponCount:0,
       subTotal: 0,
       discount: 0,
+      couponDiscount: 0,
+      fetchedCouponDiscount:0,
       selectedCurrency: "",
       selectedNetwork: "",
       marketPairs: [],
-
+      coupon:"",
+      isLoading:false,
       options: {
         currency: [
           {
@@ -281,8 +324,58 @@ export default {
     this.fetchTokenPriceCMC();
   },
   methods: {
+   async applyCoupon(){
+
+     try{
+       if(this.selectedCurrency !== "" && this.selectedNetwork !== "")
+       {
+         if(!this.couponCount>0){
+
+     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) {
+            return this.notifyErr(json);
+          } else {
+            this.couponCount = 1;
+            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 applied already")
+       }
+       }
+     }catch(e){
+       return this.notifyErr(e.message)
+     }
+     finally{
+       this.isLoading = false
+     }
+    },
     resetAllValues() {
+      this.couponCount = 0;
+      this.showCoupon = false;
       this.discount = 0;
+      this.couponDiscount = 0;
+      this.coupon = ""
       this.selectedCurrency = "";
       this.selectedNetwork = "";
       this.options.network = [
@@ -292,30 +385,43 @@ export default {
         { text: "Harmony (Coming Soon..)", value: "ONE", disabled: true },
       ];
     },
+    resetAllPayment(){
+      this.coupon = "";
+      this.showCoupon = false;
+      this.discount = 0;
+      this.couponDiscount = 0;
+      this.couponCount = 0;
+    },
     setDiscount(__arg) {
       if (__arg) {
         if (__arg == "HID") { 
+          this.resetAllPayment();
           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 +431,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,6 +441,7 @@ export default {
           this.selectedNetwork = "BSC";
         }
          if (__arg == "USDT") {
+          this.resetAllPayment();
           this.selectedNetwork = "";
           this.options.network = [
             { text: "Ethereum", value: "ETH", disabled: false },
@@ -344,6 +452,7 @@ export default {
           //this.selectedNetwork = "ETH";
         }
          if (__arg == "USDC") {
+          this.resetAllPayment();
           this.selectedNetwork = "";
           this.options.network = [
             { text: "Ethereum", value: "ETH", disabled: false },
@@ -353,6 +462,7 @@ export default {
           ];
          // this.selectedNetwork = "ETH";
         }
+        this.grandTotal;
       }
     },
     getHidPrice() {
@@ -400,6 +510,7 @@ export default {
         var planbody = {};
         this.plan.selectedCurrency = this.selectedCurrency;
         this.plan.selectedNetwork = this.selectedNetwork;
+        this.plan.coupon_name =  this.coupon;
         this.plan.coupon_code = "Dummy30";
         planbody = Object.assign(planbody, this.plan);
 
@@ -425,7 +536,6 @@ export default {
           "Content-Type": "application/json",
           Authorization: `Bearer ${this.authToken}`,
         };
-
         const resp = await fetch(url, {
           method: "POST",
           body: JSON.stringify({