353 lines
10 KiB
Vue
353 lines
10 KiB
Vue
<script setup>
|
|
import { computed, onMounted, reactive, watch } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useStore } from 'vuex';
|
|
import { useI18n } from 'vue-i18n';
|
|
import QRCode from 'qrcode';
|
|
import EmptyState from '../../../../components/widgets/EmptyState.vue';
|
|
import NextButton from 'dashboard/components-next/button/Button.vue';
|
|
import DuplicateInboxBanner from './channels/instagram/DuplicateInboxBanner.vue';
|
|
import EmailInboxFinish from './channels/emailChannels/EmailInboxFinish.vue';
|
|
import WhatsappLinkDeviceModal from './components/WhatsappLinkDeviceModal.vue';
|
|
import { useInbox } from 'dashboard/composables/useInbox';
|
|
import { INBOX_TYPES } from 'dashboard/helper/inbox';
|
|
|
|
const { t } = useI18n();
|
|
const route = useRoute();
|
|
const store = useStore();
|
|
|
|
const qrCodes = reactive({
|
|
whatsapp: '',
|
|
messenger: '',
|
|
telegram: '',
|
|
});
|
|
|
|
const currentInbox = computed(() =>
|
|
store.getters['inboxes/getInbox'](route.params.inbox_id)
|
|
);
|
|
|
|
const showLinkDeviceModal = reactive({
|
|
value: false,
|
|
});
|
|
|
|
// Use useInbox composable with the inbox ID
|
|
const {
|
|
isAWhatsAppCloudChannel,
|
|
isAWhatsAppBaileysChannel,
|
|
isAWhatsAppZapiChannel,
|
|
isATwilioChannel,
|
|
isASmsInbox,
|
|
isALineChannel,
|
|
isAnEmailChannel,
|
|
isAWhatsAppChannel,
|
|
isAFacebookInbox,
|
|
isATelegramChannel,
|
|
isATwilioWhatsAppChannel,
|
|
} = useInbox(route.params.inbox_id);
|
|
|
|
const hasDuplicateInstagramInbox = computed(() => {
|
|
const instagramId = currentInbox.value.instagram_id;
|
|
const facebookInbox =
|
|
store.getters['inboxes/getFacebookInboxByInstagramId'](instagramId);
|
|
|
|
return (
|
|
currentInbox.value.channel_type === INBOX_TYPES.INSTAGRAM && facebookInbox
|
|
);
|
|
});
|
|
|
|
const shouldShowWhatsAppWebhookDetails = computed(() => {
|
|
return (
|
|
isAWhatsAppCloudChannel.value &&
|
|
currentInbox.value.provider_config?.source !== 'embedded_signup'
|
|
);
|
|
});
|
|
|
|
const isWhatsAppEmbeddedSignup = computed(() => {
|
|
return (
|
|
isAWhatsAppCloudChannel.value &&
|
|
currentInbox.value.provider_config?.source === 'embedded_signup'
|
|
);
|
|
});
|
|
|
|
const message = computed(() => {
|
|
if (isATwilioChannel.value) {
|
|
return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t(
|
|
'INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE'
|
|
)}`;
|
|
}
|
|
|
|
if (isASmsInbox.value) {
|
|
return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t(
|
|
'INBOX_MGMT.ADD.SMS.BANDWIDTH.API_CALLBACK.SUBTITLE'
|
|
)}`;
|
|
}
|
|
|
|
if (isALineChannel.value) {
|
|
return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t(
|
|
'INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE'
|
|
)}`;
|
|
}
|
|
|
|
if (isAWhatsAppCloudChannel.value && shouldShowWhatsAppWebhookDetails.value) {
|
|
return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t(
|
|
'INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.SUBTITLE'
|
|
)}`;
|
|
}
|
|
|
|
if (isAWhatsAppBaileysChannel.value || isAWhatsAppZapiChannel.value) {
|
|
return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t(
|
|
'INBOX_MGMT.ADD.WHATSAPP.EXTERNAL_PROVIDER.SUBTITLE'
|
|
)}`;
|
|
}
|
|
|
|
if (isAnEmailChannel.value && !currentInbox.value.provider) {
|
|
return t('INBOX_MGMT.ADD.EMAIL_CHANNEL.FINISH_MESSAGE');
|
|
}
|
|
|
|
if (currentInbox.value.web_widget_script) {
|
|
return t('INBOX_MGMT.FINISH.WEBSITE_SUCCESS');
|
|
}
|
|
|
|
if (isWhatsAppEmbeddedSignup.value) {
|
|
return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t(
|
|
'INBOX_MGMT.FINISH.WHATSAPP_QR_INSTRUCTION'
|
|
)}`;
|
|
}
|
|
|
|
return t('INBOX_MGMT.FINISH.MESSAGE');
|
|
});
|
|
|
|
async function generateQRCode(platform, identifier) {
|
|
if (!identifier || !identifier.trim()) {
|
|
// eslint-disable-next-line no-console
|
|
console.warn(`Invalid identifier for ${platform} QR code`);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const platformUrls = {
|
|
whatsapp: id => `https://wa.me/${id}`,
|
|
messenger: id => `https://m.me/${id}`,
|
|
telegram: id => `https://t.me/${id}`,
|
|
};
|
|
|
|
const url = platformUrls[platform](identifier);
|
|
const qrDataUrl = await QRCode.toDataURL(url);
|
|
qrCodes[platform] = qrDataUrl;
|
|
} catch (error) {
|
|
// eslint-disable-next-line no-console
|
|
console.error(`Error generating ${platform} QR code:`, error);
|
|
qrCodes[platform] = '';
|
|
}
|
|
}
|
|
|
|
async function generateQRCodes() {
|
|
if (!currentInbox.value) return;
|
|
|
|
// WhatsApp (both Cloud and Twilio)
|
|
if (currentInbox.value.phone_number && isAWhatsAppChannel.value) {
|
|
// For Twilio WhatsApp, phone_number format is "whatsapp:+1234567890"
|
|
// Extract just the phone number part for QR code generation
|
|
const phoneNumber = currentInbox.value.phone_number.replace(
|
|
'whatsapp:',
|
|
''
|
|
);
|
|
await generateQRCode('whatsapp', phoneNumber);
|
|
}
|
|
|
|
// Facebook Messenger
|
|
if (currentInbox.value.page_id && isAFacebookInbox.value) {
|
|
await generateQRCode('messenger', currentInbox.value.page_id);
|
|
}
|
|
|
|
// Telegram
|
|
if (isATelegramChannel.value && currentInbox.value.bot_name) {
|
|
await generateQRCode('telegram', currentInbox.value.bot_name);
|
|
}
|
|
}
|
|
|
|
const onOpenLinkDeviceModal = () => {
|
|
showLinkDeviceModal.value = true;
|
|
};
|
|
|
|
const onCloseLinkDeviceModal = () => {
|
|
showLinkDeviceModal.value = false;
|
|
};
|
|
|
|
// Watch for currentInbox changes and regenerate QR codes when available
|
|
watch(
|
|
currentInbox,
|
|
newInbox => {
|
|
if (newInbox) {
|
|
generateQRCodes();
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
onMounted(() => {
|
|
generateQRCodes();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="overflow-auto col-span-6 p-6 w-full h-full">
|
|
<DuplicateInboxBanner
|
|
v-if="hasDuplicateInstagramInbox"
|
|
:content="$t('INBOX_MGMT.ADD.INSTAGRAM.NEW_INBOX_SUGGESTION')"
|
|
/>
|
|
<EmptyState
|
|
:title="$t('INBOX_MGMT.FINISH.TITLE')"
|
|
:message="isAnEmailChannel && !currentInbox.provider ? '' : message"
|
|
:button-text="$t('INBOX_MGMT.FINISH.BUTTON_TEXT')"
|
|
>
|
|
<div class="w-full text-center">
|
|
<div class="my-4 mx-auto max-w-[70%]">
|
|
<woot-code
|
|
v-if="currentInbox.web_widget_script"
|
|
:script="currentInbox.web_widget_script"
|
|
/>
|
|
</div>
|
|
<div class="w-[50%] max-w-[50%] ml-[25%]">
|
|
<woot-code
|
|
v-if="isATwilioWhatsAppChannel"
|
|
lang="html"
|
|
:script="currentInbox.callback_webhook_url"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="shouldShowWhatsAppWebhookDetails"
|
|
class="w-[50%] max-w-[50%] ml-[25%]"
|
|
>
|
|
<p class="mt-8 font-medium text-n-slate-11">
|
|
{{ $t('INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.WEBHOOK_URL') }}
|
|
</p>
|
|
<woot-code lang="html" :script="currentInbox.callback_webhook_url" />
|
|
<p class="mt-8 font-medium text-n-slate-11">
|
|
{{
|
|
$t(
|
|
'INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.WEBHOOK_VERIFICATION_TOKEN'
|
|
)
|
|
}}
|
|
</p>
|
|
<woot-code
|
|
lang="html"
|
|
:script="currentInbox.provider_config.webhook_verify_token"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="isAWhatsAppBaileysChannel || isAWhatsAppZapiChannel"
|
|
class="w-[50%] max-w-[50%] ml-[25%]"
|
|
>
|
|
<NextButton @click="onOpenLinkDeviceModal">
|
|
{{ $t('INBOX_MGMT.ADD.WHATSAPP.EXTERNAL_PROVIDER.LINK_BUTTON') }}
|
|
</NextButton>
|
|
</div>
|
|
<div class="w-[50%] max-w-[50%] ml-[25%]">
|
|
<woot-code
|
|
v-if="isALineChannel"
|
|
lang="html"
|
|
:script="currentInbox.callback_webhook_url"
|
|
/>
|
|
</div>
|
|
<div class="w-[50%] max-w-[50%] ml-[25%]">
|
|
<woot-code
|
|
v-if="isASmsInbox"
|
|
lang="html"
|
|
:script="currentInbox.callback_webhook_url"
|
|
/>
|
|
</div>
|
|
<EmailInboxFinish
|
|
v-if="isAnEmailChannel && !currentInbox.provider"
|
|
:inbox="currentInbox"
|
|
:inbox-id="$route.params.inbox_id"
|
|
/>
|
|
<div
|
|
v-if="
|
|
isAWhatsAppChannel &&
|
|
!isAWhatsAppBaileysChannel &&
|
|
!isAWhatsAppZapiChannel &&
|
|
qrCodes.whatsapp
|
|
"
|
|
class="flex flex-col gap-3 items-center mt-8"
|
|
>
|
|
<p class="mt-2 text-sm text-n-slate-9">
|
|
{{ $t('INBOX_MGMT.FINISH.WHATSAPP_QR_INSTRUCTION') }}
|
|
</p>
|
|
<div class="rounded-lg shadow outline-1 outline-n-strong outline">
|
|
<img
|
|
:src="qrCodes.whatsapp"
|
|
alt="WhatsApp QR Code"
|
|
class="rounded-lg size-48 dark:invert"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="isAFacebookInbox && qrCodes.messenger"
|
|
class="flex flex-col gap-3 items-center mt-8"
|
|
>
|
|
<p class="mt-2 text-sm text-n-slate-9">
|
|
{{ $t('INBOX_MGMT.FINISH.MESSENGER_QR_INSTRUCTION') }}
|
|
</p>
|
|
<div class="rounded-lg shadow outline-1 outline-n-strong outline">
|
|
<img
|
|
:src="qrCodes.messenger"
|
|
alt="Messenger QR Code"
|
|
class="rounded-lg size-48 dark:invert"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="isATelegramChannel && qrCodes.telegram"
|
|
class="flex flex-col gap-4 items-center mt-8"
|
|
>
|
|
<p class="mt-2 text-sm text-n-slate-9">
|
|
{{ $t('INBOX_MGMT.FINISH.TELEGRAM_QR_INSTRUCTION') }}
|
|
</p>
|
|
|
|
<div class="rounded-lg shadow outline-1 outline-n-strong outline">
|
|
<img
|
|
:src="qrCodes.telegram"
|
|
alt="Telegram QR Code"
|
|
class="rounded-lg size-48 dark:invert"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2 justify-center mt-4">
|
|
<router-link
|
|
:to="{
|
|
name: 'settings_inbox_show',
|
|
params: { inboxId: $route.params.inbox_id },
|
|
}"
|
|
>
|
|
<NextButton
|
|
outline
|
|
slate
|
|
:label="$t('INBOX_MGMT.FINISH.MORE_SETTINGS')"
|
|
/>
|
|
</router-link>
|
|
<router-link
|
|
:to="{
|
|
name: 'inbox_dashboard',
|
|
params: { inboxId: $route.params.inbox_id },
|
|
}"
|
|
>
|
|
<NextButton
|
|
solid
|
|
teal
|
|
:label="$t('INBOX_MGMT.FINISH.BUTTON_TEXT')"
|
|
/>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</EmptyState>
|
|
<WhatsappLinkDeviceModal
|
|
v-if="showLinkDeviceModal.value"
|
|
:show="showLinkDeviceModal.value"
|
|
:on-close="onCloseLinkDeviceModal"
|
|
:inbox="currentInbox"
|
|
is-setup
|
|
/>
|
|
</div>
|
|
</template>
|