rajch_ales/MaalFlows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add widget GDPR info control

Browse Source
This commit is contained in:
rajchales-monito
2026-07-24 10:53:24 +02:00
parent 781735c62b
commit f63fb539d6
1 changed files with 27 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/widget.js
+27 -10
View File
@@ -52,7 +52,7 @@
<span>Pridat fotku nebo pretahnout</span>
</label>
<div class="mf-attachment-list"></div>
<p class="mf-note">Odeslanim zpravy nam predavate udaje potrebne pro odpoved.</p>
<p class="mf-note" hidden></p>
<a class="mf-powered" href="https://app.black-week.cz" target="_blank" rel="noopener noreferrer">Powered by MaalFlows</a>
</form>
</section>
@@ -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 @@
<path d="M4 9v6h4l5 4V5L8 9H4Zm12.4 3 2.3-2.3-1.4-1.4-2.3 2.3-2.3-2.3-1.4 1.4 2.3 2.3-2.3 2.3 1.4 1.4 2.3-2.3 2.3 2.3 1.4-1.4-2.3-2.3Z"></path>
</svg>
`;
const infoButton = document.createElement("button");
infoButton.className = "mf-info";
infoButton.type = "button";
infoButton.setAttribute("aria-label", "GDPR informace");
infoButton.title = "GDPR informace";
infoButton.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 10h2v7h-2v-7Zm0-3h2v2h-2V7Zm1-5a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z"></path></svg>`;
closeButton.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.7 8.7 12 14l5.3-5.3 1.4 1.4L12 16.8l-6.7-6.7 1.4-1.4Z"></path></svg>`;
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 {