feat(phone-doctor): Phone Doctor General Availability (#1281)

- Simplify sections computation by removing isAdmin check in PhoneOverlay.vue. fix(phone-doctor): refactor string concatenations - Simplify error and description strings in PhoneDoctor.vue by removing unnecessary line breaks. - Correct multi-line string definitions for better readability. test(phone-doctor): update unit tests for consistency - Adjust test strings to match updated text in PhoneDoctor.test.ts. - Update button text check to align with new localization keys.
CrisisCleanup · Nov 1, 2024 · fd85133 · fd85133
1 parent 974464f
commit fd85133
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 45 deletions.
diff --git a/src/components/phone/PhoneDoctor.vue b/src/components/phone/PhoneDoctor.vue
@@ -377,9 +377,7 @@ const checkTestCall = async () => {
             // Check for timeout
             if (Date.now() - startTime >= timeout) {
               clearInterval(intervalId);
-              reject(
-                new Error(t('phoneDoctor.timeout_no_input_30_seconds')),
-              );
+              reject(new Error(t('phoneDoctor.timeout_no_input_30_seconds')));
             }
           } catch (error) {
             clearInterval(intervalId);
@@ -470,9 +468,7 @@ const steps = ref([
   },
   {
     key: 'connection',
-    description: t(
-      'phoneDoctor.checking_connection_from_ccu_to_provider',
-    ),
+    description: t('phoneDoctor.checking_connection_from_ccu_to_provider'),
     action: checkAgentLogin,
   },
   {
@@ -524,7 +520,9 @@ const updatePhoneNumber = async () => {
   console.log('Updating phone number to', newPhoneNumber.value);
   const { newValue, valid } = validatePhoneNumber(newPhoneNumber.value);
   if (!valid) {
-    errorMessages.value.base.phoneNumber = t('phoneDoctor.invalid_phone_format');
+    errorMessages.value.base.phoneNumber = t(
+      'phoneDoctor.invalid_phone_format',
+    );
     return;
   }
   try {
@@ -537,7 +535,9 @@ const updatePhoneNumber = async () => {
         'phoneDoctor.phone_number_update_failed',
       );
     } else {
-      stepMessages.value.base.phoneNumber.push(t('phoneDoctor.phone_number_updated'));
+      stepMessages.value.base.phoneNumber.push(
+        t('phoneDoctor.phone_number_updated'),
+      );
       currentUser.value.mobile = newValue;
       // Re-run the phone number check
       const phoneNumber = await checkAgentPhoneNumber();
@@ -795,7 +795,9 @@ const resetDiagnostics = () => {
                 <!-- Potential solutions or inputs -->
                 <div v-if="errorMessages.base.phoneNumber">
                   <div class="flex items-center justify-between">
-                    <label>{{ $t('phoneDoctor.enter_valid_phone_number') }}</label>
+                    <label>{{
+                      $t('phoneDoctor.enter_valid_phone_number')
+                    }}</label>
                     <base-input
                       v-model="newPhoneNumber"
                       type="text"

diff --git a/src/components/phone/PhoneOverlay.vue b/src/components/phone/PhoneOverlay.vue
@@ -1,5 +1,27 @@
 <script setup lang="ts">
 import PhoneCmsItems from '@/components/phone/PhoneCmsItems.vue';
+import { useClipboard } from '@vueuse/core';
+import BaseButton from '@/components/BaseButton.vue';
+import Leaderboard from '@/components/phone/Leaderboard.vue';
+import useConnectFirst from '@/hooks/useConnectFirst';
+import ManualDialer from '@/components/phone/ManualDialer.vue';
+import CallHistory from '@/components/phone/CallHistory.vue';
+import { formatNationalNumber } from '@/filters';
+import useEmitter from '@/hooks/useEmitter';
+import GeneralStats from '@/components/phone/GeneralStats.vue';
+import UpdateStatus from '@/components/phone/UpdateStatus.vue';
+import CurrentCall from '@/components/phone/CurrentCall.vue';
+import CcuIcon from '@/components/BaseIcon.vue';
+import Chat from '@/components/chat/Chat.vue';
+import { computed, ref } from 'vue';
+import moment from 'moment';
+import BaseText from '@/components/BaseText.vue';
+import Badge from '@/components/Badge.vue';
+import useCurrentUser from '@/hooks/useCurrentUser';
+import PhoneOutbound from '@/models/PhoneOutbound';
+import { useToast } from 'vue-toastification';
+import PhoneNumberDisplay from '@/components/PhoneNumberDisplay.vue';
+import PhoneDoctor from '@/components/phone/PhoneDoctor.vue';
 
 const emit = defineEmits([
   'onCompleteCall',
@@ -25,7 +47,7 @@ const { currentUser } = useCurrentUser();
 
 // Sections as a computed property
 const sections = computed(() => {
-  let sectionsToReturn = [
+  return [
     {
       view: 'callHistory',
       text: t('phoneDashboard.last_10_calls'),
@@ -80,44 +102,15 @@ const sections = computed(() => {
       icon: 'bug-report',
       alt: t('phoneDashboard.report_bug'),
     },
-  ];
-
-  if (currentUser.value.isAdmin) {
-    sectionsToReturn.push({
+    {
       view: 'phoneDoctor',
       text: t('phoneDashboard.phone_doctor'),
       icon: 'stethoscope',
       alt: t('phoneDashboard.phone_doctor'),
-    });
-  }
-
-  return sectionsToReturn;
+    },
+  ];
 });
 
-import { useClipboard } from '@vueuse/core';
-import BaseButton from '@/components/BaseButton.vue';
-import Leaderboard from '@/components/phone/Leaderboard.vue';
-import useConnectFirst from '@/hooks/useConnectFirst';
-import ManualDialer from '@/components/phone/ManualDialer.vue';
-import CallHistory from '@/components/phone/CallHistory.vue';
-import { formatNationalNumber } from '@/filters';
-import useEmitter from '@/hooks/useEmitter';
-import GeneralStats from '@/components/phone/GeneralStats.vue';
-import UpdateStatus from '@/components/phone/UpdateStatus.vue';
-import ActiveCall from '@/components/phone/ActiveCall.vue';
-import CurrentCall from '@/components/phone/CurrentCall.vue';
-import CcuIcon from '@/components/BaseIcon.vue';
-import Chat from '@/components/chat/Chat.vue';
-import { computed, reactive, ref } from 'vue';
-import moment from 'moment';
-import usePhoneService from '@/hooks/phone/usePhoneService';
-import BaseText from '@/components/BaseText.vue';
-import Badge from '@/components/Badge.vue';
-import useCurrentUser from '@/hooks/useCurrentUser';
-import PhoneOutbound from '@/models/PhoneOutbound';
-import { useToast } from 'vue-toastification';
-import PhoneNumberDisplay from '@/components/PhoneNumberDisplay.vue';
-import PhoneDoctor from '@/components/phone/PhoneDoctor.vue';
 const { emitter } = useEmitter();
 const $toasted = useToast();
 

diff --git a/test/unit/components/phone/PhoneDoctor.test.ts b/test/unit/components/phone/PhoneDoctor.test.ts
@@ -94,8 +94,8 @@ describe('PhoneDoctor.vue', () => {
   });
 
   it('should render the component', () => {
-    expect(wrapper.html()).toContain('Phone Doctor');
-    expect(wrapper.html()).toContain('phoneDoctor.run_diagnostic');
+    expect(wrapper.html()).toContain('phoneDoctor.subtitle');
+    expect(wrapper.html()).toContain('phoneDoctor.run_all_tests');
   });
 
   it('should handle phone number update', async () => {
@@ -111,7 +111,7 @@ describe('PhoneDoctor.vue', () => {
     const phoneNumberInput = wrapper.findComponent(BaseInput);
     const updateButton = wrapper
       .findAllComponents(BaseButton)
-      .find((btn) => btn.text().includes('Update Phone Number'));
+      .find((btn) => btn.text().includes('actions.update'));
 
     // Set new phone number
     wrapper.vm.newPhoneNumber = '(784) 767-8269';