771 lines
24 KiB
Vue
771 lines
24 KiB
Vue
<script>
|
|
import { useAlert } from 'dashboard/composables';
|
|
import inboxMixin from 'shared/mixins/inboxMixin';
|
|
import SettingsSection from '../../../../../components/SettingsSection.vue';
|
|
import ImapSettings from '../ImapSettings.vue';
|
|
import SmtpSettings from '../SmtpSettings.vue';
|
|
import { useVuelidate } from '@vuelidate/core';
|
|
import NextButton from 'dashboard/components-next/button/Button.vue';
|
|
import TextArea from 'next/textarea/TextArea.vue';
|
|
import WhatsappReauthorize from '../channels/whatsapp/Reauthorize.vue';
|
|
import { sanitizeAllowedDomains, isValidURL } from 'dashboard/helper/URLHelper';
|
|
import { requiredIf } from '@vuelidate/validators';
|
|
import WhatsappLinkDeviceModal from '../components/WhatsappLinkDeviceModal.vue';
|
|
import InboxName from 'dashboard/components/widgets/InboxName.vue';
|
|
import Switch from 'dashboard/components-next/switch/Switch.vue';
|
|
|
|
export default {
|
|
components: {
|
|
SettingsSection,
|
|
ImapSettings,
|
|
SmtpSettings,
|
|
NextButton,
|
|
TextArea,
|
|
WhatsappReauthorize,
|
|
WhatsappLinkDeviceModal,
|
|
InboxName,
|
|
// eslint-disable-next-line vue/no-reserved-component-names
|
|
Switch,
|
|
},
|
|
mixins: [inboxMixin],
|
|
props: {
|
|
inbox: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
},
|
|
setup() {
|
|
return { v$: useVuelidate() };
|
|
},
|
|
data() {
|
|
return {
|
|
hmacMandatory: false,
|
|
whatsAppInboxAPIKey: '',
|
|
isRequestingReauthorization: false,
|
|
isSyncingTemplates: false,
|
|
allowedDomains: '',
|
|
isUpdatingAllowedDomains: false,
|
|
baileysProviderUrl: '',
|
|
showLinkDeviceModal: false,
|
|
markAsRead: true,
|
|
zapiInstanceId: '',
|
|
zapiToken: '',
|
|
zapiClientToken: '',
|
|
zapiTokenUpdate: '',
|
|
zapiClientTokenUpdate: '',
|
|
};
|
|
},
|
|
validations() {
|
|
return {
|
|
whatsAppInboxAPIKey: {
|
|
requiredIf: requiredIf(
|
|
!this.isAWhatsAppBaileysChannel && !this.isAWhatsAppZapiChannel
|
|
),
|
|
},
|
|
baileysProviderUrl: { isValidURL: value => !value || isValidURL(value) },
|
|
zapiTokenUpdate: {},
|
|
zapiClientTokenUpdate: {},
|
|
};
|
|
},
|
|
computed: {
|
|
isEmbeddedSignupWhatsApp() {
|
|
return this.inbox.provider_config?.source === 'embedded_signup';
|
|
},
|
|
whatsappAppId() {
|
|
return window.chatwootConfig?.whatsappAppId;
|
|
},
|
|
},
|
|
watch: {
|
|
inbox() {
|
|
this.setDefaults();
|
|
},
|
|
},
|
|
mounted() {
|
|
this.setDefaults();
|
|
},
|
|
methods: {
|
|
setDefaults() {
|
|
this.hmacMandatory = this.inbox.hmac_mandatory || false;
|
|
this.allowedDomains = this.inbox.allowed_domains || '';
|
|
this.baileysProviderUrl = this.inbox.provider_config?.provider_url ?? '';
|
|
this.markAsRead = this.inbox.provider_config?.mark_as_read ?? true;
|
|
this.zapiInstanceId = this.inbox.provider_config?.instance_id ?? '';
|
|
this.zapiToken = this.inbox.provider_config?.token ?? '';
|
|
this.zapiClientToken = this.inbox.provider_config?.client_token ?? '';
|
|
},
|
|
handleHmacFlag() {
|
|
this.updateInbox();
|
|
},
|
|
async updateInbox() {
|
|
try {
|
|
const payload = {
|
|
id: this.inbox.id,
|
|
formData: false,
|
|
channel: {
|
|
hmac_mandatory: this.hmacMandatory,
|
|
},
|
|
};
|
|
await this.$store.dispatch('inboxes/updateInbox', payload);
|
|
useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
|
|
} catch (error) {
|
|
useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
|
|
}
|
|
},
|
|
async updateAllowedDomains() {
|
|
this.isUpdatingAllowedDomains = true;
|
|
const sanitizedAllowedDomains = sanitizeAllowedDomains(
|
|
this.allowedDomains
|
|
);
|
|
try {
|
|
const payload = {
|
|
id: this.inbox.id,
|
|
formData: false,
|
|
channel: {
|
|
allowed_domains: sanitizedAllowedDomains,
|
|
},
|
|
};
|
|
await this.$store.dispatch('inboxes/updateInbox', payload);
|
|
this.allowedDomains = sanitizedAllowedDomains;
|
|
useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
|
|
} catch (error) {
|
|
useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
|
|
} finally {
|
|
this.isUpdatingAllowedDomains = false;
|
|
}
|
|
},
|
|
async updateWhatsAppInboxAPIKey() {
|
|
try {
|
|
const payload = {
|
|
id: this.inbox.id,
|
|
formData: false,
|
|
channel: {},
|
|
};
|
|
|
|
payload.channel.provider_config = {
|
|
...this.inbox.provider_config,
|
|
api_key: this.whatsAppInboxAPIKey,
|
|
};
|
|
|
|
await this.$store.dispatch('inboxes/updateInbox', payload);
|
|
useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
|
|
} catch (error) {
|
|
useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
|
|
}
|
|
},
|
|
async handleReconfigure() {
|
|
if (this.$refs.whatsappReauth) {
|
|
await this.$refs.whatsappReauth.requestAuthorization();
|
|
}
|
|
},
|
|
async syncTemplates() {
|
|
this.isSyncingTemplates = true;
|
|
try {
|
|
await this.$store.dispatch('inboxes/syncTemplates', this.inbox.id);
|
|
useAlert(
|
|
this.$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TEMPLATES_SYNC_SUCCESS')
|
|
);
|
|
} catch (error) {
|
|
useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
|
|
} finally {
|
|
this.isSyncingTemplates = false;
|
|
}
|
|
},
|
|
async updateBaileysProviderUrl() {
|
|
try {
|
|
const payload = {
|
|
id: this.inbox.id,
|
|
formData: false,
|
|
channel: {
|
|
provider_config: {
|
|
...this.inbox.provider_config,
|
|
provider_url: this.baileysProviderUrl,
|
|
},
|
|
},
|
|
};
|
|
|
|
await this.$store.dispatch('inboxes/updateInbox', payload);
|
|
useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
|
|
} catch (error) {
|
|
useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
|
|
}
|
|
},
|
|
async updateWhatsAppMarkAsRead() {
|
|
try {
|
|
const payload = {
|
|
id: this.inbox.id,
|
|
formData: false,
|
|
channel: {
|
|
provider_config: {
|
|
...this.inbox.provider_config,
|
|
mark_as_read: this.markAsRead,
|
|
},
|
|
},
|
|
};
|
|
await this.$store.dispatch('inboxes/updateInbox', payload);
|
|
useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
|
|
} catch (error) {
|
|
useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
|
|
}
|
|
},
|
|
onOpenLinkDeviceModal() {
|
|
this.showLinkDeviceModal = true;
|
|
},
|
|
onCloseLinkDeviceModal() {
|
|
this.showLinkDeviceModal = false;
|
|
},
|
|
async updateZapiToken() {
|
|
try {
|
|
const payload = {
|
|
id: this.inbox.id,
|
|
formData: false,
|
|
channel: {
|
|
provider_config: {
|
|
...this.inbox.provider_config,
|
|
token: this.zapiTokenUpdate,
|
|
},
|
|
},
|
|
};
|
|
await this.$store.dispatch('inboxes/updateInbox', payload);
|
|
useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
|
|
} catch (error) {
|
|
useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
|
|
}
|
|
},
|
|
async updateZapiClientToken() {
|
|
try {
|
|
const payload = {
|
|
id: this.inbox.id,
|
|
formData: false,
|
|
channel: {
|
|
provider_config: {
|
|
...this.inbox.provider_config,
|
|
client_token: this.zapiClientTokenUpdate,
|
|
},
|
|
},
|
|
};
|
|
await this.$store.dispatch('inboxes/updateInbox', payload);
|
|
useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
|
|
} catch (error) {
|
|
useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="isATwilioChannel" class="mx-8">
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.TITLE')"
|
|
:sub-title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE')"
|
|
>
|
|
<woot-code :script="inbox.callback_webhook_url" lang="html" />
|
|
</SettingsSection>
|
|
<SettingsSection
|
|
v-if="isATwilioWhatsAppChannel"
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TEMPLATES_SYNC_TITLE')"
|
|
:sub-title="
|
|
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TEMPLATES_SYNC_SUBHEADER')
|
|
"
|
|
>
|
|
<div class="flex justify-start items-center mt-2">
|
|
<NextButton :disabled="isSyncingTemplates" @click="syncTemplates">
|
|
{{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TEMPLATES_SYNC_BUTTON') }}
|
|
</NextButton>
|
|
</div>
|
|
</SettingsSection>
|
|
</div>
|
|
<div v-else-if="isAVoiceChannel" class="mx-8">
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_VOICE_URL_TITLE')"
|
|
:sub-title="
|
|
$t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_VOICE_URL_SUBTITLE')
|
|
"
|
|
>
|
|
<woot-code :script="inbox.voice_call_webhook_url" lang="html" />
|
|
</SettingsSection>
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_STATUS_URL_TITLE')"
|
|
:sub-title="
|
|
$t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_STATUS_URL_SUBTITLE')
|
|
"
|
|
>
|
|
<woot-code :script="inbox.voice_status_webhook_url" lang="html" />
|
|
</SettingsSection>
|
|
</div>
|
|
|
|
<div v-else-if="isALineChannel" class="mx-8">
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.TITLE')"
|
|
:sub-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE')"
|
|
>
|
|
<woot-code :script="inbox.callback_webhook_url" lang="html" />
|
|
</SettingsSection>
|
|
</div>
|
|
<div v-else-if="isAWebWidgetInbox">
|
|
<div class="mx-8">
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
|
|
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
|
|
>
|
|
<woot-code
|
|
:script="inbox.web_widget_script"
|
|
lang="html"
|
|
:codepen-title="`${inbox.name} - Chatwoot Widget Test`"
|
|
enable-code-pen
|
|
/>
|
|
</SettingsSection>
|
|
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.ALLOWED_DOMAINS.TITLE')"
|
|
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.ALLOWED_DOMAINS.SUBTITLE')"
|
|
>
|
|
<div class="flex flex-col w-full max-w-3xl gap-4">
|
|
<TextArea
|
|
v-model="allowedDomains"
|
|
:placeholder="
|
|
$t('INBOX_MGMT.SETTINGS_POPUP.ALLOWED_DOMAINS.PLACEHOLDER')
|
|
"
|
|
auto-height
|
|
min-height="8rem"
|
|
class="w-full"
|
|
/>
|
|
<div>
|
|
<NextButton
|
|
:label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
|
|
:is-loading="isUpdatingAllowedDomains"
|
|
@click="updateAllowedDomains"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</SettingsSection>
|
|
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_VERIFICATION')"
|
|
>
|
|
<woot-code :script="inbox.hmac_token" />
|
|
<template #subTitle>
|
|
{{ $t('INBOX_MGMT.SETTINGS_POPUP.HMAC_DESCRIPTION') }}
|
|
<a
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
href="https://www.chatwoot.com/docs/product/channels/live-chat/sdk/identity-validation/"
|
|
>
|
|
{{ $t('INBOX_MGMT.SETTINGS_POPUP.HMAC_LINK_TO_DOCS') }}
|
|
</a>
|
|
</template>
|
|
</SettingsSection>
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
|
|
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
|
|
>
|
|
<div class="flex gap-2 items-center">
|
|
<input
|
|
id="hmacMandatory"
|
|
v-model="hmacMandatory"
|
|
type="checkbox"
|
|
@change="handleHmacFlag"
|
|
/>
|
|
<label for="hmacMandatory">
|
|
{{ $t('INBOX_MGMT.EDIT.ENABLE_HMAC.LABEL') }}
|
|
</label>
|
|
</div>
|
|
</SettingsSection>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="isAPIInbox" class="mx-8">
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER')"
|
|
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER_SUB_TEXT')"
|
|
>
|
|
<woot-code :script="inbox.inbox_identifier" />
|
|
</SettingsSection>
|
|
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_VERIFICATION')"
|
|
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_DESCRIPTION')"
|
|
>
|
|
<woot-code :script="inbox.hmac_token" />
|
|
</SettingsSection>
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
|
|
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
|
|
>
|
|
<div class="flex gap-2 items-center">
|
|
<input
|
|
id="hmacMandatory"
|
|
v-model="hmacMandatory"
|
|
type="checkbox"
|
|
@change="handleHmacFlag"
|
|
/>
|
|
<label for="hmacMandatory">
|
|
{{ $t('INBOX_MGMT.EDIT.ENABLE_HMAC.LABEL') }}
|
|
</label>
|
|
</div>
|
|
</SettingsSection>
|
|
</div>
|
|
<div v-else-if="isAnEmailChannel">
|
|
<div class="mx-8">
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_TITLE')"
|
|
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_SUB_TEXT')"
|
|
>
|
|
<woot-code :script="inbox.forward_to_email" />
|
|
</SettingsSection>
|
|
</div>
|
|
<ImapSettings :inbox="inbox" />
|
|
<SmtpSettings v-if="inbox.imap_enabled" :inbox="inbox" />
|
|
</div>
|
|
<div v-else-if="isAWhatsAppCloudChannel">
|
|
<div v-if="inbox.provider_config" class="mx-8">
|
|
<!-- Embedded Signup Section -->
|
|
<template v-if="isEmbeddedSignupWhatsApp">
|
|
<SettingsSection
|
|
v-if="whatsappAppId"
|
|
:title="
|
|
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_EMBEDDED_SIGNUP_TITLE')
|
|
"
|
|
:sub-title="
|
|
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_EMBEDDED_SIGNUP_SUBHEADER')
|
|
"
|
|
>
|
|
<div class="flex gap-4 items-center">
|
|
<p class="text-sm text-slate-600">
|
|
{{
|
|
$t(
|
|
'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_EMBEDDED_SIGNUP_DESCRIPTION'
|
|
)
|
|
}}
|
|
</p>
|
|
<NextButton @click="handleReconfigure">
|
|
{{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_RECONFIGURE_BUTTON') }}
|
|
</NextButton>
|
|
</div>
|
|
</SettingsSection>
|
|
</template>
|
|
|
|
<!-- Manual Setup Section -->
|
|
<template v-else>
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_WEBHOOK_TITLE')"
|
|
:sub-title="
|
|
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_WEBHOOK_SUBHEADER')
|
|
"
|
|
>
|
|
<woot-code :script="inbox.provider_config.webhook_verify_token" />
|
|
</SettingsSection>
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_TITLE')"
|
|
:sub-title="
|
|
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_SUBHEADER')
|
|
"
|
|
>
|
|
<woot-code :script="inbox.provider_config.api_key" />
|
|
</SettingsSection>
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_TITLE')"
|
|
:sub-title="
|
|
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_SUBHEADER')
|
|
"
|
|
>
|
|
<div
|
|
class="flex flex-1 justify-between items-center mt-2 whatsapp-settings--content"
|
|
>
|
|
<woot-input
|
|
v-model="whatsAppInboxAPIKey"
|
|
type="text"
|
|
class="flex-1 mr-2 [&>input]:!mb-0"
|
|
:placeholder="
|
|
$t(
|
|
'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_PLACEHOLDER'
|
|
)
|
|
"
|
|
/>
|
|
<NextButton
|
|
:disabled="v$.whatsAppInboxAPIKey.$invalid"
|
|
@click="updateWhatsAppInboxAPIKey"
|
|
>
|
|
{{
|
|
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON')
|
|
}}
|
|
</NextButton>
|
|
</div>
|
|
</SettingsSection>
|
|
</template>
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TEMPLATES_SYNC_TITLE')"
|
|
:sub-title="
|
|
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TEMPLATES_SYNC_SUBHEADER')
|
|
"
|
|
>
|
|
<div class="flex justify-start items-center mt-2">
|
|
<NextButton :disabled="isSyncingTemplates" @click="syncTemplates">
|
|
{{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TEMPLATES_SYNC_BUTTON') }}
|
|
</NextButton>
|
|
</div>
|
|
</SettingsSection>
|
|
</div>
|
|
<WhatsappReauthorize
|
|
v-if="isEmbeddedSignupWhatsApp"
|
|
ref="whatsappReauth"
|
|
:inbox="inbox"
|
|
class="hidden"
|
|
/>
|
|
</div>
|
|
<div v-else-if="isAWhatsAppBaileysChannel">
|
|
<WhatsappLinkDeviceModal
|
|
v-if="showLinkDeviceModal"
|
|
:show="showLinkDeviceModal"
|
|
:on-close="onCloseLinkDeviceModal"
|
|
:inbox="inbox"
|
|
/>
|
|
<div class="mx-8">
|
|
<SettingsSection
|
|
:title="
|
|
$t(
|
|
'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MANAGE_PROVIDER_CONNECTION_TITLE'
|
|
)
|
|
"
|
|
:sub-title="
|
|
$t(
|
|
'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MANAGE_PROVIDER_CONNECTION_SUBHEADER'
|
|
)
|
|
"
|
|
>
|
|
<div class="flex flex-col gap-2">
|
|
<InboxName
|
|
:inbox="inbox"
|
|
class="!text-lg !m-0"
|
|
with-phone-number
|
|
with-provider-connection-status
|
|
/>
|
|
<NextButton class="w-fit" @click="onOpenLinkDeviceModal">
|
|
{{
|
|
$t(
|
|
'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MANAGE_PROVIDER_CONNECTION_BUTTON'
|
|
)
|
|
}}
|
|
</NextButton>
|
|
</div>
|
|
</SettingsSection>
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_PROVIDER_URL_TITLE')"
|
|
:sub-title="
|
|
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_PROVIDER_URL_SUBHEADER')
|
|
"
|
|
>
|
|
<div
|
|
class="flex items-center justify-between flex-1 mt-2 whatsapp-settings--content"
|
|
>
|
|
<woot-input
|
|
v-model="baileysProviderUrl"
|
|
type="text"
|
|
class="flex-1 mr-2 items-center"
|
|
:placeholder="
|
|
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_PROVIDER_URL_PLACEHOLDER')
|
|
"
|
|
@keydown="v$.baileysProviderUrl.$touch"
|
|
/>
|
|
<NextButton
|
|
:disabled="
|
|
v$.baileysProviderUrl.$invalid ||
|
|
baileysProviderUrl === inbox.provider_config.provider_url
|
|
"
|
|
@click="updateBaileysProviderUrl"
|
|
>
|
|
{{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
|
|
</NextButton>
|
|
</div>
|
|
<span v-if="v$.baileysProviderUrl.$error" class="text-red-400">
|
|
{{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_PROVIDER_URL_ERROR') }}
|
|
</span>
|
|
</SettingsSection>
|
|
<template v-if="inbox.provider_config.api_key">
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_TITLE')"
|
|
:sub-title="
|
|
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_SUBHEADER')
|
|
"
|
|
>
|
|
<woot-code :script="inbox.provider_config.api_key" />
|
|
</SettingsSection>
|
|
</template>
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_TITLE')"
|
|
:sub-title="
|
|
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_SUBHEADER')
|
|
"
|
|
>
|
|
<div
|
|
class="flex items-center justify-between flex-1 mt-2 whatsapp-settings--content"
|
|
>
|
|
<woot-input
|
|
v-model="whatsAppInboxAPIKey"
|
|
type="text"
|
|
class="flex-1 mr-2"
|
|
:placeholder="
|
|
$t(
|
|
'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_PLACEHOLDER'
|
|
)
|
|
"
|
|
/>
|
|
<NextButton
|
|
:disabled="
|
|
v$.whatsAppInboxAPIKey.$invalid ||
|
|
(!inbox.provider_config.api_key && !whatsAppInboxAPIKey) ||
|
|
whatsAppInboxAPIKey === inbox.provider_config.api_key
|
|
"
|
|
@click="updateWhatsAppInboxAPIKey"
|
|
>
|
|
{{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
|
|
</NextButton>
|
|
</div>
|
|
</SettingsSection>
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MARK_AS_READ_TITLE')"
|
|
:sub-title="
|
|
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MARK_AS_READ_SUBHEADER')
|
|
"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<Switch
|
|
id="markAsRead"
|
|
v-model="markAsRead"
|
|
@change="updateWhatsAppMarkAsRead"
|
|
/>
|
|
<label for="markAsRead">
|
|
{{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MARK_AS_READ_LABEL') }}
|
|
</label>
|
|
</div>
|
|
</SettingsSection>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="isAWhatsAppZapiChannel">
|
|
<WhatsappLinkDeviceModal
|
|
v-if="showLinkDeviceModal"
|
|
:show="showLinkDeviceModal"
|
|
:on-close="onCloseLinkDeviceModal"
|
|
:inbox="inbox"
|
|
/>
|
|
<div class="mx-8">
|
|
<SettingsSection
|
|
:title="
|
|
$t(
|
|
'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MANAGE_PROVIDER_CONNECTION_TITLE'
|
|
)
|
|
"
|
|
:sub-title="
|
|
$t(
|
|
'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MANAGE_PROVIDER_CONNECTION_SUBHEADER'
|
|
)
|
|
"
|
|
>
|
|
<div class="flex flex-col gap-2">
|
|
<InboxName
|
|
:inbox="inbox"
|
|
class="!text-lg !m-0"
|
|
with-phone-number
|
|
with-provider-connection-status
|
|
/>
|
|
<NextButton class="w-fit" @click="onOpenLinkDeviceModal">
|
|
{{
|
|
$t(
|
|
'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MANAGE_PROVIDER_CONNECTION_BUTTON'
|
|
)
|
|
}}
|
|
</NextButton>
|
|
</div>
|
|
</SettingsSection>
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_INSTANCE_ID_TITLE')"
|
|
:sub-title="
|
|
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_INSTANCE_ID_SUBHEADER')
|
|
"
|
|
>
|
|
<woot-code :script="inbox.provider_config.instance_id" />
|
|
</SettingsSection>
|
|
<template v-if="inbox.provider_config.token">
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TOKEN_TITLE')"
|
|
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TOKEN_SUBHEADER')"
|
|
>
|
|
<woot-code :script="inbox.provider_config.token" secure />
|
|
</SettingsSection>
|
|
</template>
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TOKEN_UPDATE_TITLE')"
|
|
:sub-title="
|
|
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TOKEN_UPDATE_SUBHEADER')
|
|
"
|
|
>
|
|
<div
|
|
class="flex items-center justify-between flex-1 mt-2 whatsapp-settings--content"
|
|
>
|
|
<woot-input
|
|
v-model="zapiTokenUpdate"
|
|
type="password"
|
|
class="flex-1 mr-2"
|
|
/>
|
|
<NextButton
|
|
:disabled="
|
|
v$.zapiTokenUpdate.$invalid ||
|
|
(!inbox.provider_config.token && !zapiTokenUpdate) ||
|
|
zapiTokenUpdate === inbox.provider_config.token
|
|
"
|
|
@click="updateZapiToken"
|
|
>
|
|
{{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
|
|
</NextButton>
|
|
</div>
|
|
</SettingsSection>
|
|
|
|
<template v-if="inbox.provider_config.client_token">
|
|
<SettingsSection
|
|
:title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_CLIENT_TOKEN_TITLE')"
|
|
:sub-title="
|
|
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_CLIENT_TOKEN_SUBHEADER')
|
|
"
|
|
>
|
|
<woot-code :script="inbox.provider_config.client_token" secure />
|
|
</SettingsSection>
|
|
</template>
|
|
<SettingsSection
|
|
:title="
|
|
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_CLIENT_TOKEN_UPDATE_TITLE')
|
|
"
|
|
:sub-title="
|
|
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_CLIENT_TOKEN_UPDATE_SUBHEADER')
|
|
"
|
|
>
|
|
<div
|
|
class="flex items-center justify-between flex-1 mt-2 whatsapp-settings--content"
|
|
>
|
|
<woot-input
|
|
v-model="zapiClientTokenUpdate"
|
|
type="password"
|
|
class="flex-1 mr-2"
|
|
/>
|
|
<NextButton
|
|
:disabled="
|
|
v$.zapiClientTokenUpdate.$invalid ||
|
|
(!inbox.provider_config.client_token && !zapiClientTokenUpdate) ||
|
|
zapiClientTokenUpdate === inbox.provider_config.client_token
|
|
"
|
|
@click="updateZapiClientToken"
|
|
>
|
|
{{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
|
|
</NextButton>
|
|
</div>
|
|
</SettingsSection>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.whatsapp-settings--content {
|
|
::v-deep input {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
</style>
|