vue-intergrall-plugins 1.1.90 → 1.2.0

package/src/lib-components/Templates/TemplateSingle.vue

@@ -1,478 +1,478 @@
-<template>
-  <div class="ts-container">
-    <div class="ts-content">
-      <div v-for="(component, cIndex) in template.components" :key="cIndex"
-        :class="`${component.type == 'footer' ? 'order-1 custom-box-shadow-bottom' : ''}${template.components.length == 1 ? 'custom-box-shadow-bottom' : ''}`">
-        <header v-if="component.type === 'header'"
-          :class="`${template.components.length == 1 ? 'border-radius-5 custom-border-gray' : ''}`"
-          id="template_header">
-          <div v-for="(param, pIndex) in component.parameters" :key="pIndex">
-            <template v-if="param.type === 'text'">
-              <div v-if="regexVars.test(param.text)" v-html="param.text.replace(
-                regexVars,
-                `<div class='ts-content__var'>${htmlInputString}${varListValues}</div>`
-              )
-                "></div>
-              <p v-else v-html="param.text"></p>
-            </template>
-            <div v-else-if="param.type == 'image'" class="ts-image-type">
-              <input class="d-none" type="file" :ref="`ts-input-header-${pIndex}`" :accept="acceptedExtensions"
-                @change="fileUpload($event)" />
-              <template v-if="headerFiles[0]">
-                <fa-icon :icon="['fas', headerFiles[0].current_icon]" :class="`color-${headerFiles[0].current_color}`"
-                  @click="triggerInputFile(`header-${pIndex}`)" v-tippy="{ placement: 'right' }" :content="headerFiles[0].image_preview ?
-                    `<div class='custom-tooltip-image'>
-                      <img src='${headerFiles[0].image_preview}' alt='${headerFiles[0].name}' />
-                    </div>`
-                    : headerFiles[0].name
-                    " />
-              </template>
-              <fa-icon v-else class="select-image" :icon="['fas', 'image']"
-                @click="triggerInputFile(`header-${pIndex}`)" v-tippy="{ placement: 'right' }"
-                :content="`Selecionar anexo`" />
-            </div>
-            <div v-else-if="param.type == 'document'" class="ts-image-type">
-              <input class="d-none" type="file" :ref="`ts-input-header-${pIndex}`" :accept="acceptedExtensions"
-                @change="fileUpload($event)" />
-              <template v-if="headerFiles[0]">
-                <fa-icon :icon="['fas', headerFiles[0].current_icon]" :class="`color-${headerFiles[0].current_color}`"
-                  @click="triggerInputFile(`header-${pIndex}`)" v-tippy="{ placement: 'right' }" :content="headerFiles[0].name
-                    " />
-              </template>
-              <fa-icon v-else class="select-image" :icon="['fas', 'file-alt']"
-                @click="triggerInputFile(`header-${pIndex}`)" v-tippy="{ placement: 'right' }"
-                :content="`Selecionar anexo`" />
-            </div>
-            <div v-else-if="param.type == 'video'" class="ts-image-type">
-              <input class="d-none" type="file" :ref="`ts-input-header-${pIndex}`" :accept="acceptedExtensions"
-                @change="fileUpload($event)" />
-              <template v-if="headerFiles[0]">
-                <fa-icon :icon="['fas', headerFiles[0].current_icon]" :class="`color-${headerFiles[0].current_color}`"
-                  @click="triggerInputFile(`header-${pIndex}`)" v-tippy="{ placement: 'right' }" :content="headerFiles[0].name
-                    " />
-              </template>
-              <fa-icon v-else class="select-image" :icon="['fas', 'video']" style="font-size: 19.2px"
-                @click="triggerInputFile(`header-${pIndex}`)" v-tippy="{ placement: 'right' }"
-                :content="`Selecionar anexo`" />
-            </div>
-          </div>
-        </header>
-        <section v-if="component.type === 'body'"
-          :class="`${template.components.length == 1 ? 'border-radius-5 custom-border-gray' : ''} ${!hasButtonOrFooterComponent ? 'custom-footer-style custom-box-shadow-bottom custom-border-gray' : ''}`"
-          id="template_body">
-          <div v-for="(param, pIndex) in component.parameters" :key="pIndex">
-            <template v-if="param.type === 'text'">
-              <div v-if="regexVars.test(param.text)" v-html="param.text.replace(
-                regexVars,
-                `<div class='ts-content__var'>${htmlInputString}${varListValues}</div>`
-              )
-                "></div>
-              <p v-else v-html="param.text"></p>
-            </template>
-          </div>
-        </section>
-        <section v-if="component.type == 'button'"
-          :class="`${template.components.length == 1 ? 'border-radius-5 custom-border-gray' : ''} ${!hasFooterComponent ? 'custom-footer-style custom-box-shadow-bottom' : ''}`"
-          id="template_buttons">
-          <div v-for="(param, pIndex) in component.parameters" :key="pIndex" class="ts-button">
-            <p v-if="param.text" v-html="param.text"></p>
-          </div>
-        </section>
-        <footer v-if="component.type == 'footer'"
-          :class="`${template.components.length == 1 ? 'border-radius-5 custom-border-gray' : ''}`"
-          id="template_footer">
-          <div v-for="(param, pIndex) in component.parameters" :key="pIndex">
-            <small v-if="param.type == 'text'" v-html="param.text"> </small>
-          </div>
-        </footer>
-      </div>
-    </div>
-
-    <div class="container-btns">
-      <div class="tg-btn" :class="{ 'small-btn': iconButton }" v-if="hasButton">
-        <button @click="$emit('click-trigger')" ref="template-single-button">
-          <template v-if="!iconButton">
-            <fa-icon :icon="['fas', 'paper-plane']" />
-            {{ dictionary.btn_contatar_clientes }}
-          </template>
-          <fa-icon v-else :icon="['fas', 'paper-plane']" />
-        </button>
-
-      </div>
-
-      <div class="tg-btn btn-red" :class="{ 'small-btn': iconButton }" v-if="hasSecondaryButton">
-        <button v-if="hasSecondaryButton" @click="$emit('dispatch-clients-with-bot')"
-          ref="template-single-button-secondary">
-          <template v-if="!iconButton">
-            <fa-icon :icon="['fas', 'paper-plane']" />
-            {{ dictionary.btn_contatar_clientes_com_bot }}
-          </template>
-          <fa-icon v-else :icon="['fas', 'paper-plane']" />
-        </button>
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<style>
-.btn-red button {
-  background-color: red;
-}
-
-.btn-red svg {
-  color: rgb(182, 0, 0);
-}
-
-.container-btns {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-}
-</style>
-
-<script>
-export default {
-  data() {
-    return {
-      varValues: {},
-      regexVars: /{{var_\d}}/g,
-      lastVar: 0,
-      htmlInputString: `<input type='text' class='input-var input-var-${this.identifier}' autocomplete='off' />`,
-      varListValues: "",
-      acceptedExtensions: "audio/aac, audio/mp4, audio/mpeg, audio/amr, audio/ogg, text/plain, application/pdf, application/vnd.ms-powerpoint, application/msword, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.openxmlformats-officedocument.spreasheetml.sheet, image/jpeg, image/png, video/mp4, video/3gp, image/webp",
-      headerFiles: [],
-    };
-  },
-  props: {
-    template: {
-      type: Object,
-      required: true,
-    },
-    hasButton: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    hasSecondaryButton: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    allVariables: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    iconButton: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    identifier: {
-      type: String,
-      required: true
-    },
-    dictionary: {
-      type: Object,
-      required: true
-    }
-  },
-  computed: {
-    hasFooterComponent() {
-      if (!this.template.components || !this.template.components.length) return false
-      const types = []
-      this.template.components.forEach(({ type }) => types.push(type))
-      if (types.includes('footer')) return true
-      return false
-    },
-    hasButtonOrFooterComponent() {
-      if (!this.template.components || !this.template.components.length) return false
-      const types = []
-      this.template.components.forEach(({ type }) => types.push(type))
-      if (types.includes('button')) return true
-      return this.hasFooterComponent
-    },
-  },
-  created() {
-    this.$root.$refs[`template-single-${this.identifier}`] = this
-  },
-  mounted() {
-    if (this.allVariables) this.getListOpts()
-    this.setInputs();
-    this.setImageVar(false)
-  },
-  updated() {
-    this.lastVar = 0;
-    this.setInputs();
-
-    const allInputs = document.querySelectorAll(`.input-var-${this.identifier}`);
-    allInputs.forEach(input => {
-      input.dispatchEvent(new Event('focus'))
-      input.dispatchEvent(new Event('blur'))
-    })
-  },
-  methods: {
-    handleInitialFocus() {
-      const allInputs = document.querySelectorAll(`.input-var-${this.identifier}`);
-      if (allInputs.length) allInputs[0].focus()
-      else if (this.$refs["template-single-button"]) this.$refs["template-single-button"].focus()
-    },
-    limparInputVar() {
-      const allInputs = document.querySelectorAll(`.input-var-${this.identifier}`);
-      allInputs.forEach((input) => {
-        input.focus();
-        input.value = "";
-        input.blur();
-        this.setVar({ target: input }, input.id.replace(/[{}]+/g, ''));
-      })
-      this.setImageVar(false)
-    },
-    getListOpts() {
-      this.varListValues =
-        `<ul class="ts-dropdown">
-        <li> nome </li>
-        ${this.allVariables ? '<li> telefone </li>' : ''}
-      </ul>`
-    },
-    fileUpload(event) {
-      try {
-        const allFiles = event.target.files ? event.target.files : event.dataTransfer.files ? event.dataTransfer.files : false
-        if (!allFiles || !allFiles.length) return this.setImageVar(false)
-        if (allFiles.length > 1) {
-          this.$toasted.global.defaultInfo({ msg: `Limite de 1 arquivo por vez` })
-          return this.setImageVar(false)
-        }
-        const file = allFiles[0]
-        const { type, name } = file
-        const validTypes = ['audio/aac', 'audio/mp4', 'audio/mpeg', 'audio/amr', 'audio/ogg', 'text/plain', 'application/pdf', 'application/vnd.ms-powerpoint', 'application/msword', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.openxmlformats-officedocument.spreasheetml.sheet', 'image/jpeg', 'image/png', 'video/mp4', 'video/3gp', 'image/webp']
-        if (!validTypes.includes(type)) {
-          this.$toasted.global.defaultInfo({ msg: `(${type}) ${this.dictionary.msg_arquivo_invalido}` })
-          return this.setImageVar(false)
-        }
-        const returnArrType = str => {
-          const arr = []
-          validTypes.forEach(currentType => {
-            if (currentType.indexOf(str) > -1) arr.push(currentType)
-          })
-          return arr
-        }
-
-        const imageTypes = returnArrType('image/')
-        const docTypes = returnArrType('application/')
-        const audioTypes = returnArrType('audio/')
-        const videoTypes = returnArrType('video/')
-        const isPdf = type.indexOf('application/pdf') > -1
-
-        let sizeInBytes = 0
-        Array.from(allFiles).forEach(file => sizeInBytes += file.size)
-        const sizeInMb = parseFloat((sizeInBytes / (1024 * 1024)).toFixed(2))
-        if (sizeInMb == 0 && sizeInBytes == 0) {
-          this.$toasted.global.defaultInfo({ msg: this.dictionary.msg_arquivo_invalido })
-          return this.setImageVar(false)
-        }
-        const max = imageTypes.includes(type) ? 5 : 15
-        if (sizeInMb >= max) {
-          this.$toasted.global.defaultInfo({ msg: `Limite de ${max} MB por arquivo` })
-          return this.setImageVar(false)
-        }
-
-        const fileReader = new FileReader()
-        let current_icon = 'file-alt', current_color = 'blue', setValues = true
-        if (imageTypes.includes(type)) {
-          setValues = false
-          fileReader.readAsDataURL(file)
-          fileReader.onload = () => {
-            const image_preview = fileReader.result
-            current_icon = 'image'
-            current_color = 'purple'
-            this.headerFiles[0] = { file, image_preview, current_icon, current_color, name }
-            this.$forceUpdate()
-            this.setImageVar(file)
-          }
-        } else if (docTypes.includes(type) && isPdf) {
-          current_icon = 'file-pdf'
-          current_color = 'red'
-        } else if (audioTypes.includes(type)) {
-          current_icon = 'microphone'
-          current_color = 'black'
-        } else if (videoTypes.includes(type)) {
-          current_icon = 'video',
-            current_color = 'black'
-        }
-
-        if (setValues) {
-          this.headerFiles[0] = { file, current_icon, current_color, name }
-          this.$forceUpdate()
-          this.setImageVar(file)
-        }
-      } catch (error) {
-        console.error("Erro file upload: ", error)
-      }
-    },
-    triggerInputFile(origin) {
-      if (this.$refs[`ts-input-${origin}`]) {
-        const elem = this.$refs[`ts-input-${origin}`][0] ? this.$refs[`ts-input-${origin}`][0] : this.$refs[`ts-input-${origin}`]
-        elem && elem.click()
-      }
-    },
-    setInputs() {
-      let qtdInputs = 0
-      const header = document.querySelector("#template_header");
-      const body = document.querySelector("#template_body");
-      const footer = document.querySelector("#template_footer");
-
-      let hasText = false
-      if (header !== null) {
-        header.querySelectorAll(`.input-var-${this.identifier}`).forEach((input) => { this.setEvent(input) })
-        qtdInputs += header.querySelectorAll(`.input-var-${this.identifier}`).length
-        if (qtdInputs > 0 && header.innerText) hasText = true
-      }
-      if (this.lastVar === 0) this.lastVar += 1
-      if (body !== null) {
-        body.querySelectorAll(`.input-var-${this.identifier}`).forEach((input) => { this.setEvent(input) });
-        qtdInputs += body.querySelectorAll(`.input-var-${this.identifier}`).length
-        if (qtdInputs > 0 && body.innerText) hasText = true
-      }
-      if (footer !== null) {
-        footer.querySelectorAll(`.input-var-${this.identifier}`).forEach((input) => { this.setEvent(input) });
-        qtdInputs += footer.querySelectorAll(`.input-var-${this.identifier}`).length
-        if (qtdInputs > 0 && footer.innerText) hasText = true
-      }
-
-      if (qtdInputs === 1 && !hasText) {
-        document.querySelector(`.input-var-${this.identifier}`).parentElement.style.width = "100%"
-        document.querySelector(`.input-var-${this.identifier}`).style.width = "100%"
-      } else if (qtdInputs === 0) {
-        this.$emit("set-vars", this.template)
-      }
-    },
-    setEvent(input) {
-      const varList = input.nextSibling
-
-      const currentInstance = this
-
-      input.setAttribute("placeholder", `{{var_${this.lastVar}}}`);
-      input.setAttribute("id", `{{var_${this.lastVar}}}`);
-      input.addEventListener("input", (event) => {
-        this.setVar(event, `var_${this.lastVar}`, true);
-        if (varList) varList.classList.remove("visible")
-      });
-      input.addEventListener("focus", () => {
-        input.classList.remove("invalid");
-        input.classList.add("active");
-        if (varList) {
-          const handleNextFocus = () => {
-            const allInputs = document.querySelectorAll(`.input-var-${currentInstance.identifier}`)
-            let stop = false
-            if (allInputs.length) {
-              allInputs.forEach(elem => {
-                if (!elem.value && !stop) {
-                  stop = true
-                  elem.focus()
-                }
-              })
-            }
-            if (!stop && this.$refs["template-single-button"]) this.$refs["template-single-button"].focus()
-          }
-
-          for (let i = 0; i < varList.children.length; i++) {
-            varList.children[i].addEventListener("click", function () {
-              input.value = `[${this.innerText}]`
-              input.classList.add("active")
-              input.dispatchEvent(new Event('input'))
-              handleNextFocus()
-            })
-          }
-
-          const containerGeral = document.querySelector(".tg-container")
-          varList.classList.add("visible")
-          const maxBottom = containerGeral.getBoundingClientRect().bottom,
-            currentBottom = varList.getBoundingClientRect().bottom
-          if (currentBottom > maxBottom) {
-            varList.style.top = `-${varList.getBoundingClientRect().height}px`
-            varList.style.borderTop = `1px solid currentColor`
-          }
-        }
-      });
-      input.addEventListener("blur", () => {
-        if (input.value) {
-          if (this.isValid(input.value)) {
-            input.classList.add("active");
-          } else {
-            input.classList.add("invalid");
-          }
-        } else {
-          input.classList.remove("invalid");
-          input.classList.remove("active");
-        }
-        if (varList) varList.classList.remove("visible")
-      });
-      input.addEventListener("keydown", (event) => {
-        if (event.keyCode == 13 && this.hasButton) this.$emit("click-trigger");
-      });
-      this.lastVar += 1;
-    },
-    toggleClass(index) {
-      const elem = this.$refs[`float-container-${index}`]
-        ? this.$refs[`float-container-${index}`][0]
-        : false;
-      if (elem) {
-        if (elem.children[1] && elem.children[1].value) {
-          elem.classList.add("active");
-        } else {
-          elem.classList.toggle("active");
-        }
-      }
-    },
-    isValid(textValue) {
-      const regex = {
-        htmlTags: /<\/?[\d\w\s=\-:\.\/\'\";]+>/gi,
-        enter: /\n/g,
-        consecutiveSpaces: /\s{3,}/g
-      }
-      const value = textValue ? textValue.trim("") : "";
-      if (!value.length) return false
-
-      let isValueValid = true
-      for (let key in regex) {
-        if (!isValueValid) return isValueValid
-        if (regex[key].test(value)) isValueValid = false
-      }
-
-      return isValueValid
-    },
-    setImageVar(file) {
-      this.$emit("set-file-var", file)
-      if (!file) {
-        this.headerFiles = []
-        return this.$forceUpdate()
-      } else {
-        if (this.lastVar == 0) return this.$emit("set-vars", this.template)
-        if (Object.keys(this.varValues).length) return this.$emit("set-vars", this.varValues)
-        this.$nextTick(() => this.handleInitialFocus())
-      }
-    },
-    setVar(event, key, notificar) {
-      if (event && event.target) {
-        key = event.target.id.replace(/[{}]+/g, '')
-        const value = event.target.value ? event.target.value.trim("") : ""
-        if (this.isValid(value)) {
-          this.varValues[key] = value;
-        } else {
-          if (notificar)
-            if (!document.querySelector(".toasted.toasted-primary.error"))
-              this.$toasted.global.defaultError({
-                msg: this.dictionary.template_msg_variavel_invalida,
-              });
-
-          delete this.varValues[key];
-        }
-        return this.$emit("set-vars", this.varValues);
-      }
-    },
-  }
-};
-</script>
+<template>
+  <div class="ts-container">
+    <div class="ts-content">
+      <div v-for="(component, cIndex) in template.components" :key="cIndex"
+        :class="`${component.type == 'footer' ? 'order-1 custom-box-shadow-bottom' : ''}${template.components.length == 1 ? 'custom-box-shadow-bottom' : ''}`">
+        <header v-if="component.type === 'header'"
+          :class="`${template.components.length == 1 ? 'border-radius-5 custom-border-gray' : ''}`"
+          id="template_header">
+          <div v-for="(param, pIndex) in component.parameters" :key="pIndex">
+            <template v-if="param.type === 'text'">
+              <div v-if="regexVars.test(param.text)" v-html="param.text.replace(
+                regexVars,
+                `<div class='ts-content__var'>${htmlInputString}${varListValues}</div>`
+              )
+                "></div>
+              <p v-else v-html="param.text"></p>
+            </template>
+            <div v-else-if="param.type == 'image'" class="ts-image-type">
+              <input class="d-none" type="file" :ref="`ts-input-header-${pIndex}`" :accept="acceptedExtensions"
+                @change="fileUpload($event)" />
+              <template v-if="headerFiles[0]">
+                <fa-icon :icon="['fas', headerFiles[0].current_icon]" :class="`color-${headerFiles[0].current_color}`"
+                  @click="triggerInputFile(`header-${pIndex}`)" v-tippy="{ placement: 'right' }" :content="headerFiles[0].image_preview ?
+                    `<div class='custom-tooltip-image'>
+                      <img src='${headerFiles[0].image_preview}' alt='${headerFiles[0].name}' />
+                    </div>`
+                    : headerFiles[0].name
+                    " />
+              </template>
+              <fa-icon v-else class="select-image" :icon="['fas', 'image']"
+                @click="triggerInputFile(`header-${pIndex}`)" v-tippy="{ placement: 'right' }"
+                :content="`Selecionar anexo`" />
+            </div>
+            <div v-else-if="param.type == 'document'" class="ts-image-type">
+              <input class="d-none" type="file" :ref="`ts-input-header-${pIndex}`" :accept="acceptedExtensions"
+                @change="fileUpload($event)" />
+              <template v-if="headerFiles[0]">
+                <fa-icon :icon="['fas', headerFiles[0].current_icon]" :class="`color-${headerFiles[0].current_color}`"
+                  @click="triggerInputFile(`header-${pIndex}`)" v-tippy="{ placement: 'right' }" :content="headerFiles[0].name
+                    " />
+              </template>
+              <fa-icon v-else class="select-image" :icon="['fas', 'file-alt']"
+                @click="triggerInputFile(`header-${pIndex}`)" v-tippy="{ placement: 'right' }"
+                :content="`Selecionar anexo`" />
+            </div>
+            <div v-else-if="param.type == 'video'" class="ts-image-type">
+              <input class="d-none" type="file" :ref="`ts-input-header-${pIndex}`" :accept="acceptedExtensions"
+                @change="fileUpload($event)" />
+              <template v-if="headerFiles[0]">
+                <fa-icon :icon="['fas', headerFiles[0].current_icon]" :class="`color-${headerFiles[0].current_color}`"
+                  @click="triggerInputFile(`header-${pIndex}`)" v-tippy="{ placement: 'right' }" :content="headerFiles[0].name
+                    " />
+              </template>
+              <fa-icon v-else class="select-image" :icon="['fas', 'video']" style="font-size: 19.2px"
+                @click="triggerInputFile(`header-${pIndex}`)" v-tippy="{ placement: 'right' }"
+                :content="`Selecionar anexo`" />
+            </div>
+          </div>
+        </header>
+        <section v-if="component.type === 'body'"
+          :class="`${template.components.length == 1 ? 'border-radius-5 custom-border-gray' : ''} ${!hasButtonOrFooterComponent ? 'custom-footer-style custom-box-shadow-bottom custom-border-gray' : ''}`"
+          id="template_body">
+          <div v-for="(param, pIndex) in component.parameters" :key="pIndex">
+            <template v-if="param.type === 'text'">
+              <div v-if="regexVars.test(param.text)" v-html="param.text.replace(
+                regexVars,
+                `<div class='ts-content__var'>${htmlInputString}${varListValues}</div>`
+              )
+                "></div>
+              <p v-else v-html="param.text"></p>
+            </template>
+          </div>
+        </section>
+        <section v-if="component.type == 'button'"
+          :class="`${template.components.length == 1 ? 'border-radius-5 custom-border-gray' : ''} ${!hasFooterComponent ? 'custom-footer-style custom-box-shadow-bottom' : ''}`"
+          id="template_buttons">
+          <div v-for="(param, pIndex) in component.parameters" :key="pIndex" class="ts-button">
+            <p v-if="param.text" v-html="param.text"></p>
+          </div>
+        </section>
+        <footer v-if="component.type == 'footer'"
+          :class="`${template.components.length == 1 ? 'border-radius-5 custom-border-gray' : ''}`"
+          id="template_footer">
+          <div v-for="(param, pIndex) in component.parameters" :key="pIndex">
+            <small v-if="param.type == 'text'" v-html="param.text"> </small>
+          </div>
+        </footer>
+      </div>
+    </div>
+
+    <div class="container-btns">
+      <div class="tg-btn" :class="{ 'small-btn': iconButton }" v-if="hasButton">
+        <button @click="$emit('click-trigger')" ref="template-single-button">
+          <template v-if="!iconButton">
+            <fa-icon :icon="['fas', 'paper-plane']" />
+            {{ dictionary.btn_contatar_clientes }}
+          </template>
+          <fa-icon v-else :icon="['fas', 'paper-plane']" />
+        </button>
+
+      </div>
+
+      <div class="tg-btn btn-red" :class="{ 'small-btn': iconButton }" v-if="hasSecondaryButton">
+        <button v-if="hasSecondaryButton" @click="$emit('dispatch-clients-with-bot')"
+          ref="template-single-button-secondary">
+          <template v-if="!iconButton">
+            <fa-icon :icon="['fas', 'paper-plane']" />
+            {{ dictionary.btn_contatar_clientes_com_bot }}
+          </template>
+          <fa-icon v-else :icon="['fas', 'paper-plane']" />
+        </button>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<style>
+.btn-red button {
+  background-color: red;
+}
+
+.btn-red svg {
+  color: rgb(182, 0, 0);
+}
+
+.container-btns {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      varValues: {},
+      regexVars: /{{var_\d}}/g,
+      lastVar: 0,
+      htmlInputString: `<input type='text' class='input-var input-var-${this.identifier}' autocomplete='off' />`,
+      varListValues: "",
+      acceptedExtensions: "audio/aac, audio/mp4, audio/mpeg, audio/amr, audio/ogg, audio/ogx, text/plain, application/pdf, application/vnd.ms-powerpoint, application/msword, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.openxmlformats-officedocument.spreasheetml.sheet, image/jpeg, image/png, video/mp4, video/3gp, image/webp",
+      headerFiles: [],
+    };
+  },
+  props: {
+    template: {
+      type: Object,
+      required: true,
+    },
+    hasButton: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    hasSecondaryButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    allVariables: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    iconButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    identifier: {
+      type: String,
+      required: true
+    },
+    dictionary: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    hasFooterComponent() {
+      if (!this.template.components || !this.template.components.length) return false
+      const types = []
+      this.template.components.forEach(({ type }) => types.push(type))
+      if (types.includes('footer')) return true
+      return false
+    },
+    hasButtonOrFooterComponent() {
+      if (!this.template.components || !this.template.components.length) return false
+      const types = []
+      this.template.components.forEach(({ type }) => types.push(type))
+      if (types.includes('button')) return true
+      return this.hasFooterComponent
+    },
+  },
+  created() {
+    this.$root.$refs[`template-single-${this.identifier}`] = this
+  },
+  mounted() {
+    if (this.allVariables) this.getListOpts()
+    this.setInputs();
+    this.setImageVar(false)
+  },
+  updated() {
+    this.lastVar = 0;
+    this.setInputs();
+
+    const allInputs = document.querySelectorAll(`.input-var-${this.identifier}`);
+    allInputs.forEach(input => {
+      input.dispatchEvent(new Event('focus'))
+      input.dispatchEvent(new Event('blur'))
+    })
+  },
+  methods: {
+    handleInitialFocus() {
+      const allInputs = document.querySelectorAll(`.input-var-${this.identifier}`);
+      if (allInputs.length) allInputs[0].focus()
+      else if (this.$refs["template-single-button"]) this.$refs["template-single-button"].focus()
+    },
+    limparInputVar() {
+      const allInputs = document.querySelectorAll(`.input-var-${this.identifier}`);
+      allInputs.forEach((input) => {
+        input.focus();
+        input.value = "";
+        input.blur();
+        this.setVar({ target: input }, input.id.replace(/[{}]+/g, ''));
+      })
+      this.setImageVar(false)
+    },
+    getListOpts() {
+      this.varListValues =
+        `<ul class="ts-dropdown">
+        <li> nome </li>
+        ${this.allVariables ? '<li> telefone </li>' : ''}
+      </ul>`
+    },
+    fileUpload(event) {
+      try {
+        const allFiles = event.target.files ? event.target.files : event.dataTransfer.files ? event.dataTransfer.files : false
+        if (!allFiles || !allFiles.length) return this.setImageVar(false)
+        if (allFiles.length > 1) {
+          this.$toasted.global.defaultInfo({ msg: `Limite de 1 arquivo por vez` })
+          return this.setImageVar(false)
+        }
+        const file = allFiles[0]
+        const { type, name } = file
+        const validTypes = ['audio/aac', 'audio/mp4', 'audio/mpeg', 'audio/amr', 'audio/ogg', 'audio/ogx', 'text/plain', 'application/pdf', 'application/vnd.ms-powerpoint', 'application/msword', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.openxmlformats-officedocument.spreasheetml.sheet', 'image/jpeg', 'image/png', 'video/mp4', 'video/3gp', 'image/webp']
+        if (!validTypes.includes(type)) {
+          this.$toasted.global.defaultInfo({ msg: `(${type}) ${this.dictionary.msg_arquivo_invalido}` })
+          return this.setImageVar(false)
+        }
+        const returnArrType = str => {
+          const arr = []
+          validTypes.forEach(currentType => {
+            if (currentType.indexOf(str) > -1) arr.push(currentType)
+          })
+          return arr
+        }
+
+        const imageTypes = returnArrType('image/')
+        const docTypes = returnArrType('application/')
+        const audioTypes = returnArrType('audio/')
+        const videoTypes = returnArrType('video/')
+        const isPdf = type.indexOf('application/pdf') > -1
+
+        let sizeInBytes = 0
+        Array.from(allFiles).forEach(file => sizeInBytes += file.size)
+        const sizeInMb = parseFloat((sizeInBytes / (1024 * 1024)).toFixed(2))
+        if (sizeInMb == 0 && sizeInBytes == 0) {
+          this.$toasted.global.defaultInfo({ msg: this.dictionary.msg_arquivo_invalido })
+          return this.setImageVar(false)
+        }
+        const max = imageTypes.includes(type) ? 5 : 15
+        if (sizeInMb >= max) {
+          this.$toasted.global.defaultInfo({ msg: `Limite de ${max} MB por arquivo` })
+          return this.setImageVar(false)
+        }
+
+        const fileReader = new FileReader()
+        let current_icon = 'file-alt', current_color = 'blue', setValues = true
+        if (imageTypes.includes(type)) {
+          setValues = false
+          fileReader.readAsDataURL(file)
+          fileReader.onload = () => {
+            const image_preview = fileReader.result
+            current_icon = 'image'
+            current_color = 'purple'
+            this.headerFiles[0] = { file, image_preview, current_icon, current_color, name }
+            this.$forceUpdate()
+            this.setImageVar(file)
+          }
+        } else if (docTypes.includes(type) && isPdf) {
+          current_icon = 'file-pdf'
+          current_color = 'red'
+        } else if (audioTypes.includes(type)) {
+          current_icon = 'microphone'
+          current_color = 'black'
+        } else if (videoTypes.includes(type)) {
+          current_icon = 'video',
+            current_color = 'black'
+        }
+
+        if (setValues) {
+          this.headerFiles[0] = { file, current_icon, current_color, name }
+          this.$forceUpdate()
+          this.setImageVar(file)
+        }
+      } catch (error) {
+        console.error("Erro file upload: ", error)
+      }
+    },
+    triggerInputFile(origin) {
+      if (this.$refs[`ts-input-${origin}`]) {
+        const elem = this.$refs[`ts-input-${origin}`][0] ? this.$refs[`ts-input-${origin}`][0] : this.$refs[`ts-input-${origin}`]
+        elem && elem.click()
+      }
+    },
+    setInputs() {
+      let qtdInputs = 0
+      const header = document.querySelector("#template_header");
+      const body = document.querySelector("#template_body");
+      const footer = document.querySelector("#template_footer");
+
+      let hasText = false
+      if (header !== null) {
+        header.querySelectorAll(`.input-var-${this.identifier}`).forEach((input) => { this.setEvent(input) })
+        qtdInputs += header.querySelectorAll(`.input-var-${this.identifier}`).length
+        if (qtdInputs > 0 && header.innerText) hasText = true
+      }
+      if (this.lastVar === 0) this.lastVar += 1
+      if (body !== null) {
+        body.querySelectorAll(`.input-var-${this.identifier}`).forEach((input) => { this.setEvent(input) });
+        qtdInputs += body.querySelectorAll(`.input-var-${this.identifier}`).length
+        if (qtdInputs > 0 && body.innerText) hasText = true
+      }
+      if (footer !== null) {
+        footer.querySelectorAll(`.input-var-${this.identifier}`).forEach((input) => { this.setEvent(input) });
+        qtdInputs += footer.querySelectorAll(`.input-var-${this.identifier}`).length
+        if (qtdInputs > 0 && footer.innerText) hasText = true
+      }
+
+      if (qtdInputs === 1 && !hasText) {
+        document.querySelector(`.input-var-${this.identifier}`).parentElement.style.width = "100%"
+        document.querySelector(`.input-var-${this.identifier}`).style.width = "100%"
+      } else if (qtdInputs === 0) {
+        this.$emit("set-vars", this.template)
+      }
+    },
+    setEvent(input) {
+      const varList = input.nextSibling
+
+      const currentInstance = this
+
+      input.setAttribute("placeholder", `{{var_${this.lastVar}}}`);
+      input.setAttribute("id", `{{var_${this.lastVar}}}`);
+      input.addEventListener("input", (event) => {
+        this.setVar(event, `var_${this.lastVar}`, true);
+        if (varList) varList.classList.remove("visible")
+      });
+      input.addEventListener("focus", () => {
+        input.classList.remove("invalid");
+        input.classList.add("active");
+        if (varList) {
+          const handleNextFocus = () => {
+            const allInputs = document.querySelectorAll(`.input-var-${currentInstance.identifier}`)
+            let stop = false
+            if (allInputs.length) {
+              allInputs.forEach(elem => {
+                if (!elem.value && !stop) {
+                  stop = true
+                  elem.focus()
+                }
+              })
+            }
+            if (!stop && this.$refs["template-single-button"]) this.$refs["template-single-button"].focus()
+          }
+
+          for (let i = 0; i < varList.children.length; i++) {
+            varList.children[i].addEventListener("click", function () {
+              input.value = `[${this.innerText}]`
+              input.classList.add("active")
+              input.dispatchEvent(new Event('input'))
+              handleNextFocus()
+            })
+          }
+
+          const containerGeral = document.querySelector(".tg-container")
+          varList.classList.add("visible")
+          const maxBottom = containerGeral.getBoundingClientRect().bottom,
+            currentBottom = varList.getBoundingClientRect().bottom
+          if (currentBottom > maxBottom) {
+            varList.style.top = `-${varList.getBoundingClientRect().height}px`
+            varList.style.borderTop = `1px solid currentColor`
+          }
+        }
+      });
+      input.addEventListener("blur", () => {
+        if (input.value) {
+          if (this.isValid(input.value)) {
+            input.classList.add("active");
+          } else {
+            input.classList.add("invalid");
+          }
+        } else {
+          input.classList.remove("invalid");
+          input.classList.remove("active");
+        }
+        if (varList) varList.classList.remove("visible")
+      });
+      input.addEventListener("keydown", (event) => {
+        if (event.keyCode == 13 && this.hasButton) this.$emit("click-trigger");
+      });
+      this.lastVar += 1;
+    },
+    toggleClass(index) {
+      const elem = this.$refs[`float-container-${index}`]
+        ? this.$refs[`float-container-${index}`][0]
+        : false;
+      if (elem) {
+        if (elem.children[1] && elem.children[1].value) {
+          elem.classList.add("active");
+        } else {
+          elem.classList.toggle("active");
+        }
+      }
+    },
+    isValid(textValue) {
+      const regex = {
+        htmlTags: /<\/?[\d\w\s=\-:\.\/\'\";]+>/gi,
+        enter: /\n/g,
+        consecutiveSpaces: /\s{3,}/g
+      }
+      const value = textValue ? textValue.trim("") : "";
+      if (!value.length) return false
+
+      let isValueValid = true
+      for (let key in regex) {
+        if (!isValueValid) return isValueValid
+        if (regex[key].test(value)) isValueValid = false
+      }
+
+      return isValueValid
+    },
+    setImageVar(file) {
+      this.$emit("set-file-var", file)
+      if (!file) {
+        this.headerFiles = []
+        return this.$forceUpdate()
+      } else {
+        if (this.lastVar == 0) return this.$emit("set-vars", this.template)
+        if (Object.keys(this.varValues).length) return this.$emit("set-vars", this.varValues)
+        this.$nextTick(() => this.handleInitialFocus())
+      }
+    },
+    setVar(event, key, notificar) {
+      if (event && event.target) {
+        key = event.target.id.replace(/[{}]+/g, '')
+        const value = event.target.value ? event.target.value.trim("") : ""
+        if (this.isValid(value)) {
+          this.varValues[key] = value;
+        } else {
+          if (notificar)
+            if (!document.querySelector(".toasted.toasted-primary.error"))
+              this.$toasted.global.defaultError({
+                msg: this.dictionary.template_msg_variavel_invalida,
+              });
+
+          delete this.varValues[key];
+        }
+        return this.$emit("set-vars", this.varValues);
+      }
+    },
+  }
+};
+</script>