Merge branch 'develop' into feat/read-only-token

2026-05-26 18:55:25 +05:30
parent f3b990997e b495aad1e6
commit b9e83ec2d4
276 changed files with 9074 additions and 953 deletions
@@ -17,7 +17,7 @@ const CommandBar = defineAsyncComponent(
 );

 const FloatingCallWidget = defineAsyncComponent(
-  () => import('dashboard/components/widgets/FloatingCallWidget.vue')
+  () => import('dashboard/components-next/call/FloatingCallWidget.vue')
 );

 import CopilotLauncher from 'dashboard/components-next/copilot/CopilotLauncher.vue';
@@ -25,6 +25,7 @@ const props = defineProps({
 const emit = defineEmits([
  'clearSelection',
  'assignLabels',
+  'removeLabels',
  'toggleAll',
  'deleteSelected',
 ]);
@@ -72,6 +73,10 @@ const selectionModel = computed({
 const handleAssignLabels = labels => {
  emit('assignLabels', labels);
 };
+
+const handleRemoveLabels = labels => {
+  emit('removeLabels', labels);
+};
 </script>

 <template>
@@ -103,6 +108,13 @@ const handleAssignLabels = labels => {
            :disabled="!selectedCount"
            @assign="handleAssignLabels"
          />
+          <BulkLabelActions
+            type="contact"
+            action="remove"
+            :is-loading="isLoading"
+            :disabled="!selectedCount"
+            @remove="handleRemoveLabels"
+          />
          <div class="w-px h-3 bg-n-weak rounded-lg" />
          <Policy :permissions="['administrator']">
            <Button
@@ -351,6 +351,28 @@ const assignLabels = async labels => {
  }
 };

+const removeLabels = async labels => {
+  if (!labels.length || !selectedContactIds.value.length) {
+    return;
+  }
+
+  isBulkActionLoading.value = true;
+  try {
+    await BulkActionsAPI.create({
+      type: 'Contact',
+      ids: selectedContactIds.value,
+      labels: { remove: labels },
+    });
+    useAlert(t('CONTACTS_BULK_ACTIONS.REMOVE_LABELS_SUCCESS'));
+    clearSelection();
+    await fetchContactsBasedOnContext(pageNumber.value);
+  } catch (error) {
+    useAlert(t('CONTACTS_BULK_ACTIONS.REMOVE_LABELS_FAILED'));
+  } finally {
+    isBulkActionLoading.value = false;
+  }
+};
+
 const deleteContacts = async () => {
  if (!selectedContactIds.value.length) {
    return;
@@ -514,6 +536,7 @@ onMounted(async () => {
          @toggle-all="toggleSelectAll"
          @clear-selection="clearSelection"
          @assign-labels="assignLabels"
+          @remove-labels="removeLabels"
          @delete-selected="openBulkDeleteDialog"
        />
        <ContactEmptyState
@@ -317,9 +317,7 @@ onMounted(() => {
 </template>

 <style lang="scss" scoped>
-::v-deep {
-  .contact--profile {
-    @apply pb-3 border-b border-solid border-n-weak;
-  }
+:deep(.contact--profile) {
+  @apply pb-3 border-b border-solid border-n-weak;
 }
 </style>
@@ -56,7 +56,10 @@ export default {
    };
  },
  computed: {
-    ...mapGetters({ uiFlags: 'contacts/getUIFlags' }),
+    ...mapGetters({
+      uiFlags: 'contacts/getUIFlags',
+      currentChat: 'getSelectedChat',
+    }),
    contactProfileLink() {
      return `/app/accounts/${this.$route.params.accountId}/contacts/${this.contact.id}`;
    },
@@ -305,11 +308,12 @@ export default {
        <VoiceCallButton
          :phone="contact.phone_number"
          :contact-id="contact.id"
-          icon="i-ri-phone-fill"
-          size="sm"
-          :tooltip-label="$t('CONTACT_PANEL.CALL')"
-          slate
+          :conversation-id="currentChat?.id"
+          icon="i-lucide-phone"
+          sm
          faded
+          slate
+          :tooltip-label="$t('CONTACT_PANEL.CALL')"
        />
        <NextButton
          v-tooltip.top-end="$t('EDIT_CONTACT.BUTTON_LABEL')"
@@ -143,17 +143,15 @@ export default {
 </template>

 <style scoped lang="scss">
-::v-deep {
-  .ProseMirror-menubar {
-    @apply hidden;
-  }
+:deep(.ProseMirror-menubar) {
+  @apply hidden;
+}

-  .ProseMirror-woot-style {
-    @apply min-h-[12.5rem];
+:deep(.ProseMirror-woot-style) {
+  @apply min-h-[12.5rem];

-    p {
-      @apply text-base;
-    }
+  p {
+    @apply text-base;
  }
 }
 </style>
@@ -147,17 +147,15 @@ export default {
 </template>

 <style scoped lang="scss">
-::v-deep {
-  .ProseMirror-menubar {
-    @apply hidden;
-  }
+:deep(.ProseMirror-menubar) {
+  @apply hidden;
+}

-  .ProseMirror-woot-style {
-    @apply min-h-[12.5rem];
+:deep(.ProseMirror-woot-style) {
+  @apply min-h-[12.5rem];

-    p {
-      @apply text-base;
-    }
+  p {
+    @apply text-base;
  }
 }
 </style>
@@ -4,7 +4,7 @@ import AddCanned from './AddCanned.vue';
 import EditCanned from './EditCanned.vue';
 import SettingsLayout from '../SettingsLayout.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
-import { computed, onMounted, ref, defineOptions } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
 import { picoSearch } from '@scmmishra/pico-search';
@@ -74,23 +74,25 @@ const tableHeaders = computed(() => {

 <template>
  <div class="w-full min-h-[12rem] relative">
-    <div class="w-full space-y-3 text-sm">
-      <thead class="opacity-30 dark:opacity-30">
-        <th
-          v-for="thHeader in tableHeaders"
-          :key="thHeader"
-          class="py-4 ltr:pr-4 rtl:pl-4 text-start text-heading-3 text-n-slate-12"
-        >
-          <span class="mb-0">
-            {{ thHeader }}
-          </span>
-        </th>
-      </thead>
-      <CustomRoleListItem
-        class="opacity-25 dark:opacity-20"
-        :roles="dummyCustomRolesData"
-        :loading="{}"
-      />
+    <div class="w-full space-y-3 text-sm overflow-x-auto">
+      <table class="min-w-full">
+        <thead class="opacity-30 dark:opacity-30">
+          <tr>
+            <th
+              v-for="thHeader in tableHeaders"
+              :key="thHeader"
+              class="py-4 ltr:pr-4 rtl:pl-4 text-start text-heading-3 text-n-slate-12"
+            >
+              <span class="mb-0">
+                {{ thHeader }}
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody class="opacity-25 dark:opacity-20">
+          <CustomRoleListItem :roles="dummyCustomRolesData" :loading="{}" />
+        </tbody>
+      </table>
    </div>
    <div
      class="absolute inset-0 flex flex-col items-center justify-center w-full h-full bg-gradient-to-t from-white dark:from-slate-900 to-transparent"
@@ -7,6 +7,7 @@ import Api from './channels/Api.vue';
 import Email from './channels/Email.vue';
 import Sms from './channels/Sms.vue';
 import Whatsapp from './channels/Whatsapp.vue';
+import WhatsappCall from './channels/WhatsappCall.vue';
 import Line from './channels/Line.vue';
 import Telegram from './channels/Telegram.vue';
 import Instagram from './channels/Instagram.vue';
@@ -21,6 +22,7 @@ const channelViewList = {
  email: Email,
  sms: Sms,
  whatsapp: Whatsapp,
+  whatsapp_call: WhatsappCall,
  line: Line,
  telegram: Telegram,
  instagram: Instagram,
@@ -95,6 +95,13 @@ const channelList = computed(() => {
    icon: 'i-woot-voice',
  });

+  channels.push({
+    key: 'whatsapp_call',
+    title: t('INBOX_MGMT.ADD.AUTH.CHANNEL.WHATSAPP_CALL.TITLE'),
+    description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.WHATSAPP_CALL.DESCRIPTION'),
+    icon: 'i-woot-whatsapp',
+  });
+
  return channels;
 });

@@ -156,10 +156,8 @@ onMounted(() => {
 .message-editor {
  @apply px-3;

-  ::v-deep {
-    .ProseMirror-menubar {
-      @apply rounded-tl-[4px];
-    }
+  :deep(.ProseMirror-menubar) {
+    @apply rounded-tl-[4px];
  }
 }
 </style>
@@ -22,6 +22,7 @@ import WeeklyAvailability from './components/WeeklyAvailability.vue';
 import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
 import ConfigurationPage from './settingsPage/ConfigurationPage.vue';
 import VoiceConfigurationPage from './settingsPage/VoiceConfigurationPage.vue';
+import WhatsappCallingPage from './settingsPage/WhatsappCallingPage.vue';
 import CustomerSatisfactionPage from './settingsPage/CustomerSatisfactionPage.vue';
 import CollaboratorsPage from './settingsPage/CollaboratorsPage.vue';
 import BotConfiguration from './components/BotConfiguration.vue';
@@ -48,6 +49,7 @@ export default {
    CollaboratorsPage,
    ConfigurationPage,
    VoiceConfigurationPage,
+    WhatsappCallingPage,
    CustomerSatisfactionPage,
    FacebookReauthorize,
    GreetingsEditor,
@@ -249,6 +251,23 @@ export default {
        ];
      }

+      if (
+        this.isAWhatsAppCloudChannel &&
+        this.isEmbeddedSignupWhatsApp &&
+        this.isFeatureEnabledonAccount(
+          this.accountId,
+          FEATURE_FLAGS.CHANNEL_VOICE
+        )
+      ) {
+        visibleToAllChannelTabs = [
+          ...visibleToAllChannelTabs,
+          {
+            key: 'calls-configuration',
+            name: this.$t('INBOX_MGMT.TABS.CALLS'),
+          },
+        ];
+      }
+
      return visibleToAllChannelTabs;
    },
    currentInboxId() {
@@ -1262,6 +1281,12 @@ export default {
        >
          <VoiceConfigurationPage :inbox="inbox" />
        </div>
+        <div
+          v-if="selectedTabKey === 'calls-configuration'"
+          class="mx-6 max-w-4xl"
+        >
+          <WhatsappCallingPage :inbox="inbox" />
+        </div>
        <div v-if="selectedTabKey === 'csat'">
          <CustomerSatisfactionPage :inbox="inbox" />
        </div>
@@ -0,0 +1,11 @@
+<script setup>
+import WhatsappEmbeddedSignup from './WhatsappEmbeddedSignup.vue';
+</script>
+
+<template>
+  <div class="overflow-auto col-span-6 p-6 w-full h-full">
+    <div class="px-6 py-5 rounded-2xl border border-n-weak">
+      <WhatsappEmbeddedSignup enable-calling-on-complete />
+    </div>
+  </div>
+</template>
@@ -7,6 +7,7 @@ import { useAlert } from 'dashboard/composables';
 import Icon from 'next/icon/Icon.vue';
 import NextButton from 'next/button/Button.vue';
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
+import InboxesAPI from 'dashboard/api/inboxes';
 import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
 import globalConstants from 'dashboard/constants/globals.js';
 import {
@@ -16,6 +17,13 @@ import {
  isValidBusinessData,
 } from './whatsapp/utils';

+const props = defineProps({
+  enableCallingOnComplete: {
+    type: Boolean,
+    default: false,
+  },
+});
+
 const store = useStore();
 const router = useRouter();
 const { t } = useI18n();
@@ -65,11 +73,27 @@ const handleSignupCancellation = () => {
  isAuthenticating.value = false;
 };

-const handleSignupSuccess = inboxData => {
-  isProcessing.value = false;
-  isAuthenticating.value = false;
+const enableCallingForInbox = async inboxId => {
+  try {
+    await InboxesAPI.enableWhatsappCalling(inboxId);
+  } catch (_) {
+    useAlert(
+      t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.CALLING_ENABLE_FAILED')
+    );
+  }
+};

+const handleSignupSuccess = async inboxData => {
  if (inboxData && inboxData.id) {
+    if (props.enableCallingOnComplete) {
+      isProcessing.value = true;
+      processingMessage.value = t(
+        'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.ENABLING_CALLING'
+      );
+      await enableCallingForInbox(inboxData.id);
+    }
+    isProcessing.value = false;
+    isAuthenticating.value = false;
    useAlert(t('INBOX_MGMT.FINISH.MESSAGE'));
    router.replace({
      name: 'settings_inboxes_add_agents',
@@ -79,6 +103,8 @@ const handleSignupSuccess = inboxData => {
      },
    });
  } else {
+    isProcessing.value = false;
+    isAuthenticating.value = false;
    useAlert(t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.SUCCESS_FALLBACK'));
    router.replace({
      name: 'settings_inbox_list',
@@ -1,6 +1,5 @@
 <script setup>
 import OAuthChannel from './OAuthChannel.vue';
-import { defineOptions } from 'vue';

 defineOptions({
  name: 'GoogleOAuthChannel',
@@ -1,6 +1,5 @@
 <script setup>
 import OAuthChannel from './OAuthChannel.vue';
-import { defineOptions } from 'vue';

 defineOptions({
  name: 'MicrosoftOAuthChannel',
@@ -227,7 +227,7 @@ export default {
 </template>

 <style lang="scss" scoped>
-::v-deep.message-editor {
+:deep(.message-editor) {
  @apply border-0;
 }

@@ -446,7 +446,7 @@ export default {

 <style lang="scss" scoped>
 .whatsapp-settings--content {
-  ::v-deep input {
+  :deep(input) {
    margin-bottom: 0;
  }
 }
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, onMounted, ref, defineProps, watch, computed } from 'vue';
+import { reactive, onMounted, ref, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
@@ -0,0 +1,160 @@
+<script>
+import { useAlert } from 'dashboard/composables';
+import InboxesAPI from 'dashboard/api/inboxes';
+import SettingsFieldSection from 'dashboard/components-next/Settings/SettingsFieldSection.vue';
+import SettingsToggleSection from 'dashboard/components-next/Settings/SettingsToggleSection.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import TextArea from 'next/textarea/TextArea.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+export default {
+  components: {
+    SettingsFieldSection,
+    SettingsToggleSection,
+    NextButton,
+    TextArea,
+    Spinner,
+  },
+  props: {
+    inbox: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      callingEnabled: this.inbox.provider_config?.calling_enabled || false,
+      permissionRequestBody:
+        this.inbox.provider_config?.call_permission_request_body || '',
+      isUpdating: false,
+      isTogglingCalling: false,
+    };
+  },
+  computed: {
+    phoneNumber() {
+      return (
+        this.inbox.provider_config?.phone_number || this.inbox.phone_number
+      );
+    },
+  },
+  watch: {
+    'inbox.provider_config.calling_enabled'(val) {
+      this.callingEnabled = val || false;
+    },
+    'inbox.provider_config.call_permission_request_body'(val) {
+      this.permissionRequestBody = val || '';
+    },
+  },
+  methods: {
+    async handleCallingToggle(newValue) {
+      if (this.isTogglingCalling) return;
+      const previousValue = this.callingEnabled;
+      this.callingEnabled = newValue;
+      this.isTogglingCalling = true;
+      try {
+        if (newValue) {
+          await InboxesAPI.enableWhatsappCalling(this.inbox.id);
+        } else {
+          await InboxesAPI.disableWhatsappCalling(this.inbox.id);
+        }
+        await this.$store.dispatch('inboxes/get', this.inbox.id);
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (_) {
+        this.callingEnabled = previousValue;
+        const fallbackKey = newValue
+          ? 'INBOX_MGMT.WHATSAPP_CALLING.ENABLE_FAILED'
+          : 'INBOX_MGMT.EDIT.API.ERROR_MESSAGE';
+        useAlert(this.$t(fallbackKey));
+      } finally {
+        this.isTogglingCalling = false;
+      }
+    },
+    async updateCallingSettings() {
+      this.isUpdating = true;
+      try {
+        await this.$store.dispatch('inboxes/updateInbox', {
+          id: this.inbox.id,
+          formData: false,
+          channel: {
+            provider_config: {
+              ...this.inbox.provider_config,
+              call_permission_request_body:
+                this.permissionRequestBody.trim() || null,
+            },
+          },
+        });
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        const message =
+          error?.response?.data?.message ||
+          this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE');
+        useAlert(message);
+      } finally {
+        this.isUpdating = false;
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <div
+      class="relative"
+      :class="{ 'pointer-events-none opacity-60': isTogglingCalling }"
+    >
+      <SettingsToggleSection
+        :model-value="callingEnabled"
+        :header="$t('INBOX_MGMT.WHATSAPP_CALLING.ENABLE.LABEL')"
+        :description="$t('INBOX_MGMT.WHATSAPP_CALLING.ENABLE.DESCRIPTION')"
+        :hide-toggle="isTogglingCalling"
+        @update:model-value="handleCallingToggle"
+      >
+        <template v-if="isTogglingCalling" #hiddenToggle>
+          <Spinner class="size-4 text-n-slate-11" />
+        </template>
+      </SettingsToggleSection>
+    </div>
+
+    <template v-if="callingEnabled">
+      <SettingsFieldSection
+        v-if="phoneNumber"
+        :label="$t('INBOX_MGMT.WHATSAPP_CALLING.PHONE_NUMBER.LABEL')"
+        :help-text="$t('INBOX_MGMT.WHATSAPP_CALLING.PHONE_NUMBER.HELP_TEXT')"
+      >
+        <woot-code :script="phoneNumber" lang="html" />
+      </SettingsFieldSection>
+
+      <SettingsFieldSection
+        :label="$t('INBOX_MGMT.WHATSAPP_CALLING.PERMISSION_REQUEST_BODY.LABEL')"
+        :help-text="
+          $t('INBOX_MGMT.WHATSAPP_CALLING.PERMISSION_REQUEST_BODY.HELP_TEXT')
+        "
+      >
+        <TextArea
+          v-model="permissionRequestBody"
+          :placeholder="
+            $t(
+              'INBOX_MGMT.WHATSAPP_CALLING.PERMISSION_REQUEST_BODY.PLACEHOLDER'
+            )
+          "
+          auto-height
+          resize
+        />
+      </SettingsFieldSection>
+
+      <SettingsFieldSection
+        :label="$t('INBOX_MGMT.WHATSAPP_CALLING.HOW_IT_WORKS.LABEL')"
+        :help-text="$t('INBOX_MGMT.WHATSAPP_CALLING.HOW_IT_WORKS.DESCRIPTION')"
+      />
+
+      <div>
+        <NextButton
+          :is-loading="isUpdating"
+          :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+          @click="updateCallingSettings"
+        />
+      </div>
+    </template>
+  </div>
+</template>
@@ -1,5 +1,4 @@
 <script setup>
-import { defineProps, defineEmits } from 'vue';
 import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
 import { useBranding } from 'shared/composables/useBranding';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -5,6 +5,7 @@ import wootConstants from 'dashboard/constants/globals';
 import { getI18nKey } from 'dashboard/routes/dashboard/settings/helper/settingsHelper';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import { useAlert } from 'dashboard/composables';
+import { useConfig } from 'dashboard/composables/useConfig';
 import NextButton from 'dashboard/components-next/button/Button.vue';

 const { EXAMPLE_WEBHOOK_URL } = wootConstants;
@@ -55,12 +56,15 @@ export default {
    },
  },
  data() {
+    const { inboxEventsEnabled } = useConfig();
    return {
      url: this.value.url || '',
      name: this.value.name || '',
      subscriptions: this.value.subscriptions || [],
      secretVisible: false,
-      supportedWebhookEvents: SUPPORTED_WEBHOOK_EVENTS,
+      supportedWebhookEvents: inboxEventsEnabled
+        ? [...SUPPORTED_WEBHOOK_EVENTS, 'inbox_updated']
+        : SUPPORTED_WEBHOOK_EVENTS,
    };
  },
  computed: {
@@ -132,10 +132,8 @@ export default {
 <style lang="scss" scoped>
 // Label API supports only lowercase letters
 .label-name--input {
-  ::v-deep {
-    input {
-      @apply lowercase;
-    }
+  :deep(input) {
+    @apply lowercase;
  }
 }
 </style>
@@ -135,10 +135,8 @@ export default {
 <style lang="scss" scoped>
 // Label API supports only lowercase letters
 .label-name--input {
-  ::v-deep {
-    input {
-      @apply lowercase;
-    }
+  :deep(input) {
+    @apply lowercase;
  }
 }
 </style>
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, inject, defineModel } from 'vue';
+import { computed, inject } from 'vue';
 import { useMacros } from 'dashboard/composables/useMacros';
 import { useI18n } from 'vue-i18n';
 import ActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
@@ -163,11 +163,11 @@ export default {
 </template>

 <style scoped lang="scss">
-::v-deep input[type='text'] {
+:deep(input[type='text']) {
  @apply mb-0;
 }

-::v-deep .error {
+:deep(.error) {
  .message {
    @apply mb-0;
  }
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch, defineModel } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useToggle } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import addMonths from 'date-fns/addMonths';
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed, defineExpose, defineProps } from 'vue';
+import { onMounted, computed } from 'vue';
 import { useStore } from 'dashboard/composables/store';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { useRouter } from 'vue-router';