From 20f63cf957a2bbffc5ed94e1e906e74ffb04e420 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Tue, 10 Jun 2025 15:04:14 +0530
Subject: [PATCH] chore: make WhatsApp component composition styles

---
 .../settings/inbox/channels/Whatsapp.vue      | 207 +++++++-----------
 1 file changed, 76 insertions(+), 131 deletions(-)

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 6e6d29ee6..01adfdf43 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
@@ -1,97 +1,71 @@
-<script>
+<script setup>
+import { computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import Twilio from './Twilio.vue';
 import ThreeSixtyDialogWhatsapp from './360DialogWhatsapp.vue';
 import CloudWhatsapp from './CloudWhatsapp.vue';
 import WhatsappEmbeddedSignup from './WhatsappEmbeddedSignup.vue';
-import router from '../../../../index';
+import whatsappIcon from 'dashboard/assets/images/whatsapp.png';
+import twilioIcon from 'dashboard/assets/images/twilio.png';
 
-export default {
-  components: {
-    Twilio,
-    ThreeSixtyDialogWhatsapp,
-    CloudWhatsapp,
-    WhatsappEmbeddedSignup,
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+
+const PROVIDER_TYPES = {
+  WHATSAPP: 'whatsapp',
+  TWILIO: 'twilio',
+  WHATSAPP_CLOUD: 'whatsapp_cloud',
+  WHATSAPP_EMBEDDED: 'whatsapp_embedded',
+  THREE_SIXTY_DIALOG: '360dialog',
+};
+
+const hasWhatsappAppId = computed(() => {
+  return (
+    window.chatwootConfig?.whatsappAppId &&
+    window.chatwootConfig.whatsappAppId !== 'none'
+  );
+});
+
+const selectedProvider = computed(() => route.query.provider);
+
+const showProviderSelection = computed(() => !selectedProvider.value);
+
+const showConfiguration = computed(() => Boolean(selectedProvider.value));
+
+const availableProviders = computed(() => [
+  {
+    value: PROVIDER_TYPES.WHATSAPP,
+    label: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD'),
+    description: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD_DESC'),
+    icon: whatsappIcon,
   },
-  data() {
-    return {
-      // No default provider selected
-      provider: null,
-    };
-  },
-  computed: {
-    hasWhatsappAppId() {
-      return (
-        window.chatwootConfig?.whatsappAppId &&
-        window.chatwootConfig.whatsappAppId !== 'none'
-      );
-    },
-    availableProviders() {
-      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] || '';
-    },
-  },
-  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: {},
-      });
-    },
+  {
+    value: PROVIDER_TYPES.TWILIO,
+    label: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO'),
+    description: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO_DESC'),
+    icon: twilioIcon,
   },
+]);
+
+const selectProvider = providerValue => {
+  router.push({
+    name: route.name,
+    params: route.params,
+    query: { provider: providerValue },
+  });
+};
+
+const shouldShowEmbeddedSignup = provider => {
+  return (
+    (provider === PROVIDER_TYPES.WHATSAPP && hasWhatsappAppId.value) ||
+    provider === PROVIDER_TYPES.WHATSAPP_EMBEDDED
+  );
+};
+
+const shouldShowCloudWhatsapp = provider => {
+  return provider === PROVIDER_TYPES.WHATSAPP && !hasWhatsappAppId.value;
 };
 </script>
 
@@ -101,7 +75,6 @@ export default {
   >
     <!-- Provider Selection View -->
     <div v-if="showProviderSelection">
-      <!-- Title and Description -->
       <div class="mb-10 text-left">
         <h1 class="mb-2 text-lg font-medium text-slate-12">
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.SELECT_PROVIDER.TITLE') }}
@@ -111,19 +84,20 @@ export default {
         </p>
       </div>
 
-      <!-- Provider Cards -->
+      <!-- Dynamic Provider Cards -->
       <div class="flex justify-start gap-6">
-        <!-- WhatsApp Cloud Card -->
         <div
+          v-for="provider in availableProviders"
+          :key="provider.value"
           class="gap-6 px-5 py-6 transition-all duration-200 border cursor-pointer w-96 bg-n-solid-2 border-n-weak rounded-2xl hover:border-woot-500 hover:bg-n-solid-3"
-          @click="selectProvider('whatsapp')"
+          @click="selectProvider(provider.value)"
         >
-          <!-- WhatsApp Icon -->
+          <!-- Provider Icon -->
           <div class="flex justify-start mb-5">
             <div class="flex items-center justify-center w-12 h-12 rounded-lg">
               <img
-                src="dashboard/assets/images/whatsapp.png"
-                :alt="$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD')"
+                :src="provider.icon"
+                :alt="provider.label"
                 class="object-contain w-10 h-10"
               />
             </div>
@@ -132,36 +106,10 @@ export default {
           <!-- Card Content -->
           <div class="text-left">
             <h3 class="mb-1.5 text-sm font-medium text-slate-12">
-              {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD') }}
+              {{ provider.label }}
             </h3>
             <p class="text-sm text-slate-11">
-              {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD_DESC') }}
-            </p>
-          </div>
-        </div>
-
-        <div
-          class="gap-6 px-5 py-6 transition-all duration-200 border cursor-pointer w-96 bg-n-solid-2 border-n-weak rounded-2xl hover:border-woot-500 hover:bg-n-solid-3"
-          @click="selectProvider('twilio')"
-        >
-          <!-- WhatsApp Icon -->
-          <div class="flex justify-start mb-5">
-            <div class="flex items-center justify-center w-12 h-12 rounded-lg">
-              <img
-                src="dashboard/assets/images/twilio.png"
-                :alt="$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO')"
-                class="object-contain w-10 h-10"
-              />
-            </div>
-          </div>
-
-          <!-- Card Content -->
-          <div class="text-left">
-            <h3 class="mb-1.5 text-sm font-medium text-slate-12">
-              {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO') }}
-            </h3>
-            <p class="text-sm text-slate-11">
-              {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO_DESC') }}
+              {{ provider.description }}
             </p>
           </div>
         </div>
@@ -170,21 +118,18 @@ export default {
 
     <!-- Configuration View -->
     <div v-else-if="showConfiguration">
-      <!-- Configuration Form Container -->
       <div class="p-8 border bg-n-solid-2 border-n-weak rounded-2xl">
         <!-- Provider Configuration Forms -->
         <WhatsappEmbeddedSignup
-          v-if="selectedProvider === 'whatsapp' && hasWhatsappAppId"
+          v-if="shouldShowEmbeddedSignup(selectedProvider)"
         />
-        <CloudWhatsapp
-          v-else-if="selectedProvider === 'whatsapp' && !hasWhatsappAppId"
+        <CloudWhatsapp v-else-if="shouldShowCloudWhatsapp(selectedProvider)" />
+        <Twilio
+          v-else-if="selectedProvider === PROVIDER_TYPES.TWILIO"
+          type="whatsapp"
         />
-        <Twilio v-else-if="selectedProvider === 'twilio'" type="whatsapp" />
         <ThreeSixtyDialogWhatsapp
-          v-else-if="selectedProvider === '360dialog'"
-        />
-        <WhatsappEmbeddedSignup
-          v-else-if="selectedProvider === 'whatsapp_embedded'"
+          v-else-if="selectedProvider === PROVIDER_TYPES.THREE_SIXTY_DIALOG"
         />
         <CloudWhatsapp v-else />
       </div>