{"version":3,"sources":["webpack:///./src/helpers/loadExternalScript.js","webpack:///./src/views/fund/components/CheckoutCardInput.vue?94eb","webpack:///src/views/fund/components/CheckoutCardInput.vue","webpack:///./src/views/fund/components/CheckoutCardInput.vue?7ab0","webpack:///./src/views/fund/components/CheckoutCardInput.vue","webpack:///./src/views/fund/components/CheckoutCardInput.vue?c572"],"names":["url","Promise","resolve","reject","scripts","document","querySelectorAll","length","remoteScript","createElement","type","onload","onerror","src","getElementsByTagName","appendChild","render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","ref","errors","any","_v","_s","errorMsg","_e","staticRenderFns","props","data","cardFieldName","cardFieldScope","emptyInput","computed","error","methods","onValidationChanged","includes","event","element","clear","isValid","has","add","scope","field","msg","getErrorMessage","$t","component"],"mappings":"kHAAe,gBAACA,GACd,OAAO,IAAIC,SAAQ,SAACC,EAASC,GAE3B,IAAMC,EAAUC,SAASC,iBAAT,sBAAyCN,EAAzC,OAChB,GAAII,EAAQG,OAEV,OAAOL,IAIT,IAAMM,EAAeH,SAASI,cAAc,UAC5CD,EAAaE,KAAO,kBACpBF,EAAaG,OAAS,WACpB,OAAOT,KAETM,EAAaI,QAAU,WACrB,OAAOT,KAETK,EAAaK,IAAMb,EACnBK,SAASS,qBAAqB,QAAQ,GAAGC,YAAYP,Q,2CCnBzD,IAAIQ,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,UAAU,CAACF,EAAG,MAAM,CAACE,YAAY,oCAAoCC,MAAM,CAAC,GAAK,uCAAuC,CAACH,EAAG,MAAM,CAACI,IAAI,OAAOF,YAAY,wBAAyBN,EAAIS,OAAOC,IAAI,kBAAmBN,EAAG,OAAO,CAACE,YAAY,kCAAkC,CAACN,EAAIW,GAAGX,EAAIY,GAAGZ,EAAIa,aAAab,EAAIc,QACpaC,EAAkB,G,oECWtB,GACEC,MAAO,CAAC,kBACRC,KAFF,WAGI,MAAO,CACLC,cAAe,cACfC,eAAgB,iBAChBC,WAAY,gBAGhBC,SAAU,CACRR,SADJ,WACA,WACA,2EAEM,OAAOS,EAAQA,EAAM,OAAS,KAIlC,QAjBF,uKAkBA,kEAlBA,uBAmBA,oBACA,mDACA,OACA,aACA,MACA,gBACA,qBAzBA,OA+BA,8BACA,8CACA,0BAjCA,wGAqCEC,QAAS,CACP,SADJ,oKAEA,OACA,+EAHA,SAKA,0BACA,0BANA,SASA,2BATA,cASA,EATA,yBAUA,SAVA,qCAYA,iBACA,0BACA,sBACA,4CAfA,kHAoBIC,oBApBJ,SAoBA,GACW,CAAC,cAAe,cAAe,OAAOC,SAASC,EAAMC,WACxDD,EAAMC,QAAU1B,KAAKmB,YAEvBnB,KAAKQ,OAAOmB,MAAM3B,KAAKkB,gBAElBO,EAAMG,SAAY5B,KAAKQ,OAAOqB,IAAIJ,EAAMC,UAC3C1B,KAAKQ,OAAOsB,IAAI,CACdC,MAAO/B,KAAKkB,eACZc,MAAOP,EAAMC,QACbO,IAAKjC,KAAKkC,gBAAgBT,EAAMC,YAKtCQ,gBAnCJ,SAmCA,GACM,MAAO,CACL,cAAelC,KAAKmC,GAAG,gDACvB,cAAenC,KAAKmC,GAAG,iDACvB,cAAenC,KAAKmC,GAAG,wDACvB,IAAOnC,KAAKmC,GAAG,iDACvB,MC1FyX,I,wBCQrXC,EAAY,eACd,EACAtC,EACAgB,GACA,EACA,KACA,WACA,MAIa,aAAAsB,E,kECnBf","file":"js/chunk-f171b6a6.854ba226.js","sourcesContent":["export default (url) => {\n  return new Promise((resolve, reject) => {\n    // check if the script loaded before\n    const scripts = document.querySelectorAll(`script[src='${url}']`)\n    if (scripts.length) {\n      // the script loaded before so we just return\n      return resolve()\n    }\n\n    // start loading\n    const remoteScript = document.createElement('script')\n    remoteScript.type = 'text/javascript'\n    remoteScript.onload = function () {\n      return resolve()\n    }\n    remoteScript.onerror = function () {\n      return reject()\n    }\n    remoteScript.src = url\n    document.getElementsByTagName('head')[0].appendChild(remoteScript)\n  })\n}\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"w-full\"},[_c('div',{staticClass:\"w-full flex items-center card p-2\",attrs:{\"id\":\"fund-credit-card-card-number-input\"}},[_c('div',{ref:\"card\",staticClass:\"w-full card-frame\"})]),(_vm.errors.any('checkout-input'))?_c('span',{staticClass:\"text-danger text-sm block mt-2\"},[_vm._v(_vm._s(_vm.errorMsg))]):_vm._e()])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"w-full\">\n    <div id=\"fund-credit-card-card-number-input\" class=\"w-full flex items-center card p-2\">\n      <div class=\"w-full card-frame\" ref=\"card\"></div>\n    </div>\n    <span class=\"text-danger text-sm block mt-2\" v-if=\"errors.any('checkout-input')\">{{ errorMsg }}</span>\n  </div>\n</template>\n\n<script>\nimport LoadExternalScript from '@/helpers/loadExternalScript'\n\nexport default {\n  props: ['cardHolderName'],\n  data () {\n    return {\n      cardFieldName: 'card-number',\n      cardFieldScope: 'checkout-input',\n      emptyInput: 'empty-input'\n    }\n  },\n  computed: {\n    errorMsg () {\n      const error = this.errors.items.find((el) => el.scope === this.cardFieldScope)\n\n      return error ? error['msg'] : ''\n    }\n  },\n\n  async mounted () {\n    await LoadExternalScript(window.speakol_configs.checkout_payment_frame_cdn)\n    await window.Frames.init({\n      publicKey: window.speakol_configs.checkoutPublicKey,\n      style: {\n        placeholder: {\n          base: {\n            color: '#BFBFBF',\n            fontSize: '14px'\n          }\n        }\n      }\n    })\n\n    window.Frames.addEventHandler(\n      window.Frames.Events.FRAME_VALIDATION_CHANGED,\n      this.onValidationChanged\n    )\n  },\n\n  methods: {\n    async getToken () {\n      let card = null\n      this.errors.remove(`${this.cardFieldScope}.${this.emptyInput}`)\n      try {\n        window.Frames.cardholder = {\n          name: this.cardHolderName\n        }\n\n        card = await window.Frames.submitCard()\n        return card.token\n      } catch (Error) {\n        this.errors.add({\n          scope: this.cardFieldScope,\n          field: this.emptyInput,\n          msg: this.getErrorMessage(this.emptyInput)\n        })\n      }\n    },\n\n    onValidationChanged (event) {\n      if (!['card-number', 'expiry-date', 'cvv'].includes(event.element)) {\n        event.element = this.emptyInput\n      }\n      this.errors.clear(this.cardFieldScope)\n\n      if (!event.isValid && !this.errors.has(event.element)) {\n        this.errors.add({\n          scope: this.cardFieldScope,\n          field: event.element,\n          msg: this.getErrorMessage(event.element)\n        })\n      }\n    },\n\n    getErrorMessage (element) {\n      return {\n        'empty-input': this.$t('advertisers_fund.fund.validation.empty_input'),\n        'card-number': this.$t('advertisers_fund.fund.validation.invalid_card'),\n        'expiry-date': this.$t('advertisers_fund.fund.validation.invalid_expiry_date'),\n        'cvv': this.$t('advertisers_fund.fund.validation.invalid_cvv')\n      }[element]\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$borderColor: #d8d8d8;\n\n.card {\n  border: 1px solid $borderColor;\n  border-radius: 4px;\n  height: 40px;\n}\n</style>\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CheckoutCardInput.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CheckoutCardInput.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./CheckoutCardInput.vue?vue&type=template&id=19417d11&scoped=true&\"\nimport script from \"./CheckoutCardInput.vue?vue&type=script&lang=js&\"\nexport * from \"./CheckoutCardInput.vue?vue&type=script&lang=js&\"\nimport style0 from \"./CheckoutCardInput.vue?vue&type=style&index=0&id=19417d11&lang=scss&scoped=true&\"\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  \"19417d11\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CheckoutCardInput.vue?vue&type=style&index=0&id=19417d11&lang=scss&scoped=true&\""],"sourceRoot":""}