contactstudiocstools 1.0.224

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

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <header class="w-full h-12 flex items-center justify-between px-3">
+      <slot />
+    </header>
+
+    <div class="divider" />
+
+    <div class="flex items-center text-xs opacity-75 py-2 px-4">
+      <span class="w-full">
+        {{ visibleSchedules ? "Convites Enviados" : "Conversas" }}
+      </span>
+      <span
+        v-if="!visibleSchedules"
+        class="text-primary flex items-center gap-2 cursor-pointer whitespace-nowrap"
+        @click="changeSchedule"
+      >
+        Convites Enviados
+        <i class="bi-chevron-right leading-3 " />
+      </span>
+      <span
+        v-if="visibleSchedules"
+        class="text-error flex items-center gap-2 cursor-pointer"
+        @click="changeSchedule"
+      >
+        <i class="bi-chevron-left leading-3" />
+        Voltar
+      </span>
+    </div>
+
+    <div class="divider" />
+
+    <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">
+          <AtomChatContact
+            :timeout="timeout"
+            :contact="contact"
+            :class="getSelectedClass(contact)"
+            @click="select(contact)"
+          />
+        </ul>
+        <div class="divider" />
+      </div>
+
+      <!-- schedules -->
+      <div
+        v-for="(schedule, i) in schedules"
+        v-show="visibleSchedules"
+        :key="i"
+      >
+        <ul class="list my-2">
+          <AtomChatContactSchedule :schedule="schedule" />
+        </ul>
+        <div class="divider" />
+      </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.ClientHistoryTable.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="w-full h-full overflow-auto scrollbar">
+    <table class="table bordered text-xs">
+      <thead class="bg-slate-100 dark:bg-slate-800">
+        <th />
+        <th>Canal</th>
+        <th>Operador</th>
+        <th>Data</th>
+        <th>Tabulação</th>
+        <th>Observação</th>
+        <slot name="header" />
+      </thead>
+      <tbody>
+        <tr
+          v-for="(history, i) in histories"
+          :key="i"
+        >
+          <td>
+            <i
+              v-if="isDigital(history)"
+              class="bi bi-eye-fill text-slate-500 px-1 text-base leading-3 cursor-pointer"
+              @click="emit('extract', history)"
+            />
+          </td>
+          <td>
+            <span
+              v-if="isDigital(history)"
+              class="badge badge-solid-primary"
+            >
+              <i class="bi-chat-square-dots-fill" />
+              <b class="ml-1">Digital</b>
+            </span>
+            <span
+              v-else
+              class="badge badge-solid-primary"
+            >
+              <i class="bi-telephone-fill" />
+              <b class="ml-1">Outro</b>
+            </span>
+          </td>
+          <td>{{ history.agent }}</td>
+          <td>{{ history.lastMovementDate?.toLocaleString() }}</td>
+          <td>{{ history.lastTabulation }}</td>
+          <td class="!whitespace-normal">
+            {{ history.observation ?? "" }}
+          </td>
+          <slot
+            name="body"
+            :item="history"
+          />
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { IClientHistories, IClientHistory } from "./types";
+
+// props
+interface IProps {
+  histories: IClientHistories;
+}
+defineProps<IProps>();
+
+// computed
+const isDigital = computed<any>(() => ({ primitive }: any) => {
+  return !!primitive.room_id && primitive.room_id !== ""
+});
+
+// emits
+interface IEmits {
+  (e: "extract", history: IClientHistory): void;
+}
+const emit = defineEmits<IEmits>();
+</script>
+
+<style scoped>
+.table th,
+.table td {
+  padding: 3px 10px;
+  white-space: nowrap;
+}
+</style>

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

@@ -0,0 +1,77 @@
+<template>
+  <figure class="timeline">
+    <figcaption
+      v-for="(history, i) in histories"
+      :key="i"
+      class="checkpoint checkpoint-solid-primary !pr-0"
+      :icon="isDigital(history) ? `&#xF25E;` : `&#xF5B4;`"
+    >
+      <!-- header -->
+      <header class="flex items-center justify-between">
+        <span class="font-medium">
+          {{ history.agent }}
+          <i
+            v-if="isDigital(history)"
+            class="bi bi-eye-fill text-slate-500 px-1 text-base leading-3 cursor-pointer"
+            @click="emit('extract', history)"
+          />
+        </span>
+
+        <span
+          v-if="history.lastTabulation"
+          class="badge badge-soft-secondary font-medium w-fit"
+        > {{ history.lastTabulation }}</span>
+      </header>
+
+      <!-- last date -->
+      <span
+        v-if="history.lastMovementDate"
+        class="text-xs opacity-50"
+      >
+        {{ history.lastMovementDate.toLocaleString() }}
+      </span>
+
+      <article
+        v-if="history.observation"
+        class="accordion accordion-bordered mt-2"
+      >
+        <details class="item">
+          <summary class="text-xs !py-2 !px-4">
+            Observação
+          </summary>
+          <article class="text-xs !py-2 !px-4">
+            {{ history.observation }}
+          </article>
+        </details>
+      </article>
+      <slot
+        name="body"
+        :item="history"
+      />
+    </figcaption>
+  </figure>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { IClientHistories, IClientHistory } from "./types";
+
+// props
+interface IProps {
+  histories: IClientHistories;
+}
+defineProps<IProps>();
+
+// computed
+const isDigital = computed<any>(() => ({ primitive }: any) => {
+  return !!primitive.room_id && primitive.room_id !== ""
+})
+
+// emits
+interface IEmits {
+  (e: "extract", history: IClientHistory): void;
+}
+const emit = defineEmits<IEmits>();
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,88 @@
+<template>
+  <aside class="relative">
+    <!-- field -->
+    <label class="field-group sticky top-0 z-10 bg-white dark:bg-slate-900">
+      <input
+        v-model="search"
+        type="text"
+        placeholder="Pesquise"
+        class="input sidenav-item"
+      >
+      <i class="bi-search addon w-10" />
+    </label>
+    <!-- accordion -->
+    <div class="accordion markdown">
+      <details
+        v-for="({ answer, question, primitive }, i) in getDoubtsBySearch"
+        :key="i"
+        class="item"
+      >
+        <summary v-html="question" />
+        <article class="flex">
+          <div
+            class="flex-1"
+            v-html="answer"
+          />
+          <button
+            class="btn btn-outline-secondary max-h-none ml-2"
+            @click="copy(primitive.answer)"
+          >
+            <i class="bi bi-clipboard" />
+          </button>
+        </article>
+      </details>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { marked } from "marked";
+import { ref, onMounted, computed } from "vue";
+import { IDoubts } from "./types";
+import { useNuxtApp } from "#app";
+
+// props
+interface IProps {
+  doubts: IDoubts;
+}
+const props = defineProps<IProps>();
+
+// computed
+const getDoubtsBySearch = computed<IDoubts>(() => {
+  if (!search.value.trim()) return props.doubts;
+
+  return props.doubts.filter(({ question, answer }) => {
+    return (
+      question.match(new RegExp(search.value, "i")) ||
+      answer.match(new RegExp(search.value, "i"))
+    );
+  });
+});
+
+// data
+const { $emit } = useNuxtApp();
+const search = ref<string>("");
+
+// methods
+function init(): void {
+  for (const doubt of props.doubts) {
+    const { question, answer } = doubt;
+    doubt.primitive = {
+      question,
+      answer,
+    };
+    doubt.question = marked(question);
+    doubt.answer = marked(answer);
+  }
+}
+async function copy(answer: string): Promise<void> {
+  $emit("faq:copy", answer);
+}
+
+// mounted
+onMounted(() => {
+  init();
+});
+</script>
+
+<style></style>

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

@@ -0,0 +1,67 @@
+<template>
+  <form
+    class="form"
+    @submit.prevent="submit"
+  >
+    <slot
+      :get-ref="getRef"
+      :models="models"
+    />
+  </form>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue";
+import { useNuxtApp } from "#app";
+
+interface IProps {
+  submit: Function;
+  deny?: Function;
+  defaults?: { [name: string]: string };
+}
+const props = defineProps<IProps>();
+
+// data
+const { $emit } = useNuxtApp()
+const models = reactive<any>({ ...props.defaults });
+const fields = reactive<any[]>([]);
+
+// methods
+function getRef(ref: any): void {
+  fields.push(ref);
+}
+async function submit(): Promise<void> {
+  if (!validate()) {
+    await deny();
+    return;
+  }
+
+  await props.submit(models);
+}
+function validate(): boolean {
+  let valid = true;
+
+  for (const field of fields) {
+    if (!field.validateAndSetState()) {
+      valid = false;
+    }
+  }
+
+  return valid;
+}
+async function deny(): Promise<void> {
+  if (props.deny) await props.deny();
+}
+function append(values: any): void {
+  Object.assign(models, values);
+  $emit("form:append", models)
+}
+function reset(): void {
+  for (const field in models) delete models[field];
+}
+
+// expose
+defineExpose({ submit, append, reset, validate });
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,112 @@
+<template>
+  <OrganismForm
+    v-slot="{ models, getRef }"
+    ref="form"
+    :submit="submit"
+    :deny="deny"
+    :defaults="defaults"
+    class="form"
+  >
+    <div
+      v-for="(field, i) in mailing"
+      :key="i"
+      class="flex-auto"
+      :disabled="field.disabled"
+    >
+      <MoleculeFieldGroup
+        :ref="getRef"
+        :label="field.label"
+        :rules="[getRulesByField(models[field.name], field)]"
+      >
+        <!-- ddi -->
+        <!-- <MoleculeDropdownDDI
+          v-if="field.type === EFieldTypes.phone"
+          v-model="models[field.name + '_DDI']"
+          :phone="models[field.name]"
+          class="addon"
+        /> -->
+
+        <!-- field -->
+        <!-- :options="field.options"
+        :disabled="field.disabled"
+        :maxlength="field.maxlength" -->
+        <AtomField
+          v-model="models[field.name]"
+          :type="field.type"
+          :field="field"
+          @blur.capture="
+            persist(field.name, models[field.name]);
+            routine({ models, field });
+          "
+        />
+      </MoleculeFieldGroup>
+    </div>
+  </OrganismForm>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { IMailing, IField, IRule, EFieldTypes } from "./types";
+import OrganismForm from "./Organism.Form.vue";
+
+interface IProps {
+  mailing: IMailing;
+  submit: Function;
+  deny?: Function;
+  persist?: Function;
+  routine?: Function;
+
+  defaults?: { [name: string]: string };
+}
+const props = defineProps<IProps>();
+
+// computed
+const getRulesByField = computed<Function>(
+  () =>
+    (value: string, { regex, required, messages, type }: IField): IRule => {
+      const isPhoneField = type === EFieldTypes.phone;
+      const isBrazilianPhone = /^\+55[0-9]/.test(value);
+      const errorMessage = messages?.error || "";
+
+      if (isPhoneField && isBrazilianPhone) {
+        regex = /^\+55[0-9]{10,11}$/;
+      }
+
+      return buildRule({ value, regex, required, errorMessage });
+    }
+);
+
+// data
+const form = ref<InstanceType<typeof OrganismForm> | null>(null);
+
+// methods
+function buildRule({ value, regex, required, errorMessage }: any): IRule {
+  return () => {
+    if (value) return regex.test(value) || errorMessage;
+    if (required) return "Campo obrigatório!";
+
+    return true;
+  };
+}
+
+function persist(label: string, value: any) {
+  if (!props.persist) return;
+
+  props.persist({ [label]: value });
+}
+
+function routine({ models, field }: any) {
+  if (!props.routine) return;
+
+  props.routine({ models, field });
+}
+
+// expose
+defineExpose({ form });
+</script>
+
+<style scoped>
+.field-group {
+  position: relative;
+}
+</style>

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

@@ -0,0 +1,79 @@
+<template>
+  <header
+    class="w-full h-16 fixed flex justify-between items-center text-white py-2 px-4 z-20 bg-slate-800"
+  >
+    <!-- info -->
+    <div class="flex items-center">
+      <!-- logo -->
+      <figure
+        class="h-full flex justify-center items-center border-r-2 mr-4 pr-3 border-slate-700"
+      >
+        <img
+          src="../public/192x192.png"
+          class="w-8 max-sm:hidden"
+          alt="ContactStudio Logo"
+        >
+        <i
+          v-if="navIsVisible"
+          class="bi-x-lg w-6 text-xl sm:hidden"
+        />
+        <i
+          v-if="!navIsVisible"
+          id="navopen"
+          class="bi-text-left w-6 text-2xl sm:hidden"
+          @click="showNav"
+        />
+      </figure>
+
+      <!-- user -->
+      <header>
+        <p
+          class="overflow-hidden text-ellipsis text-sm sm:max-w-[350px] max-w-[150px]"
+          v-text="user.nickname"
+        />
+
+        <p class="text-xs opacity-50">
+          {{ config.public.PROJECT }}
+          [{{ config.public.VERSION }}]
+        </p>
+      </header>
+    </div>
+
+    <!-- slots -->
+    <div class="flex">
+      <slot />
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { IUser } from "./types";
+import { useRuntimeConfig, useNuxtApp } from "#app";
+
+// props
+interface IProps {
+  user: IUser;
+}
+defineProps<IProps>();
+
+// app
+const { $emit, $listen } = useNuxtApp();
+
+// data
+const config = useRuntimeConfig();
+const navIsVisible = ref<boolean>(false);
+
+// methods
+function showNav(): void {
+  navIsVisible.value = true;
+  $emit("nav:show");
+}
+
+// emits
+$listen("nav:hide", () => {
+  navIsVisible.value = false;
+});
+</script>
+
+<style scoped></style>