Portal payments store card added

resources/assets/js/components/CreditCard/CardForm.vue

@@ -258,12 +258,24 @@
                 </div>
             </div>
 
-            <button class="btn btn-icon btn-success" v-on:click="invaildCard" :disabled="loading">
-                <div v-if="loading" class="aka-loader-frame">
-                    <div class="aka-loader"></div>
+            <div class="form-group" v-if="storeCard">
+                <div class="custom-control custom-checkbox">
+                    <input @input="changeStoreCard" id="store_card" name="store_card" type="checkbox" value="true" class="custom-control-input">
+                    <label for="store_card" class="custom-control-label">
+                        <strong>{{ textCheckBox }}</strong>
+                    </label>
                 </div>
-                <span v-if="!loading" class="btn-inner--text">{{ textButton }}</span>
-            </button>
+            </div>
+
+            <div class="row">
+
+                <button class="btn btn-icon btn-success" v-on:click="invaildCard" :disabled="loading">
+                    <div v-if="loading" class="aka-loader-frame">
+                        <div class="aka-loader"></div>
+                    </div>
+                    <span v-if="!loading" class="btn-inner--text">{{ textButton }}</span>
+                </button>
+            </div>
         </div>
 
         <div class="col-md-6 mt--3">
@@ -327,6 +339,13 @@ export default {
             description: "Add Card Style"
         },
 
+        storeCard: {
+            type: Boolean,
+            default: false,
+            icon: '',
+            description: "Save card"
+        },
+
         path: {
             type: String,
             default: null,
@@ -393,6 +412,12 @@ export default {
             description: "Add Card Style"
         },
 
+        textCheckBox: {
+            type: String,
+            default: 'Store Card',
+            description: "Selected store card"
+        },
+
         formData: {
             type: Object,
             default: () => {
@@ -401,7 +426,8 @@ export default {
                     cardNumber: '',
                     cardMonth: '',
                     cardYear: '',
-                    cardCvv: ''
+                    cardCvv: '',
+                    storeCard: false,
                 }
             }
         },
@@ -425,7 +451,8 @@ export default {
                 cardName: 'v-card-name',
                 cardMonth: 'v-card-month',
                 cardYear: 'v-card-year',
-                cardCvv: 'v-card-cvv'
+                cardCvv: 'v-card-cvv',
+                storeCard: 'v-card-store-card'
             },
             minCardYear: new Date().getFullYear(),
             isCardNumberMasked: true,
@@ -457,6 +484,14 @@ export default {
     },
 
     methods: {
+        changeStoreCard(e) {
+            this.formData.storeCard = false;
+
+            if (e.target.checked) {
+                this.formData.storeCard = true;
+            }
+        },
+
         generateMonthValue(n) {
             return n < 10 ? `0${n}` : n;
         },

resources/assets/js/views/portal/invoices.js

@@ -14,7 +14,6 @@ import DashboardPlugin from './../../plugins/dashboard-plugin';
 import Global from './../../mixins/global';
 
 import Form from './../../plugins/form';
-
 import CardForm from './../../components/CreditCard/CardForm';
 
 // plugin setup
@@ -41,7 +40,8 @@ const app = new Vue({
                 cardNumber: '',
                 cardMonth: '',
                 cardYear: '',
-                cardCvv: ''
+                cardCvv: '',
+                storeCard: false,
             }
         }
     },
@@ -95,7 +95,8 @@ const app = new Vue({
                                         cardNumber: '',
                                         cardMonth: '',
                                         cardYear: '',
-                                        cardCvv: ''
+                                        cardCvv: '',
+                                        storeCard: false,
                                     }
                                 }
                             },
@@ -184,7 +185,8 @@ const app = new Vue({
                                         cardNumber: '',
                                         cardMonth: '',
                                         cardYear: '',
-                                        cardCvv: ''
+                                        cardCvv: '',
+                                        storeCard: false,
                                     }
                                 }
                             },