https://www.maybelline.com/frontend/master/js/real-dialog.625dc1e6.js

1"use strict";(self["webpackChunkwsf_master_mny"]=self["webpackChunkwsf_master_mny"]||[]).push([[5488],{6306:function(e,t,s){s.r(t),s.d(t,{default:function(){return h}});var o=s(2895),i=function(){var e=this,t=e._self._c;return t("div",{staticClass:"real-dialog"},[t("ul",{ref:"chat",staticClass:"real-dialog__chat"},[e.$slots["initial-message-copy"]?t("li",{staticClass:"real-dialog__chat__message"},[e._t("initial-message-copy")],2):e._e(),e._v(" "),e._l(e.chatMessages,function(s,o){return t("li",{key:o,ref:`chat-message--${o}`,refInFor:!0,staticClass:"real-dialog__chat__message"},[t("span",{domProps:{innerHTML:e._s(s)}})])})],2),e._v(" "),t("div",{staticClass:"real-dialog__question"},[t("div",{staticClass:"real-dialog__question__form"},[t("div",{staticClass:"real-dialog__question__input__wrapper"},[t("label",{staticClass:"real-dialog__question__copy",attrs:{for:"question-input"}},[e._v("\n          "+e._s(e.questionCopy)+"\n        ")]),e._v(" "),t("input",{directives:[{name:"model",rawName:"v-model",value:e.question,expression:"question"}],staticClass:"real-dialog__question__input",class:{"real-dialog__question__input--has-errors":e.showInputError},attrs:{id:"question-input",type:"text",placeholder:e.placeholderCopy},domProps:{value:e.question},on:{focus:t=>e.handleFocus(t),blur:t=>e.handleFocusOut(t),keyup:e.inputKeyUp,input:function(t){t.target.composing||(e.question=t.target.value)}}}),e._v(" "),t("ul",{directives:[{name:"show",rawName:"v-show",value:!1,expression:"false && showAutocompleteTopics"}],staticClass:"real-dialog__question__autocomplete",on:{click:t=>e.ask(t.target.textContent),keyup:t=>e.autocompleteTopicKeyUp(t,e.topic)}},e._l(e.autocompleteTopics,function(s,o){return t("li",{key:o,staticClass:"real-dialog__question__autocomplete__item",attrs:{tabindex:"0"}},[t("span",{domProps:{innerHTML:e._s(s)}})])}),0)]),e._v(" "),t("div",{directives:[{name:"show",rawName:"v-show",value:e.showInputError,expression:"showInputError"}],staticClass:"real-dialog__question__input__error-message--mobile"},[t("span",{staticClass:"real-dialog__question__input__error-message__item",domProps:{textContent:e._s(e.questionInputErrorCopy)}})]),e._v(" "),t("button",{staticClass:"real-dialog__question__button",staticStyle:{margin:"0"},domProps:{textContent:e._s(e.submitCopy)},on:{click:function(t){return e.ask(e.question)}}})]),e._v(" "),t("div",{staticClass:"real-dialog__question__input__error-message"},[t("span",{directives:[{name:"show",rawName:"v-show",value:e.showInputError,expression:"showInputError"}],staticClass:"real-dialog__question__input__error-message__item",domProps:{textContent:e._s(e.questionInputErrorCopy)}})])]),e._v(" "),t("div",{staticClass:"real-dialog__feedback__area"},[t("div",{directives:[{name:"show",rawName:"v-show",value:e.showFeedbackQuestion,expression:"showFeedbackQuestion"}],staticClass:"real-dialog__feedback"},[t("span",{staticClass:"real-dialog__feedback__question-copy",domProps:{textContent:e._s(e.feedbackQuestionCopy)}}),e._v(" "),t("div",{staticClass:"real-dialog__feedback__button__wrapper"},[t("button",{staticClass:"real-dialog__button",domProps:{textContent:e._s(e.feedbackButtonYesCopy)},on:{click:function(t){return e.feedbackAnswer(!0)}}}),e._v(" "),t("button",{staticClass:"real-dialog__button",domProps:{textContent:e._s(e.feedbackButtonNoCopy)},on:{click:function(t){return e.feedbackAnswer(!1)}}})])])]),e._v(" "),t("div",{staticClass:"real-dialog__related-topics__area"},[t("div",{directives:[{name:"show",rawName:"v-show",value:e.showRelatedTopics,expression:"showRelatedTopics"}],staticClass:"real-dialog__related-topics"},[t("span",{staticClass:"real-dialog__related-topics__copy",domProps:{textContent:e._s(e.relatedTopicsCopy)}}),e._v(" "),t("ul",{directives:[{name:"show",rawName:"v-show",value:e.relatedTopics.length>0,expression:"relatedTopics.length > 0"}]},e._l(e.relatedTopics,function(s){return t("li",{key:s},[t("button",{staticClass:"real-dialog__related-topics__button",domProps:{textContent:e._s(s)},on:{click:function(t){return e.ask(s)}}})])}),0)])])])},a=[],n=s(2505),r=s.n(n),l=s(3547),c={name:"RealDialog",props:{feedbackButtonNoCopy:{default:"No",type:String},feedbackButtonNoLink:{default:null,type:String},feedbackButtonYesCopy:{default:"Yes",type:String},feedbackQuestionCopy:{default:"Did we answer your question?",type:String},questionCopy:{default:"Enter your question",type:String},questionInputErrorCopy:{default:"",type:String},relatedTopicsCopy:{default:"Related topics",type:String},submitCopy:{default:"Submit",type:String},userNameCopy:{default:"You",type:String},placeholderCopy:{default:"Type your question here",type:String},webServicePrefix:{required:!0,type:String}},data:()=>({autocompleteTopics:[],chatMessages:[],hideAutocompleteTopics:!1,question:"",questionInputError:!1,relatedTopics:[],sessionId:"",showFeedbackQuestion:!1,showRelatedTopics:!1}),computed:{showInputError(){return 0===this.question.length&&this.questionInputError},showAutocompleteTopics(){return!this.hideAutocompleteTopics&&this.autocompleteTopics.length>0}},watch:{chatMessages:{deep:!0,handler(){this.$nextTick(()=>this.scrollToCurrentAnswer())}}},mounted(){this.initializeRealDialog(),(0,o.DT)(),window.addEventListener("faqAnchor",e=>this.faqAnchor(e))},beforeDestroy(){window.removeEventListener("faqAnchor",e=>this.faqAnchor(e))},methods:{faqAnchor(e){const t=document.querySelector(".accordion__item:last-of-type"),s=t.querySelector(".accordion__trigger"),o=t.querySelector(".accordion__show"),i=document.querySelector(".real-dialog__question__input"),a=e.detail.param;s.classList.contains("is-active")||o.click(),setTimeout(()=>{i.focus(),this.ask(a)},500)},handleFocus(){this.autocompleteTopics&&this.setHideAutocompleteTopics(!1)},handleFocusOut(e){e.relatedTarget||this.setHideAutocompleteTopics(!0)},autocompleteTopicKeyUp(e,t){"Enter"===e.key&&this.ask(t)},ask(e){const t=this.$sanitize(e,{allowedTags:[],allowedAttributes:{}});t.length<1?this.questionInputError=!0:(this.questionInputError=!1,this.chatMessages.push(`<span class='real-dialog__chat__user-name'>${this.userNameCopy}</span>: ${t}`),this.getAnswer(t),this.question="",this.autocompleteTopics=[],this.hideAutocompleteTopics=!0)}

1,feedbackAnswer(e){e?this.showFeedbackQuestion=!1:this.feedbackButtonNoLink?window.location.href=this.feedbackButtonNoLink:this.showFeedbackQuestion=!1},getAnswer(e){const t=`${this.webServicePrefix}/ask?question=${e}&sessionid=${this.sessionId}`,s=e=>{const{data:t}=e;this.showRelatedTopics=!0,t.SessionId&&(this.sessionId=t.SessionId),t.Answer&&(this.chatMessages.push(`<span class='real-dialog__chat__user-name'>Maybelline</span>: ${t.Answer}`),this.showFeedbackQuestion=!0),t.RelatedTopics&&Object.values(t.RelatedTopics).length>0&&(this.relatedTopics=Object.values(t.RelatedTopics))};r().get(t).then(s)},getAutocomplete(e){if(e.length<1)return;const t=`${this.webServicePrefix}/autocomplete?question=${e}&sessionid=${this.sessionId}`,s=e=>{const{data:t}=e;this.question.length>0&&(this.autocompleteTopics=t.Suggestions||[],this.hideAutocompleteTopics=!1)};r().get(t).then(s)},initializeRealDialog(){const e=`${this.webServicePrefix}/ask`,t=e=>{const{data:t}=e;t.SessionId&&(this.sessionId=t.SessionId)};r().get(e).then(t)},inputKeyUp:(0,l.s)(function(e){if("Enter"===e.key)return void this.ask(this.question);const t=["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"];t.includes(e.key)||(this.question.length>0?this.getAutocomplete(this.question):(this.autocompleteTopics=[],this.hideAutocompleteTopics=!0))},600),scrollToCurrentAnswer(){const e=this.$refs.chat,t=this.chatMessages.length-1,s=this.$refs[`chat-message--${t}`][0],o=30,i=e.scrollHeight-s.offsetHeight-o;e.scrollTop=i},setHideAutocompleteTopics(e){this.hideAutocompleteTopics=e}}},u=c,p=s(1656),d=(0,p.A)(u,i,a,!1,null,null,null),_=d.exports,h=(0,o.fC)({components:{RealDialog:_}})}}]);