Tobi develop (#1173)

* fix: ensure outbound call creation only if outbound object exists

- Add conditional check for outbound object before calling `createOutboundCall` in `useConnectFirst.ts`
- Expand Axios error handling to include status codes 408, 409, 422, and 502 in `main.ts`

* commit: feat(phone-system) and refactor(general-stats)

- **PhoneSystem**
  - Add new state properties `isTakingCalls` and `isTransitioning`.
  - Update the `onLoggedIn` function to accept a parameter `forceOutbound`.
  - Implement logic to handle forced outbound calls when `isTakingCalls`, `!isOnCall`, and `!isTransitioning`.
  - Set an interval to trigger `onLoggedIn` every 20 seconds if conditions are met.

- **GeneralStats**
  - Comment out the display of the number of people waiting in each language queue.
  - Update the `agentsOnline` calculation to use `stats.value.active`.

src/components/phone/GeneralStats.vue

@@ -119,19 +119,19 @@
         }}</base-text>
         <span class="text-2xl">{{ agentsAvailable || 0 }}</span>
       </div>
-      <div
-        v-for="queue in statsPerQueue"
-        :key="queue.queueId"
-        :data-testid="`testAgentsOnlineQueue${queue.queueId}Div`"
-        class="flex flex-col bg-white p-4 rounded shadow border"
-      >
-        <base-text class="text-sm font-medium"
-          >{{ $t('phoneDashboard.total_people_waiting') }}({{
-            $t(queue.language)
-          }})</base-text
-        >
-        <span class="text-2xl">{{ queue.inQueue || 0 }}</span>
-      </div>
+      <!--      <div-->
+      <!--        v-for="queue in statsPerQueue"-->
+      <!--        :key="queue.queueId"-->
+      <!--        :data-testid="`testAgentsOnlineQueue${queue.queueId}Div`"-->
+      <!--        class="flex flex-col bg-white p-4 rounded shadow border"-->
+      <!--      >-->
+      <!--        <base-text class="text-sm font-medium"-->
+      <!--          >{{ $t('phoneDashboard.total_people_waiting') }}({{-->
+      <!--            $t(queue.language)-->
+      <!--          }})</base-text-->
+      <!--        >-->
+      <!--        <span class="text-2xl">{{ queue.inQueue || 0 }}</span>-->
+      <!--      </div>-->
     </div>
   </div>
 </template>
@@ -236,17 +236,20 @@ export default defineComponent({
       () => agentStats.value,
       (agents) => {
         if (agents) {
-          agentsOnline.value = agents.filter((agent) =>
-            ['ENGAGED', 'TRANSITIONING'].includes(agent.state),
-          ).length;
-
           agentsAvailable.value = agents.filter((agent) =>
             ['AVAILABLE', 'WORKING'].includes(agent.state),
           ).length;
         }
       },
     );
 
+    watch(
+      () => stats.value.active,
+      () => {
+        agentsOnline.value = Number(stats.value.active) || 0;
+      },
+    );
+
     const columns = ref(
       makeTableColumns([
         ['id', '0.5fr', t('phoneDashboard.id')],

src/hooks/useConnectFirst.ts

@@ -243,7 +243,9 @@ export default function useConnectFirst(context: {
         userId: currentUser?.value?.id,
         language: currentUser?.value?.primary_language,
       });
-      await createOutboundCall(outbound, number);
+      if (outbound) {
+        await createOutboundCall(outbound, number);
+      }
     } catch (error) {
       $toasted.error(getErrorMessage(error));
     } finally {

src/main.ts

@@ -67,7 +67,10 @@ axios.defaults.withCredentials = true;
 axios.interceptors.response.use(
   (response) => response,
   (error) => {
-    if (error instanceof AxiosError && error.response?.status === 400) {
+    if (
+      error instanceof AxiosError &&
+      [400, 408, 409, 422, 502].includes(error.response?.status as number)
+    ) {
       return getAndToastWarningMessage(error);
     }
   },

src/pages/phone/PhoneSystem.vue

@@ -866,6 +866,8 @@ export default defineComponent({
 
     const {
       isOnCall,
+      isTakingCalls,
+      isTransitioning,
       caller,
       stats,
       currentIncidentId,
@@ -1282,7 +1284,7 @@ export default defineComponent({
       return response.results;
     }
 
-    async function onLoggedIn() {
+    async function onLoggedIn(forceOutbound = false) {
       if (
         allowCallType.value === AllowedCallType.BOTH &&
         Number(stats.value.inQueue || stats.value.routing || 0) === 0
@@ -1305,6 +1307,18 @@ export default defineComponent({
         } catch {
           await setAway();
         }
+      } else if (
+        forceOutbound &&
+        remainingCallbacks.value + remainingCalldowns.value > 0
+      ) {
+        if (isTakingCalls.value && !isOnCall.value && !isTransitioning.value) {
+          await setWorking();
+          try {
+            await dialNextOutbound();
+          } catch {
+            await setAvailable();
+          }
+        }
       } else {
         await setAvailable();
       }
@@ -1505,6 +1519,12 @@ export default defineComponent({
       }
 
       await init();
+
+      setInterval(() => {
+        if (isTakingCalls.value && !isOnCall.value && !isTransitioning.value) {
+          onLoggedIn(true);
+        }
+      }, 20_000);
     });
 
     return {