typo

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

@@ -260,7 +260,7 @@
                                 v-for="n in 12"
                                 v-bind:disabled="n < minCardMonth"
                                 v-bind:key="n"
-                            >{{generateMonthValue(n)}}</option>
+                            >{{ generateMonthValue(n) }}</option>
                         </select>
                     </div>
                 </div>
@@ -278,7 +278,7 @@
                             v-bind:value="$index + minCardYear"
                             v-for="(n, $index) in 12"
                             v-bind:key="n"
-                        >{{$index + minCardYear}}</option>
+                        >{{ $index + minCardYear }}</option>
                     </select>
                 </div>
 
@@ -312,7 +312,7 @@
                         </label>
                     </div>
 
-                    <button class="relative flex items-center justify-center px-6 py-1.5 bg-green hover:bg-green-700 text-white rounded-lg" v-on:click="invaildCard" :disabled="loading">
+                    <button v-if="! hideButton" class="relative flex items-center justify-center px-6 py-1.5 bg-green hover:bg-green-700 text-white rounded-lg" v-on:click="invaildCard" :disabled="loading">
                         <i
                             v-if="loading"
                             class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"
@@ -371,7 +371,9 @@ export default {
     props: {
         cards: {
             type: [Array, Object],
-            default: [],
+            default: function () {
+                return [];
+            },
             description: "Add Card Style"
         },
 
@@ -454,6 +456,12 @@ export default {
             description: "Placeholder Card CVV Text"
         },
 
+        hideButton: {
+            type: Boolean,
+            default: false,
+            description: "Confirm button"
+        },
+
         textButton: {
             type: String,
             default: 'Confirm',
@@ -554,7 +562,6 @@ export default {
             this.register_card = null;
         },
 
-
         onSelectedCard(card_id) {
             this.card_id = card_id;
             this.formData.card_id = card_id;
@@ -623,7 +630,8 @@ export default {
 
             this.unMaskCardNumber();
 
-            /*for (let i = number.length - 1; i >= 0; i--) {
+            /*
+            for (let i = number.length - 1; i >= 0; i--) {
                 let num = number.charAt(i);
 
                 if (isOdd) {
@@ -639,7 +647,8 @@ export default {
                 }
 
                 isOdd = !isOdd;
-            }*/
+            }
+            */
 
             this.formData.card_id = this.card_id;
 

resources/assets/js/mixins/global.js

@@ -24,6 +24,7 @@ import AkauntingConnectTransactions from './../components/AkauntingConnectTransa
 import AkauntingSwitch from './../components/AkauntingSwitch';
 import AkauntingSlider from './../components/AkauntingSlider';
 import AkauntingColor from './../components/AkauntingColor';
+import CardForm from './../components/CreditCard/CardForm';
 
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
@@ -61,6 +62,7 @@ export default {
         AkauntingSwitch,
         AkauntingSlider,
         AkauntingColor,
+        CardForm,
         [Select.name]: Select,
         [Option.name]: Option,
         [Steps.name]: Steps,
@@ -91,6 +93,16 @@ export default {
                 currency: {},
                 documents: [],
             },
+
+            cardData: {
+                cardName: '',
+                cardNumber: '',
+                cardMonth: '',
+                cardYear: '',
+                cardCvv: '',
+                storeCard: false,
+                card_id: 0,
+            },
         }
     },