Merge branch 'develop' into codex/fix-inbox-finish-setup-guidance

app/javascript/dashboard/composables/spec/index.spec.js

@@ -10,10 +10,12 @@ vi.mock('shared/helpers/mitt', () => ({
 
 vi.mock('dashboard/helper/AnalyticsHelper/index', async importOriginal => {
   const actual = await importOriginal();
-  actual.default = {
-    track: vi.fn(),
+  return {
+    ...actual,
+    default: {
+      track: vi.fn(),
+    },
   };
-  return actual;
 });
 
 describe('useTrack', () => {

app/javascript/dashboard/composables/spec/useCaptain.spec.js

@@ -16,10 +16,12 @@ vi.mock('vue-i18n');
 vi.mock('dashboard/api/captain/tasks');
 vi.mock('dashboard/helper/AnalyticsHelper/index', async importOriginal => {
   const actual = await importOriginal();
-  actual.default = {
-    track: vi.fn(),
+  return {
+    ...actual,
+    default: {
+      track: vi.fn(),
+    },
   };
-  return actual;
 });
 vi.mock('dashboard/helper/AnalyticsHelper/events', () => ({
   CAPTAIN_EVENTS: {

app/javascript/dashboard/composables/spec/useInbox.spec.js

@@ -47,7 +47,11 @@ const mockStore = createStore({
             11: { id: 11, channel_type: INBOX_TYPES.API },
             12: { id: 12, channel_type: INBOX_TYPES.SMS },
             13: { id: 13, channel_type: INBOX_TYPES.INSTAGRAM },
-            14: { id: 14, channel_type: INBOX_TYPES.VOICE },
+            14: {
+              id: 14,
+              channel_type: INBOX_TYPES.TWILIO,
+              voice_enabled: true,
+            },
             15: { id: 15, channel_type: INBOX_TYPES.TIKTOK },
           };
           return inboxes[id] || null;
@@ -212,11 +216,11 @@ describe('useInbox', () => {
       });
       expect(wrapper.vm.isAnInstagramChannel).toBe(true);
 
-      // Test Voice
+      // Test Voice (Twilio with voice_enabled)
       wrapper = mount(createTestComponent(14), {
         global: { plugins: [mockStore] },
       });
-      expect(wrapper.vm.isAVoiceChannel).toBe(true);
+      expect(wrapper.vm.voiceCallEnabled).toBe(true);
 
       // Test Tiktok
       wrapper = mount(createTestComponent(15), {
@@ -276,7 +280,8 @@ describe('useInbox', () => {
         'isAnEmailChannel',
         'isAnInstagramChannel',
         'isATiktokChannel',
-        'isAVoiceChannel',
+        'voiceCallEnabled',
+        'voiceCallProvider',
       ];
 
       expectedProperties.forEach(prop => {

app/javascript/dashboard/composables/spec/useKeyboardEvents.spec.js

@@ -1,6 +1,47 @@
+const keyboardEventsMock = vi.hoisted(() => ({
+  mountedCallbacks: [],
+  unmountedCallbacks: [],
+  registeredKeybindings: {},
+}));
+
+vi.mock('vue', async importOriginal => ({
+  ...(await importOriginal()),
+  onMounted: vi.fn(callback =>
+    keyboardEventsMock.mountedCallbacks.push(callback)
+  ),
+  onUnmounted: vi.fn(callback =>
+    keyboardEventsMock.unmountedCallbacks.push(callback)
+  ),
+}));
+
+vi.mock('dashboard/composables/useDetectKeyboardLayout', () => ({
+  useDetectKeyboardLayout: vi.fn(() => Promise.resolve('QWERTY')),
+}));
+
+vi.mock('tinykeys', () => ({
+  createKeybindingsHandler: vi.fn(keybindings => {
+    keyboardEventsMock.registeredKeybindings = keybindings;
+    return event => keybindings[event.shortcut]?.(event);
+  }),
+}));
+
+import { useDetectKeyboardLayout } from 'dashboard/composables/useDetectKeyboardLayout';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import { LAYOUT_QWERTZ } from 'shared/helpers/KeyboardHelpers';
+
+const mount = async events => {
+  useKeyboardEvents(events);
+  await keyboardEventsMock.mountedCallbacks[0]();
+  return keyboardEventsMock.registeredKeybindings;
+};
 
 describe('useKeyboardEvents', () => {
+  beforeEach(() => {
+    keyboardEventsMock.mountedCallbacks = [];
+    keyboardEventsMock.unmountedCallbacks = [];
+    keyboardEventsMock.registeredKeybindings = {};
+  });
+
   it('should be defined', () => {
     expect(useKeyboardEvents).toBeDefined();
   });
@@ -9,18 +50,46 @@ describe('useKeyboardEvents', () => {
     expect(useKeyboardEvents).toBeInstanceOf(Function);
   });
 
-  it('should set up listeners on mount and remove them on unmount', async () => {
-    const events = {
-      'ALT+KeyL': () => {},
-    };
+  it('registers keybindings on mount and removes the listener on unmount', async () => {
+    const addEventListener = vi.spyOn(document, 'addEventListener');
 
-    const mountedMock = vi.fn();
-    const unmountedMock = vi.fn();
-    useKeyboardEvents(events);
-    mountedMock();
-    unmountedMock();
+    const keybindings = await mount({ 'ALT+KeyL': () => {} });
+    expect(Object.keys(keybindings)).toEqual(['ALT+KeyL']);
 
-    expect(mountedMock).toHaveBeenCalled();
-    expect(unmountedMock).toHaveBeenCalled();
+    const { signal } = addEventListener.mock.calls[0][2];
+    expect(signal.aborted).toBe(false);
+
+    keyboardEventsMock.unmountedCallbacks[0]();
+    expect(signal.aborted).toBe(true);
+  });
+
+  it('prefixes Shift on QWERTZ layouts for the affected keys', async () => {
+    useDetectKeyboardLayout.mockResolvedValueOnce(LAYOUT_QWERTZ);
+
+    const keybindings = await mount({ 'Alt+KeyL': () => {} });
+
+    expect(Object.keys(keybindings)).toEqual(['Shift+Alt+KeyL']);
+  });
+
+  it('ignores shortcuts on focused typeable elements by default', async () => {
+    const action = vi.fn();
+    const keybindings = await mount({
+      'Alt+KeyL': { action, allowOnFocusedInput: false },
+    });
+
+    keybindings['Alt+KeyL']({ target: document.createElement('textarea') });
+
+    expect(action).not.toHaveBeenCalled();
+  });
+
+  it('runs shortcuts on focused typeable elements when allowed', async () => {
+    const action = vi.fn();
+    const keybindings = await mount({
+      'Alt+KeyL': { action, allowOnFocusedInput: true },
+    });
+
+    keybindings['Alt+KeyL']({ target: document.createElement('textarea') });
+
+    expect(action).toHaveBeenCalledTimes(1);
   });
 });