"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1829],{mTnX:function(e,t,r){r.d(t,{A:function(){return AddressInput}});var n=r("HJpP"),i=r("q1tI"),a=r("OAL+"),o=r("aDCK"),l=r("StZb"),s=r("NGsg"),d=r("L+vc"),c=r("+UX+"),u=r("Bw1v"),E=r("yNk5");let generateGetAddressDetail=e=>`${s.g}/cities-data-${c.M[e]}.json`,p={provinceByName:{},provinces:[],districts:[],wards:[],selectedProvince:"",selectedDistrict:"",selectedWard:""},reducer=(e,t)=>{switch(t.type){case"SET_DATA":return Object.assign(Object.assign({},e),t.payload);case"SET_DISTRICTS":return Object.assign(Object.assign({},e),{districts:t.payload});case"SET_WARDS":return Object.assign(Object.assign({},e),{wards:t.payload});case"SELECT_PROVINCE":return Object.assign(Object.assign({},e),{selectedProvince:t.payload,selectedDistrict:"",selectedWard:""});case"SELECT_DISTRICT":return Object.assign(Object.assign({},e),{selectedDistrict:t.payload,selectedWard:""});case"SELECT_WARD":return Object.assign(Object.assign({},e),{selectedWard:t.payload});default:return e}},mappingProvinceId=(e,t)=>{let r={};for(let[,e]of Object.entries(t)){let{id:t}=e;t&&(r[t]=e)}let n={};return e.map(e=>{n[e.name]=r[e.id]}),n},useAddress=({provinces:e})=>{let[t,r]=(0,i.useReducer)(reducer,p),{provinceByName:a,provinces:o,districts:l,wards:s,selectedProvince:d,selectedDistrict:c,selectedWard:_}=t,[T,m]=(0,i.useState)();return(0,i.useEffect)(()=>{(0,n.a)(void 0,void 0,void 0,function*(){var t,n,i;try{let a=yield fetch(generateGetAddressDetail(E.env.UNIFY_LOCALE||u.L.Vietnam)).then(e=>e.json());m(a);let{list:o}=a,l=e?mappingProvinceId(e,o):o,s=Object.keys(l),d=Object.keys((null===(t=o[s[0]])||void 0===t?void 0:t.list)||{}),c=Object.keys((null===(i=null===(n=o[s[0]])||void 0===n?void 0:n[d[0]])||void 0===i?void 0:i.list)||{});r({type:"SET_DATA",payload:{provinceByName:l,provinces:s,districts:d,wards:c}})}catch(e){console.error("Error fetching address data:",e)}})},[E.env.UNIFY_LOCALE]),{provinces:o,districts:l,wards:s,selectedProvince:d,selectedDistrict:c,selectedWard:_,handleProvinceChange:e=>{var t;let n=Object.keys((null===(t=a[e])||void 0===t?void 0:t.list)||{});r({type:"SET_DISTRICTS",payload:n}),r({type:"SET_WARDS",payload:[]}),r({type:"SELECT_PROVINCE",payload:e})},handleDistrictChange:e=>{var t,n;let i=Object.keys((null===(n=null===(t=a[d])||void 0===t?void 0:t.list[e])||void 0===n?void 0:n.list)||{});r({type:"SET_WARDS",payload:i}),r({type:"SELECT_DISTRICT",payload:e})},handleWardChange:e=>{r({type:"SELECT_WARD",payload:e})}}},AddressInput=e=>{var{error:t,provinces:r,placeholder:s}=e,c=(0,n._)(e,["error","provinces","placeholder"]);let{t:u}=(0,d.u)(),{provinces:E,districts:p,wards:_,selectedProvince:T,selectedDistrict:m,selectedWard:S,handleProvinceChange:I,handleDistrictChange:g,handleWardChange:b}=useAddress({provinces:r}),[h,v]=(0,i.useState)("");return(0,i.useEffect)(()=>{T&&m&&S&&h?c.onChange({selectedProvince:T,selectedDistrict:m,selectedWard:S,extraInfo:h}):c.onChange(null)},[T,m,S,h]),i.createElement(l.I.Wrapper,Object.assign({withAsterisk:!0},c),i.createElement(a.K,null,i.createElement(l.S,{placeholder:(null==s?void 0:s.province)||u("onboarding.similac.input.city"),data:r?E:E.sort(),searchable:!0,onChange:I,value:T}),i.createElement(l.S,{placeholder:(null==s?void 0:s.district)||u("onboarding.similac.input.district"),data:p.sort(),searchable:!0,onChange:g,value:m,disabled:!T}),i.createElement(l.S,{placeholder:(null==s?void 0:s.ward)||u("onboarding.similac.input.ward"),searchable:!0,data:_.sort(),value:S,onChange:b,disabled:!T||!m}),i.createElement(l.I,{placeholder:(null==s?void 0:s.address)||u("onboarding.similac.input.no"),disabled:!T||!m||!S,value:h,onChange:v,style:{marginBottom:0}})),i.createElement(o.I.Error,{size:"md"},t))}},BucA:function(e,t,r){r.d(t,{C:function(){return CardLink}});var n=r("HJpP"),i=r("q1tI"),a=r("8vDj"),o=r("ake8"),l=r("oZWv"),s=r("Xfk/"),d=r("rBCA"),c=r("IQVP"),u=r("f2kC");let E=d.Z.div` .link-info-container { padding: 0.5rem 1rem; background: ${e=>e.color||"#f4faff"}; } .link-image-wrapper { position: relative; overflow: hidden; width: 100%; padding-top: min(280px, 56.25%); .link-image-blur { position: absolute; top: 50%; left: 50%; width: 110%; height: 110%; /* Add the blur effect */ -webkit-filter: blur(8px); filter: blur(8px); object-fit: cover; object-position: center; opacity: 0.8; transform: translate(-50%, -50%); } .link-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; } } a { text-decoration: none; } &[data-is-marrybaby='true'] { overflow: hidden; border-radius: 1rem; .link-info-container { padding-bottom: 1rem; p { color: #2661ad; } .link-logo { max-width: 2rem; height: 13px; margin-right: 4px; object-fit: contain; vertical-align: middle; } } .link-image-wrapper { padding-top: min(360px, 56.25%); .link-image { object-fit: cover; } } } `,CardLink=({title:e,url:t,image:r,logo:d,className:p,style:_,noRefetch:T})=>{let{data:{locale:m,env:{isMarryBaby:S}}}=(0,i.useContext)(s.T),[I,g]=(0,i.useState)(!1),b=(0,a.rZ)(),h=(0,i.useRef)(T);h.current=T;let[v,f]=(0,i.useState)(null);(0,i.useEffect)(()=>{(0,n.a)(void 0,void 0,void 0,function*(){if(!h.current){if(!t)return f(null);f(e=>Object.assign(Object.assign({},e),{isFetching:!0})),(0,s.c)((0,s.f)(c.yy.FETCH_PREVIEW,{_locale:m}),"POST",{data:{link:t},headers:{"Content-Type":"application/json"}}).then(e=>{var r,n,i;g(!1),f({title:null===(r=null==e?void 0:e.data)||void 0===r?void 0:r.title,url:t,image:(null===(n=null==e?void 0:e.data)||void 0===n?void 0:n.image)||(null===(i=null==e?void 0:e.data)||void 0===i?void 0:i.logo)})}).catch(()=>{f(null)})}})},[t]);let O=(null==v?void 0:v.image)||r,R=(null==v?void 0:v.title)||e,U=(null==v?void 0:v.logo)||d,N=(null==v?void 0:v.url)||t,A=N.replace("http://","").replace("https://","").split(/[/?#]/),C=A[0],y=(0,i.useRef)(!1);return i.createElement(E,{"data-is-marrybaby":S,className:`${p} no-replace-click`,style:_,color:b.colors[b.primaryColor][0]},i.createElement("a",{href:N,target:"_blank",rel:"noreferrer"},O&&i.createElement("div",{className:"link-image-wrapper"},!S&&i.createElement("img",{className:"link-image-blur",src:O,onError:e=>{y.current||(y.current=!0,e.currentTarget.src=u.a)},loading:"lazy"}),i.createElement("img",{className:"link-image",src:O,onError:e=>{y.current||(y.current=!0,e.currentTarget.src=u.a)},loading:"lazy"})),i.createElement("div",{className:"link-info-container"},i.createElement(l.T,{size:"n1"},S&&U&&!I&&i.createElement("img",{className:"link-logo",src:U,onError:()=>g(!0),loading:"lazy"}),C),i.createElement(o.H,{tag:"h6"},R))))}},KWnV:function(e,t,r){r.r(t),r.d(t,{ProfileChatbot:function(){return ProfileChatbot},TabDataInit:function(){return h},TabName:function(){return a},UserType:function(){return o}});var n,i,a,o,l=r("HJpP"),s=r("q1tI"),d=r("dfDy"),c=r("Owkz"),u=r("Ifaq"),E=r("IQVP"),p=r("Xfk/"),_=r("WedE"),T=r("vWP/"),m=r("4JiQ"),S=r("NJlO"),I=r("Bw1v");r("NmYn"),r("gY0P"),r("Wgwc"),r("QgiU"),r("rBCA");let g=(0,s.createContext)({}),Faqs=({faqs:e})=>{let[t,r]=(0,s.useState)([]),handleClick=e=>{if(t.includes(e)){let n=t.filter(t=>t!==e);r(n)}else r(t=>[...t,e])};return s.createElement("div",{className:"_0NhMo6T"},e.map((e,r)=>{let n=t.includes(r);return s.createElement("div",{className:"nrZtZ-u",key:r},s.createElement("div",{className:"faq-item",onClick:()=>handleClick(r)},s.createElement("div",{className:"faq-question",dangerouslySetInnerHTML:{__html:e.question||""}}),n?s.createElement(_.Z,null):s.createElement(T.Z,null)),s.createElement(m.U,{in:n,className:"faq-answer"},s.createElement("div",{dangerouslySetInnerHTML:{__html:e.answer||""}})))}))};var b={container:"_2ugC2Ll",body:"CCwRHCd",description:"RF63WXG",cardAuthorWrapper:"PIaeC0v"};let formatExperience=e=>e?{title:null==e?void 0:e.title,organization:null==e?void 0:e.organization,duration:e.duration}:{},formatEducation=e=>e?{completedYear:null==e?void 0:e.completed_year,schoolName:e.school_name,study:e.study}:{};(n=a||(a={}))[n.About=0]="About",n[n.Care=1]="Care",n[n.Answer=2]="Answer",n[n.Posts=3]="Posts",(i=o||(o={}))[i.Expert=0]="Expert",i[i.User=1]="User";let h={experiences:[],relatedPosts:[],educations:[],awards:[],contact:{},data:{}},ProfileChatbot=e=>{var{authorProps:t,authActionWrapper:r,onSkipQuestion:n,onCloseFromPost:i,onChatWithBot:a,showSkipQuestionTag:o,currentPageUrl:_}=e,T=(0,l._)(e,["authorProps","authActionWrapper","onSkipQuestion","onCloseFromPost","onChatWithBot","showSkipQuestionTag","currentPageUrl"]);let{data:{locale:m,userInfo:h,env:{isMarryBaby:v}}}=(0,s.useContext)(p.T),f=String(null==t?void 0:t.userId),[O,R]=(0,s.useState)(),[U,N]=(0,s.useState)(!1),[A,C]=(0,s.useState)(),[y,B]=(0,s.useState)([]),[D,M]=(0,s.useState)(""),L=(null==h?void 0:h._togetherUserId)===(null==t?void 0:t.userId),[x,P]=(0,s.useState)(1),k={value:String(x),dataList:[{value:"1",text:"FAQs",content:s.createElement(Faqs,{faqs:y})}],onTabChange:e=>P(Number(e))};return(0,s.useEffect)(()=>{(0,l.a)(void 0,void 0,void 0,function*(){var e,t,r,n,i,a,o,l,s,d,c;N(!0);let _=yield Promise.all([(0,p.c)((0,p.f)(E.yy.USER.DETAIL,{_locale:m,id:f}),"GET"),(0,p.c)((0,p.f)(E.yy.CHATBOT.PROFILE,{_locale:m}),"GET"),(0,p.c)((0,p.f)(E.yy.CHATBOT.FAQS_LIST,{_locale:m}),"GET")]),[T,S,I]=_,g={data:null==T?void 0:T.data,experiences:((null===(t=null===(e=null==T?void 0:T.data)||void 0===e?void 0:e.fields)||void 0===t?void 0:t.experiences)||[]).map(formatExperience),relatedPosts:((null===(r=null==T?void 0:T.data)||void 0===r?void 0:r.related_post)||[]).map(e=>(0,u.b)(e.post)),educations:((null===(i=null===(n=null==T?void 0:T.data)||void 0===n?void 0:n.fields)||void 0===i?void 0:i.educations)||[]).map(formatEducation),awards:(null===(o=null===(a=null==T?void 0:T.data)||void 0===a?void 0:a.fields)||void 0===o?void 0:o.awards_accreditations)||[],contact:(null===(s=null===(l=null==T?void 0:T.data)||void 0===l?void 0:l.fields)||void 0===s?void 0:s.contact)||{}};(null==T?void 0:T.status)===1&&C(g),B((null===(d=null==I?void 0:I.data)||void 0===d?void 0:d.faqs)||[]),M((null===(c=null==S?void 0:S.data)||void 0===c?void 0:c.description)||""),N(!1)})},[]),s.createElement(g.Provider,{value:{isMarryBaby:v,siteType:v?"marryBaby":"helloSites",authorId:String((null==t?void 0:t.userId)||""),authActionWrapper:r,onSkipQuestion:n,info:A,authorProps:t,onCloseFromPost:i,countValues:O,setCountValues:R,isAuthorLogin:L,showSkipQuestionTag:o,currentPageUrl:_}},s.createElement("div",Object.assign({},T,{className:`${b.container} ${(null==T?void 0:T.className)||""}`,"data-is-marrybaby":v}),U?s.createElement(c.L,null):s.createElement(s.Fragment,null,s.createElement("div",{className:b.cardAuthorWrapper},s.createElement(S.C,Object.assign({},t,{className:"card-author",showDetailPopup:!1,showChatbotButton:m===I.L.Vietnam,onChatWithBot:a}))),s.createElement("div",{className:b.description,dangerouslySetInnerHTML:{__html:D}}),y.length>0&&s.createElement("div",{className:b.body},s.createElement(d.T,Object.assign({},k))))))}},BKNC:function(e,t,r){r.d(t,{B:function(){return m},C:function(){return D},E:function(){return y},F:function(){return C},G:function(){return T},N:function(){return v},S:function(){return U},V:function(){return R},a:function(){return S},c:function(){return b},d:function(){return h},e:function(){return A},f:function(){return f},g:function(){return O},h:function(){return B},i:function(){return M}});var n,i,a,o,l,s,d,c,u,E,p,_,T,m,S,I,g,b,h,v,f,O,R,U,N=r("Bw1v");(n=T||(T={})).Boy="boy",n.Girl="girl",(i=m||(m={}))[i.Height=0]="Height",i[i.Weight=1]="Weight",i[i.Head=2]="Head",i[i.BMI=3]="BMI",(a=S||(S={}))[a.Weekly=0]="Weekly",a[a.Monthly=1]="Monthly",a[a.Yearly=2]="Yearly",(o=I||(I={}))[o.Height=0]="Height",o[o.Weight=1]="Weight",o[o.Head=2]="Head",o[o.BMI=3]="BMI",o[o.Record=4]="Record",(l=g||(g={}))[l.Phone=0]="Phone",l[l.OTP=1]="OTP",l[l.OTPEmail=2]="OTPEmail",l[l.PersonalInfo=3]="PersonalInfo",l[l.UpdatePassword=4]="UpdatePassword",l[l.Result=5]="Result",l[l.DynamicForm=6]="DynamicForm",(s=b||(b={}))[s.HEAD=0]="HEAD",s[s.TAIL=1]="TAIL",s[s.MIDDLE=2]="MIDDLE",s[s.CONNECT=3]="CONNECT",s[s.SSO=4]="SSO",s[s.MULTIPLE=5]="MULTIPLE",(d=h||(h={}))[d.UNDEFINED=-1]="UNDEFINED",d[d.TEXT=0]="TEXT",d[d.IMAGE=1]="IMAGE",d[d.FORM=2]="FORM",d[d.CONDITION=3]="CONDITION",d[d.POLL=4]="POLL",d[d.FINAL_STANDARD=5]="FINAL_STANDARD",d[d.FINAL=6]="FINAL",d[d.FINAL_THANK_YOU=7]="FINAL_THANK_YOU",d[d.RATING=8]="RATING",d[d.REACTION=9]="REACTION",d[d.REVIEW=10]="REVIEW",d[d.RESULT_POLL=11]="RESULT_POLL",d[d.RESULT_RATING=12]="RESULT_RATING",d[d.RESULT_REACTION=13]="RESULT_REACTION",d[d.OTP=14]="OTP";let A=[h.FINAL,h.FINAL_STANDARD,h.FINAL_THANK_YOU];(c=v||(v={})).BOT_TEXT="bot-text",c.BOT_IMAGE="bot-image",c.BOT_BACKGROUND_IMAGE="bot-background-image",c.BOT_BUTTON="bot-button",c.BOT_URL="bot-url",c.BOT_RECALCULATE="bot-recalculate",c.BOT_BOOKING="bot-booking",c.BOT_MAIN_TITLE="bot-main-title",c.BOT_MAIN_IMAGE="bot-main-image",c.BOT_MAIN_BODY="bot-main-body",c.BOT_MAIN_BUTTON="bot-main-button",c.BOT_SUB_TITLE="bot-sub-title",c.BOT_SUB_BODY="bot-sub-body",c.BOT_LANDING_PAGE_URL="bot-landing-page-url",c.BOT_LANDING_PAGE_BUTTON="bot-landing-page-button",c.BOT_RISK_SCREEN="bot-risk-screen",c.BOT_RELATED_ARTICLE="bot-related-article",c.THANK_YOU_IMAGE="thank-you-image",c.THANK_YOU_TITLE="thank-you-title",c.THANK_YOU_BODY="thank-you-body",c.TOTAL_LINE="total-line",c.BOT_SUBMISSION="bot-submission",c.BOT_EVENT_SUBMISSION="bot-event-submission",c.BOT_SUGGESTED_SERVICE="bot-suggested-service",c.SSO_INTENT="sso-intent",(u=f||(f={})).ACTION_CONDITION="action-condition",u.ACTION_INTERNAL="action-internal",u.ACTION_EXTERNAL="action-external",u.ACTION_SSO_REDIRECT="action-sso-redirect",u.ACTION_MULTIPLE_BUTTON="action-multiple-button",u.USER_CHOICE_TEXT="user-choice-text",u.USER_CHOICE_TEXT_BY_INPUT="user-choice-text-by-input",u.USER_CHOICE_NEXT="user-choice-next",u.USER_CHOICE_IMAGE="user-choice-image",u.USER_SUBMIT_TEXT="user-submit-text",u.USER_SUBMIT_NUMBER="user-submit-number",u.USER_SUBMIT_NAME="user-submit-name",u.USER_SUBMIT_PHONE="user-submit-phone",u.USER_SUBMIT_EMAIL="user-submit-email",u.USER_SUBMIT_DROPDOWN="user-submit-dropdown",u.USER_SUBMIT_DATE="user-submit-date",u.USER_SUBMIT_DOB="user-submit-dob",u.USER_SUBMIT_CONFIRM="user-submit-confirm",u.USER_SUBMIT_SEND="user-submit-send",u.USER_SUBMIT_RESEND="user-submit-resend",u.USER_SUBMIT_ADDRESS="user-submit-address",u.USER_SUBMIT_ADDRESS_PROVINCE="user-submit-address-province",u.USER_SUBMIT_ADDRESS_DISTRICT="user-submit-address-district",u.USER_SUBMIT_ADDRESS_COMMUNE="user-submit-address-commune",u.USER_SUBMIT_BMI="user-submit-bmi",u.USER_SUBMIT_BMI_HIDDEN="user-submit-bmi-hidden",u.USER_SUBMIT_TERMS="user-submit-terms",u.USER_SUBMIT_GENDER="user-submit-gender",u.USER_SUBMIT_OTP="user-submit-otp",u.USER_SUBMIT_WHATSAPP="user-submit-whatsapp",u.POLL_CHOICE="poll-choice",u.POLL_CHOICE_TEXT_BY_INPUT="poll-choice-text-by-input",u.POLL_CHOICE_IMAGE="poll-choice-image",u.POLL_BUTTON="poll-button",u.RATING_STAR="rating-star",u.RATING_DESCRIPTION="rating-description",u.RATING_BUTTON="rating-button",u.LIKE_CHOICE="like-choice",u.DISLIKE_CHOICE="dislike-choice",u.REVIEW_CHOICE="review-choice",u.REVIEW_DESCRIPTION="review-description",u.REVIEW_BUTTON="review-button",u.RESULT_BUTTON="result-button",u.POLL_RESULT="poll-result",u.USER_SUBMIT_GOOGLE_API_ADDRESS="user-submit-google-api-address";let C=[f.USER_SUBMIT_ADDRESS_PROVINCE,f.USER_SUBMIT_ADDRESS_DISTRICT,f.USER_SUBMIT_ADDRESS_COMMUNE,f.USER_SUBMIT_ADDRESS];(E=O||(O={}))[E.UNLIMITED=0]="UNLIMITED",E[E.EXACT_NUMBER=1]="EXACT_NUMBER",E[E.RANGE=2]="RANGE";let y={[f.USER_SUBMIT_EMAIL]:"email",[f.USER_SUBMIT_TEXT]:"text",[f.USER_SUBMIT_DROPDOWN]:"text",[f.USER_SUBMIT_NAME]:"name",[f.USER_SUBMIT_NUMBER]:"number",[f.USER_SUBMIT_ADDRESS]:"address",[f.USER_SUBMIT_PHONE]:"tel",[f.USER_SUBMIT_OTP]:"tel",[f.USER_SUBMIT_WHATSAPP]:"tel",[f.USER_SUBMIT_DATE]:"date",[f.USER_SUBMIT_CONFIRM]:"confirm",[f.USER_SUBMIT_SEND]:"submit",[f.USER_SUBMIT_TERMS]:"terms",[f.USER_SUBMIT_ADDRESS_PROVINCE]:"province",[f.USER_SUBMIT_ADDRESS_DISTRICT]:"district",[f.USER_SUBMIT_ADDRESS_COMMUNE]:"commune",[f.USER_SUBMIT_BMI]:"bmi",[f.USER_SUBMIT_GENDER]:"gender",[f.POLL_CHOICE]:"poll",[f.POLL_CHOICE_TEXT_BY_INPUT]:"poll",[f.POLL_CHOICE_IMAGE]:"poll",[f.RATING_STAR]:"rating",[f.RATING_DESCRIPTION]:"text",[f.LIKE_CHOICE]:"like",[f.DISLIKE_CHOICE]:"dislike",[f.REVIEW_CHOICE]:"review",[f.USER_SUBMIT_GOOGLE_API_ADDRESS]:"google-api-address",[f.USER_SUBMIT_DOB]:"dob"},B={FRU:"FRU",survey:"Survey",ristScreener:"risk_screener",voucherAcuvue:"ACUVUE"};(p=R||(R={})).VIDEO="video",p.SHORTS="short",p.PODCAST="podcast",p.LIVESTREAM="live-stream",(_=U||(U={})).Facebook="facebook",_.Zalo="zalo",_.Twitter="twitter",_.WhatsApp="whatsApp",_.Line="line",_.Instagram="instagram",_.LinkedIn="linkedin",_.Youtube="youtube",_.Tiktok="tiktok",_.Telegram="telegram",_.Viber="viber";let D={DD:{id:"common.day",defaultMessage:"Day"},MM:{id:"common.month",defaultMessage:"Month"},YYYY:{id:"common.year",defaultMessage:"Year"}};var M=Object.freeze({__proto__:null,get SocialType(){return U},COMMON_DATE_TRANSLATE_KEY:D,get Gender(){return T},get BabyGrowthChartType(){return m},get BabyGrowthChartDuration(){return S},get BabyGrowthResultTab(){return I},get LOCALE(){return N.L},get OnboardingStep(){return g},get NodePosition(){return b},get NodeType(){return h},NodeFinalTypes:A,get NodeIntentType(){return v},get NodeActionType(){return f},FULL_KEY_ADDRESS:C,get NodeMultipleOptions(){return O},ELEMENT_CONTROL_INPUT_TYPE:y,SubotType:B,get VideoType(){return R}})},"/AxW":function(e,t,r){r.d(t,{P:function(){return PopoverMenu},S:function(){return d}});var n=r("q1tI"),i=r("+6Eu"),a=r("Xfk/"),o=r("rBCA"),l=r("iBNF");let s=o.Z.div` position: relative; display: content; .popover-menu__btn { /* position: relative; */ > span { width: 100%; height: 100%; > img { width: 100%; height: 100%; } } } .popover-menu__content { position: absolute; z-index: 10; width: 320px; padding: 8px; border: none; background: #fff; border-radius: 8px; box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.1); &::before { position: absolute; width: 16px; height: 8px; background: #fff; content: ''; } &.--position { &-top { bottom: calc(100% + 8px); &.--align { &-start { left: 0; &::before { top: 100%; left: 16px; clip-path: polygon(0 0, 50% 100%, 100% 0); } } &-end { left: 100%; transform: translateX(calc(-100% + 1rem)); &::before { top: 100%; right: 16px; clip-path: polygon(0 0, 50% 100%, 100% 0); } } } } &-right { left: calc(100% + 8px); &.--align { &-start { top: 0; &::before { top: 16px; left: 0; width: 8px; height: 16px; clip-path: polygon(0 50%, 100% 0%, 100% 100%); transform: translateX(-100%); } } &-end { top: 100%; transform: translateX(calc(-100% + 1rem)); &::before { bottom: 16px; left: 0; width: 8px; height: 16px; clip-path: polygon(0 50%, 100% 0%, 100% 100%); transform: translateX(-100%); } } } } &-bottom { top: calc(100% + 8px); &.--align { &-start { left: 0; &::before { bottom: 100%; left: 16px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } } &-end { left: 100%; transform: translateX(calc(-100% + 1rem)); &::before { right: 16px; bottom: 100%; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } } } } &-left { left: -8px; transform: translateX(-100%); &.--align { &-start { top: 0; &::before { top: 16px; left: 100%; width: 8px; height: 16px; clip-path: polygon(0 0%, 100% 50%, 0% 100%); transform: translateX(0); } } &-end { bottom: 0; &::before { bottom: 16px; left: 100%; width: 8px; height: 16px; clip-path: polygon(0 0%, 100% 50%, 0% 100%); transform: translateX(0); } } } } } } &[data-is-marrybaby='true'] { .popover-menu__content { padding: 0; border-radius: 12px; /* &::before { display: none; } */ } } `,d=o.Z.div` display: flex; /* max-height: 300px; */ flex-direction: column; cursor: default; .__header { position: relative; display: flex; align-items: center; justify-content: center; padding: 1rem 0; margin-bottom: 8px; .__back-btn { position: absolute; top: 50%; left: 8px; width: 16px; height: 16px; cursor: pointer; transform: translateY(-50%); } } .tree-text-description { padding-right: 8px; padding-left: 8px; margin-top: -8px; margin-bottom: 8px; font-size: 14px; font-weight: 400; line-height: 22px; text-align: left; } .__content { overflow: auto; flex: 1; } .__list { .__item { position: relative; &.bold-item { font-weight: 700; } &:last-child { .__btn { margin-bottom: 0; } } .__btn { position: relative; display: flex; width: 100%; height: 40px; align-items: center; padding: 0 1rem; border: none; margin-bottom: 8px; color: ${l.r.colors.gray800}; cursor: pointer; text-align: left; transition: background 0.3s; /* for better gtm tracking result */ * { pointer-events: none; } &.--checked { color: ${l.r.colors.gray500}; pointer-events: none; } &:hover { background: ${l.r.colors.gray100}; } .__icon { width: 16px; height: 16px; margin-right: 0.4rem; } & > span { position: relative; & > img { width: 16px; height: 16px; margin-right: 0.4rem; } } } .__toggle { position: absolute; top: 50%; right: 16px; width: 16px; height: 16px; pointer-events: none; transform: translateY(-50%); } } } &[data-is-marrybaby='true'] { .__header { padding: 1rem; } .tree-text-description { padding: 0 1rem; } .__list { .__item { &:first-child { .__btn { border-top-left-radius: 12px; border-top-right-radius: 12px; } } &:last-child { .__btn { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } } .__btn { height: unset; padding: 1rem; margin-bottom: 0; &:hover { background: ${l.r.mbColors.lightPink}; } } } } } `,PopoverMenu=({className:e,style:t,toggleButtonContent:r,position:o="bottom",align:l="end",children:d,buttonProps:c})=>{let{data:{env:{isMarryBaby:u}}}=(0,n.useContext)(a.T),[E,p]=(0,n.useState)(!1),_=(0,n.useRef)(null),T=(0,n.useRef)(E);return(0,n.useEffect)(()=>{var e;T.current=E,E&&(null===(e=_.current)||void 0===e||e.focus())},[E]),(0,n.useEffect)(()=>{let clickHandler=e=>{var t;(null===(t=_.current)||void 0===t?void 0:t.contains(e.target))||!T.current||p(!1)};return window.addEventListener("click",clickHandler,{passive:!0}),()=>{window.removeEventListener("click",clickHandler)}},[]),n.createElement(s,{"data-is-marrybaby":u,className:e,style:t},n.createElement(i.B,Object.assign({theme:u?"marryBaby":"helloSites",className:"popover-menu__btn",size:"md",color:"transparent",onClick:()=>p(e=>!e)},c),r),E?n.createElement("div",{ref:_,className:`popover-menu__content --position-${o} --align-${l}`,tabIndex:0,onClick:e=>e.stopPropagation()},"function"==typeof d?d({setShow:p}):d):null)}}}]);