diff --git a/app/javascript/dashboard/assets/images/curved-arrow-red.svg b/app/javascript/dashboard/assets/images/curved-arrow-red.svg new file mode 100644 index 000000000..10a8dbcb9 --- /dev/null +++ b/app/javascript/dashboard/assets/images/curved-arrow-red.svg @@ -0,0 +1,14 @@ + + + + diff --git a/app/javascript/dashboard/components-next/banner/PromoBanner.vue b/app/javascript/dashboard/components-next/banner/PromoBanner.vue new file mode 100644 index 000000000..a10c70521 --- /dev/null +++ b/app/javascript/dashboard/components-next/banner/PromoBanner.vue @@ -0,0 +1,126 @@ + + + diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json index 5bea9325a..71c32d8c4 100644 --- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json +++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json @@ -237,7 +237,12 @@ }, "SELECT_PROVIDER": { "TITLE": "Select your API provider", - "DESCRIPTION": "Choose your WhatsApp provider. You can connect directly through Meta which requires no setup, or connect through Twilio using your account credentials." + "DESCRIPTION": "Choose your WhatsApp provider. You can connect directly through Meta which requires no setup, or connect through Twilio using your account credentials.", + "ZAPI_PROMO": { + "TITLE": "Looking for a reliable WhatsApp solution?", + "DESCRIPTION": "Z-API offers superior stability compared to Baileys and is much simpler to set up than Cloud or Twilio - no complex configuration required. Perfect for businesses that want to get started quickly.", + "CTA": "Use Z-API" + } }, "INBOX_NAME": { "LABEL": "Inbox Name", @@ -342,6 +347,18 @@ "MANUAL_FALLBACK": "If your number is already connected to the WhatsApp Business Platform (API), or if you’re a tech provider onboarding your own number, please use the {link} flow", "MANUAL_LINK_TEXT": "manual setup flow" }, + "ZAPI_PROMO": { + "SWITCH_BANNER": { + "TITLE": "Consider switching to Z-API for easier setup", + "DESCRIPTION": "Z-API provides a more stable connection than Baileys and requires less configuration than Cloud/Twilio. Switch to a hassle-free WhatsApp integration.", + "CTA": "Switch to Z-API" + }, + "SETUP_BANNER": { + "TITLE": "Get 10% off your Z-API subscription", + "DESCRIPTION": "Create your Z-API account using our affiliate link and receive 10% off. Simple setup, reliable connections, and great support.", + "CTA": "Create Z-API Account" + } + }, "API": { "ERROR_MESSAGE": "We were not able to save the WhatsApp channel" } diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json index 5c75018b5..f450e4864 100644 --- a/app/javascript/dashboard/i18n/locale/en/integrations.json +++ b/app/javascript/dashboard/i18n/locale/en/integrations.json @@ -43,7 +43,8 @@ "CONTACT_CREATED": "Contact created", "CONTACT_UPDATED": "Contact updated", "CONVERSATION_TYPING_ON": "Conversation Typing On", - "CONVERSATION_TYPING_OFF": "Conversation Typing Off" + "CONVERSATION_TYPING_OFF": "Conversation Typing Off", + "PROVIDER_EVENT_RECEIVED": "Provider Event Received" } }, "NAME": { diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/pt_BR/inboxMgmt.json index 3229d7909..197223338 100644 --- a/app/javascript/dashboard/i18n/locale/pt_BR/inboxMgmt.json +++ b/app/javascript/dashboard/i18n/locale/pt_BR/inboxMgmt.json @@ -237,7 +237,12 @@ }, "SELECT_PROVIDER": { "TITLE": "Selecione seu provedor de API", - "DESCRIPTION": "Escolha seu provedor do WhatsApp. Você pode se conectar diretamente através de metade, que não requer nenhuma configuração ou se conectar pelo Twilio usando as credenciais da sua conta." + "DESCRIPTION": "Escolha seu provedor do WhatsApp. Você pode se conectar diretamente através de metade, que não requer nenhuma configuração ou se conectar pelo Twilio usando as credenciais da sua conta.", + "ZAPI_PROMO": { + "TITLE": "Procurando uma solução WhatsApp confiável?", + "DESCRIPTION": "Z-API oferece estabilidade superior comparado ao Baileys e é muito mais simples de configurar que Cloud ou Twilio - sem necessidade de configuração complexa. Perfeito para empresas que querem começar rapidamente.", + "CTA": "Usar Z-API" + } }, "INBOX_NAME": { "LABEL": "Nome da Caixa de Entrada", @@ -342,6 +347,18 @@ "MANUAL_FALLBACK": "If your number is already connected to the WhatsApp Business Platform (API), or if you’re a tech provider onboarding your own number, please use the {link} flow", "MANUAL_LINK_TEXT": "manual setup flow" }, + "ZAPI_PROMO": { + "SWITCH_BANNER": { + "TITLE": "Considere mudar para Z-API para configuração mais fácil", + "DESCRIPTION": "Z-API fornece uma conexão mais estável que Baileys e requer menos configuração que Cloud/Twilio. Mude para uma integração WhatsApp sem complicações.", + "CTA": "Mudar para Z-API" + }, + "SETUP_BANNER": { + "TITLE": "Ganhe 10% de desconto na sua assinatura Z-API", + "DESCRIPTION": "Crie sua conta Z-API usando nosso link de afiliado e receba 10% de desconto. Configuração simples, conexões confiáveis e ótimo suporte.", + "CTA": "Criar Conta Z-API" + } + }, "API": { "ERROR_MESSAGE": "Não foi possível salvar o canal do WhatsApp" } diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/integrations.json b/app/javascript/dashboard/i18n/locale/pt_BR/integrations.json index b871fb189..bcddc46cf 100644 --- a/app/javascript/dashboard/i18n/locale/pt_BR/integrations.json +++ b/app/javascript/dashboard/i18n/locale/pt_BR/integrations.json @@ -43,7 +43,8 @@ "CONTACT_CREATED": "Contato criado", "CONTACT_UPDATED": "Contato atualizado", "CONVERSATION_TYPING_ON": "Status de Digitação ativado", - "CONVERSATION_TYPING_OFF": "Status de Digitação desativado" + "CONVERSATION_TYPING_OFF": "Status de Digitação desativado", + "PROVIDER_EVENT_RECEIVED": "Evento do Provedor Recebido" } }, "NAME": { diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BaileysWhatsapp.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BaileysWhatsapp.vue index 55593f94e..8bd8fe836 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BaileysWhatsapp.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BaileysWhatsapp.vue @@ -11,10 +11,14 @@ import { isValidURL } from '../../../../../helper/URLHelper'; import NextButton from 'dashboard/components-next/button/Button.vue'; import Switch from 'dashboard/components-next/switch/Switch.vue'; +import PromoBanner from 'dashboard/components-next/banner/PromoBanner.vue'; +import { usePolicy } from 'dashboard/composables/usePolicy'; +import { FEATURE_FLAGS } from 'dashboard/featureFlags'; const router = useRouter(); const store = useStore(); const { t } = useI18n(); +const { isFeatureFlagEnabled } = usePolicy(); const inboxName = ref(''); const phoneNumber = ref(''); @@ -83,10 +87,35 @@ const createChannel = async () => { const setShowAdvancedOptions = () => { showAdvancedOptions.value = true; }; + +const switchToZapi = () => { + router.push({ + name: router.currentRoute.value.name, + params: router.currentRoute.value.params, + query: { provider: 'zapi' }, + }); +};