Merge pull request #1572 from hypersign-protocol/issues/new1524

HfButtons component is used in all other components

src/components/admin/createProjectSlider/CreateProjectSlide.vue

@@ -312,12 +312,22 @@
           </b-card> -->
         </div>
 
-        <button class="btn btn-primary mt-3 button-theme  mr-3" :style="buttonThemeCss" type="button" @click="openPreview">
+        <!-- <button class="btn btn-primary mt-3 button-theme  mr-3" :style="buttonThemeCss" type="button" @click="openPreview">
           Preview
-        </button>
-        <button class="btn btn-primary mt-3 button-theme" :style="buttonThemeCss" type="button" @click="saveProject">
+        </button> -->
+        <hf-buttons
+        name="Preview"
+        @executeAction="openPreview()"
+        customClass="btn btn-primary mt-3 button-theme  mr-3"
+        ></hf-buttons>
+        <!-- <button class="btn btn-primary mt-3 button-theme" :style="buttonThemeCss" type="button" @click="saveProject">
           Save
-        </button>
+        </button> -->
+        <hf-buttons
+        name="Save"
+        @executeAction="saveProject"
+        customClass="btn btn-primary mt-3 button-theme"
+        ></hf-buttons>
       </div>
     </b-sidebar>
   </div>
@@ -329,13 +339,15 @@ import EventActionConfig from "./components/EventActionConfig.vue";
 import PreviewConfig from "./components/PreviewConfig.vue";
 import GeneralConfig from "./components/GeneralConfig.vue";
 import ReferralConfig from "./components/ReferralConfig.vue";
+import HfButtons from "../../elements/HfButtons.vue"
 export default {
   name: "CreateProjectSlide",
   components: {
     GeneralConfig,
     EventActionConfig,
     ReferralConfig,
     PreviewConfig,
+    HfButtons
   },
 
   props: {

src/components/admin/createProjectSlider/components/EventActionConfig.vue

@@ -634,33 +634,47 @@
         v-if="isCreate == true"
       >
         <div class="col-lg-6 col-md-9 px-0">
-          <button
+          <!-- <button
             @click="handleEventActionAdd()"
             class="btn button-theme"
             :style="buttonThemeCss" 
             type="button"
           >
             {{ eventActionList.includes(selected) ? "Update" : "Add" }}
-          </button>
+          </button> -->
+          <hf-buttons
+          name="Add"
+          @executeAction="handleEventActionAdd()"
+          ></hf-buttons>
         </div>
       </div>
       <div class="row g-3 justify-content-md-end w-100 mt-4" v-else>
         <div class="col-lg-6 col-md-9 px-0">
-          <button
+          <!-- <button
             @click="handleEventActionUpdate()"
             class="btn button-theme slight-left-margin"
             :style="buttonThemeCss" 
             type="button"
           >
             Update
-          </button>
-          <button
+          </button> -->
+          <hf-buttons
+          name="Update"
+          @executeAction="handleEventActionUpdate()"
+          customClass="btn button-theme slight-left-margin"
+          ></hf-buttons>
+          <!-- <button
             @click="handleEventActionDelete()"
             class="btn btn-danger slight-left-margin"
             type="button"
           >
             Delete
-          </button>
+          </button> -->
+          <hf-buttons
+          name="Delete"
+          @executeAction="handleEventActionDelete()"
+          customClass="btn btn-danger slight-left-margin"
+          ></hf-buttons>
         </div>
       </div>
     </div>
@@ -749,15 +763,15 @@ import "codemirror/addon/lint/json-lint";
 import "codemirror/keymap/sublime";
 import jsonlint from "jsonlint";
 import { JSHINT } from "jshint";
-
+import HfButtons from "../../../elements/HfButtons.vue"
 import Web3 from "web3";
 Vue.use(Editor);
 
 window.JSHINT = JSHINT;
 window.jsonlint = jsonlint;
 export default {
   name: "EventActionCongif",
-  components: { codemirror },
+  components: { codemirror, HfButtons },
   filters: {
     pretty: function (value) {
       return JSON.stringify(JSON.parse(value), null, 2);

src/components/admin/createProjectSlider/components/GeneralConfig.vue

@@ -205,7 +205,12 @@
             <b-form-select v-model="selected.type" :options="options"></b-form-select>
           </div>  
           <div class="col-lg-1 col-md-1 px-0" >
-            <button @click="handleEventActionAdd()" class="btn button-theme slight-left-margin-5"  :style="buttonThemeCss" type="button"> {{eventActionList.includes(selected) ? "Cancel" : "Add"}}</button>
+            <!-- <button @click="handleEventActionAdd()" class="btn button-theme slight-left-margin-5"  :style="buttonThemeCss" type="button"> {{eventActionList.includes(selected) ? "Cancel" : "Add"}}</button> -->
+            <hf-buttons
+            name="Add"
+            @executeAction="handleEventActionAdd()"
+            customClass="btn button-theme slight-left-margin-5"
+            ></hf-buttons>
           </div>
         </div>
       </div>
@@ -231,9 +236,10 @@ import Datepicker from 'vuejs-datetimepicker'
 import notificationMixins from "../../../../mixins/notificationMixins"
 import Messages from "../../../../utils/messages/admin/en";
 import ToolTips from "../../../basic/toolTips.vue";
+import HfButtons from "../../../elements/HfButtons.vue"
 export default {
   name: "GeneralConfig",
-  components: {Datepicker, ToolTips},
+  components: {Datepicker, ToolTips, HfButtons},
   computed:{
 buttonThemeCss() {
       return {

src/components/admin/selectPlanSlider/SelectPlanSlide.vue

@@ -95,10 +95,15 @@
             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"
+            <!-- <button type="button" class="btn btn-outline-primary button-theme"
               :style="buttonThemeCss"
               @click="applyCoupon"
-              >Apply</button>
+              >Apply</button> -->
+              <hf-buttons
+              name="Apply"
+              customClass="btn btn-outline-primary button-theme"
+              @executeAction="applyCoupon()"
+              ></hf-buttons>
           </div>
           </div>
         <hr />
@@ -178,14 +183,19 @@
         <div>
           <div class="row" style="margin-top: 2%">
             <div class="col-md-12">
-              <b-button
+              <!-- <b-button
                 block
                 variant="primary"
                 class="btn-plan popular"
                 :style="buttonThemeCss"
                 @click="payment"
                 >Pay ${{ grandTotal }}</b-button
-              >
+              > -->
+              <hf-buttons
+              :name="`Pay $`+ grandTotal"               
+              customClass="btn btn-outline-dark btn-plan popular"
+              @executeAction="payment()"
+              ></hf-buttons>
             </div>
           </div>
         </div>
@@ -204,14 +214,16 @@ 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";
+import HfButtons from "../../../components/elements/HfButtons.vue"
 export default {
   name: "CreateProjectSlide",
   components: {
     GeneralConfig,
     EventActionConfig,
     ReferralConfig,
     InputDate,
-    Loading
+    Loading,
+    HfButtons
   },
 
   props: {

src/components/elements/HfButtons.vue

@@ -1,5 +1,6 @@
 <template>
-  <button :class="customClass ? `${customClass}` : 'btn btn-primary button-theme'" :style="buttonThemeCss"
+  <button :class="customClass ? `${customClass}` : 'btn button-theme'" :style="buttonThemeCss"
+  :title="title"
   @click="emitExecuteAction()"
   >
     {{name}} 
@@ -11,14 +12,21 @@
 import config from "../../config"
 export default {
     props:{
-      name:String,
+      name:{
+        type: String,
+        require:true
+      },
       iconClass: {
         type: String,
         require: false
       }, 
       customClass:{
         type:String,
         require:false
+      },
+      title:{
+        type:String,
+        require:false
       }
     },
     computed:{

src/views/admin/CreateApp.vue

@@ -131,9 +131,25 @@
             </div>
             </form>
             <div class="allButtons" style="float:right">
-							<button v-if="!isEdit" class="btn button-theme " :style="buttonThemeCss" type="submit" @click.prevent="generateApp">Create</button>
-              <button v-if="isEdit" class="btn  button-theme" :style="buttonThemeCss" type="submit" @click.prevent="update">Update</button>
-              <button v-if="isEdit" class="btn btn-light slight-left-margin" type="button" @click.prevent="cancel">Cancel</button>
+							<!-- <button v-if="!isEdit" class="btn button-theme " :style="buttonThemeCss" type="submit" @click.prevent="generateApp">Create</button> -->
+              <hf-buttons
+              v-if="!isEdit"
+              name="Create"
+              @executeAction="generateApp()"
+              ></hf-buttons>
+              <!-- <button v-if="isEdit" class="btn  button-theme" :style="buttonThemeCss" type="submit" @click.prevent="update">Update</button> -->
+              <hf-buttons
+              v-if="isEdit"
+              name="Update"
+              @executeAction="update()"
+              ></hf-buttons>
+              <!-- <button v-if="isEdit" class="btn btn-danger slight-left-margin" type="button" @click.prevent="cancel">Cancel</button> -->
+              <hf-buttons
+              v-if="isEdit"
+              name="Cancel"
+              customClass="btn btn-danger slight-left-margin"
+              @executeAction="cancel()"
+              ></hf-buttons>
             </div>
 					</div>
 				</div>
@@ -204,9 +220,10 @@ import {
   truncate
 } from "../../mixins/fieldValidationMixin"
 import Messages from "../../utils/messages/admin/en"
+import HfButtons from "../../components/elements/HfButtons.vue"
 export default {
   name: "CreateApp",
-  components: {Loading, ToolTips},
+  components: {Loading, ToolTips, HfButtons},
   computed:{
        buttonThemeCss() {
       return {

src/views/admin/Events.vue

@@ -208,6 +208,7 @@ i {
             name="Create"
             @executeAction="openCreateSidebar()"
             iconClass="fas fa-plus text-black"
+            title="Create Event"
           >
           </hf-buttons>
         </div>

src/views/admin/Subscription.vue

@@ -110,7 +110,15 @@ i {
       </div>
     </div>
     <template v-for="plan in plans">
-      <button  type="button" class="btn btn-outline-dark btn-plan free" :title="(subscriptions.find((el) => el.planId === plan._id)) ? 'You are already subscribed' : ''" v-if="plan.price === 0" :key="plan._id" :disabled="subscriptions.find((el) => el.planId === plan._id)" @click="subscribe(plan._id)">Free Basic Plan</button>
+ <!-- <button  type="button" class="btn btn-outline-dark btn-plan free" :title="(subscriptions.find((el) => el.planId === plan._id)) ? 'You are already subscribed' : ''" v-if="plan.price === 0" :key="plan._id" :disabled="subscriptions.find((el) => el.planId === plan._id)" @click="subscribe(plan._id)">Free Basic Plan</button> -->
+      <hf-buttons
+      name="Free Basic Plan"
+      customClass="btn btn-outline-dark btn-plan free"
+      :title="(subscriptions.find((el) => el.planId === plan._id)) ? 'You are already subscribed' : ''"
+      v-if="plan.price ===0" :key="plan._id"
+      :disabled="subscriptions.find((el) => el.planId === plan._id)"
+      @executeAction="subscribe(plan._id)"
+      ></hf-buttons>
     </template>
     <div class="divider">
       <small class="small-desc">
@@ -130,7 +138,15 @@ i {
                 <span>$</span>
                 {{ plan.price }}
               </div>
-              <button v-if="!accessuser.adminName && !accessToken" type="button" class="btn btn-outline-dark btn-plan" :class="(plan.planName === 'Lambo') ? 'popular' : ''" @click="openSelectPlanSidebar(plan)">Select Plan</button>
+              <!-- <button v-if="!accessuser.adminName && !accessToken" type="button" class="btn btn-outline-dark btn-plan" 
+              :class="(plan.planName === 'Lambo') ? 'popular' : ''" @click="openSelectPlanSidebar(plan)">Select Plan</button> -->
+              <hf-buttons
+              v-if="!accessuser.adminName && !accessToken"
+              name="Select Plan"
+              @executeAction="openSelectPlanSidebar(plan)"
+              :class="(plan.planName === 'Lambo') ? 'popular' : ''"
+              customClass="btn btn-outline-dark btn-plan"
+              ></hf-buttons>
               <div class="pro-feature">
                 <ul>
                   <li>
@@ -250,9 +266,10 @@ import Messages from "../../utils/messages/admin/en"
 import eventBus from '../../eventBus';
 import { truncate } from '../../mixins/fieldValidationMixin';
 import config from "../../config"
+import HfButtons from "../../components/elements/HfButtons.vue"
 export default {
   name: "Subscription",
-  components: { Loading, SelectPlanSlide},
+  components: { Loading, SelectPlanSlide, HfButtons},
 
   data() {
     return {