diff --git a/app/javascript/dashboard/assets/images/twilio.png b/app/javascript/dashboard/assets/images/twilio.png new file mode 100644 index 000000000..627a8e9d4 Binary files /dev/null and b/app/javascript/dashboard/assets/images/twilio.png differ diff --git a/app/javascript/dashboard/assets/images/whatsapp.png b/app/javascript/dashboard/assets/images/whatsapp.png new file mode 100644 index 000000000..547ff675e Binary files /dev/null and b/app/javascript/dashboard/assets/images/whatsapp.png differ diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json index 1663acae4..de56674b5 100644 --- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json +++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json @@ -225,8 +225,16 @@ "WHATSAPP_EMBEDDED": "WhatsApp Business", "TWILIO": "Twilio", "WHATSAPP_CLOUD": "WhatsApp Cloud", + "WHATSAPP_CLOUD_DESC": "Quick setup through Meta", + "TWILIO_DESC": "Connect via Twilio credentials", "360_DIALOG": "360Dialog" }, + "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." + }, + "NEXT_BUTTON": "Next", + "BACK_TO_PROVIDER_SELECTION": "Back to provider selection", "INBOX_NAME": { "LABEL": "Inbox Name", "PLACEHOLDER": "Please enter an inbox name", @@ -267,11 +275,11 @@ "SUBMIT_BUTTON": "Create WhatsApp Channel", "EMBEDDED_SIGNUP": { "TITLE": "Quick Setup with Meta", - "DESC": "Connect your WhatsApp Business Account directly through Meta's secure signup flow.", + "DESC": "You will be redirected to Meta to log into your WhatsApp Business account. Having admin access will help make the setup smooth and easy.", "BENEFITS": { "TITLE": "Benefits of Embedded Signup:", - "EASY_SETUP": "One-click setup with no manual configuration required", - "SECURE_AUTH": "Secure OAuth-based authentication with Meta", + "EASY_SETUP": "No manual configuration required", + "SECURE_AUTH": "Secure OAuth based authentication", "AUTO_CONFIG": "Automatic webhook and phone number configuration" }, "SUBMIT_BUTTON": "Connect with WhatsApp Business", diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue index 113c4cf19..aecd32afc 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue @@ -1,13 +1,16 @@ @@ -61,28 +103,117 @@ export default {
+ {{ $t('INBOX_MGMT.ADD.WHATSAPP.SELECT_PROVIDER.DESCRIPTION') }} +
+
+ + {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD_DESC') }} +
+
+ + {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO_DESC') }} +
++
{{ $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.PROCESSING_DESC') }}
-- {{ $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.DESC') }} -
+
+ + {{ $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.DESC') }} +
+ + + +
{{ $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.LOADING_SDK') }}