[ENGAGE-2715] Add switch time config project

package.json

@@ -17,6 +17,7 @@
     "@weni/unnnic-system": "^2.21.0",
     "axios": "^0.27.2",
     "core-js": "^3.8.3",
+    "date-fns": "^4.1.0",
     "iframessa": "^2.0.0",
     "is-mobile": "^4.0.0",
     "keycloak-js": "^23.0.7",
@@ -59,4 +60,4 @@
     "vitest": "^2.0.5",
     "vue-eslint-parser": "^9.4.2"
   }
-}
+}

src/components/StatusBar.vue

@@ -0,0 +1,264 @@
+<template>
+  <header class="status-bar">
+    <section
+      class="status-bar__selected"
+      @click="toggleDropdown"
+    >
+      <section class="status-bar__content">
+        <section
+          class="status-bar__icon"
+          :style="{ backgroundColor: selectedStatus.color }"
+        ></section>
+        <p class="status-bar__label">{{ selectedStatus.label }}</p>
+        <section
+          v-if="
+            project.config?.can_see_timer && selectedStatus.value !== 'inactive'
+          "
+          class="status-bar__timer"
+        >
+          {{ formattedTime }}
+        </section>
+      </section>
+      <section class="status-bar__set-status">
+        <p class="status-bar__set-status__label">
+          {{ $t('status.set_status') }}
+        </p>
+        <UnnnicIcon
+          data-testid="header-icon-expand"
+          size="md"
+          :icon="isOpen ? 'expand_less' : 'expand_more'"
+          scheme="neutral-darkest"
+        />
+      </section>
+    </section>
+
+    <ul
+      v-if="isOpen"
+      class="status-bar__list status-bar__list--open"
+    >
+      <li
+        v-for="status in statuses"
+        :key="status.value"
+        class="status-bar__item"
+        @click="selectStatus(status)"
+      >
+        <section
+          class="status-bar__icon"
+          :style="{ backgroundColor: status.color }"
+        ></section>
+        <p class="status-bar__item-label">{{ status.label }}</p>
+      </li>
+    </ul>
+  </header>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useConfig } from '@/store/modules/config';
+import { format, intervalToDuration, parseISO } from 'date-fns';
+import i18n from '@/plugins/i18n';
+
+const statuses = ref([
+  { value: 'active', label: 'Online', color: 'green' },
+  { value: 'inactive', label: 'Offline', color: 'gray' },
+  { value: 'pending', label: 'Almoço', color: 'orange' },
+]);
+
+const configStore = useConfig();
+const project = computed(() => configStore.project);
+
+const selectedStatus = ref(statuses.value[1]);
+const isOpen = ref(false);
+const startDate = ref(null);
+const elapsedTime = ref(0);
+let intervalId = null;
+
+const mockApiRequest = (url, data) => {
+  console.log(`📡 Mock API Request to: ${url}`, data);
+  return new Promise((resolve) => setTimeout(resolve, 500));
+};
+
+const getLocaleDate = () => {
+  const locale = i18n.global.locale ?? 'en-US';
+  if (locale) return format(new Date(), "yyyy-MM-dd'T'HH:mm:ssxxx");
+};
+
+const startTimer = () => {
+  intervalId = setInterval(() => {
+    if (startDate.value) {
+      const duration = intervalToDuration({
+        start: parseISO(startDate.value),
+        end: new Date(),
+      });
+      elapsedTime.value = duration;
+    }
+  }, 1000);
+};
+
+const stopTimer = () => {
+  if (intervalId) clearInterval(intervalId);
+};
+
+const formattedTime = computed(() => {
+  if (!elapsedTime.value) return '00:00:00';
+  const { hours = 0, minutes = 0, seconds = 0 } = elapsedTime.value;
+  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+});
+
+const selectStatus = async (newStatus) => {
+  if (newStatus.value !== 'inactive') {
+    if (selectedStatus.value.value !== 'inactive') {
+      await mockApiRequest('/api/status/end', {
+        status_id: selectedStatus.value.value,
+        end_date: getLocaleDate(),
+      });
+    }
+
+    startDate.value = getLocaleDate();
+    await mockApiRequest('/api/status/start', {
+      status_id: newStatus.value,
+      start_date: startDate.value,
+    });
+
+    startTimer();
+  } else {
+    stopTimer();
+  }
+
+  selectedStatus.value = newStatus;
+  isOpen.value = false;
+};
+
+onMounted(() => {
+  if (!startDate.value && project.value) {
+    startDate.value = getLocaleDate();
+  }
+
+  if (selectedStatus.value.value !== 'inactive') {
+    startTimer();
+  }
+});
+
+onUnmounted(() => {
+  stopTimer();
+});
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value;
+};
+</script>
+
+<style lang="scss" scoped>
+.status-bar {
+  position: relative;
+  display: flex;
+  padding: $unnnic-spacing-sm;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid $unnnic-color-neutral-soft;
+  border-left: 1px solid $unnnic-color-neutral-soft;
+  background: $unnnic-color-neutral-white;
+  cursor: pointer;
+
+  &__selected {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: $unnnic-spacing-xs;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: $unnnic-border-radius-md;
+  }
+
+  &__icon {
+    width: $unnnic-spacing-xs;
+    height: $unnnic-spacing-xs;
+    border-radius: 50%;
+  }
+
+  &__timer {
+    display: flex;
+    padding: 0rem $unnnic-border-radius-md;
+    justify-content: center;
+    align-items: center;
+    gap: $unnnic-spacing-xs;
+    border-radius: $unnnic-border-radius-pill;
+    border: 1px solid $unnnic-color-neutral-clean;
+    color: $unnnic-color-neutral-clean;
+
+    font-family: $unnnic-font-family-secondary;
+    font-size: $unnnic-font-size-body-md;
+    font-style: normal;
+    font-weight: $unnnic-font-weight-regular;
+    line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
+  }
+
+  &__label {
+    color: $unnnic-color-neutral-dark;
+
+    font-family: $unnnic-font-family-secondary;
+    font-size: $unnnic-font-size-body-gt;
+    font-weight: $unnnic-font-weight-bold;
+    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
+  }
+
+  &__set-status {
+    display: flex;
+    align-items: center;
+    gap: $unnnic-spacing-nano;
+    &__label {
+      color: $unnnic-color-neutral-cloudy;
+      font-family: $unnnic-font-family-secondary;
+      font-size: $unnnic-font-size-body-md;
+      font-style: normal;
+      font-weight: $unnnic-font-weight-regular;
+      line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
+    }
+  }
+
+  &__list {
+    position: absolute;
+    width: 100%;
+    background: $unnnic-color-background-snow;
+    border-top: 1px solid $unnnic-color-neutral-soft;
+    list-style: none;
+    margin: 0;
+    top: 100%;
+    left: 0;
+    z-index: 9999999;
+
+    &--open {
+      display: block;
+    }
+  }
+
+  &__item {
+    padding: $unnnic-spacing-sm;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid $unnnic-color-neutral-soft;
+    gap: $unnnic-border-radius-md;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background: $unnnic-color-neutral-lightest;
+    }
+
+    &-label {
+      color: $unnnic-color-neutral-dark;
+
+      font-family: $unnnic-font-family-secondary;
+      font-size: $unnnic-font-size-body-gt;
+      font-weight: $unnnic-font-weight-regular;
+      line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
+    }
+  }
+}
+</style>

src/layouts/ChatsLayout/index.vue

@@ -15,6 +15,7 @@
         v-show="!isLoadingSidebar"
         class="sidebar"
       >
+        <StatusBar />
         <PreferencesBar
           v-if="!isViewMode"
           :showFlowsTriggerButton="canTriggerFlows"
@@ -78,6 +79,7 @@ import ChatsLayoutFooterButton from './components/FooterButton/index.vue';
 
 import Sector from '@/services/api/resources/settings/sector.js';
 import FlowsTrigger from '@/services/api/resources/chats/flowsTrigger.js';
+import StatusBar from '@/components/StatusBar.vue';
 
 export default {
   name: 'ChatsLayout',
@@ -89,6 +91,7 @@ export default {
     LayoutFlowsTrigger,
     QuickMessages,
     ChatsLayoutFooterButton,
+    StatusBar,
   },
 
   props: {

src/locales/en.json

@@ -1,7 +1,8 @@
 {
   "status": {
     "online": "Online",
-    "offline": "Offline"
+    "offline": "Offline",
+    "set_status": "Set status"
   },
   "preferences": {
     "title": "Preferences",
@@ -592,6 +593,10 @@
       "block_transfer_to_off_agents": {
         "switch_active": "Blocking transfers to offline agents active",
         "switch_inactive": "Blocking transfers to offline agents inactive"
+      },
+      "show_agent_status_count_timer": {
+        "switch_active": "Show agent status count timer",
+        "switch_inactive": "Hide agent status count timer"
       }
     },
     "custom_sector": "Customize new sector (recommended)",

src/locales/es.json

@@ -1,7 +1,8 @@
 {
   "status": {
     "online": "En línea",
-    "offline": "Desconectada"
+    "offline": "Desconectada",
+    "set_status": "Establecer estado"
   },
   "preferences": {
     "title": "Preferencias",
@@ -596,6 +597,10 @@
       "block_transfer_to_off_agents": {
         "switch_active": "Bloqueo de transferencias a agentes fuera de línea activo",
         "switch_inactive": "Bloqueo de transferencias a agentes fuera de línea inactivo"
+      },
+      "show_agent_status_count_timer": {
+        "switch_active": "Mostrar temporizador de recuento de estado del agente",
+        "switch_inactive": "Ocultar temporizador de recuento de estado del agente"
       }
     },
     "custom_sector": "Personalizar nuevo sector (recomendado)",

src/locales/pt_br.json

@@ -1,7 +1,8 @@
 {
   "status": {
     "online": "Online",
-    "offline": "Offline"
+    "offline": "Offline",
+    "set_status": "Definir status"
   },
   "preferences": {
     "title": "Preferências",
@@ -596,6 +597,10 @@
       "block_transfer_to_off_agents": {
         "switch_active": "Bloqueio de transferências para agentes offline ativo",
         "switch_inactive": "Bloqueio de transferências para agentes offline inativo"
+      },
+      "show_agent_status_count_timer": {
+        "switch_active": "Mostrar timer de contagem do status do agente",
+        "switch_inactive": "Esconder timer de contagem do status do agente"
       }
     },
     "custom_sector": "Personalizar novo setor (recomendado)",