incorporate the new UI designs for whatsapp inbox

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",

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue

@@ -1,13 +1,16 @@
 <script>
-import PageHeader from '../../SettingsSubPageHeader.vue';
 import Twilio from './Twilio.vue';
 import ThreeSixtyDialogWhatsapp from './360DialogWhatsapp.vue';
 import CloudWhatsapp from './CloudWhatsapp.vue';
 import WhatsappEmbeddedSignup from './WhatsappEmbeddedSignup.vue';
+import router from '../../../../index';
+
+// Using direct paths instead of imports
+// import whatsappIcon from 'dashboard/assets/images/whatsapp.png';
+// import twilioIcon from 'dashboard/assets/images/twilio.png';
 
 export default {
   components: {
-    PageHeader,
     Twilio,
     ThreeSixtyDialogWhatsapp,
     CloudWhatsapp,
@@ -15,7 +18,8 @@ export default {
   },
   data() {
     return {
-      provider: 'whatsapp_cloud',
+      // No default provider selected
+      provider: null,
     };
   },
   computed: {
@@ -26,33 +30,71 @@ export default {
       );
     },
     availableProviders() {
-      const providers = [];
-
-      if (this.hasWhatsappAppId) {
-        providers.push({
-          value: 'whatsapp_embedded',
-          label: this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_EMBEDDED'),
-        });
-      } else {
-        providers.push({
-          value: 'whatsapp_cloud',
-          label: this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD'),
-        });
-      }
-
-      providers.push({
-        value: 'twilio',
-        label: this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO'),
-      });
-
-      return providers;
+      return [
+        {
+          value: 'whatsapp',
+          label: 'WhatsApp',
+        },
+        {
+          value: 'twilio',
+          label: 'Twilio',
+        },
+      ];
+    },
+    selectedProvider() {
+      return this.$route.query.provider;
+    },
+    showProviderSelection() {
+      return !this.selectedProvider;
+    },
+    showConfiguration() {
+      return !!this.selectedProvider;
+    },
+    configurationTitle() {
+      const providerTitles = {
+        whatsapp: this.hasWhatsappAppId
+          ? this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_EMBEDDED')
+          : this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD'),
+        whatsapp_cloud: this.$t(
+          'INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD'
+        ),
+        whatsapp_embedded: this.$t(
+          'INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_EMBEDDED'
+        ),
+        twilio: this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO'),
+      };
+      return `${providerTitles[this.selectedProvider]} ${this.$t(
+        'INBOX_MGMT.ADD.WHATSAPP.TITLE'
+      )}`;
+    },
+    configurationDescription() {
+      const descriptions = {
+        whatsapp: this.hasWhatsappAppId
+          ? "Quick setup with Meta's embedded signup."
+          : 'Configure WhatsApp integration through Meta.',
+        whatsapp_cloud: 'Configure WhatsApp integration through Meta.',
+        whatsapp_embedded: "Quick setup with Meta's embedded signup.",
+        twilio: 'Configure WhatsApp integration through your Twilio account.',
+      };
+      return descriptions[this.selectedProvider] || '';
     },
   },
-  mounted() {
-    // Set the appropriate default provider based on configuration
-    this.provider = this.hasWhatsappAppId
-      ? 'whatsapp_embedded'
-      : 'whatsapp_cloud';
+  methods: {
+    selectProvider(providerValue) {
+      // Directly navigate to configuration when provider is clicked
+      router.push({
+        name: this.$route.name,
+        params: this.$route.params,
+        query: { provider: providerValue },
+      });
+    },
+    goBackToProviderSelection() {
+      router.push({
+        name: this.$route.name,
+        params: this.$route.params,
+        query: {},
+      });
+    },
   },
 };
 </script>
@@ -61,28 +103,117 @@ export default {
   <div
     class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
-    <PageHeader
-      :header-title="$t('INBOX_MGMT.ADD.WHATSAPP.TITLE')"
-      :header-content="$t('INBOX_MGMT.ADD.WHATSAPP.DESC')"
-    />
-    <div class="flex-shrink-0 flex-grow-0">
-      <label>
-        {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
-        <select v-model="provider">
-          <option
-            v-for="providerOption in availableProviders"
-            :key="providerOption.value"
-            :value="providerOption.value"
-          >
-            {{ providerOption.label }}
-          </option>
-        </select>
-      </label>
+    <!-- Provider Selection View -->
+    <div v-if="showProviderSelection">
+      <!-- Title and Description -->
+      <div class="text-left mb-12">
+        <h1 class="text-lg font-medium text-slate-800 dark:text-slate-100 mb-2">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.SELECT_PROVIDER.TITLE') }}
+        </h1>
+        <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.SELECT_PROVIDER.DESCRIPTION') }}
+        </p>
+      </div>
+
+      <!-- Provider Cards -->
+      <div class="flex gap-8 justify-start">
+        <!-- WhatsApp Cloud Card -->
+        <div
+          class="w-96 bg-n-solid-2 border border-n-weak rounded-2xl p-8 cursor-pointer transition-all duration-200 hover:border-woot-500 hover:bg-n-solid-3"
+          @click="selectProvider('whatsapp')"
+        >
+          <!-- WhatsApp Icon -->
+          <div class="flex justify-start mb-8">
+            <div class="w-12 h-12 rounded-lg flex items-center justify-center">
+              <img
+                src="dashboard/assets/images/whatsapp.png"
+                :alt="$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD')"
+                class="w-10 h-10 object-contain"
+              />
+            </div>
+          </div>
+
+          <!-- Card Content -->
+          <div class="text-left">
+            <h3
+              class="text-sm font-medium text-slate-800 dark:text-slate-100 mb-1.5"
+            >
+              {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD') }}
+            </h3>
+            <p class="text-sm text-slate-600 dark:text-slate-300">
+              {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD_DESC') }}
+            </p>
+          </div>
+        </div>
+
+        <!-- Twilio Card -->
+        <div
+          class="w-96 bg-n-solid-2 border border-n-weak rounded-2xl p-8 cursor-pointer transition-all duration-200 hover:border-woot-500 hover:bg-n-solid-3"
+          @click="selectProvider('twilio')"
+        >
+          <!-- Twilio Icon -->
+          <div class="flex justify-start mb-8">
+            <div class="w-12 h-12 rounded-lg flex items-center justify-center">
+              <img
+                src="dashboard/assets/images/twilio.png"
+                :alt="$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO')"
+                class="w-10 h-10 object-contain"
+              />
+            </div>
+          </div>
+          <!-- Card Content -->
+          <div class="text-left">
+            <h3
+              class="text-sm font-medium text-slate-800 dark:text-slate-100 mb-1.5"
+            >
+              {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO') }}
+            </h3>
+            <p class="text-sm text-slate-600 dark:text-slate-300">
+              {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO_DESC') }}
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
 
-    <WhatsappEmbeddedSignup v-if="provider === 'whatsapp_embedded'" />
-    <Twilio v-else-if="provider === 'twilio'" type="whatsapp" />
-    <ThreeSixtyDialogWhatsapp v-else-if="provider === '360dialog'" />
-    <CloudWhatsapp v-else />
+    <!-- Configuration View -->
+    <div v-else-if="showConfiguration">
+      <!-- Back Button -->
+      <div class="mb-6">
+        <button
+          type="button"
+          class="inline-flex items-center text-woot-500 hover:text-woot-600 transition-colors"
+          @click="goBackToProviderSelection"
+        >
+          <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
+            <path
+              fill-rule="evenodd"
+              d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
+              clip-rule="evenodd"
+            />
+          </svg>
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.BACK_TO_PROVIDER_SELECTION') }}
+        </button>
+      </div>
+
+      <!-- Configuration Form Container -->
+      <div class="bg-n-solid-2 border border-n-weak rounded-2xl p-8">
+        <!-- Provider Configuration Forms -->
+        <WhatsappEmbeddedSignup
+          v-if="selectedProvider === 'whatsapp' && hasWhatsappAppId"
+        />
+        <CloudWhatsapp
+          v-else-if="selectedProvider === 'whatsapp' && !hasWhatsappAppId"
+        />
+        <Twilio v-else-if="selectedProvider === 'twilio'" type="whatsapp" />
+        <ThreeSixtyDialogWhatsapp
+          v-else-if="selectedProvider === '360dialog'"
+        />
+        <WhatsappEmbeddedSignup
+          v-else-if="selectedProvider === 'whatsapp_embedded'"
+        />
+        <CloudWhatsapp v-else />
+      </div>
+    </div>
   </div>
 </template>

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 {
 </script>
 
 <template>
-  <div class="flex flex-col">
+  <div class="h-full">
     <!-- Processing State -->
     <div v-if="isProcessing" class="text-center py-8">
       <div class="mb-4">
@@ -323,15 +320,15 @@ export default {
           class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"
         />
       </div>
-      <h3 class="text-lg font-medium text-gray-900 mb-2">
+      <h3 class="text-lg font-medium text-slate-800 dark:text-slate-100 mb-2">
         {{ processingMessage }}
       </h3>
-      <p class="text-gray-600">
+      <p class="text-slate-600 dark:text-slate-300">
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.PROCESSING_DESC') }}
       </p>
 
       <!-- Show current step for better UX -->
-      <div class="mt-4 text-sm text-gray-500">
+      <div class="mt-4 text-sm text-slate-500 dark:text-slate-400">
         <span v-if="currentStep === 'auth_processing'">
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.STEP_AUTH') }}
         </span>
@@ -345,56 +342,122 @@ export default {
     </div>
 
     <!-- Initial Setup State -->
-    <div v-else class="space-y-6">
-      <div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
-        <h3 class="text-lg font-medium text-blue-900 mb-3">
-          {{ $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.TITLE') }}
-        </h3>
-        <p class="text-blue-800 mb-4">
-          {{ $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.DESC') }}
-        </p>
+    <div
+      v-else
+      class="bg-n-solid-1 border border-n-weak rounded-2xl overflow-hidden"
+    >
+      <!-- Main Content -->
+      <div class="p-6">
+        <!-- WhatsApp Icon and Title -->
+        <div class="flex flex-col items-start text-left mb-6">
+          <!-- Icon with backdrop blur effect -->
+          <div class="relative mb-6">
+            <div
+              class="absolute inset-0 w-14 h-14 bg-n-solid-1 opacity-90 rounded-full blur-lg"
+            />
+            <div
+              class="relative w-14 h-14 rounded-full bg-n-solid-2 flex items-center justify-center"
+            >
+              <img
+                src="dashboard/assets/images/whatsapp.png"
+                alt="WhatsApp"
+                class="w-10 h-10 object-contain"
+              />
+            </div>
+          </div>
 
-        <div class="space-y-2 mb-6">
-          <h4 class="font-medium text-blue-900">
-            {{ $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.BENEFITS.TITLE') }}
-          </h4>
-          <ul class="space-y-1 text-blue-800">
-            <li class="flex items-center">
-              <span class="w-2 h-2 bg-blue-600 rounded-full mr-3" />
-              {{
-                $t(
-                  'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.BENEFITS.EASY_SETUP'
-                )
-              }}
-            </li>
-            <li class="flex items-center">
-              <span class="w-2 h-2 bg-blue-600 rounded-full mr-3" />
-              {{
-                $t(
-                  'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.BENEFITS.SECURE_AUTH'
-                )
-              }}
-            </li>
-            <li class="flex items-center">
-              <span class="w-2 h-2 bg-blue-600 rounded-full mr-3" />
-              {{
-                $t(
-                  'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.BENEFITS.AUTO_CONFIG'
-                )
-              }}
-            </li>
-          </ul>
+          <h3
+            class="text-lg font-medium text-slate-800 dark:text-slate-100 mb-2"
+          >
+            {{ $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.TITLE') }}
+          </h3>
+          <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">
+            {{ $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.DESC') }}
+          </p>
         </div>
 
-        <NextButton
-          :disabled="!fbSdkLoaded"
-          solid
-          blue
-          :label="$t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.SUBMIT_BUTTON')"
-          @click="launchEmbeddedSignup"
-        />
+        <!-- Benefits List -->
+        <div class="space-y-3 mb-8">
+          <div
+            class="flex items-center text-sm text-slate-600 dark:text-slate-300"
+          >
+            <div
+              class="w-4 h-4 rounded-full bg-green-500 mr-3 flex items-center justify-center"
+            >
+              <svg
+                class="w-2.5 h-2.5 text-white"
+                viewBox="0 0 16 16"
+                fill="currentColor"
+              >
+                <path
+                  d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"
+                />
+              </svg>
+            </div>
+            {{
+              $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.BENEFITS.EASY_SETUP')
+            }}
+          </div>
+          <div
+            class="flex items-center text-sm text-slate-600 dark:text-slate-300"
+          >
+            <div
+              class="w-4 h-4 rounded-full bg-green-500 mr-3 flex items-center justify-center"
+            >
+              <svg
+                class="w-2.5 h-2.5 text-white"
+                viewBox="0 0 16 16"
+                fill="currentColor"
+              >
+                <path
+                  d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"
+                />
+              </svg>
+            </div>
+            {{
+              $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.BENEFITS.SECURE_AUTH')
+            }}
+          </div>
+          <div
+            class="flex items-center text-sm text-slate-600 dark:text-slate-300"
+          >
+            <div
+              class="w-4 h-4 rounded-full bg-green-500 mr-3 flex items-center justify-center"
+            >
+              <svg
+                class="w-2.5 h-2.5 text-white"
+                viewBox="0 0 16 16"
+                fill="currentColor"
+              >
+                <path
+                  d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"
+                />
+              </svg>
+            </div>
+            {{
+              $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.BENEFITS.AUTO_CONFIG')
+            }}
+          </div>
+        </div>
 
-        <p v-if="!fbSdkLoaded" class="text-sm text-gray-500 mt-2">
+        <!-- Connect Button -->
+        <button
+          :disabled="!fbSdkLoaded"
+          class="w-full bg-n-solid-3 hover:bg-n-solid-4 border border-n-weak text-slate-800 dark:text-slate-100 font-medium py-3 px-4 rounded-xl transition-all duration-200 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+          @click="launchEmbeddedSignup"
+        >
+          <img
+            src="dashboard/assets/images/whatsapp.png"
+            alt="WhatsApp"
+            class="w-4 h-4 object-contain"
+          />
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.SUBMIT_BUTTON') }}
+        </button>
+
+        <p
+          v-if="!fbSdkLoaded"
+          class="text-xs text-slate-500 dark:text-slate-400 mt-3 text-left"
+        >
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.LOADING_SDK') }}
         </p>
       </div>