{"version":3,"sources":["webpack:///./src/components/common/BtnGroup.vue?0641","webpack:///./src/components/common/BtnGroup.vue?0bfb","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","_v","_e","class","customClasses","$route","name","attrs","disableBack","on","onCancel","_s","cancelText","exceptionList","includes","disableSave","listed","notValid","onSave","saveText","style","disableSubmit","isHavingUploadIssue","validateMandatory","disableOnUpload","onSubmit","showTooltip","hideTooltip","submitText","staticRenderFns","props","type","String","default","saveBtnDisable","Boolean","isLoadingApi","save","back","submit","isMobile","query","Object","required","showDisableSubmitBtnTooltip","computed","methods","$emit","$router","push","component"],"mappings":"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","file":"js/chunk-6118b174.da76b1d7.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\"},[(_vm.showDisableSubmitBtnTooltip)?_c('div',{staticClass:\"disable-submit-btn-tooltip\"},[_vm._v(\"Your car is currently listed. You won't be able to update any details or photos while your listing is active.\")]):_vm._e(),_c('div',{staticClass:\"d-flex flex-column-reverse mt-3 btn-group-wrapper\",class:(\"\" + _vm.customClasses)},[(this.$route.name !== 'navigation')?_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.exceptionList.includes(this.$route.name))?_c('div',{staticClass:\"save-btn-group mr-2\",class:(_vm.disableSave || _vm.listed) ? 'skip-btn-cursor' : ''},[_c('button',{staticClass:\"shadow-none action-btn right-arrow\",class:(\"\" + (_vm.notValid ? 'not-valid-save-btn' : 'save-btn')),attrs:{\"disabled\":(_vm.disableSave || _vm.listed)},on:{\"click\":_vm.onSave}},[_vm._v(\" \"+_vm._s(_vm.saveText)+\" \")])]):_vm._e(),_c('div',{staticClass:\"submit-btn-group\",class:this.$route.name === 'navigation' ? 'ml-2' : '',style:(this.$route.name === 'navigation' ? 'width: 50%' : 'width: 100%')},[_c('button',{class:(\"\\n          text-white submit-btn action-btn right-arrow \\n          \" + (_vm.disableSubmit || _vm.isHavingUploadIssue || _vm.notValid ? 'disabled' : '') + \"\\n        \"),style:((\"\" + (_vm.validateMandatory || _vm.isHavingUploadIssue ? 'background-color: #CACACA !important; border-color: #CACACA !important;' : ''))),attrs:{\"disabled\":_vm.disableOnUpload || _vm.isHavingUploadIssue},on:{\"click\":_vm.onSubmit,\"mouseover\":_vm.showTooltip,\"mouseleave\":_vm.hideTooltip}},[(_vm.isLoadingApi)?_c('b-spinner',{staticClass:\"btn-loading\",attrs:{\"label\":\"Loading...\"}}):[_vm._v(\" \"+_vm._s(_vm.submitText)+\" \")]],2)])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n<div class=\"btn-group-container\">\n  <div class=\"disable-submit-btn-tooltip\" v-if=\"showDisableSubmitBtnTooltip\">Your car is currently listed. You won't be able to update any details or photos while your listing is active.</div>\n  <div class=\"d-flex flex-column-reverse mt-3 btn-group-wrapper\" :class=\"`${customClasses}`\">\n    <button\n      v-if=\"this.$route.name !== 'navigation'\"\n      v-on:click=\"onCancel\"\n      class=\"shadow-none cancel-btn action-btn left-arrow\"\n      :disabled=\"disableBack\"\n    >\n      {{ cancelText }}\n    </button>\n    <div v-if=\"!this.exceptionList.includes(this.$route.name)\" class=\"save-btn-group mr-2\" :class=\"(disableSave || listed) ? 'skip-btn-cursor' : ''\">\n      <button\n        v-on:click=\"onSave\"\n        class=\"shadow-none action-btn right-arrow\"\n        :class=\"`${notValid ? 'not-valid-save-btn' : 'save-btn'}`\"\n        :disabled=\"(disableSave || listed)\"\n      >\n        {{ saveText }}\n      </button>\n    </div>\n    <div \n      class=\"submit-btn-group\"\n      :style=\"this.$route.name === 'navigation' ? 'width: 50%' : 'width: 100%'\"\n      :class=\"this.$route.name === 'navigation' ? 'ml-2' : ''\"\n    >\n      <button\n        v-on:click=\"onSubmit\"\n        @mouseover=\"showTooltip\"\n        @mouseleave=\"hideTooltip\"\n        :class=\"`\n          text-white submit-btn action-btn right-arrow \n          ${disableSubmit || isHavingUploadIssue || notValid ? 'disabled' : ''}\n        `\"\n        :style=\"`${validateMandatory || isHavingUploadIssue ? 'background-color: #CACACA !important; border-color: #CACACA !important;' : ''}`\"\n        :disabled=\"disableOnUpload || isHavingUploadIssue\"\n      >\n        <b-spinner v-if=\"isLoadingApi\" label=\"Loading...\" class=\"btn-loading\"></b-spinner>\n        <template v-else>\n          {{ submitText }}\n        </template>\n      </button>\n    </div>\n  </div>\n</div>\n</template>\n<script>\nimport { mapState } from \"vuex\";\nexport default {\n  name: \"BtnGroup\",\n  props: {\n    saveText: {\n      type: String,\n      default: \"Save draft\",\n    },\n    cancelText: {\n      type: String,\n      default: \"\",\n    },\n    submitText: {\n      type: String,\n      default: \"Submit\",\n    },\n    saveBtnDisable: {\n      type: Boolean,\n      default: false,\n    },\n    isLoadingApi: {\n      type: Boolean,\n      default: false,\n    },\n    customClasses: {\n      type: String,\n      default: '',\n    },\n    save: String,\n    back: String,\n    submit: String,\n    disableSave: {\n      type: Boolean,\n      default: false,\n    },\n    disableBack: Boolean,\n    disableSubmit: Boolean,\n    isMobile: Boolean,\n    validateMandatory: Boolean,\n    query: {\n      type: Object,\n      required: false,\n    },\n    disableOnUpload: {\n      type: Boolean,\n      default: false,\n    },\n    isHavingUploadIssue: {\n      type: Boolean,\n      default: false,\n    },\n    notValid: {\n      type: Boolean,\n      default: false,\n    },\n    showDisableSubmitBtnTooltip: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  computed: {\n    ...mapState({\n      curStep: (state) => state.common.step,\n      listed: (state) => state.authenticateSeller.listed,\n    }),\n    exceptionList() {\n      return ['vehicle-info', 'condition-info', 'photo-upload', 'photo', 'contact'];\n    },\n  },\n  methods: {\n    onSave() {\n      this.$emit(\"onSave\");\n      if (this.save) {\n        this.query ? this.$router.push({ name: this.save, query: this.query }) : this.$router.push({ name: this.save });\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    onSubmit() {\n      this.$emit(\"onSubmit\");\n      if (this.submit) {\n        this.query ? this.$router.push({ name: this.submit, query: this.query }) : this.$router.push({ name: this.submit });\n      }\n    },\n    showTooltip() {\n      this.$emit(\"showTooltip\");\n    },\n    hideTooltip() {\n      this.$emit(\"hideTooltip\");\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  padding-bottom: 15px;\n  padding-left: 1.3rem;\n  padding-right: 1.3rem;\n  flex-direction: row !important;\n  justify-content: space-between;\n  z-index: 101;\n  .cancel-btn {\n    max-width: $buttonMaxWidth;\n    margin-right: 15px;\n  }\n  .action-btn {\n    position: relative;\n    outline: none !important;\n    width: 100%;\n    height: 52px;\n    padding: 16px 12px;\n    margin-top: 12px;\n    display: flex;\n    align-items: center;\n    border-radius: 0.5rem;\n    font-size: 14px;\n    text-transform: uppercase;\n    border: none;\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: 17px;\n        transform: rotate($left);\n      }\n    }\n    &.right-arrow {\n      &::before {\n        right: 13px;\n        transform: rotate($right);\n      }\n    }\n    &.mobile-translate {\n      padding-left: 13px;\n      justify-content: flex-start;\n    }\n  }\n  .cancel-btn {\n    background-color: #ffffff;\n    border: 1px solid var(--primary-color);\n    color: var(--primary-color);\n  }\n  .submit-btn {\n    background-color: var(--primary-color);\n    flex: 1;\n    padding: 16px 32px;\n    &:hover, &:active {\n      background: linear-gradient(0deg, rgba(98, 0, 238, 0.08), rgba(98, 0, 238, 0.08)), var(--primary-color);\n    }\n    &.disabled {\n      background-color: var(--secondary-color) !important;\n      border: solid 1px var(--primary-color) !important;\n      cursor: not-allowed;\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  .not-valid-save-btn,\n  .save-btn {\n    background-color: #ffffff;\n    border: 1px solid var(--primary-color);\n    color: var(--primary-color);\n    flex: 1;\n    width: 100%;\n    &:disabled {\n      color: #ffffff !important;\n    }\n  }\n  .skip-btn-cursor  {\n    cursor: not-allowed !important;\n  }\n  .not-valid-submit-btn {\n    background-color: var(--secondary-color) !important;\n    border: solid 1px var(--primary-color) !important;\n  }\n  .save-btn-group {\n    width: 50%;\n  }\n}\n.disable-submit-btn-tooltip {\n  position: fixed;\n  bottom: 86px;\n  right: 23px;\n  width: 240px;\n  background-color: #2e312e;\n  color: #f0f1ec;\n  border-radius: 4px;\n  padding: 4px 8px 4px 8px;\n  font-family: \"Avenir Next LT W05 Regular\";\n  font-size: 16px;\n  font-weight: 400;\n  text-align: left;\n  z-index: 999;\n}\n\n@media screen and(min-width: 374px) {\n  .btn-group-wrapper{\n    .action-btn {\n      justify-content: center;\n      padding: 16px 9px;\n      &.left-arrow {\n        &::before {\n          left: 27px;\n        }\n      }\n    }\n  }\n}\n\n@media screen and(min-width: 768px) {\n  $buttonMaxWidth: 79px;\n  .btn-group-wrapper {\n    .action-btn {\n      padding: 16px 24px;\n      font-size: 16px;\n      &.mobile-translate {\n        justify-content: center;\n      }\n    }\n    .cancel-btn {\n      max-width: $buttonMaxWidth;\n      margin-right: 20px;\n    }\n    .save-btn {\n      justify-content: center;\n    }\n    .left-arrow::before {\n      left: 35px !important;\n    }\n    .right-arrow::before {\n      right: 35px !important;\n    }\n  }\n  .disable-submit-btn-tooltip {\n    right: 60px;\n    width: 338px;\n  }\n}\n\n@media screen and(min-width: 900px) {\n  .btn-group-wrapper {\n    z-index: 100001;\n  }\n  .disable-submit-btn-tooltip {\n    right: 110px;\n    width: 338px;\n  }\n}\n@media screen and(min-width: 1200px) {\n  .btn-group-wrapper {\n    max-width: 1160px;\n    padding-left: 55px;\n    padding-right: 55px;\n  }\n  .disable-submit-btn-tooltip {\n    right: 250px;\n    width: 338px;\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=11fd4b06&\"\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":""}