{"version":3,"sources":["webpack:///./src/components/common/BtnGroup.vue?0641","webpack:///./src/components/common/BtnGroup.vue?bdaa","webpack:///src/components/common/BtnGroup.vue","webpack:///./src/components/common/BtnGroup.vue?2fe5","webpack:///./src/components/common/BtnGroup.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","customClasses","isCarInfoPage","_e","attrs","disableBack","on","onCancel","_v","_s","cancelText","$route","name","disableSkip","isHavingUploadIssue","directives","rawName","value","curStep","expression","onSkip","skipText","isMobile","ref","okBtnDisable","disableNext","onOk","isLoadingApi","okText","staticRenderFns","props","type","String","default","Boolean","next","back","skip","Number","query","Object","required","computed","methods","$emit","$router","push","component"],"mappings":"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","file":"js/chunk-6118b174.674c6fb2.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.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!./BtnGroup.vue?vue&type=style&index=0&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"btn-group-container\"},[_c('div',{staticClass:\"d-flex flex-column-reverse mt-3 btn-group-wrapper\",class:(\"\" + _vm.customClasses)},[(!_vm.isCarInfoPage)?_c('button',{staticClass:\"shadow-none cancel-btn action-btn left-arrow\",attrs:{\"disabled\":_vm.disableBack},on:{\"click\":_vm.onCancel}},[_vm._v(\" \"+_vm._s(_vm.cancelText)+\" \")]):_vm._e(),(this.$route.name === 'photo-upload')?_c('div',{staticClass:\"skip-btn-wrapper\",class:_vm.disableSkip >= 1 && !_vm.isHavingUploadIssue ? 'skip-btn-cursor' : ''},[_c('div',{staticClass:\"skip-photo\",class:_vm.disableSkip >= 1 && !_vm.isHavingUploadIssue ? 'hide-tooltip' : ''},[_c('button',{directives:[{name:\"show\",rawName:\"v-show\",value:(this.curStep === 2),expression:\"this.curStep === 2\"}],staticClass:\"shadow-none skip-btn action-btn right-arrow\",attrs:{\"disabled\":_vm.disableSkip > 0 && !_vm.isHavingUploadIssue},on:{\"click\":_vm.onSkip}},[_vm._v(\" \"+_vm._s(_vm.skipText)+\" \")]),(!_vm.isMobile)?_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(this.curStep === 2),expression:\"this.curStep === 2\"}],ref:\"tooltip\",staticClass:\"font-weight-thin\",attrs:{\"id\":\"tooltip\"}},[_vm._v(\" After you submit, we'll send you a link to add photos. \")]):_vm._e()])]):_vm._e(),_c('button',{class:(\"border-0 shadow-none text-white ok-btn action-btn right-arrow \" + (_vm.okBtnDisable ? '' : 'disabled')),attrs:{\"disabled\":_vm.disableNext},on:{\"click\":_vm.onOk}},[(_vm.isLoadingApi && _vm.okText === 'submit')?_c('b-spinner',{staticClass:\"btn-loading\",attrs:{\"label\":\"Loading...\"}}):[_vm._v(\" \"+_vm._s(_vm.okText)+\" \")]],2)])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n<div class=\"btn-group-container\">\n  <div class=\"d-flex flex-column-reverse mt-3 btn-group-wrapper\" :class=\"`${customClasses}`\">\n    <button\n      v-on:click=\"onCancel\"\n      class=\"shadow-none cancel-btn action-btn left-arrow\"\n      :disabled=\"disableBack\"\n      v-if=\"!isCarInfoPage\"\n    >\n      {{ cancelText }}\n    </button>\n    <div v-if=\"this.$route.name === 'photo-upload'\" :class=\"disableSkip >= 1 && !isHavingUploadIssue ? 'skip-btn-cursor' : ''\" class=\"skip-btn-wrapper\"> \n      <div class=\"skip-photo\" :class=\"disableSkip >= 1 && !isHavingUploadIssue ? 'hide-tooltip' : ''\">\n        <button\n          v-show=\"this.curStep === 2\"\n          v-on:click=\"onSkip\"\n          class=\"shadow-none skip-btn action-btn right-arrow\"\n          :disabled=\"disableSkip > 0 && !isHavingUploadIssue\"\n        >\n          {{ skipText }}\n        </button>\n        <div v-show=\"this.curStep === 2\" class=\"font-weight-thin\" id=\"tooltip\" ref=\"tooltip\" v-if=\"!isMobile\">\n          After you submit, we'll send you a link to add photos.\n        </div>\n      </div>\n    </div>\n    <button\n      v-on:click=\"onOk\"\n      :class=\"`border-0 shadow-none text-white ok-btn action-btn right-arrow ${okBtnDisable ? '' : 'disabled'}`\"\n      :disabled=\"disableNext\"\n    >\n      <b-spinner v-if=\"isLoadingApi && okText === 'submit'\" label=\"Loading...\" class=\"btn-loading\"></b-spinner>\n      <template v-else>\n        {{ okText }}\n      </template>\n    </button>\n  </div>\n</div>\n</template>\n<script>\nimport { mapState } from \"vuex\";\nexport default {\n  name: \"BtnGroup\",\n  props: {\n    okText: {\n      type: String,\n      default: \"Next\",\n    },\n    cancelText: {\n      type: String,\n      default: \"\",\n    },\n    skipText: {\n      type: String,\n      default: \"Skip\",\n    },\n    okBtnDisable: {\n      type: Boolean,\n      default: false,\n    },\n    next: String,\n    back: String,\n    skip: String,\n    disableNext: Boolean,\n    disableBack: Boolean,\n    disableSkip: Number,\n    isMobile: Boolean,\n    query: {\n      type: Object,\n      required: false,\n    },\n    isLoadingApi: {\n      type: Boolean,\n      default: false,\n    },\n    customClasses: {\n      type: String,\n      default: '',\n    },\n    isCarInfoPage: {\n      type: Boolean,\n      default: false,\n    },\n    isHavingUploadIssue: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  computed: {\n    ...mapState({\n      curStep: (state) => state.common.step,\n    }),\n  },\n  methods: {\n    onOk() {\n      this.$emit(\"onOk\");\n      if (this.next) {\n        this.query ? this.$router.push({ name: this.next, query: this.query }) : this.$router.push({ name: this.next });\n      }\n    },\n    onCancel() {\n      this.$emit(\"onCancel\");\n      if (this.back) {\n        this.query ? this.$router.push({ name: this.back, query: this.query }) : this.$router.push({ name: this.back });\n      }\n    },\n    onSkip() {\n      this.$emit(\"onSkip\");\n      if (this.skip) {\n        this.query ? this.$router.push({ name: this.skip, query: this.query }) : this.$router.push({ name: this.skip });\n      }\n    },\n  },\n};\n</script>\n<style lang=\"scss\">\n$arrowBorderSize: 3px;\n$arrowSize: 10px;\n$left: 135deg;\n$right: 315deg;\n$buttonMaxWidth: 60px;\n.btn-group-wrapper {\n  background-color: white;\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  margin: 0 auto;\n  // width: 100%;\n  padding-bottom: 15px;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  flex-direction: row !important;\n  justify-content: space-between;\n  z-index: 101;\n  .cancel-btn {\n    flex: 1;\n    max-width: $buttonMaxWidth;\n    margin-right: 15px;\n  }\n  .skip-btn-wrapper {\n    flex: 1;\n    max-width: $buttonMaxWidth;\n    margin-right: 15px;\n    position: relative;\n    .skip-btn {\n      margin-bottom: 0;\n      padding-left: 10px;\n    }\n  }\n  &.skip-able {\n    $buttonMaxWidth: 120px;\n    .skip-btn-wrapper {\n      max-width: $buttonMaxWidth;\n    }\n    .skip-btn::before {\n      right: 20px;\n    }\n  }\n}\n.action-btn {\n  position: relative;\n  outline: none !important;\n  width: 100%;\n  height: 52px;\n  padding: 16px 24px;\n  margin-top: 12px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.5rem;\n  font-size: 16px;\n  text-transform: uppercase;\n  &::before {\n    content: '';\n    border-bottom-style: solid;\n    border-bottom-width: $arrowBorderSize;\n    border-right-style: solid;\n    border-right-width: $arrowBorderSize;\n    position: absolute;\n    top: 39%;\n    height: $arrowSize;\n    width: $arrowSize;\n  }\n  &.left-arrow {\n    &::before {\n      left: 27px;\n      transform: rotate($left);\n    }\n  }\n  &.right-arrow {\n    &::before {\n      right: 30px;\n      transform: rotate($right);\n    }\n  }\n}\n.cancel-btn {\n  background-color: #ffffff;\n  border: 1px solid #1F8252;\n  color: #1F8252;\n}\n.skip-btn {\n  background-color: #ffffff;\n  border: 1px solid #1F8252;\n  color: #1F8252;\n  &:disabled {\n    background-color: #ffffff !important;\n    border-color: #b1b1b1 !important;\n    color: #b1b1b1 !important;\n  }\n}\n.skip-photo {\n  &:hover {\n    #tooltip {\n      visibility: visible !important;\n    }\n  }\n}\n.skip-btn-cursor  {\n  cursor: not-allowed !important;\n}\n.hide-tooltip {\n  pointer-events: none !important;\n}\n.ok-btn {\n  background-color: #1F8252;\n  flex: 1;\n\n  &:hover, &:active {\n    background: linear-gradient(0deg, rgba(98, 0, 238, 0.08), rgba(98, 0, 238, 0.08)), #1F8252;\n  }\n\n  &.disabled {\n    background-color: #C4C4C4;\n\n    &:hover, &:active {\n      background: linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)), #C4C4C4;\n    }\n  }\n}\n\n#tooltip {\n  z-index: 1000;\n  position: absolute;\n  background: #2E312E;\n  color: #ffffff;\n  font-size: 12px;\n  text-align: left;\n  width: 245px;\n  border-radius: 4px;\n  padding: 6px 8px;\n  visibility: hidden;\n  bottom: 65px;\n}\n\n@media screen and(min-width: 768px) {\n  $buttonMaxWidth: 79px;\n  .btn-group-wrapper {\n    padding-bottom: 20px;\n    .cancel-btn {\n      flex: 1;\n      max-width: $buttonMaxWidth;\n      margin-right: 20px;\n    }\n    .skip-btn-wrapper {\n      flex: 1;\n      max-width: $buttonMaxWidth;\n      margin-right: 20px;\n      position: relative;\n      .skip-btn {\n        margin-bottom: 0;\n      }\n    }\n    &.skip-able {\n      $buttonMaxWidth: 140px;\n      .skip-btn-wrapper {\n        max-width: $buttonMaxWidth;\n      }\n    }\n    .left-arrow::before {\n      left: 35px !important;\n    }\n    .right-arrow::before {\n      right: 35px !important;\n    }\n  }\n}\n@media screen and(min-width: 900px) {\n  .btn-group-wrapper {\n    z-index: 100001;\n  }\n}\n@media screen and(min-width: 1200px) {\n  .btn-group-wrapper {\n    max-width: 1120px;\n    padding-left: 77px;\n    padding-right: 77px;\n  }\n}\n</style>","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!./BtnGroup.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!./BtnGroup.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./BtnGroup.vue?vue&type=template&id=4863d624&\"\nimport script from \"./BtnGroup.vue?vue&type=script&lang=js&\"\nexport * from \"./BtnGroup.vue?vue&type=script&lang=js&\"\nimport style0 from \"./BtnGroup.vue?vue&type=style&index=0&lang=scss&\"\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"],"sourceRoot":""}