fix: csat survey page

This commit is contained in:
gabrieljablonski 2026-01-16 14:28:05 -03:00
parent eb7503cb3e
commit 9686cd74eb

View File

@ -28,13 +28,13 @@ const { t } = useI18n();
const store = useStore(); const store = useStore();
const labels = useMapGetter('labels/getLabels'); const labels = useMapGetter('labels/getLabels');
const { isAWhatsAppChannel, isATwilioWhatsAppChannel } = useInbox( const { isATwilioWhatsAppChannel, isAWhatsAppCloudChannel } = useInbox(
props.inbox?.id props.inbox?.id
); );
// Computed to check if it's any type of WhatsApp channel (Cloud or Twilio) // WhatsApp channels that require CSAT templates (Cloud and Twilio, NOT Baileys/Z-API)
const isAnyWhatsAppChannel = computed( const isTemplateRequiredWhatsAppChannel = computed(
() => isAWhatsAppChannel.value || isATwilioWhatsAppChannel.value () => isAWhatsAppCloudChannel.value || isATwilioWhatsAppChannel.value
); );
const isUpdating = ref(false); const isUpdating = ref(false);
@ -162,7 +162,7 @@ const initializeState = () => {
: []; : [];
// Store original template values for change detection // Store original template values for change detection
if (isAnyWhatsAppChannel.value) { if (isTemplateRequiredWhatsAppChannel.value) {
originalTemplateValues.value = { originalTemplateValues.value = {
message: state.message, message: state.message,
templateButtonText: state.templateButtonText, templateButtonText: state.templateButtonText,
@ -172,7 +172,7 @@ const initializeState = () => {
}; };
const checkTemplateStatus = async () => { const checkTemplateStatus = async () => {
if (!isAnyWhatsAppChannel.value) return; if (!isTemplateRequiredWhatsAppChannel.value) return;
try { try {
templateLoading.value = true; templateLoading.value = true;
@ -202,7 +202,7 @@ const checkTemplateStatus = async () => {
onMounted(() => { onMounted(() => {
initializeState(); initializeState();
if (!labels.value?.length) store.dispatch('labels/get'); if (!labels.value?.length) store.dispatch('labels/get');
if (isAnyWhatsAppChannel.value) checkTemplateStatus(); if (isTemplateRequiredWhatsAppChannel.value) checkTemplateStatus();
}); });
watch(() => props.inbox, initializeState, { immediate: true }); watch(() => props.inbox, initializeState, { immediate: true });
@ -232,7 +232,7 @@ const removeLabel = label => {
// Check if template-related fields have changed // Check if template-related fields have changed
const hasTemplateChanges = () => { const hasTemplateChanges = () => {
if (!isAnyWhatsAppChannel.value) return false; if (!isTemplateRequiredWhatsAppChannel.value) return false;
const original = originalTemplateValues.value; const original = originalTemplateValues.value;
return ( return (
@ -302,7 +302,7 @@ const updateInbox = async attributes => {
}; };
const createTemplate = async () => { const createTemplate = async () => {
if (!isAnyWhatsAppChannel.value) return null; if (!isTemplateRequiredWhatsAppChannel.value) return null;
const response = await store.dispatch('inboxes/createCSATTemplate', { const response = await store.dispatch('inboxes/createCSATTemplate', {
inboxId: props.inbox.id, inboxId: props.inbox.id,
@ -323,7 +323,7 @@ const performSave = async () => {
// For WhatsApp channels, create template first if needed // For WhatsApp channels, create template first if needed
if ( if (
isAnyWhatsAppChannel.value && isTemplateRequiredWhatsAppChannel.value &&
state.csatSurveyEnabled && state.csatSurveyEnabled &&
shouldCreateTemplate() shouldCreateTemplate()
) { ) {
@ -395,7 +395,7 @@ const saveSettings = async () => {
// Check if we need to show confirmation dialog for WhatsApp template changes // Check if we need to show confirmation dialog for WhatsApp template changes
// This applies to both WhatsApp Cloud and Twilio WhatsApp channels // This applies to both WhatsApp Cloud and Twilio WhatsApp channels
if ( if (
isAnyWhatsAppChannel.value && isTemplateRequiredWhatsAppChannel.value &&
state.csatSurveyEnabled && state.csatSurveyEnabled &&
hasExistingTemplate() && hasExistingTemplate() &&
hasTemplateChanges() hasTemplateChanges()
@ -428,7 +428,7 @@ const handleConfirmTemplateUpdate = async () => {
<div class="grid gap-5"> <div class="grid gap-5">
<!-- Show display type only for non-WhatsApp channels --> <!-- Show display type only for non-WhatsApp channels -->
<WithLabel <WithLabel
v-if="!isAnyWhatsAppChannel" v-if="!isTemplateRequiredWhatsAppChannel"
:label="$t('INBOX_MGMT.CSAT.DISPLAY_TYPE.LABEL')" :label="$t('INBOX_MGMT.CSAT.DISPLAY_TYPE.LABEL')"
name="display_type" name="display_type"
> >
@ -438,7 +438,7 @@ const handleConfirmTemplateUpdate = async () => {
/> />
</WithLabel> </WithLabel>
<template v-if="isAnyWhatsAppChannel"> <template v-if="isTemplateRequiredWhatsAppChannel">
<div <div
class="flex flex-col gap-4 justify-between w-full lg:flex-row lg:gap-6" class="flex flex-col gap-4 justify-between w-full lg:flex-row lg:gap-6"
> >
@ -463,6 +463,7 @@ const handleConfirmTemplateUpdate = async () => {
/> />
<WithLabel <WithLabel
v-if="shouldShowTemplateStatus"
:label="$t('INBOX_MGMT.CSAT.LANGUAGE.LABEL')" :label="$t('INBOX_MGMT.CSAT.LANGUAGE.LABEL')"
name="language" name="language"
> >
@ -495,6 +496,7 @@ const handleConfirmTemplateUpdate = async () => {
class="flex flex-col flex-shrink-0 justify-start items-center p-6 mt-1 rounded-xl basis-2/5 bg-n-slate-2 outline outline-1 outline-n-weak" class="flex flex-col flex-shrink-0 justify-start items-center p-6 mt-1 rounded-xl basis-2/5 bg-n-slate-2 outline outline-1 outline-n-weak"
> >
<p <p
v-if="shouldShowTemplateStatus"
class="inline-flex items-center text-sm font-medium text-n-slate-11" class="inline-flex items-center text-sm font-medium text-n-slate-11"
> >
{{ $t('INBOX_MGMT.CSAT.MESSAGE_PREVIEW.LABEL') }} {{ $t('INBOX_MGMT.CSAT.MESSAGE_PREVIEW.LABEL') }}
@ -509,7 +511,7 @@ const handleConfirmTemplateUpdate = async () => {
<CSATTemplate <CSATTemplate
:message="messagePreviewData" :message="messagePreviewData"
:button-text="state.templateButtonText" :button-text="state.templateButtonText"
class="pt-12" :class="shouldShowTemplateStatus ? 'pt-12' : ''"
/> />
</div> </div>
</div> </div>
@ -574,7 +576,7 @@ const handleConfirmTemplateUpdate = async () => {
</WithLabel> </WithLabel>
<p class="text-sm italic text-n-slate-11"> <p class="text-sm italic text-n-slate-11">
{{ {{
isAnyWhatsAppChannel isTemplateRequiredWhatsAppChannel
? $t('INBOX_MGMT.CSAT.WHATSAPP_NOTE') ? $t('INBOX_MGMT.CSAT.WHATSAPP_NOTE')
: $t('INBOX_MGMT.CSAT.NOTE') : $t('INBOX_MGMT.CSAT.NOTE')
}} }}