contactstudiocstools 1.0.258 → 1.0.260

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@contactstudio/cstools",
   "configKey": "CSTools",
-  "version": "1.0.258"
+  "version": "1.0.260"
 }

package/dist/runtime/components/Atom.ChatContactGlass.vue

@@ -0,0 +1,186 @@
+<template>
+  <!-- contact -->
+  <li class="chat-contact flex items-center !pl-3 max-h-none !rounded-none">
+    <!-- avatar -->
+    <figure
+      :class="[getStatusClass]"
+      :notifications="contact.notifications"
+      class="w-9 h-9 rounded-full  avatar-glass avatar-soft-secondary"
+    >
+      <img
+        v-if="contact.avatar"
+        :src="contact.avatar"
+        class="rounded-md"
+      >
+      <i
+        v-else
+        class="bi-person-fill text-2xl"
+      />
+    </figure>
+
+    <!-- info -->
+    <div
+      class="flex-1 ml-3 py-2 !pr-3  w-24 chat-contact-border"
+      :class="{'border-t-2': index === 0}"
+    >
+      <p class="flex justify-between items-center overflow-hidden text-ellipsis whitespace-nowrap mb-1">
+        <!-- label -->
+        <span class="text-xs">
+          {{ contact.label }}
+        </span>
+
+        <!-- hours
+        <span
+          v-if="entryDateExists"
+          class="badge badge-outline-secondary ml-2"
+          tooltip="Tempo em atendimento"
+        >
+          {{ new Date(milliseconds).toISOString().slice(11, 19) }}
+        </span>
+        -->
+
+        <div class="flex items-center gap-1">
+          <!-- date message -->
+          <p
+            class="badge !p-0 text-secondary"
+            tooltip="Horário da última mensagem"
+          >
+            {{ getDate }}
+          </p>
+          <!-- expirate -->
+          <div
+            v-if="expirated"
+            tooltip="Envie uma mensagem para o cliente!"
+            class="flex justify-center items-center relative"
+          >
+            <div class="flex justify-center items-center rounded-full bg-error h-4 w-4">
+              <i class="bi bi-bell-fill text-white text-[8.4px] ml-[1px]" />
+            </div>
+          </div>
+        </div>
+      </p>
+      <!-- typing -->
+      <p
+        v-if="contact.typing"
+        class="text-2xs text-success"
+      >
+        Digitando...
+      </p>
+      <!-- message -->
+      <div
+        v-else
+        class="markdown text-2xs opacity-50 w-full overflow-hidden text-ellipsis whitespace-nowrap"
+        v-html="marked(props.contact.message ?? '')"
+      />
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { marked } from "marked";
+import { ref, computed, onMounted } from "vue";
+import { getMinutesBetweenDates, getTimeByDate, IChatContact } from "./types";
+
+// props
+interface IProps {
+  contact: IChatContact;
+  timeout: number;
+  index: number;
+}
+const props = defineProps<IProps>();
+
+// mounted
+onMounted(() => {
+  setInterval(validateExpiration, 1000);
+});
+
+// computed
+const getDate = computed<string>(() => {
+  const date = props.contact.date;
+  if (!date) return "";
+  return getTimeByDate(date);
+});
+const entryDateExists = computed<boolean>(() => !!props.contact.entrydate)
+const getStatusClass = computed<string>(() => {
+  if (props.contact.on) return "avatar-status-success";
+  return "avatar-status-error";
+});
+
+// data
+const expirated = ref<boolean>(false);
+const milliseconds = ref<number>(0)
+
+// methods
+function validateExpiration() {
+  if (!props.contact.date) return;
+  expirated.value =
+    getMinutesBetweenDates(new Date(), props.contact.date) >= props.timeout;
+}
+async function setTimerContact(): Promise<void> {
+  if (!props.contact.entrydate) return
+
+  await new Promise(resolve => setTimeout(resolve, 1000))
+
+  const now = new Date().getTime()
+  const entry = props.contact.entrydate.getTime()
+
+  milliseconds.value = Math.abs(now - entry)
+
+  setTimerContact()
+}
+setTimerContact()
+</script>
+
+<style scoped>
+.min-w-40px {
+  min-width: 40px;
+}
+
+.text-2xs {
+  font-size: 0.7rem;
+}
+.avatar-glass {
+    align-items: center;
+    display: flex;
+    font-weight: 500;
+    justify-content: center;
+    position: relative;
+    text-transform: uppercase;
+}
+
+.avatar-glass:after,.avatar-glass:not(.avatar-glass[notifications]):after {
+    border-radius: 99999px;
+    border: 3px solid #ffffff;
+    color: #fff;
+    font-size: 11px;
+    height: 15px;
+    width: 15px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translate(40%,-40%)
+}
+
+.avatar-glass:not([notifications=""]):after {
+    content: attr(notifications);
+    width: 25px;
+    height: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center
+}
+
+.chat-contact:hover {
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.dark .chat-contact:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.chat-contact-border {
+  border-bottom: 2px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.2);
+}
+</style>

package/dist/runtime/components/Organism.ChatScheduleGlass.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div class="flex items-center text-xs">
+      <span class="w-full px-6 py-5 text-xl">
+        Conversas
+      </span>
+    </div>
+
+    <article class="overflow-auto max-h-full scrollbar pb-24">
+      <!-- contacts -->
+      <div
+        v-for="(contact, i) in contacts"
+        v-show="!visibleSchedules"
+        :key="i"
+      >
+        <ul class="list">
+          <AtomChatContactGlass
+            :timeout="timeout"
+            :contact="contact"
+            :class="getSelectedClass(contact)"
+            :index="i"
+            @click="select(contact)"
+          />
+        </ul>
+      </div>
+    </article>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { IChatContact, IChatContacts, IPortfolioSchedules } from "./types";
+
+// props
+interface IProps {
+  contacts: IChatContacts;
+  schedules: IPortfolioSchedules;
+  selected?: IChatContact;
+  timeout: number;
+}
+const props = defineProps<IProps>();
+
+// emits
+interface IEmits {
+  (e: "select", contact: IChatContact): void;
+  (e: "schedule", schedule: boolean): void;
+}
+const emit = defineEmits<IEmits>();
+
+// computed
+const getSelectedClass = computed<Function>(() => (contact: IChatContact) => {
+  if (props.selected?.id === contact.id)
+    return "bg-slate-100 dark:bg-slate-800";
+  return "";
+});
+
+// data
+const visibleSchedules = ref<boolean>(false)
+
+// methods
+function select(contact: IChatContact): void {
+  emit("select", contact);
+}
+function changeSchedule(): void {
+  visibleSchedules.value = !visibleSchedules.value
+  emit("schedule", visibleSchedules.value);
+}
+</script>
+
+<style scoped>
+.text-2xs {
+  font-size: 0.7rem;
+}
+</style>

package/dist/runtime/components/Organism.Tabulation.vue

@@ -70,6 +70,7 @@
           <MoleculeFieldGroup
             :rules="getRulesNote"
             :class="{ error: noteIsInvalid }"
+            label="Observação de Tabulação"
           >
             <AtomFieldTextarea
               v-model="note"
@@ -108,6 +109,29 @@
             />
           </label>
         </MoleculeFieldGroup>
+
+        <!-- Exibir quando ter manifestação vinculada -->
+        <div
+          v-show="!manifestationIsEmpty"
+          class="mx-5 !pb-4"
+        >
+          <div class="divider" />
+
+          <!-- manifestatio observation -->
+          <article>
+          <MoleculeFieldGroup
+            label="Nota de Manifestação"
+            class="mt-3"
+          >
+            <AtomFieldTextarea
+              v-model="manifestationNote"
+              rows="5"
+              placeholder="Nota de Manifestação"
+              @blur="persist"
+            />
+          </MoleculeFieldGroup>
+          </article>
+        </div>
       </details>
     </div>
   </article>
@@ -125,7 +149,7 @@ interface IProps {
   manifestation?: INodes;
   persist?: Function;
   disableNode?: (({ nodeValue }: { nodeValue: string }) => boolean) | undefined;
-  defaults?: { tabulation: INodes[]; note: string };
+  defaults?: { tabulation: INodes[]; note: string ; manifestationNote?: string };
 }
 const props = defineProps<IProps>();
 
@@ -184,6 +208,7 @@ const MoleculeFieldGroupRef = ref<InstanceType<
 > | null>(null);
 const tabulation = reactive<INodes[]>(props.defaults?.tabulation ?? []);
 const note = ref<string>(props.defaults?.note ?? "");
+const manifestationNote = ref<string>(props.defaults?.manifestationNote ?? "");
 const additionals = reactive<any>({});
 
 // methods
@@ -198,6 +223,7 @@ function persist(): void {
   props.persist({
     tabulation: tabulation,
     note: note.value,
+    manifestationNote: manifestationNote.value,
     additionals,
   });
 }
@@ -228,6 +254,7 @@ watch(
 defineExpose({
   tabulation,
   note: getNote,
+  manifestationNote,
   additionals,
   isValid,
   isSchedule,

package/dist/runtime/components/types/dto.mjs

@@ -180,9 +180,15 @@ export function PausesDTO({ lista_pausa }) {
   return pauses;
 }
 export function DoubtsDTO(primitives) {
-  if (!primitives)
+  if (!primitives || !Array.isArray(primitives)) {
     return [];
-  return primitives.map((primitive) => primitive.doubt).flat();
+  }
+  return primitives.reduce((acc, primitive) => {
+    if (primitive && Array.isArray(primitive.doubt)) {
+      acc.push(...primitive.doubt);
+    }
+    return acc;
+  }, []);
 }
 export function UserDTO(primitive) {
   if (!primitive.info_agente) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contactstudiocstools",
-  "version": "1.0.258",
+  "version": "1.0.260",
   "description": "Nuxt Tools Module for ContactStudio",
   "type": "module",
   "exports": {