1"use strict";(self.webpackChunkmy_app=self.webpackChunkmy_app||[]).push([[1757],{80377(e,s,t){t(9950);const n=t.p+"static/media/pin location.3e289e7861dab9a43940be8fa3c9fbfa.svg";t.d(s,["A",0,n])},3253(e,s,t){t(9950);const n=t.p+"static/media/arrowLeft.53ead2a6db88f517671997666aa99543.svg";t.d(s,["A",0,n])},61149(e,s,t){t(9950);const n=t.p+"static/media/arrowLeft2.5c1a00738759a4388e27fda8b3951d70.svg";t.d(s,["A",0,n])},68775(e,s,t){var n=function(e){return e.SALON="salon",e.SALON_ID="salonId",e.SERVICES="servicesName",e.CHOSEN_SERVICES="chosenService",e.CHOSEN_SERVICES_WEEKEND="chosenServiceWeekend",e.PHONE="customerPhone",e.STYLIST="stylist",e.STYLIST_ID="stylistId",e.HOUR="hour",e.BOOK_HOUR_ID="bookHourId",e.SUB_HOUR_ID="subHourId",e.DATE_BOOK="dateBook",e.IS_ENTER_CODE="isEnterCode",e.CUSTOMER_NOTE="customerNoteForSalon",e.CAMPAIGN="campaignId",e.CODE="code",e.IS_USE_PROMO="isUsePromo",e.BOOK_AT="bookAt",e.LOCAITION_SALON="location_salon",e.HOUR_NAME="hour_name",e.MAP_SALON="maps",e.SALON_NEW="salonNew",e.SECON_SUB_HOUR_ID="secondSubHourId",e.NOS="NoS",e.STEP="step",e.MAP="map",e.PARKING="parking",e.CLEAR_VOUCHER="clearVoucher",e.AVAILABLE_HOURS="availableHours",e.USER_ID="userId",e.NOTE="note",e.NOTE_STYLIST_MOVE_SALON="note_sylist_move_salon",e.LIST_SERVICES="list_services",e.NUMBER_PERSONS="numberPersons",e.CUSTOMER_PHONE_INVITE="customerPhoneInvite",e.CUSTOMER_ADDRESS="customerAddress",e}(n||{});const i=n;t.d(s,["A",0,i])},11757(e,s,t){t.r(s),t.d(s,{default:()=>we});var n=t(89379),i=t(80641),c=t(9950),a=t(97882),o=t(16673),r=t(74465),l=t(59051),d=t.n(l),S=t(80150),u=t(26223),A=t(59564),E=t(48026),h=t(13260),m=t(66065),I=t(12948),_=t(68834),N=t(59392),g=t(65920),v=t(68775);t(80377);t.p;t.p;t.p;t.p;t(59461);var O=t(44414);const p=(0,c.memo)(e=>{let s=e.step,t=void 0===s?0:s,n=e.onChangeStep,a=e.dataBooking;e.selectedSalonBackUp;const o=(0,c.useState)(!1),r=(0,i.A)(o,2),l=r[0],d=r[1],S=0===t?"Ho\xe0n t\u1ea5t":2===t?"Ch\u1ecdn ".concat(a.chosenService.length>0?a.chosenService.length:""," d\u1ecbch v\u1ee5"):"",u=(()=>{if(0===t){if(0===a.salon.id)return!0;if(0===a.hour.bookHourId)return!0}return 2===t&&0===a.chosenService.length})()?"btn-inactive":"";return(0,O.jsxs)(O.Fragment,{children:[(0,O.jsx)("div",{className:"new-affix-v2",children:(0,O.jsx)("div",{className:"flex space-between text-center content-step",children:(0,O.jsx)("div",{className:"right button-next pointer ".concat(u),onClick:()=>{n(!0)},role:"presentation",children:(0,O.jsx)("span",{children:S})})})}),(0,O.jsx)("div",{className:"mask-affix",style:{display:"".concat(l?"block":"none")},onClick:()=>d(!1),role:"presentation"})]})});var C=t(3253);const x=(0,c.memo)(e=>
1{let s=e.onChangeStep,t=e.step;return(0,O.jsxs)("div",{className:"new-top-navigator pointer",children:[t>0&&(0,O.jsx)("img",{src:C.A,alt:"",onClick:()=>{s(!1)},role:"presentation"}),(0,O.jsx)("span",{className:"uppercase text-center",children:(()=>{switch(t){case 0:return"\u0110\u1eb7t l\u1ecbch c\u1eaft t\xf3c t\u1ea1i nh\xe0";case 1:return"Ch\u1ecdn \u0111\u1ecba ch\u1ec9 chi ti\u1ebft";case 2:return"Ch\u1ecdn d\u1ecbch v\u1ee5";default:return"Ho\xe0n t\u1ea5t"}})()}),2===t?(0,O.jsx)("div",{className:"note-price"}):""]},t)});t(34337);var f=t(3302),k=t.n(f),T=t(48538),j=t(34976),L=t(85591),R=t(12596),y=t(48738),b=t.n(y),H=t(66323),D=t.n(H),B=t(85773),P=t(85688),w=t(22354),K=t(18264),G=t(2312);const U=t.p+"static/media/Black-Member.bb1b5701048be057f53bd61bdb9852c2.svg";const V=t.p+"static/media/Silver-Member.174312b02b2a0357d7a7a1da6e18818b.svg";const M=t.p+"static/media/Gold-Member.650f64ab0a5d58e9ceb6bb0392b4fdbe.svg";var Y=t(66353);const F=e=>{let s=e.onChangeDay,t=e.role,n=e.openingDate,a=e.dateBook,o=e.isDateBookWeekend,r=e.isShowNoteChangePrice,l=e.serviceInWeekend,S=e.isStylistBusy,u=e.isSalonBusy,A=e.isLoadingHour,E=e.salonId,h=e.setHasClickNextInSalon,I=e.trackingData,g=e.stylistId,p=e.chosenService,C=e.setHasClickInService,x=e.isDateBookHoliday,f=e.selected,k=e.isShow,T=e.setIsShow;const j=(0,c.useState)([]),L=(0,i.A)(j,2),R=L[0],y=L[1],b=(0,c.useState)([]),H=(0,i.A)(b,2),D=H[0],P=H[1],F=(0,c.createRef)();var W,J;W=F,J=()=>{k&&T(!1)},(0,c.useEffect)(()=>{function e(e){W.current&&!W.current.contains(e.target)&&J()}return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[W]);const q=async e=>{try{await _.A.postTrackingDynamic(e)}catch(s){console.log(s.message)}},z=(e,t)=>{(()=>{const e={pageId:N.A.Pages.BOOKING_SINGLE_PAGE,screenId:N.A.Screens.BOOKING_SELECT_BOOKING_SINGLE_SCREEN,eventId:N.A.Events.CLICK_SELECT_DATEBOOK,tokenKey:I.token,source:I.source,utmSource:I.utmSource,data:{customerId:I.customerId||0,phone:f[v.A.PHONE],salonId:E,chosenServices:JSON.stringify(p),dateBook:a,stylistId:g,hoursAvailable:f[v.A.AVAILABLE_HOURS].toString(),hourBook:f[v.A.HOUR].hour}};q(e)})(),a!==t.day&&t.isActive?s(t):t.isActive||e.stopPropagation()},Z=e=>{const s=d()(e,"DD-MM-YYYY"),t=s.day(),n=s.format("MMDD"),i=5===t||6===t||0===t;return["0421","0430","0501"].includes(n)?(0,O.jsx)("p",{className:"weekend",children:"Ng\xe0y l\u1ec5"}):i?(0,O.jsx)("p",{className:"weekend",children:"Cu\u1ed1i tu\u1ea7n"}):(0,O.jsx)("p",{className:"day-normal",children:"Ng\xe0y th\u01b0\u1eddng"})},Q=e=>(0,O.jsxs)("div",{className:"name-day flex space-between item-center",style:{flex:1},children:[(0,O.jsxs)("div",{children:[e.item.name&&(0,O.jsxs)("span",{children:[e.item.name,", "]}),(0,O.jsxs)("span",{className:"text-dayName",children:[e.item.th," "]}),"(",e.item.day&&e.item.day.slice(0,5).replace("-","/"),")"]}),(0,O.jsx)("div",{children:Z(e.item.day)})]}),X=e=>e&&e.iconMember?(0,O.jsx)("span",{style:{marginRight:"5px"},className:"flex",children:(0,O.jsx)("img",{src:e.iconMember,alt:"",width:"28px",height:"20px"})}):(0,O.jsx)("span",{style:{width:"35px"}});return(0,c.useEffect)(()=>{const e=((e,s,t)=>{const n=d()(new Date).add(1,"days"),i=[];let c=0;(0,m.gH)(s)&&(c=(0,m.gH)(s));for(let r=0;r<6;r+=1)i.push({moment:d()(n).add(r+c,"days"),dateDiff:r+c});const a=e=>{switch(e){case 3:return U;case 4:return V;case 5:return M;default:return null}},o=i.map((e,s)=>({day:e.moment.format("DD-MM-YYYY"),name:0===e.dateDiff?"Ng\xe0y mai":1===e.dateDiff?"Ng\xe0y kia":"",th:(0,B.Zr)(e.moment.format("ddd")),toOpenDate:c,isActive:s+1<=t,iconMember:a(s)}));return o.slice(0,e)})(t.maxDaysBookFuture,n,t.daysBookFuture);y(e)},[n,t]),(0,c.useEffect)(()=>{R.forEach(e=>{a===e.day&&P(e)})},[R,a]),(0,O.jsxs)("div",{className:"block__box",ref:F,onClick:()=>(()=>{const e={data:{customerId:I.customerId||0,phone:f[v.A.PHONE],salonId:E,chosenServices:JSON.stringify(p),dateBook:a,stylistId:g,hoursAvailable:f[v.A.AVAILABLE_HOURS].toString(),hourBook:f[v.A.HOUR].hour},pageId:N.A.Pages.BOOKING_SINGLE_PAGE,screenId:N.A.Screens.BOOKING_SELECT_BOOKING_SINGLE_SCREEN,eventId:k?N.A.Events.CLICK_CLOSE_DATEBOOK:N.A.Events.CLICK_SHOW_DATEBOOK,tokenKey:I.token,source:I.source,utmSource:I.utmSource};0===E?(T(!1),h(0),e.eventId=N.A.Events.CLICK_BUTTON_DATEBOOK):(h(1),p.length>0?(C(1),T(!k)):(C(0),e.eventId=N.A.Events.CLICK_BUTTON_DATEBOOK)),q(e)})(),role:"presentation",id:"datebookId",children:[(0,O.jsxs)("div",{className:"box__title",children:[(0,O.jsx)("div",{className:"title__iconLeft",children:(0,O.jsx)("img",{src:G.A,alt:""})}),D&&(0,O.jsx)(Q,{item:D}),(0,O.jsx)("div",{className:"title__iconRight",children:k?(0,O.jsx)("img",{src:K.A,alt:""}):(0,O.jsx)("img",{src:w.A,alt:""})})]}),(0,O.jsx)("div",{className:"box__dropdown ".concat(k?"fade-in":""),children:(0,O.jsx)(Y.A,{isShow:k,children:R.length>0&&R.map((e,s)=>(0,O.jsxs)("div",{className:"".concat(e.isActive?"":"not-allow"," item-action"),onClick:s=>z(s,e),role:"presentation",children:[X(e),(0,O.jsx)(Q,{item:e})]},"".concat(s+1)))})}),f[v.A.CHOSEN_SERVICES].length>0&&f[v.A.CUSTOMER_ADDRESS]?(0,O.jsx)("div",{className:"note-book",children:"\u0110\u1ec3 s\u1eafp x\u1ebfp chu \u0111\xe1o, anh vui l\xf2ng \u0111\u1eb7t tr\u01b0\u1edbc 1 ng\xe0y"}):"",!A&&u<0&&S>0?(0,O.jsxs)("div",{className:"note-select-time note-salon-busy",children:[D.name||D.th," h\u1ebft l\u1ecbch m\u1ea5t r\u1ed3i, anh ch\u1ecdn gi\xfap em ng\xe0y kh\xe1c ho\u1eb7c nh\u1eadp \u0111\u1ecba ch\u1ec9 kh\xe1c nh\xe9!"]}):"",r&&(x?(0,O.jsxs)("div",{className:"note-weekend",children:["*",D.th," l\xe0 ",(0,O.jsx)("span",{className:"bold",children:"ng\xe0y l\u1ec5"}),", gi\xe1"," ",l[0]&&l[0].serviceSpecial.name," ","l\xe0"," ",l[0]&&l[0].serviceSpecial.price]}):o?(0,O.jsxs)("div",{className:"note-weekend",children:["*",D.th," l\xe0 ng\xe0y ",(0,O.jsx)("span",{className:"bold",children:"cu\u1ed1i tu\u1ea7n"}),", gi\xe1"," ",l[0]&&l[0].serviceSpecial.name," ","l\xe0"," ",l[0]&&l[0].serviceSpecial.price]}):(0,O.jsxs)("div",{className:"note-normal-day",children:["*",D.th," l\xe0 ",(0,O.jsx)("span",{className:"bold",children:"ng\xe0y th\u01b0\u1eddng"}),", gi\xe1"," ",l[0]&&l[0].serviceSpecial.name," ","l\xe0"," ",l[0]&&l[0].serviceSpecial.priceSpecialDay]}))]})},W={spaceBetween:8,slidesPerView:4.2,breakpoints:{1200:{spaceBetween:8,slidesPerView:5.2},100:{spaceBetween:8,slidesPerView:4.2}}},J=e=>
1{let s=e.bookingDate,t=e.timeBox,n=e.isCheck,i=e.onChangeTime,c=e.onHandleExpiredTime,a=e.isHighLight;const o="box-time_item ".concat(t.isFree?"":"unavailable"," ").concat(n?"has-choice":""," ").concat(a?"time-box-high-light":""),r=d()(s,"DD-MM-YYYY").add(parseInt(t.hour.split("h")[0]),"hours").add(parseInt(t.hour.split("h")[1]),"minutes").isBefore(d()(new Date));return(0,O.jsx)("div",{className:o,onClick:()=>{r?c(t.hourId):i(t)},role:"presentation",children:t.hour})},q=e=>{let s=e.setListIconHotTime,t=e.onChangeSelected,a=e.selected,o=(e.checked,e.setStylistBusy),r=e.isStylistBusy,l=void 0===r?1:r,S=e.hasClickNextStep,u=e.trackingData,A=e.userId,E=e.setSalonBusy,h=e.isSalonBusy,m=e.setIsLoadingHour,I=e.isLoadingHour,g=e.isClickDateBook;const p=(0,c.useState)({isLoading:!1,listGroupHours:[]}),C=(0,i.A)(p,2),x=C[0],f=C[1],y=(0,c.useState)({visible:!1,list:[]}),H=(0,i.A)(y,2),B=(H[0],H[1],(0,c.useRef)([])),w=(0,c.useRef)(null),K=(0,c.useState)({indexGrHour:-1,indexHour:-1}),G=(0,i.A)(K,2),U=G[0],V=G[1],M=(0,c.useRef)(a),Y=(0,c.useRef)(!1),F=((0,P.A)(),(0,c.useState)(!0)),q=(0,i.A)(F,2),z=q[0],Z=q[1],Q=(0,c.useState)(!1),X=(0,i.A)(Q,2),$=X[0],ee=X[1],se=(0,c.useState)(!0),te=(0,i.A)(se,2),ne=te[0],ie=te[1];async function ce(e){try{await _.A.postTrackingDynamic(e)}catch(s){console.log(s.message)}}const ae=e=>{const s=[];return e.forEach(e=>{e.hours.forEach(t=>{s.push({hourGroup:e.name,hour:t.hour,hourFrame:t.hourFrame,isFree:t.isFree})})}),s};function oe(){const e=a[v.A.CHOSEN_SERVICES].map(e=>e.serviceId),n={stylistId:a[v.A.STYLIST].id,salonId:a[v.A.SALON].id,bookDate:a[v.A.DATE_BOOK],listServiceId:e};n.salonId>0&&a[v.A.CHOSEN_SERVICES].length>0&&async function(e){m(!0);let n=0;try{s([]);const t=await _.A.getHoursGroupByDate(e);B.current=t.data.hourGroup,ce({pageId:N.A.Pages.BOOKING_SINGLE_PAGE,screenId:N.A.Screens.BOOKING_SELECT_BOOKING_SINGLE_SCREEN,eventId:N.A.Events.GET_HOURS_GROUP_BY_DATE,tokenKey:u.token,source:u.source,utmSource:u.utmSource,data:{phone:a[v.A.PHONE],salonId:a[v.A.SALON].id.toString(),chosenServices:JSON.stringify(a[v.A.CHOSEN_SERVICES]),dateBook:a[v.A.DATE_BOOK],stylistId:a[v.A.STYLIST].id.toString(),hoursAvailable:a[v.A.AVAILABLE_HOURS].toString(),hours:JSON.stringify(ae(B.current)),customerId:A||0}}),ie(t.data.lastHourWork.isFreeToday)}catch(i){B.current=[],console.log(i)}finally{B.current.length>0&&!B.current.some(e=>e.hours&&e.hours.some(e=>e.isFree))?(0===e.stylistId?(E(h>0?-1:h-1),o(1)):o(l>0?-1:l-1),k()("#box-time").animate({scrollTop:0},300)):(E(h>0?h+1:1),o(l>0?l+1:1)),m(!1),f({listGroupHours:B.current,isLoading:!1}),B.current.forEach(e=>{e.hours.forEach(e=>{e.isFree&&(n+=1)})}),t(v.A.AVAILABLE_HOURS,n)}M.current=a,Y.current=!0}(n)}const re=()=>{ce({pageId:N.A.Pages.BOOKING_SINGLE_PAGE,screenId:N.A.Screens.BOOKING_SELECT_BOOKING_SINGLE_SCREEN,eventId:N.A.Events.CLICK_TIME_OFF,tokenKey:u.token,source:u.source,utmSource:u.utmSource,data:{phone:a[v.A.PHONE],salonId:a[v.A.SALON].id.toString(),chosenServices:JSON.stringify(a[v.A.CHOSEN_SERVICES]),dateBook:a[v.A.DATE_BOOK],stylistId:a[v.A.STYLIST].id.toString(),hoursAvailable:a[v.A.AVAILABLE_HOURS].toString(),customerId:A||0}})};function le(e){if(e.isFree){const s={bookHourId:e.hourId,subHourId:e.subHourId,secondSubHourId:e.secondSubHourId,hour:e.hour};t(v.A.HOUR,s),ce({pageId:N.A.Pages.BOOKING_SINGLE_PAGE,screenId:N.A.Screens.BOOKING_SELECT_BOOKING_SINGLE_SCREEN,eventId:N.A.Events.CLICK_SELECT_TIME,tokenKey:u.token,source:u.source,utmSource:u.utmSource,data:{phone:a[v.A.PHONE],salonId:a[v.A.SALON].id.toString(),chosenServices:JSON.stringify(a[v.A.CHOSEN_SERVICES]),dateBook:a[v.A.DATE_BOOK],stylistId:a[v.A.STYLIST].id.toString(),hoursAvailable:a[v.A.AVAILABLE_HOURS].toString(),customerId:A||0}})}else re()}function de(e){let s=[];s=x.listGroupHours.map(s=>{const t=(0,n.A)({},s);return t.hours=s.hours.map(s=>s.hourId===e?(0,n.A)((0,n.A)({},s),{},{isFree:!1}):s),t}),f({isLoading:!1,listGroupHours:s}
1),re()}const Se=b()("swiper_button button_prev",{swiper_button_disable:z}),ue=b()("swiper_button button_next",{swiper_button_disable:$});(0,c.useEffect)(()=>{if(S&&!a[v.A.HOUR].bookHourId){const e=x.listGroupHours,s=e.findIndex(e=>e&&e.hours.some(e=>e.isFree));if(-1!==s){const t=e[s].hours.findIndex(e=>e.isFree);V({indexGrHour:s,indexHour:t})}(()=>{const e=document.querySelector("#service-time"),s=document.body.getBoundingClientRect().top,t=e.getBoundingClientRect().top-s-90;window.scrollTo({top:t,behavior:"smooth"})})();const t=s-1>=0?s-1:0;w.current&&(w.current.swiper.update(),w.current.swiper.slideTo(t,500))}else V({indexGrHour:-1,indexHour:-1})},[S]),(0,c.useEffect)(()=>{!function(){let e=x.listGroupHours.findIndex(e=>e&&e.hours.some(e=>e.isFree));e=e-1>=0?e-1:0,w.current&&(w.current.swiper.update(),w.current.swiper.slideTo(e,500))}()},[x.listGroupHours]),(0,c.useEffect)(()=>{oe(),M.current[v.A.STYLIST].id!==a[v.A.STYLIST].id&&ce({pageId:N.A.Pages.BOOKING_SINGLE_PAGE,screenId:N.A.Screens.BOOKING_SELECT_BOOKING_SINGLE_SCREEN,eventId:a[v.A.STYLIST].special?N.A.Events.CLICK_SELECT_OLD_STYLIST:N.A.Events.CLICK_SELECT_STYLIST,tokenKey:u.token,source:u.source,utmSource:u.utmSource,data:{phone:a[v.A.PHONE],salonId:a[v.A.SALON].id.toString(),chosenServices:JSON.stringify(a[v.A.CHOSEN_SERVICES]),dateBook:a[v.A.DATE_BOOK],stylistId:a[v.A.STYLIST].id.toString(),hoursAvailable:a[v.A.AVAILABLE_HOURS].toString(),customerId:A||0}})},[a[v.A.DATE_BOOK],a[v.A.STYLIST].id,a[v.A.SALON].id]),(0,c.useEffect)(()=>{if(!ne&&!g){E(1);const e=d()(a[v.A.DATE_BOOK],"DD-MM-YYYY").add(1,"days").format("DD-MM-YYYY");t(v.A.DATE_BOOK,e)}},[ne,g]);const Ae=-1!==U.indexGrHour&&U.indexGrHour;return(0,O.jsx)(O.Fragment,{children:(0,O.jsxs)("div",{className:"box-time",id:"box-time",children:[(0,O.jsxs)("div",{className:"".concat(I?"hide-time":"relative"),children:[(0,O.jsx)(D(),(0,n.A)((0,n.A)({},W),{},{ref:w,on:{slideChange:()=>{w.current&&w.current.swiper&&(Z(w.current.swiper.isBeginning),ee(w.current.swiper.isEnd))}},children:x.listGroupHours.map((e,s)=>(0,O.jsx)("div",{className:"box-time_gr",children:e.hours&&e.hours.map((e,t)=>{const n=a[v.A.HOUR],i=n.bookHourId,c=n.subHourId,o=n.secondSubHourId,r=!(i!==e.hourId||c!==e.subHourId||o!==e.secondSubHourId);return(0,O.jsx)(J,{isCheck:r,bookingDate:a[v.A.DATE_BOOK],timeBox:e,onHandleExpiredTime:de,onChangeTime:le,isHighLight:s===U.indexGrHour&&t===U.indexHour},e.hour)})},e.name))})),(0,O.jsx)(T.A,{className:Se,shape:"circle",disabled:z,icon:(0,O.jsx)(L.A,{className:"swiper_button_icon"}),onClick:()=>{w.current&&w.current.swiper&&(w.current.swiper.slidePrev(),Z(w.current.swiper.isBeginning),ee(w.current.swiper.isEnd))}}),(0,O.jsx)(T.A,{className:ue,shape:"circle",disabled:$,icon:(0,O.jsx)(R.A,{className:"swiper_button_icon"}),onClick:()=>{w.current&&w.current.swiper&&(w.current.swiper.slideNext(),Z(w.current.swiper.isBeginning),ee(w.current.swiper.isEnd))}})]}),Ae?(0,O.jsx)("div",{className:"note-select-time",children:"M\u1eddi anh ch\u1ecdn gi\u1edd c\u1eaft \u0111\u1ec3 ti\u1ebfp t\u1ee5c \u0111\u1eb7t l\u1ecbch"}):null,I&&(0,O.jsx)(j.A,{paragraph:{rows:9},loading:!0,active:!0})]})})};var z=t(30836);const Z=(0,a.Ng)(e=>({listSalon:e.salon.listSalon,trackingData:e.trackingData}))(e=>
1{let s=e.onChangeSelected,t=e.selected,n=(e.listSalon,e.hasClickInSalon);const a=(0,c.useState)(!0),o=(0,i.A)(a,2),r=o[0],l=o[1];return(0,c.useEffect)(()=>{0===n&&0===t[v.A.SALON].id?l(!1):l(!0)},[n]),(0,O.jsxs)("div",{className:"block",children:[(0,O.jsx)("div",{className:"title h2 flex item-center pointer",role:"presentation",children:"1. Ch\u1ecdn \u0111\u1ecba ch\u1ec9 nh\xe0"}),(0,O.jsxs)("div",{className:"block__box",children:[t[v.A.CUSTOMER_ADDRESS]?(0,O.jsxs)("div",{className:"address",onClick:()=>s(v.A.STEP,1),children:[(0,O.jsx)("div",{className:"content",children:t[v.A.CUSTOMER_ADDRESS]}),(0,O.jsx)("div",{className:"icon",children:(0,O.jsx)("img",{src:w.A,alt:""})})]}):(0,O.jsxs)("div",{className:"box__title ".concat(r?"":"error"),onClick:()=>s(v.A.STEP,1),"aria-hidden":"true",children:[(0,O.jsxs)("div",{className:"title__iconLeft",children:[(0,O.jsx)("img",{src:z.A,alt:""}),0===t[v.A.SALON].id&&(0,O.jsxs)("span",{className:"title__require",children:[(0,O.jsx)("span",{className:"require__box"}),(0,O.jsx)("span",{className:"require__icon"})]})]}),(0,O.jsx)("div",{className:"box__text",children:(0,O.jsx)("div",{children:"Nh\u1eadp \u0111\u1ecba ch\u1ec9"})}),(0,O.jsx)("div",{className:"title__iconRight",children:(0,O.jsx)("img",{src:w.A,alt:""})})]}),(0,O.jsx)("div",{className:"box__error ".concat(r?"hide":"show"),children:"Anh vui l\xf2ng nh\u1eadp \u0111\u1ecba ch\u1ec9 tr\u01b0\u1edbc \u0111\u1ec3 xem l\u1ecbch c\xf2n tr\u1ed1ng \u1ea1!"})]})]})});var Q=t(43336);const X=e=>
1{let s=e.onChangeSelected,t=e.selected,n=e.setHasClickNextInSalon,a=e.trackingData,o=e.hasClickInService;const r=t[v.A.SALON].id,l=t[v.A.CHOSEN_SERVICES],d=(0,c.useState)(!0),S=(0,i.A)(d,2),u=S[0],A=S[1],E=()=>{if(0===r){n(0);(async e=>{try{await _.A.postTrackingDynamic(e)}catch(s){console.log(s.message)}})({data:{customerId:a.customerId,phone:t[v.A.PHONE],salonId:r,chosenServices:JSON.stringify(l),dateBook:t[v.A.DATE_BOOK],stylistId:t[v.A.STYLIST].id},pageId:N.A.Pages.BOOKING_SINGLE_PAGE,screenId:N.A.Screens.BOOKING_SELECT_BOOKING_SINGLE_SCREEN,eventId:N.A.Events.CLICK_BUTTON_SERVICE,tokenKey:a.token,source:a.source,utmSource:a.utmSource})}else s(v.A.STEP,2),n(1)};return(0,c.useEffect)(()=>{0===o&&0===t[v.A.CHOSEN_SERVICES].length?A(!1):A(!0)},[o,t[v.A.CHOSEN_SERVICES]]),(0,O.jsx)("div",{className:"block",id:"block-time-serivce",children:(0,O.jsxs)("div",{className:"block__box",children:[(0,O.jsxs)("div",{className:"box__title ".concat(u?"":"error"),onClick:()=>E(),"aria-hidden":"true",children:[(0,O.jsxs)("div",{className:"title__iconLeft",children:[(0,O.jsx)("img",{src:Q.A,alt:""}),t[v.A.SALON].id>0&&l.length<1&&(0,O.jsxs)("span",{className:"title__require",children:[(0,O.jsx)("span",{className:"require__box"}),(0,O.jsx)("span",{className:"require__icon"})]})]}),(0,O.jsx)("div",{className:"box__text service",children:l.length>0?(0,O.jsxs)("div",{className:"value",children:[l.length," d\u1ecbch v\u1ee5 \u0111\xe3 ch\u1ecdn"]}):(0,O.jsx)("div",{children:"Ch\u1ecdn d\u1ecbch v\u1ee5"})}),(0,O.jsx)("div",{className:"title__iconRight",children:(0,O.jsx)("img",{src:w.A,alt:""})})]}),(0,O.jsx)("div",{className:"box__error ".concat(u?"hide":"show"),children:"M\u1eddi anh ch\u1ecdn d\u1ecbch v\u1ee5 \u0111\u1ec3 ch\u1ecdn gi\u1edd c\u1eaft"}),l.length>0&&(0,O.jsx)("div",{className:"box__service",children:l.map((e,s)=>(0,O.jsx)("div",{className:"service__item",children:(0,O.jsx)("div",{children:e.name})},s))})]})})};const $=t.p+"static/media/suggestion.74860626abbc63dfe75b7e8e734b2982.svg";d()(new Date).format("DD-MM-YYYY");const ee=e=>{let s=e.selected,t=e.scrollToSelectDateBook,i=e.trackingData;const c={pageId:N.A.Pages.BOOKING_SINGLE_PAGE,screenId:N.A.Screens.BOOKING_SELECT_BOOKING_SINGLE_SCREEN,tokenKey:i.token,source:i.source,utmSource:i.utmSource},a={customerId:i.customerId||0,phone:s[v.A.PHONE],salonId:s[v.A.SALON].id,chosenServices:JSON.stringify(s[v.A.CHOSEN_SERVICES]),dateBook:s[v.A.DATE_BOOK],stylistId:s[v.A.STYLIST].id,hoursAvailable:s[v.A.AVAILABLE_HOURS].toString(),hourBook:s[v.A.HOUR].hour},o=async()=>{t(),(async e=>{try{await _.A.postTrackingDynamic(e)}catch(s){console.log(s.message)}})((0,n.A)((0,n.A)({},c),{},{data:a,eventId:N.A.Events.CLICK_SHOW_DATE_BOOK_FROM_SUGGESTED_SALON_BACKUP}))};return(0,O.jsx)("div",{className:"block suggestion-salon",children:(0,O.jsxs)("div",{className:"flex item-center",onClick:()=>o(),role:"presentation",children:[(0,O.jsx)("div",{className:"icon",children:(0,O.jsx)("img",{src:$,alt:"icon"})}),(0,O.jsx)("div",{className:"suggestion-salon__text",children:"C\xe1c ng\xe0y sau c\xf2n nhi\u1ec1u khung gi\u1edd tr\u1ed1ng cho anh tho\u1ea3i m\xe1i l\u1ef1a ch\u1ecdn. Click \u0111\u1ec3 xem ngay"})]})})};const se=t.p+"static/media/user2.0a83a237a5d8d5455f7a66b65fc5df94.svg";var te=t(21680),ne=t(23013);const ie=ne.A.Option,ce=e=>
1{let s=e.onChangeSelected,t=e.selected;e.trackingData;const n=()=>{const e=[];for(let s=0;s<10;s+=1)e.push(s+1);return(0,O.jsx)(ne.A,{dropdownClassName:"dropdown-selected-number",suffixIcon:(0,O.jsx)(te.A,{}),onChange:e=>s([v.A.NUMBER_PERSONS],e),defaultValue:t[v.A.NUMBER_PERSONS],children:e.map((e,s)=>(0,O.jsx)(ie,{value:e,children:e},s))})};return(0,O.jsx)("div",{className:"info-booking__block",children:(0,O.jsx)("div",{className:"block",id:"idElementSelectPerson",children:(0,O.jsxs)("div",{className:"select-number",children:[(0,O.jsxs)("div",{className:"select-number__select",children:[(0,O.jsx)("div",{className:"icon",children:(0,O.jsx)("img",{src:se,alt:""})}),(0,O.jsx)("span",{children:"L\u01b0\u1ee3t \u0111\u1eb7t cho"}),(0,O.jsx)(n,{}),(0,O.jsx)("span",{children:"ng\u01b0\u1eddi"})]}),(0,O.jsx)("div",{className:"select-number__text",children:t[v.A.NUMBER_PERSONS]>1?(0,O.jsx)("span",{className:"color-green",children:"\xc1p d\u1ee5ng -20% Combo C\u1eaft khi thanh to\xe1n"}):(0,O.jsxs)("span",{children:["\u01afu \u0111\xe3i khi \u0111\u1eb7t t\u1eeb 2 ng\u01b0\u1eddi tr\u1edf l\xean \u1edf c\xf9ng 1 \u0111\u1ecba ch\u1ec9",(0,O.jsx)("br",{})," Anh c\xf3 th\u1ec3 \u0111\u1eb7t c\xf9ng ng\u01b0\u1eddi gi\xe0, tr\u1ebb em, h\xe0ng x\xf3m"]})})]})})})};var ae=t(20523);const oe=ae.A.TextArea,re=e=>
1{let s=e.onChangeSelected,t=e.selected,n=e.trackingData;const a=(0,c.useState)(""),o=(0,i.A)(a,2),r=o[0],l=o[1],d=(0,c.useState)(""),S=(0,i.A)(d,2),u=S[0],A=S[1],E=(0,c.useRef)(null),h=(e,n)=>{const i=e.target.value;if(n===v.A.CUSTOMER_PHONE_INVITE){const e=i.replace(/ /g,""),c=new RegExp("^[+0-9]+$");if(i&&!c.test(e))return void l("Anh vui l\xf2ng nh\u1eadp \u0111\xfang S\u0110T gi\u1edbi thi\u1ec7u.");const a=(0,B.FY)(e);if(A(e),s(n,a||e),l(""),!i)return void l("");if(!a)return void l("Anh vui l\xf2ng nh\u1eadp \u0111\xfang S\u0110T gi\u1edbi thi\u1ec7u.");if(a&&a===t[v.A.PHONE])return void l("Anh vui l\xf2ng nh\u1eadp S\u0110T gi\u1edbi thi\u1ec7u kh\xe1c S\u0110T \u0111\u1eb7t l\u1ecbch.")}else n===v.A.NOTE&&s(n,i)},m=e=>{e.target.blur()},I=e=>{(async e=>{try{_.A.postTrackingDynamic(e)}catch(s){console.log(s.message)}})({pageId:N.A.Pages.BOOKING_SINGLE_PAGE,screenId:N.A.Screens.BOOKING_SELECT_BOOKING_SINGLE_SCREEN,eventId:e===v.A.NOTE?N.A.Events.CLICK_FORM_NOTE:N.A.Events.CLICK_FORM_CUSTOMER_PHONE_INVITE,tokenKey:n.token,source:n.source,utmSource:n.utmSource})};return(0,O.jsxs)("div",{className:"info-booking__block",children:[(0,O.jsxs)("div",{className:"block",id:"idElementPhoneCode",children:[(0,O.jsx)("div",{className:"title h2 flex space-between",children:(0,O.jsx)("div",{children:"S\u0110T gi\u1edbi thi\u1ec7u"})}),(0,O.jsx)("div",{className:"block__wrapper",children:(0,O.jsxs)("div",{className:"wrapper__input",children:[(0,O.jsx)(ae.A,{value:u,onChange:e=>h(e,v.A.CUSTOMER_PHONE_INVITE),maxLength:(0,B.J5)(u),placeholder:"V\xed d\u1ee5: 0912234xxx",onPressEnter:m,onFocus:I,type:"tel"}),r?(0,O.jsx)("div",{className:"error",children:r}):""]})})]}),(0,O.jsxs)("div",{className:"block",id:"idElementFormNote",children:[(0,O.jsx)("div",{className:"title h2 flex space-between",children:(0,O.jsx)("div",{children:"Ghi ch\xfa"})}),(0,O.jsx)("div",{className:"block__wrapper",children:(0,O.jsx)("div",{className:"wrapper__input",children:(0,O.jsx)(oe,{ref:E,value:t[v.A.NOTE],onChange:e=>h(e,v.A.NOTE),placeholder:"VD: Anh da nh\u1ea1y c\u1ea3m; Nh\xe0 anh kh\xf4ng g\u1eedi \u0111\u01b0\u1ee3c xe; Anh mu\u1ed1n xem c\xe1c lo\u1ea1i s\xe1p",onPressEnter:m,onFocus:I})})})]})]})};const le=(0,a.Ng)(function(e){return{role:e.role,trackingData:e.trackingData,userInfo:e.user}},e=>({setListIconHotTime:s=>e((0,A.rJ)(s))}))(e=>{let s=e.role,t=e.onChangeSelected,n=(e.moveSalonStylistbackUp,e.setListIconHotTime),a=e.selected,o=e.trackingData,r=e.hasClickNextStep,l=e.isDateBookWeekend,d=e.isShowNoteChangePrice,S=e.serviceInWeekend,u=e.hasClickInSalon,A=e.setHasClickNextInSalon,E=(e.onChangeSalon,e.hasClickInService),h=e.setHasClickInService,m=e.isDateBookHoliday;e.selectedSalonBackUp,e.onChangeSelectedBackUp;const I=(0,c.useState)(!1),_=(0,i.A)(I,2),N=_[0],g=(_[1],(0,c.useState)(1)),p=(0,i.A)(g,2),C=p[0],x=p[1],f=(0,c.useState)(1),k=(0,i.A)(f,2),T=k[0],j=k[1],L=(0,c.useState)(!0),R=(0,i.A)(L,2),y=R[0],b=R[1],H=(0,c.useState)(!1),D=(0,i.A)(H,2),B=D[0],P=D[1],w=(0,c.useState)(!1),K=(0,i.A)(w,2),G=K[0],U=K[1];return(0,c.useEffect)(()=>{j(1)},[a[v.A.SALON].id]),(0,O.jsxs)("div",{className:"info-booking",children:[(0,O.jsx)("div",{className:"info-booking__block",children:(0,O.jsx)(Z,{hasClickInSalon:u,onChangeSelected:t,selected:a})}),(0,O.jsx)("div",{className:"info-booking__block",children:(0,O.jsxs)("div",{className:"block",id:"service-time",children:[(0,O.jsx)("div",{className:"title h2 flex space-between",children:(0,O.jsx)("div",{children:"2. Ch\u1ecdn d\u1ecbch v\u1ee5 v\xe0 th\u1eddi gian"})}),(0,O.jsx)(X,{onChangeSelected:t,selected:a,setHasClickNextInSalon:A,trackingData:o,hasClickInService:E}),(0,O.jsx)(F,{onChangeDay:function(e){t(v.A.DATE_BOOK,e.day),P(!0)},role:s,openingDate:a[v.A.SALON].openingDate,dateBook:a[v.A.DATE_BOOK],isDateBookWeekend:l,isShowNoteChangePrice:d,serviceInWeekend:S,isSalonBusy:T,isStylistBusy:C,isLoadingHour:y,salonId:a[v.A.SALON].id,setHasClickNextInSalon:A,trackingData:o,chosenService:a[v.A.CHOSEN_SERVICES],stylistId:a[v.A.STYLIST].id,setHasClickInService:h,isDateBookHoliday:m,selected:a,setIsShow:U,isShow:G}),a[v.A.SALON].id>0&&a[v.A.CHOSEN_SERVICES].length>0&&(0,O.jsxs)(O.Fragment,{children:[(0,O.jsx)(q,{setStylistBusy:x,isStylistBusy:C,role:s,selected:a,setListIconHotTime:n,onChangeSelected:t,checked:N,hasCl
1ickNextStep:r,trackingData:o,userId:o.customerId,setSalonBusy:j,isSalonBusy:T,setIsLoadingHour:b,isLoadingHour:y,isClickDateBook:B}),(0,O.jsx)(ee,{selected:a,scrollToSelectDateBook:()=>{const e=document.querySelector("#datebookId"),s=document.body.getBoundingClientRect().top,t=e.getBoundingClientRect().top-s-90;window.scrollTo({top:t,behavior:"smooth"}),U(!0)},trackingData:o})]})]})}),a[v.A.CHOSEN_SERVICES].length>0?(0,O.jsxs)(O.Fragment,{children:[(0,O.jsx)(ce,{onChangeSelected:t,selected:a,trackingData:o}),(0,O.jsx)(re,{onChangeSelected:t,selected:a,trackingData:o})]}):(0,O.jsx)(O.Fragment,{})]})});var de=t(80045);const Se=t.p+"static/media/checked.51038b2212869d85653e45d5721918e1.svg";var ue=t(61149);const Ae=t.p+"static/media/clock.70d00783c802178ddb5a7b34373bbb57.svg",Ee=e=>{let s=e.id,t=e.activeSlide,n=e.videoId;const i=(0,c.useRef)(null);let a=null;const o=(e,s)=>{var t;e&&s&&(null===(t=e.contentWindow)||void 0===t||t.postMessage(JSON.stringify(s),"*"))},r=e=>{t===s&&(e.target.mute(),e.target.playVideo())},l=e=>{e.data===window.YT.PlayerState.ENDED&&t===s&&(e.target.seekTo(0),e.target.playVideo())},d=()=>{new window.YT.Player(i.current,{videoId:n,playerVars:{autoplay:1,playsinline:1},events:{onReady:r,onStateChange:l}})};return(0,c.useEffect)(()=>{const e=k()("#youtube-player-".concat(s))[0];t!==s?o(e,{event:"command",func:"stopVideo"}):(o(e,{event:"command",func:"mute"}),o(e,{event:"command",func:"playVideo"}))},[t]),(0,c.useEffect)(()=>{window.YT?d():(a=new Promise(e=>{const s=document.createElement("script");s.src="https://www.youtube.com/iframe_api";const t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(s,t),window.onYouTubeIframeAPIReady=()=>e(window.YT)}),a.then(()=>{d()}))},[]),(0,O.jsx)("div",{id:"youtube-player-".concat(s),className:"video",ref:i})},he={spaceBetween:10,slidesPerView:1},me=e=>{var s;let t=e.service,a=e.setService,o=e.onSelectService,r=e.trackingData,l=e.userId,d=e.selected,S=e.onChangeStep;const u=(0,c.useState)({}),A=(0,i.A)(u,2),E=A[0],h=A[1],m=(0,c.useState)(!0),I=(0,i.A)(m,2),g=I[0],p=I[1],C=(0,c.useState)(0),x=(0,i.A)(C,2),f=x[0],k=x[1],T=(0,c.useState)(!1),L=(0,i.A)(T,2),R=L[0],y=L[1],b=(0,c.useRef)(null);const H=()=>{b&&b.current&&k(b.current.swiper.activeIndex)},B=()=>{S(2),a(0);const e={pageId:N.A.Pages.BOOKING_SINGLE_PAGE,screenId:N.A.Screens.BOOKING_SELECT_DETAIL_SERVICE_SCREEN,tokenKey:r.token,source:r.source,utmSource:r.utmSource,eventId:N.A.Events.CLICK_BACK_IN_SERVICE_DETAIL,data:{phone:d[v.A.PHONE],salonId:d[v.A.SALON].id.toString(),chosenServices:JSON.stringify(d[v.A.CHOSEN_SERVICES]),customerId:l||0},extendData:{serviceId:t.serviceId.toString()}};Object.prototype.hasOwnProperty.call(t,"campaignId")&&t.campaignId&&(e.data.campaignId=t.campaignId),async function(e){try{await _.A.postTrackingDynamic(e)}catch(s){console.log(s.message)}}(e)};return(0,c.useEffect)(()=>{t.serviceId>0&&(async()=>{const e={salonId:24,serviceId:t.serviceId};try{p(!0);const s=await _.A.getDetailServiceV2(e),t=(null===s||void 0===s?void 0:s.data)||null;t&&h(t),p(!1)}catch(s){console.log(s)}})()},[t.serviceId]),(0,c.useEffect)(()=>{const e=d[v.A.CHOSEN_SERVICES].some(e=>t.serviceId===e.serviceId);y(e)},[d[v.A.CHOSEN_SERVICES]]),(0,c.useEffect)(()=>{window.scrollTo(0,0)},[]),(0,O.jsx)("div",{className:"booking-service",children:(0,O.jsxs)("div",{className:"service__landing",children:[g?(0,O.jsxs)("div",{className:"landing__banner",children:[(0,O.jsx)(j.A.Avatar,{className:"loading__banner",shape:"square"}),(0,O.jsx)(j.A,{paragraph:{rows:1},className:"loading__title"}),(0,O.jsx)("div",{className:"btn-back",onClick:()=>B(),children:(0,O.jsx)("img",{src:ue.A,alt:""})})]}):(0,O.jsxs)(O.Fragment,{children:[(0,O.jsx)("div",{className:"landing__banner",children:E.banners&&(0,O.jsxs)(O.Fragment,{children:[(0,O.jsx)(D(),(0,n.A)((0,n.A)({},he),{},{ref:b,on:{init:H,touchMove:H,slideChange:H},children:E.banners.map((e,s)=>(0,O.jsx)("div",{className:"banner__media ".concat(e.type),children:(0,O.jsx)("div",{className:"media",children:"image"===e.type?(0,O.jsx)("img",{src:e.link,alt:""}):"video"===e.type?(0,O.jsx)(Ee,{id:s,videoId:e.link,activeSlide:f}):""})},s))})),(0,O.jsxs)("div",{className:"number",children:[f+1,"/",E.banners.length]}),(0,O.jsx)("div",{className:"btn-back",onClick:()=>B(),children:(0,O.jsx)("img",{src:ue.A,alt:""})})]})}),(0,O.jsxs)("div",{className:"pd-15",children:[(0,O.jsxs)("div",{className:"landing__head",children:[(0,O.jsxs)("div",{children:[(0,O.jsx)("div",{className:"landing__title",children:E.title}),(0,O.jsxs)("div",{className:"landing__price",children:[(0,O.jsx)("div",{className:"price",children:t.price?t.price:E.priceDefault}),(0,O.jsx)("div",{className:"oldPrice",children:t.oldPrice})]})]}),E.timeServe?(0,O.jsxs)("div",{className:"landing__timeService",children:[(0,O.jsx)("img",{src:Ae,alt:""}),(0,O.jsx)("span",{children:E.timeServe})]}):""]}),(0,O.jsx)("div",{className:"landing__titleContent",children:E.titleContent}),(0,O.jsx)("div",{className:"landing__content",children:E.content}),(0,O.jsx)("div",{className:"landing__titleStep",children:E.titleStep}),(0,O.jsx)("div",{className:"landing__imagesStep",children:(null===(s=E.imagesStep)||void 0===s?void 0:s.length)>0?E.imagesStep.map((e,s)=>(0,O.jsx)("div",{className:"imagesStep",children:(0,O.jsx)("img",{src:e,alt:""})},s)):""})]})]}),(0,O.jsx)("div",{className:"new-affix-v2",children:(0,O.jsx)("div",{className:"flex space-between text-center content-step",children:(0,O.jsx)("div",{className:"right button-next pointer ".concat(R?"isChosen":""),onClick:()=>{R?o(t,!1):(o(t,!0),a(0),S(2))},role:"presentation",children:R?(0,O.jsxs)(O.Fragment,{children:[(0,O.jsx)("img",{src:Se,alt:""}),(0,O.jsx)("span",{children:"\u0110\xe3 ch\u1ecdn"})]}):(0,O.jsx)("span",{children:"Ch\u1ecdn d\u1ecbch v\u1ee5"})})})})]})})},Ie=e=>{let s=e.service,t=e.chosenService,a=e.trackingData,o=e.selected,r=e.userId,l=e.onSelectService,d=e.onClickDetailService,S=e.serviceInWeekend;const u=(0,c.useState)(s),A=(0,i.A)(u,2),E=A[0],h=A[1];const m=e=>{e.hasDetail&&d(e);const s={pageId:N.A.Pages.BOOKING_SINGLE_PAGE,screenId:N.A.Screens.BOOKING_SELECT_SERVICE_SCREEN,tokenKey:a.token,source:a.source,utmSource:a.utmSource,eventId:e.hasDetail?N.A.Events.CLICK_SERVICE_HAS_DETAIL:N.A.Events.CLICK_SERVICE_NO_HAS_DETAIL,data:{phone:o[v.A.PHONE],salonId:o[v.A.SALON].id.toString(),chosenServices:JSON.stringify(t),customerId:r||0},extendData:{serviceId:e.serviceId.toString()}};Object.prototype.hasOwnProperty.call(e,"campaignId")&&e.campaignId&&(s.data.campaignId=e.campaignId),async function(e){try{await _.A.postTrackingDynamic(e)}catch(s){console.log(s.message)}}(s)},I=(g=s.serviceId,t.findIndex(e=>e.serviceId===g)>=0);var g;return(0,c.useEffect)(()=>{const e=S.find(e=>e.serviceId===s.serviceId);if(e&&e.date.includes(o.dateBook)){const t=(0,n.A)((0,n.A)({},s),{},{price:e.serviceSpecial.price||null,oldPrice:e.serviceSpecial.oldPrice||null});h(t)}else h(s)},[s]),(0,O.jsxs)(O.Fragment,{children:[(0,O.jsxs)("div",{className:"item__media ".concat(E.hasDetail?"pointer ":""),onClick:()=>m(E),children:[(0,O.jsx)("img",{src:E.serviceImage,alt:"",onError:e=>{(e=>{e.target.src="https://storage.30shine.com/service/combo_booking/382.jpg"})(e)}}),E.tags.map(e=>(0,O.jsx)("div",{className:"item__tag ".concat(1===E.used?"used":""),children:e},e)),1===E.used&&1===E.selected&&(0,O.jsx)("div",{className:"item__tag used",children:" L\u1ea7n tr\u01b0\u1edbc"})]}),(0,O.jsx)("div",{className:"item__title ".concat(E.hasDetail?"pointer ":""),onClick:()=>m(E),children:E.name}),(0,O.jsx)("div",{className:"item__description ".concat(E.hasDetail?"pointer ":""),onClick:()=>m(E),children:E.subtitle}),(0,O.jsx)("div",{className:"item__price ".concat(E.hasDetail?"pointer":""),onClick:()=>m(E),children:(0,O.jsxs)("div",{className:"meta__price",children:[(0,O.jsx)("span",{className:"meta__newPrice",children:E.price?E.price:""}),E.oldPrice?(0,O.jsx)("span",{className:"meta__oldPrice",children:E.oldPrice}):""]})}),(0,O.jsxs)("div",{className:"item__button ".concat(I?"isChecked":""),onClick:()=>l(s,!I,!1),children:[(0,O.jsx)("img",{src:Se,alt:"icon"}),I?"\u0110\xe3 ch\u1ecdn":"Ch\u1ecdn"]})]})},_e={spaceBetween:8,slidesPerView:2.1},Ne=e=>{var s,t;
1let i=e.isLoading,a=e.satisfyingRule,o=e.setSatisfyingRule,r=e.item,l=e.onClickDetailService,d=e.selected,S=e.onSelectService,u=e.trackingData,A=e.userId,E=e.serviceInWeekend;const h=(0,c.useRef)(null),m=(0,c.createRef)();var I,_;I=m,_=()=>{a.isHighLight&&o((0,n.A)((0,n.A)({},a),{},{isHighLight:!1}))},(0,c.useEffect)(()=>{function e(e){I.current&&!I.current.contains(e.target)&&_()}return document.addEventListener("click",e),()=>{document.removeEventListener("click",e)}},[I]);const N=()=>{var e;const s=null===m||void 0===m||null===(e=m.current)||void 0===e?void 0:e.getBoundingClientRect().top;((e,s)=>{const t=window.pageYOffset;let n=null;window.requestAnimationFrame(function i(c){n=n||c;const a=c-n;t<e?window.scrollTo(0,(e-t)*a/s+t):window.scrollTo(0,t-(t-e)*a/s),a<s?window.requestAnimationFrame(i):window.scrollTo(0,e)})})(s?s-50:0,300)};return(0,c.useEffect)(()=>{a.isHighLight&&null!==m&&void 0!==m&&m.current&&N()},[a.isHighLight]),(0,O.jsx)("div",{children:i?(0,O.jsx)("div",{className:"service",children:(0,O.jsx)(j.A,{paragraph:{rows:3,width:"100%"}})}):(0,O.jsx)(O.Fragment,{children:(0,O.jsxs)("div",{className:a.focusCategoryId===r.order?"isHighlight":"",ref:a.focusCategoryId===r.order?m:null,id:"category-".concat(r.order),children:[a.focusCategoryId===r.order&&a.guideText&&(0,O.jsxs)("div",{className:"bot",children:[(0,O.jsx)("span",{className:"bot__icon",children:"\ud83c\udf89"}),(0,O.jsx)("div",{className:"bot__text",children:a.guideText})]}),(0,O.jsxs)("div",{className:"service",children:[(0,O.jsxs)("div",{className:"service__category",children:[(0,O.jsx)("div",{className:"category__name",children:r.categoryName}),(0,O.jsxs)("div",{className:"category__number",children:[null===(s=r.services)||void 0===s?void 0:s.length," d\u1ecbch v\u1ee5"]})]}),(0,O.jsx)("div",{className:"service__list",children:null!==(t=r.services)&&void 0!==t&&t.length?(0,O.jsx)(D(),(0,n.A)((0,n.A)({ref:h},_e),{},{children:r.services.map((e,s)=>(0,O.jsx)("div",{className:"list__item",children:(0,O.jsx)(Ie,{service:e,chosenService:d.chosenService,onClickDetailService:l,onSelectService:S,selected:d,trackingData:u,serviceInWeekend:E,userId:A})},s))})):""})]})]})})})},ge=e=>{let s=e.selected,t=e.listService,i=e.setShowDetailService,a=e.onSelectService,o=e.isLoading,r=e.isGenZMember,l=e.satisfyingRule,d=e.setS
1atisfyingRule,S=e.trackingData,u=e.userId,A=e.onChangeStep,E=e.positionScroll,h=e.setPositionScroll,m=e.serviceInWeekend;const I=(e,s)=>{a(e,s,!0)},_=e=>{d((0,n.A)((0,n.A)({},l),{},{isHighLight:!1})),h(window.scrollY||window.pageYOffset||document.body.scrollTop+(document.documentElement&&document.documentElement.scrollTop||0)),i(e),A(3)};return(0,c.useEffect)(()=>{window.scrollTo({top:E})},[E]),(0,O.jsxs)(O.Fragment,{children:[(0,O.jsx)("div",{className:"floating-service ".concat(l.isHighLight?"isHighLight":"")}),(0,O.jsxs)("div",{className:"booking-service",children:[r&&(0,O.jsx)("div",{className:"noti-genz animateOpen",children:"C\u1eaft t\xf3c gi\xe1 60k, -40% d\u1ecbch v\u1ee5 kh\xe1c trong khung gi\u1edd GenZ"}),(null===t||void 0===t?void 0:t.length)>0?t.map(e=>(0,O.jsx)(Ne,{isLoading:o,satisfyingRule:l,setSatisfyingRule:d,item:e,selected:s,onSelectService:I,onClickDetailService:_,trackingData:S,userId:u,serviceInWeekend:m},e.order)):""]})]})},ve=["listService"],Oe=["listService"],pe=["listService"],Ce=()=>{const e=[];for(let s=0;s<4;s+=1){const t={services:[],categoryName:"",order:s};e.push(t)}return e},xe=e=>
1{let s=e.onChangeChosenService,t=e.onChangeServiceWeekend,a=e.onChangeStep,o=e.onChangeCampaign,r=e.chosenService,l=void 0===r?[]:r,d=e.selected,S=e.trackingData,u=e.userId,A=e.serviceInWeekend,E=e.onChangeServiceInWeekend;const h=(0,c.useState)(!0),m=(0,i.A)(h,2),I=m[0],g=m[1],p=(0,c.useState)(!1),C=(0,i.A)(p,2),x=C[0],f=C[1],k=(0,c.useState)(0),T=(0,i.A)(k,2),j=T[0],L=T[1],R=(0,c.useState)(Ce),y=(0,i.A)(R,2),b=y[0],H=y[1],D=(0,c.useState)([]),B=(0,i.A)(D,2),P=B[0],w=B[1],K=(0,c.useState)([]),G=(0,i.A)(K,2),U=G[0],V=G[1],M=(0,c.useState)({}),Y=(0,i.A)(M,2),F=Y[0],W=Y[1],J=(0,c.useState)(0),q=(0,i.A)(J,2),z=q[0],Z=q[1],Q=d.step;const X=(e,s)=>{0===s.length&&t(e);const n=e.map(e=>{const t=s.find(s=>s.serviceId===e.serviceId);return t&&t.serviceSpecial?t.serviceSpecial:e});t(n)},$=e=>{const s=e.find(e=>Object.prototype.hasOwnProperty.call(e,"campaignId")&&e.campaignId);o(s?s.campaignId:void 0)},ee=(e,s)=>{const t=e.filter(e=>e.group!==s.group||!s.group);return t.filter(e=>!(e.parentServiceId&&!t.some(s=>s.serviceId===e.parentServiceId)))},se=function(e,t){let i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];const c=e.listService,a=(0,de.A)(e,ve);let o=[];if(t){let t=ee(l,e);if(e.parentServiceId){-1!==t.findIndex(s=>s.serviceId===e.parentServiceId)||b.forEach(s=>{s.services.forEach(s=>{if(s.serviceId===e.parentServiceId){s.listService;const e=(0,de.A)(s,Oe);t=ee(t,e),t.push(e)}})})}o=[...t,a],$(o),s(o),X(o,A);const i=P.map(s=>(s.order===e.categoryId&&(s.focus=1),s));F.focusCategoryId&&F.focusCategoryId===e.categoryId&&W((0,n.A)((0,n.A)({},F),{},{isHighLight:!1})),w(i),(e=>{let s=!1;U.length&&U.every(t=>{if("regex"===t.ruleType&&(s=((e,s)=>!!"".concat(s.serviceId,";").match(e))(t.serviceSelected,e)),s){let e={};const s=P.map(s=>(s.order===t.focusCategoryId&&(e=(0,n.A)({},s),s.focus=1),s));return e.focus&&e.focus>0||(w(s),t.isHighLight=!0,W(t)),!1}return!0})})(e)}else o=l.filter(s=>s.serviceId!==e.serviceId),c&&c.length>0&&(o=o.filter(s=>s.parentServiceId!==e.serviceId)),$(o),s(o),X(o,A);const r={pageId:N.A.Pages.BOOKING_SINGLE_PAGE,screenId:i?N.A.Screens.BOOKING_SELECT_SERVICE_SCREEN:N.A.Screens.BOOKING_SELECT_DETAIL_SERVICE_SCREEN,tokenKey:S.token,source:S.source,utmSource:S.utmSource,eventId:t?N.A.Events.CLICK_SELECT_SERVICE:N.A.Events.CLICK_REMOVE_SERVICE,data:{phone:d[v.A.PHONE],salonId:d[v.A.SALON].id.toString(),chosenServices:JSON.stringify(o),customerId:u||0},extendData:{serviceId:e.serviceId.toString()}};Object.prototype.hasOwnProperty.call(e,"campaignId")&&e.campaignId&&(r.data.campaignId=e.campaignId),async function(e){try{await _.A.postTrackingDynamic(e)}catch(s){console.log(s.message)}}(r)};return(0,c.useEffect)(()=>{d[v.A.LIST_SERVICES]&&(e=>{if(e.data){g(!1);const t=e.data.sort((e,s)=>e.order-s.order);H(t);const n=t.map(e=>({order:e.order,focus:0}));if(w(n),0===l.length){const t=[];e.data.forEach(e=>{e.services.forEach(e=>{if(1===e.selected){e.listService;const s=(0,de.A)(e,pe);t.push(s)}e.listService&&e.listService.length>0&&e.listService.forEach(e=>{1===e.selected&&t.push(e)})})}),s(t),X(t,e.rulesSpecialDay)}else{const t=l.map(e=>e.serviceId),n=[];e.data.forEach(e=>{e.services.forEach(e=>{t.includes(e.serviceId)&&n.push(e),e.listService&&e.listService.length>0&&e.listService.forEach(e=>{t.includes(e.serviceId)&&n.push(e)})})}),s(n),X(n,e.rulesSpecialDay)}}V(e.rulesFocus||[]),E(e.rulesSpecialDay||[]),f(e.isAlertCampaign||!1)})(d[v.A.LIST_SERVICES])},[d[v.A.LIST_SERVICES]]),(0,c.useEffect)(()=>{window.scrollTo(0,0)},[]),(0,O.jsx)(O.Fragment,{children:3===Q?(0,O.jsx)(me,{service:j,setService:L,onChangeStep:a,onSelectService:se,trackingData:S,userId:u,selected:d}):2===Q?(0,O.jsx)(ge,{selected:d,listService:b,setShowDetailService:L,onSelectService:se,isLoading:I,isGenZMember:x,satisfyingRule:F,setSatisfyingRule:W,trackingData:S,userId:u,onChangeStep:a,positionScroll:z,setPositionScroll:Z,serviceInWeekend:A}):""})};var fe=t(86729),ke=t(61353),Te=t(66082),je=t(57689);const Le=["visible","onOK","handleTracking","userPhone"],Re=(0,o.y)(e=>{let s=e.visible,t=e.onOK,a=e.handleTracking,o=e.userPhone,r=(0,de.A)(e,Le);const l=(0,c.useState)({value:"",error:""}),d=(0,i.A)(l,2),S=d[0],u=d[1],A=e=>{const s=e.target.value;s||u({error:"",value:""}),"0"===s[0]&&"0"!==s[1]?u({error:"",value:(0,B.qH)(s)}):u({error:"Anh nh\u1eadp s\u1ed1 \u0111i\u1ec7n tho\u1ea1i h\u1ee3p l\u1ec7 g
1i\xfap em nh\xe9!",value:(0,B.qH)(s)})},E=()=>{const e=(0,ke.FY)(S.value);if(e)u(s=>(0,n.A)((0,n.A)({},s),{},{error:e}));else{const e=S.value.replace(/\./g,"");t(e)}};return(0,c.useEffect)(()=>{o&&""===S.value&&A({target:{value:o}})},[o]),(0,c.useEffect)(()=>{s&&setTimeout(()=>{if("calc(100% - 17px)"===document.body.style.width){document.getElementsByClassName("ant-modal-wrap")[0].style.paddingRight="17px"}},0)},[s]),(0,O.jsxs)(fe.A,{className:"modal-bookingv2",visible:s,footer:null,onCancel:()=>{},closable:!1,children:[(0,O.jsx)("div",{className:"modal-booking_title",children:"Nh\u1eadp s\u1ed1 \u0111i\u1ec7n tho\u1ea1i \u0111\u1ec3 \u0111\u1eb7t l\u1ecbch"}),(0,O.jsx)(Te.A,{value:S.value,handleChangePhone:A,handlePressEnter:()=>{E()},error:S.error}),(0,O.jsx)(je.A,{text:"\u0110\u1eb6T L\u1ecaCH NGAY",handleClick:()=>{E(),a("")}}),(0,O.jsx)(T.A,{className:"link_to_home",onClick:()=>{r.history.push("/"),a("GO_HOME")},type:"link",block:!0,children:"Quay l\u1ea1i trang ch\u1ee7"})]})});var ye=t(14896),be=t(61936);const He=e=>
1{let s=e.onChangeAddress,t=e.onChangeSalon,a=e.currentAddress,o=e.onChangeSelected;const r=(0,c.useState)(!0),l=(0,i.A)(r,2),d=l[0],S=l[1],u=(0,c.useState)(!1),A=(0,i.A)(u,2),E=A[0],h=A[1],m=(0,c.useState)({inValidProvince:!1,invalidDistrict:!1}),I=(0,i.A)(m,2),N=I[0],g=I[1],p=(0,c.useState)(null===a||void 0===a?void 0:a.province),C=(0,i.A)(p,2),x=C[0],f=C[1],k=(0,c.useState)(null===a||void 0===a?void 0:a.district),T=(0,i.A)(k,2),L=T[0],R=T[1],y=(0,c.useState)(null===a||void 0===a?void 0:a.ward),b=(0,i.A)(y,2),H=b[0],D=b[1],B=(0,c.useState)(null===a||void 0===a?void 0:a.address),P=(0,i.A)(B,2),w=P[0],K=P[1],G=(0,c.useState)(1),U=(0,i.A)(G,2),V=U[0],M=U[1],Y=(0,c.useState)(!1),F=(0,i.A)(Y,2),W=F[0],J=F[1],q=(0,c.useState)(""),z=(0,i.A)(q,2),Z=z[0],Q=z[1],X=(0,c.useState)([]),$=(0,i.A)(X,2),ee=$[0],se=$[1],te=(0,c.useState)([]),ne=(0,i.A)(te,2),ie=ne[0],ce=ne[1],oe=(0,c.useState)([]),re=(0,i.A)(oe,2),le=re[0],de=re[1];function Se(){if(!x)return void g(e=>(0,n.A)((0,n.A)({},e),{},{inValidProvince:!0}));if(!L)return void g(e=>(0,n.A)((0,n.A)({},e),{},{invalidDistrict:!0}));if(!w||""===w.trim())return;s({province:x,district:L,ward:H,address:w.trim()}),t({id:L.salonId});const e=H.name?", ".concat(H.name):"",i=L.name?", ".concat(L.name):"",c=x.name?", ".concat(x.name):"",a=w.trim()+e+i+c;o(v.A.CUSTOMER_ADDRESS,a)}function ue(e){V>e&&(M(e),Q(""))}function Ae(e){let s=e;2!=e||x||(s=1),3!=e||L||(s=1),J(!0),M(s)}return(0,c.useEffect)(()=>{1==V&&0===ee.length&&async function(){try{S(!0);const e=await _.A.getListProvince();se(e)}catch(e){console.log("Error",e)}finally{S(!1)}}(),2==V&&async function(){if(x)try{var e;S(!0);const s=await _.A.getListDistrictByProvinceId(x.cityId);ce(null!==(e=null===s||void 0===s?void 0:s.data)&&void 0!==e?e:s)}catch(s){console.log("Error",s)}finally{S(!1)}}(),3==V&&async function(){if(L)try{var e;S(!0);const s=await _.A.getListWardByDistrictId(L.districtId);de(null!==(e=null===s||void 0===s?void 0:s.data)&&void 0!==e?e:s)}catch(s){console.log("Error",s)}finally{S(!1)}}()},[V]),(0,c.useEffect)(()=>{g({inValidProvince:!1,invalidDistrict:!1}),x&&L&&w&&""!==w.trim()?h(!0):h(!1)},[x,L,w,H]),(0,O.jsx)("div",{className:"booking-address",children:W?(0,O.jsxs)("div",{className:"select-address-item",children:[(0,O.jsxs)("div",{className:"header",children:[(0,O.jsx)("div",{className:"header-item pointer ".concat(1==V?"active":"active-without-border"),onClick:()=>ue(1),children:(0,O.jsx)("span",{children:"T\u1ec9nh/ Th\xe0nh"})}),(0,O.jsx)("div",{className:"header-item pointer ".concat(2==V?"active":V>2?"active-without-border":""),onClick:()=>ue(2),children:(0,O.jsx)("span",{children:"Qu\u1eadn/ Huy\u1ec7n"})}),(0,O.jsx)("div",{className:"header-item pointer ".concat(3==V?"active":""),onClick:()=>ue(3),children:(0,O.jsx)("span",{children:"Ph\u01b0\u1eddng/ X\xe3"})})]}),(0,O.jsxs)("div",{className:"address-data",children:[(0,O.jsx)("div",{className:"search",children:(0,O.jsx)(ae.A,{size:"large",value:Z,onChange:e=>Q(e.target.value),placeholder:"T\xecm ki\u1ebfm...",allowClear:!0,prefix:(0,O.jsx)(be.A,{style:{fontSize:20}}),onPressEnter:function(e){e.target.blur()}})}),d?(0,O.jsxs)("div",{className:"data-loading",children:[(0,O.jsx)(j.A,{active:!0}),(0,O.jsx)(j.A,{active:!0}),(0,O.jsx)(j.A,{active:!0}),(0,O.jsx)(j.A,{active:!0}),(0,O.jsx)(j.A,{active:!0})]}):(0,O.jsxs)("div",{className:"list-data",children:[1===V&&(0,O.jsx)("div",{className:"list list-province",children:ee.filter(e=>(0,ke.zS)(e.name||"").toUpperCase().includes((0,ke.zS)(Z.trim()).toUpperCase())).map(e=>{const s=e.totalSalon>0;return(0,O.jsx)("div",{className:"list-item ".concat(s?"active":""," pointer"),onClick:()=>function(e){e.totalSalon>0&&(f(e),M(2),Q(""))}(e),children:(0,O.jsxs)("span",{children:[e.name," ",s?"":"(ch\u01b0a tri\u1ec3n khai)"," "]})},e.cityId)})}),2===V&&(0,O.jsx)("div",{className:"list list-district",children:ie.filter(e=>(0,ke.zS)(e.name||"").toUpperCase().includes((0,ke.zS)(Z.trim()).toUpperCase())).map(e=>{const s=e.totalSalon>0;return(0,O.jsx)("div",{className:"list-item ".concat(s?"active":""," pointer"),onClick:()=>function(e){e.totalSalon>0&&(R(e),M(3),Q(""))}(e),children:(0,O.jsxs)("span",{children:[e.name," ",s?"":"(ch\u01b0a tri\u1ec3n khai)"," "]})},e.districtId)})}),3===V&&(0,O.jsx)("div",{className:"list list-ward",children:le.filter(e=>(0,ke.zS)(e.name||"").toUpperCase().includes((0,ke.zS)(Z.trim()).toUpperCase())).map(e=>{const s=e.totalSalon>0;return(0,O.jsx)("div",{className:"list-item ".concat(s?"active":""," pointer"),onClick:()=>function(e){e.totalSalon>0&&(D(e),Q(""),J(!1))}(e),children:(0,O.jsxs)("span",{children:[e.name," ",s?"":"(ch\u01b0a tri\u1ec3n khai)"," "]})},e.wardId)})})]})]})]}):(0,O.jsxs)("div",{className:"main-screen",children:[(0,O.jsxs)("div",{className:"address-form",children:[(0,O.jsxs)("div",{className:"address-item pointer",onClick:()=>Ae(1),children:[(0,O.jsx)("span",{children:x?x.name:"T\u1ec9nh / Th\xe0nh ph\u1ed1"}),(0,O.jsx)("img",{src:ye.A,alt:""})]}),N.inValidProvince&&(0,O.jsx)("span",{className:"invalid-address",children:"Anh h\xe3y ch\u1ecdn t\u1ec9nh th\xe0nh"}),(0,O.jsxs)("div",{className:"address-item pointer",onClick:()=>Ae(2),children:[(0,O.jsx)("span",{children:L?L.name:"Qu\u1eadn / Huy\u1ec7n"}),(0,O.jsx)("img",{src:ye.A,alt:""})]}),N.invalidDistrict&&(0,O.jsx)("span",{className:"invalid-address",children:"Anh h\xe3y ch\u1ecdn qu\u1eadn huy\u1ec7n"}),(0,O.jsxs)("div",{className:"address-item pointer",onClick:()=>Ae(3),children:[(0,O.jsx)("span",{children:H?H.name:"Ph\u01b0\u1eddng / X\xe3"}),(0,O.jsx)("img",{src:ye.A,alt:""})]}),(0,O.jsx)("div",{className:"address-item pointer",children:(0,O.jsx)(ae.A,{onPressEnter:function(e){e.target.blur(),Se()},value:w,onChange:e=>K(e.target.value),style:{outline:"none"},placeholder:"\u0110\u1ecba ch\u1ec9 (s\u1ed1 nh\xe0, t\xean \u0111\u01b0\u1eddng, ph\u1ed1...)"})})]}),(0,O.jsx)("div",{className:"affix-button",children:(0,O.jsx)("div",{className:"flex space-between text-center content-step",children:(0,O.jsx)("div",{className:"right button-next pointer ".concat(E?"":"btn-inactive"),onClick:Se,role:"presentation",children:(0,O.jsx)("span",{children:"X\xe1c nh\u1eadn \u0111\u1ecba ch\u1ec9"})})})})]})})},De=d()(new Date).add(1,"days").format("DD-MM-YYYY"),Be={bookHourId:0,subHourId:0,secondSubHourId:0,hour:""},Pe={[v.A.SALON]:{id:0,name:"",openingDate:""},[v.A.HOUR]:Be};const we=(0,o.y)((0,a.Ng)(function(e){const s=e.trackingData;return{trackingData:s,userPhone:e.user.phoneNumber,userId:s.customerId,listSalon:e.salon.listSalon}},e=>({setBookingSuccess:s=>e((0,A.Jx)(s)),fetchRole:s=>e((0,u.r)(s)),setSpin:s=>e((0,S.j_)(s)),fetchAllSalon:s=>e((0,E.Rz)(s))}))(e=>{let s=e.fetchRole,t=e.setSpin,a=e.setBookingSuccess,l=e.trackingData,S=e.userPhone,u=e.userId,A=e.listSalon,E=e.fetchAllSalon;const C=(0,o.W6)(),f=(0,o.zy)(),k=(0,c.useRef)(!0),T=(0,c.useCallback)(()=>{return e=C.location.search,(0,m.gA)(e);var e},[C.location.search]),j=(0,c.useRef)(T()),L=(0,c.useRef)(0),R=((0,c.useRef)(),(0,c.useRef)({receiveAdvice:!0,utilityService:[],bookWithChild:!1,acceptMakePhoto:!0}
1)),y=(0,c.useState)([]),b=(0,i.A)(y,2),H=b[0],D=b[1],B=(0,c.useState)(!1),P=(0,i.A)(B,2),w=P[0],K=P[1],G=(0,c.useState)(!1),U=(0,i.A)(G,2),V=U[0],M=U[1],Y=(0,c.useState)(!1),F=(0,i.A)(Y,2),W=F[0],J=F[1],q=(0,c.useRef)(De),z=(0,c.useState)({[v.A.PHONE]:j.current.phone||"",[v.A.DATE_BOOK]:De,[v.A.CUSTOMER_NOTE]:"",[v.A.STYLIST]:{id:0,name:""},[v.A.SALON]:{id:0,name:"",openingDate:""},[v.A.NOS]:!0,[v.A.CHOSEN_SERVICES]:[],[v.A.CHOSEN_SERVICES_WEEKEND]:[],[v.A.HOUR]:Be,[v.A.STEP]:j.current[v.A.STEP]||0,[v.A.IS_ENTER_CODE]:void 0,[v.A.CODE]:void 0,[v.A.IS_USE_PROMO]:void 0,[v.A.CAMPAIGN]:void 0,[v.A.AVAILABLE_HOURS]:0,[v.A.NOTE]:"",[v.A.NOTE_STYLIST_MOVE_SALON]:"",[v.A.LIST_SERVICES]:{},[v.A.NUMBER_PERSONS]:1,[v.A.CUSTOMER_PHONE_INVITE]:"",[v.A.CUSTOMER_ADDRESS]:""}),Z=(0,i.A)(z,2),Q=Z[0],X=Z[1],$=(0,c.useState)(!1),ee=(0,i.A)($,2),se=(ee[0],ee[1],(0,c.useState)(!1)),te=(0,i.A)(se,2),ne=te[0],ie=te[1],ce=(0,c.useState)(!1),ae=(0,i.A)(ce,2),oe=(ae[0],ae[1],(0,c.useState)(1)),re=(0,i.A)(oe,2),de=re[0],Se=re[1],ue=(0,c.useState)(1),Ae=(0,i.A)(ue,2),Ee=Ae[0],he=Ae[1],me=(0,c.useState)(0),Ie=(0,i.A)(me,2),_e=Ie[0],Ne=Ie[1],ge=(0,c.useState)(!1),ve=(0,i.A)(ge,2),Oe=ve[0],pe=(ve[1],(0,c.useState)({message:"",salonBackups:[],salonId:0})),Ce=(0,i.A)(pe,2),fe=(Ce[0],Ce[1]),ke=(0,c.useState)([]),Te=(0,i.A)(ke,2),je=Te[0],Le=(Te[1],(0,c.useState)(0)),ye=(0,i.A)(Le,2),be=(ye[0],ye[1]),we=(0,g.A)(Q[v.A.STEP]),Ke=(0,g.A)(Q[v.A.CHOSEN_SERVICES]),Ge=(0,g.A)(Q[v.A.CHOSEN_SERVICES_WEEKEND]),Ue=(0,c.useState)([]),Ve=(0,i.A)(Ue,2),Me=Ve[0],Ye=Ve[1],Fe=(0,c.useState)(Pe),We=(0,i.A)(Fe,2),Je=We[0],qe=We[1],ze=(0,c.useState)({province:void 0,district:void 0,ward:void 0,address:void 0}),Ze=(0,i.A)(ze,2),Qe=Ze[0],Xe=Ze[1],$e=Q.step,es=(e,s)=>{e===v.A.CLEAR_VOUCHER?X(e=>(0,n.A)((0,n.A)({},e),{},{[v.A.CAMPAIGN]:void 0,[v.A.CODE]:void 0})):(X(t=>(0,n.A)((0,n.A)({},t),{},{[e]:s})),e===v.A.HOUR&&Ne(0))},ss=e=>{const s=(0,n.A)({},e);X(e=>(0,n.A)((0,n.A)({},e),{},{[v.A.SALON]:s,[v.A.STEP]:0,[v.A.DATE_BOOK]:De,[v.A.CHOSEN_SERVICES]:[],[v.A.CHOSEN_SERVICES_WEEKEND]:[],[v.A.STYLIST]:{id:0,name:""},[v.A.NOTE]:"",[v.A.NOTE_STYLIST_MOVE_SALON]:"",[v.A.HOUR]:Be}))};async function ts(e){try{_.A.postTrackingDynamic(e)}catch(s){console.log(s.message)}}const ns=(0,c.useRef)(!1);const is=e=>{if(e&&$e<3){const e={pageId:N.A.Pages.BOOKING_SINGLE_PAGE,screenId:1===$e?N.A.Screens.BOOKING_SELECT_SALON_SCREEN:2===$e?N.A.Screens.BOOKING_SELECT_SERVICE_SCREEN:N.A.Screens.BOOKING_SELECT_BOOKING_SINGLE_SCREEN,eventId:N.A.Events.CLICK_BUTTON_SUCCESS_INACTIVE,tokenKey:l.token,source:l.source,utmSource:l.utmSource,data:{phone:Q[v.A.PHONE],salonId:Q[v.A.SALON].id.toString(),dateBook:Q[v.A.DATE_BOOK],stylistId:Q[v.A.STYLIST].id.toString(),hoursAvailable:Q[v.A.AVAILABLE_HOURS].toString(),chosenServices:JSON.stringify(Q[v.A.CHOSEN_SERVICES]),hourBook:Q[v.A.HOUR].hour,step:Q[v.A.STEP]}};switch($e){case 0:0!==Q[v.A.SALON].id?(he(1),Q[v.A.CHOSEN_SERVICES].length>0?(Se(1),Q[v.A.HOUR].bookHourId||Je[v.A.HOUR].bookHourId||(Ne(e=>e+1),ts(e))):(Se(0),ts(e))):(he(0),ts(e)),!Q[v.A.SALON].id||0===Q[v.A.HOUR].bookHourId&&0===Je[v.A.HOUR].bookHourId||async function(e){if(!ns.current){ns.current=!0;try{t(!0);let i="",c=[];Q[v.A.CHOSEN_SERVICES].length>0&&!w?Q[v.A.CHOSEN_SERVICES].filter(e=>{const s=e.comboDetail?"string"===typeof e.comboDetail?JSON.parse(e.comboDetail):e.comboDetail:[{id:e.id,name:e.name,type:"service"}];return c=[...c,...s],i+="".concat(s.map(e=>e.name).join(","),","),i}):Q[v.A.CHOSEN_SERVICES_WEEKEND].length>0&&Q[v.A.CHOSEN_SERVICES_WEEKEND].filter(e=>{const s=e.comboDetail?"string"===typeof e.comboDetail?JSON.parse(e.comboDetail):e.comboDetail:[{id:e.id,name:e.name,type:"service"}];return c=[...c,...s],i+="".concat(s.map(e=>e.name).join(","),","),i}),Q.NoS||(i+="NoS,");const o=R.current;let r=[];o.utilityService&&o.utilityService.length>0&&(r=o.utilityService.map(e=>({id:e.id,name:e.name})));const d=(0,n.A)({},j.current);d&&(delete d.utm_source,delete d.token);let S=Q[v.A.SALON].id;const A={[v.A.BOOK_HOUR_ID]:Q[v.A.HOUR].bookHourId,[v.A.SUB_HOUR_ID]:Q[v.A.HOUR].subHourId,[v.A.SECON_SUB_HOUR_ID]:Q[v.A.HOUR].secondSubHourId};Je[v.A.SALON].id>0&&(S=Je[v.A.SALON].id,A[v.A.BOOK_HOUR_ID]=Je[v.A.HOUR].bookHourId,A[v.A.SUB_HOUR_ID]=Je[v.A.HOUR].subHourId,A[v.A.SECON_SUB_HOUR_ID]=Je[v.A.HOUR].secondSubHourId);const E=(0,n.A)((0,n.A)({[v.A.SALON_ID]:S,[v.A.PHONE]:Q[v.A.PHONE],[v.A.STYLIST_ID]:Q[v.A.STYLIST].id,[v.A.DATE_BOOK]:Q[v.A.DATE_BOOK],[v.A.SERVICES]:i.slice(0,i.length-1),[v.A.CHOSEN_SERVICES]:c.length?JSON.stringify(c):"",[v.A.BOOK_HOUR_ID]:A[v.A.BOOK_HOUR_ID],[v.A.SUB_HOUR_ID]:A[v.A.SUB_HOUR_ID],[v.A.SECON_SUB_HOUR_ID]:A[v.A.SECON_SUB_HOUR_ID],[v.A.BOOK_AT]:"customer_ios"===l.source?0:"customer_android"===l.source?2:3,[v.A.IS_ENTER_CODE]:Q[v.A.IS_ENTER_CODE],[v.A.CAMPAIGN]:Q[v.A.CAMPAIGN],[v.A.CODE]:Q[v.A.CODE],[v.A.IS_USE_PROMO]:Q[v.A.IS_USE_PROMO],[v.A.CUSTOMER_NOTE]:Q[v.A.CUSTOMER_NOTE],[v.A.USER_ID]:u,[v.A.NOTE]:Q[v.A.NOTE]},o),{}
1,{utilityService:JSON.stringify(r),utmSource:j.current.utm_source||"",params:JSON.stringify(d),[v.A.CUSTOMER_ADDRESS]:Q[v.A.CUSTOMER_ADDRESS],[v.A.NUMBER_PERSONS]:Q[v.A.NUMBER_PERSONS],[v.A.CUSTOMER_PHONE_INVITE]:Q[v.A.CUSTOMER_PHONE_INVITE]}),m="/booking-at-home/success";if("create"===e)try{const e=await _.A.booKingV2(E);t(!1);const s={message:"Th\xf4ng B\xe1o",description:"\u0110\u1eb7t L\u1ecbch Th\xe0nh C\xf4ng!",duration:1,onClose:()=>{C.push({pathname:m,state:Qe}),ts({pageId:N.A.Pages.BOOKING_SINGLE_PAGE,screenId:N.A.Screens.BOOKING_SUCCESS_SCREEN,eventId:N.A.Events.GO_TO_BOOKING_SUCCESS_PAGE,tokenKey:l.token,source:l.source,utmSource:l.utmSource,data:{phone:Q[v.A.PHONE],salonId:Q[v.A.SALON].id.toString(),dateBook:Q[v.A.DATE_BOOK],stylistId:Q[v.A.STYLIST].id.toString(),hoursAvailable:Q[v.A.AVAILABLE_HOURS].toString(),chosenServices:JSON.stringify(Q[v.A.CHOSEN_SERVICES]),hourBook:Q[v.A.HOUR].hour,bookingId:e.booking.id,customerId:u||0},extendData:d})},className:"success"};a(e.booking.id),h.A.success(s)}catch(s){t(!1);const e={message:"Th\xf4ng B\xe1o",description:s.response.data,duration:3,className:"error"};_.A.postError({message:e.description}),h.A.error(e)}}finally{ns.current=!1}}}("create");break;case 1:Q[v.A.SALON].id>0&&X(e=>(0,n.A)((0,n.A)({},e),{},{[v.A.STEP]:2}));break;case 2:Q[v.A.CHOSEN_SERVICES].length>0?(Se(e=>e+1),es(v.A.STEP,0)):(Se(0),ts(e))}}else{if($e>0){const e=JSON.parse(localStorage.getItem("count_step2")||"0")+1;localStorage.setItem("count_step2",e),es(v.A.STEP,0)}1===$e&&(0!==Q[v.A.SALON].id?he(1):he(0)),2===$e&&(Q[v.A.SALON].id>0?Q[v.A.CHOSEN_SERVICES].length>0?Se(e=>e+1):Se(0):he(0))}};const cs=e=>{const s=Q[v.A.SALON].id,t=A.filter(s=>e.includes(s.id)),i=A.find(e=>s===e.id),c={longitude:i?i.longitude:0,latitude:i?i.latitude:0};return(0,m.tr)(t).map(e=>(0,n.A)((0,n.A)({},e),{},{distance:(0,m.Sl)({longitude:e.longitude,latitude:e.latitude},c)})).sort((e,s)=>e.distance-s.distance)};const as=e=>{const s=d()(e,"DD-MM-YYYY"),t=s.day(),n=s.format("MMDD");return["0421","0430","0501"].includes(n)||5===t||6===t||0===t};(0,c.useEffect)(()=>{window.scrollTo(0,0),k.current=!1;const e=r.parse(f.search),s=e.token,t=void 0===s?"":s,n=e.salonId;if($e!==Q[v.A.STEP]){const e=t?{token:t}:{},s=(0,m.Ch)(Q,e);C.replace({pathname:"/booking-at-home",search:s}
1)}if(Number($e)>1&&es(v.A.STEP,0),0===Number(n)&&Number($e)>1&&is(!1),(async()=>{if(0===A.length){const e=await E(Q[v.A.PHONE]);return Promise.resolve(e)}return Promise.resolve(A)})().then(e=>{if(Q[v.A.STEP]>=1){const s=Q[v.A.SALON].id,t=e.find(e=>e.id===s),n=t&&t.salonTrial?2:1;be(n)}}),f.state){const e=f.state,s=e.province,t=e.district,n=e.ward,i=e.address;Xe({province:s||void 0,district:t||void 0,ward:n||void 0,address:i||void 0});const c=n.name?", ".concat(n.name):"",a=t.name?", ".concat(t.name):"",o=s.name?", ".concat(s.name):"",r=i.trim()+c+a+o;es(v.A.CUSTOMER_ADDRESS,r)}},[]),(0,c.useEffect)(()=>{const e=r.parse(f.search),s=e.step,t=void 0===s?-1:s;e.salonId;k.current||Number(t)!==Q[v.A.STEP]&&es(v.A.STEP,Number(t)>0&&Number(t)<3?Number(t):0)},[f.search]),(0,c.useEffect)(()=>{qe(Pe),k.current||(()=>{const e=r.parse(f.search),s=e.step,t=e.token,n=void 0===t?"":t,i=e.phone;if(parseInt(s)!==Q[v.A.STEP]){const e=n?{token:n}:{},t=(0,m.Ch)(Q,e);s||i?C.push({pathname:"/booking-at-home",search:t}):C.replace({pathname:"/booking-at-home",search:t})}})(),2===$e&&Q[v.A.HOUR].bookHourId&&X(e=>(0,n.A)((0,n.A)({},e),{},{[v.A.HOUR]:Be})),1===Q[v.A.STEP]&&window.scrollTo(0,0),2===we&&0===Q[v.A.STEP]&&Q[v.A.CHOSEN_SERVICES].length>0&&(()=>{const e=document.querySelector("#block-time-serivce"),s=document.body.getBoundingClientRect().top,t=e.getBoundingClientRect().top-s-200;window.scrollTo({top:t})})(),1===we&&0===Q[v.A.STEP]&&window.scrollTo(0,0),function(e){const s=[{phone:Q[v.A.PHONE]},{phone:Q[v.A.PHONE],salonId:Q[v.A.SALON].id.toString()},{phone:Q[v.A.PHONE],salonId:Q[v.A.SALON].id.toString(),dateBook:Q[v.A.DATE_BOOK],stylistId:Q[v.A.STYLIST].id.toString(),chosenServices:JSON.stringify(Q[v.A.CHOSEN_SERVICES])},{phone:Q[v.A.PHONE],salonId:Q[v.A.SALON].id.toString(),dateBook:Q[v.A.DATE_BOOK],stylistId:Q[v.A.STYLIST].id.toString(),chosenServices:JSON.stringify(Q[v.A.CHOSEN_SERVICES]),hoursAvailable:Q[v.A.AVAILABLE_HOURS].toString(),hourBook:Q[v.A.HOUR].hour,bookingId:L.current}],t=[{screenId:N.A.Screens.BOOKING_SELECT_BOOKING_SINGLE_SCREEN,eventId:N.A.Events.GO_TO_BOOKING_SELECT_BOOKING_SINGLE_SCREEN},{screenId:N.A.Screens.BOOKING_SELECT_SALON_SCREEN,eventId:N.A.Events.GO_TO_BOOKING_SELECT_SALON_SCREEN},{screenId:N.A.Screens.BOOKING_SELECT_SERVICE_SCREEN,eventId:N.A.Events.GO_TO_BOOKING_SELECT_SERVICE_SCREEN},{screenId:N.A.Screens.BOOKING_SELECT_DETAIL_SERVICE_SCREEN,eventId:N.A.Events.GO_TO_BOOKING_DETAIL_SERVICE_SCREEN}];ts({pageId:N.A.Pages.BOOKING_SINGLE_PAGE,screenId:t[e].screenId,eventId:t[e].eventId,tokenKey:l.token,source:l.source,utmSource:l.utmSource,data:(0,n.A)((0,n.A)({},s[e]),{},{customerId:u||0})})}(Q[v.A.STEP])},[Q[v.A.STEP]]),(0,c.useEffect)(()=>{if(Q[v.A.SALON].id&&""===Q[v.A.SALON].name&&async function(e){try{const s=await _.A.getSalonById(e);91===e&&(s.openingDate="07-10-2020");let t=De;if(s.openingDate){const e=d()(s.openingDate).format("DD-MM-YYYY");(0,m.gH)(e)&&(t=e)}const i={id:e,name:s.name,openingDate:t,address:s.address};X(e=>(0,n.A)((0,n.A)({},e),{},{[v.A.SALON]:i,[v.A.DATE_BOOK]:t}))}catch(s){console.log(s)}}(Q[v.A.SALON].id),A.length>0){const e=Q[v.A.SALON].id,s=A.find(s=>s.id===e),t=s&&s.salonTrial?2:1;be(t)}},[Q[v.A.SALON].id]),(0,c.useEffect)(()=>{Q[v.A.SALON].id>0&&"0"!==Q[v.A.PHONE]&&(function(){if(Q[v.A.SALON].id){const e={phone:Q[v.A.PHONE],salonId:Q[v.A.SALON].id};s(e)}}(),(async()=>{const e={salonId:Q[v.A.SALON].id,customerPhone:Q[v.A.PHONE]};Me.length>0?e.choosenServiceIds=Me:e.choosenServiceIds="0";try{const s=await _.A.getListServiceV4(e),t=(null===s||void 0===s?void 0:s.data)||null;if(!t)return;t&&(es(v.A.LIST_SERVICES,t),t.isSaveServiceChoosen&&Me.length?(es(v.A.CHOSEN_SERVICES,Ke),es(v.A.CHOSEN_SERVICES_WEEKEND,Ge)):(es(v.A.CHOSEN_SERVICES,[]),es(v.A.CHOSEN_SERVICES_WEEKEND,[])),!t.isSaveServiceChoosen&&Me.length&&Se(0))}catch(s){console.log(s)}})())},[Q[v.A.SALON].id,Q[v.A.PHONE]]),(0,c.useEffect)(()=>{es(v.A.HOUR,Be),Ne(0)},[Q[v.A.DATE_BOOK],Q[v.A.STYLIST].id]),(0,c.useEffect)(()=>{const e=Q[v.A.CHOSEN_SERVICES].map(e=>e.serviceId);if(e.length>0){const s=e.join(",");Ye(s)}},[Q[v.A.CHOSEN_SERVICES]]),(0,c.useEffect)(()=>{const e=Q[v.A.CHOSEN_SERVICES],s=Q[v.A.CHOSEN_SERVICES_WEEKEND];let t=!1;
1e.forEach(e=>{-1===s.findIndex(s=>s.serviceId===e.serviceId)&&(t=!0)});const n=as(Q[v.A.DATE_BOOK]),i=as(q.current);M(i!==n&&t||t&&i)},[Q[v.A.CHOSEN_SERVICES],Q[v.A.CHOSEN_SERVICES_WEEKEND],Q[v.A.DATE_BOOK]]),(0,c.useEffect)(()=>{const e=as(Q[v.A.DATE_BOOK]);K(e),J((e=>{const s=d()(e,"DD-MM-YYYY").format("MMDD");return["0421","0430","0501"].includes(s)})(Q[v.A.DATE_BOOK])),q.current=Q[v.A.DATE_BOOK]},[Q[v.A.DATE_BOOK]]),(0,c.useEffect)(()=>{Oe&&fe(e=>(0,n.A)((0,n.A)({},e),{},{salonBackups:cs(je)}))},[A,je]),(0,c.useEffect)(()=>{if(e=Q[v.A.PHONE],!Number(e)||10!==e.length||"0"!==e[0]||"0"===e[1]){ie(!0);ts({pageId:N.A.Pages.BOOKING_SINGLE_PAGE,screenId:1===$e?N.A.Screens.BOOKING_SELECT_SALON_SCREEN:2===$e?N.A.Screens.BOOKING_SELECT_SERVICE_SCREEN:N.A.Screens.BOOKING_SELECT_BOOKING_SINGLE_SCREEN,eventId:N.A.Events.SHOW_POPUP_INPUT_PHONE,tokenKey:l.token,source:l.source,utmSource:l.utmSource,data:{salonId:Q[v.A.SALON]?Q[v.A.SALON].id.toString():"",customerId:u||0}})}var e},[Q[v.A.PHONE]]);return(0,O.jsxs)("div",{className:"booking-single-screen",children:[(0,O.jsxs)("div",{className:"body relative ".concat(j.current.inApp||["customer_ios","customer_android","friendly_checkin"].includes(j.current.source)?"body-mobile":""),children:[$e>=0&&3!==$e&&(0,O.jsx)(x,{onChangeStep:is,listService:[],step:$e}),0===$e&&(0,O.jsx)(le,{hasClickInSalon:Ee,hasClickNextStep:_e,onChangeSelected:es,moveSalonStylistbackUp:function(e){X(s=>(0,n.A)((0,n.A)({},s),{},{[v.A.SALON]:e[v.A.SALON],[v.A.STYLIST]:e[v.A.STYLIST],[v.A.STEP]:0,[v.A.HOUR]:Be,[v.A.NOTE_STYLIST_MOVE_SALON]:"",[v.A.DATE_BOOK]:e[v.A.DATE_BOOK]||Q[v.A.DATE_BOOK]}));const s=(0,m.Ch)(Q,{salonId:e[v.A.SALON].id});C.push({pathname:"/booking-at-home",search:s}
1)},selected:Q,changeCheckBox:()=>Ne(0),isDateBookWeekend:w,isShowNoteChangePrice:V,serviceInWeekend:H,setHasClickNextInSalon:he,onChangeSalon:ss,hasClickInService:de,setHasClickInService:Se,isDateBookHoliday:W,selectedSalonBackUp:Je,onChangeSelectedBackUp:(e,s)=>{qe(t=>(0,n.A)((0,n.A)({},t),{},{[e]:s}))}}),1===$e&&(0,O.jsx)(He,{currentAddress:Qe,onChangeAddress:Xe,onChangeSalon:ss,onChangeSelected:es}),2===$e||3===$e?(0,O.jsx)(xe,{onChangeStep:e=>es(v.A.STEP,e),onChangeChosenService:e=>es(v.A.CHOSEN_SERVICES,e),onChangeServiceWeekend:e=>es(v.A.CHOSEN_SERVICES_WEEKEND,e),onChangeCampaign:e=>es(v.A.CAMPAIGN,e),selected:Q,trackingData:l,chosenService:Q[v.A.CHOSEN_SERVICES],userId:u,serviceInWeekend:H,onChangeServiceInWeekend:e=>D(e)}):"",1!==$e&&3!==$e&&(0,O.jsx)(p,{onChangeStep:is,step:$e,dataBooking:Q,selectedSalonBackUp:Je})]}),(0,O.jsx)(I.A,{}),(0,O.jsx)(Re,{visible:ne,onOK:e=>{X(s=>(0,n.A)((0,n.A)({},s),{},{[v.A.PHONE]:e})),ie(!1);const s=r.parse(C.location.search);let t=r.stringify((0,n.A)((0,n.A)({},s),{},{phone:e}));C.replace({pathname:"/booking-at-home",search:t});ts({pageId:N.A.Pages.BOOKING_SINGLE_PAGE,screenId:1===parseInt(s.step,10)?N.A.Screens.BOOKING_SELECT_SALON_SCREEN:2===parseInt(s.step,10)?N.A.Screens.BOOKING_SELECT_SERVICE_SCREEN:N.A.Screens.BOOKING_SELECT_BOOKING_SINGLE_SCREEN,eventId:N.A.Events.INPUT_PHONE_NUMBER,tokenKey:l.token,source:l.source,utmSource:l.utmSource,data:{phone:Q[v.A.PHONE],salonId:Q[v.A.SALON]?Q[v.A.SALON].id.toString():"",customerId:u||0}})},handleTracking:e=>{ts({pageId:N.A.Pages.BOOKING_SINGLE_PAGE,screenId:1===$e?N.A.Screens.BOOKING_SELECT_SALON_SCREEN:2===$e?N.A.Screens.BOOKING_SELECT_SERVICE_SCREEN:N.A.Screens.BOOKING_SELECT_BOOKING_SINGLE_SCREEN,eventId:"GO_HOME"===e?N.A.Events.GO_TO_HOME_IN_POPUP_INPUT_PHONE:N.A.Events.CLICK_BOOKING_IN_POPUP_INPUT_PHONE,tokenKey:l.token,source:l.source,utmSource:l.utmSource,data:{salonId:Q[v.A.SALON]?Q[v.A.SALON].id.toString():"",customerId:u||0}})},userPhone:S})]})}))}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.