%PDF-
%PDF-
Mini Shell
Mini Shell
{"version":3,"file":"components/payment-step.js","sources":["webpack:///./components/blocks/Booking/PaymentStep.vue?19bd","webpack:///./components/blocks/Booking/PaymentStep.vue","webpack:///./components/blocks/Booking/PaymentStep.vue?ef9c","webpack:///./components/blocks/Booking/PaymentStep.vue?5fc6"],"sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._ssrNode(\"<span class=\\\"block text-center text-3xl font-bold mb-6\\\">Payment</span> <div class=\\\"grid grid-cols-1 sm:grid-cols-2 gap-y-3 mb-6\\\"><div class=\\\"leading-6 text-center sm:text-left\\\">\"+_vm._ssrEscape(_vm._s(Object.keys(_vm.selected_slots).length)+\" x Sessions with \"+_vm._s(_vm.therapist.user.full_name))+\"</div> <div class=\\\"flex items-center justify-center sm:justify-end text-2xl font-bold\\\">\"+_vm._ssrEscape(_vm._s(_vm.totals.formatted))+\"</div></div> <div id=\\\"payment-request-wrapper\\\"\"+(_vm._ssrStyle(null,null, { display: (_vm.isPaymentRequestAllowed) ? '' : 'none' }))+\"><div class=\\\"w-full flex items-center justify-center mb-8\\\"><div id=\\\"payment-request-button\\\" class=\\\"w-full\\\"></div></div> <div class=\\\"relative text-center my-6\\\"><span class=\\\"absolute z-10 top-1/2 left-0 transform -translate-y-1/2 block w-full h-0.5 bg-gray\\\"></span> <span class=\\\"relative z-20 inline-block px-6 bg-white uppercase\\\">Or Pay with Card</span></div></div> \"+((_vm.isPaymentRequestAllowed == false)?(\"<div class=\\\"relative text-center my-6\\\"><span class=\\\"absolute z-10 top-1/2 left-0 transform -translate-y-1/2 block w-full h-0.5 bg-gray\\\"></span> <span class=\\\"relative z-20 inline-block px-6 bg-white uppercase\\\">Pay with Card</span></div>\"):\"<!---->\")+\" \"+((_vm.payment_methods.length > 0)?(\"<div class=\\\"grid grid-cols-1 gap-y-2 mb-6\\\">\"+(_vm._ssrList((_vm.payment_methods),function(payment_method,key){return (\"<label\"+(_vm._ssrAttr(\"for\",'payment_method-'+key))+(_vm._ssrClass(\"relative grid grid-cols-2 bg-white border border-black border-opacity-10 py-2 px-3 pl-12 rounded-lg transition cursor-pointer\",_vm.selected_payment_method == payment_method.id ? 'bg-gray' : ''))+\"><input type=\\\"radio\\\" name=\\\"payment_methods\\\"\"+(_vm._ssrAttr(\"id\",'payment_method-'+key))+(_vm._ssrAttr(\"value\",payment_method.id))+(_vm._ssrAttr(\"checked\",_vm._q(_vm.selected_payment_method,payment_method.id)))+\" class=\\\"hidden\\\"> <div\"+(_vm._ssrClass(\"absolute top-0 left-0.5 w-10 h-full bg-center bg-contain\",'card-icon-'+payment_method.card.brand))+\"></div> <span class=\\\"text-sm\\\">\"+_vm._ssrEscape(_vm._s(payment_method.billing_details.name))+\"</span> <div class=\\\"text-sm flex items-center justify-end\\\"><span class=\\\"mx-2\\\">\"+_vm._ssrEscape(\"****\"+_vm._s(payment_method.card.last4))+\"</span> <span class=\\\"mx-2\\\">\"+_vm._ssrEscape(_vm._s(payment_method.card.exp_month)+\"/\"+_vm._s(payment_method.card.exp_year))+\"</span></div></label>\")}))+\"</div>\"):\"<!---->\")+\" \"),_vm._ssrNode(\"<div\"+(_vm._ssrStyle(null,null, { display: (_vm.selected_payment_method == null) ? '' : 'none' }))+\">\",\"</div>\",[_c('ValidationObserver',{ref:\"paymentForm\"},[_c('form',{attrs:{\"role\":\"form\",\"method\":\"POST\"},on:{\"submit\":function($event){$event.preventDefault();return _vm.submitForm($event)}}},[_c('ValidationProvider',{attrs:{\"rules\":\"required\"},scopedSlots:_vm._u([{key:\"default\",fn:function(ref){\nvar errors = ref.errors;\nreturn [_c('t-input-group',{attrs:{\"label\":\"Name on Card\"}},[_c('t-input',{attrs:{\"type\":\"text\",\"placeholder\":\"Name on Card\"},model:{value:(_vm.card_name),callback:function ($$v) {_vm.card_name=$$v},expression:\"card_name\"}}),_vm._v(\" \"),(errors[0])?_c('span',{staticClass:\"field-invalid\"},[_vm._v(_vm._s(errors[0]))]):_vm._e()],1)]}}])}),_vm._v(\" \"),_c('t-input-group',{attrs:{\"label\":\"Card Information\"}},[_c('div',{staticClass:\"px-4 py-4 bg-white border border-black border-opacity-20 rounded-xl\",attrs:{\"id\":\"card-element\"}})]),_vm._v(\" \"),_c('div',{staticClass:\"flex flex-col items-center justify-center sm:px-10\"},[_c('button',{staticClass:\"btn btn-primary btn-small rounded-full w-full sm:w-auto\",attrs:{\"disabled\":_vm.working == true,\"type\":\"submit\"}},[(_vm.working == false)?_c('span',[_vm._v(\"Pay Now\")]):_c('span',{staticClass:\"flex items-center justify-center\"},[_c('svg',{staticClass:\"animate-spin -ml-1 mr-3 h-5 w-5 text-current\",attrs:{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\"}},[_c('circle',{staticClass:\"opacity-25\",attrs:{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\",\"stroke\":\"currentColor\",\"stroke-width\":\"4\"}}),_vm._v(\" \"),_c('path',{staticClass:\"opacity-75\",attrs:{\"fill\":\"currentColor\",\"d\":\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"}})]),_vm._v(\" \"),_c('span',[_vm._v(\"Processing\")])])]),_vm._v(\" \"),_c('button',{staticClass:\"mt-6 uppercase text-blue-light text-sm\",attrs:{\"type\":\"button\"},on:{\"click\":_vm.goBack}},[_vm._v(\"Go Back\")])])],1)])],1),_vm._ssrNode(\" \"+((_vm.selected_payment_method)?(\"<div class=\\\"flex flex-col items-center justify-center sm:px-10\\\"><button class=\\\"mb-2 uppercase text-blue-light text-sm\\\">Use New Card</button> <button\"+(_vm._ssrAttr(\"disabled\",_vm.working == true))+\" type=\\\"button\\\" class=\\\"btn btn-primary btn-small rounded-full w-full sm:w-auto\\\">\"+((_vm.working == false)?(\"<span>Pay Now</span>\"):(\"<span class=\\\"flex items-center justify-center\\\"><svg xmlns=\\\"http://www.w3.org/2000/svg\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\" class=\\\"animate-spin -ml-1 mr-3 h-5 w-5 text-current\\\"><circle cx=\\\"12\\\" cy=\\\"12\\\" r=\\\"10\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"4\\\" class=\\\"opacity-25\\\"></circle> <path fill=\\\"currentColor\\\" d=\\\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\\\" class=\\\"opacity-75\\\"></path></svg> <span>Processing</span></span>\"))+\"</button> <button type=\\\"button\\\" class=\\\"mt-6 uppercase text-blue-light text-sm\\\">Go Back</button></div>\"):\"<!---->\")+\" \"),_vm._ssrNode(\"<p class=\\\"text-sm text-center mt-6 text-black text-opacity-75\\\">\",\"</p>\",[_vm._ssrNode(\"By subscribing to Take a Seat you are agreeing to all site \"),_c('NuxtLink',{staticClass:\"text-blue-light hover:underline\",attrs:{\"to\":\"/terms-conditions\",\"target\":\"_blank\"}},[_vm._v(\"Terms and Conditions\")]),_vm._ssrNode(\". Please read carefully before continuing.\")],2)],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\nexport default {\n props: {\n value: {\n required: true\n },\n selected_slots: {\n type: Object,\n required: true\n }\n },\n\n\tdata() {\n\t\treturn {\n\t\t\terror: null,\n working: false,\n stripe: null,\n card: {},\n selected_payment_method: null,\n isPaymentRequestAllowed: false,\n\t\t\tpaymentRequest: {},\n card_name: null\n\t\t}\n\t},\n\n computed: {\n totals() {\n return this.$store.state.booking.summary.totals\n },\n therapist() {\n return this.$store.state.booking.therapist\n },\n payment_methods() {\n return this.$store.state.account.billing.paymentMethods\n },\n setup_intent() {\n return this.$store.state.account.billing.setupIntent\n },\n connect_id() {\n return this.$store.state.booking.payment.connect_id\n }\n },\n\n\tasync mounted() {\n await this.$store.dispatch('account/billing/setupIntent')\n await this.$store.dispatch('account/billing/getPaymentMethods')\n\n this.mountCard();\n\t},\n\n\tmethods: {\n\t\tmountCard() {\n\t\t\tconst elements = this.$stripe.elements();\n \n\t\t\tthis.card = elements.create('card', {\n style: {\n base: {\n fontSize: '15px',\n fontFamily: 'Poppins, sans-serif'\n }\n }\n });\n\n this.getPaymentRequest();\n\t\t\tthis.card.mount('#card-element');\n\t\t},\n\n submitForm() {\n this.$refs.paymentForm.validate().then(success => {\n if (!success) {\n return;\n }\n\n this.confirmCardSetup();\n });\n },\n\n async getPaymentRequest() {\n\t\t\tthis.paymentRequest = await this.$stripe.paymentRequest({\n\t\t\t\tcountry: 'GB',\n\t\t\t\tcurrency: 'gbp',\n\t\t\t\ttotal: {\n\t\t\t\t\tamount: parseInt(this.totals.amount),\n label: 'Takeaseat Booking with '+this.therapist.user.full_name,\n\t\t\t\t},\n\t\t\t\trequestPayerName: true,\n\t\t\t\trequestPayerEmail: true\n\t\t\t});\n\n\t\t\tthis.mountPaymentButton();\n\t\t},\n\n\t\tasync mountPaymentButton() {\n\t\t\tconst elements = this.$stripe.elements();\n\n\t\t\tlet prButton = elements.create('paymentRequestButton', {\n\t\t\t\tpaymentRequest: this.paymentRequest,\n\t\t\t});\n\n\t\t\t// Check the availability of the Payment Request API first.\n\t\t\tthis.paymentRequest.canMakePayment().then(function(result) {\n\t\t\t\tif (result) {\n this.isPaymentRequestAllowed = true;\n\t\t\t\t\tprButton.mount('#payment-request-button');\n\t\t\t\t} else {\n this.isPaymentRequestAllowed = false;\n\t\t\t\t}\n\t\t\t}.bind(this));\n\n this.paymentRequest.on('paymentmethod', function(event) {\n event.complete('success');\n this.createPayment(event.paymentMethod.id);\n }.bind(this));\n\t\t},\n\n async confirmCardSetup() {\n this.working = true;\n\n const { setupIntent, error } = await this.$stripe.confirmCardSetup(\n this.setup_intent, {\n payment_method: {\n card: this.card,\n billing_details: {\n name: this.card_name\n }\n }\n }\n );\n\n if (error) {\n this.$toast.error(error.message).goAway(3000);\n await this.$store.dispatch('account/billing/setupIntent')\n this.working = false;\n } else {\n this.createPayment(setupIntent.payment_method)\n }\n },\n\n async createPayment(payment_method) {\n this.working = true;\n\n await this.$axios.post('/booking/payment/'+this.therapist.user.id, {\n grand_total: this.totals.amount,\n sessions: this.selected_slots,\n sessions_count: Object.keys(this.selected_slots).length,\n payment_method: payment_method\n }).then((response) => {\n if(response.status == 200) {\n this.createBooking(response.data);\n }\n }).catch((error) => {\n this.working = false;\n this.$toast.error(error.response.data.message).goAway(3000);\n })\n },\n\n async createBooking(data) {\n this.working = true;\n\n await this.$axios.post('/booking/create', {\n sessions: this.selected_slots,\n amount: this.totals.amount,\n therapist_id: this.therapist.id,\n charges: data.charges,\n transfer: data.transfer\n }).then((response) => {\n if(response.status == 200) {\n this.$store.commit('booking/success/setBookings', response.data)\n this.$router.push({\n path: '/booking/success'\n })\n }\n }).catch((error) => {\n this.$toast.error(error.response.message).goAway(1000);\n this.working = false;\n })\n },\n\n goBack() {\n this.$emit(\"input\", 2);\n }\n\t}\n}\n","import mod from \"-!../../../node_modules/babel-loader/lib/index.js??ref--2-0!../../../node_modules/@nuxt/components/dist/loader.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PaymentStep.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/babel-loader/lib/index.js??ref--2-0!../../../node_modules/@nuxt/components/dist/loader.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PaymentStep.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./PaymentStep.vue?vue&type=template&id=ccb0a27a&\"\nimport script from \"./PaymentStep.vue?vue&type=script&lang=js&\"\nexport * from \"./PaymentStep.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 \"dbe2298a\"\n \n)\n\nexport default component.exports"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;;;;;ACJA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AADA;AAGA;AACA;AACA;AAFA;AAJA;AACA;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAhBA;AACA;AAiBA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAFA;AADA;AADA;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAFA;AAIA;AACA;AARA;AAWA;AACA;AACA;AACA;AACA;AAEA;AACA;AADA;AACA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AACA;AADA;AAFA;AADA;AACA;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAJA;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AALA;AAOA;AACA;AACA;AACA;AADA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAnIA;AAjDA;;ACnHA;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;A","sourceRoot":""}
Zerion Mini Shell 1.0