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.TITLE') }} +

+

+ {{ $t('INBOX_MGMT.ADD.WHATSAPP.SELECT_PROVIDER.DESCRIPTION') }} +

+
+ + +
+ +
+ +
+
+ +
+
+ + +
+

+ {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD') }} +

+

+ {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD_DESC') }} +

+
+
+ + +
+ +
+
+ +
+
+ +
+

+ {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO') }} +

+

+ {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO_DESC') }} +

+
+
+
- - - - + +
+ +
+ +
+ + +
+ + + + + + + +
+
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/WhatsappEmbeddedSignup.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/WhatsappEmbeddedSignup.vue index 7022bc779..c11c59bc1 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/WhatsappEmbeddedSignup.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/WhatsappEmbeddedSignup.vue @@ -2,13 +2,10 @@ import { mapGetters } from 'vuex'; import { useAlert } from 'dashboard/composables'; import router from '../../../../index'; -import NextButton from 'dashboard/components-next/button/Button.vue'; import Auth from 'dashboard/api/auth'; export default { - components: { - NextButton, - }, + components: {}, data() { return { fbSdkLoaded: false, @@ -315,7 +312,7 @@ export default {