https://www.income.com.sg/assets/js/widgets/retirement-calculator/…KaQ66xMMNFDqdmVdcx4P9v7eHxRKYO_kFbCSAjIepOg

1import{R as fe}from"../../../../vendor/react-mount.js";import{j as e,r}from"../../../../vendor/react-vendors.js";import{B as h}from"../../../../vendor/button.js";import{F as S}from"../../../../vendor/form-field.js";import{I as g}from"../../../../vendor/input-number.js";import{p as ve}from"../../../../vendor/purify.es.js";import{e as Ne,t as pe}from"../../../../vendor/event-tag.js";import"../../../../vendor/index.js";import"../../../../vendor/icon.js";const Ce=({imageUrl:M,title:i,description:A,linkPrimary:R,linkSecondary:T,labelPrimary:f,labelSecondary:F,onClickPrimary:u=()=>{},onClickSecondary:$=()=>{}})=>e.jsxs("div",{className:"card card-product-retirement",children:[e.jsx("div",{className:"card-image card-product-retirement-image",children:e.jsx("img",{src:M})}),e.jsxs("div",{className:"card-product-retirement-content ",children:[e.jsx("div",{className:"card-product-retirement-title font-subsection",children:i}),e.jsx("div",{className:"card-product-retirement-description line-clamp line-clamp-4",children:A}),e.jsxs("div",{className:"card-product-retirement-action",children:[e.jsx(h,{size:"default",style:"primary",href:R,onClick:u,children:f}),e.jsx(h,{size:"default",style:"link",href:T,onClick:$,children:F})]})]})]}),ke=({estimationDetailModalContent:M,firstStepTitle:i,currentAgeLabel:A,idealRetirementAgeLabel:R,desiredMonthlyRetirementAmountLabel:T,estimationLinkLabel:f,estimationDetailModalHeader:F,secondStepTitle:u,secondStepImage:$,thirdStepTitle:b,thirdStepImage:O,lifeExpectancy:U,defaultReturnRate:re,defaultInflationRate:ae,defaultDelayRetirementPlan:ce,nextLabel:_,previousLabel:w,startOverLabel:H,productDescription:se,productTitle:D,productLinkPrimary:le,productLinkSecondary:ie,productImageUrl:oe,productLabelPrimary:V="Buy now",productLabelSecondary:W="Speak to us"})=>{const[E,v]=r.useState("personal details"),[a,de]=r.useState(""),[m,Y]=r.useState(),[s,q]=r.useState(),[I,G]=r.useState(),[x,J]=r.useState(),[N,K]=r.useState(),[B,Q]=r.useState();function c(t){pe({...t,event_type:"Engagement"})}function ue(t){Ne(".calculator-widget-wrapper .important-notes-accordion .accordion-item .accordion-header .accordion-button","click",n=>({current_section:`${t}-${i}`,click_text:n.innerText||"",user_action:n.classList.contains("collapsed")?"Collapse":"Expand",event_type:"Engagement"}))}function X(){Y(void 0),q(void 0),G(void 0),J(parseInt(re)),K(parseInt(ae)),Q(parseInt(ce)),v("personal details")}function p(t){return Number(t).toLocaleString(void 0,{minimumFractionDigits:2,maximumFractionDigits:2})}const C=t=>t/100,l=(t,n=0)=>typeof t=="number"&&!isNaN(t)?t:n;function me(t,n,o,d,j=0){return t=Number(t),n=Number(n),t===0?-o*n-d:((1-Math.pow(1+t,n))/t*o*(1+t*j)-d)/Math.pow(1+t,n)}function Z(t,n,o,d,j){if(t!=0){var ne=Math.pow(1+t,n);return-(t*(d+ne*o))/((-1+ne)*(1+t*j))}else if(n!=0)return-(d+o)/n;return 0}const P=r.useMemo(()=>m&&s&&s>m,[m,s]),y=r.useMemo(()=>l(s)-l(m),[s,m]),L=r.useMemo(()=>parseInt(U)-l(s),[s]),ee=r.useMemo(()=>{const t=C(l(x)),n=C(l(N));return(1+t)/(1+n)-1},[x,N]),z=r.useMemo(()=>{const t=l(I),n=C(l(N));return t*Math.pow(1+n,y)},[I,N,y]),k=r.useMemo(()=>me(ee,L,z*-12,0,1),[ee,L,z]),te=r.useMemo(()=>{const t=C(l(x));return Z(t,y,0,-k,1)/12},[x,y,k]),xe=r.useMemo(()=>{const t=C(l(x)),n=Math.max(y-l(B),0);return Z(t,n,0,-k,1)/12},[x,y,B,k]);r.useEffect(()=>{var o;const t=((o=document.querySelector(".section-container:has(.calculator-widget-wrapper) h1"))==null?void 0:o.innerText)||"";de(t),ue(t),X();const n=d=>{const j=d.target;j.tagName==="INPUT"&&j.type==="number"&&d.preventDefault()};return window.addEventListener("wheel",n,{passive:!1,capture:!0}),()=>{window.removeEventListener("wheel",n,{capture:!0})}},[]);const he=()=>e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"retirement-calculator-title font-subsection",children:i}),e.jsx("div",{className:"retirement-calculator-form",children:e.jsxs("div",{className:"form-input-wrapper",children:[e.jsx(S,{label:A,id:"retirement-calculator-current-age",children:e.jsx(g,{onBlur:t=>t!==null&&c({user_action:"Input Text",current_section:`${a}-${i}`,click_text:`Current age-${t}`}),integerOnly:!0,value:m,onChange:Y,id:"retirement-calculator-current-age",placeholder:" "})}),e.jsx(S,{label:R,id:"retirement-calculator-ideal-age",errorMessage:"Ideal retirement age should be higher than current age.",className:"flex-grow-1",isError:s&&!P,children:e.jsx(g,{onBlur:t=>t!==null&&c({user_action:"Input Text",current_section:`${a}-${i}`,click_text:`Ideal retirement age-${t}`}),integerOnly:!0,value:s,onChange:q,id:"retirement-calculator-ideal-age",placeholder:" "})}),e.jsx(S,{onClickInfoMessage:()=>c({user_action:"Select",current_section:`${a}-${i}`,click_text:f}),infoMessage:e.jsxs("a",{href:"#",className:"estimation-modal-link font-body-sm","data-bs-toggle":"modal","data-bs-target":"#modal

1-consent",children:[" ",f," "]}),label:T,id:"retirement-calculator-desired-amount",children:e.jsx(g,{onBlur:t=>t!==null&&c({user_action:"Input Text",current_section:`${a}-${i}`,click_text:`Desired monthly retirement amount-${t}`}),useCurrency:!0,currencySymbol:"$",value:I,onChange:G,id:"retirement-calculator-desired-amount",placeholder:" "})})]})}),ge(),e.jsx("div",{className:"retirement-calculator-action",children:e.jsxs(h,{disabled:!m||!P||!I||!P,style:"primary",size:"default",onClick:()=>{v("retirement calculation details"),c({user_action:"CTA Click",current_section:`${a}-${i}`,click_text:_})},children:[" ",_," "]})})]}),ye=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"retirement-calculator-calculation",children:[e.jsx("div",{className:"retirement-calculator-calculation-image d-none d-lg-block",children:e.jsx("img",{src:$})}),e.jsxs("div",{className:"retirement-calculator-calculation-content",children:[e.jsx("div",{className:"retirement-calculator-title font-subsection",children:u}),e.jsx("div",{className:"retirement-calculator-calculation-image d-block d-lg-none",children:e.jsx("img",{src:$})}),e.jsxs("div",{className:"retirement-calculator-monthly-amount-needed",children:["At your ideal retirement age of ",e.jsxs("span",{className:"fw-bold",children:[" ",s," years old"]}),", you will need a monthly amount of ",e.jsxs("span",{className:"fw-bold text-color-brand",children:["$",p(z)]})," to sustain your preferred lifestyle. This is based on",e.jsx(g,{id:"return-rate",onBlur:t=>t!==null&&c({user_action:"CTA Click",current_section:`${a}-${u}`,click_text:`% inflation rate-${t}`}),useCurrency:!0,currencySymbol:"",value:N,onChange:K,className:"input-calculation"}),"  % inflation rate."]}),e.jsxs("div",{className:"retirement-calculator-total-save-needed",children:["To achieve this, you will need to have set aside ",e.jsxs("span",{className:"fw-bold text-color-brand",children:[" $",p(k)]}),"  by ",e.jsxs("span",{className:"fw-bold",children:[" ",s," years old"]}),". From now on, you need to save  ",e.jsxs("span",{className:"fw-bold text-color-brand",children:["$",p(te)]})," every month. This is based on",e.jsx(g,{onBlur:t=>t!==null&&c({user_action:"CTA Click",current_section:`${a}-${u}`,click_text:`% rate of return-${t}`}),useCurrency:!0,currencySymbol:"",id:"return-rate",value:x,onChange:J,className:"input-calculation"})," % rate of return"]}),e.jsxs("div",{className:"retirement-calculator-info-disclaimer",children:["The calculations are based on a projected life expectancy of ",U," years old."]})]})]}),e.jsxs("div",{className:"retirement-calculator-action",children:[e.jsxs(h,{style:"primary",className:"retirement-calculator-action-next",size:"default",onClick:()=>{v("retirement calculation final"),c({user_action:"CTA Click",current_section:`${a}-${u}`,click_text:_})},children:[" ",_," "]}),e.jsxs(h,{style:"secondary",className:"retirement-calculator-action-previous",size:"default",onClick:()=>{v("personal details"),c({user_action:"CTA Click",current_section:`${a}-${u}`,click_text:w})},children:[" ",w," "]})]})]}),je=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"retirement-calculator-calculation",children:[e.jsx("div",{className:"retirement-calculator-calculation-image d-none d-lg-block",children:e.jsx("img",{src:O})}),e.jsxs("div",{className:"retirement-calculator-calculation-content",children:[e.jsx("div",{className:"retirement-calculator-title font-subsection",children:b}),e.jsx("div",{className:"retirement-calculator-calculation-image d-block d-lg-none",children:e.jsx("img",{src:O})}),e.jsxs("div",{className:"retirement-calculator-monthly-amount-needed",children:["If you are not saving ",e.jsxs("span",{className:"fw-bold text-color-brand",children:["$",p(te)," "]}),"from now, you may not be able to retire comfortably at ",s," years old."]}),e.jsxs("div",{className:"retirement-calculator-total-save-needed",children:["Or if you delay your retirement plans by",e.jsx(g,{id:"delay-retirement-plan",onBlur:t=>t!==null&&c({user_action:"CTA Click",current_section:`${a}-${b}`,click_text:`delay your retirement plans-${t} years`}

1),integerOnly:!0,className:"input-calculation",value:B,onChange:Q}),"years, you will have to save ",e.jsxs("span",{className:"fw-bold text-color-brand",children:["$",p(xe)]})," every month to live the retirement lifestyle you want."]})]})]}),e.jsx(Ce,{imageUrl:oe,title:D,description:se,linkPrimary:le,linkSecondary:ie,labelPrimary:V,labelSecondary:W,onClickPrimary:()=>c({user_action:"CTA Click",current_section:`${a}-${D}`,click_text:V}),onClickSecondary:()=>c({user_action:"Link Click",current_section:`${a}-${D}`,click_text:W})}),e.jsxs("div",{className:"retirement-calculator-action",children:[e.jsxs(h,{style:"primary",size:"default",className:"retirement-calculator-action-next",onClick:()=>{X(),c({user_action:"CTA Click",current_section:`${a}-${b}`,click_text:H})},children:[" ",H," "]}),e.jsxs(h,{style:"secondary",size:"default",className:"retirement-calculator-action-previous",onClick:()=>{v("retirement calculation details"),c({user_action:"CTA Click",current_section:`${a}-${b}`,click_text:w})},children:[" ",w," "]})]})]}),ge=()=>e.jsx("div",{className:"modal fade modal-consent",id:"modal-consent",tabIndex:-1,"aria-hidden":"true",children:e.jsx("div",{className:"modal-dialog modal-dialog-centered",children:e.jsxs("div",{className:"modal-content",children:[e.jsxs("div",{className:"modal-header",children:[e.jsx("h4",{className:"mb-0",children:F}),e.jsx("a",{className:"modal-close",role:"button",onClick:()=>c({user_action:"Select",current_section:`${a}-Tell us more about you and your needs-${f} Popup`,click_text:"Close Icon"}),"data-bs-dismiss":"modal","aria-label":"Close",children:e.jsx("i",{className:"income-icons-xmark"})})]}),e.jsx("div",{className:"modal-body",children:e.jsx("div",{dangerouslySetInnerHTML:{__html:ve.sanitize(M)}})})]})})});return e.jsxs("div",{className:"retirement-calculator",children:[E==="personal details"&&he(),E==="retirement calculation details"&&ye(),E==="retirement calculation final"&&je()]})};document.addEventListener("DOMContentLoaded",()=>{fe({id:"#retirement-calculator",Component:ke})});