Merge branch 'feat/billing-brl-pix-new-users' into feat/billing-switch-currency

2026-06-15 13:41:31 +05:30
parent 6f6769b66f 06e15ff081
commit fca9d9009d
78 changed files with 968 additions and 448 deletions
@@ -60,6 +60,12 @@ class Inboxes extends CacheEnabledApiClient {
  disableWhatsappCalling(inboxId) {
    return axios.post(`${this.url}/${inboxId}/disable_whatsapp_calling`);
  }
+
+  setInboundCalls(inboxId, enabled) {
+    return axios.post(`${this.url}/${inboxId}/set_inbound_calls`, {
+      inbound_calls_enabled: enabled,
+    });
+  }
 }

 export default new Inboxes();
@@ -9,6 +9,10 @@ class OnboardingAPI extends ApiClient {
  update(data) {
    return axios.patch(this.url, data);
  }
+
+  getHelpCenterGeneration() {
+    return axios.get(`${this.url}/help_center_generation`);
+  }
 }

 export default new OnboardingAPI();
@@ -175,6 +175,9 @@ useEventListener(document, 'touchend', onResizeEnd);

 const inboxes = useMapGetter('inboxes/getInboxes');
 const labels = useMapGetter('labels/getLabelsOnSidebar');
+const allUnreadCount = useMapGetter(
+  'conversationUnreadCounts/getAllUnreadCount'
+);
 const getInboxUnreadCount = useMapGetter(
  'conversationUnreadCounts/getInboxUnreadCount'
 );
@@ -297,6 +300,7 @@ const menuItems = computed(() => {
        {
          name: 'All',
          label: t('SIDEBAR.ALL_CONVERSATIONS'),
+          badgeCount: allUnreadCount.value,
          activeOn: ['inbox_conversation'],
          to: accountScopedRoute('home'),
        },
@@ -375,10 +375,10 @@ export default {
      return `draft-${this.conversationIdByRoute}-${this.replyType}`;
    },
    audioRecordFormat() {
-      if (this.isAWhatsAppChannel) {
+      if (this.isAWhatsAppCloudChannel) {
        return AUDIO_FORMATS.OGG;
      }
-      if (this.isATelegramChannel) {
+      if (this.isAWhatsAppChannel || this.isATelegramChannel) {
        return AUDIO_FORMATS.MP3;
      }
      if (this.isAPIInbox) {
@@ -653,6 +653,10 @@
      },
      "CREDENTIALS": {
        "DESCRIPTION": "Voice calling requires Twilio API Key credentials. These are used to generate tokens for agent voice connections."
+      },
+      "INBOUND": {
+        "LABEL": "Allow incoming calls",
+        "DESCRIPTION": "Let customers call this number. When turned off, incoming calls are declined automatically — agents aren't notified and no conversation is created. Agents can still place outgoing calls."
      }
    },
    "WHATSAPP_CALLING": {
@@ -94,8 +94,18 @@ export default {
      return this.getAccount(this.accountId) || {};
    },
  },
+  watch: {
+    'currentAccount.id'(id) {
+      if (id) {
+        this.initializeAccount();
+      }
+    },
+  },
  mounted() {
-    this.initializeAccount();
+    // Account already in the store (navigated in): seed immediately.
+    if (this.currentAccount.id) {
+      this.initializeAccount();
+    }
  },
  methods: {
    async initializeAccount() {
@@ -8,7 +8,7 @@ import SectionLayout from './SectionLayout.vue';
 const { t } = useI18n();
 const { currentAccount } = useAccount();

-const getAccountId = computed(() => currentAccount.value.id.toString());
+const getAccountId = computed(() => currentAccount.value?.id?.toString());
 </script>

 <template>
@@ -1,9 +1,11 @@
 <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 NextInput from 'dashboard/components-next/input/Input.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';

 export default {
  components: {
@@ -11,6 +13,7 @@ export default {
    SettingsToggleSection,
    NextInput,
    NextButton,
+    Spinner,
  },
  props: {
    inbox: {
@@ -21,9 +24,11 @@ export default {
  data() {
    return {
      voiceEnabled: this.inbox.voice_enabled || false,
+      inboundCallsEnabled: this.inbox.inbound_calls_enabled !== false,
      apiKeySid: this.inbox.api_key_sid || '',
      apiKeySecret: '',
      isUpdating: false,
+      isTogglingInbound: false,
    };
  },
  computed: {
@@ -62,8 +67,27 @@ export default {
    'inbox.api_key_sid'(val) {
      this.apiKeySid = val || '';
    },
+    'inbox.inbound_calls_enabled'(val) {
+      this.inboundCallsEnabled = val !== false;
+    },
  },
  methods: {
+    async handleInboundToggle(newValue) {
+      if (this.isTogglingInbound) return;
+      const previousValue = this.inboundCallsEnabled;
+      this.inboundCallsEnabled = newValue;
+      this.isTogglingInbound = true;
+      try {
+        await InboxesAPI.setInboundCalls(this.inbox.id, newValue);
+        await this.$store.dispatch('inboxes/get', this.inbox.id);
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (_) {
+        this.inboundCallsEnabled = previousValue;
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      } finally {
+        this.isTogglingInbound = false;
+      }
+    },
    async updateVoiceSettings() {
      this.isUpdating = true;
      try {
@@ -123,6 +147,24 @@ export default {
      />
    </div>

+    <div
+      v-if="inbox.voice_enabled"
+      class="relative"
+      :class="{ 'pointer-events-none opacity-60': isTogglingInbound }"
+    >
+      <SettingsToggleSection
+        :model-value="inboundCallsEnabled"
+        :header="$t('INBOX_MGMT.VOICE_CONFIGURATION.INBOUND.LABEL')"
+        :description="$t('INBOX_MGMT.VOICE_CONFIGURATION.INBOUND.DESCRIPTION')"
+        :hide-toggle="isTogglingInbound"
+        @update:model-value="handleInboundToggle"
+      >
+        <template v-if="isTogglingInbound" #hiddenToggle>
+          <Spinner class="size-4 text-n-slate-11" />
+        </template>
+      </SettingsToggleSection>
+    </div>
+
    <div v-if="inbox.voice_enabled && inbox.voice_call_webhook_url">
      <SettingsFieldSection
        :label="$t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_VOICE_URL_TITLE')"
@@ -24,10 +24,13 @@ export default {
  data() {
    return {
      callingEnabled: this.inbox.provider_config?.calling_enabled || false,
+      inboundCallsEnabled:
+        this.inbox.provider_config?.inbound_calls_enabled !== false,
      permissionRequestBody:
        this.inbox.provider_config?.call_permission_request_body || '',
      isUpdating: false,
      isTogglingCalling: false,
+      isTogglingInbound: false,
    };
  },
  computed: {
@@ -44,8 +47,27 @@ export default {
    'inbox.provider_config.call_permission_request_body'(val) {
      this.permissionRequestBody = val || '';
    },
+    'inbox.provider_config.inbound_calls_enabled'(val) {
+      this.inboundCallsEnabled = val !== false;
+    },
  },
  methods: {
+    async handleInboundToggle(newValue) {
+      if (this.isTogglingInbound) return;
+      const previousValue = this.inboundCallsEnabled;
+      this.inboundCallsEnabled = newValue;
+      this.isTogglingInbound = true;
+      try {
+        await InboxesAPI.setInboundCalls(this.inbox.id, newValue);
+        await this.$store.dispatch('inboxes/get', this.inbox.id);
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (_) {
+        this.inboundCallsEnabled = previousValue;
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      } finally {
+        this.isTogglingInbound = false;
+      }
+    },
    async handleCallingToggle(newValue) {
      if (this.isTogglingCalling) return;
      const previousValue = this.callingEnabled;
@@ -117,6 +139,25 @@ export default {
    </div>

    <template v-if="callingEnabled">
+      <div
+        class="relative"
+        :class="{ 'pointer-events-none opacity-60': isTogglingInbound }"
+      >
+        <SettingsToggleSection
+          :model-value="inboundCallsEnabled"
+          :header="$t('INBOX_MGMT.VOICE_CONFIGURATION.INBOUND.LABEL')"
+          :description="
+            $t('INBOX_MGMT.VOICE_CONFIGURATION.INBOUND.DESCRIPTION')
+          "
+          :hide-toggle="isTogglingInbound"
+          @update:model-value="handleInboundToggle"
+        >
+          <template v-if="isTogglingInbound" #hiddenToggle>
+            <Spinner class="size-4 text-n-slate-11" />
+          </template>
+        </SettingsToggleSection>
+      </div>
+
      <SettingsFieldSection
        v-if="phoneNumber"
        :label="$t('INBOX_MGMT.WHATSAPP_CALLING.PHONE_NUMBER.LABEL')"
@@ -2,15 +2,21 @@ import ConversationAPI from '../../api/conversations';
 import types from '../mutation-types';

 export const state = {
+  allCount: 0,
  inboxes: {},
  labels: {},
  teams: {},
 };

+const normalizeCount = count => {
+  const parsedCount = Number(count);
+  return Number.isFinite(parsedCount) && parsedCount > 0 ? parsedCount : 0;
+};
+
 const normalizeCounts = counts => {
  return Object.entries(counts || {}).reduce((result, [id, count]) => {
-    const parsedCount = Number(count);
-    if (Number.isFinite(parsedCount) && parsedCount > 0) {
+    const parsedCount = normalizeCount(count);
+    if (parsedCount > 0) {
      result[String(id)] = parsedCount;
    }

@@ -19,6 +25,9 @@ const normalizeCounts = counts => {
 };

 export const getters = {
+  getAllUnreadCount($state) {
+    return $state.allCount;
+  },
  getInboxUnreadCount: $state => inboxId => {
    return $state.inboxes[String(inboxId)] || 0;
  },
@@ -55,6 +64,7 @@ export const actions = {

 export const mutations = {
  [types.SET_CONVERSATION_UNREAD_COUNTS]($state, payload = {}) {
+    $state.allCount = normalizeCount(payload.all_count);
    $state.inboxes = normalizeCounts(payload.inboxes);
    $state.labels = normalizeCounts(payload.labels);
    $state.teams = normalizeCounts(payload.teams);
@@ -15,6 +15,7 @@ describe('#actions', () => {
  describe('#get', () => {
    it('commits unread counts when API is successful', async () => {
      const payload = {
+        all_count: 2,
        inboxes: { 1: '2' },
        labels: { 3: 4 },
        teams: { 5: 6 },
@@ -3,6 +3,7 @@ import { getters } from '../../conversationUnreadCounts';
 describe('#getters', () => {
  it('returns inbox unread count by id', () => {
    const state = {
+      allCount: 0,
      inboxes: { 1: 2 },
      labels: {},
      teams: {},
@@ -15,6 +16,7 @@ describe('#getters', () => {

  it('returns label unread count by id', () => {
    const state = {
+      allCount: 0,
      inboxes: {},
      labels: { 3: 4 },
      teams: {},
@@ -27,6 +29,7 @@ describe('#getters', () => {

  it('returns team unread count by id', () => {
    const state = {
+      allCount: 0,
      inboxes: {},
      labels: {},
      teams: { 5: 6 },
@@ -37,8 +40,20 @@ describe('#getters', () => {
    expect(getters.getTeamUnreadCount(state)(6)).toBe(0);
  });

+  it('returns all unread count', () => {
+    const state = {
+      allCount: 7,
+      inboxes: {},
+      labels: {},
+      teams: {},
+    };
+
+    expect(getters.getAllUnreadCount(state)).toBe(7);
+  });
+
  it('returns unread count maps', () => {
    const state = {
+      allCount: 0,
      inboxes: { 1: 2 },
      labels: { 3: 4 },
      teams: { 5: 6 },
@@ -4,9 +4,10 @@ import { mutations } from '../../conversationUnreadCounts';
 describe('#mutations', () => {
  describe('#SET_CONVERSATION_UNREAD_COUNTS', () => {
    it('normalizes unread count payload', () => {
-      const state = { inboxes: {}, labels: {}, teams: {} };
+      const state = { allCount: 0, inboxes: {}, labels: {}, teams: {} };

      mutations[types.SET_CONVERSATION_UNREAD_COUNTS](state, {
+        all_count: '3',
        inboxes: {
          1: '2',
          2: 0,
@@ -23,6 +24,7 @@ describe('#mutations', () => {
      });

      expect(state).toEqual({
+        allCount: 3,
        inboxes: { 1: 2 },
        labels: { 4: 5 },
        teams: { 6: 7 },
@@ -31,6 +33,7 @@ describe('#mutations', () => {

    it('clears counts when payload is empty', () => {
      const state = {
+        allCount: 2,
        inboxes: { 1: 2 },
        labels: { 4: 5 },
        teams: { 6: 7 },
@@ -39,10 +42,21 @@ describe('#mutations', () => {
      mutations[types.SET_CONVERSATION_UNREAD_COUNTS](state, {});

      expect(state).toEqual({
+        allCount: 0,
        inboxes: {},
        labels: {},
        teams: {},
      });
    });
+
+    it('normalizes invalid aggregate counts to zero', () => {
+      const state = { allCount: 2, inboxes: {}, labels: {}, teams: {} };
+
+      mutations[types.SET_CONVERSATION_UNREAD_COUNTS](state, {
+        all_count: 'invalid',
+      });
+
+      expect(state.allCount).toBe(0);
+    });
  });
 });
@@ -63,6 +63,13 @@ const createMarkdownInstance = (linkify = true) => {
    });
 };

+// Help center article tables persist column widths as an internal
+// `<!--cw-colwidths:...-->` comment before the table. It exists only for the
+// editor's markdown round-trip and must never surface as text — markdown-it runs
+// with `html: false`, which would otherwise escape it into a visible comment in
+// rendered/plain output (e.g. dashboard search snippets). Strip it on the way in.
+const COLWIDTHS_MARKER_REGEX = /<!--cw-colwidths:[\d,]+-->\r?\n?/g;
+
 const TWITTER_USERNAME_REGEX = /(^|[^@\w])@(\w{1,15})\b/g;
 const TWITTER_USERNAME_REPLACEMENT = '$1[@$2](http://twitter.com/$2)';
 const TWITTER_HASH_REGEX = /(^|\s)#(\w+)/g;
@@ -75,7 +82,7 @@ class MessageFormatter {
    isAPrivateNote = false,
    linkify = true
  ) {
-    this.message = message || '';
+    this.message = (message || '').replace(COLWIDTHS_MARKER_REGEX, '');
    this.isAPrivateNote = isAPrivateNote;
    this.isATweet = isATweet;
    this.linkify = linkify;
@@ -126,6 +126,16 @@ describe('#MessageFormatter', () => {
    });
  });

+  describe('help center table colwidth marker', () => {
+    it('strips the internal colwidths marker from rendered output', () => {
+      const message =
+        '<!--cw-colwidths:120,200-->\n| A | B |\n| --- | --- |\n| 1 | 2 |';
+      const formatter = new MessageFormatter(message);
+      expect(formatter.formattedMessage).not.toContain('cw-colwidths');
+      expect(formatter.plainText).not.toContain('cw-colwidths');
+    });
+  });
+
  describe('#sanitize', () => {
    it('sanitizes markup and removes all unnecessary elements', () => {
      const message =
@@ -36,6 +36,9 @@ class ActionCableConnector extends BaseActionCableConnector {

  onReconnect = () => {
    this.syncLatestMessages();
+    // Re-fetch conversation attributes so a status change (e.g. auto-resolve)
+    // that happened while disconnected is reflected, keeping the reply box state correct.
+    this.app.$store.dispatch('conversationAttributes/getAttributes');
  };

  setLastMessageId = () => {
@@ -0,0 +1,53 @@
+import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest';
+import ActionCableConnector from '../actionCable';
+
+vi.mock('@rails/actioncable', () => ({
+  createConsumer: () => ({
+    subscriptions: { create: () => ({}) },
+    disconnect: vi.fn(),
+  }),
+}));
+
+describe('Widget ActionCableConnector', () => {
+  let app;
+  let mockDispatch;
+  let connector;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mockDispatch = vi.fn();
+    app = {
+      $store: {
+        dispatch: mockDispatch,
+        getters: {
+          getCurrentAccountId: 1,
+          getCurrentUserID: 1,
+        },
+      },
+    };
+    connector = new ActionCableConnector(app, 'test-token');
+    mockDispatch.mockClear();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.useRealTimers();
+  });
+
+  it('registers the conversation.status_changed event handler', () => {
+    expect(connector.events['conversation.status_changed']).toBe(
+      connector.onStatusChange
+    );
+  });
+
+  it('re-fetches conversation attributes on reconnect so a status change missed while disconnected is reflected', () => {
+    connector.onReconnect();
+
+    expect(mockDispatch).toHaveBeenCalledWith(
+      'conversation/syncLatestMessages'
+    );
+    expect(mockDispatch).toHaveBeenCalledWith(
+      'conversationAttributes/getAttributes'
+    );
+  });
+});