\n {/* Desktop View */}\n
\n )\n }\n}\n\nexport default Slide1;\n","import React from 'react';\n\nclass Slide2 extends React.Component {\n constructor(props) {\n super(props);\n this.slide2 = React.createRef();\n this.handleScroll = this.handleScroll.bind(this);\n this.ctaButtonHandler = this.ctaButtonHandler.bind(this);\n this.state = {\n open: false,\n visible: false,\n };\n }\n\n\n componentDidMount() {\n this.props.custScrollTo(this.slide2.current)\n\n let $slide2Carousel = $('.slide2__carousel');\n $slide2Carousel.filter('.slick-initialized').slick('unslick');\n $slide2Carousel.slick({\n centerMode: true,\n initialSlide: 1,\n slidesToShow: 1,\n infinite: true,\n arrows: true,\n dots: true,\n variableWidth: true,\n nextArrow: \"\",\n prevArrow: \"\",\n });\n \n window.addEventListener('scroll', this.handleScroll);\n }\n\n\n componentWillUnmount() {\n window.removeEventListener('scroll', this.handleScroll);\n }\n\n handleScroll() {\n let view = this.slide2.current.getBoundingClientRect();\n const Buffer = 5\n if (view.top <= Buffer) this.setState({ visible: true });\n if (this.state.visible && (view.top >= window.innerHeight / 2)) {\n this.props.closeSlide();\n }\n }\n\n getScreenWidth() {\n return window.innerWidth;\n }\n\n ctaButtonHandler() {\n const nextSlideIsOpen = document.querySelector('.slide-3') != null\n if (nextSlideIsOpen) {\n this.props.custScrollTo(document.querySelector('.slide-3'))\n } else {\n this.props.openNextSlide()\n }\n }\n\n render() {\n return (\n \n
\n \n
\n \n
\n \n
\n \n 
\n
\n {this.props.journey === 1 ? this.props.data?.bannerText : this.props.data?.savingsComponent.bannerText}
\n\n
\n\n {/* Mobile view */}\n \n
\n \n \n \n \n
\n \n \n {this.props.data?.copyrightLink}\n
\n\n \n
\n {this.props.journey === 1 ? this.props.data?.bannerText : this.props.data?.savingsComponent.bannerText}
\n\n \n \n
\n {/* Info popup modal */}\n \n \n
\n \n \n {this.props.data?.copyrightLink}
\n\n
\n \n
\n \n
\n \n
\n \n Important information and assumptions
\n \n\n
\n )\n }\n}\n\nexport default Slide2;\n","import React from 'react';\n\nclass Slide3 extends React.Component {\n constructor(props) {\n super(props);\n this.slide3 = React.createRef();\n this.handleScroll = this.handleScroll.bind(this);\n this.disableIosTextFieldZoom = this.disableIosTextFieldZoom.bind(this);\n this.minSavingsValue = 2000;\n this.savingsInputTimer = null;\n this.state = {\n collapseOpen: false,\n visible: false,\n currentAge: '',\n retireAge: 65,\n leavingReason: 1,\n gender: '',\n withdrawalYear: '',\n rawCurrentInvestment: 0,\n rawVestedInvestment: 0,\n rawVestedHarmonisedInvestment: 0,\n rawSavingsInvestment: 0,\n currentInvestment: '',\n vestedInvestment: '',\n vestedHarmonisedInvestment: '',\n savingsInvestment: '',\n rawSalaryValue: 0,\n salaryValue: '',\n withDrawalYearNextError: false,\n withDrawalYearMinError: false,\n withDrawalYearMinNote: false, \n withDrawlYearEagerValidation: false,\n formValid: false,\n bsTemplate: '',\n dropContent: [\n { value: 0, text: \"Select a reason below\" },\n { value: 1, text: \"Resignation\" },\n { value: 2, text: \"Dismissal\" },\n { value: 3, text: \"Retrenchment\" }\n ]\n };\n }\n componentDidMount() {\n this.props.custScrollTo(this.slide3.current)\n $('[data-toggle=\"popover\"]').popover()\n $(\".fade\").addClass(\"in\")\n var customSelect = $('.c-custom-select');\n $(document).on(\"click\", \".popover .slide3__popover-cancel\", function () {\n $(this).parents(\".popover\").popover('hide');\n });\n\n // Options for custom Select\n jcf.setOptions('Select', {\n wrapNative: false,\n wrapNativeOnMobile: false,\n fakeDropInBody: false,\n maxVisibleItems: 4\n });\n\n jcf.replace(customSelect);\n\n window.addEventListener('scroll', this.handleScroll);\n\n this.disableIosTextFieldZoom();\n }\n\n\n componentWillUnmount() {\n window.removeEventListener('scroll', this.handleScroll);\n }\n\n handleScroll() {\n let view = this.slide3.current.getBoundingClientRect();\n const Buffer = 5\n if (view.top <= Buffer) this.setState({ visible: true });\n if (this.state.visible && (view.top >= window.innerHeight / 2)) {\n this.props.closeSlide();\n }\n }\n\n toggleCollapse() {\n this.setState({ collapseOpen: !this.state.collapseOpen })\n }\n\n\n disableIosTextFieldZoom() {\n\n const checkIsIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;\n\n if (!checkIsIOS) return;\n\n const el = document.querySelector('meta[name=viewport]');\n\n if (el !== null) {\n let content = el.getAttribute('content');\n let re = /maximum\\-scale=[0-9\\.]+/g;\n\n if (re.test(content)) {\n content = content.replace(re, 'maximum-scale=1.0');\n } else {\n content = [content, 'maximum-scale=1.0'].join(', ')\n }\n\n el.setAttribute('content', content);\n }\n }\n\n handleInvestmentValue(e, rawInvestmentVar, investmentVar) { \n \n // on savings component input\n // wait for timeout before enabling eager validation messages \n if (rawInvestmentVar === 'rawSavingsInvestment' && !this.state.withDrawlYearEagerValidation) {\n clearTimeout(this.savingsInputTimer);\n this.savingsInputTimer = setTimeout(()=>{\n this.setState({ withDrawalYearEagerValidation: true }, () => {\n this.handleWithdrawalYear(this.state.withdrawalYear);\n });\n }, 1500);\n }\n\n // pre-decimal formatting method\n let val = e.target.value;\n\n const startCursorPos = e.target.selectionStart\n const startLength = val.length;\n\n // strip non-numeric chars except '.'\n val = val.replace(/[^0-9\\.]+/g, '');\n\n\n // if nothing entered, return investment value to 0\n if (val == '') {\n this.setState({ [rawInvestmentVar]: 0, [investmentVar]: '' }, () => {\n this.validationCheck();\n\n if (rawInvestmentVar === 'rawSavingsInvestment') {\n this.handleWithdrawalYear(this.state.withdrawalYear);\n }\n })\n return;\n } \n\n // round decimals to 2 places (if exist)\n if (val.split('.')[1] && val.split('.')[1].length > 2) {\n val = parseFloat(val).toFixed(2);\n }\n\n // format thousands and add currency symbol\n const formattedVal = 'R' + val.replace(/\\B(?=(\\d{3})+(?!\\d))/g, \" \");\n\n const endLength = formattedVal.length;\n const newCursorPos = endLength - startLength + startCursorPos;\n\n if (val.match(/\\d+(?!\\w)/) !== null) {\n this.setState({ [rawInvestmentVar]: parseFloat(val), [investmentVar]: formattedVal }, () => {\n e.target.selectionStart = newCursorPos;\n e.target.selectionEnd = newCursorPos;\n this.validationCheck();\n\n if (rawInvestmentVar === 'rawSavingsInvestment') {\n this.handleWithdrawalYear(this.state.withdrawalYear);\n }\n });\n }\n }\n\n\n\n\n\n handleSalaryValue(e) {\n\n // pre-decimal formatting method\n let val = e.target.value;\n\n const startCursorPos = e.target.selectionStart\n const startLength = val.length;\n\n // strip non-numeric chars except '.'\n val = val.replace(/[^0-9\\.]+/g, '');\n\n // if nothing entered, return investment value to 0\n if (val == '') {\n this.setState({ rawSalaryValue: 0, salaryValue: '' }, () => {\n this.validationCheck();\n })\n return;\n }\n\n // round decimals to 2 places (if exist)\n if (val.split('.')[1] && val.split('.')[1].length > 2) {\n val = parseFloat(val).toFixed(2);\n }\n\n // format thousands and add currency symbol\n const formattedVal = 'R' + val.replace(/\\B(?=(\\d{3})+(?!\\d))/g, \" \");\n\n const endLength = formattedVal.length;\n const newCursorPos = endLength - startLength + startCursorPos;\n\n if (val.match(/\\d+(?!\\w)/) !== null) {\n this.setState({ rawSalaryValue: parseFloat(val), salaryValue: formattedVal }, () => {\n e.target.selectionStart = newCursorPos;\n e.target.selectionEnd = newCursorPos;\n this.validationCheck();\n });\n }\n\n }\n\n handleCurrentAge(e) {\n this.setState({ currentAge: e.target.value }, () => this.validationCheck());\n\n if (e.target.value < 18 || e.target.value > this.state.retireAge) {\n e.target.classList.add('has-error');\n } else {\n e.target.classList.remove('has-error');\n }\n }\n\n handleCurrentAgePopUp(e) {\n var popover = bootstrap.Popover.getInstance(document.getElementById('currentAgeInput'))\n if (e.target.value >= 18 && e.target.value <= this.state.retireAge) {\n popover.hide();\n } else {\n\n if (e.target.value < 18) {\n e.target.setAttribute('data-bs-content', e.target.getAttribute('data-bs-content-min'));\n } else if (e.target.value > this.state.retireAge) {\n e.target.setAttribute('data-bs-content', e.target.getAttribute('data-bs-content-max'));\n }\n\n popover.show();\n\n // popovers should be on tags (with a tabindex), this is a work-around to enable them to be dismissable when triggered by other elements\n $('[data-toggle=\"popover\"]').on('shown.bs.popover', function () {\n document.body.addEventListener('click', () => {\n popover.hide();\n }, { once: true })\n })\n }\n }\n\n handleLeaveReason(e) {\n this.setState({ leavingReason: e.target.value })\n }\n\n handleGender(index) {\n this.setState({ gender: index }, () => this.validationCheck())\n }\n\n // called on radio select and savings component input\n handleWithdrawalYear(index) {\n this.setState({ withdrawalYear: index }, () => this.validationCheck()); \n\n // only applies to savings component journey\n if (this.props.journey === 2) { \n \n // clear all errors\n this.setState({ withDrawalYearNextError: false }); \n this.setState({ withDrawalYearMinError: false }); \n this.setState({ withDrawalYearMinNote: false });\n\n // if have withdrawn this year\n if (index === 1) {\n\n // if savings less than min allowed, show note\n if(this.state.rawSavingsInvestment < this.minSavingsValue && (this.state.rawSavingsInvestment !== 0 || this.state.savingsInvestment !== '')){\n // eager show error \n if (this.state.withDrawalYearEagerValidation) {\n this.setState({ withDrawalYearMinNote: true }); \n } \n }\n\n\n // if savings more than min, show error\n if(this.state.rawSavingsInvestment >= this.minSavingsValue){\n this.setState({ withDrawalYearNextError: true }); \n }\n \n \n } \n\n // if haven't withdrawn this year\n if (index === 0) {\n\n // if savings less than min allowed, show error\n if(this.state.rawSavingsInvestment < this.minSavingsValue && (this.state.rawSavingsInvestment !== 0 || this.state.savingsInvestment !== '')){\n\n // eager show error \n if (this.state.withDrawalYearEagerValidation) {\n this.setState({ withDrawalYearMinError: true }); \n } \n } \n\n \n }\n\n }\n }\n\n handleWithdrawalYearBlur(index) {\n \n if (this.state.withDrawlYearEagerValidation) { \n this.handleWithdrawalYear(index); \n } else {\n this.setState({ withDrawalYearEagerValidation: true }, () => {\n this.handleWithdrawalYear(index);\n });\n }\n \n }\n \n\n handleRetireAge(e) {\n this.setState({ retireAge: e.target.value }, () => this.validationCheck());\n\n if (e.target.value < 55 || e.target.value > 89) {\n e.target.classList.add('has-error');\n } else {\n e.target.classList.remove('has-error');\n }\n }\n\n handleRetireAgePopUp(e) {\n var popover = bootstrap.Popover.getInstance(document.getElementById('retAgeInput'))\n if (e.target.value >= 55 && e.target.value <= 89) {\n popover.hide();\n }\n else {\n\n if (e.target.value < 55) {\n e.target.setAttribute('data-bs-content', e.target.getAttribute('data-bs-content-min'));\n } else if (e.target.value > 89) {\n e.target.setAttribute('data-bs-content', e.target.getAttribute('data-bs-content-max'));\n }\n\n popover.show();\n\n // popovers should be on tags (with a tabindex), this is a work-around to enable them to be dismissable when triggered by other elements\n $('[data-toggle=\"popover\"]').on('shown.bs.popover', function () {\n document.body.addEventListener('click', () => {\n popover.hide();\n }, { once: true })\n })\n }\n }\n\n handleSalaryValuePopUp(e) {\n var popover = bootstrap.Popover.getInstance(document.getElementById('salaryAmount'));\n\n if (e.target.value !== '') {\n popover.hide();\n }\n else { \n popover.show();\n\n // popovers should be on tags (with a tabindex), this is a work-around to enable them to be dismissable when triggered by other elements\n $('[data-toggle=\"popover\"]').on('shown.bs.popover', function () {\n document.body.addEventListener('click', () => {\n popover.hide();\n }, { once: true })\n })\n }\n }\n \n\n\n validationCheck() {\n let isFormValid = true;\n \n if (this.state.currentAge < 18 || this.state.currentAge > this.state.retireAge) {\n isFormValid = false;\n }\n if (this.state.retireAge < 55 || this.state.retireAge > 89) {\n isFormValid = false;\n }\n if (this.state.rawSalaryValue === 0 && this.state.salaryValue === '') {\n isFormValid = false;\n }\n if (this.state.gender === '') {\n isFormValid = false;\n }\n if (this.state.withdrawalYear === ''){\n isFormValid = false;\n }\n\n // on exit journey: invalid if...\n if(this.props.journey === 1){\n\n // both vested amounts are 0 AND either retirement is 0 or savings is blank\n if (this.state.rawVestedInvestment === 0 && this.state.rawVestedHarmonisedInvestment === 0 && (this.state.savingsInvestment === '' || this.state.rawCurrentInvestment === 0) ) {\n isFormValid = false;\n } \n\n\n }\n \n // on savings journey: invalid if...\n if(this.props.journey === 2){\n\n // savings component amount is 0\n if (this.state.rawSavingsInvestment === 0 ) {\n isFormValid = false;\n }\n\n // have withdrawn this tax year & savings amount is 2000 or greater\n // OR have not withdrawn, but savings amount is less than 2000\n if ((this.state.withdrawalYear === 1 && this.state.rawSavingsInvestment >= this.minSavingsValue) ||\n (this.state.withdrawalYear === 0 && this.state.rawSavingsInvestment < this.minSavingsValue)) {\n isFormValid = false;\n }\n }\n \n \n this.setState({ formValid: isFormValid });\n return isFormValid;\n }\n\n handleForm(e) {\n e.preventDefault();\n\n if (this.validationCheck()) {\n\n this.props.setFormValues({\n currentAge: this.state.currentAge,\n retireAge: this.state.retireAge,\n gender: this.state.gender,\n leavingReason: this.state.leavingReason,\n currentInvestment: this.state.rawCurrentInvestment,\n vestedInvestment: this.state.rawVestedInvestment,\n vestedHarmonisedInvestment: this.state.rawVestedHarmonisedInvestment,\n savingsInvestment: this.state.rawSavingsInvestment, \n salaryValue: this.state.rawSalaryValue,\n withdrawalYear: this.state.withdrawalYear,\n formattedSavingsInvestment: this.state.savingsInvestment\n })\n \n\n // scroll to next slide\n const nextSlideIsOpen = document.querySelector('.slide-4') != null\n if (nextSlideIsOpen) { \n this.props.custScrollTo(document.querySelector('.slide-4'))\n } else { \n this.props.openNextSlide()\n }\n\n }\n }\n\n\n\n render() {\n const chevronSVG = \"data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e %3csvg width='8px' height='6px' viewBox='0 0 8 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3eC3B35B76-2140-4AC7-8E67-7BEB0ECFAC23%3c/title%3e%3cg id='Home' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='1920-Desktop-(1600)---Input-info-dropdown-open' transform='translate(-1341.000000%2c -558.000000)' fill='%2326B0E2'%3e%3cg id='input/default-copy' transform='translate(1074.000000%2c 553.000000)'%3e%3cg id='tooltip/default' transform='translate(271.000000%2c 8.196667) scale(1%2c -1) translate(-271.000000%2c -8.196667) translate(267.000000%2c 5.726667)'%3e%3cpolygon id='%f0%9f%8e%a8-icon-fill' points='7.06 0 4 3.05333333 0.94 0 0 0.94 4 4.94 8 0.94'%3e%3c/polygon%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e\";\n return (\n \n
\n\n \n
\n { this.props.data?.slide2.title }
\n \n\n {this.props.data?.slide2Cards?.map((card, index) => (\n
\n\n {/* Mobile mode */}\n \n
\n ))}\n \n {card.isDefault && 
\n
\n \n \n
\n }\n Default option – No action or paperwork {this.getScreenWidth() > 1279 ? \"required\" : \"\"}
{card.headingText}
\n \n\n {this.props.data?.slide2Cards?.map((card, index) => (\n
\n \n
\n ))}\n \n {card.isDefault && \n
\n \n \n
\n }\n Default option – No action or paperwork {this.getScreenWidth() > 1279 ? \"required\" : \"\"}
{card.headingText}
\n \n\n \n
\n \n
\n \n \n
\n \n
\n \n\n\n\n\n\n\n\n \n
\n \n
\n { this.props.journey === 1 ? this.props.data?.slide3.title : this.props.data?.savingsComponent.slide3.title}
\n\n \n
\n\n \n
\n \n \n
\"\n data-bs-html=\"true\"\n data-bs-trigger=\"focus\"\n data-bs-placement=\"bottom\"\n data-bs-content={`Gender
${this.props.data?.slide3.tooltips.gender}
`}\n >\n \n ?\n \n\n this.handleGender(0)} />\n \n
\n \n this.handleGender(1)} />\n \n
\n \n \n {this.props.journey === 1 &&\n
\"\n data-bs-html=\"true\"\n data-bs-trigger=\"focus\"\n data-bs-placement=\"bottom\"\n data-bs-content={`Savings component
${this.props.data?.slide3.tooltips.savingsComponent}
`} \n className='hover-none focus-none cursor-pointer'> \n savings component\n ? \n \n in the current tax year?\n \n }\n\n {this.props.journey === 2 &&\n\n \n }\n\n\n this.handleWithdrawalYear(0)} />\n \n
\n \n this.handleWithdrawalYear(1)}\n />\n \n
\n \n \n \n\n \n \n
\n\n\n \n \n {this.props.journey === 1 &&\n <>\n
\"\n data-bs-html=\"true\"\n data-bs-placement=\"bottom\"\n data-bs-trigger=\"focus\"\n data-bs-content={`Reason for leaving your employer
${this.props.data?.slide3.tooltips.leavingEmployer}
`}\n >\n \n ?\n \n \n \n }\n\n \"\n data-bs-html=\"true\"\n data-bs-placement=\"bottom\"\n data-bs-trigger=\"focus\"\n data-bs-content={`
\n Annual taxable income
${this.props.data?.slide3.tooltips.taxableIncome}
`}\n className=\"hover-none focus-none cursor-pointer\"> annual taxable income\n ?\n \n\n this.handleSalaryValue(e)}\n onInput={(e) => { e.target.classList.remove('has-error') }}\n\n // required validation message\n data-toggle=\"popover\"\n data-bs-template=\"\"\n data-bs-html=\"true\"\n data-bs-trigger=\"manual\"\n data-bs-placement=\"bottom\" \n data-bs-content=\"
\n Please enter an amount
\" \n onBlur={(e) => { this.handleSalaryValuePopUp(e) }} \n />\n \n\n {this.props.journey === 1 &&\n <>\n\n
\n }\n \n Retirement component breakdown in your Umbrella Fund investment:\n
\n\n \n
\n\n \n }\n\n \n Component\n
\n \n Amount\n
\n \n {this.props.journey === 1 &&\n
\n }\n {this.props.journey === 2 &&\n \"\n data-bs-html=\"true\"\n data-bs-placement=\"bottom\"\n data-trigger=\"focus\"\n data-bs-trigger=\"focus\"\n data-bs-content={`\n
\"\n data-bs-html=\"true\"\n data-bs-placement=\"bottom\"\n data-trigger=\"focus\"\n data-bs-trigger=\"focus\"\n data-bs-content={`Savings
${this.props.data?.slide3.tooltips.savingsComponent}
`}\n >\n \n ?\n \nSavings component
${this.props.data?.savingsComponent.slide3.tooltips.savingsComponent}
`}\n className=\"hover-none focus-none cursor-pointer \">\n Savings component\n ? \n \n amount \n \n\n this.handleInvestmentValue(e, 'rawSavingsInvestment', 'savingsInvestment')}\n onInput={(e) => { e.target.classList.remove('has-error') }}\n onBlur={(e) => this.handleWithdrawalYearBlur(this.state.withdrawalYear)}\n />\n
\n \n\n {this.props.journey === 1 &&\n \n
\n \n
\"\n data-bs-html=\"true\"\n data-bs-placement=\"bottom\"\n data-trigger=\"focus\"\n data-bs-trigger=\"focus\"\n data-bs-content={`Retirement
${this.props.data?.slide3.tooltips.retirementComponent}
`}\n >\n \n ?\n \n\n this.handleInvestmentValue(e, 'rawCurrentInvestment', 'currentInvestment')}\n onInput={(e) => { e.target.classList.remove('has-error') }}\n />\n
\n \n }\n\n {this.props.journey === 1 &&\n \n
\n \n
\"\n data-bs-html=\"true\"\n data-bs-placement=\"bottom\"\n data-trigger=\"focus\"\n data-bs-trigger=\"focus\"\n data-bs-content={`Vested
${this.props.data?.slide3.tooltips.vestedComponent}
`}\n >\n \n ?\n \n\n this.handleInvestmentValue(e, 'rawVestedInvestment', 'vestedInvestment')}\n onInput={(e) => { e.target.classList.remove('has-error') }}\n />\n
\n \n }\n\n {this.props.journey === 1 &&\n \n
\n \n
\"\n data-bs-html=\"true\"\n data-bs-placement=\"bottom\"\n data-trigger=\"focus\"\n data-bs-trigger=\"focus\"\n data-bs-content={`Vested harmonised
${this.props.data?.slide3.tooltips.vestedHarmonisedComponent}
`}\n >\n \n ?\n \n\n this.handleInvestmentValue(e, 'rawVestedHarmonisedInvestment', 'vestedHarmonisedInvestment')}\n onInput={(e) => { e.target.classList.remove('has-error') }}\n />\n
\n \n }\n\n\n\n\n\n {this.props.journey === 1 &&\n <>\n \n
\n \n }\n\n {this.props.journey === 2 &&\n <>\n \n
\n You can find this breakdown of your Allan Gray Umbrella Fund accounts(s) on your:
\n- \n
- \n Allan Gray Online account \n
- Latest quarterly statement \n
\n
\n \n }\n \n \n\n {this.state.withDrawalYearNextError &&\n \n
\n You can find your current savings component amount in your retirement fund account on your:
\n- \n
- \n Allan Gray Online account \n
- Latest quarterly statement \n
\n \n
\n }\n\n {this.state.withDrawalYearMinError &&\n \n
\n \n \n \n
\n }\n\n {this.state.withDrawalYearMinNote &&\n \n
\n \n \n \n
\n }\n\n \n
\n \n \n\n \n
\n \n\n \n )\n }\n}\n\nexport default Slide3;\n","import React from 'react';\n\nclass Slide4 extends React.Component {\n constructor(props) {\n super(props);\n this.slide4 = React.createRef();\n this.handleScroll = this.handleScroll.bind(this);\n this.rangePopUpChangeHandler = this.rangePopUpChangeHandler.bind(this);\n this.rangePopUpInputHandler = this.rangePopUpInputHandler.bind(this);\n this.rangePopUpClickHandler = this.rangePopUpClickHandler.bind(this);\n this.ctaButtonHandler = this.ctaButtonHandler.bind(this);\n this.destroyExistingSliderIfExists = this.destroyExistingSliderIfExists.bind(this);\n this.minSavingsValue = 2000;\n this.currencyFormat = wNumb({\n decimals: 0,\n thousand: ' ',\n prefix: 'R'\n });\n this.state = {\n step: 500,\n visible: false,\n scrolling: false,\n graphData: {},\n popContent: `\n `,\n collapseOpen: false,\n vestedSliderValue: 0,\n savingsSliderValue: 0,\n savingsAboveMinState: true,\n maxPotentialTaxValue: 0\n };\n }\n componentDidMount() {\n this.props.custScrollTo(this.slide4.current)\n\n // init vested slider\n if (this.props.formData.vestedInvestment + this.props.formData.vestedHarmonisedInvestment > 0) {\n let slider = document.getElementById('slider-round');\n\n $('[data-toggle=\"popover\"]').popover();\n $(\".fade\").addClass(\"in\");\n $(document).on(\"click\", \".popover .slide3__popover-cancel\", function () {\n $(this).parents(\".popover\").popover('hide');\n });\n\n\n\n const rangeSetup = {}\n rangeSetup['min'] = [0, 1];\n rangeSetup['max'] = this.props.formData.vestedInvestment + this.props.formData.vestedHarmonisedInvestment;\n\n \n this.destroyExistingSliderIfExists(slider);\n noUiSlider.create(slider, {\n start: 0,\n connect: [true, false],\n range: rangeSetup\n });\n slider.noUiSlider.on('update', (values, handle, unencoded, tap, positions, noUiSlider) => this.setValue(values, positions));\n slider.noUiSlider.on('change', () => {\n gtag('event', 'Slider - Moved', {\n 'event_category': 'Preservation calculator',\n 'event_label': 'Vested Slider - Adjust the slider',\n });\n });\n }\n\n\n // init savings slider\n if (this.props.formData.savingsInvestment > 0 || this.props.formData.formattedSavingsInvestment !== '') {\n let sliderSavings = document.getElementById('slider-round-savings');\n\n // need to convert the actual savings value to 1 if it's 0 for slider to not be (rightfully) weird\n let savingsInvestmentNonZeroValue = this.props.formData.savingsInvestment > 0 ? this.props.formData.savingsInvestment : 1;\n\n const rangeSetupSavings = {}\n\n // savings amount equal or more than min (R2000) \n let savingsAboveMin = this.props.formData.savingsInvestment >= this.minSavingsValue;\n\n\n // if have withdrawn in current tax year\n if (this.props.formData.withdrawalYear === 1) {\n rangeSetupSavings['min'] = [0, 1];\n rangeSetupSavings['max'] = savingsInvestmentNonZeroValue;\n\n // if savings below than min, withdraw all or nothing\n if(!savingsAboveMin){ \n rangeSetupSavings['min'] = [0, savingsInvestmentNonZeroValue];\n\n // if savings is 0, disable slider\n if(this.props.formData.savingsInvestment === 0){\n sliderSavings.closest('.slider-styled-wrap').classList.add('is-disabled');\n }\n }\n \n\n // if savings above min, disable slider\n if (savingsAboveMin) { \n sliderSavings.closest('.slider-styled-wrap').classList.add('is-disabled');\n }\n }\n\n // if have not withdrawn this tax year\n if (this.props.formData.withdrawalYear === 0) {\n \n\n // if savings above min, first step starts at min (R2000)\n if (savingsAboveMin) { \n let minRangeStepPercent = (this.minSavingsValue / savingsInvestmentNonZeroValue * 100) + '%';\n rangeSetupSavings['min'] = [0, this.minSavingsValue];\n rangeSetupSavings[minRangeStepPercent] = [this.minSavingsValue, 1]; \n rangeSetupSavings['max'] = savingsInvestmentNonZeroValue; \n }\n\n // if savings below min, disable slider\n if (!savingsAboveMin) { \n rangeSetupSavings['min'] = [0, savingsInvestmentNonZeroValue]; \n rangeSetupSavings['max'] = savingsInvestmentNonZeroValue; \n sliderSavings.closest('.slider-styled-wrap').classList.add('is-disabled');\n }\n\n }\n\n \n\n // attach popovers\n this.setState({ savingsAboveMinState: savingsAboveMin }, () => {\n $('[data-toggle=\"popover\"]').popover();\n });\n\n \n this.destroyExistingSliderIfExists(sliderSavings);\n noUiSlider.create(sliderSavings, {\n start: 0,\n connect: [true, false],\n range: rangeSetupSavings\n });\n\n\n sliderSavings.noUiSlider.on('update', (values, handle, unencoded, tap, positions, noUiSlider) => {\n this.setSavingsValue(values, positions)\n });\n\n\n sliderSavings.noUiSlider.on('change', (values) => {\n gtag('event', 'Slider - Moved', {\n 'event_category': 'Preservation calculator',\n 'event_label': 'Savings Slider - Adjust the slider',\n });\n });\n }\n\n\n\n // on scroll\n window.addEventListener('scroll', this.handleScroll);\n this.handleMaxTax()\n }\n\n componentWillUnmount() {\n let slider = document.getElementById('slider-round');\n let sliderSavings = document.getElementById('slider-round-savings');\n if (slider) slider.noUiSlider.off();\n if (sliderSavings) sliderSavings.noUiSlider.off();\n window.removeEventListener('scroll', this.handleScroll);\n }\n\n destroyExistingSliderIfExists(slider){\n if(slider && slider.noUiSlider){\n slider.noUiSlider.destroy();\n }\n }\n\n rangePopUpClickHandler(e) {\n e.target.querySelector('input') && e.target.querySelector('input').focus();\n }\n\n rangePopUpChangeHandler(e, sliderId) {\n let slider = document.getElementById(sliderId);\n const inputValue = this.currencyFormat.from(e.target.value);\n slider.noUiSlider.set(inputValue);\n }\n\n rangePopUpInputHandler(e) {\n // get start custor pos\n const startCursorPos = e.target.selectionStart\n const startLength = e.target.value.length;\n\n // formatting\n const inputValue = this.currencyFormat.from(e.target.value);\n const formattedVal = inputValue ? this.currencyFormat.to(inputValue) : 'R0';\n e.target.value = formattedVal;\n\n // set final cursor pos\n const endLength = formattedVal.length;\n const newCursorPos = endLength - startLength + startCursorPos;\n e.target.selectionStart = newCursorPos;\n e.target.selectionEnd = newCursorPos;\n }\n\n\n attachRangePopUp(id, value, position, text, sliderId) {\n let rangeV = document.getElementById(id);\n rangeV.innerHTML = ''; // clear it first to prevent blur issue, see: https://stackoverflow.com/questions/21926083/failed-to-execute-removechild-on-node\n rangeV.innerHTML = `\n ${text}\n \n
\n \n \n
\n \n \n `;\n rangeV.style.left = `calc(${position}% + 2px)`;\n rangeV.addEventListener('click', this.rangePopUpClickHandler);\n rangeV.querySelector('input').addEventListener('change', (e) => this.rangePopUpChangeHandler(e, sliderId), false);\n rangeV.querySelector('input').addEventListener('blur', (e) => this.rangePopUpChangeHandler(e, sliderId), false);\n rangeV.querySelector('input').addEventListener('input', this.rangePopUpInputHandler, false);\n\n }\n\n setValue(values, rawPosition) {\n let value = this.currencyFormat.from(values[0]);\n let position = rawPosition[0];\n\n this.attachRangePopUp('rangeV', value, position, this.props.data?.slide4?.rangeText, 'slider-round');\n\n this.setState({ vestedSliderValue: value });\n\n this.calcHeight(value, this.props.formData.vestedInvestment + this.props.formData.vestedHarmonisedInvestment - value,\n this.state.savingsSliderValue, this.props.formData.savingsInvestment - this.state.savingsSliderValue)\n }\n\n setSavingsValue(values, rawPosition) {\n let value = this.currencyFormat.from(values[0]);\n let position = rawPosition[0];\n let label = this.props.journey === 1 ? this.props.data?.slide4?.rangeSavingsText : this.props.data?.savingsComponent?.slide4?.rangeSavingsText;\n\n this.attachRangePopUp('rangeV-savings', value, position, label, 'slider-round-savings');\n\n this.setState({ savingsSliderValue: value });\n\n this.calcHeight(\n this.state.vestedSliderValue,\n this.props.formData.vestedInvestment + this.props.formData.vestedHarmonisedInvestment - this.state.vestedSliderValue,\n value,\n this.props.formData.savingsInvestment - value\n )\n }\n\n handleScroll() {\n let view = this.slide4.current.getBoundingClientRect();\n const Buffer = 5\n if (view.top <= Buffer) this.setState({ visible: true });\n if (this.state.visible && (view.top >= window.innerHeight / 2)) {\n this.props.closeSlide();\n }\n\n // On certain devices the user is able to scroll up and change the input values without triggering the previous step scroll, mostly long mobile devices\n // On this step it is required to reset the graph\n const inputrect = document.getElementById('savingsBalance').getBoundingClientRect()\n if (this.state.visible && inputrect.top > 0) {\n this.props.closeSlide();\n }\n } \n\n getVestedWithdrawValue(amount){\n let table = this.props.formData.leavingReason == 3 ?\n this.props.data?.slide4?.retrenchmentTable\n : this.props.data?.slide4?.retireDismissalTable\n\n\n // Calculate tax values on vested\n var taxKeys = Object.keys(table);\n taxKeys = taxKeys.reverse();\n let calcedTaxValue = 0;\n let totalValueRemaining = amount;\n for (var i = 0; i < taxKeys.length; i++) {\n\n if (totalValueRemaining > taxKeys[i]) {\n let taxableAmount = (totalValueRemaining - parseInt(taxKeys[i]))\n calcedTaxValue = calcedTaxValue + taxableAmount * (table[taxKeys[i]] / 100);\n totalValueRemaining = totalValueRemaining - taxableAmount;\n //break;\n }\n }\n\n return calcedTaxValue;\n }\n\n\n\n getSavingsTaxValue(amount = 0){\n\n let salaryValue = this.props.formData.salaryValue;\n let savingsTaxTable = this.props.data?.slide4.individualTaxTable;\n let savingsTaxKeys = Object.keys(savingsTaxTable);\n savingsTaxKeys = savingsTaxKeys.reverse();\n let calcedSavingsTaxValue = 0;\n let totalValueRemaining = salaryValue + amount;\n\n for (var i = 0; i < savingsTaxKeys.length; i++) {\n if (totalValueRemaining > savingsTaxKeys[i]) {\n let taxableAmount = (totalValueRemaining - parseInt(savingsTaxKeys[i]));\n calcedSavingsTaxValue = calcedSavingsTaxValue + taxableAmount * (savingsTaxTable[savingsTaxKeys[i]] / 100);\n totalValueRemaining = totalValueRemaining - taxableAmount; \n }\n }\n\n \n\n return calcedSavingsTaxValue;\n } \n\n\n handleMaxTax() {\n\n // calculates max potential tax, on...\n let maxPotentialTaxValue = 0; \n\n // calculate max tax on vested\n let investedValue = this.props.formData.vestedInvestment + this.props.formData.vestedHarmonisedInvestment;\n maxPotentialTaxValue += this.getVestedWithdrawValue(investedValue); \n\n // calculate max tax values on savings\n // max tax = tax with full savings amount less tax without savings amount\n maxPotentialTaxValue += this.getSavingsTaxValue(this.props.formData.savingsInvestment) - this.getSavingsTaxValue(0); \n\n this.setState({ maxPotentialTaxValue: maxPotentialTaxValue });\n\n }\n \n\n calcHeight(vestedWithdrawingValue, vestedRemainingValue, savingsWithdrawingValue, savingsRemainingValue) {\n\n // calculate tax on vested withdrawal\n let calcedTaxValue = this.getVestedWithdrawValue(vestedWithdrawingValue);\n\n // calculate tax values on savings withdrawal\n // tax = tax with withdrawal amount less tax without withdrawal amount\n let calcedSavingsTaxValue = this.getSavingsTaxValue(savingsWithdrawingValue) - this.getSavingsTaxValue(0);\n\n\n // calculate genderWithdraw\n let genderTable = this.props.data?.slide4?.drawdowns;\n var genderKeys = Object.keys(genderTable);\n var gender = this.props.formData.gender === 0 ? \"male\" : \"female\";\n genderKeys = genderKeys.sort().reverse();\n let selectedBracket = null;\n genderKeys.forEach(key => {\n if (selectedBracket == null && this.props.formData.retireAge >= parseInt(key)) {\n selectedBracket = key;\n }\n });\n\n let yearsInvested = this.props.formData.retireAge - this.props.formData.currentAge;\n\n // growth on remaining value\n let growth = (vestedRemainingValue + savingsRemainingValue) * Math.pow(1.1, yearsInvested) - (vestedRemainingValue + savingsRemainingValue);\n\n // max potential future growth\n let maxFutureGrowth = ((this.props.formData.vestedInvestment + this.props.formData.vestedHarmonisedInvestment + this.props.formData.savingsInvestment) * Math.pow(1.1, yearsInvested)) - (this.props.formData.vestedInvestment + this.props.formData.vestedHarmonisedInvestment + this.props.formData.savingsInvestment);\n\n // added: maximum potential monthly value\n let maxPotentialMonthlyIncome = (this.props.formData.vestedInvestment + this.props.formData.vestedHarmonisedInvestment + this.props.formData.savingsInvestment + maxFutureGrowth) * parseFloat(genderTable[selectedBracket][gender]) * 0.01 / 12;\n\n\n // For potential growth result\n let maxTaxableValue = vestedWithdrawingValue + savingsWithdrawingValue + vestedRemainingValue + savingsRemainingValue;\n\n let output = {\n\n // withdrawing value (from vested)\n withdrawingValue: vestedWithdrawingValue + savingsWithdrawingValue,\n\n // tax value on withdrawal amount\n taxValue: calcedTaxValue + calcedSavingsTaxValue,\n\n // withdrawal amount less tax \n reciveValue: (vestedWithdrawingValue + savingsWithdrawingValue) - (calcedTaxValue + calcedSavingsTaxValue),\n\n // total invested less withdrawal amount\n remainingValue: vestedRemainingValue + savingsRemainingValue,\n\n // monthly income after withdrawal\n monthlyValue: (vestedRemainingValue + savingsRemainingValue + growth) * parseFloat(genderTable[selectedBracket][gender]) * 0.01 / 12,\n\n // monthy income after withdrawal (in today's money)\n monthlyNegInflation: (((vestedRemainingValue + savingsRemainingValue + growth) * parseFloat(genderTable[selectedBracket][gender]) * 0.01) / 12) / Math.pow(1 + 0.06, yearsInvested),\n\n // total value after withdrawal\n valueAtRetirement: growth + vestedRemainingValue + savingsRemainingValue,\n\n // updated: max potential future growth\n maxFutureGrowth: maxFutureGrowth,\n\n // added: maximum potential monthly value\n maxPotentialMonthlyIncome: maxPotentialMonthlyIncome,\n\n\n // For potential growth result \n growValue: growth,\n growthHeight: ((vestedRemainingValue + savingsRemainingValue) / maxTaxableValue * 100) + \"%\",\n }\n\n\n // potential monthly graph percentage\n output.potentialMonthlyIncomeHeight = (output.monthlyValue / maxPotentialMonthlyIncome * 100) + \"%\";\n\n this.setState({\n graphData: output,\n popContent: `\n
Your potential monthly retirement income
\nR${this.addDigitSpaces(output.monthlyValue)}
\n${this.props.journey === 1 ? this.props.data?.slide4.tooltips.potentialIncome : this.props.data?.savingsComponent.slide4.tooltips.potentialIncome}
\nR${this.addDigitSpaces(output.monthlyNegInflation)}
\n${this.props.journey === 1 ? this.props.data?.slide4.tooltips.potentialIncomeToday : this.props.data?.savingsComponent.slide4.tooltips.potentialIncomeToday}
`\n })\n return (output)\n }\n\n toggleCollapse() {\n this.setState({ collapseOpen: !this.state.collapseOpen })\n }\n\n addDigitSpaces(item) {\n let value = parseFloat(item).toFixed(0);\n return value.replace(/\\B(?=(\\d{3})+(?!\\d))/g, \" \");\n }\n\n ctaButtonHandler() {\n const nextSlideIsOpen = document.querySelector('.slide-5') != null\n if (nextSlideIsOpen) {\n this.props.custScrollTo(document.querySelector('.slide-5'))\n } else {\n this.props.openNextSlide()\n }\n }\n\n render() {\n return (\n\n
\n }\n \n {(this.props.formData.savingsInvestment > 0 || this.props.formData.formattedSavingsInvestment !== '') &&\n \n
\n\n {this.props.formData.vestedInvestment + this.props.formData.vestedHarmonisedInvestment > 0 &&\n \n
\n { this.props.journey === 1 ? this.props.data?.slide4.title : this.props.data?.savingsComponent.slide4.title}
\n \n
\n \n \n
\n \n
\n \n R0\n
\n \n \n \n
\n R{this.addDigitSpaces(this.props.formData.vestedInvestment + this.props.formData.vestedHarmonisedInvestment)}\n \n\n
\"\n data-bs-html=\"true\"\n data-bs-trigger=\"focus\"\n data-bs-placement=\"bottom\"\n data-bs-content={`Tax information
${this.props.data?.slide4.tooltips.taxInfoVested}
`}\n >\n Tax information\n ?\n \n\n \n
\n \n\n }\n\n {this.state.savingsAboveMinState && this.props.formData.withdrawalYear === 0 && \n\n \n
\n \n R0\n
\n \n \n \n
\n R{this.addDigitSpaces(this.props.formData.savingsInvestment)}\n \n\n\n {!this.state.savingsAboveMinState && this.props.formData.withdrawalYear === 1 && \n <>\n {this.props.formData.savingsInvestment !== 0 &&\n
\n }\n \n
\"\n data-bs-html=\"true\"\n data-bs-trigger=\"focus\"\n data-bs-placement=\"bottom\"\n data-bs-content={`Tax information
${this.props.data?.slide4.tooltips.taxInfoSavings}
`}\n >\n Tax information\n ?\n \n\n
\"\n data-bs-html=\"true\"\n data-bs-trigger=\"focus\"\n data-bs-placement=\"bottom\"\n data-bs-content={`Why is this slider limited?
${this.props.data?.slide4.tooltips.sliderlimitedInfo}
`}\n >\n Why is this slider limited\n ?\n \nTax information
${this.props.data?.slide4.tooltips.taxInfoSavings}
`}\n >\n Tax information\n ?\n \n\n }\n\n\n {this.state.savingsAboveMinState && this.props.formData.withdrawalYear === 1 &&\nWhy am I unable to withdraw?
${this.props.data?.slide4.tooltips.disabledAboveMin}
`}\n >\n Why am I unable to withdraw\n ?\n \n }\n\n {!this.state.savingsAboveMinState && this.props.formData.withdrawalYear === 0 &&\n\nWhy am I unable to withdraw?
${this.props.data?.slide4.tooltips.disabledBelowMin}
`}\n >\n Why am I unable to withdraw\n ?\n \n }\n\n\n \n \n }\n\n\n\n
\n \n
\n \n
\n \n
\n \n
\"\n data-bs-html=\"true\"\n data-bs-trigger=\"focus\"\n data-bs-placement=\"bottom\"\n data-bs-content={this.state.popContent}\n data-analytics-label=\"Pres tool link – Monthly retirement income\"\n data-analytics-action=\"Link – Clicked\"\n data-analytics-category=\"Preservation calculator\"\n onClick={(e) => { this.props.recordAnalytics(e); }}\n >\n Your potential monthly retirement income\n ?\n \n \n\n\n {/* potential growth */} \n The total value you have selected to preserve could grow to: R{this.addDigitSpaces(this.state.graphData.valueAtRetirement)}
\n\n {/* potential growth */}\n\nRemaining invested for your future
\n\n {/* potential growth */}\n\n Potential growth: R{this.addDigitSpaces(this.state.graphData.growValue)}\n
\n\n {/* potential monthly\nThe money you keep invested could grow to the value above. This could provide you with the monthly retirement income below in addition to the income you will receive from your retirement component.
\n */}\n\n {/* potential monthly\nPotential additional retirement income: R\n {this.addDigitSpaces(this.state.graphData.monthlyValue)}\n
\n */}\n\n\nMaximum
\n\n
\n R0
\n\n\n {/* potential growth */}\n \n\n {/* potential monthly\n \n */}\n
\n \n \n Maximum\n
\n \n \n {/* potential growth */}\n R{this.addDigitSpaces(this.state.graphData.maxFutureGrowth)}\n\n {/* potential monthly\n R{this.addDigitSpaces(this.state.graphData.maxPotentialMonthlyIncome)}\n */}\n \n
\n
\n Amount you keep invested: R{this.addDigitSpaces(this.state.graphData.remainingValue)}
\n\n
\n \n
\n \n
\"\n data-bs-html=\"true\"\n data-bs-trigger=\"focus\"\n data-bs-placement=\"bottom\"\n data-bs-content={`Withdrawing for now
\n\n
Tax
${this.props.journey === 1 ? this.props.data?.slide4.tooltips.taxWithdrawal : this.props.data?.savingsComponent.slide4.tooltips.taxWithdrawal}
`}\n >\n Tax \n ?\n you could pay on your withdrawal: R{this.addDigitSpaces(this.state.graphData.taxValue)}\n\n
\n R0
\n\n \n
\n R{this.addDigitSpaces(this.state.maxPotentialTaxValue)}
\n\n
\n Withdrawal amount after tax: R{this.addDigitSpaces(this.state.graphData.reciveValue)}
\n\n
\n \n \n Important information about these numbers?\n
\n\n \n
\n \n \n {/* Info numbers popup modal */}\n \n
\n \n \n
\n \n
\n \n )\n }\n}\n\nexport default Slide4;\n\n","import React from 'react';\n\nclass Slide5 extends React.Component {\n constructor(props) {\n super(props);\n this.slide5 = React.createRef();\n this.handleScroll = this.handleScroll.bind(this);\n this.visible = false;\n this.state = {\n selected: 1\n };\n }\n\n componentDidMount() {\n this.props.custScrollTo(this.slide5.current)\n this.setCarousels();\n window.addEventListener('scroll', this.handleScroll);\n }\n\n componentWillUnmount() {\n window.removeEventListener('scroll', this.handleScroll);\n } \n\n handleScroll() {\n let view = this.slide5.current.getBoundingClientRect();\n const Buffer = 5\n if (view.top <= Buffer) this.visible = true;\n if (this.visible && (view.top >= window.innerHeight / 2)) {\n this.props.closeSlide();\n }\n }\n toggleActive(newtabId) {\n switch (newtabId) {\n case 0:\n this.props.toggleTab(5.1)\n this.setState({ selected: 0 })\n break;\n case 1:\n this.props.toggleTab(5.2)\n this.setState({ selected: 1 })\n break;\n case 2:\n this.props.toggleTab(5.3)\n this.setState({ selected: 2 })\n break;\n default:\n break;\n }\n }\n componentDidUpdate() {\n\n this.unsetCarousels();\n this.setCarousels();\n \n }\n\n unsetCarousels() {\n $('.slide5-0__carousel').filter('.slick-initialized').slick('unslick');\n $('.slide5-0__mobile-carousel').filter('.slick-initialized').slick('unslick');\n $('.slide5-1__carousel').filter('.slick-initialized').slick('unslick');\n $('.slide5-1__mobile-carousel').filter('.slick-initialized').slick('unslick');\n $('.slide5-2__carousel').filter('.slick-initialized').slick('unslick');\n $('.slide5-2__mobile-carousel').filter('.slick-initialized').slick('unslick');\n }\n\n setCarousels() {\n\n $('[data-toggle=\"popover\"]').popover()\n\n $('.pres-carousel').on('beforeChange', function (event, slick, currentSlide, nextSlide) {\n gtag('event', 'Chevron - Clicked', {\n 'event_category': 'Preservation calculator',\n 'event_label': 'Chevron – Arrow ' + (nextSlide > currentSlide ? '>' : '<') + ' click',\n });\n });\n\n $('.pres-carousel').not('.slick-initialized').slick({\n slidesToShow: 1,\n arrows: true,\n dots: true,\n nextArrow: \"\",\n prevArrow: \"\"\n });\n\n\n }\n\n getScreenWidth() {\n return window.innerWidth;\n }\n render() {\n return (\n \n
\n \n
\n \n
\n \n Important information about these numbers
\n \n\n\n\n {this.props.journey === 1 &&\n <>\n\n
\n \n
\n \n \n
\n \n
\n {this.state.selected === 0 && \n
\n this.toggleActive(0)}>\n {this.getScreenWidth() <= 578 ? \"Transfer\" : \"Transfer your investment\"}\n
\n \n
\n this.toggleActive(1)}>\n Remain invested\n
\n \n
\n this.toggleActive(2)}>\n {this.getScreenWidth() <= 578 ? \"Withdraw\" : \"Withdraw from your investment\"}\n
\n \n {/*Mobile carousel*/}\n
\n \n
\n {/*Desktop list*/}\n \n
\n Tap the icons for more information
\n\n {this.props.data?.slide5?.transfer?.iconList.map((item, index) => (\n
\n \n
\n ))}\n \n
\n \n 
\n \n
\n\n \n
\n {item.backText}
\n\n {this.props?.data?.slide5?.transfer?.iconList?.map((item, index) => (\n
\n \n
\n ))}\n \n
\n \n \n \n
\n\n \n \n
\n \n
\n \n
\n \n {this.props.data?.slide5?.transfer?.carousel.map((card, index) => (\n
\n \n
\n ))}\n Things to keep in mind
\n{card.subheading}
\n \n\n
\"\n data-bs-html=\"true\"\n data-bs-trigger=\"focus\"\n data-bs-placement=\"bottom\"\n data-bs-content=\"\n \n If you do not wish to remain in your Umbrella Retirement Fund investment but want to remain invested, you can transfer your investment to the
Allan Gray Pension or Provident Preservation Fund
You can transfer your retirement savings in your Umbrella Retirement Fund account to an Allan Gray Preservation Fund account to preserve and grow your money until you retire. The rules around accessing your money will remain in place, but different investment fees apply. However, you cannot add to your retirement savings in a preservation fund. If you want to continue adding to your retirement savings, you can separately start another investment, such as a retirement annuity.
Alternatively, you can transfer your investment to the Allan Gray Retirement Annuity, but note that you will sacrifice your ability to make a withdrawal, as the rules of the product are different to the Umbrella Retirement Fund.
\n You may also move to a retirement product offered by another financial services provider or transfer to your new employer’s retirement fund.\n
\n\n
\n \n
\"\n data-bs-html=\"true\"\n data-bs-trigger=\"focus\"\n data-bs-placement=\"bottom\"\n data-bs-content=\"\n \n If you do not wish to remain in your Umbrella Retirement Fund investment but want to remain invested, you can transfer your investment to the
Allan Gray Pension or Provident Preservation Fund
You can transfer your retirement savings in your Umbrella Retirement Fund account to an Allan Gray Preservation Fund account to preserve and grow your money until you retire. The rules around accessing your money will remain in place, but different investment fees apply. However, you cannot add to your retirement savings in a preservation fund. If you want to continue adding to your retirement savings, you can separately start another investment, such as a retirement annuity.
Alternatively, you can transfer your investment to the Allan Gray Retirement Annuity, but note that you will sacrifice your ability to make a withdrawal, as the rules of the product are different to the Umbrella Retirement Fund.
\n You may also move to a retirement product offered by another financial services provider or transfer to your new employer’s retirement fund.\n
\n\n \n
\n }\n {this.state.selected === 1 && \n
\n \n { this.props.recordAnalytics(e); }}\n target={'_blank'}\n href={this.props.data?.slide5?.transfer?.ctaUrl}\n type=\"button\" >{this.props.data?.slide5?.transfer?.cta}\n
\n \n {/*Mobile carousel*/}\n
}\n {this.state.selected === 2 && \n
\n {/*Mobile carousel end*/}\n {/*Desktop list*/}\n \n
\n Tap the icons for more information
\n\n {this.props.data?.slide5?.remainInvested?.iconList.map((item, index) => (\n
\n \n
\n ))}\n \n
\n \n \n \n
\n\n \n \n
\n \n {this.props.data?.slide5?.remainInvested?.iconList?.map((item, index) => (\n
\n \n
\n ))}\n \n
\n \n \n \n
\n\n \n \n
\n \n
\n \n
\n \n {this.props.data?.slide5?.remainInvested?.carousel?.map((card, index) => (\n
\n \n
\n ))}\n Things to keep in mind
\n{card.subheading}
\n \n\n
\n Your Allan Gray Online account lets you:
\n- \n
- Update your contact details and nominees \n
- View and manage your investments securely \n
- Avoid printing, signing and emailing forms \n
\n
\n \n
\n Your Allan Gray Online account lets you:
\n- \n
- Update your contact details and nominees \n
- View and manage your investments securely \n
- Avoid printing, signing and emailing forms \n
\n \n
\n \n
\n \n { this.props.recordAnalytics(e); }}\n type=\"button\"\n target={'_blank'}\n rel=\"noopener\"\n href={this.props.data?.slide5?.remainInvested?.ctaUrl}\n >{this.props.data?.slide5?.remainInvested?.cta}\n
\n \n\n {/*Mobile carousel*/}\n
}\n \n }\n\n {this.props.journey === 2 &&\n <>\n \n
\n {/*Desktop list*/}\n \n
\n Reasons this option may not be suitable for you:
\n\n
\n Tap the icons for more information
\n\n {this.props.data?.slide5?.withdraw?.iconList.map((item, index) => (\n
\n \n
\n ))}\n \n
\n \n \n \n
\n\n \n \n
\n \n
\n Reasons this option may not be suitable for you:
\n\n {this.props.data?.slide5?.withdraw?.iconList.map((item, index) => (\n
\n \n
\n ))}\n \n
\n \n \n \n
\n\n \n \n
\n \n
\n {/*Mobile */}\n \n
\n {/*Desktop */}\n\n \n {this.props.data?.slide5?.withdraw?.carousel.map((card, index) => (\n
\n \n
\n ))}\n Things to keep in mind
\n{card.subheading}
\n \n\n { this.props.goToSlide4(); this.props.recordAnalytics(e); }}>See what happens if you withdraw a portion.\n
\n Keep as much as you can invested
\n \n\n
\n\n \n { this.props.goToSlide4(); this.props.recordAnalytics(e); }}>See what happens if you withdraw a portion.\n
\n Keep as much as you can invested
\n \n\n \n
\n\n \n
\n \n { this.props.recordAnalytics(e); }}\n target={'_blank'}\n rel=\"noopener\"\n href={this.props.data?.slide5?.withdraw?.ctaUrl}\n type=\"button\" >{this.props?.data?.slide5?.withdraw?.cta}\n
\n\n \n { this.props.recordAnalytics(e); }}\n target={'_blank'}\n rel=\"noopener\"\n href={this.props?.data?.slide5?.withdraw?.ctaSecondaryUrl}\n type=\"button\">{this.props?.data?.slide5?.withdraw?.ctaSecondary}\n
\n \n
\n \n
\n \n
\n {this.props.data?.savingsComponent?.slide5?.title}
\n { this.props.recordAnalytics(e); }}\n className=\"d-none d-sm-block text-decoration-none text-link-blue font-size-12\">{this.props.data?.savingsComponent?.slide5?.contactLinkText}\n\n\n
\n {this.state.selected === 1 && \n
\n this.toggleActive(1)}>\n Remain invested\n
\n \n
\n this.toggleActive(2)}>\n {this.getScreenWidth() <= 578 ? \"Withdraw\" : \"Withdraw from your investment\"}\n
\n \n {/*Mobile carousel*/}\n
}\n {this.state.selected === 2 && \n
\n {/*Mobile carousel end*/}\n {/*Desktop list*/}\n \n
\n Tap the icons for more information
\n\n {this.props.data?.savingsComponent.slide5?.remainInvested?.iconList.map((item, index) => (\n
\n \n
\n ))}\n \n
\n \n \n \n
\n\n \n \n
\n \n {this.props.data?.savingsComponent.slide5?.remainInvested?.iconList?.map((item, index) => (\n
\n \n
\n ))}\n \n
\n \n \n \n
\n\n \n \n
\n \n
\n \n
\n \n {this.props.data?.savingsComponent.slide5?.remainInvested?.carousel?.map((card, index) => (\n
\n \n
\n ))}\n Things to keep in mind
\n{card.subheading}
\n \n\n
\n Your Allan Gray Online account lets you:
\n- \n
- Update your contact details and nominees \n
- View and manage your investments securely \n
- Avoid printing, signing and emailing forms \n
\n
\n \n
\n Your Allan Gray Online account lets you:
\n- \n
- Update your contact details and nominees \n
- View and manage your investments securely \n
- Avoid printing, signing and emailing forms \n
\n \n
\n \n
\n \n { this.props.recordAnalytics(e); }}\n type=\"button\"\n target={'_blank'}\n rel=\"noopener\"\n href={this.props.data?.savingsComponent.slide5?.remainInvested?.ctaUrl}\n >{this.props.data?.savingsComponent.slide5?.remainInvested?.cta}\n
\n \n\n {/*Mobile carousel*/}\n
}\n \n }\n\n\n\n\n\n \n
\n {/*Desktop list*/}\n \n
\n Reasons this option may not be suitable for you:
\n\n
\n Tap the icons for more information
\n\n {this.props.data?.savingsComponent.slide5?.withdraw?.iconList.map((item, index) => (\n
\n \n
\n ))}\n \n
\n \n \n \n
\n\n \n \n
\n \n
\n Reasons this option may not be suitable for you:
\n\n {this.props.data?.savingsComponent.slide5?.withdraw?.iconList.map((item, index) => (\n
\n \n
\n ))}\n \n
\n \n \n \n
\n\n \n \n
\n \n
\n {/*Mobile */}\n \n
\n {/*Desktop */}\n\n \n {this.props.data?.savingsComponent.slide5?.withdraw?.carousel.map((card, index) => (\n
\n \n
\n ))}\n Things to keep in mind
\n{card.subheading}
\n \n\n { this.props.goToSlide4(); this.props.recordAnalytics(e); }}>See what happens if you withdraw a portion.\n
\n Keep as much as you can invested
\n \n\n
\n\n \n { this.props.goToSlide4(); this.props.recordAnalytics(e); }}>See what happens if you withdraw a portion.\n
\n Keep as much as you can invested
\n \n\n \n
\n\n \n
\n \n { this.props.recordAnalytics(e); }}\n target={'_blank'} \n rel=\"noopener\" \n href={this.props.data?.savingsComponent.slide5?.withdraw?.ctaUrl}\n type=\"button\" >{this.props?.data?.savingsComponent.slide5?.withdraw?.cta}\n
\n \n \n
\n \n
\n \n )\n }\n}\n\nexport default Slide5;\n\n","import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport DOMPurify from 'dompurify';\n\nimport Slide1 from './slides/slide1';\nimport Slide2 from './slides/slide2';\nimport Slide3 from './slides/slide3';\nimport Slide4 from './slides/slide4';\nimport Slide5 from './slides/slide5';\n\n'use strict';\nvar serverData;\nconst serverDataURL = document.getElementById('preservation-calculator').getAttribute('data-apiURL');\nconst journeyParam = document.getElementById('preservation-calculator').getAttribute('data-journey');\n\n\nclass App extends React.Component {\n constructor(props) {\n super(props); \n this.custScrollTo = this.custScrollTo.bind(this);\n this.mainNavOffsetHandler = this.mainNavOffsetHandler.bind(this);\n this.MOBILE_NAV_BREAKPOINT = 768;\n this.isMobile = window.matchMedia(\"(max-width: 767px)\").matches; \n this.journey = parseInt(journeyParam) || 1; // 1 for exit journey (default), 2 for savings component journey\n this.state = { \n step: 1,\n loading: true,\n data: serverData,\n goToSlide4: false,\n formValues: {\n currentAge: 0,\n retireAge: 0,\n gender: 0,\n leavingReason: 0,\n currentInvestment: 0,\n vestedInvestment: 0,\n savingsInvestment: 0\n }\n };\n }\n\n componentDidMount() {\n\n // begin at first step on reload\n this.toggleSlide(1);\n\n this.isMobile = window.matchMedia(\"(max-width: 767px)\").matches; \n\n // get data & set loading state to false on success\n $.getJSON(serverDataURL) \n .done((data) => {\n this.setState({\n data: data,\n loading: false\n });\n window.scroll(0, this.isMobile ? 77 : 130);\n })\n .fail((jqxhr, textStatus, error) => {\n var err = textStatus + \", \" + error;\n console.log(\"Server data request failed: \" + err);\n\n $.getJSON('data/fakeServerData.json') \n .done((data) => {\n this.setState({\n data: data,\n loading: false\n });\n window.scroll(0, this.isMobile ? 77 : 130);\n })\n .fail(function (jqxhr, textStatus, error) {\n var err = textStatus + \", \" + error;\n console.log(\"Fallback data request failed: \" + err);\n });\n });\n \n window.dataLayer = window.dataLayer || [];\n window.addEventListener('scroll', this.mainNavOffsetHandler);\n }\n\n recordAnalytics(e) {\n\n gtag('event', e.currentTarget.getAttribute('data-analytics-action'), {\n 'event_category': e.currentTarget.getAttribute('data-analytics-category'),\n 'event_label': e.currentTarget.getAttribute('data-analytics-label'),\n });\n }\n\n toggleSlide(slideNum, isBulletNav = false) { \n\n // do nothing if slide # not yet unlocked AND is bullet nav \n if (slideNum > this.state.step && isBulletNav) {\n return\n }\n\n switch (slideNum) {\n case 1:\n this.setStepHandler(1);\n window.location.href = '#step-1';\n break;\n case 2:\n this.setStepHandler(2);\n window.location.href = '#step-2';\n break;\n case 3:\n this.setStepHandler(3);\n window.location.href = this.journey === 2 ? '#step-2' : '#step-3'; \n break;\n case 4:\n this.setStepHandler(4);\n window.location.href = this.journey === 2 ? '#step-3' : '#step-4' \n break;\n case 5.1:\n this.setStepHandler(5);\n window.location.href = this.journey === 2 ? '#step-4-Transfer' : '#step-5-Transfer';\n break;\n case 5.2:\n this.setStepHandler(5);\n window.location.href = this.journey === 2 ? '#step-4-Remain' : '#step-5-Remain'; \n break;\n case 5.3:\n this.setStepHandler(5);\n window.location.href = this.journey === 2 ? '#step-4-Withdraw' : '#step-5-Withdraw'; \n break;\n default:\n break;\n }\n\n // if usabilla survey active, send virtual pageview\n try {\n window.usabilla_live(\"virtualPageView\");\n }\n catch (err) {\n console.log('Unable to trigger usabilla virtual pageview');\n }\n\n gtag('event', 'page_view', {\n page_title: 'Preservation tool: ' + window.location.hash.slice(1),\n page_path: window.location.href\n });\n\n }\n goToSlide4() {\n this.setState({ goToSlide4: true, step: 4 })\n window.location.href = '#step-4';\n }\n\n clearSlide4Scroll() {\n this.setState({ goToSlide4: false })\n }\n\n getStepStyling(stepNum) {\n if (this.state.step === stepNum) {\n return \"active\"\n }\n }\n\n setFormState(value) {\n this.setState({ formValues: value })\n }\n\n setStepHandler(num) {\n if (num === undefined) {\n return\n }\n this.setState({ step: num });\n }\n\n removePtags(textFromServer) {\n if (textFromServer.slice(0, 3) == \"\n
\n \n
\n \n \n {this.props?.data?.copyrightLink}\n
\n\") {\n return textFromServer.substr(3, textFromServer.length - 7)\n }\n return textFromServer;\n }\n\n sanitizeHTML(dirtyHTML){\n return DOMPurify.sanitize(dirtyHTML, { ADD_ATTR: ['target']})\n }\n\n mainNavOffsetHandler() {\n if (window.pageYOffset || document.documentElement.scrollTop) {\n document.body.classList.remove('is-top');\n } else {\n document.body.classList.add('is-top');\n }\n }\n\n custScrollTo(element) { \n element.scrollIntoView({ behavior: \"smooth\", block: \"start\", inline: \"nearest\" });\n }\n\n\n render() {\n const tickSVG = \"data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e %3csvg width='12px' height='12px' viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3e6B537FDF-5163-4F55-9CE8-0FC7B0450613%3c/title%3e%3cg id='Home' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='1920-Desktop-(1600)---Input-dropdown-open' transform='translate(-241.000000%2c -279.000000)'%3e%3cg id='Group' transform='translate(235.000000%2c 185.000000)'%3e%3cg id='stepper/increment/large-copy-2' transform='translate(0.000000%2c 88.000000)'%3e%3cg id='done_black_24dp' transform='translate(6.000000%2c 6.000000)'%3e%3cpolygon id='Path' points='0 0 12 0 12 12 0 12'%3e%3c/polygon%3e%3cpolygon id='Path' fill='%23B2B2B4' fill-rule='nonzero' points='4.5 8.1 2.4 6 1.7 6.7 4.5 9.5 10.5 3.5 9.8 2.8'%3e%3c/polygon%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e\";\n return (\n
\n {!this.state.loading &&\n this.removePtags(text)}\n sanitizeHTML = {(html) => this.sanitizeHTML(html)}\n openNextSlide={() => this.journey === 1 ? this.toggleSlide(2) : this.toggleSlide(3)} // skip slide 2 if savings journey\n custScrollTo={(el) => this.custScrollTo(el)}\n recordAnalytics={(e) => this.recordAnalytics(e)}\n />}\n {!this.state.loading && this.journey === 1 && this.state.step > 1 && this.sanitizeHTML(html)} \n closeSlide={() => this.toggleSlide(1)}\n openNextSlide={() => this.toggleSlide(3)}\n custScrollTo={(el) => this.custScrollTo(el)}\n recordAnalytics={(e) => this.recordAnalytics(e)}\n />}\n {!this.state.loading && this.state.step > 2 && this.sanitizeHTML(html)}\n closeSlide={() => this.journey === 1 ? this.toggleSlide(2) : this.toggleSlide(1)} // return to slide 1 if savings journey\n openNextSlide={() => this.toggleSlide(4)}\n setFormValues={(value) => this.setFormState(value)}\n custScrollTo={(el) => this.custScrollTo(el)}\n recordAnalytics={(e) => this.recordAnalytics(e)}\n setStepHandler={(num) => this.setStepHandler(num)}\n />}\n {!this.state.loading && this.state.step > 3 && this.sanitizeHTML(html)}\n goToSlide4={this.state.goToSlide4}\n clearSlide4Scroll={() => clearSlide4Scroll()}\n closeSlide={() => this.toggleSlide(3)}\n openNextSlide={() => this.toggleSlide(5.2)}\n formData={this.state.formValues}\n custScrollTo={(el) => this.custScrollTo(el)}\n recordAnalytics={(e) => this.recordAnalytics(e)}\n />}\n {!this.state.loading && this.state.step > 4 && this.removePtags(text)} \n sanitizeHTML = {(html) => this.sanitizeHTML(html)} \n closeSlide={() => this.toggleSlide(4)}\n goToSlide4={() => this.goToSlide4()}\n toggleTab={(value) => this.toggleSlide(value)}\n custScrollTo={(el) => this.custScrollTo(el)}\n recordAnalytics={(e) => this.recordAnalytics(e)}\n />}\n
\n )\n }\n}\n\nlet domContainer = document.querySelector('#preservation-calculator');\nconst root = createRoot(domContainer);\nroot.render(\n \n\n \n\n\n {this.journey === 1 &&\n \n }\n\n\n \n\n \n\n \n
\n }\n {!this.state.loading && this.state.step > 0 &&