From 1508663ed5f68b78715b63aa94db4bb9630bfe6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cihan=20=C5=9Eent=C3=BCrk?= <cihansenturk96@gmail.com>
Date: Sun, 17 Jan 2021 17:26:57 +0300
Subject: [PATCH] Portal payments store card added

---
 .../js/components/CreditCard/CardForm.vue     | 49 ++++++++++++++++---
 resources/assets/js/views/portal/invoices.js  | 10 ++--
 .../portal/payment_method/hosted.blade.php    |  1 +
 3 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/resources/assets/js/components/CreditCard/CardForm.vue b/resources/assets/js/components/CreditCard/CardForm.vue
index 0c18de84b..59e16cfbf 100644
--- a/resources/assets/js/components/CreditCard/CardForm.vue
+++ b/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;
         },
diff --git a/resources/assets/js/views/portal/invoices.js b/resources/assets/js/views/portal/invoices.js
index 75f4e9b39..6c5344504 100644
--- a/resources/assets/js/views/portal/invoices.js
+++ b/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,
                                     }
                                 }
                             },
diff --git a/resources/views/partials/portal/payment_method/hosted.blade.php b/resources/views/partials/portal/payment_method/hosted.blade.php
index 73b1079a3..efc5eb7cd 100644
--- a/resources/views/partials/portal/payment_method/hosted.blade.php
+++ b/resources/views/partials/portal/payment_method/hosted.blade.php
@@ -11,5 +11,6 @@
     :text-cvv="'{{ trans('general.card.cvv') }}'"
     :placeholder-card-cvv="'{{ trans('general.form.enter', ['field' => trans('general.card.cvv')]) }}'"
     :textButton="'{{ trans('general.confirm') }}'"
+    :store-card="true"
     :form-data="formData"
 />