{"version":3,"file":"ChatModal-DbCfbCAi.js","sources":["../../../app/javascript/src/modules/InfoCollection/Components/Textbox.vue","../../../app/javascript/src/modules/PremadeItinerary/ChatModal.vue"],"sourcesContent":["<template>\n  <textarea v-model=\"model\" :readonly></textarea>\n</template>\n\n<script setup>\nconst model = defineModel();\ndefineProps({\n  readonly: {\n    type: Boolean,\n    default: false\n  }\n})\n</script>\n\n<style lang=\"scss\" scoped>\ntextarea {\n  @include base-font;\n  display: flex;\n  border-radius: 15px;\n  border: 1px solid $gray-lighter;\n  background: white;\n  resize: none;\n  padding: 12px;\n  outline: none;\n\n  &:focus {\n    border-color: $brand-tertiary;\n  }\n\n  &::placeholder {\n    color: $grey-100;\n  }\n}\n</style>\n","<template>\n  <Dialog v-show=\"isModalOpen\" :showClose=\"!mobile\" :clickOutside=\"true\" @close=\"close\" :class=\"{ 'mobile-dialog': mobile }\">\n    <template v-slot:header>\n      <div class=\"header-content\" v-if=\"!mobile\">\n        <H3>{{ t('title') }}</H3>\n      </div>\n    </template>\n\n    <div v-if=\"!mobile\" class=\"messages__container\">\n      <div class=\"messages__main\">\n        <ChatBox />\n      </div>\n      <div class=\"messages__right_panel\">\n        <ChatroomDetails />\n      </div>\n    </div>\n    <div v-else class=\"messages__container--mobile\">\n      <ChatroomDetails v-if=\"openMobileDetails\" />\n      <ChatBox v-else />\n    </div>\n  </Dialog>\n</template>\n\n\n<script setup>\nimport { onBeforeMount, onBeforeUnmount, computed, watch } from \"vue\";\nimport { storeToRefs } from \"pinia\";\nimport { until } from '@vueuse/core'\nimport { useChannelsStore } from 'app/javascript/src/stores/channels';\nimport { useChatPusher } from \"@/utils/pusher/useChatPusher\"\nimport { useShared } from \"@/helpers/vueHelpers.js\";\nimport { Dialog, H3 } from '@/components/Theme/index.js';\nimport ChatBox from \"@/components/Chat/ChatBox/Index.vue\";\nimport ChatroomDetails from '@/components/Chat/ChatroomDetails/Index.vue'\n\nconst props = defineProps({\n  itineraryRequestId: [String, Number],\n});\n\nconst { t, mobile } = useShared();\nconst store = useChannelsStore()\nconst { isModalOpen, openMobileDetails } = storeToRefs(store)\n\nconst { pusher, unsubscribeAllChannels, binder } = useChatPusher();\nconst itineraryRequestId = computed(() => props.itineraryRequestId)\n\nwatch(isModalOpen, (curr, _) => {\n  if (!curr) store.read(store.currentChannelId);\n})\n\nonBeforeMount(async () => {\n  store.isMobileView = mobile;\n\n  if (!itineraryRequestId.value) return;\n\n  await store.initializeChatModal(itineraryRequestId.value);\n\n  store.pusher = pusher;\n\n  const bindings = {\n    \"message_created\": store.addNewMessage,\n    \"chatroom_name_updated\": store.updateChatroomName,\n    \"chatroom_association_updated\": store.updateChatroomAssociations,\n    \"chatroom_members_updated\": store.updateChatroomMembers\n  }\n\n  binder.bind(store.profiles.own, store.channels.map((chatroom) => chatroom.id), bindings)\n\n  setCurrentChannel()\n})\n\nonBeforeUnmount(() => {\n  unsubscribeAllChannels()\n})\n\nconst setCurrentChannel = async () => {\n  await until(isModalOpen).toBe(true)\n  store.setCurrentChannel(store.channels[0]?.id);\n}\n\nconst close = () => {\n  store.closeChatModal();\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$chat-space: calc(100vh - 90px - 96px - 47px);\n\n// Ideally we refactor this as its a smell\n.chat-modal.theme-dialog {\n  :deep(.modal__container) {\n    max-width: 90vw;\n    @media (min-width: $breakpoint-lg) {\n      max-width: 77vw;\n    }\n  }\n  :deep(.explore-product) {\n    overflow: visible;\n    min-width: 180px;\n  }\n  :deep(.product__feature-image) {\n    padding-top: 75%;\n  }\n  :deep(.messages__container .messages__main) {\n    min-width: 400px;\n  }\n  :deep(.messages__container) {\n    grid-template-columns: 2fr 1fr;\n\n    @media(min-width: $breakpoint-xxl) {\n      grid-template-columns: 2fr minmax(0, 300px);\n    }\n  }\n}\n\n@mixin side-margin {\n  margin-left: $spacing-6;\n  margin-right: $spacing-6;\n\n  @media (min-width: $breakpoint-m) {\n    margin-left: unset;\n    margin-right: unset;\n  }\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  gap: $spacing-4;\n}\n\n.messages__navigation {\n  @include side-margin;\n}\n\n.messages__container {\n  display: grid;\n  grid-template-columns: 2.5fr 1fr;\n  column-gap: $spacing-3;\n  margin: 12px 0;\n  height: $chat-space;\n\n  .messages__main {\n    height: calc($chat-space - $spacing-6);\n    row-gap: $spacing-6;\n    border: 1px solid $gray-lighter;\n    border-radius: $rounded-2xl;\n    grid-template-columns: 2fr 1fr;\n    min-width: 652px;\n  }\n\n  .messages__right_panel {\n    row-gap: $spacing-6;\n    border: 1px solid $gray-lighter;\n    border-radius: $rounded-2xl;\n    height: calc($chat-space - $spacing-6);\n    grid-template-columns: 2fr 1fr;\n    min-width: 29%;\n  }\n}\n\n.theme-dialog.mobile-dialog {\n  :deep(.modal__container) {\n    padding: 0;\n    border-radius: 15px;\n    height: 80vh;\n    width: 90vw;\n  }\n  :deep(.modal__header) {\n    display: none;\n  }\n}\n\n.messages__container--mobile {\n  height: 100%;\n}\n</style>\n\n\n<i18n lang=\"yaml\">\nen:\n  title: Messages\n</i18n>\n"],"names":["model","_useModel","props","__props","t","mobile","useShared","store","useChannelsStore","isModalOpen","openMobileDetails","storeToRefs","pusher","unsubscribeAllChannels","binder","useChatPusher","itineraryRequestId","computed","watch","curr","_","onBeforeMount","bindings","chatroom","setCurrentChannel","onBeforeUnmount","until","_a","close"],"mappings":"2sBAKA,MAAMA,EAAQC,gBAAY,qjBC8B1B,MAAMC,EAAQC,EAIR,CAAE,EAAAC,EAAG,OAAAC,CAAQ,EAAGC,EAAW,EAC3BC,EAAQC,EAAgB,EACxB,CAAE,YAAAC,EAAa,kBAAAC,GAAsBC,EAAYJ,CAAK,EAEtD,CAAE,OAAAK,EAAQ,uBAAAC,EAAwB,OAAAC,CAAM,EAAKC,EAAe,EAC5DC,EAAqBC,EAAS,IAAMf,EAAM,kBAAkB,EAElEgB,EAAMT,EAAa,CAACU,EAAMC,IAAM,CACzBD,GAAMZ,EAAM,KAAKA,EAAM,gBAAgB,CAC9C,CAAC,EAEDc,EAAc,SAAY,CAGxB,GAFAd,EAAM,aAAeF,EAEjB,CAACW,EAAmB,MAAO,OAE/B,MAAMT,EAAM,oBAAoBS,EAAmB,KAAK,EAExDT,EAAM,OAASK,EAEf,MAAMU,EAAW,CACf,gBAAmBf,EAAM,cACzB,sBAAyBA,EAAM,mBAC/B,6BAAgCA,EAAM,2BACtC,yBAA4BA,EAAM,qBACtC,EAEEO,EAAO,KAAKP,EAAM,SAAS,IAAKA,EAAM,SAAS,IAAKgB,GAAaA,EAAS,EAAE,EAAGD,CAAQ,EAEvFE,EAAiB,CACnB,CAAC,EAEDC,EAAgB,IAAM,CACpBZ,EAAsB,CACxB,CAAC,EAED,MAAMW,EAAoB,SAAY,OACpC,MAAME,EAAMjB,CAAW,EAAE,KAAK,EAAI,EAClCF,EAAM,mBAAkBoB,EAAApB,EAAM,SAAS,CAAC,IAAhB,YAAAoB,EAAmB,EAAE,CAC/C,EAEMC,EAAQ,IAAM,CAClBrB,EAAM,eAAgB,CACxB"}