\r\n \r\n \r\n\r\n \r\n \r\n
\r\n\r\n \r\n\r\n ![](\"/content/dam/memberonboarding/icons/congratulations_xlarge_white.png\")
\r\n\r\n \r\n Congratulations!
\r\n\r\n
\r\n","import { Component, OnInit, Input, Output, EventEmitter, DoCheck } from '@angular/core';\r\nimport { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'app-candidate-contact-details',\r\n templateUrl: './candidate-contact-details.component.html',\r\n styleUrls: ['./candidate-contact-details.component.scss']\r\n})\r\nexport class CandidateContactDetailsComponent implements OnInit, DoCheck {\r\n\r\n contactDetailsForm: FormGroup;\r\n @Input() contactDetails;\r\n @Output() changeContactDetails = new EventEmitter();\r\n\r\n constructor(private formBuilder: FormBuilder) { }\r\n\r\n ngOnInit() {\r\n\r\n this.onCreateContactDetailsForm();\r\n }\r\n\r\n onCreateContactDetailsForm() {\r\n this.contactDetailsForm = this.formBuilder.group({\r\n email: new FormControl('', [Validators.required, Validators.email]),\r\n contactNumber: new FormControl('', [Validators.required])\r\n });\r\n }\r\n\r\n ngDoCheck() {\r\n if (this.contactDetailsForm.valid && this.contactDetailsForm.dirty) {\r\n this.contactDetailsForm.get('contactNumber').value.replace(/\\s/g, \"\");\r\n this.contactDetailsForm.get('email').value.replace(/\\s/g, \"\");\r\n this.contactDetails = this.contactDetailsForm.value;\r\n this.changeContactDetails.emit(this.contactDetails);\r\n this.contactDetailsForm.markAsPristine();\r\n }\r\n }\r\n\r\n}\r\n","\r\n\r\n \r\n Congratulations!
\r\n Welcome to the team\r\n
\r\n\r\n \r\n
\r\n\r\n Your offer acceptance is complete, you can go personalise your profile now\r\n and prepare for your first day or come back later.\r\n
\r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n Contact details\r\n
\r\n\r\n Please confirm that we have your correct contact details.\r\n
\r\n\r\n \r\n\r\n
\r\n\r\n\r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n We’re so happy you’ve accepted!
\r\n\r\n To process the acceptance of your offer, please confirm your basic\r\n details and complete the process.\r\n
\r\n\r\n
\r\n\r\n\r\n
\r\n\r\n\r\n
\r\n\r\n Personal details\r\n
\r\n\r\n Please confirm that we have your correct personal details.\r\n
\r\n\r\n \r\n\r\n
\r\n\r\n\r\n
\r\n\r\n ![\"access]()
\r\n
\r\n New access code requested
\r\n\r\n
\r\n\r\n\r\n
\r\n\r\n Offer expired\r\n
\r\n\r\n Already accepted and looking for your profile?\r\n Log in here.\r\n
\r\n\r\n If you're unsure about what’s happened contact your HR represensative.\r\n
\r\n\r\n
\r\n\r\n\r\n
\r\n\r\n ![\"access]()
\r\n
\r\n No pending offers for this ID
\r\n \r\n\r\n
\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n
\r\n\r\n \r\n\r\n Keep an eye out for the coach
\r\n\r\n The coach will be present throughout this exploration, giving \r\n you pointers and support as on the right.\r\n
\r\n\r\n Sometimes the coach might have something vital to say and will \r\n have to be dismissed before you can continue.\r\n
\r\n \r\n\r\n ![](\"../../../../assets/icons/white_L/people-coach.png\")
\r\n
","import { Component, OnInit } from '@angular/core';\r\n\r\nimport { ContentService } from '../../../../services/content.service';\r\nimport { RoutingService } from '../../../../services/routing.service';\r\nimport { OfferService } from '../../../../services/offer.service';\r\nimport { ErrorService } from '../../../../services/error.service';\r\nimport { StoreService } from '../../../../services/storeService';\r\n\r\n@Component({\r\n selector: 'app-details-and-accept',\r\n templateUrl: './details-and-accept.component.html',\r\n styleUrls: ['./details-and-accept.component.scss']\r\n})\r\nexport class DetailsAndAcceptComponent implements OnInit {\r\n\r\n step = 0;\r\n\r\n fullDetails; // : FullUserDetails;\r\n\r\n details1; // : any;\r\n details2; // : any;\r\n details3; // : any;\r\n details4; // : any;\r\n details5; // : any;\r\n\r\n constructor(private _contentService: ContentService,\r\n private _routingService: RoutingService,\r\n private _errorService: ErrorService,\r\n private _offerService: OfferService,\r\n private _storeService: StoreService) { }\r\n\r\n ngOnInit() {\r\n this.initDetails();\r\n }\r\n\r\n\r\n initDetails() {\r\n // const offerId = sessionStorage.getItem('offerId');\r\n // this._offerService.getById(offerId).subscribe((offer) => {\r\n // this.initStep1(offer);\r\n // this.initStep2(offer);\r\n // this.initStep3(offer);\r\n // this.step = 1;\r\n // }, (error) => {\r\n // this._errorService.openErrorPopup('An error occured!');\r\n // });\r\n }\r\n\r\n\r\n onPreviousStep() {\r\n if (this.step > 1) {\r\n this.step--;\r\n }\r\n }\r\n\r\n onNextStep(formData: any) {\r\n if (this.step < 5) {\r\n this.parseFormData(formData);\r\n this.step++;\r\n }\r\n }\r\n\r\n onDone(formData: any) {\r\n this.parseFormData(formData);\r\n this.combineFormData();\r\n // TODO send fullDetails to the service\r\n this._routingService.candidateOfferAccepted();\r\n }\r\n\r\n private parseFormData(formData: any) {\r\n if (this.step === 1) {\r\n this.details1 = formData;\r\n } else if (this.step === 2) {\r\n this.details2 = formData;\r\n } else if (this.step === 3) {\r\n this.details3 = formData;\r\n } else if (this.step === 4) {\r\n this.details4 = formData;\r\n } else {\r\n this.details5 = formData;\r\n }\r\n }\r\n\r\n private combineFormData() {\r\n\r\n this.fullDetails = {\r\n title: this.details1.title,\r\n name: this.details1.name,\r\n surname: this.details1.surname,\r\n nationality: this.details1.nationality,\r\n identityNumber: this.details1.identityNumber,\r\n passportNumber: this.details1.passportNumber,\r\n\r\n gender: this.details2.ethnicity,\r\n ethnicity: this.details2.ethnicity,\r\n taxReferenceNumber: this.details2.taxReferenceNumber,\r\n driversLicense: this.details2.driversLicense,\r\n disability: this.details2.disability,\r\n disabilityDescription: this.details2.disabilityDescription,\r\n\r\n emails: this.details3.emails,\r\n phoneNumbers: this.details3.phoneNumbers,\r\n\r\n streetNumber: this.details4.streetNumber,\r\n streetName: this.details4.streetName,\r\n complexNumber: this.details4.complexNumber,\r\n complexName: this.details4.complexName,\r\n country: this.details4.country,\r\n city: this.details4.city,\r\n postalCode: this.details4.postalCode,\r\n\r\n hasOwnBankAccount: this.details5.hasOwnBankAccount,\r\n bankName: this.details5.bankName,\r\n branchCode: this.details5.branchCode,\r\n accountHolderName: this.details5.accountHolderName,\r\n accountType: this.details5.accountType,\r\n accountNumber: this.details5.accountNumber\r\n };\r\n }\r\n\r\n private initStep1(offer: any) {\r\n this.details1 = {\r\n title: null,\r\n name: offer.candidateFirstName,\r\n surname: offer.candidateLastName,\r\n nationality: offer.candidatePassportCountry != null ? offer.candidatePassportCountry : 'South Africa',\r\n identityNumber: offer.candidateIdNumber,\r\n passportNumber: offer.candidatePassportNumber\r\n };\r\n }\r\n\r\n private initStep2(offer: any) {\r\n const gender = JSON.parse(localStorage.getItem('genders')).filter(g => g.value == offer.candidateGenderId)[0].label;\r\n const race = JSON.parse(localStorage.getItem('races')).filter(g => g.value == offer.candidateRaceId)[0].label;\r\n\r\n this.details2 = {\r\n gender: gender,\r\n ethnicity: race,\r\n taxReferenceNumber: null,\r\n driversLicense: false,\r\n disability: offer.candidateDisability == null ? false : true,\r\n disabilityDescription: offer.candidateDisability\r\n };\r\n }\r\n\r\n private initStep3(offer) {\r\n const emails: string[] = [];\r\n const phoneNumbers: { type: string, value: string }[] = [];\r\n\r\n offer.candidateContactChannels.forEach(channel => {\r\n if (channel.type == 'email') {\r\n emails.push(channel.value);\r\n } else {\r\n phoneNumbers.push({\r\n type: channel.type,\r\n value: channel.value\r\n });\r\n }\r\n });\r\n\r\n this.details3 = {\r\n emails: emails,\r\n phoneNumbers: phoneNumbers,\r\n };\r\n }\r\n\r\n}\r\n","\r\n Hello {{candidateName}}
\r\n\r\n When you’ve finished exploring the earnings \r\n section, I‘ll reveal your monthly summary.\r\n
\r\n\r\n Look out for how your decisions might affect \r\n your estimated take-home pay.\r\n
\r\n-The coach
\r\n\r\n
\r\n","import { Component, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';\r\nimport { FormGroup, FormControl } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'app-step-five',\r\n templateUrl: './step-five.component.html',\r\n styleUrls: [\r\n '../step-one/step-one.component.scss',\r\n '../step-two/step-two.component.scss',\r\n '../step-three/step-three.component.scss',\r\n './step-five.component.scss'\r\n ],\r\n encapsulation: ViewEncapsulation.None\r\n})\r\nexport class StepFiveComponent implements OnInit {\r\n\r\n userDetails: any;\r\n @Output() previousStep = new EventEmitter\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n\r\n We’re so happy you’ve accepted!
\r\nPlease confirm and complete your details below so that we’ll be ready for you on your first day.
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ![](\"/content/dam/memberonboarding/icons/check.png\")
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n {{ title }}
\r\n\r\n\r\n","import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';\r\nimport { FormGroup, Validators, FormControl } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'app-step-four',\r\n templateUrl: './step-four.component.html',\r\n styleUrls: [\r\n '../step-one/step-one.component.scss',\r\n '../step-two/step-two.component.scss',\r\n '../step-three/step-three.component.scss',\r\n './step-four.component.scss'\r\n ]\r\n})\r\nexport class StepFourComponent implements OnInit {\r\n\r\n userDetails: any;\r\n @Output() previousStep = new EventEmitter{{ title }}
\r\n\r\n","import { Component, OnInit, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';\r\nimport { FormControl, FormGroup, Validators } from '@angular/forms';\r\n\r\nimport { SelectItem } from 'primeng/api';\r\n\r\n@Component({\r\n selector: 'app-step-one',\r\n templateUrl: './step-one.component.html',\r\n styleUrls: ['./step-one.component.scss'],\r\n encapsulation: ViewEncapsulation.None\r\n})\r\nexport class StepOneComponent implements OnInit {\r\n\r\n @Input() userDetails: any;\r\n @Output() nextStep = new EventEmitter{{ title }}
\r\n\r\n\r\n","import { Component, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';\r\nimport { SelectItem } from 'primeng/api';\r\nimport { FormControl, Validators, FormGroup } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'app-step-three',\r\n templateUrl: './step-three.component.html',\r\n styleUrls: [\r\n '../step-one/step-one.component.scss',\r\n '../step-two/step-two.component.scss',\r\n './step-three.component.scss'\r\n ],\r\n encapsulation: ViewEncapsulation.None\r\n})\r\nexport class StepThreeComponent implements OnInit {\r\n\r\n @Input() userDetails: any;\r\n @Output() previousStep = new EventEmitter{{ title }}
\r\n\r\n\r\n","import { Component, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';\r\nimport { FormGroup, Validators, FormControl } from '@angular/forms';\r\n\r\nimport { SelectItem } from 'primeng/api';\r\nimport { StoreService } from '../../../../../services/storeService';\r\n\r\n@Component({\r\n selector: 'app-step-two',\r\n templateUrl: './step-two.component.html',\r\n styleUrls: ['../step-one/step-one.component.scss', './step-two.component.scss'],\r\n encapsulation: ViewEncapsulation.None\r\n})\r\nexport class StepTwoComponent implements OnInit {\r\n @Input() userDetails: any;\r\n @Output() previousStep = new EventEmitter{{ title }}
\r\n\r\n\r\n","import { Component, ViewEncapsulation, OnInit, OnDestroy } from '@angular/core';\r\nimport { ExploreOfferService } from '../../../../services/explore-offer.service';\r\nimport { ErrorService } from '../../../../services/error.service';\r\nimport { LoaderService } from '../../../../services/loader.service';\r\nimport { StoreService } from '../../../../services/storeService';\r\nimport { CandidateCacheService } from '../candidate-cache.service';\r\nimport { Subscription } from 'rxjs';\r\nimport { OfferService } from '../../../../services/offer.service';\r\nimport { InfoManagementService } from '../info-management.service';\r\n\r\n@Component({\r\n selector: \"app-explore-offer\",\r\n templateUrl: \"./explore-offer.component.html\",\r\n styleUrls: [\"./explore-offer.component.scss\"],\r\n encapsulation: ViewEncapsulation.None\r\n})\r\nexport class ExploreOfferComponent implements OnInit, OnDestroy {\r\n protected _subscriptions = new Array\r\n\r\n ![](\"/content/dam/memberonboarding/icons/white_l/people-coach.png\")
\r\n
\r\n\r\n\r\n\r\n Well done! It’s great that you want to add your existing savings to your retirement\r\n projection. This is a crucial step towards optimising your retirement.\r\n
\r\n\r\n-The coach
\r\n\r\n \r\n\r\n\r\n\r\n \r\n I\r\n
\r\n\r\n
\r\n\r\n\r\n\r\n I\r\n \r\n \r\n \r\n \r\n have existing retirement savings.\r\n
\r\n\r\n \r\n
\r\n\r\n How much do you estimate to have in total existing savings?
\r\n\r\n \r\n \r\n
\r\n\r\n\r\n
\r\n","import { Component, Input, ViewEncapsulation, Output, EventEmitter, DoCheck, OnDestroy } from '@angular/core';\r\nimport { ExploreOfferService } from '../../../../../services/explore-offer.service';\r\nimport { RoutingService } from '../../../../../services/routing.service';\r\nimport { CandidateService } from '../../../../../services/candidate.service';\r\nimport { ErrorService } from '../../../../../services/error.service';\r\nimport { StoreService } from '../../../../../services/storeService';\r\nimport { PayslipCalculationsService } from '../../../../../services/payslip-calculations.service';\r\nimport { ScrollBlocker } from '../../../../../shared/models/interfaces/scrollBlocker';\r\nimport { OfferService } from '../../../../../services/offer.service';\r\nimport { Subscription } from 'rxjs';\r\n\r\n\r\n@Component({\r\n selector: \"app-explore-offer-summary\",\r\n templateUrl: \"./offer-summary.component.html\",\r\n styleUrls: [\"./offer-summary.component.scss\"],\r\n encapsulation: ViewEncapsulation.None\r\n})\r\nexport class ExploreOfferSummaryComponent extends ScrollBlocker\r\n implements DoCheck, OnDestroy {\r\n private _subscriptions = new ArrayTotal savings
\r\n R{{ getTotalSavings() | number:'':'fr-FR' }}
\r\n\r\n\r\n \r\n \r\n\r\n
\r\n","import { Component, Input } from '@angular/core';\r\nimport { ExploreOfferService } from '../../../../../../services/explore-offer.service';\r\nimport { PayslipCalculationsService } from '../../../../../../services/payslip-calculations.service';\r\nimport { UtilitiesService } from '../../../../../../services/utilities.service';\r\n\r\n\r\n@Component({\r\n selector: 'app-pabe-additional-benefits',\r\n templateUrl: './pabe-additional-benefits.component.html',\r\n styleUrls: ['./pabe-additional-benefits.component.scss']\r\n})\r\nexport class PabeAdditionalBenefitsComponent {\r\n\r\n @Input() pageState: string;\r\n @Input() isOpen: boolean;\r\n @Input() payslipOptions: any;\r\n @Input() pensionableSalary: any;\r\n hideCoach: boolean;\r\n\r\n constructor(public exploreService: ExploreOfferService, private _calcService: PayslipCalculationsService, private _utilities: UtilitiesService) {}\r\n\r\n onSpouseChanged() {\r\n // TODO\r\n }\r\n\r\n calculateTotalBenefits(): number {\r\n if (this.exploreService.offer) {\r\n return this._utilities.roundToFifty(this._calcService.getCompanyAdditionalBenefits(this.exploreService.offer));\r\n } else {\r\n return 0;\r\n }\r\n }\r\n\r\n}\r\n","\r\n\r\n
\r\n\r\n \r\n 1 || pageState === 'hr-user'\"\r\n (openRetirement)=\"step = 3\"\r\n [step]=\"step\">\r\n \r\n\r\n
\r\n\r\n \r\n\r\n
\r\n\r\n \r\n\r\n
\r\n\r\n \r\n My earnings\r\n \r\n \r\n \r\n
\r\n\r\n 1 || pageState === 'hr-user'\" class=\"section-header\" style=\"position: relative\">\r\n My well-being\r\n\r\n \r\n \r\n\r\n \r\n 2 || pageState === 'hr-user'\"\r\n [pageState]=\"pageState\"\r\n [isOpen]=\"step == 3\"\r\n (next)=\"onNextStep()\">\r\n \r\n \r\n\r\n 3 || pageState === 'hr-user'\"\r\n [pageState]=\"pageState\"\r\n [isOpen]=\"step == 4\"\r\n [medicalAid]=\"exploreService.selection.medicalAid\">\r\n \r\n \r\n\r\n 4 || pageState === 'hr-user'\"\r\n [pageState]=\"pageState\"\r\n [isOpen]=\"step == 5\"\r\n [insurance]=\"0\">\r\n \r\n \r\n \r\n\r\n
\r\n\r\n 5 || pageState === 'hr-user'\" class=\"section-header\">\r\n Company additional benefits\r\n \r\n \r\n \r\n
\r\n\r\n 6 || pageState === 'hr-user'\" class=\"section-header\">\r\n My deductions\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n\r\n \r\n
\r\n VIEW
\r\n\r\n
\r\n ![](\"/content/dam/memberonboarding/icons/up-arrow.png\"){kind=icon}
\r\n \r\n Additional benefits\r\n \r\n
\r\n \r\n R{{ calculateTotalBenefits() | number:'':'fr-FR' }}\r\n
\r\n \r\n \r\n
\r\n\r\n\r\n \r\n In addition to your well-being benefits, {{ exploreService.corpSettings.name }} also provides you with the\r\n benefits stated in this section.\r\n
\r\n-The coach
\r\n \r\n\r\n \r\n
\r\n\r\n\r\n \r\n
\r\n\r\n\r\n I will have the following additional benefits provided by {{ exploreService.corpSettings.name }}:
\r\n\r\n\r\n\r\n \r\n
\r\n\r\n
\r\n\r\n\r\n \r\n \r\n \r\n R{{ exploreService.offer.offerData.perks.financialPerks.details.buyShares.amount }}\r\n \r\n \r\n {{ exploreService.offer.offerData.perks.financialPerks.details.buyShares.percentage }}%\r\n \r\n towards a buy shares benefit\r\n
\r\n\r\n\r\n \r\n R{{ exploreService.offer.offerData.perks.financialPerks.details.savings.amount }}\r\n \r\n \r\n {{ exploreService.offer.offerData.perks.financialPerks.details.savings.percentage }}%\r\n \r\n towards a savings/investments benefit\r\n
\r\n\r\n\r\n \r\n R{{ exploreService.offer.offerData.perks.financialPerks.details.homeLoan.amount }}\r\n \r\n \r\n {{ exploreService.offer.offerData.perks.financialPerks.details.homeLoan.percentage }}%\r\n \r\n towards a home loan (pension backed) benefit\r\n
\r\n\r\n\r\n
\r\n\r\n \r\n {{ perk.name }}\r\n
\r\n\r\n\r\n
\r\n\r\n\r\n \r\n \r\n \r\n R{{ exploreService.offer.offerData.perks.membershipPerks.details.gym.amount }}\r\n \r\n towards a gym benefit\r\n
\r\n\r\n\r\n \r\n R{{ exploreService.offer.offerData.perks.membershipPerks.details.clubs.amount }}\r\n \r\n towards a clubs benefit\r\n
\r\n\r\n\r\n \r\n R{{ exploreService.offer.offerData.perks.membershipPerks.details.social.amount }}\r\n \r\n towards a social benefit\r\n
\r\n\r\n\r\n
\r\n\r\n \r\n {{ perk.name }}\r\n
\r\n\r\n\r\n
\r\n\r\n\r\n \r\n \r\n \r\n R{{ exploreService.offer.offerData.perks.communicationPerks.details.cellphone.amount }}\r\n \r\n towards a cellphone benefit\r\n
\r\n\r\n\r\n \r\n R{{ exploreService.offer.offerData.perks.communicationPerks.details.data.amount }}\r\n \r\n towards a data benefit\r\n
\r\n\r\n\r\n
\r\n\r\n \r\n {{ perk.name }}\r\n
\r\n\r\n\r\n
\r\n\r\n\r\n \r\n \r\n \r\n R{{ exploreService.offer.offerData.perks.travelPerks.details.companyAllowance.amount }}\r\n \r\n towards a company allowance benefit\r\n
\r\n\r\n\r\n \r\n R{{ exploreService.offer.offerData.perks.travelPerks.details.companyCar.amount }}\r\n \r\n towards a company car benefit\r\n
\r\n\r\n\r\n \r\n R{{ exploreService.offer.offerData.perks.travelPerks.details.parking.amount }}\r\n \r\n towards a parking benefit\r\n
\r\n\r\n\r\n \r\n R{{ exploreService.offer.offerData.perks.travelPerks.details.travelAllowance.amount }}\r\n \r\n towards a travel allowance benefit\r\n
\r\n\r\n\r\n \r\n R{{ exploreService.offer.offerData.perks.travelPerks.details.vehicleAllowance.amount }}\r\n \r\n towards a vehicle allowance benefit\r\n
\r\n\r\n\r\n
\r\n\r\n \r\n {{ perk.name }}\r\n
\r\n\r\n\r\n
\r\n\r\n\r\n \r\n \r\n \r\n R{{ exploreService.offer.offerData.perks.entertainmentPerks.details.entertainment.amount }}\r\n \r\n for entertainment\r\n
\r\n\r\n\r\n \r\n R{{ exploreService.offer.offerData.perks.entertainmentPerks.details.meal.amount }}\r\n \r\n for meal vouchers\r\n
\r\n\r\n\r\n
\r\n\r\n \r\n {{ perk.name }}\r\n
\r\n\r\n\r\n
\r\n\r\n \r\n \r\n R{{ exploreService.offer.offerData.perks.otherPerks.details.childcare.amount }}\r\n \r\n towards a childcare benefit\r\n
\r\n\r\n\r\n \r\n R{{ exploreService.offer.offerData.perks.otherPerks.details.dangerPay.amount }}\r\n \r\n towards a danger pay benefit\r\n
\r\n\r\n\r\n \r\n R{{ exploreService.offer.offerData.perks.otherPerks.details.charity.amount }}\r\n \r\n towards a charity benefit\r\n
\r\n\r\n\r\n \r\n R{{ exploreService.offer.offerData.perks.otherPerks.details.housing.amount }}\r\n \r\n towards a housing benefit\r\n
\r\n\r\n\r\n \r\n R{{ exploreService.offer.offerData.perks.otherPerks.details.study.amount }}\r\n \r\n towards a study benefit\r\n
\r\n\r\n\r\n
\r\n\r\n \r\n {{ perk.name }}\r\n
\r\n\r\n
\r\n\r\n Total additional benefits
\r\n R{{ calculateTotalBenefits() | number:'':'fr-FR' }}
\r\n \r\n
\r\n EDIT
\r\n\r\n
\r\n
\r\n \r\n Earnings\r\n \r\n
\r\n \r\n R{{ getTotalEarnings() | number:'':'fr-FR' }}\r\n
\r\n \r\n
\r\n\r\n \r\n\r\n \r\n
\r\n\r\n
\r\n\r\n \r\n \r\n I will be paid a monthly amount of\r\n \r\n R{{ getMonthlyCostToCompany() | number:'':'fr-FR' }}\r\n \r\n .\r\n
\r\n\r\n\r\n \r\n \r\n \r\n \r\n of this will be my pensionable salary.\r\n
\r\n\r\n I may also qualify for the following:\r\n \r\n ![](\"/content/dam/memberonboarding/icons/question_small_black(old).png\"){kind=icon}
\r\n \r\n
\r\n
\r\n\r\n\r\n \r\n Sign-on bonus R{{ exploreService.offer.offerData.earnings[0].signOnBonus }}\r\n
\r\n\r\n \r\n
\r\n\r\n 13th cheque
\r\n \r\n
\r\n\r\n Performance bonus
\r\n \r\n {{ exploreService.offer.offerData.earnings[0].performanceBonusNotes }}\r\n
\r\n \r\n
\r\n\r\n \r\n Shares\r\n \r\n R{{ exploreService.offer.offerData.earnings[0].shares.amount }}\r\n \r\n \r\n {{ exploreService.offer.offerData.earnings[0].shares.percentage }} %\r\n \r\n
\r\n \r\n {{ exploreService.offer.offerData.earnings[0].shares.notes }}\r\n
\r\n \r\n
\r\n\r\n Comission
\r\n \r\n {{exploreService.offer.offerData.earnings[0].commissionNotes}}\r\n
\r\n \r\n
\r\n Profit share
\r\n \r\n {{ exploreService.offer.offerData.earnings[0].profitShareNotes }}\r\n
\r\n \r\n
\r\n EDIT
\r\n\r\n
\r\n
\r\n \r\n Insurance\r\n \r\n
\r\n \r\n R{{ getTotal() | number:'':'fr-FR'}}\r\n
\r\n \r\n \r\n
\r\n\r\n\r\n \r\n You’re almost done with reviewing your well-being benefits!\r\n
\r\n\r\n Insurance benefits are important, as they provide protection to you and your\r\n loved ones' after a life-changing event. Take some time to familiarise yourself\r\n with the insurance benefits at {{ exploreService.corpSettings.name }}.\r\n
\r\n-The coach
\r\n \r\n\r\n \r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n Funeral cover\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n
\r\n\r\n\r\n\r\n I\r\n
\r\n\r\n
\r\n\r\n\r\n {{ exploreService.corpSettings.name }} will provide me with:
\r\n\r\n\r\n 0 && getDropdownModel('life cover')\" style=\"display: inline-block\">\r\n \r\n \r\n \r\n Life cover\r\n
\r\n\r\n \r\n 0 && getDropdownModel('dread disease cover')\" style=\"display: inline-block\">\r\n \r\n \r\n \r\n Dread disease cover\r\n
\r\n\r\n \r\n 0 && getDropdownModel('disability lump sum')\" style=\"display: inline-block\">\r\n \r\n \r\n \r\n Disability cover\r\n
\r\n\r\n \r\n Funeral cover\r\n 0 && getDropdownModel('funeral')\" style=\"display: inline-block\">\r\n \r\n \r\n \r\n
\r\n\r\n \r\n 0 && getDropdownModel('disability income protection')\" style=\"display: inline-block\">\r\n \r\n \r\n \r\n Income protection\r\n
\r\n\r\n \r\n 0 && getDropdownModel('temporary total disability')\" style=\"display: inline-block\">\r\n \r\n \r\n \r\n Temporary total disability\r\n
\r\n\r\n \r\n\r\n\r\n
\r\n I\r\n \r\n \r\n \r\n \r\n need insurance cover for my spouse.\r\n \r\n
\r\n\r\n \r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n
\r\n\r\n \r\n 0 && getDropdownModel('spousal life cover')\" style=\"display: inline-block\">\r\n \r\n \r\n \r\n Spousal life cover\r\n
\r\n\r\n \r\n 0 && getDropdownModel('spousal dread disease cover')\" style=\"display: inline-block\">\r\n \r\n \r\n \r\n Spousal dread disease cover\r\n
\r\n\r\n \r\n 0 && getDropdownModel('spousal disability lump sum')\" style=\"display: inline-block\">\r\n \r\n \r\n \r\n Spousal disability cover\r\n
\r\n\r\n \r\n I will be contributing\r\n R{{ getMemberCost() }}\r\n towards the insurance and\r\n
\r\n\r\n\r\n {{ exploreService.corpSettings.name }} will be contributing\r\n R{{ getEmployerCost() }}\r\n to my insurance.\r\n
\r\n\r\n\r\n
\r\n\r\nTotal insurance contribution
\r\n R{{ getTotal() | number:'':'fr-FR' }}
\r\n \r\n
\r\n EDIT
\r\n\r\n
\r\n
\r\n \r\n Medical aid\r\n \r\n
\r\n \r\n R{{ calculateTotalMedicalAids() | number:'':'fr-FR'}}\r\n
\r\n \r\n \r\n
\r\n\r\n \r\n Now let’s look at your medical aid benefit. It’s important to choose a plan that\r\n not only suits your pocket, but also your and your loved ones’ health needs.\r\n
\r\n\r\n Below you’ll find typical medical aid plans but take note that your final choice\r\n will only happen once you have accepted the offer.\r\n
\r\n-The coach
\r\n \r\n\r\n \r\n \r\n
\r\n\r\n\r\n \r\n You’ve indicated that you won’t be part of the medical aid provided by {{ exploreService.corpSettings.name }}.\r\n Please note that you’re required to be a member of a medical aid fund and that\r\n {{ exploreService.corpSettings.name }} will request proof of your membership.\r\n
\r\n-The coach
\r\n \r\n\r\n \r\n \r\n I\r\n
\r\n\r\n
\r\n\r\n\r\n I\r\n
\r\n\r\n
\r\n\r\n\r\n \r\n I\r\n \r\n \r\n \r\n \r\n be taking medical aid provided by the employer\r\n
\r\n\r\n \r\n \r\n and would like to be on a\r\n
\r\n\r\n \r\n This medical aid will be for\r\n
\r\n\r\n
\r\n\r\n \r\n and would like to be on a\r\n \r\n \r\n \r\n \r\n plan.\r\n
\r\n\r\n \r\n This medical aid will be for\r\n \r\n \r\n \r\n \r\n .\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n \r\n Adult dependants\r\n
\r\n
\r\n \r\n Adult dependants\r\n \r\n \r\n
\r\n \r\n \r\n Child dependants\r\n
\r\n
\r\n \r\n Child dependants\r\n \r\n \r\n
\r\n 0\">\r\n I will be contributing\r\n R{{ getMemberContribution() | number:'':'fr-FR'}}\r\n towards the medical aid and\r\n
\r\n\r\n0\">\r\n {{ exploreService.corpSettings.name }} will be contributing\r\n \r\n R{{ getCompanyContribution().amount | number:'':'fr-FR' }} ({{ getCompanyContribution().percentage }}%)\r\n \r\n of the selected medical aid.\r\n
\r\n\r\n\r\n\r\n
\r\n I\r\n \r\n \r\n \r\n \r\n be taking gap cover at this time\r\n
\r\n\r\n \r\n \r\n and would like to be on a\r\n
\r\n
\r\n\r\n\r\n \r\n and would like to be on a\r\n \r\n \r\n \r\n \r\n plan.\r\n
\r\n \r\n I will be contributing\r\n R{{ getGapCoverAmount() | number:'':'fr-FR'}}\r\n towards gap cover.\r\n
\r\n\r\n
\r\n\r\nTotal medical aid contribution
\r\n R{{ calculateTotalMedicalAids() | number:'':'fr-FR' }}
\r\n \r\n
\r\n EDIT
\r\n\r\n
\r\n
\r\n \r\n Retirement\r\n \r\n
\r\n \r\n R{{ getTotalRetirements() | number:'':'fr-FR' }}\r\n
\r\n \r\n \r\n
\r\n\r\n \r\n Let’s explore what percentage of your salary you would like to contribute towards\r\n your retirement every month. Saving towards retirement is the biggest\r\n investment you could make towards your future.\r\n
\r\n\r\n Pay close attention to the impact your choice will have on your retirement\r\n projection on the right.\r\n
\r\n\r\n-The coach
\r\n\r\n \r\n\r\n \r\n \r\n
\r\n\r\n\r\n \r\n You have made choices that may result in you not being financially secure upon\r\n retirement. Consider increasing your contribution rate, selecting additional\r\n voluntary contributions and completing information for existing retirement savings\r\n to improve your retirement projection.\r\n
\r\n\r\n Don’t despair if you are feeling overwhelmed, connect to advice for help.\r\n
\r\n\r\n-The coach
\r\n\r\n \r\n \r\n\r\n \r\n\r\n
\r\n\r\n\r\n \r\n
\r\n\r\n\r\n I will be contributing\r\n \r\n R{{ getMemberContribution() | number:'':'fr-FR' }}\r\n ({{ exploreService.selection.retirement.memberContribution }}%)\r\n towards my retirement,\r\n
\r\nresulting in an estimated income at retirement of R{{ getRetirementIncome() | number:'':'fr-FR' }}
\r\nbased on the percentage I select below.
\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n\r\n\r\n {{ exploreService.corpSettings.name }} will be contributing\r\n \r\n R{{ getEmployerContribution() | number:'':'fr-FR'}}\r\n ({{ exploreService.selection.retirement.employerContribution }}%)\r\n \r\n
\r\nto my retirement fund, based on the percentage I select below.
\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n I\r\n
\r\n\r\n \r\n I will voluntary contribute additional\r\n \r\n R{{ getAdditionalVoluntaryContribution() | number:'':'fr-FR' }}\r\n ({{ exploreService.selection.retirement.voluntaryContribution }}%)\r\n to my retirement fund.\r\n
\r\n\r\n
\r\n\r\n \r\n I\r\n \r\n \r\n \r\n \r\n be adding additional voluntary contributions at this time.\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n I will voluntary contribute additional\r\n \r\n R{{ getAdditionalVoluntaryContribution() | number:'':'fr-FR' }}\r\n ({{ exploreService.selection.retirement.voluntaryContribution }}%)\r\n to my retirement fund.\r\n
\r\n
\r\n\r\n \r\n
\r\n\r\nTotal retirement contribution
\r\n R{{ getTotalRetirements() | number:'':'fr-FR' }}
\r\n \r\n \r\n
\r\n Monthly summary
\r\n \r\n \r\n Cost to company\r\n \r\n R{{ getMonthlyCostToCompany() | number:'':'fr-FR' }}\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n Company: my well-being\r\n \r\n R{{ calculateCompanyWellbeing() | number:'':'fr-FR' }}\r\n \r\n
\r\n 0\" class=\"section-subheader\">\r\n Company: additional benefits\r\n \r\n R{{ calculateTotalBenefits() | number:'':'fr-FR' }}\r\n \r\n
\r\n \r\n
\r\n\r\n\r\n \r\n My earnings\r\n \r\n R{{ calculateMyEarnings() | number:'':'fr-FR' }}\r\n \r\n
\r\n \r\n My well-being\r\n \r\n R{{ calculateMyWellbeing() | number:'':'fr-FR' }}\r\n \r\n
\r\n \r\n My deductions\r\n \r\n R{{ calculateTotalDeductions() | number:'':'fr-FR' }}\r\n \r\n
\r\n \r\n \r\n\r\n Estimated
take-home pay\r\n
\r\n\r\ntake-home pay\r\n
\r\n \r\n R{{ calculateTakeHomePay() | number:'':'fr-FR' }}\r\n
\r\n\r\n \r\n
\r\n VIEW
\r\n\r\n
\r\n
\r\n \r\n Tax and deductions\r\n \r\n
\r\n \r\n R{{ getTotalDeductions() | number:'':'fr-FR' }}\r\n
\r\n \r\n \r\n
\r\n\r\n\r\n \r\n Lastly, let’s take a look at your montly deductions. South African law requires you\r\n to contribute towards income tax and the Unemployment Insurance Fund (UIF).\r\n
\r\n-The coach
\r\n \r\n\r\n \r\n\r\n
\r\n\r\n\r\n R{{ getPaye() | number:'':'fr-FR' }} will be deducted for PAYE(Pay as you earn)
\r\nR{{ getUif() | number:'':'fr-FR' }} will be deducted for UIF
\r\n\r\n
\r\n\r\n \r\n R{{ sundry.amount | number:'':'fr-FR' }}\r\n {{ sundry.percentage }}%\r\n will be allocated for {{ sundry.notes }}\r\n
\r\n\r\n
\r\n\r\n Total deductions
\r\n R{{ getTotalDeductions() | number:'':'fr-FR' }}
\r\n \r\n \r\n
\r\n","import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';\r\nimport { ScrollBlocker } from '../../../../../shared/models/interfaces/scrollBlocker';\r\n\r\n@Component({\r\n selector: 'app-pabe-intro',\r\n templateUrl: './pabe-intro.component.html',\r\n styleUrls: ['./pabe-intro.component.scss']\r\n})\r\nexport class PabeIntroComponent extends ScrollBlocker implements OnInit {\r\n\r\n @Input() showIntro: boolean;\r\n @Output() hide = new EventEmitter();\r\n\r\n ngOnInit() {\r\n if (this.showIntro) {\r\n this._blockScroll();\r\n }\r\n }\r\n\r\n onNext() {\r\n this._unblockScroll();\r\n this.hide.emit();\r\n }\r\n}\r\n","\r\n \r\n Now that you know what you’ll be earning, let’s introduce you to the well-being\r\n benefits which you and {{ exploreService.corpSettings.name }} will be contributing towards.\r\n
\r\n\r\n Well-being benefits are very important to you and your loved ones, as they\r\n provide protection and financial security. At {{ exploreService.corpSettings.name }}, your well-being\r\n benefits include retirement, medical aid and insurance.\r\n
\r\n-The coach
\r\n \r\n\r\n\r\n
","import { Component, OnInit, Output, EventEmitter, ViewEncapsulation } from '@angular/core';\r\nimport { PayslipCalculationsService } from '../../../../../services/payslip-calculations.service';\r\nimport { ExploreOfferService } from '../../../../../services/explore-offer.service';\r\nimport { UtilitiesService } from '../../../../../services/utilities.service';\r\n\r\n@Component({\r\n selector: 'app-retirement-estimations-box',\r\n templateUrl: './retirement-estimations-box.component.html',\r\n styleUrls: ['./retirement-estimations-box.component.scss'],\r\n encapsulation: ViewEncapsulation.None\r\n})\r\nexport class RetirementEstimationsBoxComponent implements OnInit {\r\n\r\n @Output() blur = new EventEmitter\r\n
\r\n\r\n\r\n Let’s explore a breakdown of the earnings \r\n and benefits you’ll receive by joining\r\n
\r\n\r\n\r\n The numbers in this breakdown are estimates that allow you to \r\n explore and adjust but won’t dictate your final payslip after joining. \r\n
\r\n\r\n\r\n Use this explorer to understand your benefits and the impact on your \r\n future. After each section, continue to the next and see how your \r\n summary changes if you make adjustments.\r\n
\r\n\r\n \r\n\r\n
\r\n\r\n Retirement projection
\r\n\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n Estimated income
after retirement\r\n
\r\n after retirement\r\n
\r\n
\r\n \r\n \r\n R{{ calculateMontlyRetirementIncome() | number:'':'fr-FR' }}\r\n
\r\n \r\n
\r\n\r\n\r\n This is your retirement projection. You may \r\n have existing retirement savings that could \r\n improve this outcome.\r\n
\r\n Would you like to see the impact?\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n Do you accept this offer?
\r\n\r\n
\r\n\r\n \r\n
\r\n \r\n You have until 17:00 on {{ expiryDate }} to respond to this offer. On\r\n accepting, we’ll create your profile and you’ll have to confirm a few\r\n details.\r\n
\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n By clicking ‘I have queries’ you can submit your questions and\r\n comments, and your HR representative will get back to you.\r\n
\r\n \r\n\r\n
\r\n\r\n\r\n\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n\r\n\r\n \r\n
\r\n\r\n\r\n\r\n\r\n ![](\"../../../../../assets/icons/white_L/chat.png\")
\r\n\r\n
\r\n","import { Component, OnInit, Output, EventEmitter } from '@angular/core';\r\n\r\n\r\n@Component({\r\n selector: 'app-queries-sent-dialog',\r\n templateUrl: './queries-sent-dialog.component.html',\r\n styleUrls: ['./queries-sent-dialog.component.scss']\r\n})\r\nexport class QueriesSentDialogComponent implements OnInit {\r\n\r\n @Output() close = new EventEmitter\r\n\r\n Let’s answer your questions
\r\n\r\n\r\n
\r\n\r\n\r\n \r\n Here are the notes you’ve captured so far.
\r\n Feel free to add more and send them through to have
\r\n your HR representative answer them.\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n\r\n ![](\"/content/dam/memberonboarding/icons/note_success_xlarge_white.png\")
\r\n\r\n
\r\n","import { Injectable } from '@angular/core';\r\n\r\n@Injectable()\r\nexport class InfoManagementService {\r\n feedbackIntroClosed: boolean = false;\r\n reviewOfferIntroClosed: boolean = false;\r\n exploreOfferIntroClosed: boolean = false;\r\n coachIntroClosed: boolean = false;\r\n retirementIntroClosed: boolean = false;\r\n}\r\n","import { Component, OnInit } from '@angular/core';\r\nimport { RoutingService } from '../../../../services/routing.service';\r\n\r\n@Component({\r\n selector: 'app-landing',\r\n templateUrl: './landing.component.html',\r\n styleUrls: ['./landing.component.scss']\r\n})\r\nexport class LandingComponent implements OnInit {\r\n\r\n constructor( private _routingService: RoutingService) { }\r\n\r\n //candidate landing overlay\r\n ngOnInit() {\r\n }\r\n\r\n goToOffer() {\r\n this._routingService.candidateReviewOffer();\r\n }\r\n}\r\n","\r\n\r\n Request for help sent
\r\n\r\n\r\n
\r\n\r\n \r\n Thank you for your message.
\r\n We'll get back to you soon.
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n","import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';\r\nimport { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';\r\nimport { Subscription } from 'rxjs';\r\nimport { GetCandidateByIdModel } from '../../../../../services/service_models/candidate-models/get-candidate-by-id.model';\r\nimport { CandidateProfile } from '../models/candidate-profile.model';\r\nimport { RoutingService } from '../../../../../services/routing.service';\r\nimport { environment } from '../../../../../../environments/environment';\r\nimport { StoreService } from '../../../../../services/storeService';\r\nimport { AuthCandidateService } from '../../../../../core/authCandidate.service';\r\n\r\n@Component({\r\n selector: 'app-candidate-profile-details',\r\n templateUrl: './candidate-profile-details.component.html',\r\n styleUrls: ['./candidate-profile-details.component.scss']\r\n})\r\nexport class CandidateProfileDetailsComponent implements OnInit {\r\n\r\n protected _subscriptions = new Array\r\n
\r\n\r\n
\r\n \r\n \r\n Before we get started, we'd like to highlight
\r\n
\r\n\r\n \r\n Before we get started, we'd like to highlight
\r\n a few important things as you:\r\n
\r\n 1Review your offer
\r\n2Explore your pay and benefits
\r\n3Finalise your decision
\r\n\r\n
\r\n \r\n Please keep in mind that the 'Explore your pay and benefits' section shows what \r\n your take home pay could look like. It will help you understand the importance \r\n of your financial decisions for your future. This is an illustration and may not \r\n accurately reflect what you’ll receive in your first month.\r\n
\r\n \r\n\r\n
\r\n\r\n\r\n","import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angular/core';\r\nimport { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';\r\nimport { Subscription } from 'rxjs';\r\nimport { RoutingService } from '../../../../../services/routing.service';\r\nimport { StoreService } from '../../../../../services/storeService';\r\nimport { ProfileService } from '../../../../../services/profile.service';\r\nimport { NotificationService } from '../../../../../services/notification.service';\r\nimport { ErrorService } from '../../../../../services/error.service';\r\nimport {Location} from '@angular/common';\r\nimport { LoaderService } from '../../../../../services/loader.service';\r\n\r\n@Component({\r\n selector: 'app-candidate-profile-linking',\r\n templateUrl: './candidate-profile-linking.component.html',\r\n styleUrls: ['./candidate-profile-linking.component.scss']\r\n})\r\nexport class CandidateProfileLinkingComponent implements OnInit, OnDestroy {\r\n\r\n protected _subscriptions = new Array\r\n \r\n \r\n
\r\n\r\n Hello {{ model.firstname }} {{ model.lastname }}\r\n
\r\n\r\n
\r\n \r\n Please enter a username and password to create your profile\r\n
\r\n \r\n \r\n\r\n
\r\n\r\n\r\n","import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angular/core';\r\nimport { FormGroup, FormBuilder, FormControl } from '@angular/forms';\r\nimport { GetCandidateByIdModel } from '../../../../../services/service_models/candidate-models/get-candidate-by-id.model';\r\nimport { ErrorService } from '../../../../../services/error.service';\r\nimport { ProfileService } from '../../../../../services/profile.service';\r\nimport { NotificationService } from '../../../../../services/notification.service';\r\nimport { Subscription } from 'rxjs';\r\n\r\n@Component({\r\n selector: 'app-candidate-profile-verification',\r\n templateUrl: './candidate-profile-verification.component.html',\r\n styleUrls: ['./candidate-profile-verification.component.scss']\r\n})\r\nexport class CandidateProfileVerificationComponent implements OnInit, OnDestroy {\r\n\r\n private _subscriptions = new Array\r\n \r\n\r\n \r\n
\r\n\r\n
\r\n \r\n Please enter a username and password to link your profile\r\n
\r\n \r\n\r\n
\r\n","export class CandidateProfile {\r\n username: string;\r\n password: string;\r\n confirmPassword: string;\r\n}\r\n","import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';\r\nimport { ErrorService } from '../../../../services/error.service';\r\nimport { ProfileService } from '../../../../services/profile.service';\r\nimport { NotificationService } from '../../../../services/notification.service';\r\nimport { LoaderService } from '../../../../services/loader.service';\r\nimport { Subscription } from 'rxjs';\r\nimport { GetCandidateByIdModel } from '../../../../services/service_models/candidate-models/get-candidate-by-id.model';\r\nimport { ProfileMapper } from '../../../../services/model-mappers/user-profile-mapper.service';\r\nimport { RoutingService } from '../../../../services/routing.service';\r\nimport { CandidateUserProfile } from '../../../../services/service_models/profile-models/user-profile.model';\r\nimport { CandidateCacheService } from '../candidate-cache.service';\r\n\r\n@Component({\r\n selector: 'app-profile',\r\n templateUrl: './profile.component.html',\r\n styleUrls: ['./profile.component.scss'],\r\n encapsulation: ViewEncapsulation.None\r\n})\r\nexport class ProfileCandidateComponent implements OnInit, OnDestroy {\r\n private _subscriptions = new Array\r\n
\r\nVerification
\r\n\r\n Your access code has been sent
\r\n to the following number *** *** {{ candidateCellphone | slice: -4 }}\r\n
\r\n \r\n
\r\n \r\n If your access code isn’t working, you can resend it to your\r\n phone number.\r\n
\r\nIf your new code doesn’t work, contact your HR representative.
\r\n\r\n
\r\n\r\n\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n\r\n
","import { Component, ViewEncapsulation, Input } from '@angular/core';\r\nimport { OfferModel } from '../../../../../shared/models/offer';\r\n\r\n@Component({\r\n selector: 'app-offer-summary',\r\n templateUrl: './offer-summary.component.html',\r\n styleUrls: ['./offer-summary.component.scss'],\r\n encapsulation: ViewEncapsulation.None\r\n})\r\nexport class OfferSummaryComponent {\r\n\r\n @Input() offer: OfferModel;\r\n\r\n constructor() {\r\n if (!this.offer) {\r\n this.offer = new OfferModel();\r\n }\r\n }\r\n\r\n}\r\n","\r\n
\r\n\r\n Before we show you your offer,
\r\nhere’s a quick reminder of what you’ll be looking at
\r\n\r\n\r\n
\r\n\r\n\r\n
\r\n\r\n \r\n
\r\n \r\n ![](\"/content/dam/memberonboarding/icons/personal_large.png\")
\r\n
\r\n \r\n Offer basics
\r\n\r\n Have a look at your offer letter and
\r\n summary of your new position.\r\n
\r\n
\r\n\r\n \r\n
\r\n \r\n ![](\"/content/dam/memberonboarding/icons/offer)
\r\n
\r\n Earnings and benefits
\r\n\r\n View and explore your estimated take-home
\r\n pay based on your benefit adjustments.\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n Offer acceptance
\r\n\r\n Complete your profile details to
\r\n finalise your acceptance of the offer.\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n\r\n
\r\n
\r\n Offer summary
\r\n\r\n
\r\n \r\n R{{ offer.offerDetails.costToCompany | number:'':'fr-FR' }} a year\r\n
\r\n 0\" class=\"section-subheader\">\r\n \r\n R{{ offer.earnings[0].signOnBonus | number:'':'fr-FR' }}\r\n
\r\n \r\n \r\n {{ offer.offerDetails.jobTitle }}\r\n
\r\n \r\n \r\n {{ offer.offerDetails.startDate | date: \"dd MMMM yyyy\" }}\r\n
\r\n \r\n \r\n {{ offer.offerDetails.division }}\r\n
\r\n \r\n \r\n {{ offer.offerDetails.department }}\r\n
\r\n \r\n \r\n {{ offer.offerDetails.location }}\r\n
\r\n \r\n \r\n \r\n\r\n
\r\n\r\n\r\n
\r\n\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n \r\n\r\n ![](\"../../../../../assets/icons/confetti(old).png\")
\r\n\r\n
\r\n\r\n","import { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-candidate-footer',\r\n templateUrl: './candidate-footer.component.html',\r\n styleUrls: ['./candidate-footer.component.scss']\r\n})\r\nexport class CandidateFooterComponent implements OnInit {\r\n currentYear = '';\r\n\r\n ngOnInit() {\r\n this.currentYear = new Date().getFullYear().toString();\r\n }\r\n}\r\n","\r\n","import { Component, OnInit, OnDestroy } from \"@angular/core\";\r\nimport { ContentService } from \"../../../../../services/content.service\";\r\nimport { AuthService } from \"src/app/services/auth.service\";\r\nimport { StoreService } from \"../../../../../services/storeService\";\r\nimport { environment } from \"../../../../../../environments/environment\";\r\nimport { CandidateCacheService } from \"../../candidate-cache.service\";\r\nimport { LoaderService } from \"../../../../../services/loader.service\";\r\nimport { Subscription } from \"rxjs\";\r\nimport { Constants } from \"../../../../../constants/constants\";\r\n\r\n@Component({\r\n selector: \"app-white-header\",\r\n templateUrl: \"./candidate-header.component.html\",\r\n styleUrls: [\"./candidate-header.component.scss\"],\r\n})\r\nexport class CandidateWhiteHeaderComponent implements OnInit, OnDestroy {\r\n popIaDisclosurePath: string = \"\";\r\n infoIconDamPath: string = \"\";\r\n private _subscriptions = new Array\r\n\r\n Congratulations and welcome to the team!
\r\n\r\n\r\n
\r\n\r\n HR will be in contact with you regarding your offer.
\r\n Now you can explore next steps to prepare for your first day.\r\n
\r\n \r\n \r\n
\r\n \r\n\r\n ![](\"../../../../../assets/icons/white_L/people-coach.png\")
\r\n\r\n
\r\n","import { Component, OnInit, Input, OnDestroy } from '@angular/core';\r\nimport { ErrorService } from '../../../../../services/error.service';\r\nimport { OfferService } from '../../../../../services/offer.service';\r\nimport { Feedback } from '../../../../../services/service_models/offer_models/get-feedback.model';\r\nimport { StoreService } from '../../../../../services/storeService';\r\nimport { ScrollBlocker } from '../../../../../shared/models/interfaces/scrollBlocker';\r\nimport { Subscription } from 'rxjs';\r\n\r\n\r\n@Component({\r\n selector: 'app-feedback-window',\r\n templateUrl: './feedback-window.component.html',\r\n styleUrls: ['./feedback-window.component.scss']\r\n})\r\nexport class FeedbackWindowComponent extends ScrollBlocker implements OnInit, OnDestroy {\r\n\r\n private _subscriptions = new Array\r\n\r\n Wait, are you sure?
\r\n\r\n\r\n
\r\n\r\n\r\n {{name}}, we see you have selected the lowest percentage to
\r\n contribute towards your retirement savings. This means
\r\n your projected income at retirement is significantly less
\r\n than your monthly salary.\r\n
\r\n\r\n If you contribute more every month you'll see how much
\r\n more income you'll have to enjoy with your loved ones
\r\n when you retire.\r\n
\r\n Would you like to go back to relook your contribution?\r\n
\r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n\r\n \r\n \r\n
\r\nQueries and comments
\r\n \r\n\r\n\r\n
\r\n\r\n 0\" class=\"existingFeedback\">\r\n \r\n
\r\n \r\n \r\n {{ item.description }}\r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n
","import { Component, Input, OnInit, OnDestroy } from '@angular/core';\r\nimport { RoutingService } from '../../../../../services/routing.service';\r\nimport { CandidateCacheService } from '../../candidate-cache.service';\r\nimport { LoaderService } from '../../../../../services/loader.service';\r\nimport { Subscription } from 'rxjs';\r\n\r\n@Component({\r\n selector: 'app-offer-subheader',\r\n templateUrl: './offer-subheader.component.html',\r\n styleUrls: ['./offer-subheader.component.scss']\r\n})\r\nexport class OfferSubheaderComponent implements OnInit, OnDestroy {\r\n\r\n private _subscriptions = new Array\r\n \r\n Use the tab in the bottom right corner to
\r\n
\r\n\r\n Use the tab in the bottom right corner to
\r\n capture any queries you might have\r\n
\r\n \r\n Enter any questions or comments you have during the
\r\n process here. At the end you can submit these to your
\r\n HR representative for help.\r\n
\r\n
\r\n","import { Component, OnInit, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';\r\nimport { PayslipCalculationsService } from '../../../../../services/payslip-calculations.service';\r\nimport { RetirementState } from '../../../../../shared/models/retirement-state';\r\nimport { PayslipOptions } from '../../../../../shared/models/payslip-options.model';\r\nimport { OfferModel } from '../../../../../shared/models/offer';\r\nimport { ExploreOfferService } from '../../../../../services/explore-offer.service';\r\n\r\n@Component({\r\n selector: 'app-retirement-info-box',\r\n templateUrl: './retirement-info-box.component.html',\r\n styleUrls: ['./retirement-info-box.component.scss'],\r\n encapsulation: ViewEncapsulation.None\r\n})\r\nexport class RetirementInfoBoxComponent implements OnInit {\r\n\r\n @Output() blur = new EventEmitter\r\n\r\n
\r\n\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n {{ title }}
\r\n Offer basics
\r\n Earnings and benefits
\r\n Offer acceptance
\r\n \r\n
\r\n \r\n {{offerExpiry}} days left to respond\r\n ![](\"/content/dam/memberonboarding/icons/calendar(old).png\")
\r\n
\r\n \r\n \r\n
\r\n\r\n\r\n The area on the right is an indication
\r\n
\r\n The area on the right is an indication
of your income at retirement
\r\n When selecting your retirement contribution we want
you to consider what your retirement might look like.
Most South African’s can’t afford to retire because they
don't contribute enough towards their retirement.\r\n savings
Think carefully about how much you can set aside today
so that you save enough for your retirement.
\r\n
\r\n\r\n Retirement estimate
\r\n\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n Monthly pension
after retirement\r\n
\r\n after retirement\r\n
\r\n
\r\n \r\n \r\n R{{ calculateMontlyRetirementIncome() | number:'':'fr-FR' }}\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n Do you have any existing
retirement savings?\r\n
\r\n retirement savings?\r\n
\r\n
\r\n \r\n Yes\r\n Yes\r\n No\r\n No\r\n
\r\n \r\n
\r\n\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n\r\n\r\n\r\n
\r\n\r\n \r\n \r\n \r\n DELETE\r\n \r\n
\r\n\r\n \r\n Name\r\n
\r\n\r\n \r\n \r\n
\r\n\r\n \r\n Industry\r\n
\r\n\r\n \r\n \r\n \r\n
\r\n\r\n \r\n Header Logo\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n Location\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n ADD ANOTHER LOCATION\r\n \r\n
\r\n \r\n
\r\n \r\n Payroll day\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n\r\n \r\n Company type\r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n Primary colour\r\n
\r\n\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n\r\n \r\n SAVE CHANGES\r\n \r\n
\r\n","export * from './company-basics-card/company-basics-card.component';\r\n","import { Component, OnInit } from '@angular/core';\r\nimport { ActiveTab } from '../../../shared/enum';\r\nimport { CorporateService } from '../../../../../../../../app/services/corporate.service';\r\nimport { StoreService } from '../../../../../../../../app/services/storeService';\r\nimport { CorporateBasics } from '../../../../../../../../app/components/onboarding/users/corporate/models/corporate-basics.model';\r\nimport { GetCorporateById } from '../../../../../../../../app/services/service_models/corporate_models/get-corporate-by-id.model';\r\nimport { LoaderService } from '../../../../../../../../app/services/loader.service';\r\nimport { ErrorService } from '../../../../../../../../app/services/error.service';\r\nimport { DocumentModel } from '../../../../../../../../app/shared/models/candidate.model';\r\nimport { Router } from '@angular/router';\r\n\r\n@Component({\r\n selector: 'app-company-basics',\r\n templateUrl: './company-basics.component.html',\r\n styleUrls: ['./company-basics.component.scss']\r\n})\r\nexport class CompanyBasicsComponent implements OnInit {\r\n basics: CorporateBasics = new CorporateBasics();\r\n active = ActiveTab;\r\n corpId: string;\r\n\r\n constructor(\r\n private readonly _corpService: CorporateService,\r\n private readonly storeService: StoreService,\r\n private readonly loader: LoaderService,\r\n private readonly errorService: ErrorService,\r\n private readonly router: Router\r\n ) { }\r\n\r\n ngOnInit() {\r\n this.corpId = this.storeService.getStoredData().profile['CorporateId'];\r\n this.loader.start();\r\n this._corpService.getGroupDetailsById(this.corpId)\r\n .subscribe((corp: GetCorporateById) => {\r\n console.log(corp)\r\n this.basics = {\r\n id: corp.id,\r\n name: corp.name,\r\n payrollDay: corp.payrollDay,\r\n industryId: corp.industryId,\r\n companyTypeId: corp.companyTypeId,\r\n primaryColour: corp.primaryColour,\r\n headerLogoId: corp.headerLogoId,\r\n headerLogo: corp.headerLogo,\r\n locations: corp.locations,\r\n createdDate: corp.createdDate,\r\n statusId: corp.statusId,\r\n headerLogoFileDoc: new DocumentModel(),\r\n }\r\n this.loader.stop();\r\n }, (error) => {\r\n this.loader.stop();\r\n this.errorService.openErrorPopup('An error occurred while getting Company Basics');\r\n })\r\n }\r\n\r\n onSaveChanges() {\r\n this.loader.start();\r\n const outputModel = {\r\n basics: {\r\n name: this.basics.name,\r\n industryId: this.basics.industryId,\r\n companyTypeId: this.basics.companyTypeId,\r\n payrollDay: this.basics.payrollDay,\r\n headerLogoId: this.basics.headerLogo.id,\r\n primaryColour: this.basics.primaryColour,\r\n locations: this.basics.locations\r\n }\r\n };\r\n this._corpService.updateCorpBasics(this.corpId, outputModel)\r\n .subscribe(res => {\r\n console.log(res)\r\n this.loader.stop();\r\n this.router.navigate(['digital/onboarding/hr-operations/company']);\r\n }, (error) => {\r\n this.loader.stop();\r\n this.errorService.openErrorPopup('An error occurred while updating Company Basics');\r\n })\r\n }\r\n\r\n}\r\n\r\n\r\n","\r\n
\r\n\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n