contactstudiocstools 1.0.224

package/README.md

@@ -0,0 +1,94 @@
+<!--
+Get your module up and running quickly.
+
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: CS Tools
+- Package name: @contactstudio/cstools
+- Description: Nuxt Tools Module for ContactStudio
+-->
+
+# CS Tools
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+Nuxt Tools Module for ContactStudio for doing amazing things.
+
+- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+  <!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/@contactstudio/cstools?file=playground%2Fapp.vue) -->
+  <!-- - [📖 &nbsp;Documentation](https://example.com) -->
+
+## Features
+
+<!-- Highlight some of the features your module provide here -->
+
+- ⛰ &nbsp;Foo
+- 🚠 &nbsp;Bar
+- 🌲 &nbsp;Baz
+
+## Quick Setup
+
+1. Add `@contactstudio/cstools` dependency to your project
+
+```bash
+# Using pnpm
+pnpm add -D @contactstudio/cstools
+
+# Using yarn
+yarn add --dev @contactstudio/cstools
+
+# Using npm
+npm install --save-dev @contactstudio/cstools
+```
+
+2. Add `@contactstudio/cstools` to the `modules` section of `nuxt.config.ts`
+
+```js
+export default defineNuxtConfig({
+  modules: ["@contactstudio/cstools"],
+});
+```
+
+That's it! You can now use CS Tools in your Nuxt app ✨
+
+## Development
+
+```bash
+# Watch generate CSS
+npx tailwindcss -o ./src/runtime/index.css --minify --watch
+
+# Install dependencies
+npm install
+
+# Generate type stubs
+npm run dev:prepare
+
+# Develop with the playground
+npm run dev
+
+# Build the playground
+npm run dev:build
+
+# Run ESLint
+npm run lint
+
+# Run Vitest
+npm run test
+npm run test:watch
+
+# Release new version
+npm run release
+```
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/@contactstudio/cstools/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://npmjs.com/package/@contactstudio/cstools
+[npm-downloads-src]: https://img.shields.io/npm/dm/@contactstudio/cstools.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://npmjs.com/package/@contactstudio/cstools
+[license-src]: https://img.shields.io/npm/l/@contactstudio/cstools.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://npmjs.com/package/@contactstudio/cstools
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -0,0 +1,7 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { ModuleOptions, _default as default };

package/dist/module.json

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

package/dist/module.mjs

@@ -0,0 +1,72 @@
+import { defineNuxtModule, createResolver, addPlugin, addComponent } from '@nuxt/kit';
+import { fileURLToPath } from 'url';
+import { readdirSync } from 'fs';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "@contactstudio/cstools",
+    configKey: "CSTools"
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {},
+  setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
+    const componentsDir = `${runtimeDir}/components`;
+    addPlugin(resolve("runtime/plugins/emitter"));
+    addPlugin(resolve("runtime/plugins/clickOutside"));
+    nuxt.options.css.push(`${runtimeDir}/index.css`);
+    setAliases(nuxt);
+    setCDNs(nuxt);
+    setLibPublic(nuxt);
+    const files = readdirSync(componentsDir);
+    for (const file of files) {
+      addComponent({
+        name: getFileName(file),
+        filePath: resolve(componentsDir, file)
+      });
+    }
+  }
+});
+function getFileName(file) {
+  const parts = file.split(".");
+  parts.pop();
+  return parts.join("");
+}
+function setCDNs(nuxt) {
+  const MINDBEUI_VERSION = nuxt.options.runtimeConfig.public.MINDBEUI_VERSION;
+  nuxt.options.app.head.link?.push({
+    rel: "stylesheet",
+    href: `https://cdn.jsdelivr.net/gh/lipis/flag-icons@6.11.0/css/flag-icons.min.css`
+  });
+  nuxt.options.app.head.link?.push({
+    rel: "stylesheet",
+    href: `https://unpkg.com/@contactstudio/mindbeui@${MINDBEUI_VERSION}/dist/mindbeui.css`
+  });
+  nuxt.options.app.head.script?.push({
+    src: `https://unpkg.com/@contactstudio/mindbeui@${MINDBEUI_VERSION}/dist/mindbeui.js`
+  });
+}
+function setAliases(nuxt) {
+  nuxt.options.alias = {
+    ...nuxt.options.alias,
+    types: fileURLToPath(
+      new URL("./runtime/components/types", import.meta.url)
+    ),
+    components: fileURLToPath(new URL("./runtime/components", import.meta.url)),
+    public: fileURLToPath(new URL("./runtime/public", import.meta.url))
+  };
+}
+function setLibPublic(nuxt) {
+  const { resolve } = createResolver(import.meta.url);
+  nuxt.hook("nitro:config", async (nitroConfig) => {
+    nitroConfig.publicAssets || (nitroConfig.publicAssets = []);
+    nitroConfig.publicAssets.push({
+      dir: resolve("./runtime/public"),
+      maxAge: 60 * 60 * 24 * 365
+      // 1 year
+    });
+  });
+}
+
+export { module as default };

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

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="alert"
+    :class="[{ visible }, getType]"
+  >
+    {{ message }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+
+// props
+interface IProps {
+  timeout?: number
+}
+const props = defineProps<IProps>()
+
+// computed
+const getType = computed<string>(() => {
+  return `alert-${type.value}`
+})
+
+// data
+const visible = ref<boolean>(false);
+const type = ref<string>("")
+const message = ref<string>("")
+
+// methods
+function show(tp: string, msg: string) {
+  if (visible.value) return;
+
+  type.value = tp
+  message.value = msg
+  visible.value = true;
+
+  setTimeout(() => {
+    visible.value = false;
+  }, props.timeout ?? 5000);
+}
+
+// expose
+defineExpose({ show });
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,37 @@
+<template>
+  <div />
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUpdated } from "vue"
+import { useCookie, useNuxtApp } from "#app";
+
+// props
+interface IProps {
+  logout: Function
+}
+const props = defineProps<IProps>()
+
+// hooks
+onMounted(update)
+onUpdated(update)
+
+// emits
+const { $listen } = useNuxtApp();
+$listen("auth:logout", logout)
+$listen("auth:update", update)
+
+// methods
+function update(): void {
+  const session = useCookie("cssession");
+
+  if (!session.value) {
+    props.logout()
+  }
+}
+function logout(): void {
+  props.logout()
+}
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,18 @@
+<template>
+  <div class="w-full flex flex-col justify-center items-center text-center p-10">
+    <img
+      src="../public/chat.svg"
+      class="max-w-md -mt-44 -mb-10 -ml-5"
+    >
+    <h4 class="text-lg mt-5 mb-1 text-primary font-medium">
+      Nenhuma conversa selecionada
+    </h4>
+    <p class="opacity-50">
+      Para iniciar o atendimento, selecione uma conversa do menu ao lado
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

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

@@ -0,0 +1,28 @@
+<template>
+  <div class="w-full h-screen relative flex flex-col md:flex-row overflow-hidden text-black dark:text-white">
+    <article class="flex-1 p-16">
+      <p class="font-bold mb-16 sm:mb-40">
+        404 Not Found
+      </p>
+      <h1 class="text-8xl mb-8 font-bold">
+        Ohh não...
+      </h1>
+      <p class="text-lg opacity-50 mb-16">
+        Desculpe, infelizmente a página não pode ser encontrada.
+      </p>
+      <button
+        class="btn btn-outline-secondary text-base max-h-none px-6"
+        @click="$router.push('/')"
+      >
+        Página inicial
+      </button>
+    </article>
+    <aside class="flex">
+      <img src="../public/404.svg">
+    </aside>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

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

@@ -0,0 +1,18 @@
+<template>
+  <article class="flex flex-col justify-center items-center text-center dark:text-white">
+    <h4 class="text-xl text-warn font-medium mb-1">
+      Área restrita.
+    </h4>
+    <p class="opacity-50 text-sm mb-10">
+      Você não possui permissão para acessar essa página
+    </p>
+    <img
+      src="../public/security.svg"
+      class="w-full max-w-sm -mt-10"
+    >
+  </article>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

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

@@ -0,0 +1,26 @@
+<template>
+  <ul class="breadcrumbs">
+    <li
+      v-for="({ label, disabled, path }, i) in pages"
+      :key="i"
+      :disabled="disabled"
+      class="breadcrumb"
+    >
+      <NuxtLink :to="path">
+        {{ label }}
+      </NuxtLink>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { IPages } from "./types";
+
+// props
+interface IProps {
+  pages: IPages;
+}
+defineProps<IProps>();
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,136 @@
+<template>
+  <!-- contact -->
+  <li class="item flex items-center max-h-none !px-3 !rounded-none">
+    <!-- avatar -->
+    <figure
+      :class="[getStatusClass]"
+      :notifications="contact.notifications"
+      class="w-10 h-10 avatar avatar-soft-secondary"
+    >
+      <img
+        v-if="contact.avatar"
+        :src="contact.avatar"
+        class="rounded-md"
+      >
+      <i
+        v-else
+        class="bi-person-fill text-xl"
+      />
+    </figure>
+
+    <!-- info -->
+    <div class="flex-1 mx-3 w-24">
+      <p class="w-full overflow-hidden text-ellipsis whitespace-nowrap py-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>
+      </p>
+      <!-- typing -->
+      <p
+        v-if="contact.typing"
+        class="text-2xs text-success"
+      >
+        Digitando...
+      </p>
+      <!-- message -->
+      <div
+        v-else
+        class="markdown h-4 text-2xs opacity-50 w-full overflow-hidden text-ellipsis whitespace-nowrap"
+        v-html="marked(props.contact.message ?? '')"
+      />
+    </div>
+
+    <!-- date message -->
+    <p
+      v-if="!expirated"
+      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 mr-2"
+    >
+      <div class="w-5 h-5 rounded-full bg-error animate-ping absolute" />
+
+      <i class="bi bi-exclamation-circle-fill text-error text-base" />
+    </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;
+}
+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;
+}
+</style>

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

@@ -0,0 +1,87 @@
+<template>
+  <!-- schedule -->
+  <li class="flex flex-wrap gap-2 items-center max-h-none !px-3 !rounded-none">
+    <!-- avatar -->
+    <figure class="w-10 h-10 avatar avatar-soft-schedule [&::after]:!hidden">
+      <img
+        v-if="schedule.avatar"
+        :src="schedule.avatar"
+        class="rounded-md"
+      >
+      <i
+        v-else
+        class="bi bi-chat-dots-fill text-xl"
+      />
+    </figure>
+
+    <!-- info -->
+    <div class="flex-1 w-24">
+      <p class="w-full overflow-hidden text-ellipsis whitespace-nowrap">
+        <span class="text-xs">
+          {{ schedule.identifier }}
+        </span>
+      </p>
+      <p class="markdown h-4 text-2xs opacity-50 w-full overflow-hidden text-ellipsis whitespace-nowrap">
+        {{ schedule.date.toLocaleString() }}
+      </p>
+    </div>
+
+    <div
+      v-if="slotsExists"
+      class="w-full accordion accordion-bordered"
+    >
+      <details class="item">
+        <summary class="text-xs">
+          Mais Detalhes
+        </summary>
+        <article>
+          <table class="w-full">
+            <tr
+              v-for="(value, field) in schedule.slots"
+              v-show="value"
+              :key="field"
+            >
+              <td class="pt-2 text-xs">
+                {{ field }}
+              </td>
+              <td
+                class="pt-2"
+                align="right"
+              >
+                <span class="badge badge-soft-secondary">{{ value }}</span>
+              </td>
+            </tr>
+          </table>
+        </article>
+      </details>
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { IPortfolioSchedule } from "./types";
+
+// props
+interface IProps {
+    schedule: IPortfolioSchedule;
+}
+const props = defineProps<IProps>();
+
+// computed
+const slotsExists = computed<boolean>(() => {
+    if (!props.schedule.slots) return false;
+    return !!Object.entries(props.schedule.slots).length;
+});
+</script>
+
+<style scoped>
+.avatar-soft-schedule {
+    background-color: #f1f5f9;
+    color: #7E22CE;
+}
+.dark .avatar-soft-schedule {
+    background-color: #1e293b!important;
+    color: #A855F7;
+}
+</style>

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

@@ -0,0 +1,25 @@
+<template>
+  <div class="flex justify-between opacity-50">
+    <span class="text-2xs mr-10">
+      {{ message.who }}
+    </span>
+    <span class="text-2xs">
+      {{ getTimeByDate(message.date) }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getTimeByDate, IChatMessage } from "./types";
+// props
+interface IProps {
+  message: IChatMessage;
+}
+defineProps<IProps>();
+</script>
+
+<style scoped>
+.text-2xs {
+  font-size: 0.7rem;
+}
+</style>

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

@@ -0,0 +1,67 @@
+<template>
+  <label
+    class="flex items-center h-5 w-10 rounded-full cursor-pointer border bg-gray-200 border-gray-400 dark:border-gray-600 dark:bg-gray-700"
+    @click="change"
+  >
+    <figure
+      :class="{ 'translate-x-full': dark }"
+      class="rounded-full w-1/2 h-full flex justify-center items-center select-none transition-transform bg-white dark:bg-gray-900"
+    >
+      <!-- darkmode -->
+      <i
+        v-if="dark"
+        class="bi bi-moon-fill leading-none"
+      />
+
+      <!-- lightmode -->
+      <i
+        v-else
+        class="bi bi-sun leading-none"
+      />
+    </figure>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { useNuxtApp, useCookie } from "#app";
+
+// app
+const { $listen } = useNuxtApp();
+
+// data
+const dark = useCookie<boolean>("darkmode", {
+  default: () => false,
+});
+
+// methods
+function change(): void {
+  dark.value = !dark.value;
+
+  update();
+}
+function update(): void {
+  if (!process.client) return;
+
+  if (dark.value) {
+    document.body.classList.add("dark");
+    return;
+  }
+
+  document.body.classList.remove("dark");
+}
+
+update();
+
+// emits
+$listen("darkmode:change", change);
+</script>
+
+<style scoped>
+.right {
+  transform: translateX(100%);
+}
+
+i {
+  font-size: 9px;
+}
+</style>