{"version":3,"sources":["webpack:///./src/components/contents/BillPayments/Data.vue","webpack:///./src/components/contents/BillPayments/Data.vue?6e91","webpack:///./src/components/contents/BillPayments/Data.vue?3df3"],"names":["class","_createBlock","_component_q_page","_createElementVNode","_createVNode","_component_q_form","greedy","ref","style","_normalizeStyle","$options","screenWidth","_component_AppSelect","$data","form","provider","$event","val","getBundles","options","providers","label","placeholder","lazy-rules","loading","pageLoading","rules","bundle","bundles","bundlesLoading","_hoisted_1","_toDisplayString","formatMoney","amount","_component_AppInput","businessPhone","mask","unmasked-value","type","phone","onClick","_cache","args","rechargeSelf","_component_AppButton","disabled","dataButtonState","viewSummary","_component_ConfirmationModal","showModal","showConfirmationModal","modalTitle","_ctx","mixinLoading","modalContent","contentType","onCloseCard","onEnterPin","handleSubmit","_component_SuccessModal","showSuccessModal","closeModal","components","AppInput","AppSelect","AppButton","ConfirmationModal","SuccessModal","mixins","billPaymentMixin","data","networks","customer","billerType","customerName","providerRef","bundleRef","businessPhoneRef","computed","size","this","$q","screen","xs","width","sm","Object","values","some","x","mounted","getBillerTypes","methods","billerTypes","map","billerName","value","billerCode","getBillingBundles","itemCode","Number","pin","_this$form","payload","transactionPin","response","payBiller","$mixpanel","track","email","$store","getters","undefined","billType","reference","phoneNumber","splitPhone","replace","$refs","myForm","resetValidation","selectRef","inputRef","watch","_this$form2","created","billPaymentService","BillPaymentService","$api2","__exports__","render","QPage","QForm"],"mappings":"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","file":"js/chunk-3498f145.2b668cfd.js","sourcesContent":["<template>\n  <q-page>\n    <div>\n      <div>\n        <q-form greedy ref=\"myForm\" class=\"form-container\" :style=\"screenWidth\">\n          <AppSelect\n            v-model=\"form.provider\"\n            :options=\"providers\"\n            label=\"Select Network\"\n            class=\"q-mb-xs\"\n            placeholder=\"Select network type\"\n            lazy-rules\n            :loading=\"pageLoading\"\n            @update:model-value=\"(val) => getBundles(val)\"\n            :rules=\"rules.provider\"\n            ref=\"providerRef\"\n          />\n          <AppSelect\n            v-model=\"form.bundle\"\n            :options=\"bundles\"\n            label=\"Bundle Type\"\n            class=\"q-mb-xs\"\n            placeholder=\"Select bundle type\"\n            :rules=\"rules.bundle\"\n            lazy-rules\n            :loading=\"bundlesLoading\"\n            ref=\"bundleRef\"\n          />\n\n          <div class=\"q-mt-xs q-mb-md\">\n            AMOUNT: {{ \" \" + formatMoney(form.amount || 0) }}\n          </div>\n\n          <AppInput\n            label=\"Phone number\"\n            placeholder=\"81xxxxxxxxx\"\n            v-model=\"form.businessPhone\"\n            mask=\"##########\"\n            unmasked-value\n            type=\"tel\"\n            phone\n            :rules=\"rules.businessPhone\"\n            ref=\"businessPhoneRef\"\n          />\n\n          <div\n            class=\"q-mt-none float-right text-grey-8 cursor-pointer\"\n            @click=\"rechargeSelf\"\n          >\n            Recharge self\n          </div>\n\n          <AppButton\n            type=\"button\"\n            label=\"Buy Data\"\n            class=\"q-mt-lg\"\n            :disabled=\"dataButtonState\"\n            @click=\"viewSummary\"\n          />\n        </q-form>\n      </div>\n    </div>\n    <ConfirmationModal\n      :showModal=\"showConfirmationModal\"\n      :modalTitle=\"`Buy Data`\"\n      :loading=\"mixinLoading\"\n      :modalContent=\"modalContent\"\n      :contentType=\"contentType\"\n      @closeCard=\"showConfirmationModal = false\"\n      @enterPin=\"handleSubmit\"\n    />\n    <SuccessModal\n      :showSuccessModal=\"showSuccessModal\"\n      @closeCard=\"closeModal\"\n      :modalContent=\"modalContent\"\n    />\n  </q-page>\n</template>\n<script>\nimport AppInput from \"@/components/base/AppInput/Input.vue\";\nimport AppSelect from \"@/components/base/AppSelect/Select.vue\";\nimport AppButton from \"@/components/base/Button/Button.vue\";\nimport ConfirmationModal from \"./modals/confirmation.vue\";\nimport SuccessModal from \"./modals/success.vue\";\nimport { formatMoney } from \"@/helpers/money\";\nimport BillPaymentService from \"@/services/billPayment.http\";\nimport { billPaymentMixin } from \"@/mixins\";\nimport { ref } from \"vue\";\n\nexport default {\n  components: {\n    AppInput,\n    AppSelect,\n    AppButton,\n    ConfirmationModal,\n    SuccessModal,\n  },\n  mixins: [billPaymentMixin],\n  data() {\n    return {\n      form: {\n        networks: [],\n        provider: \"\",\n        bundle: \"\",\n        amount: \"\",\n        businessPhone: \"\",\n        customer: \"\",\n      },\n      rules: {\n        provider: [(val) => !!val || \"A provider is required\"],\n        bundle: [(val) => !!val || \"A bundle is required\"],\n        businessPhone: [(val) => !!val || \"Enter a valid business phone\"],\n      },\n      showConfirmationModal: false,\n      bundlesLoading: false,\n      showSuccessModal: false,\n      pageLoading: false,\n      billerType: \"data_bundle\",\n      customerName: \"\",\n      providers: null,\n      bundles: null,\n      modalContent: null,\n      contentType: \"data\",\n      providerRef: ref(null),\n      bundleRef: ref(null),\n      businessPhoneRef: ref(null),\n    };\n  },\n  computed: {\n    screenWidth() {\n      let size = this.$q.screen;\n      if (size.xs) {\n        return { width: \"100%\" };\n      } else if (size.sm) {\n        return { width: \"60%\" };\n      } else {\n        return { width: \"35%\" };\n      }\n    },\n    dataButtonState() {\n      const form = {\n        provider: !!this.form.provider || \"A provider is required\",\n        bundle: !!this.form.bundle || \"A bundle is required\",\n        businessPhone:\n          !!this.form.businessPhone || \"Enter a valid business phone\",\n      };\n      return Object.values(form).some((x) => x !== true);\n    },\n  },\n  mounted() {\n    this.getBillerTypes();\n  },\n  methods: {\n    formatMoney,\n    async getBillerTypes() {\n      this.pageLoading = true;\n      this.providers = await this.billerTypes(this.billerType);\n      this.providers.map((provider) => {\n        provider.label = provider.billerName;\n        provider.value = provider.billerCode;\n      });\n      this.pageLoading = false;\n    },\n    async getBundles() {\n      this.bundlesLoading = true;\n      this.bundles = await this.getBillingBundles(\n        this.form.provider.billerCode\n      );\n      this.bundles.map((bundle) => {\n        bundle.label = bundle.type;\n        bundle.value = bundle.itemCode;\n      });\n      this.bundlesLoading = false;\n    },\n    viewSummary() {\n      this.modalContent = {\n        amount: Number(this.form.amount) / 100,\n        customer: this.form.businessPhone,\n        type: this.form.provider,\n        billerCode: this.form.bundle.billerCode,\n      };\n      this.showConfirmationModal = true;\n    },\n    async handleSubmit(pin) {\n      this.mixinLoading = true;\n      let payload = {\n        amount: this.form.amount,\n        transactionPin: pin,\n        type: this.form.bundle.type,\n        customer: \"+234\" + this.form.businessPhone,\n        billerCode: this.form.provider.billerCode,\n        itemCode: this.form.bundle.itemCode,\n      };\n\n      let response = await this.payBiller(payload);\n      this.$mixpanel.track(\"user_completes_data_payment\", {\n        email: this.$store.getters[\"Auth/user\"].email,\n      });\n      if (response === undefined) {\n        this.showSuccessModal = false;\n        return;\n      }\n      this.modalContent = {\n        billType: \"Data Bundle\",\n        amount: Number(this.form?.amount) / 100,\n        reference: response.reference,\n      };\n      this.mixinLoading = false;\n      this.showConfirmationModal = false;\n      this.showSuccessModal = true;\n    },\n    rechargeSelf() {\n      let phone = this.$store.getters[\"Auth/business\"].phoneNumber;\n      let splitPhone = phone.replace(/234/g, \"\");\n      this.form.businessPhone = splitPhone;\n    },\n    async closeModal() {\n      this.showSuccessModal = false;\n      this.form.provider = \"\";\n      this.form.bundle = \"\";\n      this.form.businessPhone = \"\";\n      this.form.customer = \"\";\n      await this.$refs.myForm.resetValidation();\n      await this.$refs.providerRef.$refs.selectRef.resetValidation();\n      await this.$refs.bundleRef.$refs.selectRef.resetValidation();\n      await this.$refs.businessPhoneRef.$refs.inputRef.resetValidation();\n    },\n  },\n  watch: {\n    // \"form.provider\": function () {\n    // \tthis.form.bundle = \"\";\n    // \tthis.form.amount = Number(0);\n    // \tthis.getBundles();\n    // },\n    \"form.bundle\": function () {\n      this.form.amount = Number(this.form?.bundle?.amount);\n    },\n  },\n  created() {\n    this.billPaymentService = new BillPaymentService(this.$api2);\n  },\n};\n</script>\n<style scoped>\n.formclass {\n  display: flex;\n  width: 343px;\n  flex-direction: column;\n  align-items: center;\n  padding: 24px 16px 16px 16px;\n  gap: 40px;\n}\n.form-container {\n  margin: auto;\n  padding: 10px;\n  margin-top: 40px;\n}\n</style>\n","import { render } from \"./Data.vue?vue&type=template&id=24c0c766&scoped=true\"\nimport script from \"./Data.vue?vue&type=script&lang=js\"\nexport * from \"./Data.vue?vue&type=script&lang=js\"\n\nimport \"./Data.vue?vue&type=style&index=0&id=24c0c766&scoped=true&lang=css\"\n\nimport exportComponent from \"/codebuild/output/src612567107/src/new-merchant-app/node_modules/vue-loader-v16/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-24c0c766\"]])\n\nexport default __exports__\nimport QPage from 'quasar/src/components/page/QPage.js';\nimport QForm from 'quasar/src/components/form/QForm.js';\nimport qInstall from \"../../../../node_modules/vue-cli-plugin-quasar/lib/runtime.auto-import.js\";\nqInstall(script, 'components', {QPage,QForm});\n","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-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../../node_modules/vue-cli-plugin-quasar/lib/loader.vue.auto-import-quasar.js??ref--1-0!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-1!../../../../node_modules/vue-loader-v16/dist/index.js??ref--1-2!./Data.vue?vue&type=style&index=0&id=24c0c766&scoped=true&lang=css\""],"sourceRoot":""}