{"version":3,"file":"app.hub.UfIxP.js","mappings":"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","sources":["webpack://hema-foto-shopping/./src/ts/service_hub.ts"],"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 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: 999; ${config.position}: 24px; bottom: 24px; width: 48px; height: 48px; transform: translate(${config.offset.x}, ${config.offset.y}); background-color: #c700b9; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 15px -5px; cursor: pointer; overflow: hidden; transition: background-color .2s .1s ease-in-out, width .2s .1s, height .2s .1s, transform .2s .1s; display: inline-flex; align-items: center; justify-content: center; }\r\n #fab:hover #fab_icon_closed {scale: 1.1;}\r\n #fab:hover {background-color: color-mix(in oklab, #c700b9 80%, transparent);}\r\n #fab.-open:hover {background-color: color-mix(in oklab, #c700b9 80%, transparent);}\r\n #fab_bg { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 900; opacity: 0; pointer-events: none; transition: opacity .2s; }\r\n #fab_menu { position: fixed; ${config.position}: 24px; bottom: 70px; width: 200px; height: auto; background-color: white; z-index: 999; padding: 16px; border-radius: 8px; font-size: 1.5rem; 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_menu > span {font-family:\"HemaDemibold\";}\r\n #fab #fab_icon_closed { width: 24px; height: 24px; transition: opacity .2s .1s, scale .2s ease-in-out; }\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: 5px; }\r\n #fab_menu ul li {border-bottom: 1px solid #DFDFDF; font-family: \"HemaBook\"; padding: 6px 0; list-style: none; cursor: pointer; border-radius: 2px; transition: background-color .2s ease-in-out; }\r\n #fab_menu ul li:hover {background-color: #f5f5f5; }\r\n #fab.-open { width: 30px; height: 30px; background-color: #c700b9; 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 if (fab.classList.contains(\"-open\"))\r\n close()\r\n else {\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\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}"],"names":["config","lang","window","culture","document","body","classList","service","text","chat","feedback","title","position","offset","x","y","init","serviceHub","fab","querySelector","fabBg","fabMenu","surveyBtn","chatInterval","closeTimer","customButtons","html","attempts","interval","style","open","contains","close","show","add","remove","initSurvey","survey","Object","assign","display","fabSurvey","initChat","embedded_svc","menu","URLSearchParams","location","search","get","openChat","setInterval","clearInterval","hideButtonAndMenu","every","closeChat","fabChat","openSurvey","click","btn","visibility","showButtonAndMenu","openChannelMenu","openService","focus","createElement","setAttribute","appendChild","innerHTML","Array","isArray","filter","map","url","join","addEventListener","from","querySelectorAll","forEach","e","target","getAttribute","innerText","clearTimeout","textContent","head","hub"],"sourceRoot":""}