253 lines
8.0 KiB
Vue
Executable File
253 lines
8.0 KiB
Vue
Executable File
<script setup>
|
|
/* eslint-disable @intlify/vue-i18n/no-raw-text, vue/no-bare-strings-in-template */
|
|
import { computed, ref } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useStore } from 'vuex';
|
|
import { useElementSize } from '@vueuse/core';
|
|
import BackButton from '../BackButton.vue';
|
|
import InboxName from '../InboxName.vue';
|
|
import MoreActions from './MoreActions.vue';
|
|
import Avatar from 'next/avatar/Avatar.vue';
|
|
import SLACardLabel from './components/SLACardLabel.vue';
|
|
import wootConstants from 'dashboard/constants/globals';
|
|
import { conversationListPageURL } from 'dashboard/helper/URLHelper';
|
|
import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
|
|
import { useInbox } from 'dashboard/composables/useInbox';
|
|
import { useAlert } from 'dashboard/composables';
|
|
import { useI18n } from 'vue-i18n';
|
|
import Button from 'dashboard/components-next/button/Button.vue';
|
|
import { useUISettings } from 'dashboard/composables/useUISettings';
|
|
import CreateReservationModal from 'dashboard/components-next/captain/reservations/CreateReservationModal.vue';
|
|
import CaptainUnitsAPI from 'dashboard/api/captain/units';
|
|
import CaptainReservationsAPI from 'dashboard/api/captain/reservations';
|
|
|
|
const props = defineProps({
|
|
chat: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
showBackButton: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const { t } = useI18n();
|
|
const store = useStore();
|
|
const alert = useAlert();
|
|
const route = useRoute();
|
|
const { uiSettings, updateUISettings } = useUISettings();
|
|
const conversationHeader = ref(null);
|
|
const { width } = useElementSize(conversationHeader);
|
|
const { isAWebWidgetInbox } = useInbox();
|
|
|
|
const showCreateModal = ref(false);
|
|
const units = ref([]);
|
|
const isFetchingUnits = ref(false);
|
|
const isCreating = ref(false);
|
|
|
|
const currentChat = computed(() => store.getters.getSelectedChat);
|
|
const accountId = computed(() => store.getters.getCurrentAccountId);
|
|
|
|
const chatMetadata = computed(() => props.chat.meta);
|
|
|
|
const backButtonUrl = computed(() => {
|
|
const {
|
|
params: { inbox_id: inboxId, label, teamId, id: customViewId },
|
|
name,
|
|
} = route;
|
|
|
|
const conversationTypeMap = {
|
|
conversation_through_mentions: 'mention',
|
|
conversation_through_unattended: 'unattended',
|
|
};
|
|
return conversationListPageURL({
|
|
accountId: accountId.value,
|
|
inboxId,
|
|
label,
|
|
teamId,
|
|
conversationType: conversationTypeMap[name],
|
|
customViewId,
|
|
});
|
|
});
|
|
|
|
const isHMACVerified = computed(() => {
|
|
if (!isAWebWidgetInbox.value) {
|
|
return true;
|
|
}
|
|
return chatMetadata.value.hmac_verified;
|
|
});
|
|
|
|
const currentContact = computed(() =>
|
|
store.getters['contacts/getContact'](props.chat.meta.sender.id)
|
|
);
|
|
|
|
const isSnoozed = computed(
|
|
() => currentChat.value.status === wootConstants.STATUS_TYPE.SNOOZED
|
|
);
|
|
|
|
const snoozedDisplayText = computed(() => {
|
|
const { snoozed_until: snoozedUntil } = currentChat.value;
|
|
if (snoozedUntil) {
|
|
return `${t('CONVERSATION.HEADER.SNOOZED_UNTIL')} ${snoozedReopenTime(snoozedUntil)}`;
|
|
}
|
|
return t('CONVERSATION.HEADER.SNOOZED_UNTIL_NEXT_REPLY');
|
|
});
|
|
|
|
const inbox = computed(() => {
|
|
const { inbox_id: inboxId } = props.chat;
|
|
return store.getters['inboxes/getInbox'](inboxId);
|
|
});
|
|
|
|
const hasMultipleInboxes = computed(
|
|
() => store.getters['inboxes/getInboxes'].length > 1
|
|
);
|
|
|
|
const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
|
|
|
|
const isCrmInsightsOpen = computed(() => uiSettings.value.is_crm_insights_open);
|
|
|
|
const toggleCrmInsights = () => {
|
|
updateUISettings({
|
|
is_crm_insights_open: !isCrmInsightsOpen.value,
|
|
is_contact_sidebar_open: false,
|
|
is_copilot_panel_open: false,
|
|
});
|
|
};
|
|
|
|
const openPaymentModal = async () => {
|
|
isFetchingUnits.value = true;
|
|
try {
|
|
const response = await CaptainUnitsAPI.get();
|
|
units.value = response.data;
|
|
showCreateModal.value = true;
|
|
} catch (error) {
|
|
// console.error(error);
|
|
} finally {
|
|
isFetchingUnits.value = false;
|
|
}
|
|
};
|
|
|
|
const handleCreateReservation = async formData => {
|
|
isCreating.value = true;
|
|
try {
|
|
// Ensure contact info is forced from current chat if missing (safety net)
|
|
const payload = { ...formData };
|
|
if (!payload.contact_name) payload.contact_name = currentContact.value.name;
|
|
// Add custom attribute or tag to link to conversation if needed?
|
|
// For now, just creating the reservation is enough.
|
|
|
|
await CaptainReservationsAPI.create({ reservation: payload });
|
|
alert(t('CAPTAIN.RESERVATIONS.LIST.CREATE_SUCCESS') || 'Reserva criada!');
|
|
showCreateModal.value = false;
|
|
} catch (error) {
|
|
alert(
|
|
t('CAPTAIN.RESERVATIONS.LIST.CREATE_ERROR') || 'Erro ao criar reserva.'
|
|
);
|
|
} finally {
|
|
isCreating.value = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<!-- eslint-disable @intlify/vue-i18n/no-raw-text, vue/no-bare-strings-in-template -->
|
|
<div
|
|
ref="conversationHeader"
|
|
class="flex flex-col gap-3 items-center justify-between flex-1 w-full min-w-0 xl:flex-row px-3 py-2 border-b bg-n-background border-n-weak h-24 xl:h-12"
|
|
>
|
|
<div
|
|
class="flex items-center justify-start w-full xl:w-auto max-w-full min-w-0 xl:flex-1"
|
|
>
|
|
<BackButton
|
|
v-if="showBackButton"
|
|
:back-url="backButtonUrl"
|
|
class="ltr:mr-2 rtl:ml-2"
|
|
/>
|
|
<Avatar
|
|
:name="currentContact.name"
|
|
:src="currentContact.thumbnail"
|
|
:size="32"
|
|
:status="currentContact.availability_status"
|
|
hide-offline-status
|
|
rounded-full
|
|
/>
|
|
<div
|
|
class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2"
|
|
>
|
|
<div class="flex flex-row items-center max-w-full gap-1 p-0 m-0">
|
|
<span
|
|
class="text-sm font-medium truncate leading-tight text-n-slate-12"
|
|
>
|
|
{{ currentContact.name }}
|
|
</span>
|
|
<fluent-icon
|
|
v-if="!isHMACVerified"
|
|
v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
|
|
size="14"
|
|
class="text-n-amber-10 my-0 mx-0 min-w-[14px] flex-shrink-0"
|
|
icon="warning"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
|
|
>
|
|
<InboxName v-if="hasMultipleInboxes" :inbox="inbox" class="!mx-0" />
|
|
<span v-if="isSnoozed" class="font-medium text-n-amber-10">
|
|
{{ snoozedDisplayText }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex flex-row items-center justify-start xl:justify-end flex-shrink-0 gap-2 w-full xl:w-auto header-actions-wrap"
|
|
>
|
|
<SLACardLabel
|
|
v-if="hasSlaPolicyId"
|
|
:chat="chat"
|
|
show-extended-info
|
|
:parent-width="width"
|
|
class="hidden md:flex"
|
|
/>
|
|
<Button
|
|
v-tooltip.top="t('CONVERSATION.CRM_INSIGHTS.TOGGLE')"
|
|
icon="i-lucide-brain"
|
|
class="bg-gradient-to-br from-violet-50 to-indigo-50 text-violet-600 hover:from-violet-100 hover:to-indigo-100 dark:from-violet-900/30 dark:to-indigo-900/30 dark:text-violet-400 border border-violet-200/50 dark:border-violet-700/50 !p-2 !h-9 !w-9 !text-lg rounded-lg shadow-sm transition-all duration-200"
|
|
:class="{
|
|
'ring-2 ring-violet-400 ring-offset-1': isCrmInsightsOpen,
|
|
}"
|
|
@click="toggleCrmInsights"
|
|
/>
|
|
<Button
|
|
v-if="!isAWebWidgetInbox"
|
|
v-tooltip.top="'Enviar para Pagamentos'"
|
|
icon="i-lucide-banknote"
|
|
size="sm"
|
|
variant="outline"
|
|
color="slate"
|
|
:is-loading="isFetchingUnits"
|
|
class="hidden md:flex"
|
|
@click="openPaymentModal"
|
|
>
|
|
<!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
|
|
<span class="hidden lg:inline">Pagamento</span>
|
|
</Button>
|
|
<MoreActions :conversation-id="currentChat.id" />
|
|
</div>
|
|
</div>
|
|
|
|
<CreateReservationModal
|
|
v-if="showCreateModal"
|
|
:units="units"
|
|
mode="pre_booking"
|
|
:initial-contact="{
|
|
name: currentContact.name,
|
|
phone_number: currentContact.phone_number,
|
|
id: currentContact.id,
|
|
}"
|
|
@close="showCreateModal = false"
|
|
@confirm="handleCreateReservation"
|
|
/>
|
|
</template>
|