From 29f4afbac7fd997ff4eafb4138b118182db6907c Mon Sep 17 00:00:00 2001
From: dlohvinov <nsblnr@gmail.com>
Date: Thu, 2 Nov 2023 19:15:45 +0200
Subject: [PATCH] fix: small widget fixes and improvements [WTEL-4002]

---
 src/app/components/utils/wt-button.vue           |  8 ++++++++
 src/app/css/variables/_colors.scss               |  2 ++
 .../components/utils/wt-omni-widget-numpad.vue   |  1 +
 .../components/wt-omni-widget-call-active.vue    | 10 ++++------
 .../components/wt-omni-widget-call-ringing.vue   |  2 +-
 .../components/wt-omni-widget-call-start.vue     |  1 +
 src/modules/call/store/call.js                   | 16 +++++++++++++---
 7 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/app/components/utils/wt-button.vue b/src/app/components/utils/wt-button.vue
index 05f1f1d..ad632ed 100644
--- a/src/app/components/utils/wt-button.vue
+++ b/src/app/components/utils/wt-button.vue
@@ -4,6 +4,7 @@
     :class="[
       `wt-button--color-${color}`,
       {
+        'wt-button--wide': wide,
         'wt-button--disabled': disabled,
       }
       ]"
@@ -23,6 +24,10 @@ export default {
       default: 'accent',
       options: ['accent', 'secondary', 'danger'],
     },
+    wide: {
+      type: Boolean,
+      default: false,
+    },
     disabled: {
       type: Boolean,
       default: false,
@@ -66,6 +71,9 @@ export default {
         background: var(--negative-color);
       }
     }
+    &--wide {
+      width: 100%;
+    }
     &--disabled {
       pointer-events: none;
       color: var(--text-primary-color);
diff --git a/src/app/css/variables/_colors.scss b/src/app/css/variables/_colors.scss
index bca8cfe..567adbe 100644
--- a/src/app/css/variables/_colors.scss
+++ b/src/app/css/variables/_colors.scss
@@ -24,6 +24,8 @@
 
   --icon-main-color: hsla(202, 100%, 15%, 1);
   --icon-contrast-color: hsla(0, 0%, 100%, 1);
+  --icon-error-color: var(--negative-color);
+  --icon-success-color: var(--positive-color);
 
   --telegram-color: hsla(213, 56%, 67%, 1);
   --viber-color: hsla(267, 46%, 46%, 1);
diff --git a/src/modules/call/components/utils/wt-omni-widget-numpad.vue b/src/modules/call/components/utils/wt-omni-widget-numpad.vue
index 2d9f7b5..51b2587 100644
--- a/src/modules/call/components/utils/wt-omni-widget-numpad.vue
+++ b/src/modules/call/components/utils/wt-omni-widget-numpad.vue
@@ -23,6 +23,7 @@ export default {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 5px;
+    width: 280px;
   }
 }
 </style>
diff --git a/src/modules/call/components/wt-omni-widget-call-active.vue b/src/modules/call/components/wt-omni-widget-call-active.vue
index 676330d..f80493f 100644
--- a/src/modules/call/components/wt-omni-widget-call-active.vue
+++ b/src/modules/call/components/wt-omni-widget-call-active.vue
@@ -6,12 +6,10 @@
     >
     <call-title-wrapper>
       {{ duration }}
+      <template #description>
+        {{ sessionDTMF }}
+      </template>
     </call-title-wrapper>
-    <wt-input
-      :value="sessionDTMF"
-      type="number"
-      @input="sendDTMF"
-    ></wt-input>
     <numpad
       @input="sendDTMF"
     ></numpad>
@@ -24,7 +22,7 @@
       <wt-icon-btn
         icon="call-decline"
         icon-size="sm"
-        color="danger"
+        color="error"
         @click="hangup"
       ></wt-icon-btn>
     </call-actions-wrapper>
diff --git a/src/modules/call/components/wt-omni-widget-call-ringing.vue b/src/modules/call/components/wt-omni-widget-call-ringing.vue
index 51ec28c..0ce3de1 100644
--- a/src/modules/call/components/wt-omni-widget-call-ringing.vue
+++ b/src/modules/call/components/wt-omni-widget-call-ringing.vue
@@ -17,7 +17,7 @@
         @click="toggleMute"
       ></wt-icon-btn>
       <wt-icon-btn
-        color="danger"
+        color="error"
         icon="call-decline"
         icon-size="sm"
         @click="hangup"
diff --git a/src/modules/call/components/wt-omni-widget-call-start.vue b/src/modules/call/components/wt-omni-widget-call-start.vue
index ec4d5c7..da8281f 100644
--- a/src/modules/call/components/wt-omni-widget-call-start.vue
+++ b/src/modules/call/components/wt-omni-widget-call-start.vue
@@ -21,6 +21,7 @@
       <wt-icon-btn
         icon="call"
         icon-size="sm"
+        color="success"
         @click="() => makeCall({ initWithMuted })"
       ></wt-icon-btn>
     </call-actions-wrapper>
diff --git a/src/modules/call/store/call.js b/src/modules/call/store/call.js
index d103b07..3b3091e 100644
--- a/src/modules/call/store/call.js
+++ b/src/modules/call/store/call.js
@@ -30,9 +30,13 @@ const actions = {
   START_USER_AGENT: (context) => {
     const socket = new JsSIP.WebSocketInterface(context.rootState.config.call.url);
     JsSIP.debug.enable('JsSIP:*');
+
+    const { hostname } = new URL(context.rootState.config.call.url);
+
     const configuration = {
       sockets: [socket],
-      uri: 'sip:site@dev.webitel.com',
+      // uri: 'sip:site@dev.webitel.com',
+      uri: `sip:${context.rootState.config.call.id}@${hostname}`,
       register: false,
     };
     const userAgent = new JsSIP.UA(configuration);
@@ -93,12 +97,13 @@ const actions = {
 
     const options = {
       eventHandlers,
-      mediaConstraints: { audio: !initWithMuted },
+      mediaConstraints: { audio: true },
       sessionTimersExpires: 300,
     };
     const session = context.state.userAgent.call('sip:call-from-web@dev.webitel.com', options);
     window.session = session;
     context.commit('SET_SESSION', session);
+    if (initWithMuted) await context.dispatch('TOGGLE_MUTE', true);
   },
   HANGUP: (context) => {
     context.state.session.terminate();
@@ -111,8 +116,13 @@ const actions = {
       session.hold();
     }
   },
-  TOGGLE_MUTE: (context) => {
+  TOGGLE_MUTE: (context, value) => {
     const { session } = context.state;
+    // checking typeof because toggle button can send event
+    if (value !== undefined && typeof value === 'boolean') {
+      if (value) session.mute();
+      else session.unmute();
+    }
     if (session.isMuted().audio) {
       session.unmute();
     } else {