diff --git a/public/widget.js b/public/widget.js index 17c6f56..2af4f25 100644 --- a/public/widget.js +++ b/public/widget.js @@ -52,7 +52,7 @@ Pridat fotku nebo pretahnout
-

Odeslanim zpravy nam predavate udaje potrebne pro odpoved.

+ Powered by MaalFlows @@ -61,7 +61,7 @@ const panel = root.querySelector(".mf-panel"); const launcher = root.querySelector(".mf-launcher"); const close = root.querySelector(".mf-close"); - const soundButton = createSoundButton(root, close); + const { soundButton, infoButton } = createHeaderActions(root, close); const form = root.querySelector(".mf-form"); const messages = root.querySelector(".mf-messages"); const typing = root.querySelector(".mf-typing"); @@ -80,6 +80,9 @@ saveSession(); renderSoundState(soundButton); }); + infoButton.addEventListener("click", () => { + root.querySelector(".mf-gdpr").hidden = !root.querySelector(".mf-gdpr").hidden; + }); form.message.addEventListener("input", debounce(() => { if (!session.conversationId) return; @@ -193,7 +196,7 @@ }); } - function createSoundButton(root, closeButton) { + function createHeaderActions(root, closeButton) { const actions = document.createElement("div"); actions.className = "mf-header-actions"; const soundButton = document.createElement("button"); @@ -207,12 +210,23 @@ `; + const infoButton = document.createElement("button"); + infoButton.className = "mf-info"; + infoButton.type = "button"; + infoButton.setAttribute("aria-label", "GDPR informace"); + infoButton.title = "GDPR informace"; + infoButton.innerHTML = ``; closeButton.innerHTML = ``; closeButton.setAttribute("aria-label", "Zmensit chat"); closeButton.title = "Zmensit chat"; closeButton.before(actions); - actions.append(soundButton, closeButton); - return soundButton; + actions.append(soundButton, infoButton, closeButton); + const gdpr = document.createElement("p"); + gdpr.className = "mf-gdpr"; + gdpr.hidden = true; + gdpr.textContent = "Odeslanim zpravy nam predavate udaje potrebne pro odpoved. Historii chatu uchovavame pro zakaznickou podporu."; + root.querySelector(".mf-form").prepend(gdpr); + return { soundButton, infoButton }; } function renderSoundState(button) { @@ -316,10 +330,12 @@ function showFormError(root, message) { const note = root.querySelector(".mf-note"); note.textContent = message; + note.hidden = false; note.classList.add("error"); clearTimeout(showFormError.timer); showFormError.timer = setTimeout(() => { - note.textContent = "Odeslanim zpravy nam predavate udaje potrebne pro odpoved."; + note.textContent = ""; + note.hidden = true; note.classList.remove("error"); }, 3500); } @@ -363,12 +379,12 @@ background: ${c.surface}; border: 1px solid #dfe6e2; border-radius: 8px; overflow: hidden; box-shadow: 0 18px 50px rgb(0 0 0 / 18%); } .mf-panel.open { display: grid; grid-template-rows: auto minmax(130px, 1fr) auto auto; } - header { position: relative; display: grid; gap: 3px; background: ${c.brand}; color: ${c.brandText}; padding: 15px 86px 15px 16px; } + header { position: relative; display: grid; gap: 3px; background: ${c.brand}; color: ${c.brandText}; padding: 15px 122px 15px 16px; } header strong { font-size: 16px; } header small { opacity: .92; font-size: 13px; line-height: 1.35; } .mf-header-actions { position: absolute; top: 9px; right: 9px; display: flex; gap: 6px; } - .mf-close, .mf-sound { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; background: rgb(255 255 255 / 16%); color: ${c.brandText}; cursor: pointer; padding: 0; } - .mf-close svg, .mf-sound svg { width: 19px; height: 19px; fill: currentColor; } + .mf-close, .mf-sound, .mf-info { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; background: rgb(255 255 255 / 16%); color: ${c.brandText}; cursor: pointer; padding: 0; } + .mf-close svg, .mf-sound svg, .mf-info svg { width: 19px; height: 19px; fill: currentColor; } .mf-sound .mf-sound-off { display: none; } .mf-sound.muted .mf-sound-on { display: none; } .mf-sound.muted .mf-sound-off { display: block; } @@ -388,7 +404,7 @@ .mf-send { width: 48px; min-height: 72px; height: 100%; display: grid; place-items: center; border: 0; border-radius: 6px; background: ${c.brand}; color: ${c.brandText}; cursor: pointer; } .mf-send:disabled { opacity: .55; cursor: wait; } .mf-send svg { width: 22px; height: 22px; fill: currentColor; transform: translateX(1px); } - .mf-dropzone { min-height: 42px; border: 1px dashed #b9c9c1; border-radius: 8px; display: flex; align-items: center; gap: 8px; padding: 9px 10px; color: ${c.muted}; background: #f8fbf9; font-size: 12px; cursor: pointer; } + .mf-dropzone { min-height: 64px; border: 1px dashed #b9c9c1; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 12px; color: ${c.muted}; background: #f8fbf9; font-size: 12px; cursor: pointer; text-align: center; } .mf-dropzone.dragging { border-color: ${c.brand}; background: #eef8f4; color: ${c.text}; } .mf-dropzone input { display: none; } .mf-dropzone svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; } @@ -398,6 +414,7 @@ .mf-attachment-chip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #e8eee9; color: ${c.text}; cursor: pointer; padding: 0; } .mf-note { margin: 0; color: ${c.muted}; font-size: 11px; line-height: 1.3; } .mf-note.error { color: #b42318; } + .mf-gdpr { margin: 0; padding: 9px 10px; border: 1px solid #dfe6e2; border-radius: 8px; background: #f8fbf9; color: ${c.muted}; font-size: 11px; line-height: 1.35; } .mf-powered { justify-self: center; color: ${c.muted}; font-size: 11px; text-decoration: none; } .mf-powered:hover { color: ${c.brand}; text-decoration: underline; } @keyframes mfPulse {