{"version":3,"sources":["webpack:///./src/ts/service_hub.ts"],"names":["hub","config","fab","document","querySelector","fabBg","fabMenu","surveyBtn","chat","chatInterval","position","offset","x","y","customButtons","html","attempts","interval","style","open","show","classList","add","close","remove","initSurvey","survey","Object","assign","display","fabSurvey","initChat","window","embedded_svc","menu","URLSearchParams","location","search","get","openChat","setInterval","clearInterval","hideButtonAndMenu","every","closeChat","fabChat","openSurvey","click","btn","visibility","showButtonAndMenu","openChannelMenu","openService","service","lang","focus","createElement","setAttribute","body","appendChild","innerHTML","Array","isArray","filter","map","url","text","join","title","feedback","addEventListener","from","querySelectorAll","forEach","e","target","getAttribute","innerText","clearTimeout","closeTimer","textContent","head","culture","init","serviceHub"],"mappings":"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","file":"49.b63cd10b15308fab8dee.chunk.js","sourcesContent":["declare global {\r\n interface Window {\r\n serviceHub?: any\r\n embedded_svc?: any\r\n culture?: any\r\n }\r\n}\r\n\r\ntype Languages = \"nl-NL\" | \"nl-BE\" | \"fr-BE\" | \"fr-FR\"\r\n\r\ninterface IConfig {\r\n lang: Languages\r\n service: Record\r\n text: {\r\n chat: Record\r\n feedback: Record\r\n service: Record\r\n title: Record\r\n },\r\n position?: \"left\" | \"right\"\r\n offset?: {\r\n x: string\r\n y: string\r\n },\r\n customButtons?: Record[]\r\n}\r\n\r\nconst hub = (config: IConfig) => {\r\n let fab: HTMLElement = document.querySelector(\"#fab\")\r\n if (fab)\r\n return\r\n\r\n config.position ??= \"right\"\r\n config.offset ??= { x: \"0px\", y: \"0px\" }\r\n\r\n let fabBg: HTMLElement\r\n let fabMenu: HTMLElement\r\n let surveyBtn: HTMLElement\r\n let chat: boolean\r\n let chatInterval: any\r\n let closeTimer: any\r\n\r\n const insertFabHTML = () =>\r\n fab.innerHTML = `\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n `\r\n\r\n const insertFabMenuHTML = () => {\r\n const customButtons = Array.isArray(config.customButtons)\r\n ? config.customButtons\r\n .filter(x => x[config.lang])\r\n .map(x => `
  • ${x[config.lang].text}
  • `)\r\n .join(\"\")\r\n : \"\"\r\n const html = `${config.text.title[config.lang]}\r\n
      \r\n
    • ${config.text.chat[config.lang]}
    • \r\n
    • ${config.text.service[config.lang]}
    • \r\n
    • ${config.text.feedback[config.lang]}
    • \r\n ${customButtons}\r\n
    `\r\n\r\n fabMenu.innerHTML = html\r\n\r\n fabMenu.querySelector(\"#fab_feedback\").addEventListener(\"click\", openSurvey)\r\n fabMenu.querySelector(\"#fab_chat\").addEventListener(\"click\", openChat)\r\n fabMenu.querySelector(\"#fab_service\").addEventListener(\"click\", openService)\r\n\r\n Array.from(fabMenu.querySelectorAll(\"li.custom\"))\r\n .forEach((x: any) => x.addEventListener(\"click\", e => {\r\n window.open(e.target.getAttribute(\"data-url\"), e.target.innerText).focus()\r\n close()\r\n }))\r\n }\r\n\r\n const createElements = () => {\r\n fab = document.createElement(\"div\")\r\n fabBg = document.createElement(\"div\")\r\n fabMenu = document.createElement(\"div\")\r\n fab.setAttribute(\"id\", \"fab\")\r\n fabBg.setAttribute(\"id\", \"fab_bg\")\r\n fabMenu.setAttribute(\"id\", \"fab_menu\")\r\n document.body.appendChild(fab)\r\n document.body.appendChild(fabBg)\r\n document.body.appendChild(fabMenu)\r\n\r\n insertFabHTML()\r\n insertFabMenuHTML()\r\n\r\n fab.addEventListener(\"click\", open)\r\n fabBg.addEventListener(\"click\", close)\r\n fabMenu.addEventListener(\"mouseenter\", function () { clearTimeout(closeTimer) })\r\n fabMenu.addEventListener(\"touchstart\", function () { clearTimeout(closeTimer) })\r\n }\r\n\r\n let initStyles = () => {\r\n {\r\n const style = document.createElement(\"style\")\r\n style.textContent = `\r\n #fab { position: fixed; z-index: 200; ${config.position}: 20px; bottom: 40px; width: 60px; height: 60px; transform: translate(${config.offset.x}, ${config.offset.y}); background-color: #9aca41; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 15px -5px; cursor: pointer; overflow: hidden; transition: background-color .2s .1s, width .2s .1s, height .2s .1s, transform .2s .1s; }\r\n #fab_bg { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 999; opacity: 0; pointer-events: none; transition: opacity .2s; }\r\n #fab_menu { position: fixed; ${config.position}: 40px; bottom: 80px; width: 200px; height: auto; background-color: white; z-index: 999; padding: 16px; border-radius: 2px; font-size: 12px; opacity: 0; transform: translate(${config.offset.x}, ${config.offset.y}) translateY(20px); pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 12px 0px; }\r\n #fab #fab_icon_closed { width: 60px; height: 30px; margin: 15px 0 0 0; transition: opacity .2s .1s; }\r\n #fab #fab_icon_open { width: 30px; height: 14px; margin: 8px 0 0 0; position: absolute; left: 0; top: 0; opacity:0 ; transition: opacity .2s; }\r\n #fab_menu ul { display: flex; flex-direction: column; margin-top: 8px; }\r\n #fab_menu ul li { margin: 5px 0px; background-color: #f1efeb; padding: 6px 8px; list-style: none; cursor: pointer; border-radius: 2px; transition: background-color .2s; }\r\n #fab_menu ul li:hover { margin: 5px 0px; background-color: #C6C2BB; }\r\n #fab.-open { width: 30px; height: 30px; background-color: #9aca41; transition: background-color .2s, width .2s, height .2s, transform .2s; }\r\n #fab.-open #fab_icon_closed { opacity: 0; transition: opacity .2s; }\r\n #fab.-open #fab_icon_open { opacity: 1; transition: opacity .2s .1s; }\r\n #fab_bg.-open { opacity: 1; pointer-events: auto; }\r\n #fab_menu.-open { opacity: 1; transform: translate(${config.offset.x}, ${config.offset.y}) translateY(0px); pointer-events: auto; transition: opacity .2s .1s, transform .2s .1s; }\r\n #fab.-hidden { transform: translateY(32px) scale(0); }\r\n `\r\n document.head.appendChild(style)\r\n }\r\n\r\n {\r\n const style = document.createElement(\"style\")\r\n style.textContent = `\r\n .embeddedServiceSidebar { font-family: 'HemaBook' !important; } \r\n #esw-channelmenu_header > h2, #esw-channelmenu_header > p, .embeddedServiceSidebar .sidebarHeader > h2 { color: white !important; }\r\n .embeddedServiceSidebarButton .label { top: 0; }\r\n `\r\n document.head.appendChild(style)\r\n }\r\n }\r\n\r\n const open = () => {\r\n show()\r\n fab.classList.add(\"-open\")\r\n fabBg.classList.add(\"-open\")\r\n fabMenu.classList.add(\"-open\")\r\n }\r\n\r\n const close = () => {\r\n fab.classList.remove(\"-open\")\r\n fabBg.classList.remove(\"-open\")\r\n fabMenu.classList.remove(\"-open\")\r\n }\r\n\r\n const hide = () => {\r\n close()\r\n fab.classList.add(\"-hidden\")\r\n }\r\n\r\n const show = () => {\r\n fab.classList.remove(\"-hidden\")\r\n }\r\n\r\n const initSurvey = () => {\r\n if (surveyBtn)\r\n return\r\n\r\n const survey: HTMLElement = document.querySelector(\"#surveyContent\")\r\n if (!survey)\r\n return\r\n\r\n Object.assign(survey.style, { display: \"none\" })\r\n surveyBtn = survey.querySelector(\"button\")\r\n\r\n const fabSurvey: HTMLElement = fabMenu.querySelector(\"#fab_feedback\")\r\n if (fabSurvey)\r\n Object.assign(fabSurvey.style, { display: \"\" })\r\n }\r\n\r\n const initChat = () => {\r\n if (chat)\r\n return\r\n\r\n chat = \"embedded_svc\" in window && \"menu\" in window.embedded_svc && \"hideButtonAndMenu\" in window.embedded_svc.menu\r\n if (!chat)\r\n return\r\n\r\n if (new URLSearchParams(document.location.search).get(\"chat\"))\r\n openChat()\r\n else {\r\n const btnInterval = setInterval(() => {\r\n if (document.querySelector(\"#esw-channelmenu.hideAnimation\"))\r\n clearInterval(btnInterval)\r\n else\r\n window.embedded_svc.menu.hideButtonAndMenu()\r\n }, 1000)\r\n }\r\n\r\n\r\n if (chatInterval)\r\n clearInterval(chatInterval)\r\n chatInterval = setInterval(() => {\r\n const checks = [\r\n !!document.querySelector(\"#esw-channelmenu.hideAnimation\"),\r\n !document.querySelector(\".embeddedServiceSidebar.sidebarMaximized\"),\r\n !document.querySelector(\".embeddedServiceSidebar.sidebarMinimized\"),\r\n !document.querySelector(\".notification.showMinimizedNotification\")\r\n ]\r\n if (checks.every(x => x === true)) {\r\n closeChat()\r\n\r\n }\r\n }, 1000)\r\n\r\n const fabChat: HTMLElement = fabMenu.querySelector(\"#fab_chat\")\r\n if (fabChat)\r\n Object.assign(fabChat.style, { display: \"\" })\r\n }\r\n\r\n const openSurvey = () => {\r\n if (!surveyBtn)\r\n initSurvey()\r\n surveyBtn.click()\r\n close()\r\n }\r\n\r\n const openChat = () => {\r\n const btn = document.querySelector('#esw-fab');\r\n if (btn)\r\n btn.style.visibility = \"\"\r\n window.embedded_svc.menu.showButtonAndMenu()\r\n window.embedded_svc.menu.openChannelMenu()\r\n hide()\r\n }\r\n const closeChat = () => {\r\n const btn = document.querySelector('#esw-fab');\r\n btn.style.visibility = \"hidden\"\r\n window.embedded_svc.menu.hideButtonAndMenu()\r\n show()\r\n }\r\n\r\n const openService = () => {\r\n window.open(config.service[config.lang], \"service\").focus()\r\n close()\r\n }\r\n\r\n const watch = () => {\r\n let attempts = 0\r\n const interval = setInterval(() => {\r\n attempts++\r\n initSurvey()\r\n initChat()\r\n if (attempts > 100 || (chat && surveyBtn))\r\n clearInterval(interval)\r\n }, 100)\r\n }\r\n\r\n createElements()\r\n initChat()\r\n initSurvey()\r\n watch()\r\n initStyles()\r\n\r\n return {\r\n open,\r\n close,\r\n openSurvey,\r\n openChat,\r\n openService,\r\n }\r\n}\r\n\r\nconst config: IConfig = {\r\n lang: window.culture || document.body.classList[0] as Languages || \"nl-NL\",\r\n service: {\r\n \"nl-NL\": \"/klantenservice/\", // https://foto.hema.nl\r\n \"nl-BE\": \"/klantenservice/\", // https://foto.hema.be\r\n \"fr-BE\": \"/fr/service-clientele/\", // https://foto.hema.be\r\n \"fr-FR\": \"/fr-fr/service-clientele/\", // https://photo.hema.com\r\n },\r\n text: {\r\n chat: {\r\n \"nl-NL\": \"chat met ons\",\r\n \"nl-BE\": \"chat met ons\",\r\n \"fr-BE\": \"Chattez avec nous\",\r\n \"fr-FR\": \"Chattez avec nous\"\r\n },\r\n feedback: {\r\n \"nl-NL\": \"geef ons feedback\",\r\n \"nl-BE\": \"geef ons feedback\",\r\n \"fr-BE\": \"Foire aux questions\",\r\n \"fr-FR\": \"Foire aux questions\"\r\n },\r\n service: {\r\n \"nl-NL\": \"klantenservice\",\r\n \"nl-BE\": \"klantenservice\",\r\n \"fr-BE\": \"Service clientèle\",\r\n \"fr-FR\": \"Service clientèle\"\r\n },\r\n title: {\r\n \"nl-NL\": \"kunnen we je helpen?\",\r\n \"nl-BE\": \"kunnen we je helpen?\",\r\n \"fr-BE\": \"Pouvons-nous vous aider ?\",\r\n \"fr-FR\": \"Pouvons-nous vous aider ?\"\r\n }\r\n },\r\n position: \"right\",\r\n offset: {\r\n x: \"0px\",\r\n y: \"0px\"\r\n },\r\n}\r\n\r\nexport const init = () => {\r\n if (window.serviceHub === false || window.serviceHub === \"false\")\r\n return\r\n\r\n window.serviceHub = hub(config)\r\n}"],"sourceRoot":""}