https://sushiroll.co.id/static/js/user_profile.696e1820.chunk.js

1"use strict";(self.webpackChunksushiroll_web=self.webpackChunksushiroll_web||[]).push([[472],{4669:(e,s,n)=>{n.r(s),n.d(s,{default:()=>we});var a=n(5043),r=n(9456),t=n(35),o=n(3830),l=n(7270),i=n(7842);const d="profileForm_formWrapper__M1zva",c="profileForm_formContact__9BKMr",u="profileForm_nameForm__0F+6o",p="profileForm_formInput__qG+ag",h="profileForm_nameInput__AqJKT",m="profileForm_phoneInput__pkVUg",v="profileForm_password__I94hQ",f="profileForm_inputLabel__SIlYX",_="profileForm_inputError__ife7l",x="profileForm_inputForm__Lr95D",j="profileForm_phoneForm__L0S40",g="profileForm_inputButton__Ul+qQ",w="profileForm_buttonWrapper__Bjf0l",N="profileForm_avatar__FrQsp",C="profileForm_uploader__tSCuH",y="profileForm_passwordEdit__vOpBW",b="profileForm_profileForm__mZRpn";var I=n(2555),A=n(45),F=n(9892),E=n(3829),k=n(1454),S=n(579);const R=["label","description","startAddOn","endAddOn","required","dataError","onChange","className","inputClassName","descriptionClassName","showInputError","defaultValue","errorClassName"],O=(e,s)=>{if("phone-code"===s){return(0,E.Uf)(e)}return e};const P=function(e){let{label:s,description:n,startAddOn:r,endAddOn:t,required:o,dataError:l,onCh

1ange:i,className:d,inputClassName:c,descriptionClassName:u,showInputError:p=!0,defaultValue:h,errorClassName:m}=e,v=(0,A.A)(e,R);const f=(0,a.useRef)(),_=(0,a.useRef)(),x=(0,a.useRef)(),[j,g]=(0,a.useState)(O(h,null===r||void 0===r?void 0:r.type)||""),[w,N]=(0,a.useState)(),C=w||l,y="phone-code"===(null===r||void 0===r?void 0:r.type),b=(0,a.useRef)();return(0,a.useLayoutEffect)(()=>{if(r){const e=_.current,s=null===e||void 0===e?void 0:e.offsetWidth;f.current.style.paddingLeft="".concat(s+20,"px"),f.current.style.paddingTop="17px"}},[r,j]),(0,a.useLayoutEffect)(()=>{if(t){const e=x.current,s=null===e||void 0===e?void 0:e.offsetWidth;f.current.style.paddingRight="".concat(s+30,"px")}},[t]),(0,S.jsxs)("div",{className:"".concat(k.A.inputForm," ").concat(d),children:[(0,S.jsx)("label",{htmlFor:v.id,children:s}),(0,S.jsxs)("div",{className:k.A.inputWrapper,children:[r&&(0,S.jsx)("span",{ref:_,"data-addon":"start",children:(0,S.jsx)(F.A,{ref:b,startAddOn:r,inputValue:h,onChange:g})}),(0,S.jsx)("input",(0,I.A)((0,I.A)((0,I.A)({},v),y&&{id:"input-".concat(v.id)}),{},{className:c,ref:f,defaultValue:O(h,null===r||void 0===r?void 0:r.type),onChange:e=>{var s;e.target.value&&!l&&N();const n=null===(s=b.current)||void 0===s?void 0:s.selected;y&&g(n+e.target.value),i&&i(e)},onBlur:e=>{o&&!e.target.value&&N("Field is required")},"data-error":!!C})),y&&(0,S.jsx)("input",{id:null===v||void 0===v?void 0:v.id,style:{display:"none"},value:j}),t&&(0,S.jsx)("span",{ref:x,"data-addon":"end",children:t})]}),n&&(0,S.jsx)("div",{className:"".concat(k.A.description," ").concat(u),children:n}),p&&C&&(0,S.jsx)("span",{"data-error":"true",className:m,children:C})]})},M=["image/jpeg","image/jpg","image/png","image/gif"];const L=function(){var e;const s=(0,a.useRef)(),n=(0,r.wA)(),c=(0,r.d4)(e=>e.auth),{user:m}=c,[v,j]=(0,a.useState)(!1),y=null===c||void 0===c||null===(e=c.user)||void 0===e?void 0:e.profile,[I,A]=(0,a.useState)(null===y||void 0===y?void 0:y.name),[F,E]=(0,a.useState)(!0);(0,a.useEffect)(()=>{(0,l.Ay)(l.z8.trackPage,"EditProfile",{user:m})},[m]);const k=(0,a.useMemo)(()=>y&&y.name.split(" ").slice(0,2).map(e=>e.charAt(0).toUpperCase()).reduce((e,s)=>e+s),[y]),R=(0,a.useCallback)(async()=>{const e=new FormData;e.set("name",I),s.current.files[0]&&e.append("avatar",s.current.files[0]);if(await n((0,t.r7)(y.id,e)))return n((0,t.Gf)({refreshAccountInfo:!0})),(0,l.Ay)(l.z8.event,l.Ty.PROFILE.EDIT_PROFILE,{user:m}),n((0,o.h$)("success","Your profile picture has been updated"))},[n,I,y.id,m]),O=(0,a.useCallback)(()=>{if(s.current.files.length){const e=s.current.files[0];if(!M.includes(e.type))return;const n=URL.createObjectURL(e);j(n),R()}},[s,R]),L=(0,a.useCallback)(()=>{(async()=>{const e=new FormData;e.set("name",I),s.current.files[0]&&e.append("avatar",s.current.files[0]);if(await n((0,t.r7)(y.id,e)))n((0,t.Gf)({refreshAccountInfo:!0})),(0,l.Ay)(l.z8.event,l.Ty.PROFILE.EDIT_PROFILE,{user:m}),E(!0),n((0,o.h$)("success","Your profile has been updated"))})()},[s,I,y,n,m]),D=(0,a.useMemo)(()=>!v&&y.avatar,[v,y]),V=(0,a.useMemo)(()=>!v&&!y.avatar,[v,y]);return(0,S.jsxs)("div",{className:d,children:[(0,S.jsxs)("div",{className:p,children:[(0,S.jsx)("div",{className:f,children:"Profile Picture"}),(0,S.jsxs)("div",{className:b,children:[(0,S.jsxs)("div",{children:[v&&(0,S.jsx)("img",{className:N,alt:"profile_pic",src:v,width:"100",height:"100"}),D&&(0,S.jsx)("img",{className:N,alt:"profile_pic",src:y.avatar,width:"100",height:"100"}),V&&(0,S.jsx)("span",{className:N,children:k})]}),(0,S.jsxs)("section",{className:C,children:[(0,S.jsx)("input",{onChange:O,type:"file",accept:"image/x-png,image/gif,image/jpeg,image/png",capture:"camera",hidden:!0,ref:s}),(0,S.jsx)(i.A,{onClick:()=>{s.current.click()},shape:"rounded",bgColor:"dark",size:"large",children:"Change Profile Picture"}),(0,S.jsx)("span",{children:"Must be JPEG, PNG, or GIF and cannot exceed 10MB"})]})]})]}),(0,S.jsxs)("div",{className:u,children:[(0,S.jsx)("div",{className:f,children:"Name"}),(0,S.jsxs)("div",{className:g,children:[(0,S.jsx)("form",{className:h,children:(0,S.jsx)(P,{id:"name",errorClassName:_,placeholder:"e.g. 81234567890",defaultValue:y.name,className:x,onChange:e=>{(e=>{const s=e.target.value;if(s===y.name)return E(!0);A(s),E(!1)})(e)}})}),!F&&(0,S.jsx)("div",{className:w,children:(0,S.jsx)(i.A,{bgColor:"sushiroll",onClick:L,children:"Save"})})]})]})]})};var D=n(3216),V=n(9217);const T=/^(([^<>()\]\\.,;:\s@"]+(\.[^<>()\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,W={phoneInvalid:"",validationInvalid:!1};function B(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:W,s=arguments.length>1?arguments[1]:void 0;const{payload:n,type:a}=s;switch(a){case"phone":case"input-phone":const s=null===n||void 0===n?void 0:n.toString(),a=!s||s&&(null===s||void 0===s||!s.startsWith("0"))&&(null===s||void 0===s?void 0:s.length)<13?"":"Invalid phone number";return(0,I.A)((0,I.A)({},e),{},{phoneInvalid:a,validationInvalid:!!a});case"email":const r=!n||T.test(n)?"":n.includes("@")?"Invalid email":"An email address must be contain a single @";return(0,I.A)((0,I.A)({},e),{},{emailInvalid:r,validationInvalid:!!r});default:return e}}var z=n(6151);const U="OtpModal_phoneModal__LjDPT",Y="OtpModal_show__4ZLRH",$="OtpModal_passWrapper__oU1kr",q="OtpModal_form-wrapper__8kVem",G="OtpModal_verification__z8sxk",Z="OtpModal_form__UqBtR",K="OtpModal_resend-otp__0TtxO",H="OtpModal_countdown__C9TIa",Q="OtpModal_resend-button__TSYrR",J="OtpModal_actionButton__hCwVx";const X=function(e){let{open:s,content:n,codeLength:t,onDismiss:o,onResendOtp:l,onVerifyOtp:i,phoneNumber:d,resendCountdown:c,setResendCountdown:u}=e;const p=(0,a.useRef)(),[h,m]=(0,a.useState)(""),[v,f]=(0,a.useState)(!1),[_,x]=(0,a.useState)(!1),j=(0,a.useRef)(),g=(0,r.d4)(e=>e.auth);(0,a.useEffect)(()=>{_&&(j.current=setInterval(()=>{u(e=>e-1)},1e3))},[u,_]),(0,a.useEffect)(()=>{u(60),w()},[d,u]);const w=()=>{const e=p.current.elements;for(let s=0;s<(null===e||void 0===e?void 0:e.otp.length);s++)e.otp[s].value=""},N=(0,a.useCallback)(()=>{clearInterval(j.current),x(!1),u(60),x(!1)},[u]);(0,a.useEffect)(()=>{0===c&&N()},[c,N]),(0,a.useEffect)(()=>()=>{_||x(!0)},[s,_]);const C=e=>{const{target:s}=e;

1if(["Tab","Backspace","Enter"].includes(e.key))"Backspace"===e.key&&!s.value&&s.previousElementSibling&&s.previousElementSibling.focus();else{if(!/[0-9]/.test(e.key))return e.preventDefault();s.value||(s.value=e.key),s.nextElementSibling&&(s.nextElementSibling.focus(),e.preventDefault())}},y=async()=>{const e=(()=>{var e;const s=p.current.elements,n=[];for(let a=0;a<(null===s||void 0===s?void 0:s.otp.length);a++)n.push(null===s||void 0===s?void 0:s.otp[a].value);return null===n||void 0===n||null===(e=n.filter(e=>e))||void 0===e?void 0:e.join("")})();if((null===e||void 0===e?void 0:e.length)===t){f(!0);try{await i({mobile:d,otp:e}),o()}catch(r){var s,n,a;const e=null===r||void 0===r||null===(s=r.response)||void 0===s||null===(n=s.data)||void 0===n||null===(a=n.error)||void 0===a?void 0:a.code,t=r.response?r.response.data.error.message:"Internal Server Error!";if(e===V.CA.INVALID_OTP_CODE)return m("Incorrect OTP Code");m(t)}finally{f(!1)}}else m("Invalid OTP code")};return(0,S.jsx)("div",{className:"".concat(U," ").concat(s?Y:""),children:(0,S.jsx)("div",{className:$,children:(0,S.jsxs)("div",{className:"".concat(q),children:[(0,S.jsx)("h3",{children:"Verification"}),(0,S.jsx)("span",{className:G,children:n}),(0,S.jsx)("form",{id:"otp-form",className:Z,ref:p,onSubmit:y,children:[...Array(t)].map((e,s)=>(0,S.jsx)("input",{type:"text",name:"otp",maxLength:"1",onKeyDown:C},s))}),(!!h||!!g.err)&&(0,S.jsx)("div",{className:"error",children:h||g.err}),v?(0,S.jsx)(z.Rh,{height:"100px"}):(0,S.jsxs)(S.Fragment,{children:[(0,S.jsxs)("span",{className:K,children:[(0,S.jsx)("span",{children:"Didn\u2019t get the code? "}),_?(0,S.jsxs)("span",{className:H,children:["Resend in ",c,"s"]}):(0,S.jsx)("span",{className:Q,onClick:async()=>{try{f(!0),await l(),x(!0)}catch(e){const s=e.response?e.response.data.error.message:"Internal Server Error!";m(s)}finally{f(!1)}},children:"Resend code"})]}),(0,S.jsx)(z.$n,{onClick:y,shape:"rounded",bgColor:"sushiroll",width:"80%",className:J,"data-submit":!0,children:"Verify"}),(0,S.jsx)(z.$n,{onClick:()=>{m(""),o()},type:"text",width:"80%",bgColor:"sushiroll",disabled:v,className:J,children:"Cancel"})]})]})})})};var ee=n(1601),se=n(2943);const ne="passwordModal_passModal__Dd6CX",ae="passwordModal_show__6+AZK",re="passwordModal_passWrapper__wOoSZ",te="passwordModal_passContent__GnCd8",oe="passwordModal_pwd__SID-S",le="passwordModal_inputGroup__PBKTd",ie="passwordModal_showPasswordBtn__9PgSW",de="passwordModal_buttonSection__lnSaw",ce="passwordModal_passHelper__HVUuY",ue="passwordModal_passWarning__owrjc";var pe=n(2183);const he="passwordConfirm_container__eoKaj",me="passwordConfirm_warning__nTFi6",ve="passwordConfirm_buttonWrapperDefault__qqJj+";const fe=function(e){let{onClose:s,onResume:n}=e;return(0,S.jsxs)("div",{className:"".concat(he),children:[(0,S.jsx)("p",{className:me,children:"Change password to secure your account"}),(0,S.jsx)("p",{children:"Are you sure you want to exit this setting?"}),(0,S.jsxs)("div",{className:ve,children:[(0,S.jsx)(z.$n,{onClick:n,shape:"rounded",size:"large",width:"100%",bgColor:"#F7CC45",children:"Secure Your Account"}),(0,S.jsx)(z.$n,{onClick:s,shape:"rounded",size:"large",width:"100%",bgColor:"#F3131329",textColor:"#F20303",children:"Exit Change Password"})]})]})},_e=new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#%&])(?=.{8,})");const xe=function(e){let{open:s,onDismiss:n}=e;const[l,d]=(0,a.useState)(!1),[c,u]=(0,a.useState)(!1),p=(0,a.useRef)(),[h,m]=(0,a.useState)(!1),v=(0,a.useRef)(),f=(0,a.useRef)(),_=(0,r.wA)(),x=(0,D.zy)(),j=(0,D.Zp)(),{defaultPassword:g}=(0,E.mA)(null===x||void 0===x?void 0:x.search),w=(0,a.useCallback)(()=>{u(e=>!e)},[]),N=(0,a.useCallback)(()=>{d(e=>!e)},[]),C=(0,a.useCallback)(()=>{if(g){j({search:"",replace:!0})}m(!1),n()},[g,n,j]),y=(0,a.useCallback)(async()=>{if(p.current.value!==v.current.value)return m("Your confirmation password is not matching");if(!_e.test(p.current.value))return m("Your password must contain at least 8 characters with lowercase, uppercase, number and special character");try{(await _((0,t.f3)(f.current.value,p.current.value,v.current.value))).error||(_((0,o.h$)("success","Your password has been updated")),f.current.value="",v.current.value="",p.current.value="",C())}catch(e){(e=>{switch(e.code){case"gfx4000003":m("Old Password should NOT be shorter than 8 characters");break;case"gfu4030207":m("Your old password is incorrect");break;default:m("Something went wrong, please try again later")}})((0,E.Fy)(e))}},[p,v,_,C]);return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(pe.A,{open:c,children:(0,S.jsx)(fe,{onClose:()=>{w(!1),C()},onResume:()=>{w(!1)}})}),(0,S.jsx)("div",{className:"".concat(ne," ").concat(s?ae:""),children:(0,S.jsx)("div",{className:re,children:(0,S.jsxs)("div",{className:te,children:[(0,S.jsxs)("div",{children:[(0,S.jsx)("h3",{children:"Change Password"}),(0,S.jsx)("span",{className:ce,children:"For security, please enter your old password."})]}),(0,S.jsx)("span",{className:ue,children:h}),(0,S.jsxs)("section",{children:[(0,S.jsx)("span",{children:"Old Password"}),(0,S.jsxs)("div",{className:le,children:[(0,S.jsx)("input",{ref:f,type:l?"text":"password",minLength:8,className:oe,defaultValue:g&&decodeURIComponent(g)}),(0,S.jsx)("button",{type:"button",onClick:N,className:ie,children:(0,S.jsx)("img",{src:l?ee.A:se.A,alt:"view"})})]})]}),(0,S.jsxs)("section",{children:[(0,S.jsx)("span",{children:"New Password"}),(0,S.jsxs)("div",{className:le,children:[(0,S.jsx)("input",{ref:p,type:l?"text":"password",minLength:8,className:oe}),(0,S.jsx)("button",{type:"button",onClick:N,className:ie,children:(0,S.jsx)("img",{src:l?ee.A:se.A,alt:"view"})})]})]}),(0,S.jsxs)("section",{children:[(0,S.jsx)("span",{children:"Reenter New Password"}),(0,S.jsxs)("div",{className:le,children:[(0,S.jsx)("input",{ref:v,type:l?"text":"password",minLength:8,className:oe}),(0,S.jsx)("button",{type:"button",onClick:N,className:ie,children:(0,S.jsx)("img",{src:l?ee.A:se.A,alt:"view"})})]})]}),(0,S.jsxs)("section",{className:de,children:[(0,S.jsx)(i.A,{textColor:"white",bgColor:"#2E2E2E",shape:"rounded",onClick:w,width:"11em",children:"Cancel"}),(0,S.jsx)(i.A,{bgColor:"sushiroll",shape:"rounded",width:"11em",onClick:y,textStyle:{fontWeight:"600"},children:"Change Password"})]})]})})})]})};const je=function(){var e,s,n,l,d,u;const h=(0,a.useRef)(null),N=(0,r.wA)(),C=(0,r.d4)(e=>e.auth),[b,I]=(0,a.useState)(!1),[A,F]=(0,a.useState)(!1),[k,R]=(0,a.useState)(!1),[O,M]=(0,a.useState)(60),{account:L,telco:T}=C.user,z=(0,a.useRef)(),[U,Y]=(0,a.useState)(!1),[$,q]=(0,a.useReducer)(B,W),{phoneInvalid:G,validationInvalid:Z}=$,K=(0,D.zy)(),{defaultPassword:H}=(0,E.mA)(null===K||void 0===K?void 0:K.search),Q=()=>{I(!b)};return(0,a.useEffect)(()=>{h.current=!0},[h]),(0,a.useEffect)(()=>{H&&void 0!==H&&I(!0)},[H,K.search]),(0,S.jsxs)(S.Fragment,{children:[h.current&&(0,S.jsx)(xe,{open:b,onDismiss:Q}),(0,S.jsx)(X,{content:"Please type the verification code sent to ".concat(null===z||void 0===z||null===(e=z.current)||void 0===e||null===(s=e.phone)||void 0===s||null===(n=s.value)||void 0===n?void 0:n.trim()),open:A,codeLength:6,onDismiss:async()=>{F(!A)},resendCountdown:O,setResendCountdown:M,onResendOtp:async()=>{var e,s,n;await(0,t.gw)(null===z||void 0===z||null===(e=z.current)||void 0===e||null===(s=e.phone)||void 0===s||null===(n=s.value)||void 0===n?void 0:n.trim())},onVerifyOtp:async e=>{await N((0,t.NA)(e)),N((0,t.Gf)())},phoneNumber:null===z||void 0===z||null===(l=z.current)||void 0===l||null===(d=l.phone)||void 0===d||null===(u=d.value)||void 0===u?void 0:u.trim()}),(0,S.jsxs)("div",{className:c,children:[(0,S.jsxs)("div",{className:p,children:[(0,S.jsx)("div",{className:f,children:"Email"}),(0,S.jsx)("div",{className:g,children:(0,S.jsx)("div",{children:(0,S.jsx)("input",{disabled:!0,defaultValue:L.email,type:"text",maxLength:"300"})})})]}),(0,S.jsxs)("div",{className:j,children:[(0,S.jsx)("div",{className:f,children:"Mobile No."}),(0,S.jsxs)("div",{className:g,children:[(0,S.jsx)("form",{className:m,ref:e=>{const s=null===e||void 0===e?void 0:e.elements;if(s)for(let n=0;n<s.length;n++){if(!s[n].value)return Y(!0);Y(!!Z),z.current=s}},children:(0,S.jsx)(P,{type:"number",id:"phone",errorClassName:_,placeholder:"e.g. 81234567890",startAddOn:{type:"phone-code",defaultValue:"+62"},dataError:G,defaultValue:null===L||void 0===L?void 0:L.mobile,className:x,onChange:e=>{(e=>{var s;const n=e.target.id,a=e.target.type,r=e.target.value;"number"===a&&(null===r||void 0===r||null===(s=r.toString())||void 0===s?void 0:s.length)>50||q({type:n,payload:r})})(e),M(0)}})}),!U&&(0,S.jsx)("div",{className:w,children:(0,S.jsx)(i.A,{disabled:k,bgColor:"sushiroll",onClick:async()=>{R(!0);try{60===O&&await(0,t.gw)(z.current.phone.value.trim()),F(!A)}catch(a){var e,s,n;const r=null===a||void 0===a||null===(e=a.response)||void 0===e||null===(s=e.data)||void 0===s||null===(n=s.error)||void 0===n?void 0:n.code;if(r===V.CA.PHONE_ALREADY_USED)return N((0,o.h$)("error","Error: User Mobile Taken."));if(r===V.CA.INVALID_PHONE_NUMBER)return N((0,o.h$)("error","Error: Invalid phone number."));N((0,o.h$)("error","Error sending OTP, please try again later."))}finally{R(!1)}},children:"Save"})})]})]}),(0,S.jsxs)("div",{className:p,children:[(0,S.jsx)("div",{className:f,children:"Password"}),(0,S.jsxs)("div",{"data-password-hide":!0,className:v,children:["**************",!T&&(0,S.jsx)("span",{className:y,onClick:Q})]})]})]})]})},ge="profile_loadingContainer__0AzIr";const we=function(){const e=(0,r.wA)(),s=(0,r.d4)(e=>e.auth),n=null===s||void 0===s?void 0:s.loading;return(0,a.useEffect)(()=>{e((0,t.Gf)()),e((0,t.II)())},[e]),(0,S.jsxs)(S.Fragment,{children:[n&&(0,S.jsx)("div",{className:ge,children:(0,S.jsx)(z.Rh,{})}),(0,S.jsx)(L,{}),(0,S.jsx)(je,{})]})}},1454:(e,s,n)=>{n.d(s,{A:()=>a});const a={inputForm:"InputForm_inputForm__j+nvu",description:"InputForm_description__eygio",selectInput:"InputForm_selectInput__vVC4i",optionListSmall:"InputForm_optionListSmall__1cy3p","checkmark-icon":"InputForm_checkmark-icon__uhk+B",hidden:"InputForm_hidden__LQZX5",inputWrapper:"InputForm_inputWrapper__A-Kms",insideLabel:"InputForm_insideLabel__sDWBE",optionList:"InputForm_optionList__2booP",optionInput:"InputForm_optionInput__hQf6y",inputFormInline:"InputForm_inputFormInline__JM9o7",optionItem:"InputForm_optionItem__lqyw0"}}}]);
2//# sourceMappingURL=user_profile.696e1820.chunk.js.map