https://www.mokkup.ai/_next/static/chunks/3045-552451c9f28617b7e41f.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3045],{3045:function(e,n,s){s.d(n,{Z:function(){return Z}});var t=s(7294),a=s(682),i=s(4051),r=s(1555),c=s(5204),l=s(2280),o=s(4942),d=s(4651),u=s(5005),h=s(2258),m=s(4080),p=s(9636),v=s(5893);function g(e,n){var s=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),s.push.apply(s,t)}return s}function f(e){for(var n=1;n<arguments.length;n++){var s=null!=arguments[n]?arguments[n]:{};n%2?g(Object(s),!0).forEach((function(n){(0,o.Z)(e,n,s[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(s)):g(Object(s)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(s,n))}))}return e}function x(e){var n=e.id,s=(0,t.useState)(""),a=s[0],i=s[1],r=(0,t.useState)({}),c=r[0],l=r[1],g=(0,t.useState)(!1),x=g[0],j=g[1],b=(0,t.useState)(!1),y=b[0],k=b[1],w=(0,t.useState)(0),N=w[0],C=w[1],S=((0,d.useRouter)(),function(){window.open("https://www.mokkup.ai/contact","_blank")}),Z=["This article didn\u2019t answer my questions or solve my problem","I found this article confusing or difficult to understand","I don\u2019t like how the feature works","Other"],E=function(e){e.preventDefault();var s={message:c.message&&""!=c.message?c.message:Z[N],is_positive:"yes"==a};p.Z.post("".concat(m.U.HELP_ARTICLES,"/").concat(n,"/feedback"),s).then((function(e){k(!0),j(!1)})).catch((function(e){k(!0),j(!0)}))},_=function(e){var n=e.target.name,s=e.target.value;"message"==n&&e.target.value.length<=250&&l(f(f({},c),{},(0,o.Z)({},n,s)))};return(0,t.useEffect)((function(){l({})}),[a]),(0,v.jsxs)("div",{className:"feedback",children:[(0,v.jsx)("hr",{}),y?(0,v.jsx)("div",{className:"success-block",children:x?(0,v.jsxs)("p",{className:"tip-note error tip-padding",children:[(0,v.jsx)("img",{draggable:!1,src:"/assests/icons/feedback-error.svg",alt:""}),(0,v.jsx)("span",{children:(0,v.jsx)("div",{children:(0,v.jsx)("span",{className:"error-statement",children:"Something went wrong! Your Feedback was not submitted."})})}),(0,v.jsx)("span",{className:"try-again",onClick:function(){return k(!1),void i("")},children:"Try Again"})]}):(0,v.jsxs)("p",{className:"tip-note tip tip-padding feedback-success",children:[(0,v.jsx)("img",{draggable:!1,src:"/assests/icons/feedback-tick.svg",alt:""}),(0,v.jsx)("span",{children:"yes"==a?(0,v.jsx)(v.Fragment,{children:"Thanks for submitting your valuable feedback."}):(0,v.jsxs)(v.Fragment,{children:["We appreciate your input on how to make this article better.",(0,v.jsx)("br",{}),(0,v.jsxs)("span",{className:"link",children:["If you require further assistance, please don't hesitate to contact our",(0,v.jsx)("span",{onClick:function(){return S()},children:" Support "}),"team."]})]})})]})}):(0,v.jsxs)(v.Fragment,{children:[(0,v.jsxs)("div",{className:"question",children:[(0,v.jsx)("h3",{children:"Was this article helpful?"}),(0,v.jsxs)("div",{className:"options",children:[(0,v.jsx)(u.Z,{className:"options-btn ".concat("yes"==a?"active":"","  focus-visible:outline"),color:"primary",onClick:function(){return i("yes")},children:"Yes, Thanks!"}),(0,v.jsx)(u.Z,{className:"options-btn ".concat("no"==a?"active":""," focus-visible:outline"),color:"primary",onClick:function(){return i("no")},children:"Not Really."})]})]}),(0,v.jsx)("div",{className:"form-div",children:"yes"==a?(0,v.jsx)(v.Fragment,{children:(0,v.jsxs)(h.Z,{children:[(0,v.jsxs)(h.Z.Group,{controlId:"form.Textarea",children:[(0,v.jsx)(h.Z.Label,{style:{marginBottom:"20px",fontSize:"16px"},children:"What did you like about this article/tutorial?"}),(0,v.jsx)(h.Z.Control,{as:"textarea",onChange:_,name:"message",value:null===c||void 0===c?void 0:c.message,placeholder:"Enter your message here...",rows:3,required:!0}),(0,v.jsxs)("span",{children:[null!==c&&void 0!==c&&c.message?c.message.length:0,"/250"]})]}),(0,v.jsx)("div",{className:"btn-group-submit",children:(0,v.jsx)(u.Z,{className:"send-msg",color:"primary",type:"submit",onClick:function(e){return E(e)},children:"Submit Feedback"})})]})}):"no"==a?(0,v.jsxs)(v.Fragment,{children:[(0,v.jsxs)(h.Z,{children:[(0,v.jsx)(h.Z.Label,{style:{marginBottom:"20px",fontSize:"16px"},children:"Apologies! What aspect did you find least beneficial?"}),Z&&Z.length>0&&Z.map((function(e,n){return(0,v.jsx)(h.Z.Group,{controlId:"form.radio",children:(0,v.jsx)(h.Z.Check,{type:"radio",label:e,checked:n===N,name:e,onClick:function(){return function(e){C(e)}(n)}})},n)})),N&&3==N?(0,v.jsxs)(h.Z.Group,{controlId:"form.Textarea",children:[(0,v.jsx)(h.Z.Control,{as:"textarea",onChange:_,name:"message",value:null===c||void 0===c?void 0:c.message,placeholder:"Enter your message here...",rows:3,required:!0}),(0,v.jsxs)("span",{children:[null!==c&&void 0!==c&&c.message?c.message.length:0,"/250"]})]}):"",(0,v.jsx)("div",{className:"btn-group-submit",children:(0,v.jsx)(u.Z,{className:"send-msg",color:"primary",type:"submit",onClick:function(e){return E(e)},children:"Submit Feedback"})})]}),(0,v.jsxs)("div",{className:"add-info",children:[(0,v.jsx)("hr",{}),(0,v.jsxs)("p",{children:["If you would like to get a reply from the Mokkup support team, please create a ticket ",(0,v.jsx)("span",{onClick:function(){return S()},children:"here"}),"."]})]})]}):""})]}),(0,v.jsx)("hr",{})]})}var j=s(1664);function b(e){var n=e.similar;(0,d.useRouter)();return(0,v.jsx)("div",{className:"similar-articles",children:(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)("h2",{children:"Similar articles"}),(0,v.jsx)("div",{className:"list-block",children:(0,v.jsx)(i.Z,{children:n&&n.length>0&&n.map((function(e,n){var s;

1return(0,v.jsx)(r.Z,{md:6,sm:12,lg:6,className:"col-padding",children:(0,v.jsx)(j.default,{href:"/help/article/".concat(e.slug),children:(0,v.jsx)("a",{className:"a-tag-no-decoration",children:(0,v.jsxs)("div",{className:"article-block",children:[(0,v.jsx)("div",{className:"icon",children:(0,v.jsx)("img",{draggable:!1,src:null===(s=e.category)||void 0===s?void 0:s.icon1_url,alt:""})}),(0,v.jsxs)("div",{className:"article-desc-text",children:[(0,v.jsx)("h4",{role:"heading","aria-level":"3",className:"category",children:e.category.name}),(0,v.jsx)("p",{className:"article-name",children:e.title})]})]})})})})}))})})]})})}function y(e){var n=e.id,s=e.data,a=e.similar,i=e.open,r=e.setOpen,c=e.addEventListener,l=function(){if(document)for(var e,n=null===(e=document)||void 0===e?void 0:e.querySelectorAll("h2"),s=0;s<n.length;s++){var t,a=null===(t=n[s])||void 0===t?void 0:t.getBoundingClientRect();if(a&&a.top>=0&&a.left>=0&&a.right<=window.innerWidth&&a.bottom<=window.innerHeight){i!=n[s].id&&r(s);break}}};return(0,t.useEffect)((function(){c||window.removeEventListener("scroll",l,!0),c&&window.addEventListener("scroll",l,!0)}),[c]),(0,v.jsxs)("div",{className:"article-content",children:[(0,v.jsxs)("div",{className:"content ",children:[(0,v.jsx)("h1",{children:s&&s.title}),(0,v.jsx)("div",{dangerouslySetInnerHTML:{__html:s.content}})]}),(0,v.jsx)(x,{id:n}),(0,v.jsx)(b,{id:n,similar:a})]})}var k=s(9966),w=s(6261);function N(e){var n=e.open,s=(e.setOpen,e.data),a=e.setAddEventListener,i=(0,t.useState)(!1),r=i[0],c=i[1],l=(0,t.useState)([]),o=l[0],d=l[1],u=function(e){a(!1),a(!0)};return(0,t.useEffect)((function(){s&&s.menu_items&&d(JSON.parse(s.menu_items))}),[s]),(0,v.jsxs)(v.Fragment,{children:[(0,v.jsxs)("div",{className:"cat-sidebar article-section art-searchbar",children:[(0,v.jsx)("h4",{children:"IN THIS ARTICLE"}),(0,v.jsx)("ul",{className:"cat",children:o&&o.map((function(e,s){return(0,v.jsx)(v.Fragment,{children:(0,v.jsx)("li",{className:"".concat(s==n?"active":""),children:(0,v.jsx)(w.rU,{activeClass:!0,to:e,spy:!0,scroll:!0,offset:-160,delay:5,duration:50,onClick:function(){return u()},tabIndex:0,onKeyDown:function(e){"Enter"!==e.key&&" "!==e.key||u()},style:{color:s==n&&"var(--text-active-color)",display:"block",width:"100%",cursor:"pointer"},children:e})})})}))})]}),(0,v.jsxs)("div",{className:"cat-sidebar responsive help-art-dropdown ".concat(r?"active-border":""),children:[(0,v.jsx)("div",{className:"menu ".concat(r?"inactive-border":"active-border"),children:(0,v.jsxs)("h4",{onClick:function(){c(!r)},children:["IN THIS ARTICLE",(0,v.jsx)("span",{children:(0,v.jsx)("i",{className:r?"fa fa-chevron-up":"fa fa-chevron-down"})})]})}),(0,v.jsx)(k.Z,{in:r,children:(0,v.jsx)("ul",{className:"cat active-border-menu left-padding",children:o&&o.map((function(e,s){return(0,v.jsx)(v.Fragment,{children:(0,v.jsx)(w.rU,{activeClass:!0,to:e,spy:!0,scroll:!0,offset:-30,delay:5,duration:50,children:(0,v.jsx)("li",{className:"".concat(s==n?"active":""),onClick:function(){return u()},children:e})})})}))})})]})]})}var C=s(6269),S=s(2278);function Z(e){var n,s=e.initialArticleData,o=void 0===s?null:s,u=(0,d.useRouter)(),h=u.query.id,g=(0,t.useState)(!o),f=g[0],x=g[1],j=(0,t.useState)(!1),b=j[0],k=j[1],w=(0,t.useState)(o||null),Z=w[0],E=w[1],_=(0,t.useState)(!1),I=_[0],L=_[1],O=(0,t.useState)(0),T=O[0],F=O[1],A=(0,t.useState)(""),q=(A[0],A[1],(0,t.useState)(!0)),H=q[0],R=q[1],W=u.pathname.includes("/draft/");return(0,t.useEffect)((function(){!h||o&&(null===o||void 0===o?void 0:o.slug)===h||function(){x(!0);var e=W?"".concat(m.U.DRAFT_HELP_ARTICLES,"/").concat(h):"".concat(m.U.HELP_ARTICLES,"/").concat(h);p.Z.get(e).then((function(e){E(e.content),x(!1),k(!1)})).catch((function(e){var n;404===(null===e||void 0===e||null===(n=e.status)||void 0===n?void 0:n.code)?(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"page_not_found",slug:h}),u.push("/404")):(x(!1),k(!0))}))}()}),[h]),(0,t.useEffect)((function(){Z&&function(){var e;p.Z.get("".concat(m.U.HELP_ARTICLES,"?sub_category=").concat(null===Z||void 0===Z||null===(e=Z.sub_category)||void 0===e?void 0:e.slug,"&per_page_items=4&current_article_id=").concat(null===Z||void 0===Z?void 0:Z.id)).then((function(e){L(e.content.articles)})).catch((function(e){}))}()}),[Z]),(0,v.jsxs)("div",{className:"help-center-wrapper",children:[(0,v.jsx)("noscript",{dangerouslySetInnerHTML:{__html:'<iframe src="/gtg1/ns.html?id=GTM-KHBCD2D" height="0" width="0" style="display:none;visibility:hidden"></iframe>'}}),!1,(0,v.jsx)("div",{className:"help-header-div",children:(0,v.jsx)(c.Z,{})}),(0,v.jsx)(a.Z,{children:f?(0,v.jsx)(S.Z,{view:"helpArticleLazy"}):b?(0,v.jsx)(l._,{}):(0,v.jsxs)(v.Fragment,{children:[(0,v.jsxs)("div",{className:"navigation",role:"navigation",children:[(0,v.jsx)("span",{className:"prev-page",onClick:function(){u.push("/help")},children:"Help center "}),(0,v.jsx)("span",{style:{color:"#6E727C"},children:"\xa0\xa0>\xa0\xa0"}),(0,v.jsx)("span",{className:"prev-page",onClick:function(){var e,n;return n=null===Z||void 0===Z||null===(e=Z.category)||void 0===e?void 0:e.slug,void u.push("/help/categories?cat=".concat(n))},children:null===Z||void 0===Z||null===(n=Z.category)||void 0===n?void 0:n.name}),(0,v.jsx)("span",{style:{color:"#6E727C"},children:"\xa0\xa0>\xa0\xa0"}),null===Z||void 0===Z?void 0:Z.title,(0,v.jsx)("hr",{})]}),(0,v.jsx)("div",{className:"listing article",children:(0,v.jsxs)(i.Z,{children:[(0,v.jsx)(r.Z,{sm:12,md:12,lg:4,children:(0,v.jsx)(N,{setOpen:F,open:T,data:Z,setAddEventListener:R})}),(0,v.jsx)(r.Z,{sm:12,md:12,lg:8,children:(0,v.jsx)(y,{id:h,data:Z,similar:I,open:T,setOpen:F,addEventListener:H})})]})})]})}),(0,v.jsx)("div",{className:"border-color-overwrite",children:(0,v.jsx)(C.Z,{})})]})}},5204:function(e,n,s){s.d(n,{Z:function(){return d}});var t=s(7294),a=s(4651),i=s(682),r=s(4716),c=s(5005),l=s(4966),o=s(5893);function d(e){e.loader,e.error,e.popularTags;var n=(0,a.useRouter)(),s=(0,t.useState)(""),d=s[0],u=s[1],h=(0,t.useState)(!1),m=(h[0],h[1]),p=function(){window.open("https://www.mokkup.ai/contact","_blank")},v=function(e){"Enter"==e.code&&e.target.value.length&&n.push("/help/search?query=".concat(e.target.value))},g=function(){document.getElementById("search")&&(document.getElementById("search").value="",n.push("/help"))},f=(0,t.useState)({winWidth:window.innerWidth}),x=f[0],j=f[1],b=function(){j({winWidth:window.innerWidth})};(0,t.useEffect)((function(){return window.addEventListener("resize",b),function(){window.removeEventListener("resize",b)}}),[x]),(0,t.useEffect)((function(){u(null===n||void 0===n?void 0:n.query.query

1)}),[]);return(0,t.useEffect)((function(){(0,l.Z)(),m(!1)}),[]),(0,o.jsx)(o.Fragment,{children:(0,o.jsx)("div",{className:"navbars",role:"navigation","aria-label":"Main navigation",children:(0,o.jsx)(i.Z,{children:n&&"/help"!==n.pathname?(0,o.jsxs)("div",{className:"home-mobile",children:[(0,o.jsxs)("div",{className:"home-desktop",children:[(0,o.jsx)("div",{role:"menu",style:{display:"flex",alignItems:"center"},children:(0,o.jsx)("img",{draggable:!1,role:"menuitem",tabIndex:0,src:"/assests/icons/Helpcenter-logo1.svg",style:{cursor:"pointer"},onClick:function(){n.push("/help")},alt:"online dashboard wireframe tool | Mokkup.ai "})}),(0,o.jsxs)("div",{className:"d-flex",children:[x.winWidth>"991"&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.Z,{className:"search-input search-icon-bg",onChange:function(e){u(e.target.value)},defaultValue:null===n||void 0===n?void 0:n.query.query,value:d,placeholder:"Search for articles, tutorials,etc","aria-label":"Search",id:"search",onKeyDown:v}),d&&(0,o.jsx)("img",{draggable:!1,role:"button",tabIndex:0,className:"search-cancel",onClick:function(){g()},src:"/assests/icons/search-cancel.svg",alt:"Cancel search"})]}),x.winWidth<="991"?(0,o.jsx)("img",{draggable:!1,src:"/assests/help-center/contact-icon.svg",alt:"",onClick:function(){return p()},className:"contact-icon icon-display"}):(0,o.jsx)(c.Z,{onClick:function(){return p()},className:"contact-us-btn btn-display",children:"Contact Us"})]})]}),x.winWidth<="991"&&(0,o.jsx)("div",{className:"search-responsive",children:(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.Z,{className:"search-input search-icon-bg",onChange:function(e){u(e.target.value)},defaultValue:null===n||void 0===n?void 0:n.query.query,value:d,placeholder:"Search for articles, tutorials,etc",id:"search",onKeyDown:v,"aria-label":"Search"}),d&&(0,o.jsx)("img",{draggable:!1,role:"button",tabIndex:0,className:"search-cancel",onClick:function(){g()},src:"/assests/icons/search-cancel.svg",alt:"Cancel search"})]})})]}):(0,o.jsx)(o.Fragment,{children:(0,o.jsxs)("div",{className:"home-desktop",children:[(0,o.jsx)("div",{role:"menu",style:{display:"flex",alignItems:"center"},children:(0,o.jsx)("img",{draggable:!1,role:"menuitem",tabIndex:0,src:"/assests/icons/Helpcenter-logo1.svg",style:{cursor:"pointer"},onClick:function(){n.push("/help")},alt:"online dashboard wireframe tool | Mokkup.ai "})}),(0,o.jsx)("div",{children:x.winWidth<="991"?(0,o.jsx)("img",{draggable:!1,src:"/assests/help-center/contact-icon.svg",alt:"",onClick:function(){return p()},className:"contact-icon icon-display"}):(0,o.jsx)(c.Z,{onClick:function(){return p()},className:"contact-us-btn btn-display focus-visible:outline",children:"Contact Us"})})]})})})})})}},2280:function(e,n,s){s.d(n,{_:function(){return i}});var t=s(6459),a=(s(7294),s(5893));function i(e){return(0,t.Z)(e),(0,a.jsx)("div",{className:"no-results",children:(0,a.jsxs)("div",{className:"no-block",children:[(0,a.jsx)("h3",{children:"Oops! Something is wrong"}),(0,a.jsx)("p",{children:"Try refreshing the page or check again in some time."})]})})}}

1,4966:function(e,n){n.Z=function(){var e=navigator.userAgent;return/android|iphone|kindle|ipad/i.test(e)}}}]);