{"version":3,"sources":["webpack:///./src/assets/img/remis-pin.svg","webpack:///./src/assets/img/Component 3.svg","webpack:///./src/views/Customer/Vehicle/cardInformation.vue","webpack:///./src/components/modals/Vehicle/cardActionModal.vue","webpack:///src/components/modals/Vehicle/cardActionModal.vue","webpack:///./src/components/modals/Vehicle/cardActionModal.vue?f710","webpack:///./src/components/modals/Vehicle/cardActionModal.vue?ac12","webpack:///src/views/Customer/Vehicle/cardInformation.vue","webpack:///./src/views/Customer/Vehicle/cardInformation.vue?289c","webpack:///./src/views/Customer/Vehicle/cardInformation.vue?3994","webpack:///./src/views/Customer/Vehicle/cardInformation.vue?a085","webpack:///./src/assets/img/delete-icon.svg","webpack:///./src/assets/img/danskebank.jpg","webpack:///./src/assets/img/Group 2575.png"],"names":["module","exports","render","_vm","this","_c","_self","staticClass","staticStyle","_v","_s","$t","cardInfo","cardNumberFormatted","convertThousand","amount","style","backgroundImage","backgroundUrl","backgroundPosition","backgroundRepeat","backgroundSize","attrs","maxDate","$root","$i18n","locale","customShortcuts","model","value","dateRange","callback","$$v","expression","name","query","id","$route","vehicleId","cardId","cardNumber","on","$event","showModal","require","directives","rawName","showLoader","ref","refreshGrid","pageSettings","toolbar","search","toolbarClick","usedLang","passedInfo","staticRenderFns","modalWidth","action","oldPin","domProps","target","composing","_e","newPin","pin","isButtonDisabled","cursor","changePin","blockCard","$","MODAL_WIDTH","props","data","created","methods","closeAddCardModal","generateRandomNumber","formatPin","message","type","duration","post","configObject","then","res","catch","error","e","component","title","components","MasterLayout","TableLoader","CardActionModal","provide","grid","cardBackgroundUrl","transactionsCount","startDate","endDate","pluginStartDate","pluginEndDate","start","end","key","label","pageSizes","pageCount","pageSize","operator","ignoreCase","watch","mounted","dt","card","sessionStorage","searchFun","dataBound","fileName","getTransactions","get","cur","dataSource","getCardDetails","response","cardBlock_1","uniqueId","toFixed","toString","replace"],"mappings":"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AC,YACAC,aAEA1D,6CACAC,QAAA0D,oBAAAC,iBAGAC,OACAlF,wBACA,wBAGA,+BACA,yDACA,gBAEA,qDACA,gBAGA,0BAIA4C,UACA,wBACA,uBAEAuC,UACA,2DACA,qCACA,0CACA,OACA,oDACAC,cACA,2BACAC,oBACAC,yCAKA,4BACA,uBAQA,cACA,oEACA,iBACApB,YATA,6BACA,sBAEA1B,iCACA+C,SAQA1C,SACA2C,qBACA,sCAEAjE,gBACA,oBACA,iBAKA,MACA,mBACA,OACAkE,2CAEA,mCACA,QAGAtE,cACA,qBACA,+BAGAuE,kBACA,mBACA,WACAC,IACA,0HACAtC,qBAEAC,KAAAC,IACA,QACAA,qBACA,EACAqC,UACAA,6CACAA,2DACAA,2CAEA,mBACA,gDACAC,oBAEA,qBAEArC,MAAAC,IACA,mBAGAqC,iBACA,WACA1C,KACA,uEACA,GACAC,qBAEAC,KAAAyC,IACAA,iBACA,yCACA,mCACA,6BACAA,2BACAC,kBACA,qBACA,yBAEAxC,MAAA,SAEA3C,aACA,oCACA,iBACAe,SACAlB,6CACAuF,kCAGAjH,mBACA,mBAGA,EACAkH,QAAA,GACAC,WACAC,QAAA,6BALA,UC9YuX,ICQnX,G,UAAY,eACd,EACAhI,EACAsD,GACA,EACA,KACA,KACA,OAIa,e,2CCnBf,W,qBCAAxD,EAAOC,QAAU,IAA0B,gC,4CCA3CD,EAAOC,QAAU,IAA0B,+B,qBCA3CD,EAAOC,QAAU,IAA0B","file":"js/chunk-036425e0.797c29d7.js","sourcesContent":["module.exports = __webpack_public_path__ + \"img/remis-pin.832a0125.svg\";","module.exports = __webpack_public_path__ + \"img/Component 3.98792bc7.svg\";","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('MasterLayout',[_c('div',{staticClass:\"fuel_consumption_row\"},[_c('div',{staticClass:\"d-flex justify-content-around rounded-cards primary-bg py-4 p-3 ml-2\",staticStyle:{\"flex\":\"0 0 25%\"}},[_c('div',{staticClass:\"text-white manage_card\",staticStyle:{\"width\":\"100%\"}},[_c('div',{staticClass:\"space_justify\"},[_c('p',{staticClass:\"amount no_marg_bottom\"},[_vm._v(\"\\n              \"+_vm._s(_vm.$t(\"text.extendedReport.cardBalance\"))+\"\\n            \")]),_vm._v(\" \"),_c('p',{staticClass:\"gold-text no_marg_bottom amount\"},[_vm._v(\"\\n              \"+_vm._s(_vm.cardInfo.cardNumberFormatted)+\"\\n            \")])]),_vm._v(\" \"),_c('div',{staticClass:\"text-white manage_card card_margin\"},[_c('p',{staticClass:\"no_marg_bottom amount\",staticStyle:{\"text-align\":\"left\"}},[_vm._v(\"\\n              ₦ \"+_vm._s(_vm.convertThousand(_vm.cardInfo.amount))+\"\\n            \")])])])]),_vm._v(\" \"),_c('div',{staticClass:\"fuel_consumption_row_right_section mr-3 vr__bg\",staticStyle:{\"border-radius\":\"12px\",\"flex\":\"0 0 72%\"},style:([\n          {\n            backgroundImage: `linear-gradient(rgb(41, 39, 39 , 0.92), rgb(41, 39, 39, 0.92)), url(${_vm.backgroundUrl})`,\n            backgroundPosition: 'center',\n            backgroundRepeat: 'no-repeat',\n            backgroundSize: 'cover',\n          },\n        ])},[_c('div',{staticClass:\"row align-items-center justify-content-center\",staticStyle:{\"height\":\"100%\"}},[_c('div',{staticClass:\"col-md-8\",staticStyle:{\"display\":\"flex\",\"justify-content\":\"center\"}},[_c('div',{staticClass:\"drop_down_section mt-2 mr-2\"},[_c('div',{staticClass:\"drop_down_div align-items-center\"},[_c('vue-ctk-date-time-picker',{attrs:{\"max-date\":_vm.maxDate,\"range\":true,\"autoClose\":true,\"locale\":this.$root.$i18n.locale,\"custom-shortcuts\":_vm.customShortcuts,\"color\":\"#4b2d73\",\"format\":\"DDMMYYYY\",\"formatted\":\"DD/MM/YYYY\",\"label\":_vm.$t('text.calendar.dateRange')},model:{value:(_vm.dateRange),callback:function ($$v) {_vm.dateRange=$$v},expression:\"dateRange\"}})],1)])]),_vm._v(\" \"),_c('div',{staticClass:\"col-xl-3 col-md-4 card_action_holder\"},[_c('router-link',{staticClass:\"fund_card_btn mt-2\",attrs:{\"to\":{\n                name: 'fund_card',\n                query: {\n                  id: _vm.$route.query.vehicleId,\n                  cardId: _vm.$route.query.cardId,\n                  cardNumber: _vm.$route.query.cardNumber,\n                },\n              }}},[_vm._v(\"\\n              \"+_vm._s(_vm.$t(\"text.extendedReport.fundCard\"))+\"\\n            \")])],1)]),_vm._v(\" \"),_c('div',{staticClass:\"transaction_period_text text-center mt-5\"})])]),_vm._v(\" \"),_c('section',{staticClass:\"justify_end row\"},[_c('div',{staticClass:\"col-xl-3 col-md-4 card_action_holder\"},[_c('div',{staticClass:\"row signup-btn card_actions mt-3 pr-2\",on:{\"click\":function($event){return _vm.showModal('Change Pin')}}},[_c('div',{staticClass:\"col-2 align_center\"},[_c('img',{attrs:{\"src\":require(\"@/assets/img/remis-pin.svg\"),\"alt\":\"\",\"width\":\"35\"}})]),_vm._v(\" \"),_c('div',{staticClass:\"col-8 mt-3\"},[_c('p',[_vm._v(_vm._s(_vm.$t(\"text.extendedReport.changePin\")))])]),_vm._v(\" \"),_c('div',{staticClass:\"col-2 text-right mt-3 arrow\"},[_c('img',{staticClass:\"pin-image\",attrs:{\"src\":require(\"@/assets/img/Component 3.svg\"),\"alt\":\"\"}})])])]),_vm._v(\" \"),_c('div',{staticClass:\"col-xl-3 col-md-4\"},[_c('div',{staticClass:\"row light-blue card_actions mt-3 pr-2\",on:{\"click\":function($event){return _vm.showModal('Block Card')}}},[_c('div',{staticClass:\"col-2 align_center\"},[_c('img',{attrs:{\"src\":require(\"@/assets/img/delete-icon.svg\"),\"alt\":\"\",\"width\":\"35\"}})]),_vm._v(\" \"),_c('div',{staticClass:\"col-8 mt-3\"},[_c('p',[_vm._v(_vm._s(_vm.$t(\"text.extendedReport.blockCard\")))])]),_vm._v(\" \"),_c('div',{staticClass:\"col-2 text-right mt-3 arrow\"},[_c('img',{staticClass:\"pin-image\",attrs:{\"src\":require(\"@/assets/img/Component 3.svg\"),\"alt\":\"\"}})])])])]),_vm._v(\" \"),_c('section',{staticClass:\"section__row mt-3\"},[_c('h5',[_vm._v(_vm._s(_vm.$t(\"text.extendedReport.cardTrans\")))]),_vm._v(\" \"),_c('div',{},[_c('div',{},[_c('ejs-grid',{directives:[{name:\"show\",rawName:\"v-show\",value:(!_vm.showLoader),expression:\"!showLoader\"}],ref:\"dataGrid\",attrs:{\"created\":_vm.refreshGrid,\"allowPaging\":true,\"allowSorting\":true,\"pageSettings\":_vm.pageSettings,\"toolbar\":_vm.toolbar,\"searchSettings\":_vm.search,\"allowExcelExport\":true,\"allowPdfExport\":true,\"toolbarClick\":_vm.toolbarClick,\"locale\":_vm.usedLang}},[_c('e-columns',[_c('e-column',{attrs:{\"width\":\"70\",\"field\":\"index\",\"headerText\":_vm.$t('text.extendedReport.index')}}),_vm._v(\" \"),_c('e-column',{attrs:{\"width\":\"200\",\"field\":\"date\",\"headerText\":_vm.$t('text.extendedReport.date')}}),_vm._v(\" \"),_c('e-column',{attrs:{\"width\":\"150\",\"field\":\"amount\",\"headerText\":_vm.$t('text.extendedReport.amountNaira'),\"textAlign\":\"right\"}}),_vm._v(\" \"),_c('e-column',{attrs:{\"width\":\"100\",\"field\":\"type\",\"headerText\":_vm.$t('text.extendedReport.type'),\"textAlign\":\"center\"}}),_vm._v(\" \"),_c('e-column',{attrs:{\"width\":\"200\",\"field\":\"description\",\"headerText\":_vm.$t('text.extendedReport.description'),\"textAlign\":\"right\"}})],1)],1),_vm._v(\" \"),_c('TableLoader',{attrs:{\"showLoader\":_vm.showLoader}})],1)])])]),_vm._v(\" \"),_c('CardActionModal',{attrs:{\"passedInfo\":_vm.passedInfo}})],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('modal',{staticClass:\"cardActionModal\",attrs:{\"name\":\"cardActionModal\",\"transition\":\"pop-out\",\"width\":_vm.modalWidth,\"height\":490}},[_c('div',{staticClass:\"desktop-modal-container home_modal_container\"},[_c('div',{staticClass:\"left-modal-view\"},[_c('div',{staticClass:\"p-1 remis-card-conainer\"},[_c('img',{attrs:{\"src\":require(\"@/assets/img/Group 2575.png\")}}),_vm._v(\" \"),_c('div',{staticClass:\"dash-card-container\"},[_c('h3',{staticClass:\"text-black card-number-text\"},[_vm._v(\"\\n            \"+_vm._s(_vm.passedInfo.cardNumber)+\"\\n          \")])])])]),_vm._v(\" \"),_c('div',{staticClass:\"right-modal-view pt-1\"},[_c('div',{staticClass:\"section-wrapper\"},[_c('div',{staticClass:\"text-center modal_header\"},[_vm._v(_vm._s(_vm.passedInfo.action))]),_vm._v(\" \"),_c('form',{staticClass:\"mt-4\"},[(_vm.passedInfo.action == 'Change Pin')?_c('div',{staticClass:\"mt-1\"},[_c('label',[_vm._v(_vm._s(_vm.$t(\"text.addCardVehicle.oldPin\")))]),_vm._v(\" \"),_c('div',{staticClass:\"form_input\"},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.oldPin),expression:\"oldPin\"}],staticClass:\"form-control\",attrs:{\"type\":\"password\",\"maxlength\":\"4\"},domProps:{\"value\":(_vm.oldPin)},on:{\"input\":function($event){if($event.target.composing)return;_vm.oldPin=$event.target.value}}})])]):_vm._e(),_vm._v(\" \"),(_vm.passedInfo.action == 'Change Pin')?_c('div',{staticClass:\"mt-1\"},[_c('label',[_vm._v(_vm._s(_vm.$t(\"text.addCardVehicle.newPin\")))]),_vm._v(\" \"),_c('div',{staticClass:\"form_input\"},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.newPin),expression:\"newPin\"}],staticClass:\"form-control\",attrs:{\"type\":\"password\",\"maxlength\":\"4\"},domProps:{\"value\":(_vm.newPin)},on:{\"input\":function($event){if($event.target.composing)return;_vm.newPin=$event.target.value}}})])]):_vm._e(),_vm._v(\" \"),(_vm.passedInfo.action == 'Block Card')?_c('div',{staticClass:\"mt-1\"},[_c('label',[_vm._v(_vm._s(_vm.$t(\"text.addCardVehicle.pin\")))]),_vm._v(\" \"),_c('div',{staticClass:\"form_input\"},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.pin),expression:\"pin\"}],staticClass:\"form-control\",attrs:{\"type\":\"password\",\"maxlength\":\"4\"},domProps:{\"value\":(_vm.pin)},on:{\"input\":function($event){if($event.target.composing)return;_vm.pin=$event.target.value}}})])]):_vm._e(),_vm._v(\" \"),_c('div',{staticClass:\"mt-3\"},[_c('div',{staticClass:\"form_input\"},[_c('button',{staticClass:\"rem-btn w-100 main mobile-btn-height gold_color\",style:([\n                  _vm.isButtonDisabled\n                    ? { cursor: 'not-allowed' }\n                    : { cursor: 'pointer' },\n                ]),attrs:{\"disabled\":_vm.isButtonDisabled ? true : null},on:{\"click\":function($event){_vm.passedInfo.action == 'Change Pin'\n                    ? _vm.changePin($event)\n                    : _vm.blockCard($event)}}},[_vm._v(\"\\n                \"+_vm._s(_vm.passedInfo.action)+\"\\n                \"),_c('img',{staticClass:\"ml-3 loader\",staticStyle:{\"display\":\"none\"},attrs:{\"src\":require(\"@/assets/img/git_loader.gif\"),\"width\":\"25px\"}})])])])])])])])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <modal\r\n    class=\"cardActionModal\"\r\n    name=\"cardActionModal\"\r\n    transition=\"pop-out\"\r\n    :width=\"modalWidth\"\r\n    :height=\"490\"\r\n  >\r\n    <div class=\"desktop-modal-container home_modal_container\">\r\n      <div class=\"left-modal-view\">\r\n        <!-- <img src=\"@/assets/img/remis-fleet.png\"  /> -->\r\n        <!-- <remis-card :cardNumber=\"cardNumberSelected\"></remis-card> -->\r\n        <div class=\"p-1 remis-card-conainer\">\r\n          <img src=\"@/assets/img/Group 2575.png\" class=\"\" />\r\n          <div class=\"dash-card-container\">\r\n            <h3 class=\"text-black card-number-text\">\r\n              {{ passedInfo.cardNumber }}\r\n            </h3>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"right-modal-view pt-1\">\r\n        <div class=\"section-wrapper\">\r\n          <div class=\"text-center modal_header\">{{ passedInfo.action }}</div>\r\n          <form class=\"mt-4\">\r\n            <div class=\"mt-1\" v-if=\"passedInfo.action == 'Change Pin'\">\r\n              <label>{{ $t(\"text.addCardVehicle.oldPin\") }}</label>\r\n              <div class=\"form_input\">\r\n                <input\r\n                  type=\"password\"\r\n                  maxlength=\"4\"\r\n                  class=\"form-control\"\r\n                  v-model=\"oldPin\"\r\n                />\r\n              </div>\r\n            </div>\r\n            <div class=\"mt-1\" v-if=\"passedInfo.action == 'Change Pin'\">\r\n              <label>{{ $t(\"text.addCardVehicle.newPin\") }}</label>\r\n              <div class=\"form_input\">\r\n                <input\r\n                  type=\"password\"\r\n                  maxlength=\"4\"\r\n                  class=\"form-control\"\r\n                  v-model=\"newPin\"\r\n                />\r\n              </div>\r\n            </div>\r\n            <div class=\"mt-1\" v-if=\"passedInfo.action == 'Block Card'\">\r\n              <label>{{ $t(\"text.addCardVehicle.pin\") }}</label>\r\n              <div class=\"form_input\">\r\n                <input\r\n                  type=\"password\"\r\n                  maxlength=\"4\"\r\n                  class=\"form-control\"\r\n                  v-model=\"pin\"\r\n                />\r\n              </div>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n              <div class=\"form_input\">\r\n                <button\r\n                  class=\"rem-btn w-100 main mobile-btn-height gold_color\"\r\n                  @click=\"\r\n                    passedInfo.action == 'Change Pin'\r\n                      ? changePin($event)\r\n                      : blockCard($event)\r\n                  \"\r\n                  :disabled=\"isButtonDisabled ? true : null\"\r\n                  :style=\"[\r\n                    isButtonDisabled\r\n                      ? { cursor: 'not-allowed' }\r\n                      : { cursor: 'pointer' },\r\n                  ]\"\r\n                >\r\n                  {{ passedInfo.action }}\r\n                  <img\r\n                    src=\"@/assets/img/git_loader.gif\"\r\n                    style=\"display: none\"\r\n                    width=\"25px\"\r\n                    class=\"ml-3 loader\"\r\n                  />\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </modal>\r\n</template>\r\n<script>\r\nimport configObject from \"@/config\";\r\nimport JQuery from \"jquery\";\r\nlet $ = JQuery;\r\n\r\nconst MODAL_WIDTH = 700;\r\n\r\nexport default {\r\n  name: \"cardActionModal\",\r\n  props: [\"passedInfo\"],\r\n  data() {\r\n    return {\r\n      modalWidth: MODAL_WIDTH,\r\n      oldPin: null,\r\n      newPin: null,\r\n      pin: null,\r\n      isButtonDisabled: false,\r\n    };\r\n  },\r\n  created() {\r\n    this.modalWidth = 850;\r\n  },\r\n  methods: {\r\n    closeAddCardModal() {\r\n      this.$modal.hide(\"cardActionModal\");\r\n    },\r\n    generateRandomNumber() {\r\n      return Math.floor(Math.random() * 9);\r\n    },\r\n    formatPin(pin) {\r\n      let randNum1 = this.generateRandomNumber();\r\n      let randNum2 = this.generateRandomNumber();\r\n      let randNum3 = this.generateRandomNumber();\r\n\r\n      const two = pin.substring(0, 2);\r\n      const lastTwo = pin.slice(2);\r\n      return `${randNum1}${two}${randNum2}${lastTwo}${randNum3}`;\r\n    },\r\n    changePin($event) {\r\n      $event.preventDefault();\r\n\r\n      if (!this.oldPin) {\r\n        this.$toast.open({\r\n          message: this.$t(\"text.addCardVehicle.oldPinError\"),\r\n          type: \"error\",\r\n          duration: 5000,\r\n        });\r\n        return;\r\n      }\r\n\r\n      if (this.oldPin.length !== 4) {\r\n        this.$toast.open({\r\n          message: this.$t(\"text.addCardVehicle.fourDigitErr\"),\r\n          type: \"error\",\r\n          duration: 3000,\r\n        });\r\n        return;\r\n      }\r\n\r\n      if (!this.newPin) {\r\n        this.$toast.open({\r\n          message: this.$t(\"text.addCardVehicle.newPinErr\"),\r\n          type: \"error\",\r\n          duration: 3000,\r\n        });\r\n        return;\r\n      }\r\n\r\n      if (this.newPin.length !== 4) {\r\n        this.$toast.open({\r\n          message: this.$t(\"text.addCardVehicle.newPinFourErr\"),\r\n          type: \"error\",\r\n          duration: 3000,\r\n        });\r\n        return;\r\n      }\r\n\r\n      const data = {\r\n        oldPin: this.formatPin(this.oldPin),\r\n        newPin: this.formatPin(this.newPin),\r\n      };\r\n\r\n      this.isButtonDisabled = true;\r\n      $(\".loader\").show();\r\n\r\n      this.axios\r\n        .post(\r\n          `${configObject.apiBaseUrl}/Card/ChangePin/${this.passedInfo.uniqueId}`,\r\n          data,\r\n          configObject.authConfig()\r\n        )\r\n        .then((res) => {\r\n          this.$toast.open({\r\n            message: this.$t(\"text.addCardVehicle.successfullyChangedPin\"),\r\n            type: \"success\",\r\n            duration: 3000,\r\n          });\r\n          this.oldPin = null;\r\n          this.newPin = null;\r\n          this.isButtonDisabled = false;\r\n          $(\".loader\").hide();\r\n          this.$modal.hide(\"cardActionModal\");\r\n        })\r\n        .catch((error) => {\r\n          this.$toast.open({\r\n            message: error.response.data.message,\r\n            type: \"error\",\r\n            duration: 3000,\r\n          });\r\n          this.isButtonDisabled = false;\r\n          $(\".loader\").hide();\r\n        });\r\n    },\r\n    blockCard(e) {\r\n      e.preventDefault();\r\n      this.$router.push({ name: \"vehicle\" });\r\n      return;\r\n\r\n      if (!this.pin) {\r\n        this.$toast.open({\r\n          message: this.$t(\"text.addCardVehicle.pinError\"),\r\n          type: \"error\",\r\n          duration: 3000,\r\n        });\r\n        return;\r\n      }\r\n\r\n      if (this.pin.length !== 4) {\r\n        this.$toast.open({\r\n          message: this.$t(\"text.addCardVehicle.fourDigitErr\"),\r\n          type: \"error\",\r\n          duration: 3000,\r\n        });\r\n        return;\r\n      }\r\n\r\n      const data = {\r\n        pin: this.formatPin(this.pin),\r\n      };\r\n\r\n      let resp = confirm(this.$t(\"text.addCardVehicle.sureBlockCard\"));\r\n      if (resp) {\r\n        $(\".loader\").show();\r\n        this.isButtonDisabled = true;\r\n\r\n        this.axios\r\n          .put(\r\n            `${configObject.apiBaseUrl}/Card/Block/${this.passedInfo.uniqueId}`,\r\n            data,\r\n            configObject.authConfig()\r\n          )\r\n          .then((res) => {\r\n            this.$toast.open({\r\n              message: this.$t(\"text.addCardVehicle.successfullyBlockedCard\"),\r\n              type: \"success\",\r\n              duration: 3000,\r\n            });\r\n            $(\".loader\").hide();\r\n            this.isButtonDisabled = false;\r\n            this.$modal.hide(\"cardActionModal\");\r\n            this.$router.push({ name: \"vehicle\" });\r\n          })\r\n          .catch((error) => {\r\n            this.$toast.open({\r\n              message: error.response.data.message,\r\n              type: \"error\",\r\n              duration: 3000,\r\n            });\r\n            $(\".loader\").hide();\r\n            this.isButtonDisabled = false;\r\n          });\r\n      }\r\n    },\r\n  },\r\n};\r\n</script>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./cardActionModal.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./cardActionModal.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./cardActionModal.vue?vue&type=template&id=7c706e04&\"\nimport script from \"./cardActionModal.vue?vue&type=script&lang=js&\"\nexport * from \"./cardActionModal.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","<template>\r\n  <div>\r\n    <MasterLayout>\r\n      <div class=\"fuel_consumption_row\">\r\n        <div\r\n          class=\"d-flex justify-content-around rounded-cards primary-bg py-4 p-3 ml-2\"\r\n          style=\"flex: 0 0 25%\"\r\n        >\r\n          <div class=\"text-white manage_card\" style=\"width: 100%\">\r\n            <div class=\"space_justify\">\r\n              <p class=\"amount no_marg_bottom\">\r\n                {{ $t(\"text.extendedReport.cardBalance\") }}\r\n              </p>\r\n              <p class=\"gold-text no_marg_bottom amount\">\r\n                {{ cardInfo.cardNumberFormatted }}\r\n              </p>\r\n            </div>\r\n            <div class=\"text-white manage_card card_margin\">\r\n              <p class=\"no_marg_bottom amount\" style=\"text-align: left\">\r\n                ₦ {{ convertThousand(cardInfo.amount) }}\r\n              </p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"fuel_consumption_row_right_section mr-3 vr__bg\"\r\n          style=\"border-radius: 12px; flex: 0 0 72%\"\r\n          :style=\"[\r\n            {\r\n              backgroundImage: `linear-gradient(rgb(41, 39, 39 , 0.92), rgb(41, 39, 39, 0.92)), url(${backgroundUrl})`,\r\n              backgroundPosition: 'center',\r\n              backgroundRepeat: 'no-repeat',\r\n              backgroundSize: 'cover',\r\n            },\r\n          ]\"\r\n        >\r\n          <div\r\n            class=\"row align-items-center justify-content-center\"\r\n            style=\"height: 100%\"\r\n          >\r\n            <!-- <div class=\"col-md-4\" style=\"display: flex;justify-content: center;\">\r\n                <h4 class=\"text-center text-white\">Card Transactions</h4>\r\n            </div> -->\r\n            <div\r\n              class=\"col-md-8\"\r\n              style=\"display: flex; justify-content: center\"\r\n            >\r\n              <div class=\"drop_down_section mt-2 mr-2\">\r\n                <div class=\"drop_down_div align-items-center\">\r\n                  <vue-ctk-date-time-picker\r\n                    v-model=\"dateRange\"\r\n                    :max-date=\"maxDate\"\r\n                    :range=\"true\"\r\n                    :autoClose=\"true\"\r\n                    :locale=\"this.$root.$i18n.locale\"\r\n                    :custom-shortcuts=\"customShortcuts\"\r\n                    color=\"#4b2d73\"\r\n                    format=\"DDMMYYYY\"\r\n                    formatted=\"DD/MM/YYYY\"\r\n                    :label=\"$t('text.calendar.dateRange')\"\r\n                  />\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-xl-3 col-md-4 card_action_holder\">\r\n              <router-link\r\n                :to=\"{\r\n                  name: 'fund_card',\r\n                  query: {\r\n                    id: $route.query.vehicleId,\r\n                    cardId: $route.query.cardId,\r\n                    cardNumber: $route.query.cardNumber,\r\n                  },\r\n                }\"\r\n                class=\"fund_card_btn mt-2\"\r\n              >\r\n                {{ $t(\"text.extendedReport.fundCard\") }}\r\n              </router-link>\r\n            </div>\r\n          </div>\r\n          <div class=\"transaction_period_text text-center mt-5\"></div>\r\n        </div>\r\n      </div>\r\n      <section class=\"justify_end row\">\r\n        <div class=\"col-xl-3 col-md-4 card_action_holder\">\r\n          <div\r\n            class=\"row signup-btn card_actions mt-3 pr-2\"\r\n            @click=\"showModal('Change Pin')\"\r\n          >\r\n            <div class=\"col-2 align_center\">\r\n              <img src=\"@/assets/img/remis-pin.svg\" alt=\"\" width=\"35\" />\r\n            </div>\r\n            <div class=\"col-8 mt-3\">\r\n              <p>{{ $t(\"text.extendedReport.changePin\") }}</p>\r\n            </div>\r\n\r\n            <div class=\"col-2 text-right mt-3 arrow\">\r\n              <img\r\n                class=\"pin-image\"\r\n                src=\"@/assets/img/Component 3.svg\"\r\n                alt=\"\"\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-xl-3 col-md-4\">\r\n          <div\r\n            class=\"row light-blue card_actions mt-3 pr-2\"\r\n            @click=\"showModal('Block Card')\"\r\n          >\r\n            <div class=\"col-2 align_center\">\r\n              <img src=\"@/assets/img/delete-icon.svg\" alt=\"\" width=\"35\" />\r\n            </div>\r\n            <div class=\"col-8 mt-3\">\r\n              <p>{{ $t(\"text.extendedReport.blockCard\") }}</p>\r\n            </div>\r\n\r\n            <div class=\"col-2 text-right mt-3 arrow\">\r\n              <img\r\n                class=\"pin-image\"\r\n                src=\"@/assets/img/Component 3.svg\"\r\n                alt=\"\"\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </section>\r\n      <section class=\"section__row mt-3\">\r\n        <h5>{{ $t(\"text.extendedReport.cardTrans\") }}</h5>\r\n        <div class=\"\">\r\n          <div class=\"\">\r\n            <ejs-grid\r\n              v-show=\"!showLoader\"\r\n              ref=\"dataGrid\"\r\n              :created=\"refreshGrid\"\r\n              :allowPaging=\"true\"\r\n              :allowSorting=\"true\"\r\n              :pageSettings=\"pageSettings\"\r\n              :toolbar=\"toolbar\"\r\n              :searchSettings=\"search\"\r\n              :allowExcelExport=\"true\"\r\n              :allowPdfExport=\"true\"\r\n              :toolbarClick=\"toolbarClick\"\r\n              :locale=\"usedLang\"\r\n            >\r\n              <e-columns>\r\n                <e-column\r\n                  width=\"70\"\r\n                  field=\"index\"\r\n                  :headerText=\"$t('text.extendedReport.index')\"\r\n                ></e-column>\r\n                <e-column\r\n                  width=\"200\"\r\n                  field=\"date\"\r\n                  :headerText=\"$t('text.extendedReport.date')\"\r\n                ></e-column>\r\n                <e-column\r\n                  width=\"150\"\r\n                  field=\"amount\"\r\n                  :headerText=\"$t('text.extendedReport.amountNaira')\"\r\n                  textAlign=\"right\"\r\n                ></e-column>\r\n                <e-column\r\n                  width=\"100\"\r\n                  field=\"type\"\r\n                  :headerText=\"$t('text.extendedReport.type')\"\r\n                  textAlign=\"center\"\r\n                ></e-column>\r\n                <e-column\r\n                  width=\"200\"\r\n                  field=\"description\"\r\n                  :headerText=\"$t('text.extendedReport.description')\"\r\n                  textAlign=\"right\"\r\n                ></e-column>\r\n              </e-columns>\r\n            </ejs-grid>\r\n\r\n            <TableLoader :showLoader=\"showLoader\" />\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </MasterLayout>\r\n    <CardActionModal :passedInfo=\"passedInfo\"></CardActionModal>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport MasterLayout from \"@/views/Customer/MasterLayout.vue\";\r\nimport backgroundUrl from \"@/assets/img/danskebank.jpg\";\r\nimport cardBackgroundUrl from \"@/assets/img/Group393.svg\";\r\nimport CardActionModal from \"@/components/modals/Vehicle/cardActionModal\";\r\nimport configObject from \"@/config\";\r\nimport TableLoader from \"@/components/tableLoader/index\";\r\nimport {\r\n  Page,\r\n  Sort,\r\n  Toolbar,\r\n  Search,\r\n  Resize,\r\n  ExcelExport,\r\n  PdfExport,\r\n} from \"@syncfusion/ej2-vue-grids\";\r\nimport JQuery from \"jquery\";\r\nlet $ = JQuery;\r\n\r\nexport default {\r\n  title: \"Card Transactions - Epump Portal\",\r\n  name: \"DashboardHome\",\r\n  components: {\r\n    MasterLayout,\r\n    TableLoader,\r\n    CardActionModal,\r\n  },\r\n  provide: {\r\n    grid: [Page, Sort, Toolbar, Search, Resize, ExcelExport, PdfExport],\r\n  },\r\n  data() {\r\n    return {\r\n      usedLang: this.$store.getters.getLanguage,\r\n      backgroundUrl,\r\n      cardBackgroundUrl,\r\n      passedInfo: {},\r\n      cardInfo: {},\r\n      transactionsCount: 0,\r\n      showLoader: false,\r\n      startDate: \"\",\r\n      maxDate: this.$moment(new Date()).format(\"YYYY-MM-DD\"),\r\n      endDate: \"\",\r\n      pluginStartDate: this.$moment().subtract(7, \"days\").format(\"D-M-YYYY\"),\r\n      pluginEndDate: this.$moment().format(\"D-M-YYYY\"),\r\n      dateRange: { start: this.pluginStartDate, end: this.pluginEndDate },\r\n      customShortcuts: [\r\n        { key: \"Today\", label: this.$t(\"text.calendar.today\"), value: \"day\" },\r\n        {\r\n          key: \"yesterday\",\r\n          label: this.$t(\"text.calendar.yesterday\"),\r\n          value: \"-day\",\r\n        },\r\n        {\r\n          key: \"last7Days\",\r\n          label: this.$t(\"text.calendar.last7Days\"),\r\n          value: 7,\r\n        },\r\n        {\r\n          key: \"lastWeek\",\r\n          label: this.$t(\"text.calendar.lastWeek\"),\r\n          value: \"-isoWeek\",\r\n        },\r\n        {\r\n          key: \"last30Days\",\r\n          label: this.$t(\"text.calendar.last30Days\"),\r\n          value: 30,\r\n        },\r\n        {\r\n          key: \"lastMonth\",\r\n          label: this.$t(\"text.calendar.lastMonth\"),\r\n          value: \"-month\",\r\n        },\r\n      ],\r\n      pageSettings: {\r\n        pageSizes: [10, 20, 50, 100, 200],\r\n        pageCount: 4,\r\n        pageSize: 10,\r\n      },\r\n      toolbar: [\"ExcelExport\", \"PdfExport\", \"Search\"],\r\n      search: { operator: \"contains\", ignoreCase: true },\r\n    };\r\n  },\r\n  watch: {\r\n    dateRange: function (newRange, oldRange) {\r\n      if (!this.cardInfo.uniqueId) {\r\n        return;\r\n      }\r\n      if (newRange.start !== null && newRange.end !== null) {\r\n        this.startDate = this.$moment(newRange.start, \"DD-MM-YYYY\").format(\r\n          \"MMMM D, YYYY\"\r\n        );\r\n        this.endDate = this.$moment(newRange.end, \"DD-MM-YYYY\").format(\r\n          \"MMMM D, YYYY\"\r\n        );\r\n\r\n        this.getTransactions();\r\n      }\r\n    },\r\n  },\r\n  created() {\r\n    this.dateRange.start = \"\";\r\n    this.dateRange.end = \"\";\r\n  },\r\n  mounted() {\r\n    if (this.$route.query.cardId && !this.$route.query.vehicleId) {\r\n      this.cardId = this.$route.query.cardId;\r\n      let card = sessionStorage.getItem(this.cardId);\r\n      if (!card) {\r\n        let dt = JSON.parse(localStorage.getItem(\"cardsList\"));\r\n        dt.forEach((my) => {\r\n          if (my.uniqueId === this.cardId) {\r\n            card = JSON.stringify(my);\r\n            sessionStorage.setItem(this.cardId, card);\r\n          }\r\n        });\r\n      }\r\n\r\n      this.cardInfo = JSON.parse(card);\r\n      this.getTransactions();\r\n    }\r\n    if (this.$route.query.vehicleId) {\r\n      this.getCardDetails();\r\n    }\r\n    $(\".e-input\").keyup(function (e) {\r\n      searchFun(e);\r\n    });\r\n    function searchFun(event) {\r\n      var grid = document.getElementsByClassName(\"e-grid\")[0].ej2_instances[0];\r\n      var value = event.target.value;\r\n      grid.search(value);\r\n    }\r\n  },\r\n  methods: {\r\n    dataBound: function () {\r\n      this.$refs.dataGrid.autoFitColumns();\r\n    },\r\n    toolbarClick(args) {\r\n      switch (args.item.text) {\r\n        case \"PDF Export\":\r\n          let pdfExportProperties = {\r\n            pageOrientation: \"Landscape\",\r\n            fileName: \"Card Transactions.pdf\",\r\n          };\r\n          break;\r\n        case \"Excel Export\":\r\n          let excelExportProperties = {\r\n            fileName: \"Vehicles Fuel Consumption.xlsx\",\r\n          };\r\n          this.$refs.dataGrid.excelExport(excelExportProperties);\r\n          break;\r\n      }\r\n    },\r\n    refreshGrid() {\r\n      if (this.$refs.dataGrid) {\r\n        this.$refs.dataGrid.refresh();\r\n      }\r\n    },\r\n    getTransactions() {\r\n      this.showLoader = true;\r\n      this.axios\r\n        .get(\r\n          `${configObject.apiBaseUrl}/Card/GetTransactions/${this.cardInfo.uniqueId}?startDate=${this.startDate}&endDate=${this.endDate}`,\r\n          configObject.authConfig()\r\n        )\r\n        .then((res) => {\r\n          let index = 0;\r\n          res.data.forEach((cur) => {\r\n            ++index;\r\n            cur.index = index;\r\n            cur.amount = this.convertThousand(cur.amountSpent);\r\n            cur.date = this.$moment(cur.date).format(\"DD MMMM YYYY hh:mm A\");\r\n            cur.type = cur.type == \"Remove\" ? \"Debit\" : \"Credit\";\r\n          });\r\n          this.showLoader = false;\r\n          this.$refs.dataGrid.ej2Instances.setProperties({\r\n            dataSource: res.data,\r\n          });\r\n          this.refreshGrid();\r\n        })\r\n        .catch((error) => {\r\n          this.loading = false;\r\n        });\r\n    },\r\n    getCardDetails() {\r\n      this.axios\r\n        .post(\r\n          `${configObject.apiBaseUrl}/Card/VehicleCard/${this.$route.query.vehicleId}`,\r\n          {},\r\n          configObject.authConfig()\r\n        )\r\n        .then((response) => {\r\n          response.data = response.data[0];\r\n          const cardBlock_1 = response.data.cardNumber.substring(0, 3);\r\n          const cardBlock_2 = response.data.cardNumber.substring(3, 6);\r\n          const cardBlock_3 = response.data.cardNumber.slice(6);\r\n          response.data.cardNumberFormatted =\r\n            cardBlock_1 + \"   \" + cardBlock_2 + \"   \" + cardBlock_3;\r\n          this.cardInfo = response.data;\r\n          this.getTransactions();\r\n        })\r\n        .catch(() => {});\r\n    },\r\n    showModal(action) {\r\n      this.$modal.show(\"cardActionModal\");\r\n      this.passedInfo = {\r\n        action,\r\n        cardNumber: this.cardInfo.cardNumberFormatted,\r\n        uniqueId: this.cardInfo.uniqueId,\r\n      };\r\n    },\r\n    convertThousand(request) {\r\n      if (!isFinite(request)) {\r\n        return \"0.00\";\r\n      }\r\n      return request\r\n        .toFixed(2)\r\n        .toString()\r\n        .replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style>\r\n@media screen and (max-width: 602px) {\r\n  .cardActionModal .v--modal-box.v--modal {\r\n    top: 50%;\r\n    width: 90% !important;\r\n    margin: 0 auto !important;\r\n    height: 350px !important;\r\n    left: 0 !important;\r\n    overflow: auto;\r\n  }\r\n\r\n  .left-modal-view {\r\n    display: none !important;\r\n  }\r\n\r\n  .desktop-modal-container .right-modal-view {\r\n    -ms-flex: 0 0 100%;\r\n    flex: 0 0 100%;\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./cardInformation.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./cardInformation.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./cardInformation.vue?vue&type=template&id=b111d0de&\"\nimport script from \"./cardInformation.vue?vue&type=script&lang=js&\"\nexport * from \"./cardInformation.vue?vue&type=script&lang=js&\"\nimport style0 from \"./cardInformation.vue?vue&type=style&index=0&id=b111d0de&prod&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./cardInformation.vue?vue&type=style&index=0&id=b111d0de&prod&lang=css&\"","module.exports = __webpack_public_path__ + \"img/delete-icon.20653219.svg\";","module.exports = __webpack_public_path__ + \"img/danskebank.4823e410.jpg\";","module.exports = __webpack_public_path__ + \"img/Group 2575.51360b23.png\";"],"sourceRoot":""}