{"version":3,"sources":["webpack:///./src/components/messages/message-bubble.vue?425b","webpack:///src/components/messages/message-bubble.vue","webpack:///./src/components/messages/message-bubble.vue?696c","webpack:///./src/components/messages/message-bubble.vue","webpack:///./src/components/messages/message-bubble.vue?a5a3"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","prospect","forProspect","attrs","avatar","content","type","_v","_s","subject","_e","message","on","$event","stopPropagation","$emit","dateFormat","date","domProps","html","created_at","staticRenderFns","components","props","Object","image","String","required","default","Boolean","computed","methods","component"],"mappings":"yIAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,qBAAqB,CAACF,EAAG,MAAM,CAACG,MAAM,CAAC,SAAU,CAAEC,SAAUR,EAAIS,eAAgB,CAACL,EAAG,gBAAgB,CAACM,MAAM,CAAC,MAAQV,EAAIW,WAAW,GAAGP,EAAG,MAAM,CAACE,YAAY,wBAAwB,CAAEN,EAAe,YAAE,CAACI,EAAG,MAAM,CAACE,YAAY,gBAAgB,CAAuB,UAArBN,EAAIY,QAAQC,KAAkBT,EAAG,OAAO,CAACE,YAAY,iBAAiB,CAACN,EAAIc,GAAGd,EAAIe,GAAGf,EAAIY,QAAQI,YAAYhB,EAAIiB,KAAKb,EAAG,OAAO,CAACJ,EAAIc,GAAGd,EAAIe,GAAGf,EAAIY,QAAQM,YAAkC,UAArBlB,EAAIY,QAAQC,KAAkBT,EAAG,aAAa,CAACE,YAAY,sBAAsBI,MAAM,CAAC,KAAO,UAAUS,GAAG,CAAC,MAAQ,SAASC,GAAiC,OAAzBA,EAAOC,kBAAyBrB,EAAIsB,MAAM,QAAStB,EAAIY,YAAY,CAACZ,EAAIc,GAAG,aAAad,EAAIiB,MAAM,GAAGb,EAAG,MAAM,CAACE,YAAY,qBAAqB,CAACN,EAAIc,GAAG,IAAId,EAAIe,GAAGf,EAAIuB,WAAWvB,EAAIY,QAAQY,OAAO,QAAQ,CAACpB,EAAG,MAAM,CAACE,YAAY,eAAemB,SAAS,CAAC,UAAYzB,EAAIe,GAAGf,EAAIY,QAAQc,SAAStB,EAAG,MAAM,CAACE,YAAY,qBAAqB,CAACN,EAAIc,GAAG,IAAId,EAAIe,GAAGf,EAAIuB,WAAWvB,EAAIY,QAAQe,aAAa,SAAS,MACriCC,EAAkB,G,qBCEtB,GACEC,WAAY,GACZC,MAAO,CACLlB,QAAS,CACPC,KAAMkB,OACN,UACE,MAAO,CACLL,KAAM,GACNC,WAAY,MAIlBK,MAAO,CACLnB,KAAMoB,OACNC,UAAU,EACVC,QAAS,IAEX1B,YAAa,CACXI,KAAMuB,QACNF,UAAU,EACVC,SAAS,IAGb,OACE,MAAO,IAETE,SAAU,CACR,SACE,OAAOpC,KAAK+B,MAClB,WACA,YAGE,YACAM,QAAS,CACP,WAAWd,GACT,OAAO,IAAb,oCCvCqa,I,wBCQjae,EAAY,eACd,EACAxC,EACA6B,GACA,EACA,KACA,WACA,MAIa,OAAAW,E,2CCnBf","file":"js/chunk-5fac71a9.2fd86c22.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"message-container\"},[_c('div',{class:['avatar', { prospect: _vm.forProspect }]},[_c('BaseThumbnail',{attrs:{\"image\":_vm.avatar}})],1),_c('div',{staticClass:\"message-text-wrapper\"},[(_vm.forProspect)?[_c('div',{staticClass:\"message-text\"},[(_vm.content.type === 'email')?_c('span',{staticClass:\"email-subject\"},[_vm._v(_vm._s(_vm.content.subject))]):_vm._e(),_c('span',[_vm._v(_vm._s(_vm.content.message))]),(_vm.content.type === 'email')?_c('BaseButton',{staticClass:\"btn-clear secondary\",attrs:{\"type\":\"button\"},on:{\"click\":function($event){$event.stopPropagation();return _vm.$emit('reply', _vm.content)}}},[_vm._v(\" Reply \")]):_vm._e()],1),_c('div',{staticClass:\"message-timestamp\"},[_vm._v(\" \"+_vm._s(_vm.dateFormat(_vm.content.date))+\" \")])]:[_c('div',{staticClass:\"message-text\",domProps:{\"innerHTML\":_vm._s(_vm.content.html)}}),_c('div',{staticClass:\"message-timestamp\"},[_vm._v(\" \"+_vm._s(_vm.dateFormat(_vm.content.created_at))+\" \")])]],2)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<script>\nimport moment from 'moment';\n\nexport default {\n  components: {},\n  props: {\n    content: {\n      type: Object,\n      default() {\n        return {\n          html: '',\n          created_at: '',\n        };\n      },\n    },\n    image: {\n      type: String,\n      required: false,\n      default: '',\n    },\n    forProspect: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n  },\n  data() {\n    return {};\n  },\n  computed: {\n    avatar() {\n      return this.image\n        ? this.image\n        : require('@assets/images/placeholder-avatar.png');\n    },\n  },\n  mounted() {},\n  methods: {\n    dateFormat(date) {\n      return moment(date).format('MMM DD [at] hh:mm a');\n    },\n  },\n};\n</script>\n\n<template>\n  <div class=\"message-container\">\n    <div :class=\"['avatar', { prospect: forProspect }]\">\n      <BaseThumbnail :image=\"avatar\" />\n    </div>\n    <div class=\"message-text-wrapper\">\n      <template v-if=\"forProspect\">\n        <div class=\"message-text\">\n          <span v-if=\"content.type === 'email'\" class=\"email-subject\">{{\n            content.subject\n          }}</span>\n          <span>{{ content.message }}</span>\n          <BaseButton\n            type=\"button\"\n            class=\"btn-clear secondary\"\n            v-if=\"content.type === 'email'\"\n            @click.stop=\"$emit('reply', content)\"\n          >\n            Reply\n          </BaseButton>\n        </div>\n        <div class=\"message-timestamp\">\n          {{ dateFormat(content.date) }}\n        </div>\n      </template>\n      <template v-else>\n        <div class=\"message-text\" v-html=\"content.html\"></div>\n        <div class=\"message-timestamp\">\n          {{ dateFormat(content.created_at) }}\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n@import '@design';\n// stylelint-disable selector-pseudo-element-no-unknown\n\n.message-container {\n  align-items: center;\n  display: flex;\n  margin-bottom: 3rem;\n\n  .avatar {\n    margin-bottom: 2rem;\n    margin-right: 2rem;\n    width: 5rem;\n\n    .image-thumbnail {\n      margin-right: 0;\n      width: 100%;\n\n      ::v-deep img {\n        border-radius: $base-border-radius-md;\n        height: 5rem;\n        object-fit: cover;\n        width: 5rem;\n      }\n    }\n    &.prospect {\n      align-items: center;\n      background: $color-dark-gray-one;\n      border-radius: 50%;\n      display: flex;\n      height: 4rem;\n      justify-content: center;\n      width: 4rem;\n      .image-thumbnail {\n        height: 14px;\n        margin-right: 0;\n        width: 25px;\n\n        ::v-deep img {\n          border-radius: $base-border-radius-md;\n          height: 100%;\n          object-fit: contain;\n          width: 100%;\n        }\n      }\n    }\n  }\n\n  .message-text-wrapper {\n    max-width: 75%;\n    min-width: 25%;\n\n    .message-text {\n      background-color: $color-off-white;\n      border-radius: 8px;\n      font-size: 1.4rem;\n      font-weight: 600;\n      letter-spacing: 0.116667px;\n      line-height: 2.5rem;\n      margin-bottom: 1rem;\n      padding: 2rem;\n\n      ::v-deep p {\n        margin-bottom: 0;\n        word-break: break-all;\n      }\n\n      .email-subject {\n        display: block;\n        font-weight: 700;\n        margin-bottom: 1rem;\n      }\n    }\n\n    .message-timestamp {\n      color: $color-text;\n      font-size: 1.2rem;\n      font-weight: 800;\n      letter-spacing: -0.3px;\n      line-height: 0.9rem;\n      mix-blend-mode: normal;\n      opacity: 0.5;\n      padding-left: 1rem;\n    }\n    .btn-clear {\n      background-color: rgba($color-black-wo-rgb, 0.05);\n      border-radius: 50px;\n      color: $color-black;\n      display: block;\n      letter-spacing: 0.116667px;\n      margin-top: 10px;\n      opacity: 0.7;\n    }\n  }\n\n  &.trainer {\n    flex-direction: row-reverse;\n    .message-text {\n      background-color: $color-primary-alt;\n      color: white;\n      margin-right: 2rem;\n    }\n  }\n\n  &.isMe {\n    flex-direction: row-reverse;\n    .message-text {\n      background-color: $color-primary-alt;\n      color: white;\n      .btn-clear {\n        display: none;\n      }\n    }\n    .avatar {\n      margin-left: 2rem;\n    }\n  }\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!../../../node_modules/vue-svg-inline-loader/dist/index.min.js!./message-bubble.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!../../../node_modules/vue-svg-inline-loader/dist/index.min.js!./message-bubble.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./message-bubble.vue?vue&type=template&id=ab85533a&scoped=true&\"\nimport script from \"./message-bubble.vue?vue&type=script&lang=js&\"\nexport * from \"./message-bubble.vue?vue&type=script&lang=js&\"\nimport style0 from \"./message-bubble.vue?vue&type=style&index=0&id=ab85533a&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  \"ab85533a\",\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/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!../../../node_modules/vue-svg-inline-loader/dist/index.min.js!./message-bubble.vue?vue&type=style&index=0&id=ab85533a&lang=scss&scoped=true&\""],"sourceRoot":""}