0351d front end linting (#377)

* feat: disable custom script for  trial users

* after lint fix

* frontend linting

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/public/widgets/embed-min.js

@@ -1,20 +1,40 @@
-!(function (n, e) {
-    if (typeof document !== 'undefined') {
-      const e = document.head || document.getElementsByTagName('head')[0]; const t = document.createElement('style')
-      t.type = 'text/css', e.appendChild(t), t.styleSheet ? t.styleSheet.cssText = n : t.appendChild(document.createTextNode(n))
-    }
-  }('.nf-main {\n      position: fixed;\n      width: 100%;\n      height: 100vh;\n      top: 0px;\n      bottom: 0px;\n      left: 0px;\n      right: 0px;\n      z-index: 500;\n      pointer-events: none;\n    }\n    .nf-main .nf-emoji {\n       pointer-events: auto;\n       width:60px;\n       height: 60px;\n       display: flex;\n       align-items:center;\n       justify-content:center;\n       text-align: center;\n       background-color: #3B82F6;\n       padding: 8px 10px;\n       border: none;\n       cursor: pointer;\n       position: fixed;\n       bottom: 23px;\n       right: 28px;\n       border-radius: 100%;\n       z-index: 999\n     }\n     .nf-main.nf-left .nf-emoji{\n        left: 28px !important;\n        right: inherit !important\n     }\n     .nf-main .nf-emoji .nf-emoji-icon, .nf-main .nf-emoji .nf-emoji-icon-close{\n        font-size: 30px;\n        color:white;\n      }\n    .nf-main .nf-emoji .nf-emoji-icon-close {\n       display: none;\n     }\n    .nf-main.open .nf-emoji .nf-emoji-icon{\n       display: none !important\n    }\n    .nf-main.open .nf-emoji .nf-emoji-icon-close{\n       display: block !important\n    }\n    .nf-main .nf-popup {\n\n       display: flex;\n       align-items: end;\n       flex-direction: column-reverse;\n       align-content: flex-end;\n       padding: 20px;\n       padding-bottom: 100px;\n       width: 100%;\n       height: 100vh;\n       visibility: hidden;\n       opacity:0; transition:\n       opacity 0.2s, 0.2s ease-in-out;\n       transform: translateY(30px);\n    }\n    .nf-main.open .nf-popup {\n      visibility: visible !important;\n      opacity: 1;\n      transform: translateY(0px);\n    }\n    .nf-main .nf-popup iframe {\n      width: 100%;\n      pointer-events: auto;\n      z-index: 999!important;\n      bottom: 100px;\n      right: 20px;\n      height: 450px;\n      background: #fff;\n      border-radius: 12px;\n      box-shadow: 0 6px 6px 0 rgba(0,0,0,.02),0 8px 24px 0 rgba(0,0,0,.12)!important\n    }\n    .nf-main.nf-left .nf-popup {\n      align-items: start !important;\n    }')), (function () {
-    const n = JSON.parse(document.currentScript.getAttribute('data-nf'))
+!(function (n,) {
+  if (typeof document !== "undefined") {
+    const e = document.head || document.getElementsByTagName("head")[0]
+    const t = document.createElement("style");
+    (t.type = "text/css"),
+      e.appendChild(t),
+      t.styleSheet
+        ? (t.styleSheet.cssText = n)
+        : t.appendChild(document.createTextNode(n))
+  }
+})(
+  ".nf-main {\n      position: fixed;\n      width: 100%;\n      height: 100vh;\n      top: 0px;\n      bottom: 0px;\n      left: 0px;\n      right: 0px;\n      z-index: 500;\n      pointer-events: none;\n    }\n    .nf-main .nf-emoji {\n       pointer-events: auto;\n       width:60px;\n       height: 60px;\n       display: flex;\n       align-items:center;\n       justify-content:center;\n       text-align: center;\n       background-color: #3B82F6;\n       padding: 8px 10px;\n       border: none;\n       cursor: pointer;\n       position: fixed;\n       bottom: 23px;\n       right: 28px;\n       border-radius: 100%;\n       z-index: 999\n     }\n     .nf-main.nf-left .nf-emoji{\n        left: 28px !important;\n        right: inherit !important\n     }\n     .nf-main .nf-emoji .nf-emoji-icon, .nf-main .nf-emoji .nf-emoji-icon-close{\n        font-size: 30px;\n        color:white;\n      }\n    .nf-main .nf-emoji .nf-emoji-icon-close {\n       display: none;\n     }\n    .nf-main.open .nf-emoji .nf-emoji-icon{\n       display: none !important\n    }\n    .nf-main.open .nf-emoji .nf-emoji-icon-close{\n       display: block !important\n    }\n    .nf-main .nf-popup {\n\n       display: flex;\n       align-items: end;\n       flex-direction: column-reverse;\n       align-content: flex-end;\n       padding: 20px;\n       padding-bottom: 100px;\n       width: 100%;\n       height: 100vh;\n       visibility: hidden;\n       opacity:0; transition:\n       opacity 0.2s, 0.2s ease-in-out;\n       transform: translateY(30px);\n    }\n    .nf-main.open .nf-popup {\n      visibility: visible !important;\n      opacity: 1;\n      transform: translateY(0px);\n    }\n    .nf-main .nf-popup iframe {\n      width: 100%;\n      pointer-events: auto;\n      z-index: 999!important;\n      bottom: 100px;\n      right: 20px;\n      height: 450px;\n      background: #fff;\n      border-radius: 12px;\n      box-shadow: 0 6px 6px 0 rgba(0,0,0,.02),0 8px 24px 0 rgba(0,0,0,.12)!important\n    }\n    .nf-main.nf-left .nf-popup {\n      align-items: start !important;\n    }",
+),
+  (function () {
+    const n = JSON.parse(document.currentScript.getAttribute("data-nf"))
     let e = n?.formurl || null
-    if (window.location !== window.parent.location || window.frameElement || !e) return !1
-    e = e + (e.indexOf('?') === -1 ? '?' : '&') + 'popup=true'
-    const t = n?.emoji || '💬'; const i = n?.position === 'left' ? 'nf-left' : ''; const o = n?.bgcolor || '#3B82F6'
-    const a = n?.width || 500; const r = document.body.querySelector('.nf-main')
+    if (window.location !== window.parent.location || window.frameElement || !e)
+      return !1
+    e = e + (e.indexOf("?") === -1 ? "?" : "&") + "popup=true"
+    const t = n?.emoji || "💬"
+    const i = n?.position === "left" ? "nf-left" : ""
+    const o = n?.bgcolor || "#3B82F6"
+    const a = n?.width || 500
+    const r = document.body.querySelector(".nf-main")
     r && r.remove()
-    const p = document.createElement('div')
-    p.className = `nf-main ${i}`, p.innerHTML = `<div class='nf-popup'><iframe src='${e}' frameborder='0' marginheight='0' marginwidth='0' title='OpnForm'></iframe></div>`
-    p.querySelector('iframe').style.maxWidth = `${a}px`
-    const s = document.createElement('div')
-    s.className = 'nf-emoji', s.role = 'button', s.style.backgroundColor = `${o}`, s.innerHTML = `<span class='nf-emoji-icon'>${t}</span><span class='nf-emoji-icon-close'><svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-8 h-8'>\n  <path stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12' />\n</svg>\n</span>`, s.onclick = () => { p.classList.toggle('open') }, p.appendChild(s), document.body.appendChild(p)
-  }())
-  
+    const p = document.createElement("div");
+    (p.className = `nf-main ${i}`),
+      (p.innerHTML = `<div class='nf-popup'><iframe src='${e}' frameborder='0' marginheight='0' marginwidth='0' title='OpnForm'></iframe></div>`)
+    p.querySelector("iframe").style.maxWidth = `${a}px`
+    const s = document.createElement("div");
+    (s.className = "nf-emoji"),
+      (s.role = "button"),
+      (s.style.backgroundColor = `${o}`),
+      (s.innerHTML = `<span class='nf-emoji-icon'>${t}</span><span class='nf-emoji-icon-close'><svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-8 h-8'>\n  <path stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12' />\n</svg>\n</span>`),
+      (s.onclick = () => {
+        p.classList.toggle("open")
+      }),
+      p.appendChild(s),
+      document.body.appendChild(p)
+  })()

client/public/widgets/embed.js

@@ -3,14 +3,17 @@
  * All changes to this file should be followed by an update of the minified version (embed-min.js)
  */
 !(function () {
-  !(function (e, t) {
-    if (e && typeof document !== 'undefined') {
-      const head = document.head || document.getElementsByTagName('head')[0]
-      const styleEl = document.createElement('style')
-      styleEl.type = 'text/css', head.appendChild(styleEl), styleEl.styleSheet ? styleEl.styleSheet.cssText = e : styleEl.appendChild(document.createTextNode(e))
+  !(function (e) {
+    if (e && typeof document !== "undefined") {
+      const head = document.head || document.getElementsByTagName("head")[0]
+      const styleEl = document.createElement("style");
+      (styleEl.type = "text/css"),
+        head.appendChild(styleEl),
+        styleEl.styleSheet
+          ? (styleEl.styleSheet.cssText = e)
+          : styleEl.appendChild(document.createTextNode(e))
     }
-  }
-  (`.nf-main {
+  })(`.nf-main {
       position: fixed;
       width: 100%;
       height: 100vh;
@@ -89,49 +92,55 @@
     }
     .nf-main.nf-left .nf-popup {
       align-items: start !important;
-    }`))
-}());
+    }`)
+})();
 
 (function () {
-  const nfData = JSON.parse(document.currentScript.getAttribute('data-nf'))
+  const nfData = JSON.parse(document.currentScript.getAttribute("data-nf"))
   let formUrl = nfData?.formurl || null
-  if (window.location !== window.parent.location || window.frameElement || !formUrl) {
+  if (
+    window.location !== window.parent.location ||
+    window.frameElement ||
+    !formUrl
+  ) {
     // Do nothing
     return false
   }
 
   // Add popup param to formUrl
-  formUrl = formUrl + (formUrl.indexOf('?') === -1 ? '?' : '&') + 'popup=true'
+  formUrl = formUrl + (formUrl.indexOf("?") === -1 ? "?" : "&") + "popup=true"
 
   // Settings
-  const emoji = nfData?.emoji || '💬'
-  const position = (nfData?.position === 'left') ? 'nf-left' : ''
-  const emojiBgColor = nfData?.bgcolor || '#3B82F6'
+  const emoji = nfData?.emoji || "💬"
+  const position = nfData?.position === "left" ? "nf-left" : ""
+  const emojiBgColor = nfData?.bgcolor || "#3B82F6"
   const width = nfData?.width || 500
 
   // Remove old popup, if there
-  const oldEl = document.body.querySelector('.nf-main')
+  const oldEl = document.body.querySelector(".nf-main")
   if (oldEl) {
     oldEl.remove()
   }
 
   // Iframe popup
-  const mainDiv = document.createElement('div')
+  const mainDiv = document.createElement("div")
   mainDiv.className = `nf-main ${position}`
   mainDiv.innerHTML = `<div class='nf-popup'><iframe src='${formUrl}' frameborder='0' marginheight='0' marginwidth='0' title='OpnForm'></iframe></div>`
-  const iframe = mainDiv.querySelector('iframe')
+  const iframe = mainDiv.querySelector("iframe")
   iframe.style.maxWidth = `${width}px`
 
   // Emoji button
-  const emojiButton = document.createElement('div')
-  emojiButton.className = 'nf-emoji'
-  emojiButton.role = 'button'
+  const emojiButton = document.createElement("div")
+  emojiButton.className = "nf-emoji"
+  emojiButton.role = "button"
   emojiButton.style.backgroundColor = `${emojiBgColor}`
   emojiButton.innerHTML = `<span class='nf-emoji-icon'>${emoji}</span><span class='nf-emoji-icon-close'><svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-8 h-8'>
   <path stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12' />
 </svg>
 </span>`
-  emojiButton.onclick = () => { mainDiv.classList.toggle('open') }
+  emojiButton.onclick = () => {
+    mainDiv.classList.toggle("open")
+  }
   mainDiv.appendChild(emojiButton)
 
   // Append to the body