"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8747],{8747:function(t,n,e){e.r(n),e.d(n,{default:function(){return y}});var o=e(6042),r=e(9534),i=e(7297);var l=e(5893),a=e(3967),d=e.n(a),c=e(1664),s=e.n(c),p=e(5697),u=e.n(p),v=e(7294),f=e(4141),h=e(6578),m=e(2626),g=e(4865);function b(){var t=(0,i.Z)(["\n\t--profile-color-border: var(--color-text);\n\t--profile-color-devider: var(--header-nav-item-divider);\n\t--profile-color-background: var(--header-nav-dropdown-background);\n\t--profile-color-item-background: var(--header-nav-item-background);\n\t--profile-color-item-background-hover: var(--header-nav-item-background-hover);\n\t--profile-color: var(--header-nav-dropdown-link);\n\t--profile-color-hover: var(--header-nav-dropdown-link-hover);\n\t--profile-mobile-color: var(--header-nav-item-link);\n\t--profile-mobile-color-hover: var(--header-nav-item-link-hover);\n\t--profile-color-title: var(--color-text);\n\n\t&.opened, &.mobile {\n\t\t--profile-color-title: var(--profile-color);\n\t}\n\t\n\t&.profile-wrapper {\n\t\tcolor: var(--profile-color);\n\t\tpadding: 0.5em 1.25em .5em .5em;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tposition: relative;\n\t\theight: 100%;\n\t\tz-index: 111;\n\t\t\n\t\t&:before {\n\t\t\tmargin: 0 1.25em 0 0;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\twidth: 1px;\n\t\t\theight: 1.65em;\n\t\t\topacity: 0.2;\n\t\t\tborder-left: 1px solid var(--profile-color-border);\n\t\t}\n\t}\n\t\n\t&.loading {\n\t\tpointer-events: none;\n\t}\n\t\n\t.profile {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tz-index: 1;\n\t\tmin-width: 0;\n\t\theight: 100%;\n\t\tposition: relative;\n\t\tcursor: pointer;\n\n\t\t& > div:not(:last-child) {\n\t\t\tmargin-right: 0.66rem;\n\t\t}\n\n\t\t&-loyalty {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\ttext-align: right;\n\t\t\tline-height: 1.3;\n\n\t\t\t&-title {\n\t\t\t\topacity: 0.66;\n\t\t\t\tfont-size: 0.66em;\n\t\t\t\tcolor: var(--profile-color-title)\n\t\t\t}\n\n\t\t\t&-balance {\n\t\t\t\tfont-size: small;\n\t\t\t\tcolor: var(--profile-color-title)\n\t\t\t}\n\t\t}\n\t\t\n\t\t&-avatar {\n\t\t\twidth: 2.5rem;\n\t\t\theight: 2.5rem;\n\t\t\tborder-radius: 2.5rem;\n\t\t\tbackground-color: var(--color-backgroundShaded);\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\toverflow: hidden;\n\t\t\tflex-shrink: 0;\n\t\t\t\n\t\t\t&.loading-spinner:before {\n\t\t\t\tcontent: '';\n\t\t\t}\n\t\n\t\t\timg {\n\t\t\t\tfont-size: 0;\n\t\t\t\t&.error {\n\t\t\t\t\topacity: 0;\n\t\t\t\t}\n\t\t\t}\n\t\n\t\t\t&:before {\n\t\t\t\tcontent: attr(data-name);\n\t\t\t\tdisplay: block;\n\t\t\t\tposition: absolute;\n\t\t\t\tfont-weight: bolder;\n\t\t\t\tcolor: var(--color-textShaded);\n\t\t\t}\n\t\t}\n\t\t\n\t\t&-name {\n\t\t\tline-height: 1;\n\t\t\tcolor: var(--profile-color-title);\n\t\t\ttransition: color 0.2s cubic-bezier(0.33, 1, 0.68, 1);\n\t\t\tmax-width: 15ch;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t\t\n\t\t&-dropdown {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tpadding-top: ",";\n\t\t\twidth: calc(100% - .5em);\n\t\t\tmax-width: 100vw;\n\t\t\talign-self: flex-start;\n\t\t\tbox-sizing: content-box;\n\t\t\tanimation: fadeIn 0.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;\n\t\t\twill-change: opacity, transform;\n\t\t\tbackground: var(--profile-color-background);\n\t\t\toverflow: hidden;\n\t\t\tborder-radius: 0.3rem;\n\t\t\tmargin-top: -2px;\n\t\n\t\t\t@media (min-width: ",") {// 90em wide screen\n\t\t\t\tborder-radius: 0.3rem;\n\t\t\t}\n\t\n\t\t\t@keyframes fadeIn {\n\t\t\t\t0% {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\ttransform: translate(0, -0.5rem) scale(0.96);\n\t\t\t\t}\n\t\t\t\t100% {\n\t\t\t\t\topacity: 1;\n\t\t\t\t\ttransform: translate(0, 0) scale(1);\n\t\t\t\t}\n\t\t\t}\n\t\t\t\n\t\t\t&-menu {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tbackground: var(--profile-color-background);\n\t\t\t\tz-index: 1;\n\t\t\t\tmargin-top: -1px;\n\t\t\t\tborder-top: 1px solid var(--profile-color-devider);\n\t\t\t\tmin-width: 150px;\n\t\t\t\t\n\t\t\t\t&-item {\n\t\t\t\t\tpadding: 0.5em 1em;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\t\tbackground-color: var(--profile-color-item-background);\n\t\t\t\t\ttransition: var(--site-transition);\n\t\t\t\t\ttransition-property: background-color, color, filter;\n\t\t\t\t\tcolor: var(--profile-color);\n\t\t\t\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground-color: var(--profile-color-item-background-hover);\n\t\t\t\t\t\tcolor: var(--profile-color-hover);\n\t\t\t\t\t\tfilter: brightness(1.15);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&.mobile {\n\t\t&.profile-wrapper {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\theight: auto;\n\t\t\tflex-direction: column;\n\t\t\tborder-bottom: 2px solid var(--color-primaryShaded);\n\n\t\t\t&:before {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t\t.profile {\n\t\t\theight: 60px;\n\t\t\twidth: 100%;\n\t\t\tpadding: 1em 0.5em;\n\t\t\t\n\t\t\t&-dropdown {\n\t\t\t\tmin-width: 100%;\n\t\t\t\tposition: initial;\n\t\t\t\tborder-radius: 0;\n\t\t\t\tright: 0;\n\t\t\t\tpadding-top: 0;\n\t\t\t\tbackground-color: unset;\n\t\t\t\t\n\t\t\t\t&-menu {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\tbackground-color: unset;\n\t\t\t\t\tmargin-bottom: 1.5em;\n\t\t\t\t\t\n\t\t\t\t\t&-item {\n\t\t\t\t\t\tbackground-color: unset;\n\t\t\t\t\t\tline-height: 1;\n\t\t\t\t\t\tpadding: 1em 0.5em;\n\t\t\t\t\t\tborder-top: 1px solid var(--profile-color-devider);\n\t\t\t\t\t\tcolor: var(--profile-mobile-color);\n\t\t\t\t\t\t\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\tcolor: var(--profile-mobile-color-hover);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n"]);return b=function(){return t},t}var x={done:g.done,start:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;return setTimeout(g.start,t)}},w=function(t,n){t=null!==t?t:function(t){throw t}(new TypeError("Cannot destructure undefined"));var e=n.api,o=n.getAuthModal,r=n.initApi,i=n.initialProps,a=n.isMobile,c=n.setSiteState,p=n.siteState,u=n.siteState,f=u.loyalty,g=u.session,b=u.isUserLoading,w=u.profile,y=void 0===w?{}:w;if(!i.appKey)return null;var j=[null===y||void 0===y?void 0:y.first_name,(null===y||void 0===y?void 0:y.last_name)||(null===y||void 0===y?void 0:y.first_name)],N=j[0],S=j[1],z=void 0===S?"i":S,_="".concat((void 0===N?"H":N).substring(0,1)).concat(z.substring(-1,1)),M=(0,v.useState)(a&&!!(null===g||void 0===g?void 0:g.auth)),C=M[0],R=M[1],E=(0,v.useRef)(null),A=(0,v.useRef)(!1),I=function(){var t;A.current=!1,null===(t=o())||void 0===t||t.openModal()},L=function(){return(null===g||void 0===g?void 0:g.auth)&&R((function(t){return a&&!!(null===g||void 0===g?void 0:g.auth)||!t}))},P=function(t){t.preventDefault(),t.stopPropagation(),(null===g||void 0===g?void 0:g.auth)?L():g?I():A.current||(A.current=!0,r(0,I).then())},T=function(){x.start(),e.logout().then((function(){c({session:void 0,profile:void 0,loyalty:void 0})})).finally(x.done),R(!1)};return(0,v.useEffect)((function(){a&&(null===g||void 0===g?void 0:g.auth)&&R(!0)}),[null===g||void 0===g?void 0:g.auth]),(0,v.useMemo)((function(){var t;return(0,l.jsxs)(k,{getRef:E,height:(null===(t=E.current)||void 0===t?void 0:t.clientHeight)||56,className:d()("profile-wrapper",{mobile:a,opened:C,loading:b}),children:[(0,l.jsxs)("div",{className:"profile",onClick:P,onMouseEnter:L,children:[(null===g||void 0===g?void 0:g.auth)&&(null===f||void 0===f?void 0:f.bonus)&&(0,l.jsxs)("div",{className:"profile-loyalty",children:[(0,l.jsx)("div",{className:"profile-loyalty-title",children:"\u0411\u043e\u043d\u0443\u0441\u044b"}),(0,l.jsx)("div",{className:"profile-loyalty-balance",children:f.bonus.balance})]}),(0,l.jsx)("div",{className:d()("profile-avatar",{"loading-spinner":b}),"data-name":_,children:(null===y||void 0===y?void 0:y.avatar)&&(0,l.jsx)(h.default,{src:/^https?:/i.test(y.avatar)?y.avatar:new URL(y.avatar,"https://new.p24.app").href,alt:y.nick_name,cdn:{w:a?40:80,h:a?40:80,filters:{quality:80}}})}),(0,l.jsx)("div",{className:"profile-name",children:(null===g||void 0===g?void 0:g.auth)?(null===y||void 0===y?void 0:y.first_name)||"\u041f\u0440\u043e\u0444\u0438\u043b\u044c":"\u0412\u043e\u0439\u0442\u0438"})]}),C?(0,l.jsx)("div",{className:"profile-dropdown",onMouseLeave:function(){return R(!1)},children:(0,l.jsxs)("div",{className:"profile-dropdown-menu",children:[(0,l.jsx)(s(),{href:"/",as:(0,m.default)(p,{pathname:"/orders"}),children:(0,l.jsx)("a",{className:"profile-dropdown-menu-item",children:"\u041c\u043e\u0438 \u0431\u0438\u043b\u0435\u0442\u044b"})}),(0,l.jsx)("div",{className:"profile-dropdown-menu-item",onClick:T,children:"\u0412\u044b\u0439\u0442\u0438"})]})}):null]})}),[a,C,f,g,y,b])};w.contextTypes={getAuthModal:u().func,api:u().object,reloadUser:u().func,siteState:u().object,setSiteState:u().func,isMobile:u().bool,initialProps:u().object,initApi:u().func};var k=(0,f.default)((function(t){t.height;var n=t.getRef,e=(0,r.Z)(t,["height","getRef"]);return(0,l.jsx)("div",(0,o.Z)({ref:n},e))})).withConfig({componentId:"sc-61cbb1b3-0"})(b(),(function(t){var n=t.height;return"calc(".concat(n,"px + 0.5rem)")}),(function(t){return t.theme.breakpoints[4]})),y=w}}]);