\n
\n );\n}\n\nconst mapStateToProps = () => ({});\n\nconst mapDispatchToProps = {\n removeAlertMessage: authAction.removeAlertMessage,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(AlertBox);\n","import React, { Component } from \"react\";\n// import { ToastContainer, toast } from \"react-toastify\";\n// import \"react-toastify/dist/ReactToastify.css\";\n\nimport Loading from \"../../assets/icons/Loading.gif\";\nimport \"./style.css\";\n\nexport default class CustomLoader extends Component {\n render() {\n const { text = \"Please wait\" } = this.props;\n\n return (\n \n
\n \n {\n if (typeof onTryAgain === \"function\") {\n onTryAgain();\n }\n removeAlertMessage();\n }}\n />\n )}\n removeAlertMessage()}\n />\n
\n {capatalize(type)}
\n\n
\n {onTryAgain && (\n {message}
\n {!!secondMessage && (\n{secondMessage}
\n )}\n\n
\n );\n }\n}\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport {\n getIcon,\n getMenuClasses,\n ifSubmenuSelected,\n checkPermissionForNonMember,\n checkPermissionForEmployer,\n checkBlockedRoutes,\n} from \"../../config/helpers\";\n\nimport constants from \"../../config/constants\";\nimport \"./styles.css\";\nimport authActions from \"../../redux/auth/action\";\n\nimport CustomLoader from \"../CustomLoader/CustomLoader\";\n\nclass Sidebar extends Component {\n state = {\n openedMenu: \"\",\n isLoading: false,\n };\n\n navigate = async (route) => {\n const { localHistory, closeSidebar, alertBox, user } = this.props;\n\n if (!checkBlockedRoutes(route)) {\n return;\n }\n if (user.roles.length > 1) {\n const shouldNotNavigate = await this.checkDoubleRolePermission(route);\n\n if (shouldNotNavigate) {\n alertBox({\n type: \"error\",\n message: \"You are not authorized for this!\",\n });\n return;\n }\n } else if (!this.checkPermission(route)) {\n alertBox({ type: \"error\", message: \"You are not authorized for this!\" });\n return;\n }\n\n localHistory.push(route);\n closeSidebar();\n this.setState({}); // Temporary fix to run render function\n };\n\n checkDoubleRolePermission = async (route) => {\n const { user } = this.props;\n\n //Only checking permissions assigned to user\n const isNonMember = user.roles.some(\n (item) => item.roleId === constants.NON_MEMBER_CODE\n );\n const isMember = user.roles.some(\n (item) => item.roleId === constants.MEMBER_CODE\n );\n const isAgent = user.roles.some(\n (item) => item.roleId === constants.AGENT_CODE\n );\n const isEmployer = user.roles.some(\n (item) => item.roleId === constants.EMPLOYER_CODE\n );\n const isStaff = user.roles.some(\n (item) => item.roleId === constants.STAFF_CODE\n );\n\n let arrayOfRoute = [];\n\n //Pushing all routes which are restricted for current user\n if (isNonMember) {\n arrayOfRoute.push(constants.NON_MEMBER_RESTRICTED_ROUTES);\n }\n if (isMember) {\n arrayOfRoute.push(constants.MEMBER_RESTRICTED_ROUTES);\n }\n if (isAgent) {\n arrayOfRoute.push(constants.AGENT_RESTRICTED_ROUTES);\n }\n if (isEmployer) {\n arrayOfRoute.push(constants.EMPLOYER_RESTRICTED_ROUTES);\n }\n if (isStaff) {\n arrayOfRoute.push(constants.STAFF_RESTRICTED_ROUTES);\n }\n\n //Intersecting multiple arrays to get all restricted routes for current user\n const finalRestrictedRoutes = await this.intersection(arrayOfRoute);\n\n //Checking if current route is restricted for current user\n route = route.replace(\"/\", \"\");\n\n const shouldNotNavigate = finalRestrictedRoutes.some(\n (item) => item === route\n );\n\n return shouldNotNavigate;\n };\n\n intersection = (arrayOfRoute) => {\n // Temporary fix to remove \"/\" from every routes\n for (let i = 0; i < arrayOfRoute.length; i++) {\n for (let j = 0; j < arrayOfRoute[i]?.length; j++) {\n arrayOfRoute[i][j] = arrayOfRoute[i][j].replace(\"/\", \"\");\n }\n }\n\n // Intersection of all arrays\n const restrictedRoutes = arrayOfRoute.reduce((array1, array2) =>\n array1.filter((route) => array2.includes(route))\n );\n\n return restrictedRoutes;\n };\n\n checkPermission = (route) => {\n const { user } = this.props;\n const isNonMember = user.roles.some(\n (item) => item.roleId === constants.NON_MEMBER_CODE\n );\n const isMember = user.roles.some(\n (item) => item.roleId === constants.MEMBER_CODE\n );\n\n if (isNonMember) {\n return checkPermissionForNonMember(route);\n }\n\n const isEmployer = user.roles.some(\n (item) => item.roleId === constants.EMPLOYER_CODE\n );\n\n if (isEmployer) return checkPermissionForEmployer(route);\n if (\n !isEmployer &&\n (route === \"submissionreport\" || route === \"outputscreen\")\n ) {\n return false;\n }\n\n if (!isEmployer && !isMember && route === \"requestemployercode\")\n return false;\n\n return true;\n };\n\n renderSubmenu = (type) => {\n const { localHistory } = this.props;\n const { openedMenu } = this.state;\n const path = localHistory && localHistory.location.pathname;\n\n if (type === \"accountinfo\" && openedMenu === \"accountinfo\") {\n return (\n \n 
\n
\n {text}
\n- \n
- \n
- \n
- \n {/*
- \n
\n this.closeSidebar()}\n alt=\"close-icon\"\n src={require(\"../../assets/icons/cancel.svg\")}\n width=\"15px\"\n />\n
\n \n
\n Premium Pension Limited
\n- \n
- \n \n\n
Home
\n \n - \n \n\n {this.renderSubmenu(\"micropension\")}\n
\n Micro Pension\n
\n \n - \n \n\n {this.renderSubmenu(\"enrollment\")}\n
\n Enrollment\n
\n \n - \n \n\n {this.renderSubmenu(\"accountinfo\")}\n
\n Account Info\n
\n \n - \n \n\n {this.renderSubmenu(\"enquires\")}\n
Enquiries
\n \n - this.openExpressionOfInterest()}>\n \n\n
\n Expression of interest\n
\n \n
- \n
- \n \n\n {this.renderSubmenu(\"profilesetting\")}\n
\n Profile Setting\n
\n \n - \n \n\n
\n Download Forms\n
\n \n - \n \n\n \n
- \n \n\n
\n Contact Us\n
\n \n - \n \n\n
FAQs
\n \n
{item.roleName} Dashboard
\n\n // 
\n //
\n // );\n // }\n // });\n // });\n };\n\n return (\n {allRoles.roleName} Dashboard
\n //\n
\n );\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n isSidebar: state.auth.isSidebar,\n localHistory: state.history.localHistory,\n activeDashboard: state.dashboard.active,\n});\n\nconst mapDispatchToProps = {\n openSidebar: authActions.openSidebar,\n closeSidebar: authActions.closeSidebar,\n removeUser: authActions.removeUser,\n showLoader: authActions.showLoader,\n hideLoader: authActions.hideLoader,\n dashboardActions: dashboardActions.setActiveDashboard,\n setHistory: historyActions.setHistory,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Header);\n","import React from \"react\";\n\nimport \"./styles.css\";\nimport PensionIcon from \"../../assets/icons/background_top.png\";\n\nexport default function BackgroundIcon() {\n return (\n \n
\n Hello {getFullName()}
\n {menu && (\n\n
\n )}\n \n
\n {userDashboards()}\n {getFullName()}
\n\n
\n Logout
\n\n {/*
\n {isLoading && \n \n
*/}\n \n {\n setMenu(!menu);\n }}\n data-name=\"drop-down-menu-item\"\n />\n
\n \n 
\n
\n );\n}\n","import React from \"react\";\nimport \"./style.css\";\n\nexport default function PageHead({\n title,\n containerStyles = {},\n containerClasses = \"\",\n leftText,\n rightText\n}) {\n return (\n {title}
}\n {leftText && rightText && (\n{leftText}
\n{rightText}
\n \n )}\n \n );\n}\n","import React from \"react\";\nimport \"./style.css\";\nimport Ink from \"react-ink\";\n\nconst FloatingButton = (props) => {\n const { position = \"BOTTOM_CENTER\" } = props;\n\n const buildButtonStyles = () => {\n const DISTANCE = 20;\n const style = props.style || {};\n\n if (position === \"BOTTOM_CENTER\") {\n return {\n ...style,\n bottom: DISTANCE,\n left: \"50%\",\n transform: \"translateX(-50%)\",\n };\n }\n\n if (position === \"BOTTOM_LEFT\") {\n return { ...style, bottom: DISTANCE - 7, left: DISTANCE };\n }\n\n return { ...style };\n };\n\n return (\n\n
\n \n
\n Current Balance
\n\n ₦\n {formatNumbers(data.totBal, true)}\n
\n\n formatNumbers(label, true),\n },\n },\n ],\n xAxes: [\n {\n barPercentage: 0.6,\n gridLines: {\n display: false,\n color: \"rgba(0,0,0,0.4)\",\n lineWidth: 2,\n },\n ticks: {\n fontStyle: \"bold\",\n fontSize: 8,\n fontColor: \"blue\",\n },\n },\n ],\n },\n }}\n />\n
\n | Description | \n\n | Amount | \n
|---|---|---|
| \n Contribution Amount\n | \nMandatory | \n\n ₦\n {formatNumbers(data.ManContr, true)}\n | \n
| Voluntary | \n\n ₦\n {formatNumbers(data.VolContr, true)}\n | \n|
| \n Gain/Loss\n | \nMandatory | \n\n ₦\n {formatNumbers(data.ManGrowth, true)}\n | \n
| Voluntary | \n\n ₦\n {formatNumbers(data.VolGrowth, true)}\n | \n|
| Total Refunds | \n\n | \n ₦\n {formatNumbers(data.Refunds, true)}\n | \n
| Total Withdrawals | \n\n | \n ₦\n {formatNumbers(data.totWtdr, true)}\n | \n
| Total Gain/Loss | \n\n | \n ₦\n {formatNumbers(data.totGrowth, true)}\n | \n
| Current Balance | \n\n | \n ₦\n {formatNumbers(data.totBal, true)}\n | \n
\n
\n )}\n - \n
- \n \n {currentFunPriceArr[0].data.result.FundName}\n \n \n {formatNumbers(\n currentFunPriceArr[0].data.result.UnitPrice,\n true\n )}\n \n \n
\n
\n \n
\n Current Price
\n- \n
- \n \n {currentFunPriceArr[1].data.result.FundName}\n \n \n {formatNumbers(\n currentFunPriceArr[1].data.result.UnitPrice,\n true\n )}\n \n \n
\n
\n\n \n
\n Current Price
\n- \n
- \n \n {currentFunPriceArr[2].data.result.FundName}\n \n \n {formatNumbers(\n currentFunPriceArr[2].data.result.UnitPrice,\n true\n )}\n \n \n
\n
\n\n \n
\n Current Price
\n- \n
- \n \n {currentFunPriceArr[3].data.result.FundName}\n \n \n {formatNumbers(\n currentFunPriceArr[3].data.result.UnitPrice,\n true\n )}\n \n \n
\n
\n \n
\n Current Price
\n\n
\n {staffData && (\n {moment().format(\"MMMM DD,YYYY\")}
\n- \n
- \n Accounts\n {staffData.Total_Number_Of_Accounts}\n \n
- \n Funded Accounts\n {staffData.Total_Number_Of_Funded_Accounts}\n \n
- \n UnFunded Accounts\n {staffData.Total_Number_Of_UnFunded_Accounts}\n \n
- \n Balance\n {formatNumbers(staffData.Total_Account_Balance)}\n \n
- \n Units\n {formatNumbers(staffData.Total_Units)}\n \n
\n
\n {employerData && (\n {moment().format(\"MMMM DD,YYYY\")}
\n\n
\n )}\n \n {employerData.Employer_Name}\n
\n- \n
- \n Registered Employees\n {employerData.Total_Number_Of_Registered_Employees}\n \n
- \n Funded Employees\n {employerData.Total_Number_Of_Funded_Employees}\n \n
- \n UnFunded Employees\n {employerData.Total_Number_Of_UnFunded_Employees}\n \n
- \n Latest Remittance\n {formatNumbers(employerData.LatestRemittance)}\n \n
- \n Total Amount Credited\n {formatNumbers(employerData.TOTAL_AMOUNT_CREDITED)}\n \n
- \n Total Amount Uncredited\n \n {formatNumbers(employerData.TOTAL_UNCREDITED_AMOUNT)}\n \n \n
- \n Total Amount Remitted\n {formatNumbers(employerData.TOTAL_AMOUNT_REMITTED)}\n \n
- \n
- \n Relationship Manager Name\n {employerData.Relationship_Officer_Name}\n \n
- \n Relationship Manager Email\n \n
- \n Relationship Manager Phone\n \n \n {employerData.Relationship_Officer_Phone}\n \n \n \n
\n
\n {agentData && (\n {moment().format(\"MMMM DD,YYYY\")}
\n\n
\n )}\n - \n
- \n Name\n {agentData.Staff_Name}\n \n
- \n Accounts\n {agentData.Total_Number_Of_Accounts}\n \n
- \n Funded Accounts\n {agentData.Total_Number_Of_Funded_Accounts}\n \n
- \n Unfunded Accounts\n {agentData.Total_Number_Of_UnFunded_Accounts}\n \n
\n
\n )}\n {showLoader && \n ![\"map\"]({require(\"../../assets/icons/Map.svg\")})
\n
\n \n {info.address}
\n\n ![\"mail\"]({require(\"../../assets/icons/Mail.svg\")})
\n
\n \n {info.email}
\n\n ![\"phone\"]({require(\"../../assets/icons/Phone.svg\")})
\n
\n \n \n {info.phone}, {info.Tel}\n
\n\n ![\"map\"]({require(\"../../assets/icons/map.png\")})
\n
\n \n | RSA Balance | \n₦ {formatNumbers(data.rsaBal)} | \n
|---|---|
| Mandatory Contribution Balance | \n₦ {formatNumbers(data.ManBal)} | \n
| Voluntary Contribution Balance | \n₦ {formatNumbers(data.VolBal)} | \n
\n {faq.map((val, i) => {\n return (\n
\n )}\n {showLoader && \n
\n );\n })}\n {val.question}
\n{val.answer}
\n \n- \n
- \n
\n
\n\n \n
\n\n - \n {Object.keys(data).map((key, i) => {\n return (\n
- \n {key}\n {data[key]}\n \n );\n })}\n
\n \n {showSuggestions && (\n
\n )}\n \n );\n};\n\nexport default AutocompleteInput;\n","import React from \"react\";\n\nimport \"./style.css\";\nimport AutocompleteInput from \"../../../../component/AutocompleteInput\";\n\nfunction List(props) {\n function renderInput() {\n if (props.type === \"text\") {\n return (\n \n {suggestions.map((item) => (\n {\n if (onSelect) {\n onSelect(item);\n }\n }}\n className=\"autocomplete-suggestion-item-container\"\n >\n
\n ))}\n \n {item[labelKey]}\n
\n\n {text}\n
\n {!disabled &&\n You can not add more roles\n
\n )}\n \n\n \n
\n );\n}\n","import React from \"react\";\n\nimport \"./style.css\";\nimport { Input, FormGroup } from \"reactstrap\";\n\nexport default function TextInputOutline({\n type = \"text\",\n containerClasses = \"\",\n name,\n containerStyles = {},\n inputStyles = {},\n label = \"Login\",\n errorMessage = \"\",\n value = \"\",\n onChange = function() {}\n}) {\n return (\n \n \n \n {/* \n {label}\n */}\n \n
\n {errorMessage && }\n \n );\n}\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Container } from \"reactstrap\";\nimport { Link } from \"react-router-dom\";\nimport queryString from \"query-string\";\nimport { IdleTimerConsumer } from \"react-idle-timer\";\n\nimport activationOptionModalAction from \"../../redux/activationOptionModal/action\";\nimport CustomLoader from \"../../component/CustomLoader/CustomLoader\";\nimport \"./style.css\";\nimport api from \"../../config/api\";\nimport CustomSwitch from \"../../component/CustomSwitch/CustomSwitch\";\nimport GradientButton from \"../../component/GradientButton/GradientButton\";\nimport TextInputOutline from \"../../component/TextInputOutline/TextInputOutline\";\nimport historyAction from \"../../redux/history/action\";\nimport dashboardAction from \"../../redux/dashboard/action\";\nimport authAction from \"../../redux/auth/action\";\nimport { isNetworkRequestFailedError } from \"../../config/helpers\";\n\nclass Login extends Component {\n state = {\n username: localStorage.getItem(\"username\") || \"\",\n password: \"\",\n rememberMe: JSON.parse(localStorage.getItem(\"rememberMe\")),\n usernameError: \"\",\n passwordError: \"\",\n isLoading: false,\n };\n\n componentDidMount() {\n const { history, setHistory, removeUser, user } = this.props;\n setHistory(history);\n\n if (user) {\n removeUser();\n sessionStorage.removeItem(\"user\");\n sessionStorage.removeItem(\"IsConsentAccepted\");\n }\n }\n\n login = async (e, idleTimer) => {\n e.preventDefault();\n const { setHistory } = this.props;\n const { username, password, rememberMe } = this.state;\n const { setUser, history, setAlertMessage, setActiveDashboard } =\n this.props;\n const validateResponse = this.validate();\n let profileResponse = {};\n\n try {\n this.setState({ isLoading: true });\n\n if (!validateResponse) {\n this.setState({ isLoading: false });\n return;\n }\n\n this.setState({ isLoading: true, flag: true });\n\n const activationResponse = await api.getActivationStatus({ username });\n\n // activationResponse.data.result = {\n // UserProfileInfo_isActive: false,\n // PhoneNumber: \"3847583475834\",\n // Email: \"izaan@example.com\",\n // };\n\n if (activationResponse.data.result) {\n if (!activationResponse.data.result.UserProfileInfo_isActive) {\n this.props.setActivationModal({\n visible: true,\n data: {\n ...activationResponse.data.result,\n MobileNumber: activationResponse.data.result.PhoneNumber,\n UserName: username,\n },\n });\n this.setState({ isLoading: false, password: \"\" });\n return;\n }\n }\n\n const response = await api.login({ username, password });\n\n const promises = [\n api.getCurrentUserRoles({ username }, response.data.token),\n api.getAllRoles(),\n ];\n\n const responses = await Promise.all(promises);\n const roleResponse = responses[0];\n const allRoles = responses[1];\n\n response.data.allRoles = allRoles.data.lstUserRoles;\n\n if (response.data.ErrorMessage)\n throw new Error(response.data.ErrorMessage);\n\n response.data.profile = {};\n const isMember = roleResponse.data.lstUserRoles.some(\n (item) => item.roleId === 4\n );\n\n if (isMember) {\n profileResponse = await this.fetchProfile(response.data);\n\n await this.getAccountOfficerInfo(response.data);\n\n if (\n profileResponse.data.ErrorMessage &&\n profileResponse.data.ErrorMessage !==\n \"Invalid PIN, RSA PIN doesn't exist!\"\n )\n throw new Error(profileResponse.data.ErrorMessage);\n\n response.data.profile =\n (profileResponse.data && profileResponse.data.result) || {};\n }\n\n const sortedRoles = roleResponse.data.lstUserRoles.sort(\n (a, b) => a.id - b.id\n );\n\n response.data.roles = sortedRoles;\n response.data.primaryRole = sortedRoles[0];\n\n setActiveDashboard(sortedRoles[0].roleId);\n\n localStorage.removeItem(\"username\");\n if (rememberMe) localStorage.setItem(\"username\", username);\n\n sessionStorage.setItem(\n \"user\",\n JSON.stringify({ ...response.data, rememberMe })\n );\n\n const consentResponse = await api.isConsentAccepted(\n { userName: response.data.User.UserName },\n response.data.token\n );\n\n let consentData = consentResponse.data.result;\n\n if (!consentData) {\n sessionStorage.setItem(\"IsConsentAccepted\", false);\n history.replace(\"/consentscreen\");\n } else if (consentData) {\n if (history.location.search) {\n const qs = queryString.parse(this.props.location.search);\n history.replace(qs.redirect);\n } else {\n sessionStorage.setItem(\"IsConsentAccepted\", true);\n\n // Doesn't work without setTimeout\n // Don't know why. Do not remove\n setTimeout(() => {\n history.replace(\"/\");\n setHistory(history);\n }, 100);\n }\n }\n\n setUser({ ...response.data, rememberMe });\n idleTimer.reset();\n\n this.setState({ isLoading: false, password: \"\" });\n } catch (error) {\n setAlertMessage({\n type: \"error\",\n message: error.message,\n onTryAgain: isNetworkRequestFailedError(error)\n ? () => this.login(e, idleTimer)\n : null,\n });\n }\n\n this.setState({ isLoading: false, password: \"\" });\n };\n\n fetchProfile = (user) =>\n api.fetchProfile({ pin: user.User.rsaPin }, user.token);\n\n getAccountOfficerInfo = async (data) => {\n try {\n const response = await api.getAccountOfficer(\n { pin: data.User.rsaPin },\n data.token\n );\n\n this.props.setAccountOfficerInfo(response.data.result);\n } catch (e) {\n throw e;\n }\n };\n\n validate = () => {\n const { username, password } = this.state;\n let usernameError = \"\";\n let passwordError = \"\";\n\n if (!username.trim().length) usernameError = \"Username is required!\";\n if (!password.trim().length) passwordError = \"Password is required!\";\n\n this.setState({ usernameError, passwordError });\n return !(usernameError || passwordError);\n };\n\n handleToggleSwitch = (rememberMe) => {\n localStorage.setItem(\"rememberMe\", rememberMe);\n this.setState({ rememberMe });\n };\n\n render() {\n const {\n username,\n password,\n rememberMe,\n usernameError,\n passwordError,\n isLoading,\n } = this.state;\n\n return (\n \n \n \n {isLoading &&
\n )}\n \n this.login(e, idleTimer)}\n >\n \n this.setState({\n username: e.target.value,\n usernameError: \"\",\n })\n }\n value={username}\n label=\"Username\"\n errorMessage={usernameError}\n />\n \n this.setState({\n password: e.target.value,\n passwordError: \"\",\n })\n }\n errorMessage={passwordError}\n />\n
\n \n Premium Pension Limited\n
\n\n
\n Forget Password
\n \n {/*Forget Password
*/}\nDon't have an account? Register
\n \n \n\n \n \n \n \n \n \n
\n Privacy Policy
\n \n\n \n {isLoading && \n
\n \n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n});\n\nconst mapDispatchToProps = {\n setUser: authAction.setUser,\n setHistory: historyAction.setHistory,\n setAlertMessage: authAction.setAlertMessage,\n setActivationModal: activationOptionModalAction.setActivationModal,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Register);\n","import React, { Component } from \"react\";\nimport \"./style.css\";\nimport Ink from \"react-ink\";\n\n\nexport default class TabButton extends Component {\n render() {\n const {\n title,\n icon,\n tabBtnMainContainerClasses = \"\",\n tabBtnContainerClasses = \"\",\n iconClasses,\n iconStyles,\n tabBtnMainContainerStyles,\n tabBtnContainerStyles,\n active,\n onClick = function() {}\n } = this.props;\n\n return (\n \n
\n \n Premium Pension Limited\n
\n\n \n
\n {title}
\n\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n alertBox: alertMessage.setAlertMessage,\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(BenefitApplicationStatus);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Row, Form, Col } from \"reactstrap\";\n\nimport \"./style.css\";\nimport historyAction from \"../../redux/history/action\";\nimport alertMessage from \"../../redux/auth/action\";\nimport PageHead from \"../../component/pageHead/PageHead\";\nimport CustomButton from \"../../component/CustomButton/CustomButton\";\nimport api from \"../../config/api\";\nimport CustomLoader from \"../../component/CustomLoader/CustomLoader\";\nimport { isNetworkRequestFailedError } from \"../../config/helpers\";\n\nclass EnrollmentCertificate extends Component {\n state = {\n pin: \"\",\n showLoader: false,\n };\n\n submit = async () => {\n const { alertBox, user } = this.props;\n const pin = user.User.rsaPin;\n\n this.setState({ showLoader: true });\n try {\n const response = await api.fetchEnrollmentCertificate(\n { pin },\n user.token\n );\n if (response.data.result)\n alertBox({\n type: \"success\",\n message: \"Successfully sent to your registered email\",\n });\n else {\n throw new Error(response.data.Message);\n }\n } catch (e) {\n alertBox({\n type: \"error\",\n message: e.message,\n onTryAgain: isNetworkRequestFailedError(e) ? this.submit : null,\n });\n }\n this.setState({ showLoader: false });\n };\n\n render() {\n const { showLoader } = this.state;\n\n return (\n \n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n alertBox: alertMessage.setAlertMessage,\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(EnrollmentCertificate);\n","const getMyStatement = payload => ({\n type: \"GET_MY_STATEMENT\",\n payload\n});\n\nexport default {\n getMyStatement\n};\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Row, Col } from \"reactstrap\";\nimport DatePicker from \"react-date-picker\";\n\nimport moment from \"moment\";\nimport api from \"../../config/api\";\nimport editIcon from \"../../assets/icons/edit.png\";\nimport \"./style.css\";\nimport historyAction from \"../../redux/history/action\";\nimport statementGenerationAction from \"../../redux/statementGeneration/action\";\nimport alertMessage from \"../../redux/auth/action\";\nimport PageHead from \"../../component/pageHead/PageHead\";\nimport CustomButton from \"../../component/CustomButton/CustomButton\";\nimport CustomLoader from \"../../component/CustomLoader/CustomLoader\";\nimport { isNetworkRequestFailedError } from \"../../config/helpers\";\n\nclass StatementGeneration extends Component {\n state = {\n showLoader: false,\n showCalender: true,\n };\n\n handlePickerChange = (field, value) => {\n const { getMyStatement, eDate, alertBox } = this.props;\n\n if (field === \"sDate\" && eDate) {\n const startMoment = moment(value);\n const endMoment = moment(eDate);\n const isBefore = endMoment.isBefore(startMoment);\n if (isBefore) {\n alertBox({\n type: \"error\",\n message: \"Start date can not be higher than end date\",\n });\n\n // workaround because calender internally changes date even when\n // we don't change 'value' props\n return this.setState({ showCalender: false }, () =>\n this.setState({ showCalender: true })\n );\n }\n }\n\n getMyStatement({ [field]: value });\n };\n\n generateStatement = async () => {\n const { user, sDate, eDate, alertBox } = this.props;\n const payload = {\n sDate: moment(sDate).format(\"YYYY-MM-DD\"),\n eDate: moment(eDate).format(\"YYYY-MM-DD\"),\n pin: user.User.rsaPin,\n };\n\n try {\n this.setState({ showLoader: true });\n\n await api.getMyStatement(payload, user.token);\n alertBox({\n type: \"success\",\n message: \"Successfully sent to your registered email\",\n });\n\n this.setState({ showLoader: false });\n } catch (e) {\n alertBox({\n type: \"error\",\n message: e.message,\n onTryAgain: isNetworkRequestFailedError(e)\n ? this.generateStatement\n : null,\n });\n }\n\n this.setState({ showLoader: false });\n };\n\n render() {\n const { sDate, eDate } = this.props;\n const { showLoader, showCalender } = this.state;\n\n return (\n \n \n
\n \n {\n this.generateStatement();\n }}\n />\n \n
\n\n {showLoader &&
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.statementGeneration,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n alertBox: alertMessage.setAlertMessage,\n getMyStatement: statementGenerationAction.getMyStatement,\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(StatementGeneration);\n\nfunction CalenderIcon() {\n return (\n \n \n \n {checked && 
}\n
\n Time Period
\n\n {this.state.showCalender && (\n
\n \n \n This Year\n \n \n Last Year\n \n \n Last Quarter\n \n
\n | Description | \nEmployee | \nEmployer | \nVoluntary | \nTotal | \nWithdrawal | \n
|---|
\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n fundPrice: state.fundPrices.currentFund.fundPrice,\n fundName: state.fundPrices.currentFund.fundName,\n fundId: state.fundPrices.currentFund.fundId,\n});\n\nconst mapDispatchToProps = {\n setAlertMessage: authAction.setAlertMessage,\n setCurrentFund: fundPricesAction.setCurrentFund,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(GetFundPrice);\n","import React, { Component } from \"react\";\nimport \"./style.css\";\nimport \"../TransactionDetails/style.css\";\nimport {\n Table,\n Row,\n Col,\n ListGroup,\n ListGroupItem,\n FormGroup,\n Input,\n} from \"reactstrap\";\nimport DatePicker from \"react-date-picker\";\nimport { connect } from \"react-redux\";\nimport moment from \"moment\";\nimport { Line } from \"react-chartjs-2\";\n\nimport {\n generateRandomKey,\n isNetworkRequestFailedError,\n} from \"../../config/helpers\";\nimport CustomLoader from \"../../component/CustomLoader/CustomLoader\";\nimport authAction from \"../../redux/auth/action\";\nimport fundPricesAction from \"../../redux/fundPrices/action\";\nimport api from \"../../config/api\";\nimport editIcon from \"../../assets/icons/edit.png\";\nimport CustomButton from \"../../component/CustomButton/CustomButton\";\nimport PageHead from \"../../component/pageHead/PageHead\";\n\nclass FundPriceByDateRange extends Component {\n state = {\n from: new Date(),\n to: new Date(),\n mode: \"graph\",\n fundName: \"\",\n fundId: \"\",\n fundPrice: null,\n fundHistoryPrice: null,\n suggestedData: [],\n isLoading: false,\n showCalender: true,\n };\n\n fetchContributions = () => {};\n\n handlePriceInputChange = (e) => {\n const {\n allFunds,\n setFundByDate,\n fundHistoryPrice,\n fundPrice,\n from,\n to,\n fundId,\n } = this.props;\n const value = e.target.value;\n let filteredArr = [];\n\n const reduxPayload = {\n fundName: value,\n fundHistoryPrice,\n fundPrice,\n input: { from, to },\n fundId,\n };\n\n if (value) {\n filteredArr = allFunds.filter((e) =>\n e.FUND_NAME.toLowerCase().includes(value.toLowerCase())\n );\n }\n\n setFundByDate(reduxPayload);\n this.setState({ fundName: e.target.value, suggestedData: filteredArr });\n };\n\n // handleSuggestionClick = suggestion => {\n // const { setFundByDate, fundHistoryPrice, fundPrice, from, to } = this.props;\n\n // const reduxPayload = {\n // fundName: suggestion.FUND_NAME,\n // fundHistoryPrice,\n // fundPrice,\n // input: { from, to },\n // fundId: suggestion.FUND_ID\n // };\n\n // setFundByDate(reduxPayload);\n\n // this.setState({\n // fundName: suggestion.FUND_NAME,\n // fundId: suggestion.FUND_ID\n // });\n // };\n\n onSelectChange = (e) => {\n const { allFunds } = this.props;\n const selectedId = parseInt(e.target.value);\n const selectedFund =\n allFunds.find((item) => item.FUND_ID === selectedId) || {};\n\n const { setFundByDate, fundHistoryPrice, fundPrice, from, to } = this.props;\n\n const reduxPayload = {\n fundName: selectedFund.FUND_NAME,\n fundHistoryPrice,\n fundPrice,\n input: { from, to },\n fundId: selectedFund.FUND_ID,\n };\n\n setFundByDate(reduxPayload);\n\n this.setState({\n fundName: selectedFund.FUND_NAME,\n fundId: selectedFund.FUND_ID,\n });\n };\n\n fetchFundPrice = async () => {\n const {\n setAlertMessage,\n user,\n setFundByDate,\n fundHistoryPrice,\n from,\n to,\n fundName,\n fundId,\n } = this.props;\n\n try {\n if (!fundId) throw new Error(\"Please select Fund Name\");\n\n this.setState({ isLoading: true });\n\n const response = await api.fetchCurrentPrice({ fundId }, user.token);\n\n const reduxPayload = {\n fundName,\n fundHistoryPrice,\n fundPrice: response.data.result,\n input: { from, to },\n fundId,\n };\n\n setFundByDate(reduxPayload);\n\n this.setState({ fundPrice: response.data.result });\n } catch (e) {\n setAlertMessage({\n type: \"error\",\n message: e.message,\n onTryAgain: isNetworkRequestFailedError(e) ? this.fetchFundPrice : null,\n });\n }\n\n this.setState({ isLoading: false });\n };\n\n getPriceDateRange = async (type, newFrom) => {\n const {\n setAlertMessage,\n user,\n setFundByDate,\n fundName,\n fundPrice,\n fundId,\n from,\n to,\n } = this.props;\n\n if (newFrom !== \"fixed\" && (!from || !to)) return;\n\n let startDate = from && moment(from).format(\"YYYY-MMMM-DD\");\n\n let endDate = to && moment(to).format(\"YYYY-MMMM-DD\");\n\n try {\n if (newFrom !== \"fixed\" && moment(to).isBefore(newFrom)) {\n throw new Error(\"From date can not be higher than to\");\n }\n\n if (type === \"this_year\") {\n startDate = moment().startOf(\"year\").format(\"YYYY-MMMM-DD\");\n endDate = moment().format(\"YYYY-MMMM-DD\");\n this.setState({ from: new Date(startDate), to: new Date(endDate) });\n }\n\n if (type === \"last_year\") {\n startDate = moment()\n .subtract(1, \"year\")\n .startOf(\"year\")\n .format(\"YYYY-MMMM-DD\");\n endDate = moment()\n .subtract(1, \"year\")\n .endOf(\"year\")\n .format(\"YYYY-MMMM-DD\");\n this.setState({ from: new Date(startDate), to: new Date(endDate) });\n }\n\n if (type === \"quarter\") {\n startDate = moment()\n .subtract(1, \"quarter\")\n .startOf(\"quarter\")\n .format(\"YYYY-MMMM-DD\");\n endDate = moment().format(\"YYYY-MMMM-DD\");\n this.setState({ from: new Date(startDate), to: new Date(endDate) });\n }\n\n this.setState({ isLoading: true });\n if (!fundId) throw new Error(\"Please input required Fund Name\");\n\n const payload = {\n startDate,\n endDate,\n fundId,\n };\n\n const response = await api.fetchPriceByDateRange(payload, user.token);\n\n // let formatedStartDate = moment(from).format(\"MMMM-DD-YYYY\");\n // let formatedEndDate = moment(to).format(\"MMMM-DD-YYYY\");\n\n const reduxPayload = {\n fundName,\n fundHistoryPrice: response.data.result,\n fundPrice,\n input: {\n from: new Date(from),\n to: new Date(to),\n },\n fundId,\n };\n\n setFundByDate(reduxPayload);\n\n this.setState({ fundHistoryPrice: response.data.result });\n } catch (e) {\n setAlertMessage({\n type: \"error\",\n message: e.message,\n onTryAgain: isNetworkRequestFailedError(e)\n ? () => this.getPriceDateRange(type, newFrom)\n : null,\n });\n }\n\n this.setState({ isLoading: false });\n };\n\n handlePickerChange = (key, value) => {\n let {\n setFundByDate,\n fundName,\n fundPrice,\n fundHistoryPrice,\n from,\n to,\n fundId,\n } = this.props;\n\n if (key === \"from\" && moment(to).isBefore(value)) {\n this.setState({ showCalender: false }, () => {\n this.getPriceDateRange(null, value);\n this.setState({ showCalender: true });\n });\n return;\n }\n\n const reduxPayload = {\n fundName,\n fundHistoryPrice,\n fundPrice,\n input: { from, to },\n fundId,\n };\n\n reduxPayload.input[key] = value;\n // reduxPayload.input.to = to;\n\n setFundByDate(reduxPayload);\n\n this.setState({ [key]: value, to }, () =>\n this.getPriceDateRange(null, value)\n );\n };\n\n render() {\n const { mode, isLoading } = this.state;\n const { from, to, fundPrice, fundHistoryPrice, allFunds, fundId } =\n this.props;\n\n return (\n \n \n \n \n \n {allFunds.map((item) => (\n \n ))}\n \n \n {/*
\n
\n {fundPrice && (\n \n \n \n
\n
\n )}\n {isLoading && | Value Date | \n{moment(fundPrice.ValueDate).format(\"MMMM DD, YYYY\")} | \n
|---|---|
| Unit Price | \n{fundPrice.UnitPrice} | \n
\n
\n );\n }\n}\n\nfunction CalenderIcon() {\n return (\n \n \n \n \n \n {allFunds.map((item) => (\n \n ))}\n \n \n \n
\n
\n {fundPrice && (\n \n \n \n \n {fundHistoryPrice && (\n \n \n )}\n \n
\n )}\n {isLoading && Time Period
\n\n {this.state.showCalender && (\n
\n \n \n This Year\n \n \n Last Year\n \n \n Last Quarter\n \n
\n \n
\n {fundHistoryPrice ? (\n mode === \"table\" ? (\n \n this.setState({ mode: \"graph\" })}\n className={`date-range-btn-pill ${\n mode === \"graph\" && \"date-range-btn-pill-active\"\n }`}\n >\n Graph\n \n this.setState({ mode: \"table\" })}\n className={`date-range-btn-pill ${\n mode === \"table\" && \"date-range-btn-pill-active\"\n }`}\n >\n Data\n \n
\n | Value Date | \nUnit Price | \n
|---|---|
| \n {moment(item.ValueDate).format(\"MMMM DD, YYYY\")}\n | \n{item.UnitPrice} | \n
\n
\n \n \n {\n this.setState({ currentTab: \"fp\" });\n }}\n active={currentTab === \"fp\"}\n />\n \n {\n this.setState({ currentTab: \"dr\" });\n }}\n active={currentTab !== \"fp\"}\n />\n \n
\n
\n {currentTab === \"fp\" ? (\n \");\n setPrivacyPolicy(data);\n this.setState({ privacyPolicy: data });\n } catch (e) {\n console.log(\"e =>\", e);\n }\n this.setState({ isLoading: false });\n };\n\n render() {\n const { isLoading } = this.state;\n const { privacyPolicy } = this.props;\n\n return (\n
\n \n {privacyPolicy && (\n \n )}\n \n {isLoading &&
\n );\n }\n}\n\nconst mapStateToProps = state => ({\n privacyPolicy: state.privacyPolicy.privacyPolicy\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setPrivacyPolicy: privacyPolicyAction.setPrivacyPolicy\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(PrivacyPolicy);\n","import React from \"react\";\nimport Ink from \"react-ink\";\nimport nextBlueIcon from \"../../assets/icons/Conti_blue.png\";\nimport nextWhiteIcon from \"../../assets/icons/Conti_white.png\";\n\nexport default function StepTab({\n text,\n onClick = function() {},\n active = false\n}) {\n return (\n \n \n Back to Login\n \n
\n {text}
\n\n {\n setBankDetailsField({ bankName: e.target.value });\n }}\n >\n \n {allBanks.map(item => (\n \n ))}\n \n {!!bankNameError && (\n {bankNameError} \n )}\n {\n setBankDetailsField({ accountName: e.target.value });\n }}\n />\n {\n setBankDetailsField({ accountNumber: e.target.value });\n }}\n />\n
\n );\n }\n}\n\nconst mapStateToProps = state => ({\n user: state.auth.user,\n ...state.rsaPinRegistration.bankDetails,\n allBanks: state.referral.newReferral.allBanks\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setBankDetailsField: rsaAction.setBankDetailsField,\n setAlertMessage: authAction.setAlertMessage\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(BankDetails);\n","import React, { Component } from \"react\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport \"./style.css\";\n\nexport default class DatePickerComp extends Component {\n state = {\n shouldShowAutoComplete: false,\n date: null,\n };\n\n render() {\n console.log(this.props);\n const {\n placeholder,\n inputClasses = \"\",\n onChange = function () {},\n value,\n selected,\n isError = false,\n errorMessage = \"\",\n maxDate = null,\n } = this.props;\n\n return (\n <>\n \n {errorMessage}\n
\n \n );\n }\n}\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Input, FormFeedback } from \"reactstrap\";\n\nimport historyAction from \"../../redux/history/action\";\nimport rsaAction from \"../../redux/rsaPinRegistration/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\nimport api from \"../../config/api\";\nimport DatePickerComp from \"../../component/DatePicker/DatePicker\";\n\nclass PersonalDetails extends Component {\n state = {\n allStates: [],\n allLGA: [],\n allStates2: [],\n allLGA2: [],\n };\n\n componentDidMount() {\n const { customRef } = this.props;\n\n this.fetchFormReferenceNo();\n this.fetchState(null, true);\n\n customRef({ validate: this.validate });\n }\n\n fetchFormReferenceNo = async () => {\n const { setPersonalDetailField, formRefno } = this.props;\n\n try {\n if (!formRefno) {\n const response = await api.fetchFormReferenceNo();\n setPersonalDetailField({ formRefno: response.data.result });\n }\n } catch (e) {\n console.log(\"e =>\", e);\n }\n };\n\n onSelectChange = (e) => {\n const { setPersonalDetailField } = this.props;\n setPersonalDetailField({ [e.target.name]: e.target.value });\n if (e.target.name === \"permanentAddressLocation\") {\n this.fetchState(e.target.value);\n }\n if (e.target.name === \"permState\") {\n this.fetchLGA(e.target.value);\n }\n if (e.target.name === \"nationalityCode\") {\n this.fetchState2(e.target.value);\n }\n if (e.target.name === \"stateOfOrigin\") {\n this.fetchLGA2(e.target.value);\n }\n };\n\n fetchState = async (permanentAddressLocation, dontClear) => {\n try {\n const { user, setPersonalDetailField, permState } = this.props;\n\n if (!dontClear) {\n setPersonalDetailField({\n permState: \"\",\n permLga: \"\",\n });\n }\n\n if (permState) {\n this.fetchLGA(null, true);\n }\n\n this.setState({ allStates: [], allLGA: [] });\n\n if (!permanentAddressLocation) {\n permanentAddressLocation = this.props.permanentAddressLocation;\n }\n\n if (permanentAddressLocation === \"N\") {\n permanentAddressLocation = \"NG\";\n }\n\n const state = await api.fetchState(\n { countryCode: permanentAddressLocation },\n user.token\n );\n this.setState({ allStates: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchState2 = async (nationalityCode, dontClear) => {\n try {\n const { user, setPersonalDetailField, stateOfOrigin } = this.props;\n\n if (!dontClear) {\n setPersonalDetailField({\n stateOfOrigin: \"\",\n lgaCode: \"\",\n });\n }\n\n if (stateOfOrigin) {\n this.fetchLGA2(null, true);\n }\n\n this.setState({ allStates2: [], allLGA2: [] });\n\n if (!nationalityCode) {\n nationalityCode = this.props.nationalityCode;\n }\n\n if (nationalityCode === \"N\") {\n nationalityCode = \"NG\";\n }\n\n const state = await api.fetchState(\n { countryCode: nationalityCode },\n user.token\n );\n this.setState({ allStates2: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (permState, dontClear) => {\n try {\n const { user, setPersonalDetailField } = this.props;\n\n if (!dontClear) {\n setPersonalDetailField({ permLga: \"\" });\n }\n\n this.setState({ allLGA: [] });\n\n if (!permState) {\n permState = this.props.permState;\n }\n\n const LGA = await api.fetchLGA({ stateCode: permState }, user.token);\n\n this.setState({ allLGA: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA2 = async (stateOfOrigin, dontClear) => {\n try {\n const { user, setPersonalDetailField } = this.props;\n\n if (!dontClear) {\n setPersonalDetailField({ lgaCode: \"\" });\n }\n\n this.setState({ allLGA2: [] });\n\n if (!stateOfOrigin) {\n stateOfOrigin = this.props.stateOfOrigin;\n }\n\n const LGA = await api.fetchLGA({ stateCode: stateOfOrigin }, user.token);\n\n this.setState({ allLGA2: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n validate = () => {\n const {\n surname,\n firstname,\n nationalityCode,\n stateOfOrigin,\n lgaCode,\n title,\n gender,\n maritalStatusCode,\n permCity,\n ssn,\n mobilePhone = \"\",\n formRefno,\n permLga,\n permState,\n placeOfBirth,\n permanentAddressLocation,\n dateOfBirth,\n // schemeId,\n permCountry,\n confirmMobilePhone = \"\",\n } = this.props;\n\n let isValidated = true,\n formRefnoError = \"\",\n surnameError = \"\",\n firstnameError = \"\",\n nationalityCodeError = \"\",\n stateOfOriginError = \"\",\n lgaCodeError = \"\",\n titleError = \"\",\n genderError = \"\",\n maritalStatusCodeError = \"\",\n permCityError = \"\",\n permanentAddressLocationError = \"\",\n mobilePhoneError = \"\",\n confirmMobilePhoneError = \"\",\n ssnError = \"\",\n permLgaError = \"\",\n permStateError = \"\",\n placeOfBirthError = \"\",\n dateOfBirthError = \"\",\n schemeIdError = \"\",\n permCountryError = \"\";\n\n if (!formRefno) {\n formRefnoError = \"This field is required\";\n isValidated = false;\n }\n\n // if (!schemeId) {\n // schemeIdError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (formRefno.length > 50) {\n formRefnoError = \"Form number should not exceed 50 characters\";\n isValidated = false;\n }\n if (!surname) {\n surnameError = \"This field is required\";\n isValidated = false;\n }\n if (!firstname) {\n firstnameError = \"This field is required\";\n isValidated = false;\n }\n if (!nationalityCode) {\n nationalityCodeError = \"This field is required\";\n isValidated = false;\n }\n if (!stateOfOrigin) {\n stateOfOriginError = \"This field is required\";\n isValidated = false;\n }\n if (!lgaCode) {\n lgaCodeError = \"This field is required\";\n isValidated = false;\n }\n if (!title) {\n titleError = \"This field is required\";\n isValidated = false;\n }\n if (!gender) {\n genderError = \"This field is required\";\n isValidated = false;\n }\n if (!maritalStatusCode) {\n maritalStatusCodeError = \"This field is required\";\n isValidated = false;\n }\n if (!permCity) {\n permCityError = \"This field is required\";\n isValidated = false;\n }\n\n if (!mobilePhone) {\n mobilePhoneError = \"This field is required\";\n isValidated = false;\n }\n if (mobilePhone.length !== 11) {\n mobilePhoneError = \"Phone number should be 11 digits\";\n isValidated = false;\n }\n if (confirmMobilePhone !== mobilePhone) {\n confirmMobilePhoneError =\n \"Phone number and Confirm Phone Number must be same\";\n isValidated = false;\n }\n if (!ssn) {\n ssnError = \"This field is required\";\n isValidated = false;\n }\n if (ssn.length > 11) {\n ssnError = \"NIN should not be more than 11 digit long\";\n isValidated = false;\n }\n\n if (nationalityCode === \"NG\" && !permState) {\n permStateError = \"This field is required\";\n isValidated = false;\n }\n\n if (nationalityCode === \"NG\" && !permLga) {\n permLgaError = \"This field is required\";\n isValidated = false;\n }\n\n if (!placeOfBirth) {\n placeOfBirthError = \"This field is required\";\n isValidated = false;\n }\n\n if (!permanentAddressLocation) {\n permanentAddressLocationError = \"This field is required\";\n isValidated = false;\n }\n\n if (!dateOfBirth) {\n dateOfBirthError = \"This field is required\";\n isValidated = false;\n }\n\n if (!permCountry) {\n permCountryError = \"This field is required\";\n isValidated = false;\n }\n\n this.setState({\n surnameError,\n firstnameError,\n nationalityCodeError,\n stateOfOriginError,\n lgaCodeError,\n titleError,\n genderError,\n maritalStatusCodeError,\n permCityError,\n permanentAddressLocationError,\n mobilePhoneError,\n confirmMobilePhoneError,\n ssnError,\n formRefnoError,\n permLgaError,\n permStateError,\n dateOfBirthError,\n placeOfBirthError,\n schemeIdError,\n permCountryError,\n });\n\n return isValidated;\n };\n\n clearAllErrors = () => {\n this.setState({\n surnameError: \"\",\n firstnameError: \"\",\n nationalityCode: \"\",\n titleError: \"\",\n genderError: \"\",\n maritalStatusCodeError: \"\",\n permCityError: \"\",\n permanentAddressLocationError: \"\",\n mobilePhoneError: \"\",\n confirmMobilePhoneError: \"\",\n ssnError: \"\",\n schemeId: \"\",\n });\n };\n\n render() {\n const {\n formRefno,\n setPersonalDetailField,\n title,\n firstname,\n middleName,\n othernames,\n surname,\n maidenName,\n ssn,\n bvn,\n gender,\n dateOfBirth,\n maritalStatusCode,\n nationalityCode,\n permanentAddressLocation,\n permState,\n permLga,\n mobilePhone,\n permCity,\n placeOfBirth,\n countries,\n // schemeId,\n permCountry,\n stateOfOrigin,\n lgaCode,\n confirmMobilePhone,\n } = this.props;\n\n const {\n allStates,\n allLGA,\n surnameError,\n firstnameError,\n nationalityCodeError,\n titleError,\n genderError,\n maritalStatusCodeError,\n permCityError,\n mobilePhoneError,\n\n confirmMobilePhoneError,\n ssnError,\n formRefnoError,\n permStateError,\n permLgaError,\n placeOfBirthError,\n permanentAddressLocationError,\n dateOfBirthError,\n // schemeIdError,\n permCountryError,\n stateOfOriginError,\n lgaCodeError,\n allStates2,\n allLGA2,\n } = this.state;\n\n return (\n\n {\n setPersonalDetailField({ formRefno: e.target.value });\n }}\n />\n {/* {\n setPersonalDetailField({ schemeId: e.target.value });\n }}\n /> */}\n {\n setPersonalDetailField({ surname: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ firstname: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ middleName: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ othernames: e.target.value });\n }}\n />\n \n \n {countries.map((item) => (\n \n ))}\n \n {nationalityCodeError && (\n {nationalityCodeError} \n )}\n \n \n {allStates2.map((item) => (\n \n ))}\n \n {!!stateOfOriginError && (\n {stateOfOriginError} \n )}\n \n \n {allLGA2.map((item) => (\n \n ))}\n \n {!!lgaCodeError && {lgaCodeError} }\n \n \n \n \n \n \n \n {titleError && {titleError} }\n \n \n \n \n \n {genderError && {genderError} }\n \n \n \n \n \n \n \n \n {maritalStatusCodeError && (\n {maritalStatusCodeError} \n )}\n {\n setPersonalDetailField({ dateOfBirth: e });\n }}\n containerStyles={{ width: \"100%\" }}\n />\n {\n setPersonalDetailField({ placeOfBirth: e.target.value });\n }}\n />\n \n \n {countries.map((item) => (\n \n ))}\n \n {\n setPersonalDetailField({ permCity: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ maidenName: e.target.value });\n }}\n />\n \n \n \n \n \n {!!permanentAddressLocationError && (\n {permanentAddressLocationError} \n )}\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!permStateError && (\n {permStateError} \n )}\n \n \n {allLGA.map((item) => (\n \n ))}\n \n {!!permLgaError && {permLgaError} }\n {\n setPersonalDetailField({ mobilePhone: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ confirmMobilePhone: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ ssn: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ bvn: e.target.value });\n }}\n />\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.rsaPinRegistration.personalDetail,\n countries: state.onboarding.countries,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setPersonalDetailField: rsaAction.setPersonalDetailField,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(PersonalDetails);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\n// import { Input, FormFeedback } from \"reactstrap\";\n\nimport api from \"../../config/api\";\nimport historyAction from \"../../redux/history/action\";\nimport rsaAction from \"../../redux/rsaPinRegistration/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\n\nclass Residence extends Component {\n state = {\n allStates: [],\n allLGA: [],\n };\n\n componentDidMount() {\n const { customRef } = this.props;\n\n this.fetchState(null, true);\n\n customRef({ validate: this.validate });\n }\n\n fetchState = async (residenceCountryCode, dontClear) => {\n try {\n const { user, setResidenceField, residenceStateCode } = this.props;\n\n if (!dontClear) {\n setResidenceField({ residenceStateCode: \"\", residenceLGACode: \"\" });\n }\n\n if (residenceStateCode) {\n this.fetchLGA(null, true);\n }\n\n this.setState({ allStates: [], allLGA: [] });\n\n if (!residenceCountryCode) {\n residenceCountryCode = this.props.residenceCountryCode;\n }\n\n const state = await api.fetchState(\n { countryCode: residenceCountryCode },\n user.token\n );\n\n this.setState({ allStates: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (residenceStateCode, dontClear) => {\n try {\n const { user, setResidenceField } = this.props;\n\n if (!dontClear) {\n setResidenceField({ residenceLGACode: \"\" });\n }\n\n this.setState({ allLGA: [] });\n\n if (!residenceStateCode) {\n residenceStateCode = this.props.residenceStateCode;\n }\n\n const LGA = await api.fetchLGA(\n { stateCode: residenceStateCode },\n user.token\n );\n\n this.setState({ allLGA: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n onSelectChange = (e) => {\n const { setResidenceField } = this.props;\n\n setResidenceField({ [e.target.name]: e.target.value });\n\n if (e.target.name === \"residenceCountryCode\") {\n this.fetchState(e.target.value);\n }\n\n if (e.target.name === \"residenceStateCode\") {\n this.fetchLGA(e.target.value);\n }\n };\n\n validate = () => {\n const { email, permZip, confirmEmail } = this.props;\n\n let isValidated = true,\n confirmEmailError = \"\",\n permBoxError = \"\",\n permZipError = \"\";\n // residenceHouseNoError = \"\";\n // residenceStateCodeError = \"\",\n // residenceLGACodeError = \"\";\n\n // if (!residenceStateCode) {\n // residenceStateCodeError = \"This field is required\";\n // isValidated = false;\n // }\n // if (!residenceLGACode) {\n // residenceLGACodeError = \"This field is required\";\n // isValidated = false;\n // }\n // if (!permBox) {\n // permBoxError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (email) {\n if (confirmEmail !== email) {\n confirmEmailError = \"Email and Confirm Email must be same\";\n isValidated = false;\n }\n }\n // if (!residenceHouseNo) {\n // residenceHouseNoError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (!permZip) {\n permZipError = \"This field is required\";\n isValidated = false;\n }\n this.setState({\n // residenceStateCodeError,\n // residenceLGACodeError,\n permBoxError,\n\n confirmEmailError,\n // residenceHouseNoError,\n permZipError,\n });\n\n return isValidated;\n };\n\n render() {\n const {\n // residenceCountryCode,\n setResidenceField,\n // residenceHouseNo,\n // residenceLGACode,\n // residenceStateCode,\n // residenceStreetName,\n // residenceTownCity,\n permZip,\n email,\n permanentAddress,\n permanentAddress1,\n permBox,\n confirmEmail,\n // countries\n } = this.props;\n\n const {\n emailError,\n confirmEmailError,\n permBoxError,\n // residenceHouseNoError,\n permZipError,\n // allStates,\n // allLGA,\n // residenceStateCodeError,\n // residenceLGACodeError\n } = this.state;\n\n return (\n \n {\n setResidenceField({ permanentAddress: e.target.value });\n }}\n />\n {/* {\n setResidenceField({ residenceHouseNo: e.target.value });\n }}\n /> */}\n {\n setResidenceField({ permanentAddress1: e.target.value });\n }}\n />\n {/* {\n setResidenceField({ residenceStreetName: e.target.value });\n }}\n />\n {\n setResidenceField({ residenceTownCity: e.target.value });\n }}\n />\n \n \n {countries.map(item => (\n \n ))}\n \n \n \n {allStates.map(item => (\n \n ))}\n \n {!!residenceStateCodeError && (\n {residenceStateCodeError} \n )}\n \n \n {allLGA.map(item => (\n \n ))}\n \n {!!residenceLGACodeError && (\n {residenceLGACodeError} \n )} */}\n {/* {\n setResidenceField({ residenceLGACode: e.target.value });\n }}\n /> */}\n {/* {\n setResidenceField({ residenceStateCode: e.target.value });\n }}\n /> */}\n {/* {\n setResidenceField({ residenceCountryCode: e.target.value });\n }}\n /> */}\n {\n setResidenceField({ permZip: e.target.value });\n }}\n />\n {\n setResidenceField({ email: e.target.value });\n }}\n />\n {\n setResidenceField({ confirmEmail: e.target.value });\n }}\n />\n {\n setResidenceField({ permBox: e.target.value });\n }}\n />\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.rsaPinRegistration.residence,\n countries: state.onboarding.countries,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setResidenceField: rsaAction.setResidenceField,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Residence);\n","import React, { Component } from \"react\";\nimport { ListGroup, ListGroupItem, Input } from \"reactstrap\";\n\nimport \"./style.css\";\n\nexport default class SelectPagination extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n current: this.props.perPage || 50,\n searchTerm: \"\",\n filteredOptions: [],\n };\n }\n\n componentDidMount() {\n const { onToggle } = this.props;\n document.addEventListener(\"click\", (e) => {\n const name = e.target.getAttribute(\"data-name\");\n\n if (name !== \"select-pagination\" && name !== \"search\") {\n onToggle(false);\n }\n });\n }\n\n handleScroll = (e) => {\n const { current } = this.state;\n\n const bottom =\n Math.round(e.target.scrollHeight - e.target.scrollTop) ===\n e.target.clientHeight;\n\n if (bottom) {\n this.setState({ current: current + 20 });\n }\n };\n\n filterOptions = (e) => {\n const value = e.target.value.toLowerCase();\n const { allOptions, lookFor } = this.props;\n\n const filteredOptions = allOptions.filter((item) => {\n const lookupString = item[lookFor] ?? \"\";\n\n return lookupString.toLowerCase().startsWith(value);\n });\n\n this.setState({ filteredOptions, searchTerm: e.target.value });\n };\n\n renderList = () => {\n const { filteredOptions = [], searchTerm } = this.state;\n let { allOptions, lookFor, onSelect } = this.props;\n const { current } = this.state;\n const newList = [];\n\n if (searchTerm) {\n allOptions = filteredOptions;\n }\n\n try {\n if (!allOptions) return;\n\n for (var i = 0; i <= current; i++) {\n if (!allOptions[i]) break;\n\n newList.push(allOptions[i]);\n }\n\n return newList.map((item) => (\n \n {value ? (\n \n {placeholder}\n \n )}\n
\n {value}
\n ) : (\n\n
\n \n {isOpen && (\n \n
\n {this.renderList()}
\n \n )}\n {!!errorMessage && (\n \n This field is required\n
\n )}\n\n \n \n {sector.map((item) => (\n \n ))}\n \n\n {!!employerTypeError && (\n {employerTypeError} \n )}\n \n this.setState({ isEmployerDropdown })\n }\n allOptions={allEmployers}\n lookFor=\"EmployerName\"\n value={employerCode}\n key=\"EmployerCode\"\n onSelect={(item) => {\n setEmployerField({\n employerCode: item.EmployerName,\n employerRawCode: item.EmployerCode,\n });\n\n this.setState({ isEmployerDropdown: false });\n }}\n />\n {/* {\n setEmployerField({ employerType: e.target.value });\n }}\n /> */}\n {/* {\n setEmployerField({ employerCode: e.target.value });\n }}\n /> */}\n {/* {\n setEmployerField({ employerBuildingNameOrNumber: e.target.value });\n }}\n /> */}\n {/* {\n setEmployerField({ employerStreetName: e.target.value });\n }}\n errorMessage={employerStreetNameError}\n /> */}\n {\n setEmployerField({ employerCity: e.target.value });\n }}\n />\n \n \n {countries.map((item) => (\n \n ))}\n \n \n \n \n \n \n {!!employerLocationError && (\n {employerLocationError} \n )}\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!employerStatecodeError && (\n {employerStatecodeError} \n )}\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!stateOfPostingError && (\n {stateOfPostingError} \n )}\n \n \n {allLGA.map((item) => (\n \n ))}\n \n {!!employerLgaError && (\n {employerLgaError} \n )}\n {\n setEmployerField({ employerPhone: e.target.value });\n }}\n />\n {\n setEmployerField({ confirmEmployerPhone: e.target.value });\n }}\n />\n {\n setEmployerField({ employerBox: e.target.value });\n }}\n />\n {\n setEmployerField({ employerBusiness: e.target.value });\n }}\n />\n {\n setEmployerField({ employerAddress1: e.target.value });\n }}\n />\n {\n setEmployerField({ employerAddress: e.target.value });\n }}\n />\n {/* {\n setEmployerField({ employerNigeriaOrAbroad: e.target.value });\n }}\n >\n \n \n \n */}\n {/* {!!employerNigeriaOrAbroadError && (\n {employerNigeriaOrAbroadError} \n )} */}\n {\n setEmployerField({ employerZip: e.target.value });\n }}\n />\n {\n setEmployerField({ dateOfFirstApointment: e });\n }}\n isError={dateOfFirstApointmentError ? true : false}\n errorMessage={dateOfFirstApointmentError}\n containerStyles={{ width: \"100%\" }}\n />\n {/* {\n setEmployerField({ dateOfCurrentEmployment: e.target.value });\n }}\n /> */}\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.rsaPinRegistration.employer,\n countries: state.onboarding.countries,\n allEmployers: state.auth.allEmployers,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setEmployerField: rsaAction.setEmployerField,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Employer);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Input, FormFeedback } from \"reactstrap\";\n\nimport api from \"../../config/api\";\nimport historyAction from \"../../redux/history/action\";\nimport rsaAction from \"../../redux/rsaPinRegistration/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\n\nclass Employer extends Component {\n state = {\n allStates: [],\n allLGA: [],\n };\n\n componentDidMount() {\n const { customRef } = this.props;\n\n this.fetchState(null, true);\n\n customRef({ validate: this.validate });\n }\n\n onSelectChange = (e) => {\n const { setNextOfKinField } = this.props;\n\n setNextOfKinField({ [e.target.name]: e.target.value });\n\n if (e.target.name === \"nokStatecode\") {\n this.fetchLGA(e.target.value);\n }\n };\n\n fetchState = async (nokCountry, dontClear) => {\n try {\n const { user, setNextOfKinField, nokStatecode } = this.props;\n\n if (!dontClear) {\n setNextOfKinField({\n nokStatecode: \"\",\n nokLga: \"\",\n });\n }\n\n this.setState({ allStates: [], allLGA: [] });\n\n if (!nokCountry) {\n nokCountry = this.props.nokCountry;\n }\n\n if (nokCountry === \"N\") {\n nokCountry = \"NG\";\n }\n\n if (nokStatecode) {\n this.fetchLGA(null, true);\n }\n\n const state = await api.fetchState(\n { countryCode: nokCountry },\n user.token\n );\n\n this.setState({ allStates: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (nokStatecode, dontClear) => {\n try {\n const { user, setNextOfKinField } = this.props;\n\n if (!dontClear) {\n setNextOfKinField({ nokLga: \"\" });\n }\n\n this.setState({ allLGA: [] });\n\n if (!nokStatecode) {\n nokStatecode = this.props.nokStatecode;\n }\n\n const LGA = await api.fetchLGA({ stateCode: nokStatecode }, user.token);\n\n this.setState({ allLGA: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n validate = () => {\n const {\n nokMobilePhone = \"\",\n nokResidenceHouseNumber,\n nokTitle,\n // nokResidenceStreetName,\n nokName,\n nokSurname,\n nokGender,\n nokRelationship,\n nokStatecode,\n nokLga,\n nokLocation,\n nokCountry,\n nokEmailaddress = \"\",\n nokConfirmEmailaddress = \"\",\n nokConfirmMobilePhone = \"\",\n // nokOthername\n nokCity\n } = this.props;\n\n let isValidated = true,\n nokMobilePhoneError,\n nokConfirmMobilePhoneError,\n nokResidenceHouseNumberError,\n // nokResidenceStreetNameError,\n nokTitleError,\n nokNameError,\n nokSurnameError,\n nokGenderError,\n nokRelationshipError,\n nokStatecodeError,\n nokLgaError,\n nokLocationError,\n nokCountryError,\n nokEmailaddressError,\n nokConfirmEmailaddressError,\n nokOthernameError,\n nokCityError;\n\n if (nokMobilePhone.length !== 11) {\n nokMobilePhoneError = \"Phone number should be 11 digits\";\n isValidated = false;\n }\n\n if (nokConfirmMobilePhone !== nokMobilePhone) {\n nokConfirmMobilePhoneError =\n \"Confrim Phone number and Phone must be same\";\n isValidated = false;\n }\n if (!nokCountry) {\n nokCountryError = \"This field is required\";\n isValidated = false;\n }\n\n if (!nokResidenceHouseNumber) {\n nokResidenceHouseNumberError = \"This field is required\";\n isValidated = false;\n }\n // if (nokLocation === \"N\" && !nokCity) {\n // nokCityError = \"This field is required\";\n // isValidated = false;\n // }\n // if (!nokResidenceStreetName) {\n // nokResidenceStreetNameError = \"This field is required\";\n // isValidated = false;\n // }\n if (!nokTitle) {\n nokTitleError = \"This field is required\";\n isValidated = false;\n }\n if (nokConfirmEmailaddress !== nokEmailaddress) {\n nokConfirmEmailaddressError =\n \"Confrim Email Address and Email Address must be same\";\n isValidated = false;\n }\n if (!nokName) {\n nokNameError = \"This field is required\";\n isValidated = false;\n }\n if (!nokSurname) {\n nokSurnameError = \"This field is required\";\n isValidated = false;\n }\n if (!nokGender) {\n nokGenderError = \"This field is required\";\n isValidated = false;\n }\n\n if (!nokRelationship) {\n nokRelationshipError = \"This field is required\";\n isValidated = false;\n }\n\n if (nokLocation === \"N\" && !nokStatecode) {\n nokStatecodeError = \"This field is required\";\n isValidated = false;\n }\n\n if (nokLocation === \"N\" && !nokLga) {\n nokLgaError = \"This field is required\";\n isValidated = false;\n }\n\n if (!nokLocation) {\n nokLocationError = \"This field is required\";\n isValidated = false;\n }\n\n if (!nokCity) {\n nokCityError = \"This field is required\";\n isValidated = false;\n }\n // if (!nokEmailaddress) {\n // nokEmailaddressError = \"This field is required\";\n // isValidated = false;\n // }\n\n // if (!nokOthername) {\n // nokOthernameError = \"This field is required\";\n // isValidated = false;\n // }\n\n this.setState({\n nokMobilePhoneError,\n nokConfirmMobilePhoneError,\n nokResidenceHouseNumberError,\n // nokResidenceStreetNameError,\n nokTitleError,\n nokNameError,\n nokSurnameError,\n nokGenderError,\n nokRelationshipError,\n nokStatecodeError,\n nokLgaError,\n nokLocationError,\n nokCountryError,\n nokEmailaddressError,\n nokConfirmEmailaddressError,\n nokOthernameError,\n nokCityError\n });\n\n return isValidated;\n };\n\n render() {\n const {\n nokEmailaddress,\n setNextOfKinField,\n nokName,\n nokGender,\n nokOthername,\n nokLocation,\n nokMobilePhone,\n nokBox,\n nokRelationship,\n nokCountry,\n nokAddress,\n nokAddress1,\n nokLga,\n nokStatecode,\n // nokResidenceStreetName,\n nokCity,\n nokSurname,\n nokTitle,\n nokZip,\n countries,\n // nokOthername,\n allRelationShips,\n nokResidenceHouseNumber,\n nokConfirmEmailaddress,\n nokConfirmMobilePhone,\n } = this.props;\n\n const {\n allLGA,\n allStates,\n nokMobilePhoneError,\n nokConfirmMobilePhoneError,\n nokResidenceHouseNumberError,\n // nokResidenceStreetNameError,\n nokTitleError,\n nokNameError,\n nokSurnameError,\n nokGenderError,\n nokRelationshipError,\n nokLgaError,\n nokStatecodeError,\n nokLocationError,\n nokCountryError,\n nokOthernameError,\n nokEmailaddressError,\n nokConfirmEmailaddressError,\n nokCityError\n } = this.state;\n\n return (\n \n \n \n \n \n \n \n \n {!!nokTitleError && (\n {nokTitleError} \n )}\n {\n setNextOfKinField({ nokName: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokOthername: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokSurname: e.target.value });\n }}\n />\n\n {/* {\n setNextOfKinField({ nokOthername: e.target.value });\n }}\n /> */}\n\n \n \n \n \n \n {!!nokGenderError && (\n {nokTitleError} \n )}\n\n \n \n {countries.map((item) => (\n \n ))}\n \n {!!nokCountryError && (\n {nokCountryError} \n )}\n {\n setNextOfKinField({ nokMobilePhone: e.target.value });\n }}\n errorMessage={nokMobilePhoneError}\n />\n {\n setNextOfKinField({ nokConfirmMobilePhone: e.target.value });\n }}\n errorMessage={nokConfirmMobilePhoneError}\n />\n \n \n {allRelationShips.map((item) => (\n \n ))}\n \n\n {/* {\n setNextOfKinField({ nokRelationship: e.target.value });\n }}\n /> */}\n {\n setNextOfKinField({ nokEmailaddress: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokConfirmEmailaddress: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokLocation: e.target.value });\n this.fetchState(e.target.value);\n }}\n >\n \n \n \n \n {!!nokLocationError && (\n {nokLocationError} \n )}\n {\n setNextOfKinField({ nokAddress1: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokAddress: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokResidenceHouseNumber: e.target.value });\n }}\n errorMessage={nokResidenceHouseNumberError}\n />\n {/* {\n setNextOfKinField({ nokResidenceStreetName: e.target.value });\n }}\n errorMessage={nokResidenceStreetNameError}\n /> */}\n {\n setNextOfKinField({ nokCity: e.target.value });\n }}\n errorMessage={nokCityError}\n />\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!nokStatecodeError && (\n {nokStatecodeError} \n )}\n \n \n {allLGA.map((item) => (\n \n ))}\n \n {!!nokLgaError && {nokLgaError} }\n {\n setNextOfKinField({ nokBox: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokZip: e.target.value });\n }}\n />\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.rsaPinRegistration.nextOfKin,\n countries: state.onboarding.countries,\n allRelationShips: state.auth.relationShips,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setNextOfKinField: rsaAction.setNextOfKinField,\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(Employer);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Row, Col } from \"reactstrap\";\nimport Ink from \"react-ink\";\n\nimport {\n imageToDataURL,\n isNetworkRequestFailedError,\n} from \"../../config/helpers\";\nimport historyAction from \"../../redux/history/action\";\nimport authAction from \"../../redux/auth/action\";\nimport rsaAction from \"../../redux/rsaPinRegistration/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\n\nclass Signature extends Component {\n state = {\n signatureImageError: \"\",\n };\n\n componentDidMount() {\n const { customRef } = this.props;\n\n customRef({ validate: this.validate });\n }\n\n validate = () => {\n const { signatureImage } = this.props;\n\n let isValidated = true,\n signatureImageError;\n\n if (!signatureImage) {\n signatureImageError = \"signature Image is required\";\n isValidated = false;\n }\n\n this.setState({\n signatureImageError,\n });\n\n return isValidated;\n };\n\n handleOnChange = async (e) => {\n const { setSignatureField, setAlertMessage } = this.props;\n\n try {\n if (e.target.files[0]) {\n const response = await imageToDataURL(e.target.files[0]);\n setSignatureField(response);\n }\n } catch (error) {\n setAlertMessage({\n type: \"error\",\n message: error.message,\n onTryAgain: isNetworkRequestFailedError(error)\n ? () => this.handleOnChange(e)\n : null,\n });\n }\n };\n\n render() {\n const { signatureImage } = this.props;\n const { signatureImageError } = this.state;\n\n return (\n \n \n
\n {!!signatureImage && (\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n signatureImage: state.rsaPinRegistration.signatureImage,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setSignatureField: rsaAction.setSignatureField,\n setAlertMessage: authAction.setAlertMessage,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Signature);\n","import React, { useState } from \"react\";\nimport {\n Modal,\n ModalHeader,\n ModalBody,\n ModalFooter,\n CustomInput\n} from \"reactstrap\";\nimport CustomButton from \"../CustomButton/CustomButton\";\n\nimport \"./index.css\";\n\nfunction ConsentFormModal(props) {\n const [checked, setChecked] = useState(false);\n\n function handleOnHide() {\n props.onClose();\n }\n\n function handleOnSubmit() {\n props.onSubmit();\n props.onClose();\n }\n\n return (\n \n 
\n
\n )}\n \n
\n Consent Form
\n\n
\n \n {props.name.firstName} {props.name.middleName} {props.name.lastName}\n
\n\n I hereby certify that the information provided in this form is correct\n
\n
I further consent and authorize the National Identity Management\n Commision to release my NIN information (as may be required) to the\n National Pension Commision (PenCom), upon request by my Pension Fund\n Administrator, for the maintenance and operation of my Retirement\n Savings Account.\n
\n
It is my understanding that PenCom shall exercise due care to\n ensure that my information is secure and protected.\n
\n \n
\n {!!pictureImage && (\n this.setState({ isModal: false })}\n isOpen={isModal}\n />\n {this.state.submit && (\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n personalDetail: state.rsaPinRegistration.personalDetail,\n pictureImage: state.rsaPinRegistration.pictureImage,\n residence: state.rsaPinRegistration.residence,\n employer: state.rsaPinRegistration.employer,\n nextOfKin: state.rsaPinRegistration.nextOfKin,\n signatureImage: state.rsaPinRegistration.signatureImage,\n formImage: state.rsaPinRegistration.formImage,\n bankDetails: state.rsaPinRegistration.bankDetails,\n validateUser: state.onboarding.user,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setPictureField: rsaAction.setPictureField,\n setAlertMessage: authAction.setAlertMessage,\n setConsentFormField: rsaAction.setConsentFormField,\n resetRSAForm: rsaAction.resetRSAForm,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Picture);\n","const setPersonalDetailField = payload => ({\n type: \"SET_PERSONAL_DETAIL_FIELD\",\n payload\n});\n\nconst setResidenceField = payload => ({\n type: \"SET_RESIDENCE_FIELD\",\n payload\n});\n\nconst setEmployerField = payload => ({\n type: \"SET_EMPLOYER_FIELD\",\n payload\n});\n\nconst setNextOfKinField = payload => ({\n type: \"SET_NEXTOFKIN_FIELD\",\n payload\n});\n\nconst setBankDetailsField = payload => ({\n type: \"SET_BANK_DETAILS_FIELD\",\n payload\n});\n\nconst setPictureField = payload => ({\n type: \"SET_PICTURE_FIELD\",\n payload\n});\n\nconst setSignatureField = payload => ({\n type: \"SET_SIGNATURE_FIELD\",\n payload\n});\n\nconst setConsentFormField = payload => ({\n type: \"SET_CONSENT_FORM_FIELD\",\n payload\n});\n\nconst getUser = payload => ({\n type: \"GET_USER\",\n payload\n});\n\nconst saveCountries = payload => ({\n type: \"SAVE_COUNTRIES\",\n payload\n});\n\nconst resetOnboardingForm = () => ({\n type: \"RESET_ONBOARDING_FORM\"\n});\n\nexport default {\n setPersonalDetailField,\n setResidenceField,\n setEmployerField,\n setNextOfKinField,\n setBankDetailsField,\n setPictureField,\n setSignatureField,\n setConsentFormField,\n getUser,\n saveCountries,\n resetOnboardingForm\n};\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Container, Row, Col } from \"reactstrap\";\nimport Ink from \"react-ink\";\n\nimport api from \"../../config/api\";\nimport \"./style.css\";\nimport StepTab from \"./StepTab\";\nimport BankDetails from \"./BankDetails\";\nimport PersonalDetail from \"./PersonalDetail\";\nimport Residence from \"./Residence\";\nimport Employer from \"./Employer\";\nimport NextOfKin from \"./NextOfKin\";\nimport Signature from \"./Signature\";\nimport Picture from \"./Picture\";\n// import ConsentForm from \"./ConsentForm\";\nimport historyAction from \"../../redux/history/action\";\nimport onboardingAction from \"../../redux/onboarding/action\";\nimport rsaAction from \"../../redux/rsaPinRegistration/action\";\nimport PageHead from \"../../component/pageHead/PageHead\";\nimport CustomLoader from \"../../component/CustomLoader/CustomLoader\";\nimport nextBlueIcon from \"../../assets/icons/Conti_blue.png\";\nimport prevBlueIcon from \"../../assets/icons/back_blue.png\";\nimport authAction from \"../../redux/auth/action\";\n\nclass Onboarding extends Component {\n state = {\n step: 1,\n isLoading: false\n };\n\n componentDidMount() {\n const { history, setHistory } = this.props;\n\n this.validate();\n this.fetchCountries();\n\n setHistory(history);\n }\n\n fetchCountries = async () => {\n try {\n const { saveCountries } = this.props;\n const response = await api.fetchCountries();\n\n saveCountries(response.data.result);\n } catch (e) {\n console.log(\"Error\", e.message);\n }\n };\n\n validate = async () => {\n const { validateUser, user, getUser } = this.props;\n\n if (!validateUser.userName) {\n this.setState({ isLoading: true });\n\n try {\n const response = await api.getUsernameAndPassword(\n { userName: user.User.userName },\n user.token\n );\n const data = {\n userName: response.data.result.UserName,\n password: response.data.result.Password\n };\n getUser(data);\n } catch (e) {\n console.log(\"Error\", e.message);\n }\n this.setState({ isLoading: false });\n }\n };\n\n scrollToTop = () => {\n const target = document.querySelector(\".card-container .flex1\");\n var maxScroll = target.scrollHeight;\n\n var scrollInt = setInterval(() => {\n if (target.scrollTop !== 0) {\n target.scrollTop -= maxScroll / 100;\n } else {\n clearInterval(scrollInt);\n }\n }, 10);\n };\n\n decideTab = () => {\n const { step } = this.state;\n\n switch (step) {\n case 1:\n return \n 
\n
\n )}\n \n \n {this.props.pictureImage && !this.props.formImage && (\n {\n this.setState({ isModal: true });\n }}\n />\n \n )}\n {\n this.upload();\n }}\n />\n \n
\n
\n {isLoading && \n {step !== 1 && (\n \n 
\n
\n )}\n {step !== 7 && (\n Back
\nContinue
\n\n *Please make sure that your browser allow popup windows\n
\n\n *The payment is subject to terms and condition for card payments\n
\n\");\n\n setTermsAndCondition(data);\n } catch (e) {\n setAlertMessage({\n type: \"error\",\n message: e.message,\n onTryAgain: isNetworkRequestFailedError(e) ? this.fetchTerms : null,\n });\n }\n };\n\n toggle = () => {\n this.setState((prevState) => ({\n modal: !prevState.modal,\n }));\n };\n\n handleTextChange = (e) => {\n const { setReferralInput } = this.props;\n\n if (e.target.name === \"stateOfOrigin\") {\n this.getLGA(e.target.value);\n }\n\n setReferralInput({ [e.target.name]: e.target.value });\n };\n\n createReferral = async () => {\n const { setAlertMessage, user } = this.props;\n const {\n accountName,\n accountNumber,\n bankName,\n firstName,\n surname,\n otherNames,\n phone,\n dateOfBirth,\n email,\n lgaCode,\n stateOfOrigin,\n nin,\n } = this.props;\n\n try {\n const isValid = this.validate();\n\n if (!isValid) throw new Error(\"Please Fill all mandatory fields\");\n\n this.setState({ isLoading: true });\n\n const payload = {\n BankDetails: {\n id: 0,\n accountName,\n accountNumber,\n bankName,\n refereeUsername: user.User.Username,\n },\n Referral: {\n firstName,\n surname,\n otherNames,\n email,\n phone,\n nin,\n dateOfBirth,\n stateOfOrigin,\n lgaCode,\n },\n };\n\n await api.createReferral(payload, user.token);\n this.clearData();\n setAlertMessage({ type: \"success\", message: \"successful\" });\n } catch (e) {\n setAlertMessage({\n type: \"error\",\n message: e.message,\n onTryAgain: isNetworkRequestFailedError(e) ? this.createReferral : null,\n });\n }\n\n this.setState({ isLoading: false });\n };\n\n clearData = () => {\n const { setReferralInput } = this.props;\n const payload = {\n firstName: \"\",\n surname: \"\",\n otherNames: \"\",\n email: \"\",\n phone: \"\",\n nin: \"\",\n dateOfBirth: \"\",\n stateOfOrigin: \"\",\n lgaCode: \"\",\n };\n\n setReferralInput(payload);\n };\n\n validate = () => {\n const {\n bankName,\n accountNumber,\n accountName,\n firstName,\n surname,\n phone,\n email,\n stateOfOrigin,\n lgaCode,\n } = this.props;\n\n let isValidated = true,\n bankNameError,\n accountNumberError,\n accountNameError,\n firstNameError,\n surnameError,\n phoneError,\n stateOfOriginError,\n lgaCodeError;\n\n if (!bankName) {\n bankNameError = \"This field is required\";\n isValidated = false;\n }\n if (!accountName) {\n accountNameError = \"This field is required\";\n isValidated = false;\n }\n if (!accountNumber) {\n accountNumberError = \"This field is required\";\n isValidated = false;\n }\n if (!firstName) {\n firstNameError = \"This field is required\";\n isValidated = false;\n }\n if (!surname) {\n surnameError = \"This field is required\";\n isValidated = false;\n }\n\n if (!phone) {\n phoneError = \"This field is required\";\n isValidated = false;\n }\n\n if (!email) {\n if (!stateOfOrigin) {\n stateOfOriginError = \"This field is required, if email is not provided\";\n isValidated = false;\n }\n if (!lgaCode) {\n lgaCodeError = \"This field is required, if email is not provided\";\n isValidated = false;\n }\n }\n\n this.setState({\n bankNameError,\n accountNumberError,\n accountNameError,\n firstNameError,\n surnameError,\n phoneError,\n stateOfOriginError,\n lgaCodeError,\n });\n\n return isValidated;\n };\n\n render() {\n const { isLoading } = this.state;\n const {\n terms,\n bankName,\n accountNumber,\n accountName,\n firstName,\n surname,\n otherNames,\n phone,\n email,\n nin,\n dateOfBirth,\n stateOfOrigin,\n lgaCode,\n allBanks = [],\n } = this.props;\n\n const {\n bankNameError,\n accountNameError,\n accountNumberError,\n firstNameError,\n surnameError,\n phoneError,\n lgaCodeError,\n allStates,\n stateOfOriginError,\n allLGA,\n } = this.state;\n\n return (\n
\n \n \n \n \n \n
\n \n \n Terms & Conditions\n \n \n {terms && }\n \n \n {isLoading &&
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.referral.newReferral,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setTermsAndCondition: referralAction.setTermsAndCondition,\n setReferralInput: referralAction.setReferralInput,\n setAlertMessage: authAction.setAlertMessage,\n setAllBanks: referralAction.setAllBanks,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(NewReferral);\n\nconst ReferralInput = (props) => {\n const containerClasses = props.containerClasses || \"\";\n\n return (\n \n \n \n \n \n \n \n
\n {isLoading &&
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n ...state.referral.myReferrals,\n user: state.auth.user,\n});\n\nconst mapDispatchToProps = {\n setMyReferralsInput: referralActions.setMyReferralsInput,\n setAlertMessage: authActions.setAlertMessage,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(MyReferrals);\n\nfunction CalenderIcon() {\n return (\n Time Period
\n\n {this.state.showCalender && (\n
\n \n \n This Year\n \n Last Year\n \n Last Quarter\n
\n | First Name | \nSur Name | \nOther Names | \nPhone Number | \nNIN | \nDate Of Birth | \nState Of Origin | \nLGA Of Origin | \n \n \n {result.map((item) => (\n|
|---|---|---|---|---|---|---|---|---|
| {item.firstName} | \n{item.surname} | \n{item.otherNames} | \n{item.phone} | \n{item.email} | \n{item.nin} | \n{item.dateofbirth} | \n{item.stateOfOrigin} | \n{item.LGA} | \n
\n
\n \n \n {\n this.setState({ currentTab: \"new\" });\n }}\n active={currentTab === \"new\"}\n />\n \n {\n this.setState({ currentTab: \"my\" });\n }}\n active={currentTab === \"my\"}\n />\n \n
\n
\n {currentTab === \"new\" ? \n \n \n \n \n \n \n \n \n \n \n \n {isLoading &&
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.rewardSystem.redemption,\n});\n\nconst mapDispatchToProps = {\n setRedemptionData: rewardSystemActions.setRedemptionData,\n setRedemptionGraphData: rewardSystemActions.setRedemptionGraphData,\n setAlertMessage: authActions.setAlertMessage,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Redemption);\n","import React, { Component } from \"react\";\nimport DatePicker from \"react-date-picker\";\nimport moment from \"moment\";\nimport { ListGroup, ListGroupItem, Table } from \"reactstrap\";\nimport { connect } from \"react-redux\";\nimport Ink from \"react-ink\";\n\nimport api from \"../../config/api\";\nimport authActions from \"../../redux/auth/action\";\nimport rewardSystemActions from \"../../redux/rewardSystem/action\";\nimport editIcon from \"../../assets/icons/edit.png\";\nimport PageHead from \"../../component/pageHead/PageHead\";\nimport CustomLoader from \"../../component/CustomLoader/CustomLoader\";\nimport { isNetworkRequestFailedError } from \"../../config/helpers\";\n\nclass History extends Component {\n state = {\n showCalender: true,\n isLoading: false,\n };\n\n componentWillReceiveProps = (nextProps) => {\n const { from, to, reportType } = this.props;\n const {\n from: nextFrom,\n to: nextTo,\n reportType: nextReportType,\n } = nextProps;\n\n if (!moment(from).isSame(nextFrom)) {\n this.fetchHistory(nextFrom, nextTo);\n } else if (!moment(to).isSame(nextTo)) {\n this.fetchHistory(nextFrom, nextTo);\n } else if (nextReportType !== reportType) {\n this.fetchHistory(nextFrom, nextTo);\n }\n };\n\n handlePickerChange = (key, value) => {\n let { setRewardSystemHistoryData, to, setAlertMessage } = this.props;\n\n if (key === \"from\" && moment(to).isBefore(value)) {\n this.setState({ showCalender: false }, () => {\n setAlertMessage({\n type: \"error\",\n message: \"From date can not be higher than to\",\n });\n\n this.setState({ showCalender: true });\n });\n return;\n }\n const reduxPayload = {\n [key]: value,\n };\n\n setRewardSystemHistoryData(reduxPayload);\n };\n\n changeTimePeriod = (period) => {\n const { setRewardSystemHistoryData } = this.props;\n let from, to;\n\n if (period === \"this_year\") {\n from = moment().startOf(\"year\").format(\"YYYY-MMMM-DD\");\n to = moment().format(\"YYYY-MMMM-DD\");\n } else if (period === \"last_year\") {\n from = moment()\n .subtract(1, \"year\")\n .startOf(\"year\")\n .format(\"YYYY-MMMM-DD\");\n to = moment().subtract(1, \"year\").endOf(\"year\").format(\"YYYY-MMMM-DD\");\n } else if (period === \"quarter\") {\n from = moment()\n .subtract(1, \"quarter\")\n .startOf(\"quarter\")\n .format(\"YYYY-MMMM-DD\");\n to = moment().format(\"YYYY-MMMM-DD\");\n }\n\n setRewardSystemHistoryData({ from, to });\n };\n\n fetchHistory = async (from, to) => {\n const { user, reportType, setRewardHistoryResult, setAlertMessage } =\n this.props;\n\n try {\n this.setState({ isLoading: true });\n\n const payload = {\n sDate: moment(from).format(\"MMMM-DD-YYYY\"),\n eDate: moment(to).format(\"MMMM-DD-YYYY\"),\n transactionType: reportType,\n referredBy: user.User.UserName,\n };\n\n const response = await api.getReferralReportReward(payload, user.token);\n setRewardHistoryResult(response.data.result);\n } catch (e) {\n setAlertMessage({\n type: \"error\",\n message: e.message,\n onTryAgain: isNetworkRequestFailedError(e)\n ? () => this.fetchHistory(from, to)\n : null,\n });\n }\n\n this.setState({ isLoading: false });\n };\n\n changeReportType = (reportType) => {\n const { setRewardSystemHistoryData } = this.props;\n\n setRewardSystemHistoryData({ reportType });\n };\n\n render() {\n const { from, to, reportType, result, user } = this.props;\n const { isLoading } = this.state;\n\n return (\n \n formatNumbers(label),\n },\n },\n ],\n xAxes: [\n {\n barPercentage: 0.2,\n categoryPercentage: 1,\n gridLines: {\n display: false,\n color: \"rgba(0,0,0,0.4)\",\n lineWidth: 1,\n },\n ticks: {\n fontStyle: \"bold\",\n fontSize: 12,\n fontColor: \"blue\",\n },\n },\n ],\n },\n }}\n />\n
\n \n
\n Total points
\n{dashboard.TotalPointsEarned}
\nAmount
\n{dashboard.TotalAmountEarned || 0}
\nRedeemed
\n{dashboard.TotalAmountRedeemed || 0}
\nBalance
\n{dashboard.TotalNetBalance || 0}
\nTotal points
\n{dashboard.TotalPointsEarned || 0}
\n\n \n \n \n \n \n \n \n \n \n \n
\n {isLoading &&
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n ...state.rewardSystem.rewardHistory,\n user: state.auth.user,\n});\n\nconst mapDispatchToProps = {\n setRewardSystemHistoryData: rewardSystemActions.setRewardSystemHistoryData,\n setRewardHistoryResult: rewardSystemActions.setRewardHistoryResult,\n setAlertMessage: authActions.setAlertMessage,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(History);\n\nfunction CalenderIcon() {\n return (\n Report Type
\n\n \n Referral and Reward\n \n Redemption\n
\n Time Period
\n\n {this.state.showCalender && (\n
\n \n \n This Year\n \n Last Year\n \n Last Quarter\n
\n | Created By | \nCustomer | \nPhone | \nAmount | \nPoint | \nReferral type | \nDate Created | \n \n \n {result.map((item) => (\n
|---|---|---|---|---|---|---|
| {user.User.UserName} | \n{item.referredBy} | \n\n | {item.contributedAmount} | \n{item.currentpointEarned} | \n{item.referralTypeID} | \n{moment(item.tsDate).format(\"YYYY-MMMM-DD\")} | \n
\n
\n \n \n {\n this.setState({ currentTab: \"redemption\" });\n }}\n active={currentTab === \"redemption\"}\n />\n \n {\n this.setState({ currentTab: \"history\" });\n }}\n active={currentTab === \"history\"}\n />\n \n
\n
\n {currentTab === \"redemption\" ? {children}
\n\n {options.map((item) => {\n return (\n handlePress(item)}\n selected={activeTab?.value === item.value}\n key={item.value}\n >\n {item.label}\n \n );\n })}\n
\n );\n};\n\nexport default ButtonTabbar;\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Container } from \"reactstrap\";\nimport { Link } from \"react-router-dom\";\n\nimport CustomLoader from \"../../component/CustomLoader/CustomLoader\";\nimport \"./style.css\";\nimport api from \"../../config/api\";\nimport GradientButton from \"../../component/GradientButton/GradientButton\";\nimport TextInputOutline from \"../../component/TextInputOutline/TextInputOutline\";\nimport historyAction from \"../../redux/history/action\";\nimport authAction from \"../../redux/auth/action\";\nimport ButtonTabbar from \"../../component/ButtonTabbar\";\nimport constants from \"../../config/constants\";\nimport { isNetworkRequestFailedError } from \"../../config/helpers\";\n\nconst OPTIONS = [\n { label: \"Password\", value: \"password\" },\n { label: \"Username\", value: \"username\" },\n];\n\nclass ForgotPassword extends Component {\n state = {\n isLoading: false,\n username: \"\",\n usernameError: \"\",\n pinEmailPhone: \"\",\n pinEmailPhoneError: \"\",\n method: 1,\n selectedTab: OPTIONS[0],\n };\n\n componentDidMount() {\n const { history, setHistory } = this.props;\n setHistory(history);\n }\n\n forgotPassword = async (e) => {\n e.preventDefault();\n const { localHistory, setAlertMessage } = this.props;\n\n try {\n const { method, username } = this.state;\n\n const payload = {\n username,\n smsOrEmail: method,\n };\n\n if (this.validate()) return;\n\n this.setState({ isLoading: true });\n\n let response;\n\n if (this.state.selectedTab?.value === \"password\") {\n response = await api.forgotPassword(payload);\n }\n\n if (this.state.selectedTab?.value === \"username\") {\n response = await api.forgotPasswordUsername({\n pinEmailPhone: this.state.pinEmailPhone,\n });\n }\n\n const { msg } = response.data;\n setAlertMessage({ type: \"success\", message: msg || \"Success\" });\n\n if (this.state.selectedTab?.value === \"password\") {\n localStorage.setItem(\"forgotusername\", username);\n localHistory.push(\"/newpassword\");\n }\n\n if (this.state.selectedTab?.value === \"username\") {\n localHistory.push(\"/login\");\n }\n } catch (error) {\n setAlertMessage({\n type: \"error\",\n message: error.message,\n onTryAgain: isNetworkRequestFailedError(error)\n ? () => this.forgotPassword(e)\n : null,\n });\n }\n\n this.setState({ isLoading: false });\n };\n\n validate = () => {\n const errors = {};\n\n const { username, pinEmailPhone } = this.state;\n\n if (this.state.selectedTab?.value === \"password\") {\n if (!username) {\n errors.usernameError = \"username is required!\";\n }\n }\n\n if (this.state.selectedTab?.value === \"username\") {\n if (!pinEmailPhone.trim().length) {\n errors.pinEmailPhoneError = constants.VALIDATION_ERROR_MESSAGE;\n }\n }\n\n this.setState({ ...errors });\n\n return Object.keys(errors).length;\n };\n\n handleTabChange = (_newTab) => {\n if (_newTab.value === \"password\") {\n this.setState({ pinEmailPhone: \"\", pinEmailPhoneError: \"\" });\n }\n\n if (_newTab.value === \"username\") {\n this.setState({ username: \"\", usernameError: \"\" });\n }\n\n this.setState({ selectedTab: _newTab });\n };\n\n render() {\n const {\n username,\n isLoading,\n method,\n usernameError,\n pinEmailPhone,\n pinEmailPhoneError,\n } = this.state;\n\n return (\n \n \n \n {isLoading &&
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n localHistory: state.history.localHistory,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setAlertMessage: authAction.setAlertMessage,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ForgotPassword);\n\nconst CustomRadio = (props) => (\n \n \n {this.state.selectedTab?.value === \"password\" && (\n \n this.setState({\n username: e.target.value,\n usernameError: \"\",\n })\n }\n value={username}\n label=\"Username\"\n errorMessage={usernameError}\n />\n )}\n {this.state.selectedTab?.value === \"username\" && (\n \n this.setState({\n pinEmailPhone: e.target.value,\n pinEmailPhoneError: \"\",\n })\n }\n value={pinEmailPhone}\n label=\"PIN / Email / Phone\"\n errorMessage={pinEmailPhoneError}\n />\n )}\n\n {this.state.selectedTab?.value === \"password\" && (\n
\n Premium Pension Limited
\n\n
\n \n {this.state.selectedTab?.value === \"password\" &&\n \"Forgot Password?\"}\n {this.state.selectedTab?.value === \"username\" &&\n \"Forgot Username?\"}\n
\n\n this.setState({ method: 1 })}\n />\n this.setState({ method: 2 })}\n />\n
\n )}\n \n \n Already a member? Login\n \n
\n \n \n {props.isSelected ? (\n
\n);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Container } from \"reactstrap\";\nimport { Link } from \"react-router-dom\";\n\nimport CustomLoader from \"../../component/CustomLoader/CustomLoader\";\nimport \"./style.css\";\nimport api from \"../../config/api\";\nimport GradientButton from \"../../component/GradientButton/GradientButton\";\nimport TextInputOutline from \"../../component/TextInputOutline/TextInputOutline\";\nimport historyAction from \"../../redux/history/action\";\nimport authAction from \"../../redux/auth/action\";\nimport { isNetworkRequestFailedError } from \"../../config/helpers\";\n\nclass NewPassword extends Component {\n state = {\n isLoading: false,\n username: \"\",\n newPassword: \"\",\n newPasswordError: \"\",\n confirmPasswordError: \"\",\n confirmPassword: \"\",\n securityCode: \"\",\n securityCodeError: \"\",\n };\n\n componentDidMount() {\n const { history, setHistory } = this.props;\n const { localHistory } = this.props;\n\n if (!localHistory) {\n window.location.replace(\"/forgotpassword\");\n }\n\n const forgotusername = localStorage.getItem(\"forgotusername\");\n localStorage.removeItem(\"forgotusername\");\n\n this.setState({ username: forgotusername });\n\n setHistory(history);\n }\n\n changeHandler = (e) => {\n const name = e.target.name;\n\n this.setState({\n [name]: e.target.value,\n [name + \"Error\"]: \"\",\n });\n };\n\n validatePassword = (password) => {\n // Min char 6, requires combination of numbers and letters\n const passwordRegex = new RegExp(\"^(?=.*[a-z])(?=.*[0-9])(?=.{6,})\");\n return passwordRegex.test(String(password).toLowerCase());\n };\n\n validate = () => {\n const errors = {};\n\n const { newPassword, confirmPassword } = this.state;\n\n if (!this.validatePassword(newPassword)) {\n errors.newPasswordError =\n \"Password must atleast 6 characters long with combination of numbers and letters\";\n }\n\n if (newPassword !== confirmPassword) {\n errors.newPasswordError = \"Password do not match\";\n errors.confirmPasswordError = \"Password do not match\";\n }\n\n this.setState({ ...errors });\n\n return Object.keys(errors).length;\n };\n\n newPassword = async (e) => {\n const { localHistory, setAlertMessage } = this.props;\n e.preventDefault();\n\n try {\n const { securityCode, newPassword, username } = this.state;\n\n const payload = {\n securityCode,\n newPassword,\n username,\n };\n\n if (this.validate()) return;\n\n this.setState({ isLoading: true });\n\n await api.newPassword(payload);\n\n setAlertMessage({ type: \"success\", message: \"Success\" });\n localHistory.push(\"/login\");\n } catch (error) {\n setAlertMessage({\n type: \"error\",\n message: error.message,\n onTryAgain: isNetworkRequestFailedError(error)\n ? () => this.newPassword(e)\n : null,\n });\n }\n this.setState({ isLoading: false });\n };\n\n render() {\n const {\n securityCode,\n isLoading,\n newPassword,\n newPasswordError,\n confirmPasswordError,\n confirmPassword,\n securityCodeError,\n } = this.state;\n\n return (\n \n \n \n {isLoading &&
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n localHistory: state.history.localHistory,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setAlertMessage: authAction.setAlertMessage,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(NewPassword);\n","import React from \"react\";\nimport { Table as BootstrapTable } from \"reactstrap\";\nimport moment from \"moment\";\n\nimport { generateRandomKey, formatNumbers } from \"../../../../config/helpers\";\n\nfunction Table(props) {\n return (\n props.data && (\n \n \n
\n Premium Pension Limited
\nNew Password
\n\n
\n \n
\n \n
\n \n \n Already a member? Login\n \n
\n \n \n \n \n \n \n {data &&
}\n
\n {isLoading && Time Period
\n\n {this.state.showCalender && (\n
\n \n \n This Year\n \n \n Last Year\n \n \n Last Quarter\n \n
\n \n \n \n \n \n {data &&
}\n
\n {isLoading && Time Period
\n\n {this.state.showCalender && (\n
\n \n \n This Year\n \n \n Last Year\n \n \n Last Quarter\n \n
\n \n \n
\n
\n {isLoading && {text}
\n\n {\n setBankDetailsField({ bankName: e.target.value });\n }}\n >\n \n {allBanks.map((item) => (\n \n ))}\n \n {!!bankNameError && (\n {bankNameError} \n )}\n {\n setBankDetailsField({ accountName: e.target.value });\n }}\n />\n {\n setBankDetailsField({ accountNumber: e.target.value });\n }}\n />\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.rsaPinDublicated.bankDetails,\n token: state.rsaPinDublicated.token,\n allBanks: state.referral.newReferral.allBanks,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setBankDetailsField: rsaAction.setBankDetailsField,\n setAlertMessage: authAction.setAlertMessage,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withRouter(BankDetails));\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Input, FormFeedback } from \"reactstrap\";\nimport { withRouter } from \"react-router\";\n\nimport constants from \"../../config/constants\";\nimport historyAction from \"../../redux/history/action\";\nimport rsaAction from \"../../redux/rsaPinDublicated/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\nimport DatePickerComp from \"../../component/DatePicker/DatePicker\";\nimport api from \"../../config/api\";\n\nclass PersonalDetails extends Component {\n state = {\n allStates: [],\n allLGA: [],\n allStates2: [],\n allLGA2: [],\n pathname: \"\",\n };\n async componentDidMount() {\n const { customRef, history, setHistory } = this.props;\n\n this.setState({\n pathname: history.location.pathname,\n });\n\n await this.fetchToken();\n\n this.fetchFormReferenceNo();\n this.fetchState(null, true);\n this.fetchLGA(null, true);\n\n customRef({ validate: this.validate });\n setHistory(history);\n }\n\n fetchToken = async () => {\n const { setToken } = this.props;\n\n if (this.props.token) {\n return \"\";\n }\n\n try {\n const payload = {\n username: constants.SYSTEM_ACCOUNT.USERNAME,\n password: constants.SYSTEM_ACCOUNT.PASSWORD,\n };\n\n const response = await api.login(payload);\n const token = response.data.token;\n\n setToken(token);\n } catch (e) {\n console.log(\"e =>\", e);\n }\n\n return \"\";\n };\n\n fetchFormReferenceNo = async () => {\n const { setPersonalDetailField, formRefno } = this.props;\n\n try {\n if (!formRefno) {\n const response = await api.fetchFormReferenceNo();\n setPersonalDetailField({ formRefno: response.data.result });\n }\n } catch (e) {\n console.log(\"e =>\", e);\n }\n };\n\n onSelectChange = (e) => {\n const { setPersonalDetailField } = this.props;\n\n setPersonalDetailField({ [e.target.name]: e.target.value });\n\n if (e.target.name === \"permanentAddressLocation\") {\n this.fetchState(e.target.value);\n }\n if (e.target.name === \"permState\") {\n this.fetchLGA(e.target.value);\n }\n if (e.target.name === \"nationalityCode\") {\n this.fetchState2(e.target.value);\n }\n if (e.target.name === \"stateOfOrigin\") {\n this.fetchLGA2(e.target.value);\n }\n };\n\n fetchState = async (permanentAddressLocation, dontClear) => {\n try {\n const { setPersonalDetailField, permState, token } = this.props;\n\n if (!dontClear) {\n setPersonalDetailField({\n permState: \"\",\n permLga: \"\",\n });\n }\n\n if (permState) {\n this.fetchLGA(null, true);\n }\n\n this.setState({ allStates: [], allLGA: [] });\n\n if (!permanentAddressLocation) {\n permanentAddressLocation = this.props.permanentAddressLocation;\n }\n\n if (permanentAddressLocation === \"N\") {\n permanentAddressLocation = \"NG\";\n }\n\n const state = await api.fetchState(\n {\n countryCode: permanentAddressLocation,\n },\n token\n );\n\n this.setState({ allStates: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchState2 = async (nationalityCode, dontClear) => {\n try {\n const { setPersonalDetailField, stateOfOrigin, token } = this.props;\n\n if (!dontClear) {\n setPersonalDetailField({\n stateOfOrigin: \"\",\n lgaCode: \"\",\n });\n }\n\n if (stateOfOrigin) {\n this.fetchLGA2(null, true);\n }\n\n this.setState({ allStates2: [], allLGA2: [] });\n\n if (!nationalityCode) {\n nationalityCode = this.props.nationalityCode;\n }\n\n if (nationalityCode === \"N\") {\n nationalityCode = \"NG\";\n }\n\n const state = await api.fetchState(\n { countryCode: nationalityCode },\n token\n );\n\n this.setState({ allStates2: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (permState, dontClear) => {\n try {\n const { setPersonalDetailField, token } = this.props;\n\n if (!dontClear) {\n setPersonalDetailField({ permLga: \"\" });\n }\n\n this.setState({ allLGA: [] });\n\n if (!permState) {\n permState = this.props.permState;\n }\n\n const LGA = await api.fetchLGA({ stateCode: permState }, token);\n\n console.log(\"LGA =>\", LGA);\n this.setState({ allLGA: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA2 = async (stateOfOrigin, dontClear) => {\n try {\n const { setPersonalDetailField, token } = this.props;\n\n if (!dontClear) {\n setPersonalDetailField({ lgaCode: \"\" });\n }\n\n this.setState({ allLGA2: [] });\n\n if (!stateOfOrigin) {\n stateOfOrigin = this.props.stateOfOrigin;\n }\n\n const LGA = await api.fetchLGA({ stateCode: stateOfOrigin }, token);\n\n this.setState({ allLGA2: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n validate = () => {\n const {\n surname,\n firstname,\n nationalityCode,\n title,\n gender,\n maritalStatusCode,\n permCity,\n ssn,\n mobilePhone = \"\",\n formRefno,\n permLga,\n permState,\n placeOfBirth,\n stateOfOrigin,\n lgaCode,\n permanentAddressLocation,\n dateOfBirth,\n confirmMobilePhone = \"\",\n // schemeId,\n permCountry,\n } = this.props;\n\n let isValidated = true,\n formRefnoError = \"\",\n surnameError = \"\",\n firstnameError = \"\",\n nationalityCodeError = \"\",\n stateOfOriginError = \"\",\n lgaCodeError = \"\",\n titleError = \"\",\n genderError = \"\",\n maritalStatusCodeError = \"\",\n permCityError = \"\",\n permanentAddressLocationError = \"\",\n mobilePhoneError = \"\",\n confirmMobilePhoneError = \"\",\n ssnError = \"\",\n permLgaError = \"\",\n permStateError = \"\",\n placeOfBirthError = \"\",\n dateOfBirthError = \"\",\n schemeIdError = \"\",\n permCountryError = \"\";\n\n if (!formRefno) {\n formRefnoError = \"This field is required\";\n isValidated = false;\n }\n\n // if (!schemeId) {\n // schemeIdError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (formRefno.length > 50) {\n formRefnoError = \"Form number should not exceed 50 characters\";\n isValidated = false;\n }\n if (!surname) {\n surnameError = \"This field is required\";\n isValidated = false;\n }\n if (!firstname) {\n firstnameError = \"This field is required\";\n isValidated = false;\n }\n if (!nationalityCode) {\n nationalityCodeError = \"This field is required\";\n isValidated = false;\n }\n if (!stateOfOrigin) {\n stateOfOriginError = \"This field is required\";\n isValidated = false;\n }\n if (!lgaCode) {\n lgaCodeError = \"This field is required\";\n isValidated = false;\n }\n if (!title) {\n titleError = \"This field is required\";\n isValidated = false;\n }\n if (!gender) {\n genderError = \"This field is required\";\n isValidated = false;\n }\n if (!maritalStatusCode) {\n maritalStatusCodeError = \"This field is required\";\n isValidated = false;\n }\n if (!permCity) {\n permCityError = \"This field is required\";\n isValidated = false;\n }\n if (!mobilePhone) {\n mobilePhoneError = \"This field is required\";\n isValidated = false;\n }\n if (mobilePhone.length !== 11) {\n mobilePhoneError = \"Phone number should be 11 digits\";\n isValidated = false;\n }\n if (this.state.pathname === constants.RSA_PIN_2_PATH) {\n if (confirmMobilePhone !== mobilePhone) {\n confirmMobilePhoneError =\n \"Phone number and Confirm Phone Number must be same\";\n isValidated = false;\n }\n }\n if (!ssn) {\n ssnError = \"This field is required\";\n isValidated = false;\n }\n if (this.state.pathname === constants.RSA_PIN_2_PATH) {\n if (ssn.length > 11) {\n ssnError = \"NIN should not be more than 11 digit long\";\n isValidated = false;\n }\n } else {\n if (ssn.length < 11 || ssn.length > 15) {\n ssnError = \"NIN should be under 11-15 digit long\";\n isValidated = false;\n }\n }\n if (nationalityCode === \"NG\" && !permState) {\n permStateError = \"This field is required\";\n isValidated = false;\n }\n\n if (nationalityCode === \"NG\" && !permLga) {\n permLgaError = \"This field is required\";\n isValidated = false;\n }\n\n if (!placeOfBirth) {\n placeOfBirthError = \"This field is required\";\n isValidated = false;\n }\n\n if (!permanentAddressLocation) {\n permanentAddressLocationError = \"This field is required\";\n isValidated = false;\n }\n\n if (!dateOfBirth) {\n dateOfBirthError = \"This field is required\";\n isValidated = false;\n }\n\n if (!permCountry) {\n permCountryError = \"This field is required\";\n isValidated = false;\n }\n\n this.setState({\n surnameError,\n firstnameError,\n nationalityCodeError,\n stateOfOriginError,\n lgaCodeError,\n titleError,\n genderError,\n maritalStatusCodeError,\n permCityError,\n permanentAddressLocationError,\n mobilePhoneError,\n confirmMobilePhoneError,\n ssnError,\n formRefnoError,\n permLgaError,\n permStateError,\n dateOfBirthError,\n placeOfBirthError,\n schemeIdError,\n permCountryError,\n });\n\n return isValidated;\n };\n\n clearAllErrors = () => {\n this.setState({\n surnameError: \"\",\n firstnameError: \"\",\n nationalityCode: \"\",\n titleError: \"\",\n genderError: \"\",\n maritalStatusCodeError: \"\",\n permCityError: \"\",\n permanentAddressLocationError: \"\",\n mobilePhoneError: \"\",\n confirmMobilePhoneError: \"\",\n ssnError: \"\",\n schemeId: \"\",\n });\n };\n\n render() {\n const {\n formRefno,\n setPersonalDetailField,\n title,\n firstname,\n middleName,\n othernames,\n surname,\n maidenName,\n ssn,\n bvn,\n gender,\n dateOfBirth,\n maritalStatusCode,\n nationalityCode,\n permanentAddressLocation,\n permState,\n permLga,\n mobilePhone,\n permCity,\n placeOfBirth,\n countries,\n // schemeId,\n permCountry,\n stateOfOrigin,\n confirmMobilePhone,\n lgaCode,\n } = this.props;\n\n const {\n allStates,\n allLGA,\n surnameError,\n firstnameError,\n nationalityCodeError,\n titleError,\n genderError,\n maritalStatusCodeError,\n permCityError,\n mobilePhoneError,\n confirmMobilePhoneError,\n ssnError,\n formRefnoError,\n permStateError,\n permLgaError,\n placeOfBirthError,\n permanentAddressLocationError,\n dateOfBirthError,\n // schemeIdError,\n permCountryError,\n stateOfOriginError,\n lgaCodeError,\n allStates2,\n allLGA2,\n } = this.state;\n\n return (\n \n {\n setPersonalDetailField({ formRefno: e.target.value });\n }}\n />\n {/* {\n setPersonalDetailField({ schemeId: e.target.value });\n }}\n /> */}\n {\n setPersonalDetailField({ surname: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ firstname: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ middleName: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ othernames: e.target.value });\n }}\n />\n \n \n {countries.map((item) => (\n \n ))}\n \n {nationalityCodeError && (\n {nationalityCodeError} \n )}\n \n \n {allStates2.map((item) => (\n \n ))}\n \n {!!stateOfOriginError && (\n {stateOfOriginError} \n )}\n \n \n {allLGA2.map((item) => (\n \n ))}\n \n {!!lgaCodeError && {lgaCodeError} }\n \n \n \n \n \n \n \n {titleError && {titleError} }\n \n \n \n \n \n {genderError && {genderError} }\n \n \n \n \n \n \n \n \n {maritalStatusCodeError && (\n {maritalStatusCodeError} \n )}\n {\n setPersonalDetailField({ dateOfBirth: e });\n }}\n containerStyles={{ width: \"100%\" }}\n />\n {\n setPersonalDetailField({ placeOfBirth: e.target.value });\n }}\n />\n \n \n {countries.map((item) => (\n \n ))}\n \n {\n setPersonalDetailField({ permCity: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ maidenName: e.target.value });\n }}\n />\n \n \n \n \n \n {!!permanentAddressLocationError && (\n {permanentAddressLocationError} \n )}\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!permStateError && (\n {permStateError} \n )}\n \n \n {allLGA.map((item) => (\n \n ))}\n \n {!!permLgaError && {permLgaError} }\n {\n setPersonalDetailField({ mobilePhone: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ confirmMobilePhone: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ ssn: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ bvn: e.target.value });\n }}\n />\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.rsaPinDublicated.personalDetail,\n countries: state.onboarding.countries,\n token: state.rsaPinDublicated.token,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setPersonalDetailField: rsaAction.setPersonalDetailField,\n setToken: rsaAction.setToken,\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(withRouter(PersonalDetails));\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\n// import { Input, FormFeedback } from \"reactstrap\";\nimport { withRouter } from \"react-router\";\n\nimport api from \"../../config/api\";\nimport historyAction from \"../../redux/history/action\";\nimport rsaAction from \"../../redux/rsaPinDublicated/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\nimport constants from \"../../config/constants\";\n\nclass Residence extends Component {\n state = {\n allStates: [],\n allLGA: [],\n pathname: \"\",\n };\n\n componentDidMount() {\n const { customRef, history, setHistory } = this.props;\n\n this.setState({\n pathname: history.location.pathname,\n });\n this.fetchState(null, true);\n\n customRef({ validate: this.validate });\n setHistory(history);\n }\n\n fetchState = async (residenceCountryCode, dontClear) => {\n try {\n const { token, setResidenceField, residenceStateCode } = this.props;\n\n if (!dontClear) {\n setResidenceField({ residenceStateCode: \"\", residenceLGACode: \"\" });\n }\n\n if (residenceStateCode) {\n this.fetchLGA(null, true);\n }\n\n this.setState({ allStates: [], allLGA: [] });\n\n if (!residenceCountryCode) {\n residenceCountryCode = this.props.residenceCountryCode;\n }\n\n const state = await api.fetchState(\n { countryCode: residenceCountryCode },\n token\n );\n\n this.setState({ allStates: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (residenceStateCode, dontClear) => {\n try {\n const { token, setResidenceField } = this.props;\n\n if (!dontClear) {\n setResidenceField({ residenceLGACode: \"\" });\n }\n\n this.setState({ allLGA: [] });\n\n if (!residenceStateCode) {\n residenceStateCode = this.props.residenceStateCode;\n }\n\n const LGA = await api.fetchLGA({ stateCode: residenceStateCode }, token);\n\n this.setState({ allLGA: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n onSelectChange = (e) => {\n const { setResidenceField } = this.props;\n\n setResidenceField({ [e.target.name]: e.target.value });\n\n if (e.target.name === \"residenceCountryCode\") {\n this.fetchState(e.target.value);\n }\n\n if (e.target.name === \"residenceStateCode\") {\n this.fetchLGA(e.target.value);\n }\n };\n\n validate = () => {\n const { email, permZip, confirmEmail } = this.props;\n\n let isValidated = true,\n confirmEmailError = \"\",\n permBoxError = \"\",\n permZipError = \"\";\n // residenceHouseNoError = \"\";\n // residenceStateCodeError = \"\",\n // residenceLGACodeError = \"\";\n\n // if (!residenceStateCode) {\n // residenceStateCodeError = \"This field is required\";\n // isValidated = false;\n // }\n // if (!residenceLGACode) {\n // residenceLGACodeError = \"This field is required\";\n // isValidated = false;\n // }\n // if (!permBox) {\n // permBoxError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (this.state.pathname === constants.RSA_PIN_2_PATH) {\n if (email) {\n if (confirmEmail !== email) {\n confirmEmailError = \"Email and Confirm Email must be same\";\n isValidated = false;\n }\n }\n }\n\n // if (!residenceHouseNo) {\n // residenceHouseNoError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (!permZip) {\n permZipError = \"This field is required\";\n isValidated = false;\n }\n this.setState({\n // residenceStateCodeError,\n // residenceLGACodeError,\n permBoxError,\n \n confirmEmailError,\n // residenceHouseNoError,\n permZipError,\n });\n\n return isValidated;\n };\n\n render() {\n const {\n // residenceCountryCode,\n setResidenceField,\n // residenceHouseNo,\n // residenceLGACode,\n // residenceStateCode,\n // residenceStreetName,\n // residenceTownCity,\n permZip,\n email,\n permanentAddress,\n permanentAddress1,\n permBox,\n confirmEmail,\n // countries\n } = this.props;\n\n const {\n emailError,\n\n confirmEmailError,\n permBoxError,\n // residenceHouseNoError,\n permZipError,\n // allStates,\n // allLGA,\n // residenceStateCodeError,\n // residenceLGACodeError\n } = this.state;\n\n return (\n \n {\n setResidenceField({ permanentAddress: e.target.value });\n }}\n />\n {/* {\n setResidenceField({ residenceHouseNo: e.target.value });\n }}\n /> */}\n {\n setResidenceField({ permanentAddress1: e.target.value });\n }}\n />\n {/* {\n setResidenceField({ residenceStreetName: e.target.value });\n }}\n />\n {\n setResidenceField({ residenceTownCity: e.target.value });\n }}\n />\n \n \n {countries.map(item => (\n \n ))}\n \n \n \n {allStates.map(item => (\n \n ))}\n \n {!!residenceStateCodeError && (\n {residenceStateCodeError} \n )}\n \n \n {allLGA.map(item => (\n \n ))}\n \n {!!residenceLGACodeError && (\n {residenceLGACodeError} \n )} */}\n {/* {\n setResidenceField({ residenceLGACode: e.target.value });\n }}\n /> */}\n {/* {\n setResidenceField({ residenceStateCode: e.target.value });\n }}\n /> */}\n {/* {\n setResidenceField({ residenceCountryCode: e.target.value });\n }}\n /> */}\n {\n setResidenceField({ permZip: e.target.value });\n }}\n />\n {\n setResidenceField({ email: e.target.value });\n }}\n />\n {\n setResidenceField({ confirmEmail: e.target.value });\n }}\n />\n {\n setResidenceField({ permBox: e.target.value });\n }}\n />\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.rsaPinDublicated.residence,\n token: state.rsaPinDublicated.token,\n countries: state.onboarding.countries,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setResidenceField: rsaAction.setResidenceField,\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(withRouter(Residence));\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Input, FormFeedback } from \"reactstrap\";\nimport { withRouter } from \"react-router\";\n\nimport SelectPagination from \"../../component/SelectPagination/SelectPagination\";\nimport api from \"../../config/api\";\nimport historyAction from \"../../redux/history/action\";\nimport rsaAction from \"../../redux/rsaPinDublicated/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\nimport DatePicker from \"../../component/DatePicker/DatePicker\";\nimport constants from \"../../config/constants\";\nimport { splitUrl } from \"../../config/helpers\";\n\nclass Employer extends Component {\n state = {\n allStates: [],\n allLGA: [],\n sector: [],\n confirmEmployerPhone: \"\",\n pathname: \"\",\n };\n\n componentDidMount = async () => {\n const { customRef, history, setHistory } = this.props;\n\n this.fetchState(null, true);\n\n try {\n let response = await api.fetchAllSectors();\n let sectionList = response.data.result || [];\n const queryStrings = splitUrl(window.location.href)?.queryStrings || {};\n\n if (queryStrings.employerType === \"MP\") {\n this.props.setEmployerField({ employerType: \"MP\" });\n sectionList = sectionList.filter((item) => item.Code === \"MP\");\n }\n\n this.setState({\n sector: sectionList,\n });\n } catch (error) {\n console.log(\"E =>\", error);\n }\n\n this.setState({\n pathname: history.location.pathname,\n });\n\n customRef({ validate: this.validate });\n setHistory(history);\n };\n\n onSelectChange = (e) => {\n const { setEmployerField } = this.props;\n\n setEmployerField({ [e.target.name]: e.target.value });\n\n if (e.target.name === \"employerCountry\") {\n this.fetchState(e.target.value);\n }\n\n if (e.target.name === \"employerStatecode\") {\n this.fetchLGA(e.target.value);\n }\n };\n\n fetchState = async (employerCountry, dontClear) => {\n try {\n const { setEmployerField, employerStatecode, token } = this.props;\n\n if (!dontClear) {\n setEmployerField({\n employerStatecode: \"\",\n employerLga: \"\",\n });\n }\n\n this.setState({ allStates: [], allLGA: [] });\n\n if (!employerCountry) {\n employerCountry = this.props.employerCountry;\n }\n\n if (employerStatecode) {\n this.fetchLGA(null, true);\n }\n\n const state = await api.fetchState(\n { countryCode: employerCountry },\n token\n );\n this.setState({ allStates: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (employerStatecode, dontClear) => {\n try {\n const { setEmployerField, token } = this.props;\n\n if (!dontClear) {\n setEmployerField({ employerLga: \"\" });\n }\n\n this.setState({ allLGA: [] });\n\n if (!employerStatecode) {\n employerStatecode = this.props.employerStatecode;\n }\n\n const LGA = await api.fetchLGA({ stateCode: employerStatecode }, token);\n\n this.setState({ allLGA: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n validate = () => {\n const {\n // employerBuildingNameOrNumber,\n // employerStreetName,\n employerBusiness,\n employerLga,\n employerStatecode,\n // employerNigeriaOrAbroad,\n employerType,\n dateOfFirstApointment,\n employerCity,\n // employerBox,\n // employerZip,\n employerPhone = \"\",\n stateOfPosting,\n employerLocation,\n employerCode,\n confirmEmployerPhone = \"\",\n } = this.props;\n\n let isValidated = true,\n // employerBuildingNameOrNumberError,\n // employerStreetNameError,\n employerBusinessError,\n employerLgaError,\n employerStatecodeError,\n // employerNigeriaOrAbroadError,\n employerTypeError,\n dateOfFirstApointmentError,\n employerCityError,\n employerZipError,\n employerBoxError,\n employerPhoneError,\n confirmEmployerPhoneError,\n stateOfPostingError,\n employerLocationError,\n employerCodeError;\n\n // if (!employerBuildingNameOrNumber) {\n // employerBuildingNameOrNumberError = \"This field is required\";\n // isValidated = false;\n // }\n // if (!employerStreetName) {\n // employerStreetNameError = \"This field is required\";\n // isValidated = false;\n // }\n if (this.state.pathname === constants.RSA_PIN_2_PATH) {\n if (confirmEmployerPhone !== employerPhone) {\n confirmEmployerPhoneError =\n \"Confirm Employer Contact Phone and Employer's Contact Phone must be same\";\n isValidated = false;\n }\n }\n if (!employerLocation) {\n employerLocationError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerCode) {\n employerCodeError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerBusiness) {\n employerBusinessError = \"This field is required\";\n isValidated = false;\n }\n\n if (!stateOfPosting) {\n stateOfPostingError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerCity) {\n employerCityError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerStatecode) {\n employerStatecodeError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerLga) {\n employerLgaError = \"This field is required\";\n isValidated = false;\n }\n\n // if (!employerNigeriaOrAbroad) {\n // console.log(\"employerNigeriaOrAbroad\")\n\n // employerNigeriaOrAbroadError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (!employerType) {\n employerTypeError = \"This field is required\";\n isValidated = false;\n }\n\n if (employerType === \"PU\" && !dateOfFirstApointment) {\n dateOfFirstApointmentError = \"This field is required\";\n isValidated = false;\n }\n\n // if (!employerBox) {\n // employerBoxError = \"This field is required\";\n // isValidated = false;\n // }\n\n // if (!employerZip) {\n // employerZipError = \"This field is required\";\n // isValidated = false;\n // }\n\n // if (!employerPhone) {\n // employerPhoneError = \"This field is required\";\n // isValidated = false;\n // }\n\n this.setState({\n // employerBuildingNameOrNumberError,\n // employerStreetNameError,\n employerBusinessError,\n employerStatecodeError,\n employerLgaError,\n employerCityError,\n // employerNigeriaOrAbroadError,\n employerTypeError,\n dateOfFirstApointmentError,\n employerZipError,\n employerBoxError,\n employerPhoneError,\n confirmEmployerPhoneError,\n stateOfPostingError,\n employerLocationError,\n employerCodeError,\n });\n\n return isValidated;\n };\n\n render() {\n const {\n employerType,\n setEmployerField,\n // employerCode,\n // employerBuildingNameOrNumber,\n employerCountry,\n employerLga,\n employerBusiness,\n // employerNigeriaOrAbroad,\n employerPhone,\n employerBox,\n employerStatecode,\n // employerStreetName,\n employerCity,\n employerZip,\n // dateOfCurrentEmployment,\n dateOfFirstApointment,\n employerAddress1,\n employerAddress,\n countries,\n stateOfPosting,\n allEmployers,\n employerCode,\n employerLocation,\n confirmEmployerPhone,\n } = this.props;\n\n const {\n allStates,\n allLGA,\n sector,\n // employerBuildingNameOrNumberError,\n // employerStreetNameError,\n employerBusinessError,\n employerStatecodeError,\n employerLgaError,\n // employerNigeriaOrAbroadError,\n // employerAddress1Error,\n // employerAddressError\n employerTypeError,\n dateOfFirstApointmentError,\n employerCityError,\n employerZipError,\n employerBoxError,\n employerPhoneError,\n confirmEmployerPhoneError,\n stateOfPostingError,\n isEmployerDropdown,\n employerLocationError,\n employerCodeError,\n } = this.state;\n const queryStrings = splitUrl(window.location.href)?.queryStrings || {};\n\n return (\n \n \n \n {sector.map((item) => (\n \n ))}\n \n\n {!!employerTypeError && (\n {employerTypeError} \n )}\n \n this.setState({ isEmployerDropdown })\n }\n allOptions={allEmployers}\n lookFor=\"EmployerName\"\n value={employerCode}\n key=\"EmployerCode\"\n onSelect={(item) => {\n setEmployerField({\n employerCode: item.EmployerName,\n employerRawCode: item.EmployerCode,\n });\n\n this.setState({ isEmployerDropdown: false });\n }}\n />\n {/* {\n setEmployerField({ employerType: e.target.value });\n }}\n /> */}\n {/* {\n setEmployerField({ employerCode: e.target.value });\n }}\n /> */}\n {/* {\n setEmployerField({ employerBuildingNameOrNumber: e.target.value });\n }}\n /> */}\n {/* {\n setEmployerField({ employerStreetName: e.target.value });\n }}\n errorMessage={employerStreetNameError}\n /> */}\n {\n setEmployerField({ employerCity: e.target.value });\n }}\n />\n \n \n {countries.map((item) => (\n \n ))}\n \n \n \n \n \n \n {!!employerLocationError && (\n {employerLocationError} \n )}\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!employerStatecodeError && (\n {employerStatecodeError} \n )}\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!stateOfPostingError && (\n {stateOfPostingError} \n )}\n \n \n {allLGA.map((item) => (\n \n ))}\n \n {!!employerLgaError && (\n {employerLgaError} \n )}\n {\n setEmployerField({ employerPhone: e.target.value });\n }}\n />\n {\n setEmployerField({ confirmEmployerPhone: e.target.value });\n }}\n />\n {\n setEmployerField({ employerBox: e.target.value });\n }}\n />\n {\n setEmployerField({ employerBusiness: e.target.value });\n }}\n />\n {\n setEmployerField({ employerAddress1: e.target.value });\n }}\n />\n {\n setEmployerField({ employerAddress: e.target.value });\n }}\n />\n {/* {\n setEmployerField({ employerNigeriaOrAbroad: e.target.value });\n }}\n >\n \n \n \n */}\n {/* {!!employerNigeriaOrAbroadError && (\n {employerNigeriaOrAbroadError} \n )} */}\n {\n setEmployerField({ employerZip: e.target.value });\n }}\n />\n {\n setEmployerField({ dateOfFirstApointment: e });\n }}\n containerStyles={{ width: \"100%\" }}\n />\n {/* {\n setEmployerField({ dateOfCurrentEmployment: e.target.value });\n }}\n /> */}\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.rsaPinDublicated.employer,\n token: state.rsaPinDublicated.token,\n countries: state.onboarding.countries,\n allEmployers: state.auth.allEmployers,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setEmployerField: rsaAction.setEmployerField,\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(withRouter(Employer));\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Input, FormFeedback } from \"reactstrap\";\nimport { withRouter } from \"react-router\";\n\nimport api from \"../../config/api\";\nimport historyAction from \"../../redux/history/action\";\nimport rsaAction from \"../../redux/rsaPinDublicated/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\nimport constants from \"../../config/constants\";\n\nclass Employer extends Component {\n state = {\n allStates: [],\n allLGA: [],\n pathname: \"\",\n };\n\n componentDidMount() {\n const { customRef, history, setHistory } = this.props;\n\n this.fetchState(null, true);\n this.setState({\n pathname: history.location.pathname,\n });\n\n customRef({ validate: this.validate });\n setHistory(history);\n }\n\n onSelectChange = (e) => {\n const { setNextOfKinField } = this.props;\n\n setNextOfKinField({ [e.target.name]: e.target.value });\n\n if (e.target.name === \"nokStatecode\") {\n this.fetchLGA(e.target.value);\n }\n };\n\n fetchState = async (nokCountry, dontClear) => {\n try {\n const { setNextOfKinField, nokStatecode, token } = this.props;\n\n if (!dontClear) {\n setNextOfKinField({\n nokStatecode: \"\",\n nokLga: \"\",\n });\n }\n\n this.setState({ allStates: [], allLGA: [] });\n\n if (!nokCountry) {\n nokCountry = this.props.nokCountry;\n }\n\n if (nokCountry === \"N\") {\n nokCountry = \"NG\";\n }\n\n if (nokStatecode) {\n this.fetchLGA(null, true);\n }\n\n const state = await api.fetchState({ countryCode: nokCountry }, token);\n\n this.setState({ allStates: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (nokStatecode, dontClear) => {\n try {\n const { token, setNextOfKinField } = this.props;\n\n if (!dontClear) {\n setNextOfKinField({ nokLga: \"\" });\n }\n\n this.setState({ allLGA: [] });\n\n if (!nokStatecode) {\n nokStatecode = this.props.nokStatecode;\n }\n\n const LGA = await api.fetchLGA({ stateCode: nokStatecode }, token);\n\n this.setState({ allLGA: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n validate = () => {\n const {\n nokMobilePhone = \"\",\n nokResidenceHouseNumber,\n nokTitle,\n // nokResidenceStreetName,\n nokName,\n nokSurname,\n nokGender,\n nokRelationship,\n nokStatecode,\n nokLga,\n nokLocation,\n nokCountry,\n nokEmailaddress = \"\",\n nokConfirmEmailaddress = \"\",\n nokConfirmMobilePhone = \"\",\n // nokOthername\n nokCity\n } = this.props;\n\n let isValidated = true,\n nokMobilePhoneError,\n nokConfirmMobilePhoneError,\n nokResidenceHouseNumberError,\n // nokResidenceStreetNameError,\n nokTitleError,\n nokNameError,\n nokSurnameError,\n nokGenderError,\n nokRelationshipError,\n nokStatecodeError,\n nokLgaError,\n nokLocationError,\n nokCountryError,\n nokEmailaddressError,\n nokConfirmEmailaddressError,\n nokOthernameError,\n nokCityError;\n\n if (nokMobilePhone.length !== 11) {\n nokMobilePhoneError = \"Phone number should be 11 digits\";\n isValidated = false;\n }\n if (this.state.pathname === constants.RSA_PIN_2_PATH) {\n if (nokConfirmMobilePhone !== nokMobilePhone) {\n nokConfirmMobilePhoneError =\n \"NOK Phone number and Confirm Phone Number must be same\";\n isValidated = false;\n }\n }\n if (this.state.pathname === constants.RSA_PIN_2_PATH) {\n if (nokConfirmEmailaddress !== nokEmailaddress) {\n nokConfirmEmailaddressError =\n \"NOK Email address and Confirm Email address must be same\";\n isValidated = false;\n }\n }\n if (!nokCountry) {\n nokCountryError = \"This field is required\";\n isValidated = false;\n }\n\n if (!nokResidenceHouseNumber) {\n nokResidenceHouseNumberError = \"This field is required\";\n isValidated = false;\n }\n\n if (this.state.pathname === constants.RSA_PIN_2_PATH) {\n if (!nokCity) {\n nokCityError = \"This field is required\";\n isValidated = false;\n }\n }\n\n // if (nokLocation === \"N\" && !nokCity) {\n // nokCityError = \"This field is required\";\n // isValidated = false;\n // }\n // if (!nokResidenceStreetName) {\n // nokResidenceStreetNameError = \"This field is required\";\n // isValidated = false;\n // }\n if (!nokTitle) {\n nokTitleError = \"This field is required\";\n isValidated = false;\n }\n if (!nokName) {\n nokNameError = \"This field is required\";\n isValidated = false;\n }\n if (!nokSurname) {\n nokSurnameError = \"This field is required\";\n isValidated = false;\n }\n if (!nokGender) {\n nokGenderError = \"This field is required\";\n isValidated = false;\n }\n\n if (!nokRelationship) {\n nokRelationshipError = \"This field is required\";\n isValidated = false;\n }\n\n if (nokLocation === \"N\" && !nokStatecode) {\n nokStatecodeError = \"This field is required\";\n isValidated = false;\n }\n\n if (nokLocation === \"N\" && !nokLga) {\n nokLgaError = \"This field is required\";\n isValidated = false;\n }\n\n if (!nokLocation) {\n nokLocationError = \"This field is required\";\n isValidated = false;\n }\n\n // if (!nokEmailaddress) {\n // nokEmailaddressError = \"This field is required\";\n // isValidated = false;\n // }\n\n // if (!nokOthername) {\n // nokOthernameError = \"This field is required\";\n // isValidated = false;\n // }\n\n this.setState({\n nokMobilePhoneError,\n nokConfirmMobilePhoneError,\n nokResidenceHouseNumberError,\n // nokResidenceStreetNameError,\n nokTitleError,\n nokNameError,\n nokSurnameError,\n nokGenderError,\n nokRelationshipError,\n nokStatecodeError,\n nokLgaError,\n nokLocationError,\n nokCountryError,\n nokEmailaddressError,\n nokConfirmEmailaddressError,\n nokOthernameError,\n nokCityError\n });\n\n return isValidated;\n };\n\n render() {\n const {\n nokEmailaddress,\n setNextOfKinField,\n nokName,\n nokGender,\n nokOthername,\n nokLocation,\n nokMobilePhone,\n nokBox,\n nokRelationship,\n nokCountry,\n nokAddress,\n nokAddress1,\n nokLga,\n nokStatecode,\n // nokResidenceStreetName,\n nokCity,\n nokSurname,\n nokTitle,\n nokZip,\n countries,\n // nokOthername,\n allRelationShips,\n nokResidenceHouseNumber,\n nokConfirmEmailaddress,\n nokConfirmMobilePhone,\n } = this.props;\n\n const {\n allLGA,\n allStates,\n nokMobilePhoneError,\n nokConfirmMobilePhoneError,\n nokResidenceHouseNumberError,\n // nokResidenceStreetNameError,\n nokTitleError,\n nokNameError,\n nokSurnameError,\n nokGenderError,\n nokRelationshipError,\n nokLgaError,\n nokStatecodeError,\n nokLocationError,\n nokCountryError,\n nokOthernameError,\n nokEmailaddressError,\n nokCityError,\n nokConfirmEmailaddressError,\n } = this.state;\n\n return (\n \n \n \n \n \n \n \n \n {!!nokTitleError && (\n {nokTitleError} \n )}\n {\n setNextOfKinField({ nokName: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokOthername: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokSurname: e.target.value });\n }}\n />\n\n {/* {\n setNextOfKinField({ nokOthername: e.target.value });\n }}\n /> */}\n\n \n \n \n \n \n {!!nokGenderError && (\n {nokTitleError} \n )}\n\n \n \n {countries.map((item) => (\n \n ))}\n \n {!!nokCountryError && (\n {nokCountryError} \n )}\n {\n setNextOfKinField({ nokMobilePhone: e.target.value });\n }}\n errorMessage={nokMobilePhoneError}\n />\n {\n setNextOfKinField({ nokConfirmMobilePhone: e.target.value });\n }}\n errorMessage={nokConfirmMobilePhoneError}\n />\n \n \n {allRelationShips.map((item) => (\n \n ))}\n \n\n {/* {\n setNextOfKinField({ nokRelationship: e.target.value });\n }}\n /> */}\n {\n setNextOfKinField({ nokEmailaddress: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokConfirmEmailaddress: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokLocation: e.target.value });\n this.fetchState(e.target.value);\n }}\n >\n \n \n \n \n {!!nokLocationError && (\n {nokLocationError} \n )}\n {\n setNextOfKinField({ nokAddress1: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokAddress: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokResidenceHouseNumber: e.target.value });\n }}\n errorMessage={nokResidenceHouseNumberError}\n />\n {/* {\n setNextOfKinField({ nokResidenceStreetName: e.target.value });\n }}\n errorMessage={nokResidenceStreetNameError}\n /> */}\n {\n setNextOfKinField({ nokCity: e.target.value });\n }}\n errorMessage={nokCityError}\n />\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!nokStatecodeError && (\n {nokStatecodeError} \n )}\n \n \n {allLGA.map((item) => (\n \n ))}\n \n {!!nokLgaError && {nokLgaError} }\n {\n setNextOfKinField({ nokBox: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokZip: e.target.value });\n }}\n />\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.rsaPinDublicated.nextOfKin,\n token: state.rsaPinDublicated.token,\n countries: state.onboarding.countries,\n allRelationShips: state.auth.relationShips,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setNextOfKinField: rsaAction.setNextOfKinField,\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(withRouter(Employer));\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Row, Col } from \"reactstrap\";\nimport Ink from \"react-ink\";\n\nimport {\n imageToDataURL,\n isNetworkRequestFailedError,\n} from \"../../config/helpers\";\nimport historyAction from \"../../redux/history/action\";\nimport authAction from \"../../redux/auth/action\";\nimport rsaAction from \"../../redux/rsaPinDublicated/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\n\nclass Signature extends Component {\n state = {\n signatureImageError: \"\",\n };\n\n componentDidMount() {\n const { customRef } = this.props;\n\n customRef({ validate: this.validate });\n }\n\n validate = () => {\n const { signatureImage } = this.props;\n\n let isValidated = true,\n signatureImageError;\n\n if (!signatureImage) {\n signatureImageError = \"signature Image is required\";\n isValidated = false;\n }\n\n this.setState({\n signatureImageError,\n });\n\n return isValidated;\n };\n\n handleOnChange = async (e) => {\n const { setSignatureField, setAlertMessage } = this.props;\n\n try {\n if (e.target.files[0]) {\n const response = await imageToDataURL(e.target.files[0]);\n setSignatureField(response);\n }\n } catch (error) {\n setAlertMessage({\n type: \"error\",\n message: error.message,\n onTryAgain: isNetworkRequestFailedError(error)\n ? () => this.handleOnChange(e)\n : null,\n });\n }\n };\n\n render() {\n const { signatureImage } = this.props;\n const { signatureImageError } = this.state;\n\n return (\n \n \n
\n {!!signatureImage && (\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n signatureImage: state.rsaPinDublicated.signatureImage,\n token: state.rsaPinDublicated.token,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setSignatureField: rsaAction.setSignatureField,\n setAlertMessage: authAction.setAlertMessage,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Signature);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Row, Col } from \"reactstrap\";\nimport Ink from \"react-ink\";\nimport base64 from \"base-64\";\nimport api from \"../../config/api\";\nimport { BlobProvider } from \"@react-pdf/renderer\";\nimport { withRouter } from \"react-router\";\n\nimport constants from \"../../config/constants\";\nimport ConsentFormModal from \"../../component/ConsentFormModal\";\nimport CustomLoader from \"../../component/CustomLoader/CustomLoader\";\nimport ConsentFormPDF from \"../../component/ConsentFormPDF\";\nimport {\n imageToDataURL,\n isNetworkRequestFailedError,\n} from \"../../config/helpers\";\nimport historyAction from \"../../redux/history/action\";\nimport authAction from \"../../redux/auth/action\";\nimport rsaAction from \"../../redux/rsaPinDublicated/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\nimport CustomButton from \"../../component/CustomButton/CustomButton\";\n\nclass Picture extends Component {\n state = {\n pictureImageError: \"\",\n isLoading: false,\n pathname: \"\",\n };\n\n componentDidMount() {\n const { customRef, history, setHistory } = this.props;\n\n this.setState({\n pathname: history.location.pathname,\n });\n\n customRef({ validate: this.validate });\n setHistory(history);\n }\n\n handleOnChange = async (e) => {\n const { setPictureField, setAlertMessage } = this.props;\n\n try {\n if (e.target.files[0]) {\n const response = await imageToDataURL(e.target.files[0]);\n\n setPictureField(response);\n this.openModal();\n }\n } catch (e) {\n setAlertMessage({ type: \"error\", message: e.message });\n }\n };\n\n openModal = () => {\n this.props.setConsentFormField(\"\");\n this.setState({ isModal: true });\n };\n\n validate = () => {\n const { pictureImage, formImage } = this.props;\n let error = \"\";\n\n if (!pictureImage) {\n error = \"Picture is required\";\n } else if (!formImage) {\n error = \"Please accept consent form\";\n }\n\n return error;\n };\n\n upload = async () => {\n const {\n personalDetail,\n employer,\n nextOfKin,\n residence,\n pictureImage,\n formImage,\n signatureImage,\n bankDetails,\n validateUser,\n setAlertMessage,\n resetRSAForm,\n } = this.props;\n\n const header = {\n Authorization:\n \"Basic \" +\n base64.encode(validateUser.userName + \":\" + validateUser.password),\n };\n\n try {\n if (this.validate()) {\n throw new Error(this.validate());\n }\n\n this.setState({ isLoading: true });\n\n const data = {\n ...personalDetail,\n ...employer,\n ...nextOfKin,\n ...residence,\n ...bankDetails,\n pictureImage: pictureImage ? pictureImage.split(\"base64,\")[1] : \"\",\n formImage: formImage ? formImage.split(\"base64,\")[1] : \"\",\n signatureImage: signatureImage\n ? signatureImage.split(\"base64,\")[1]\n : \"\",\n agentCode: \"MPPPPL\",\n };\n data.employerRcno = employer.employerRawCode;\n delete data.employerRawCode;\n delete data.employerCode;\n delete data.confirmMobilePhone;\n delete data.confirmEmail;\n delete data.confirmEmployerPhone;\n delete data.nokConfirmEmailaddress;\n delete data.nokConfirmMobilePhone;\n // console.log(\"data =>\", data);\n\n // delete data.firstName;\n delete data.middleName;\n // delete data.maidenOrFormerName;\n // delete data.employerStateCode\n // delete data.dateOfFirstAppointment\n delete data.nokMiddleName;\n delete data.nokResidenceStateCode;\n\n // delete data.picture\n // delete data.consentForm\n // delete data.signature\n\n delete data.residenceHouseNo;\n delete data.employerStreetName;\n delete data.employerBuildingNameOrNumber;\n delete data.nokResidenceHouseNumber;\n\n let response = null;\n\n const email = data.email || constants.NOTIFICATION_API_DEFAULT_EMAIL;\n\n if (!data.email) {\n delete data.email;\n }\n\n if (this.state.pathname === constants.RSA_PIN_2_PATH) {\n response = await api.publicRSAPinSubmit(data, header);\n // response = await api.RSAPinSubmit(data, header);\n } else {\n response = await api.RSAPinSubmit(data, header);\n }\n\n setAlertMessage({ type: \"success\", message: response.errorMessage });\n\n if (this.state.pathname === constants.RSA_PIN_2_PATH) {\n const emailConfirmationData = {\n userEmail: email,\n firstName: data.firstname,\n nin: data.ssn,\n phone: data.mobilePhone,\n };\n\n await api.sendRegisterationNotification(emailConfirmationData, null);\n }\n\n resetRSAForm();\n } catch (e) {\n setAlertMessage({\n type: \"error\",\n message: e.message,\n onTryAgain: isNetworkRequestFailedError(e) ? this.upload : null,\n });\n }\n\n this.setState({ isLoading: false });\n };\n\n getName = () => {\n const { personalDetail } = this.props;\n\n return {\n firstName: personalDetail.firstname,\n middleName: personalDetail.middleName,\n lastName: personalDetail.surname,\n };\n };\n\n handleSubmit = () => {\n this.setState({ submit: true });\n };\n\n getDataForPDF = () => {\n const { personalDetail, signatureImage } = this.props;\n\n return {\n name: {\n firstName: personalDetail.firstname,\n middleName: personalDetail.middleName,\n lastName: personalDetail.surname,\n },\n signature: signatureImage,\n };\n };\n\n render() {\n const { pictureImage } = this.props;\n const { pictureImageError, isLoading, isModal } = this.state;\n\n return (\n \n \n
\n )}\n \n \n
\n {!!pictureImage && (\n this.setState({ isModal: false })}\n isOpen={isModal}\n />\n {this.state.submit && (\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n personalDetail: state.rsaPinDublicated.personalDetail,\n pictureImage: state.rsaPinDublicated.pictureImage,\n residence: state.rsaPinDublicated.residence,\n employer: state.rsaPinDublicated.employer,\n nextOfKin: state.rsaPinDublicated.nextOfKin,\n signatureImage: state.rsaPinDublicated.signatureImage,\n formImage: state.rsaPinDublicated.formImage,\n bankDetails: state.rsaPinDublicated.bankDetails,\n token: state.rsaPinDublicated.token,\n validateUser: state.onboarding.user,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setPictureField: rsaAction.setPictureField,\n setAlertMessage: authAction.setAlertMessage,\n setConsentFormField: rsaAction.setConsentFormField,\n resetRSAForm: rsaAction.resetRSAForm,\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(withRouter(Picture));\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Container, Row, Col } from \"reactstrap\";\nimport Ink from \"react-ink\";\n\nimport api from \"../../config/api\";\nimport \"./style.css\";\nimport StepTab from \"./StepTab\";\nimport BankDetails from \"./BankDetails\";\nimport PersonalDetail from \"./PersonalDetail\";\nimport Residence from \"./Residence\";\nimport Employer from \"./Employer\";\nimport NextOfKin from \"./NextOfKin\";\nimport Signature from \"./Signature\";\nimport Picture from \"./Picture\";\n// import ConsentForm from \"./ConsentForm\";\nimport historyAction from \"../../redux/history/action\";\nimport onboardingAction from \"../../redux/onboarding/action\";\nimport rsaAction from \"../../redux/rsaPinDublicated/action\";\nimport PageHead from \"../../component/pageHead/PageHead\";\nimport CustomLoader from \"../../component/CustomLoader/CustomLoader\";\nimport nextBlueIcon from \"../../assets/icons/Conti_blue.png\";\nimport prevBlueIcon from \"../../assets/icons/back_blue.png\";\nimport authAction from \"../../redux/auth/action\";\nimport constants from \"../../config/constants\";\n\nclass Onboarding extends Component {\n state = {\n step: 1,\n isLoading: false,\n pathname: null,\n };\n\n componentDidMount() {\n const { history, setHistory } = this.props;\n this.setState({\n pathname: history.location.pathname,\n });\n\n this.validate();\n this.fetchCountries();\n\n setHistory(history);\n }\n\n fetchCountries = async () => {\n try {\n const { saveCountries } = this.props;\n const response = await api.fetchCountries();\n\n saveCountries(response.data.result);\n } catch (e) {\n console.log(\"Error\", e.message);\n }\n };\n\n validate = async () => {\n const { validateUser, getUser } = this.props;\n\n if (!validateUser.userName) {\n this.setState({ isLoading: true });\n\n try {\n const response = await api.getUsernameAndPasswordUBA(\n {\n userName: \"test\",\n },\n \"\"\n );\n\n const data = {\n userName: response.data.result.UserName,\n password: response.data.result.Password,\n };\n\n getUser(data);\n } catch (e) {\n console.log(\"Error\", e.message);\n }\n this.setState({ isLoading: false });\n }\n };\n\n scrollToTop = () => {\n const target = document.querySelector(\".card-container .flex1\");\n var maxScroll = target.scrollHeight;\n\n var scrollInt = setInterval(() => {\n if (target.scrollTop !== 0) {\n target.scrollTop -= maxScroll / 100;\n } else {\n clearInterval(scrollInt);\n }\n }, 10);\n };\n\n decideTab = () => {\n const { step } = this.state;\n\n switch (step) {\n case 1:\n return (\n \n \n
\n )}\n \n \n {this.props.pictureImage && !this.props.formImage && (\n {\n this.setState({ isModal: true });\n }}\n />\n \n )}\n {\n this.upload();\n }}\n />\n \n
\n
\n {isLoading && \n
\n \n {step !== 1 && (\n \n \n
\n )}\n {step !== 7 && (\n Back
\nContinue
\n{text}
\n\n {\n setBankDetailsField({ bankName: e.target.value });\n }}\n >\n \n {allBanks.map((item) => (\n \n ))}\n \n {!!bankNameError && (\n {bankNameError} \n )}\n {\n setBankDetailsField({ accountName: e.target.value });\n }}\n />\n {\n setBankDetailsField({ accountNumber: e.target.value });\n }}\n />\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.rsaNINImplementation.bankDetails,\n token: state.rsaNINImplementation.token,\n allBanks: state.referral.newReferral.allBanks,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setBankDetailsField: rsaAction.setBankDetailsField,\n setAlertMessage: authAction.setAlertMessage,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withRouter(BankDetails));\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Input, FormFeedback } from \"reactstrap\";\nimport { withRouter } from \"react-router\";\n\nimport constants from \"../../config/constants\";\nimport historyAction from \"../../redux/history/action\";\nimport rsaAction from \"../../redux/rsaNINImplementation/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\nimport DatePickerComp from \"../../component/DatePicker/DatePicker\";\nimport api from \"../../config/api\";\n\nclass PersonalDetails extends Component {\n state = {\n allStates: [],\n allLGA: [],\n allStates2: [],\n allLGA2: [],\n pathname: \"\",\n };\n async componentDidMount() {\n const { customRef, history, setHistory } = this.props;\n this.setState({\n pathname: history.location.pathname,\n });\n\n await this.fetchToken();\n\n this.fetchFormReferenceNo();\n this.fetchState(null, true);\n this.fetchState2(\"NG\", true);\n this.fetchLGA(null, true);\n customRef({ validate: this.validate });\n setHistory(history);\n }\n\n fetchToken = async () => {\n const { setToken } = this.props;\n\n if (this.props.token) {\n return \"\";\n }\n\n try {\n const payload = {\n username: constants.SYSTEM_ACCOUNT.USERNAME,\n password: constants.SYSTEM_ACCOUNT.PASSWORD,\n };\n\n const response = await api.login(payload);\n const token = response.data.token;\n\n setToken(token);\n } catch (e) {\n console.log(\"e =>\", e);\n }\n\n return \"\";\n };\n\n fetchFormReferenceNo = async () => {\n const { setPersonalDetailField, formRefno } = this.props;\n\n try {\n if (!formRefno) {\n const response = await api.fetchFormReferenceNo();\n setPersonalDetailField({ formRefno: response.data.result });\n }\n } catch (e) {\n console.log(\"e =>\", e);\n }\n };\n\n onSelectChange = (e) => {\n const { setPersonalDetailField } = this.props;\n\n setPersonalDetailField({ [e.target.name]: e.target.value });\n\n if (e.target.name === \"permanentAddressLocation\") {\n this.fetchState(e.target.value);\n }\n if (e.target.name === \"permState\") {\n this.fetchLGA(e.target.value);\n }\n if (e.target.name === \"nationalityCode\") {\n this.fetchState2(e.target.value);\n }\n if (e.target.name === \"stateOfOrigin\") {\n this.fetchLGA2(e.target.value);\n }\n };\n\n fetchState = async (permanentAddressLocation, dontClear) => {\n try {\n const { setPersonalDetailField, permState, token } = this.props;\n\n if (!dontClear) {\n setPersonalDetailField({\n permState: \"\",\n permLga: \"\",\n });\n }\n\n if (permState) {\n this.fetchLGA(null, true);\n }\n\n this.setState({ allStates: [], allLGA: [] });\n\n if (!permanentAddressLocation) {\n permanentAddressLocation = this.props.permanentAddressLocation;\n }\n\n if (permanentAddressLocation === \"N\") {\n permanentAddressLocation = \"NG\";\n }\n\n const state = await api.fetchState(\n {\n countryCode: permanentAddressLocation,\n },\n token\n );\n\n this.setState({ allStates: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchState2 = async (nationalityCode, dontClear) => {\n try {\n const { setPersonalDetailField, stateOfOrigin, token, setAllStates } = this.props;\n\n if (!dontClear) {\n setPersonalDetailField({\n stateOfOrigin: \"\",\n lgaCode: \"\",\n });\n }\n\n if (stateOfOrigin) {\n this.fetchLGA2(null, true);\n }\n\n this.setState({ allStates2: [], allLGA2: [] });\n\n if (!nationalityCode) {\n nationalityCode = this.props.nationalityCode;\n }\n\n if (nationalityCode === \"N\") {\n nationalityCode = \"NG\";\n }\n\n const state = await api.fetchState(\n { countryCode: nationalityCode },\n token\n );\n\n setAllStates({ allStatesArray: state.data.result })\n this.setState({ allStates2: state.data.result });\n\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (permState, dontClear) => {\n try {\n const { setPersonalDetailField, token, setAllPermLGA, allPermLGA } = this.props;\n\n if (!dontClear) {\n setPersonalDetailField({ permLga: \"\" });\n }\n\n this.setState({ allLGA: [] });\n\n if (!permState) {\n permState = this.props.permState;\n }\n\n const LGA = await api.fetchLGA({ stateCode: permState }, token);\n\n setAllPermLGA({ allPermLGA: LGA.data.result })\n this.setState({ allLGA: allPermLGA });\n\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA2 = async (stateOfOrigin, dontClear) => {\n try {\n const { setPersonalDetailField, token, setAllLGA, allLGAArray } = this.props;\n\n if (!dontClear) {\n setPersonalDetailField({ lgaCode: \"\" });\n }\n\n this.setState({ allLGA2: [] });\n\n if (!stateOfOrigin) {\n stateOfOrigin = this.props.stateOfOrigin;\n }\n\n const LGA = await api.fetchLGA({ stateCode: stateOfOrigin }, token);\n\n setAllLGA({ allLGAArray: LGA.data.result })\n this.setState({ allLGA2: allLGAArray });\n\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n validate = () => {\n const {\n surname,\n firstname,\n nationalityCode,\n title,\n gender,\n maritalStatusCode,\n permCity,\n ssn,\n mobilePhone = \"\",\n formRefno,\n permLga,\n permState,\n placeOfBirth,\n stateOfOrigin,\n lgaCode,\n permanentAddressLocation,\n dateOfBirth,\n confirmMobilePhone = \"\",\n // schemeId,\n permCountry,\n } = this.props;\n\n let isValidated = true,\n formRefnoError = \"\",\n surnameError = \"\",\n firstnameError = \"\",\n nationalityCodeError = \"\",\n stateOfOriginError = \"\",\n lgaCodeError = \"\",\n titleError = \"\",\n genderError = \"\",\n maritalStatusCodeError = \"\",\n permCityError = \"\",\n permanentAddressLocationError = \"\",\n mobilePhoneError = \"\",\n confirmMobilePhoneError = \"\",\n ssnError = \"\",\n permLgaError = \"\",\n permStateError = \"\",\n placeOfBirthError = \"\",\n dateOfBirthError = \"\",\n schemeIdError = \"\",\n permCountryError = \"\";\n\n if (!formRefno) {\n formRefnoError = \"This field is required\";\n isValidated = false;\n }\n\n // if (!schemeId) {\n // schemeIdError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (formRefno.length > 50) {\n formRefnoError = \"Form number should not exceed 50 characters\";\n isValidated = false;\n }\n if (!surname) {\n surnameError = \"This field is required\";\n isValidated = false;\n }\n if (!firstname) {\n firstnameError = \"This field is required\";\n isValidated = false;\n }\n if (!nationalityCode) {\n nationalityCodeError = \"This field is required\";\n isValidated = false;\n }\n if (!stateOfOrigin) {\n stateOfOriginError = \"This field is required\";\n isValidated = false;\n }\n if (!lgaCode) {\n lgaCodeError = \"This field is required\";\n isValidated = false;\n }\n if (!title) {\n titleError = \"This field is required\";\n isValidated = false;\n }\n if (!gender) {\n genderError = \"This field is required\";\n isValidated = false;\n }\n if (!maritalStatusCode) {\n maritalStatusCodeError = \"This field is required\";\n isValidated = false;\n }\n if (!permCity) {\n permCityError = \"This field is required\";\n isValidated = false;\n }\n if (!mobilePhone) {\n mobilePhoneError = \"This field is required\";\n isValidated = false;\n }\n if (mobilePhone.length !== 11) {\n mobilePhoneError = \"Phone number should be 11 digits\";\n isValidated = false;\n }\n if (confirmMobilePhone !== mobilePhone) {\n confirmMobilePhoneError =\n \"Phone number and Confirm Phone Number must be same\";\n isValidated = false;\n }\n if (!ssn) {\n ssnError = \"This field is required\";\n isValidated = false;\n }\n if (ssn.length < 11 || ssn.length > 11) {\n ssnError = \"NIN should be 11 digit long\";\n isValidated = false;\n }\n if (isNaN(this.props.ssn)) {\n ssnError = \"NIN should be only a number\";\n isValidated = false;\n }\n if (nationalityCode === \"NG\" && !permState) {\n permStateError = \"This field is required\";\n isValidated = false;\n }\n\n if (nationalityCode === \"NG\" && !permLga) {\n permLgaError = \"This field is required\";\n isValidated = false;\n }\n\n if (!placeOfBirth) {\n placeOfBirthError = \"This field is required\";\n isValidated = false;\n }\n\n if (!permanentAddressLocation) {\n permanentAddressLocationError = \"This field is required\";\n isValidated = false;\n }\n\n if (!dateOfBirth) {\n dateOfBirthError = \"This field is required\";\n isValidated = false;\n }\n\n if (!permCountry) {\n permCountryError = \"This field is required\";\n isValidated = false;\n }\n\n this.setState({\n surnameError,\n firstnameError,\n nationalityCodeError,\n stateOfOriginError,\n lgaCodeError,\n titleError,\n genderError,\n maritalStatusCodeError,\n permCityError,\n permanentAddressLocationError,\n mobilePhoneError,\n confirmMobilePhoneError,\n ssnError,\n formRefnoError,\n permLgaError,\n permStateError,\n dateOfBirthError,\n placeOfBirthError,\n schemeIdError,\n permCountryError,\n });\n\n return isValidated;\n };\n\n clearAllErrors = () => {\n this.setState({\n surnameError: \"\",\n firstnameError: \"\",\n nationalityCode: \"\",\n titleError: \"\",\n genderError: \"\",\n maritalStatusCodeError: \"\",\n permCityError: \"\",\n permanentAddressLocationError: \"\",\n mobilePhoneError: \"\",\n confirmMobilePhoneError: \"\",\n ssnError: \"\",\n schemeId: \"\",\n });\n };\n\n render() {\n const {\n formRefno,\n setPersonalDetailField,\n title,\n firstname,\n middleName,\n othernames,\n surname,\n maidenName,\n ssn,\n bvn,\n gender,\n dateOfBirth,\n maritalStatusCode,\n nationalityCode,\n permanentAddressLocation,\n permState,\n permLga,\n mobilePhone,\n permCity,\n placeOfBirth,\n countries,\n // schemeId,\n permCountry,\n stateOfOrigin,\n confirmMobilePhone,\n lgaCode,\n isFormHidden,\n allLGAArray,\n isNINVerified,\n allPermLGA\n } = this.props;\n\n const {\n allStates,\n surnameError,\n firstnameError,\n nationalityCodeError,\n titleError,\n genderError,\n maritalStatusCodeError,\n permCityError,\n mobilePhoneError,\n confirmMobilePhoneError,\n ssnError,\n formRefnoError,\n permStateError,\n permLgaError,\n placeOfBirthError,\n permanentAddressLocationError,\n dateOfBirthError,\n // schemeIdError,\n permCountryError,\n stateOfOriginError,\n lgaCodeError,\n allStates2,\n } = this.state;\n\n return (\n \n {\n setPersonalDetailField({ formRefno: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ ssn: e.target.value });\n }}\n />\n {/* {\n setPersonalDetailField({ schemeId: e.target.value });\n }}\n /> */}\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.rsaNINImplementation.personalDetail,\n ...state.rsaNINImplementation.allStates,\n ...state.rsaNINImplementation.allLGA,\n ...state.rsaNINImplementation.allPermLGA,\n countries: state.onboarding.countries,\n token: state.rsaNINImplementation.token,\n isFormHidden: state.rsaNINImplementation.isFormHidden,\n isNINVerified: state.rsaNINImplementation.isNINVerified,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setPersonalDetailField: rsaAction.setPersonalDetailField,\n setToken: rsaAction.setToken,\n setAllStates: rsaAction.setAllStates,\n setAllLGA: rsaAction.setAllLGA,\n setAllPermStates: rsaAction.setAllPermStates,\n setAllPermLGA: rsaAction.setAllPermLGA,\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(withRouter(PersonalDetails));\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\n// import { Input, FormFeedback } from \"reactstrap\";\nimport { withRouter } from \"react-router\";\n\nimport api from \"../../config/api\";\nimport historyAction from \"../../redux/history/action\";\nimport rsaAction from \"../../redux/rsaNINImplementation/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\n\nclass Residence extends Component {\n state = {\n allStates: [],\n allLGA: [],\n pathname: \"\",\n };\n\n componentDidMount() {\n const { customRef, history, setHistory } = this.props;\n\n this.setState({\n pathname: history.location.pathname,\n });\n this.fetchState(null, true);\n\n customRef({ validate: this.validate });\n setHistory(history);\n }\n\n fetchState = async (residenceCountryCode, dontClear) => {\n try {\n const { token, setResidenceField, residenceStateCode } = this.props;\n\n if (!dontClear) {\n setResidenceField({ residenceStateCode: \"\", residenceLGACode: \"\" });\n }\n\n if (residenceStateCode) {\n this.fetchLGA(null, true);\n }\n\n this.setState({ allStates: [], allLGA: [] });\n\n if (!residenceCountryCode) {\n residenceCountryCode = this.props.residenceCountryCode;\n }\n\n const state = await api.fetchState(\n { countryCode: residenceCountryCode },\n token\n );\n\n this.setState({ allStates: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (residenceStateCode, dontClear) => {\n try {\n const { token, setResidenceField } = this.props;\n\n if (!dontClear) {\n setResidenceField({ residenceLGACode: \"\" });\n }\n\n this.setState({ allLGA: [] });\n\n if (!residenceStateCode) {\n residenceStateCode = this.props.residenceStateCode;\n }\n\n const LGA = await api.fetchLGA({ stateCode: residenceStateCode }, token);\n\n this.setState({ allLGA: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n onSelectChange = (e) => {\n const { setResidenceField } = this.props;\n\n setResidenceField({ [e.target.name]: e.target.value });\n\n if (e.target.name === \"residenceCountryCode\") {\n this.fetchState(e.target.value);\n }\n\n if (e.target.name === \"residenceStateCode\") {\n this.fetchLGA(e.target.value);\n }\n };\n\n validate = () => {\n const { email, permZip, confirmEmail } = this.props;\n\n let isValidated = true,\n confirmEmailError = \"\",\n permBoxError = \"\",\n permZipError = \"\",\n emailError = \"\";\n // residenceHouseNoError = \"\";\n // residenceStateCodeError = \"\",\n // residenceLGACodeError = \"\";\n\n // if (!residenceStateCode) {\n // residenceStateCodeError = \"This field is required\";\n // isValidated = false;\n // }\n // if (!residenceLGACode) {\n // residenceLGACodeError = \"This field is required\";\n // isValidated = false;\n // }\n // if (!permBox) {\n // permBoxError = \"This field is required\";\n // isValidated = false;\n // }\n if (!email){\n emailError = \"This field is required\"\n isValidated = false;\n }\n if (email) {\n if (confirmEmail !== email) {\n confirmEmailError = \"Email and Confirm Email must be same\";\n isValidated = false;\n }\n }\n\n // if (!residenceHouseNo) {\n // residenceHouseNoError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (!permZip) {\n permZipError = \"This field is required\";\n isValidated = false;\n }\n this.setState({\n // residenceStateCodeError,\n // residenceLGACodeError,\n permBoxError,\n emailError,\n confirmEmailError,\n // residenceHouseNoError,\n permZipError,\n });\n\n return isValidated;\n };\n\n render() {\n const {\n // residenceCountryCode,\n setResidenceField,\n // residenceHouseNo,\n // residenceLGACode,\n // residenceStateCode,\n // residenceStreetName,\n // residenceTownCity,\n permZip,\n email,\n permanentAddress,\n permanentAddress1,\n permBox,\n confirmEmail,\n // countries\n } = this.props;\n\n const {\n emailError,\n\n confirmEmailError,\n permBoxError,\n // residenceHouseNoError,\n permZipError,\n // allStates,\n // allLGA,\n // residenceStateCodeError,\n // residenceLGACodeError\n } = this.state;\n\n return (\n \n {\n setPersonalDetailField({ surname: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ firstname: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ middleName: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ othernames: e.target.value });\n }}\n />\n \n \n {countries.map((item) => (\n \n ))}\n \n {nationalityCodeError && (\n {nationalityCodeError} \n )}\n \n \n {allStates2.map((item) => (\n \n ))}\n\n \n {!!stateOfOriginError && (\n {stateOfOriginError} \n )}\n \n \n {allLGAArray.map((item) => (\n \n ))}\n \n {!!lgaCodeError && {lgaCodeError} }\n \n \n \n \n \n \n \n {titleError && {titleError} }\n \n \n \n \n \n {genderError && {genderError} }\n \n \n \n \n \n \n \n \n {maritalStatusCodeError && (\n {maritalStatusCodeError} \n )}\n {\n setPersonalDetailField({ dateOfBirth: e });\n }}\n containerStyles={{ width: \"100%\" }}\n />\n {\n setPersonalDetailField({ placeOfBirth: e.target.value });\n }}\n />\n \n \n {countries.map((item) => (\n \n ))}\n \n {\n setPersonalDetailField({ permCity: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ maidenName: e.target.value });\n }}\n />\n \n \n \n \n \n {!!permanentAddressLocationError && (\n {permanentAddressLocationError} \n )}\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!permStateError && (\n {permStateError} \n )}\n \n \n {allPermLGA.map((item) => (\n \n ))}\n \n {!!permLgaError && {permLgaError} }\n {\n setPersonalDetailField({ mobilePhone: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ confirmMobilePhone: e.target.value });\n }}\n />\n {/* {\n setPersonalDetailField({ ssn: e.target.value });\n }}\n /> */}\n {\n setPersonalDetailField({ bvn: e.target.value });\n }}\n />\n
\n \n {\n setResidenceField({ permanentAddress: e.target.value });\n }}\n />\n {/* {\n setResidenceField({ residenceHouseNo: e.target.value });\n }}\n /> */}\n {\n setResidenceField({ permanentAddress1: e.target.value });\n }}\n />\n {/* {\n setResidenceField({ residenceStreetName: e.target.value });\n }}\n />\n {\n setResidenceField({ residenceTownCity: e.target.value });\n }}\n />\n \n \n {countries.map(item => (\n \n ))}\n \n \n \n {allStates.map(item => (\n \n ))}\n \n {!!residenceStateCodeError && (\n {residenceStateCodeError} \n )}\n \n \n {allLGA.map(item => (\n \n ))}\n \n {!!residenceLGACodeError && (\n {residenceLGACodeError} \n )} */}\n {/* {\n setResidenceField({ residenceLGACode: e.target.value });\n }}\n /> */}\n {/* {\n setResidenceField({ residenceStateCode: e.target.value });\n }}\n /> */}\n {/* {\n setResidenceField({ residenceCountryCode: e.target.value });\n }}\n /> */}\n {\n setResidenceField({ permZip: e.target.value });\n }}\n />\n {\n setResidenceField({ email: e.target.value });\n }}\n />\n {\n setResidenceField({ confirmEmail: e.target.value });\n }}\n />\n {\n setResidenceField({ permBox: e.target.value });\n }}\n />\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.rsaNINImplementation.residence,\n token: state.rsaNINImplementation.token,\n countries: state.onboarding.countries,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setResidenceField: rsaAction.setResidenceField,\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(withRouter(Residence));\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Input, FormFeedback } from \"reactstrap\";\nimport { withRouter } from \"react-router\";\n\nimport SelectPagination from \"../../component/SelectPagination/SelectPagination\";\nimport api from \"../../config/api\";\nimport historyAction from \"../../redux/history/action\";\nimport rsaAction from \"../../redux/rsaNINImplementation/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\nimport DatePicker from \"../../component/DatePicker/DatePicker\";\n\nclass Employer extends Component {\n state = {\n allStates: [],\n allLGA: [],\n sector: [],\n confirmEmployerPhone: \"\",\n pathname: \"\"\n };\n\n componentDidMount = async () => {\n const { customRef, history, setHistory } = this.props;\n\n\n this.fetchState(null, true);\n\n try {\n let response = await api.fetchAllSectors();\n this.setState({\n sector: response.data.result,\n });\n } catch (error) {\n console.log(\"E =>\", error);\n }\n \n this.setState({\n pathname: history.location.pathname,\n });\n\n customRef({ validate: this.validate });\n setHistory(history);\n };\n\n onSelectChange = (e) => {\n const { setEmployerField } = this.props;\n\n setEmployerField({ [e.target.name]: e.target.value });\n\n if (e.target.name === \"employerCountry\") {\n this.fetchState(e.target.value);\n }\n\n if (e.target.name === \"employerStatecode\") {\n this.fetchLGA(e.target.value);\n }\n };\n\n fetchState = async (employerCountry, dontClear) => {\n try {\n const { setEmployerField, employerStatecode, token } = this.props;\n\n if (!dontClear) {\n setEmployerField({\n employerStatecode: \"\",\n employerLga: \"\",\n });\n }\n\n this.setState({ allStates: [], allLGA: [] });\n\n if (!employerCountry) {\n employerCountry = this.props.employerCountry;\n }\n\n if (employerStatecode) {\n this.fetchLGA(null, true);\n }\n\n const state = await api.fetchState(\n { countryCode: employerCountry },\n token\n );\n this.setState({ allStates: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (employerStatecode, dontClear) => {\n try {\n const { setEmployerField, token } = this.props;\n\n if (!dontClear) {\n setEmployerField({ employerLga: \"\" });\n }\n\n this.setState({ allLGA: [] });\n\n if (!employerStatecode) {\n employerStatecode = this.props.employerStatecode;\n }\n\n const LGA = await api.fetchLGA({ stateCode: employerStatecode }, token);\n\n this.setState({ allLGA: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n validate = () => {\n const {\n // employerBuildingNameOrNumber,\n // employerStreetName,\n employerBusiness,\n employerLga,\n employerStatecode,\n // employerNigeriaOrAbroad,\n employerType,\n dateOfFirstApointment,\n employerCity,\n // employerBox,\n // employerZip,\n employerPhone = \"\",\n stateOfPosting,\n employerLocation,\n employerCode,\n confirmEmployerPhone = \"\",\n } = this.props;\n\n let isValidated = true,\n // employerBuildingNameOrNumberError,\n // employerStreetNameError,\n employerBusinessError,\n employerLgaError,\n employerStatecodeError,\n // employerNigeriaOrAbroadError,\n employerTypeError,\n dateOfFirstApointmentError,\n employerCityError,\n employerZipError,\n employerBoxError,\n employerPhoneError,\n confirmEmployerPhoneError,\n stateOfPostingError,\n employerLocationError,\n employerCodeError;\n\n // if (!employerBuildingNameOrNumber) {\n // employerBuildingNameOrNumberError = \"This field is required\";\n // isValidated = false;\n // }\n // if (!employerStreetName) {\n // employerStreetNameError = \"This field is required\";\n // isValidated = false;\n // }\n if (confirmEmployerPhone !== employerPhone) {\n confirmEmployerPhoneError =\n \"Confirm Employer Contact Phone and Employer's Contact Phone must be same\";\n isValidated = false;\n }\n if (!employerLocation) {\n employerLocationError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerCode) {\n employerCodeError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerBusiness) {\n employerBusinessError = \"This field is required\";\n isValidated = false;\n }\n\n if (!stateOfPosting) {\n stateOfPostingError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerCity) {\n employerCityError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerStatecode) {\n employerStatecodeError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerLga) {\n employerLgaError = \"This field is required\";\n isValidated = false;\n }\n\n // if (!employerNigeriaOrAbroad) {\n // console.log(\"employerNigeriaOrAbroad\")\n\n // employerNigeriaOrAbroadError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (!employerType) {\n employerTypeError = \"This field is required\";\n isValidated = false;\n }\n\n if (employerType === \"PU\" && !dateOfFirstApointment) {\n dateOfFirstApointmentError = \"This field is required\";\n isValidated = false;\n }\n\n // if (!employerBox) {\n // employerBoxError = \"This field is required\";\n // isValidated = false;\n // }\n\n // if (!employerZip) {\n // employerZipError = \"This field is required\";\n // isValidated = false;\n // }\n\n // if (!employerPhone) {\n // employerPhoneError = \"This field is required\";\n // isValidated = false;\n // }\n\n this.setState({\n // employerBuildingNameOrNumberError,\n // employerStreetNameError,\n employerBusinessError,\n employerStatecodeError,\n employerLgaError,\n employerCityError,\n // employerNigeriaOrAbroadError,\n employerTypeError,\n dateOfFirstApointmentError,\n employerZipError,\n employerBoxError,\n employerPhoneError,\n confirmEmployerPhoneError,\n stateOfPostingError,\n employerLocationError,\n employerCodeError,\n });\n\n return isValidated;\n };\n\n render() {\n const {\n employerType,\n setEmployerField,\n // employerCode,\n // employerBuildingNameOrNumber,\n employerCountry,\n employerLga,\n employerBusiness,\n // employerNigeriaOrAbroad,\n employerPhone,\n employerBox,\n employerStatecode,\n // employerStreetName,\n employerCity,\n employerZip,\n // dateOfCurrentEmployment,\n dateOfFirstApointment,\n employerAddress1,\n employerAddress,\n countries,\n stateOfPosting,\n allEmployers,\n employerCode,\n employerLocation,\n confirmEmployerPhone,\n } = this.props;\n\n const {\n allStates,\n allLGA,\n sector,\n // employerBuildingNameOrNumberError,\n // employerStreetNameError,\n employerBusinessError,\n employerStatecodeError,\n employerLgaError,\n // employerNigeriaOrAbroadError,\n // employerAddress1Error,\n // employerAddressError\n employerTypeError,\n dateOfFirstApointmentError,\n employerCityError,\n employerZipError,\n employerBoxError,\n employerPhoneError,\n confirmEmployerPhoneError,\n stateOfPostingError,\n isEmployerDropdown,\n employerLocationError,\n employerCodeError,\n } = this.state;\n\n return (\n \n \n \n {sector.map((item) => (\n \n ))}\n \n\n {!!employerTypeError && (\n {employerTypeError} \n )}\n \n this.setState({ isEmployerDropdown })\n }\n allOptions={allEmployers}\n lookFor=\"EmployerName\"\n value={employerCode}\n key=\"EmployerCode\"\n onSelect={(item) => {\n setEmployerField({\n employerCode: item.EmployerName,\n employerRawCode: item.EmployerCode,\n });\n\n this.setState({ isEmployerDropdown: false });\n }}\n />\n {/* {\n setEmployerField({ employerType: e.target.value });\n }}\n /> */}\n {/* {\n setEmployerField({ employerCode: e.target.value });\n }}\n /> */}\n {/* {\n setEmployerField({ employerBuildingNameOrNumber: e.target.value });\n }}\n /> */}\n {/* {\n setEmployerField({ employerStreetName: e.target.value });\n }}\n errorMessage={employerStreetNameError}\n /> */}\n {\n setEmployerField({ employerCity: e.target.value });\n }}\n />\n \n \n {countries.map((item) => (\n \n ))}\n \n \n \n \n \n \n {!!employerLocationError && (\n {employerLocationError} \n )}\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!employerStatecodeError && (\n {employerStatecodeError} \n )}\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!stateOfPostingError && (\n {stateOfPostingError} \n )}\n \n \n {allLGA.map((item) => (\n \n ))}\n \n {!!employerLgaError && (\n {employerLgaError} \n )}\n {\n setEmployerField({ employerPhone: e.target.value });\n }}\n />\n {\n setEmployerField({ confirmEmployerPhone: e.target.value });\n }}\n />\n {\n setEmployerField({ employerBox: e.target.value });\n }}\n />\n {\n setEmployerField({ employerBusiness: e.target.value });\n }}\n />\n {\n setEmployerField({ employerAddress1: e.target.value });\n }}\n />\n {\n setEmployerField({ employerAddress: e.target.value });\n }}\n />\n {/* {\n setEmployerField({ employerNigeriaOrAbroad: e.target.value });\n }}\n >\n \n \n \n */}\n {/* {!!employerNigeriaOrAbroadError && (\n {employerNigeriaOrAbroadError} \n )} */}\n {\n setEmployerField({ employerZip: e.target.value });\n }}\n />\n {\n setEmployerField({ dateOfFirstApointment: e });\n }}\n containerStyles={{ width: \"100%\" }}\n />\n {/* {\n setEmployerField({ dateOfCurrentEmployment: e.target.value });\n }}\n /> */}\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.rsaNINImplementation.employer,\n token: state.rsaNINImplementation.token,\n countries: state.onboarding.countries,\n allEmployers: state.auth.allEmployers,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setEmployerField: rsaAction.setEmployerField,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(withRouter(Employer));\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Input, FormFeedback } from \"reactstrap\";\nimport { withRouter } from \"react-router\";\n\nimport api from \"../../config/api\";\nimport historyAction from \"../../redux/history/action\";\nimport rsaAction from \"../../redux/rsaNINImplementation/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\n\nclass Employer extends Component {\n state = {\n allStates: [],\n allLGA: [],\n pathname: \"\",\n };\n\n componentDidMount() {\n const { customRef, history, setHistory } = this.props;\n\n this.fetchState(null, true);\n this.setState({\n pathname: history.location.pathname,\n });\n\n customRef({ validate: this.validate });\n setHistory(history);\n }\n\n onSelectChange = (e) => {\n const { setNextOfKinField } = this.props;\n\n setNextOfKinField({ [e.target.name]: e.target.value });\n\n if (e.target.name === \"nokStatecode\") {\n this.fetchLGA(e.target.value);\n }\n };\n\n fetchState = async (nokCountry, dontClear) => {\n try {\n const { setNextOfKinField, nokStatecode, token } = this.props;\n\n if (!dontClear) {\n setNextOfKinField({\n nokStatecode: \"\",\n nokLga: \"\",\n });\n }\n\n this.setState({ allStates: [], allLGA: [] });\n\n if (!nokCountry) {\n nokCountry = this.props.nokCountry;\n }\n\n if (nokCountry === \"N\") {\n nokCountry = \"NG\";\n }\n\n if (nokStatecode) {\n this.fetchLGA(null, true);\n }\n\n const state = await api.fetchState({ countryCode: nokCountry }, token);\n\n this.setState({ allStates: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (nokStatecode, dontClear) => {\n try {\n const { token, setNextOfKinField } = this.props;\n\n if (!dontClear) {\n setNextOfKinField({ nokLga: \"\" });\n }\n\n this.setState({ allLGA: [] });\n\n if (!nokStatecode) {\n nokStatecode = this.props.nokStatecode;\n }\n\n const LGA = await api.fetchLGA({ stateCode: nokStatecode }, token);\n\n this.setState({ allLGA: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n validate = () => {\n const {\n nokMobilePhone = \"\",\n nokResidenceHouseNumber,\n nokTitle,\n // nokResidenceStreetName,\n nokName,\n nokSurname,\n nokGender,\n nokRelationship,\n nokStatecode,\n nokLga,\n nokLocation,\n nokCountry,\n nokEmailaddress = \"\",\n nokConfirmEmailaddress = \"\",\n nokConfirmMobilePhone = \"\",\n // nokOthername\n nokCity\n } = this.props;\n\n let isValidated = true,\n nokMobilePhoneError,\n nokConfirmMobilePhoneError,\n nokResidenceHouseNumberError,\n // nokResidenceStreetNameError,\n nokTitleError,\n nokNameError,\n nokSurnameError,\n nokGenderError,\n nokRelationshipError,\n nokStatecodeError,\n nokLgaError,\n nokLocationError,\n nokCountryError,\n nokEmailaddressError,\n nokConfirmEmailaddressError,\n nokCityError,\n nokOthernameError;\n // nokCityError;\n\n\n if (nokMobilePhone.length !== 11) {\n nokMobilePhoneError = \"Phone number should be 11 digits\";\n isValidated = false;\n }\n if (nokConfirmMobilePhone !== nokMobilePhone) {\n nokConfirmMobilePhoneError =\n \"NOK Phone number and Confirm Phone Number must be same\";\n isValidated = false;\n }\n if (nokConfirmEmailaddress !== nokEmailaddress) {\n nokConfirmEmailaddressError =\n \"NOK Email address and Confirm Email address must be same\";\n isValidated = false;\n }\n if (!nokCountry) {\n nokCountryError = \"This field is required\";\n isValidated = false;\n }\n\n if (!nokResidenceHouseNumber) {\n nokResidenceHouseNumberError = \"This field is required\";\n isValidated = false;\n }\n\n if (!nokCity) {\n nokCityError = \"This field is required\";\n isValidated = false;\n }\n // if (nokLocation === \"N\" && !nokCity) {\n // nokCityError = \"This field is required\";\n // isValidated = false;\n // }\n // if (!nokResidenceStreetName) {\n // nokResidenceStreetNameError = \"This field is required\";\n // isValidated = false;\n // }\n if (!nokTitle) {\n nokTitleError = \"This field is required\";\n isValidated = false;\n }\n if (!nokName) {\n nokNameError = \"This field is required\";\n isValidated = false;\n }\n if (!nokSurname) {\n nokSurnameError = \"This field is required\";\n isValidated = false;\n }\n if (!nokGender) {\n nokGenderError = \"This field is required\";\n isValidated = false;\n }\n\n if (!nokRelationship) {\n nokRelationshipError = \"This field is required\";\n isValidated = false;\n }\n\n if (nokLocation === \"N\" && !nokStatecode) {\n nokStatecodeError = \"This field is required\";\n isValidated = false;\n }\n\n if (nokLocation === \"N\" && !nokLga) {\n nokLgaError = \"This field is required\";\n isValidated = false;\n }\n\n if (!nokLocation) {\n nokLocationError = \"This field is required\";\n isValidated = false;\n }\n\n // if (!nokEmailaddress) {\n // nokEmailaddressError = \"This field is required\";\n // isValidated = false;\n // }\n\n // if (!nokOthername) {\n // nokOthernameError = \"This field is required\";\n // isValidated = false;\n // }\n\n this.setState({\n nokMobilePhoneError,\n nokConfirmMobilePhoneError,\n nokResidenceHouseNumberError,\n // nokResidenceStreetNameError,\n nokTitleError,\n nokNameError,\n nokSurnameError,\n nokGenderError,\n nokRelationshipError,\n nokStatecodeError,\n nokLgaError,\n nokLocationError,\n nokCountryError,\n nokEmailaddressError,\n nokConfirmEmailaddressError,\n nokOthernameError,\n nokCityError\n // nokCityError\n });\n\n return isValidated;\n };\n\n render() {\n const {\n nokEmailaddress,\n setNextOfKinField,\n nokName,\n nokGender,\n nokOthername,\n nokLocation,\n nokMobilePhone,\n nokBox,\n nokRelationship,\n nokCountry,\n nokAddress,\n nokAddress1,\n nokLga,\n nokStatecode,\n // nokResidenceStreetName,\n nokCity,\n nokSurname,\n nokTitle,\n nokZip,\n countries,\n // nokOthername,\n allRelationShips,\n nokResidenceHouseNumber,\n nokConfirmEmailaddress,\n nokConfirmMobilePhone,\n } = this.props;\n\n const {\n allLGA,\n allStates,\n nokMobilePhoneError,\n\n nokConfirmMobilePhoneError,\n nokResidenceHouseNumberError,\n // nokResidenceStreetNameError,\n nokTitleError,\n nokNameError,\n nokSurnameError,\n nokGenderError,\n nokRelationshipError,\n nokLgaError,\n nokStatecodeError,\n nokLocationError,\n nokCountryError,\n nokOthernameError,\n nokEmailaddressError,\n nokCityError,\n nokConfirmEmailaddressError,\n } = this.state;\n\n return (\n \n \n \n \n \n \n \n \n {!!nokTitleError && (\n {nokTitleError} \n )}\n {\n setNextOfKinField({ nokName: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokOthername: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokSurname: e.target.value });\n }}\n />\n\n {/* {\n setNextOfKinField({ nokOthername: e.target.value });\n }}\n /> */}\n\n \n \n \n \n \n {!!nokGenderError && (\n {nokTitleError} \n )}\n\n \n \n {countries.map((item) => (\n \n ))}\n \n {!!nokCountryError && (\n {nokCountryError} \n )}\n {\n setNextOfKinField({ nokMobilePhone: e.target.value });\n }}\n errorMessage={nokMobilePhoneError}\n />\n {\n setNextOfKinField({ nokConfirmMobilePhone: e.target.value });\n }}\n errorMessage={nokConfirmMobilePhoneError}\n />\n \n \n {allRelationShips.map((item) => (\n \n ))}\n \n\n {/* {\n setNextOfKinField({ nokRelationship: e.target.value });\n }}\n /> */}\n {\n setNextOfKinField({ nokEmailaddress: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokConfirmEmailaddress: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokLocation: e.target.value });\n this.fetchState(e.target.value);\n }}\n >\n \n \n \n \n {!!nokLocationError && (\n {nokLocationError} \n )}\n {\n setNextOfKinField({ nokAddress1: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokAddress: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokResidenceHouseNumber: e.target.value });\n }}\n errorMessage={nokResidenceHouseNumberError}\n />\n {/* {\n setNextOfKinField({ nokResidenceStreetName: e.target.value });\n }}\n errorMessage={nokResidenceStreetNameError}\n /> */}\n {\n setNextOfKinField({ nokCity: e.target.value });\n }}\n errorMessage={nokCityError}\n />\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!nokStatecodeError && (\n {nokStatecodeError} \n )}\n \n \n {allLGA.map((item) => (\n \n ))}\n \n {!!nokLgaError && {nokLgaError} }\n {\n setNextOfKinField({ nokBox: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokZip: e.target.value });\n }}\n />\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.rsaNINImplementation.nextOfKin,\n token: state.rsaNINImplementation.token,\n countries: state.onboarding.countries,\n allRelationShips: state.auth.relationShips,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setNextOfKinField: rsaAction.setNextOfKinField,\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(withRouter(Employer));\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Row, Col } from \"reactstrap\";\nimport Ink from \"react-ink\";\n\nimport {\n imageToDataURL,\n isNetworkRequestFailedError,\n} from \"../../config/helpers\";\nimport historyAction from \"../../redux/history/action\";\nimport authAction from \"../../redux/auth/action\";\nimport rsaAction from \"../../redux/rsaNINImplementation/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\n\nclass Signature extends Component {\n state = {\n signatureImageError: \"\",\n };\n\n componentDidMount() {\n const { customRef } = this.props;\n\n customRef({ validate: this.validate });\n }\n\n validate = () => {\n const { signatureImage } = this.props;\n\n let isValidated = true,\n signatureImageError;\n\n if (!signatureImage) {\n signatureImageError = \"signature Image is required\";\n isValidated = false;\n }\n\n this.setState({\n signatureImageError,\n });\n\n return isValidated;\n };\n\n handleOnChange = async (e) => {\n const { setSignatureField, setAlertMessage } = this.props;\n\n try {\n if (e.target.files[0]) {\n const response = await imageToDataURL(e.target.files[0]);\n setSignatureField(response);\n }\n } catch (error) {\n setAlertMessage({\n type: \"error\",\n message: error.message,\n onTryAgain: isNetworkRequestFailedError(error)\n ? () => this.handleOnChange(e)\n : null,\n });\n }\n };\n\n render() {\n const { signatureImage } = this.props;\n const { signatureImageError } = this.state;\n\n return (\n \n \n
\n {!!signatureImage && (\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n signatureImage: state.rsaNINImplementation.signatureImage,\n token: state.rsaNINImplementation.token,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setSignatureField: rsaAction.setSignatureField,\n setAlertMessage: authAction.setAlertMessage,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Signature);\n","import { StyleSheet } from \"@react-pdf/renderer\";\n\nexport default StyleSheet.create({\n page: {\n flexDirection: \"column\",\n flex: 1,\n backgroundColor: \"white\",\n padding: 15,\n },\n container: {},\n pictureContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n },\n timestamp: {\n flex: 1,\n fontSize: 12,\n },\n contentContainer: {\n marginTop: 15,\n },\n});\n","import { StyleSheet } from \"@react-pdf/renderer\";\n\nexport default StyleSheet.create({\n container: {\n display: \"flex\",\n flexDirection: \"row\",\n marginVertical: 10\n },\n snoContainer: {\n width: 30,\n },\n snoText: {\n fontSize: \"12pt\",\n },\n questionText: {\n fontSize: \"12pt\",\n flex: 1,\n },\n answerText: {\n fontSize: \"12pt\",\n fontWeight: \"black\"\n },\n});\n","import React from \"react\";\nimport { View, Text } from \"@react-pdf/renderer\";\nimport style from \"./style\";\n\nfunction PdfSummaryItem(props) {\n return (\n \n \n
\n )}\n \n
\n\n \n {/*
\n Preview Form
*/}\n\n
\n \n {open && (\n \n );\n }\n return null;\n }}\n \n )}\n {/* \n */}\n {/* */}\n
\n \n \n
\n {!!pictureImage && (\n this.setState({ isModal: false })}\n isOpen={isModal}\n />\n\n this.setState({ showPreview: false })}\n isOpen={this.state.showPreview}\n />\n\n {this.state.submit && (\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n personalDetail: state.rsaNINImplementation.personalDetail,\n pictureImage: state.rsaNINImplementation.pictureImage,\n residence: state.rsaNINImplementation.residence,\n employer: state.rsaNINImplementation.employer,\n nextOfKin: state.rsaNINImplementation.nextOfKin,\n signatureImage: state.rsaNINImplementation.signatureImage,\n formImage: state.rsaNINImplementation.formImage,\n bankDetails: state.rsaNINImplementation.bankDetails,\n token: state.rsaNINImplementation.token,\n ninVerificationToken: state.rsaNINImplementation.ninVerificationToken,\n baseURL: state.rsaNINImplementation.baseURL,\n isFormHidden: state.rsaNINImplementation.isFormHidden,\n validateUser: state.onboarding.user,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setPictureField: rsaAction.setPictureField,\n setAlertMessage: authAction.setAlertMessage,\n setConsentFormField: rsaAction.setConsentFormField,\n resetRSAForm: rsaAction.resetRSAForm,\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(withRouter(Picture));\n","import React from \"react\";\nimport { connect } from \"react-redux\";\n\nimport authAction from \"../../redux/auth/action\";\nimport { capatalize } from \"../../config/helpers\";\nimport CustomButton from \"../CustomButton/CustomButton\";\nimport \"./style.css\";\n\nfunction CustomModel({\n type = \"Error\",\n alertMessage = \"Something went wrong\",\n secondMessage = \"\",\n removeAlertMessage,\n onClickSuccess = this.props.onClickSuccess,\n onClickReject = this.props.onClickReject,\n hidden = false\n}) {\n\n return (\n \n \n
\n )}\n \n \n {this.props.pictureImage && !this.state.isConsentAccepted && (\n {\n this.setState({ isModal: true });\n }}\n />\n \n )}\n {this.state.isConsentAccepted && (\n {\n this.setState({ showPreview: true });\n }}\n />\n \n )}\n {\n this.upload();\n }}\n />\n \n
\n
\n {isLoading && \n
\n );\n}\n\nconst mapStateToProps = () => ({});\n\nconst mapDispatchToProps = {\n removeAlertMessage: authAction.removeAlertMessage,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(CustomModel);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Container, Row, Col } from \"reactstrap\";\nimport Ink from \"react-ink\";\n\nimport api from \"../../config/api\";\nimport \"./style.css\";\nimport StepTab from \"./StepTab\";\nimport BankDetails from \"./BankDetails\";\nimport PersonalDetail from \"./PersonalDetail\";\nimport Residence from \"./Residence\";\nimport Employer from \"./Employer\";\nimport NextOfKin from \"./NextOfKin\";\nimport Signature from \"./Signature\";\nimport Picture from \"./Picture\";\n// import ConsentForm from \"./ConsentForm\";\nimport historyAction from \"../../redux/history/action\";\nimport onboardingAction from \"../../redux/onboarding/action\";\nimport rsaAction from \"../../redux/rsaNINImplementation/action\";\nimport PageHead from \"../../component/pageHead/PageHead\";\nimport CustomLoader from \"../../component/CustomLoader/CustomLoader\";\nimport CustomModel from \"../../component/CustomModel/CustomModel\";\nimport nextBlueIcon from \"../../assets/icons/Conti_blue.png\";\nimport prevBlueIcon from \"../../assets/icons/back_blue.png\";\nimport authAction from \"../../redux/auth/action\";\nimport constants from \"../../config/constants\";\n\nclass Onboarding extends Component {\n state = {\n step: 1,\n isLoading: false,\n pathname: null,\n isModelVisible: false,\n alertMessage: \"\",\n };\n\n componentDidMount() {\n const { history, setHistory } = this.props;\n\n this.setState({\n pathname: history.location.pathname,\n });\n\n this.validate();\n this.fetchCountries();\n\n setHistory(history);\n }\n\n fetchBaseURLandToken = async () => {\n try {\n const { setBaseURL, setRSANINVerificationToken } = this.props;\n const baseURLandToken = await api.getBaseURLandPublicToken();\n\n setBaseURL(baseURLandToken.data.result);\n setRSANINVerificationToken(baseURLandToken.data.format);\n } catch (e) {\n console.log(e);\n }\n };\n\n fetchCountries = async () => {\n try {\n const { saveCountries } = this.props;\n const response = await api.fetchCountries();\n\n saveCountries(response.data.result);\n } catch (e) {\n console.log(\"Error\", e.message);\n }\n };\n\n validate = async () => {\n const { validateUser, getUser } = this.props;\n\n if (!validateUser.userName) {\n this.setState({ isLoading: true });\n\n try {\n const response = await api.getUsernameAndPasswordUBA(\n {\n userName: \"test\",\n },\n \"\"\n );\n\n const data = {\n userName: response.data.result.UserName,\n password: response.data.result.Password,\n };\n\n getUser(data);\n } catch (e) {\n console.log(\"Error\", e.message);\n }\n this.setState({ isLoading: false });\n }\n };\n\n verifyNIN = async () => {\n try {\n if (isNaN(this.props.ssn)) {\n return this.props.setAlertMessage({\n type: \"error\",\n message: \"NIN should be only number\",\n });\n }\n if (this.props.ssn.length < 11 || this.props.ssn.length > 11) {\n return this.props.setAlertMessage({\n type: \"error\",\n message: \"NIN should be 11 digit long\",\n });\n }\n\n this.setState({\n isLoading: true,\n });\n\n await this.fetchBaseURLandToken();\n\n const { setIsFormHidden, baseURL, ninVerificationToken, ssn, setIsNINVerified } = this.props;\n\n const body = {\n nin: ssn,\n };\n const headers = {\n Authorization: `Bearer ${ninVerificationToken}`,\n };\n const response = await api.verifyNIN(body, headers, baseURL);\n\n await this.dataMappingInField(response.data);\n setIsNINVerified(true);\n setIsFormHidden(false);\n } catch (e) {\n const { setPersonalDetailField } = this.props;\n\n setPersonalDetailField({\n ssn: \"\",\n });\n\n this.setState({\n isModelVisible: true,\n alertMessage:\n \"Record not found, Do you want to continue entering manually?\",\n });\n }\n\n this.setState({\n isLoading: false,\n });\n };\n\n dataMappingInField = async (data) => {\n const {\n setPersonalDetailField,\n countries,\n setNextOfKinField,\n setResidenceField,\n setPictureField,\n setSignatureField,\n permanentAddressLocation,\n setEmployerField\n } = this.props;\n let nationalityCode;\n let stateCode;\n let LGACode;\n let permStateCode;\n let permLGACode;\n let permCountryCode;\n // let NOKStateCode;\n // let NOKLGACode;\n try {\n let dateOfBirth = await this.transformDateIntoValidDate(data.birthdate);\n\n setPersonalDetailField({\n surname: data.surname,\n firstname: data.firstname,\n middleName: data.maidenname,\n dateOfBirth: new Date(dateOfBirth),\n permCity: data.residence_Town,\n maidenName: data.maidenname,\n mobilePhone: data.telephoneno,\n confirmMobilePhone: data.telephoneno,\n });\n\n setResidenceField({\n permanentAddress: data.residence_AdressLine1,\n permZip: \"234\",\n });\n\n setEmployerField({\n employerZip: \"234\",\n })\n\n setNextOfKinField({\n nokName: data.nok_firstname,\n nokSurname: data.nok_surname,\n nokAddress1: data.nok_address1,\n nokAddress: Array.isArray(data.nok_address2) ? (data.nok_address2[0] || \"\") : \"\",\n // nokStatecode: NOKStateCode,\n // nokLga: NOKLGACode,\n nokZip: \"234\",\n });\n\n setPictureField(\"data:image/jpeg;base64,\" + data.picture);\n setSignatureField(\"data:image/jpeg;base64,\" + data.signature);\n\n await this.fetchCountries();\n\n // Finding Gender and Title Code\n let titleCode = data.title;\n titleCode = titleCode.replace(/\\b[a-z]/g, (x) => x.toUpperCase());\n setPersonalDetailField({ title: titleCode });\n\n let genderCode = data.gender;\n genderCode = genderCode.replace(/\\b[a-z]/g, (x) => x.toUpperCase());\n setPersonalDetailField({ gender: genderCode });\n\n // Finding Maritial Status\n let maritalStatusArray = constants.MARITAL_STATUS_CODES;\n let maritialStatusResponse = data.maritalstatus;\n maritialStatusResponse = maritialStatusResponse.replace(/\\b[a-z]/g, (x) =>\n x.toUpperCase()\n );\n\n let maritalStatus = maritalStatusArray.find(\n //eslint-disable-next-line\n (item) => item.label == maritialStatusResponse\n );\n let maritalStatusCode = maritalStatus.value;\n setPersonalDetailField({ maritalStatusCode: maritalStatusCode });\n\n // For permenant country personal Detail tab\n if (data.birthcountry) {\n let permCountry = countries.find(\n //eslint-disable-next-line\n (item) => item.countryName == data.birthcountry.toUpperCase()\n );\n permCountryCode = permCountry.countryCode;\n setPersonalDetailField({ permCountry: permCountryCode });\n }\n\n // For Nationality (Personal Details Tab)\n if (data.birthcountry) {\n let nationalityCountry = countries.find(\n //eslint-disable-next-line\n (item) => item.countryName == data.birthcountry.toUpperCase()\n );\n nationalityCode = nationalityCountry.countryCode;\n }\n setPersonalDetailField({ nationalityCode: nationalityCode });\n\n // For State Of Origin and LGA (Personal Details Tab)\n if (data.self_origin_state && data.birthcountry) {\n let states = await this.fetchStates(nationalityCode);\n let stateOfOrigin = states.find(\n //eslint-disable-next-line\n (item) => item.stateName == data.self_origin_state.toUpperCase()\n );\n stateCode = stateOfOrigin.stateCode;\n setPersonalDetailField({ stateOfOrigin: stateCode });\n\n if (data.self_origin_lga) {\n let LGA = await this.fetchLGA(stateCode);\n let allLGA = LGA.find(\n //eslint-disable-next-line\n (item) => item.lgaName == data.self_origin_lga.toUpperCase()\n );\n LGACode = allLGA.lgaCode;\n setPersonalDetailField({ lgaCode: LGACode });\n }\n }\n\n // For Perm State Of Origin and LGA (Personal Details Tab)\n if (data.residence_state && permanentAddressLocation) {\n let permAddressLocation;\n\n if (permanentAddressLocation === \"N\") {\n permAddressLocation = \"NG\";\n } else {\n permAddressLocation = permanentAddressLocation\n }\n\n let states = await this.fetchPermStates(permAddressLocation);\n console.log(states)\n let stateOfOrigin = states.find(\n //eslint-disable-next-line\n (item) => item.stateName == data.residence_state.toUpperCase()\n );\n console.log(stateOfOrigin)\n permStateCode = stateOfOrigin.stateCode;\n setPersonalDetailField({ permState: permStateCode });\n\n if (data.residence_lga) {\n let LGA = await this.fetchPermLGA(permStateCode);\n let allLGA = LGA.find(\n //eslint-disable-next-line\n (item) => item.lgaName == data.residence_lga.toUpperCase()\n );\n permLGACode = allLGA.lgaCode;\n setPersonalDetailField({ permLga: permLGACode });\n }\n }\n\n // console.log(permanentAddressLocation)\n // // For State Of Origin and LGA (NOK Tab)\n // if (data.nok_state) { // needed country validation\n // let states = await this.fetchNOKStates(\"NG\") // needed country code\n // let stateOfOrigin = states.find(item => item.stateName == data.nok_state.toUpperCase())\n // NOKStateCode = stateOfOrigin.stateCode\n\n // if (data.nok_lga) {\n // let LGA = await this.fetchNOKLGA(stateCode)\n // let allLGA = LGA.find(item => item.lgaName == data.self_origin_lga.toUpperCase())\n // NOKLGACode = allLGA.lgaCode\n // }\n // }\n } catch (e) {\n console.log(e);\n }\n };\n\n transformDateIntoValidDate = (rawDate) => {\n const parts = rawDate.split(\"-\");\n const monthNum = Number(parts[1]);\n return parts[0] + \"-\" + constants.MONTHS[monthNum] + \"-\" + parts[2];\n };\n\n fetchStates = async (nationalityCode) => {\n try {\n const { token, setAllStates } = this.props;\n\n // this.setState({ allStates: [] });\n\n if (!nationalityCode) {\n nationalityCode = this.props.nationalityCode;\n }\n\n const state = await api.fetchState(\n { countryCode: nationalityCode },\n token\n );\n\n setAllStates({ allStatesArray: state.data.result });\n return state.data.result;\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (stateOfOrigin) => {\n try {\n const { token, setAllLGA } = this.props;\n\n if (!stateOfOrigin) {\n stateOfOrigin = this.props.stateOfOrigin;\n }\n\n const LGA = await api.fetchLGA({ stateCode: stateOfOrigin }, token);\n\n setAllLGA({ allLGAArray: LGA.data.result });\n return LGA.data.result;\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchPermStates = async (nationalityCode) => {\n try {\n const { token, setAllPermStates } = this.props;\n\n // this.setState({ allStates: [] });\n\n if (!nationalityCode) {\n nationalityCode = this.props.nationalityCode;\n }\n\n const state = await api.fetchState(\n { countryCode: nationalityCode },\n token\n );\n\n setAllPermStates({ allStatesArray: state.data.result });\n return state.data.result;\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchPermLGA = async (stateOfOrigin) => {\n try {\n const { token, setAllPermLGA } = this.props;\n\n if (!stateOfOrigin) {\n stateOfOrigin = this.props.stateOfOrigin;\n }\n\n const LGA = await api.fetchLGA({ stateCode: stateOfOrigin }, token);\n\n setAllPermLGA({ allPermLGA: LGA.data.result });\n return LGA.data.result;\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchNOKStates = async (nationalityCode) => {\n try {\n const { token, setAllNOKStates } = this.props;\n\n this.setState({ allStates: [] });\n\n if (!nationalityCode) {\n nationalityCode = this.props.nationalityCode;\n }\n\n const state = await api.fetchState(\n { countryCode: nationalityCode },\n token\n );\n\n setAllNOKStates({ allStatesArray: state.data.result });\n return state.data.result;\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchNOKLGA = async (stateOfOrigin) => {\n try {\n const { token, setAllNOKLGA } = this.props;\n\n if (!stateOfOrigin) {\n stateOfOrigin = this.props.stateOfOrigin;\n }\n\n const LGA = await api.fetchLGA({ stateCode: stateOfOrigin }, token);\n\n setAllNOKLGA({ allLGAArray: LGA.data.result });\n return LGA.data.result;\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n mannualyAddData = () => {\n const { setIsFormHidden } = this.props;\n\n setIsFormHidden(false);\n this.setState({ isModelVisible: false });\n };\n\n scrollToTop = () => {\n const target = document.querySelector(\".card-container .flex1\");\n var maxScroll = target.scrollHeight;\n\n var scrollInt = setInterval(() => {\n if (target.scrollTop !== 0) {\n target.scrollTop -= maxScroll / 100;\n } else {\n clearInterval(scrollInt);\n }\n }, 10);\n };\n\n decideTab = () => {\n const { step } = this.state;\n\n switch (step) {\n case 1:\n return (\n \n
\n \n
\n {capatalize(type)}
\n\n
\n {alertMessage}
\n {!!secondMessage &&{secondMessage}
}\n\n
\n \n onClickSuccess()}\n />\n
\n \n onClickReject()}\n />\n
\n \n
\n \n this.verifyNIN()}\n >\n 
\n
\n {step !== 1 && (\n Verify NIN
\nBack
\nContinue
\n{text}
\n\n {\n setBankDetailsField({ bankName: e.target.value });\n }}\n >\n \n {allBanks.map((item) => (\n \n ))}\n \n {!!bankNameError && (\n {bankNameError} \n )}\n {\n setBankDetailsField({ accountName: e.target.value });\n }}\n />\n {\n setBankDetailsField({ accountNumber: e.target.value });\n }}\n />\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.microPensionDublicated.bankDetails,\n allBanks: state.referral.newReferral.allBanks,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setBankDetailsField: mpAction.setBankDetailsField,\n setAlertMessage: authAction.setAlertMessage,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(BankDetails);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Input, FormFeedback } from \"reactstrap\";\n\nimport historyAction from \"../../redux/history/action\";\nimport mpAction from \"../../redux/microPensionDublicated/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\nimport DatePickerComp from \"../../component/DatePicker/DatePicker\";\nimport api from \"../../config/api\";\n\nclass PersonalDetails extends Component {\n state = {\n allStates: [],\n allLGA: [],\n allStates2: [],\n allLGA2: [],\n };\n\n componentDidMount() {\n const { customRef } = this.props;\n\n this.fetchFormReferenceNo();\n this.fetchState(null, true);\n\n customRef({ validate: this.validate });\n }\n\n fetchFormReferenceNo = async () => {\n const { setPersonalDetailField, formRefno } = this.props;\n\n try {\n if (!formRefno) {\n const response = await api.fetchFormReferenceNo();\n setPersonalDetailField({ formRefno: response.data.result });\n }\n } catch (e) {\n console.log(\"e =>\", e);\n }\n };\n\n onSelectChange = (e) => {\n const { setPersonalDetailField } = this.props;\n setPersonalDetailField({ [e.target.name]: e.target.value });\n if (e.target.name === \"permanentAddressLocation\") {\n this.fetchState(e.target.value);\n }\n if (e.target.name === \"permState\") {\n this.fetchLGA(e.target.value);\n }\n if (e.target.name === \"nationalityCode\") {\n this.fetchState2(e.target.value);\n }\n if (e.target.name === \"stateOfOrigin\") {\n this.fetchLGA2(e.target.value);\n }\n };\n\n fetchState = async (permanentAddressLocation, dontClear) => {\n try {\n const { user, setPersonalDetailField, permState } = this.props;\n\n if (!dontClear) {\n setPersonalDetailField({\n permState: \"\",\n permLga: \"\",\n });\n }\n\n if (permState) {\n this.fetchLGA(null, true);\n }\n\n this.setState({ allStates: [], allLGA: [] });\n\n if (!permanentAddressLocation) {\n permanentAddressLocation = this.props.permanentAddressLocation;\n }\n\n if (permanentAddressLocation === \"N\") {\n permanentAddressLocation = \"NG\";\n }\n\n const state = await api.fetchState(\n { countryCode: permanentAddressLocation },\n user.token\n );\n this.setState({ allStates: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchState2 = async (nationalityCode, dontClear) => {\n try {\n const { user, setPersonalDetailField, stateOfOrigin } = this.props;\n\n if (!dontClear) {\n setPersonalDetailField({\n stateOfOrigin: \"\",\n lgaCode: \"\",\n });\n }\n\n if (stateOfOrigin) {\n this.fetchLGA2(null, true);\n }\n\n this.setState({ allStates2: [], allLGA2: [] });\n\n if (!nationalityCode) {\n nationalityCode = this.props.nationalityCode;\n }\n\n if (nationalityCode === \"N\") {\n nationalityCode = \"NG\";\n }\n\n const state = await api.fetchState(\n { countryCode: nationalityCode },\n user.token\n );\n this.setState({ allStates2: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (permState, dontClear) => {\n try {\n const { user, setPersonalDetailField } = this.props;\n\n if (!dontClear) {\n setPersonalDetailField({ permLga: \"\" });\n }\n\n this.setState({ allLGA: [] });\n\n if (!permState) {\n permState = this.props.permState;\n }\n\n const LGA = await api.fetchLGA({ stateCode: permState }, user.token);\n\n this.setState({ allLGA: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA2 = async (stateOfOrigin, dontClear) => {\n try {\n const { user, setPersonalDetailField } = this.props;\n\n if (!dontClear) {\n setPersonalDetailField({ lgaCode: \"\" });\n }\n\n this.setState({ allLGA2: [] });\n\n if (!stateOfOrigin) {\n stateOfOrigin = this.props.stateOfOrigin;\n }\n\n const LGA = await api.fetchLGA({ stateCode: stateOfOrigin }, user.token);\n\n this.setState({ allLGA2: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n validate = () => {\n const {\n surname,\n firstname,\n nationalityCode,\n title,\n gender,\n maritalStatusCode,\n permCity,\n ssn,\n mobilePhone,\n formRefno,\n permLga,\n permState,\n placeOfBirth,\n permanentAddressLocation,\n dateOfBirth,\n stateOfOrigin,\n lgaCode,\n // schemeId,\n permCountry,\n } = this.props;\n\n let isValidated = true,\n formRefnoError = \"\",\n surnameError = \"\",\n firstnameError = \"\",\n nationalityCodeError = \"\",\n stateOfOriginError = \"\",\n lgaCodeError = \"\",\n titleError = \"\",\n genderError = \"\",\n maritalStatusCodeError = \"\",\n permCityError = \"\",\n permanentAddressLocationError = \"\",\n mobilePhoneError = \"\",\n ssnError = \"\",\n permLgaError = \"\",\n permStateError = \"\",\n placeOfBirthError = \"\",\n dateOfBirthError = \"\",\n schemeIdError = \"\",\n permCountryError = \"\";\n\n if (!formRefno) {\n formRefnoError = \"This field is required\";\n isValidated = false;\n }\n\n // if (!schemeId) {\n // schemeIdError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (formRefno.length > 50) {\n formRefnoError = \"Form number should not exceed 50 characters\";\n isValidated = false;\n }\n if (!surname) {\n surnameError = \"This field is required\";\n isValidated = false;\n }\n if (!firstname) {\n firstnameError = \"This field is required\";\n isValidated = false;\n }\n if (!nationalityCode) {\n nationalityCodeError = \"This field is required\";\n isValidated = false;\n }\n if (!stateOfOrigin) {\n stateOfOriginError = \"This field is required\";\n isValidated = false;\n }\n if (!lgaCode) {\n lgaCodeError = \"This field is required\";\n isValidated = false;\n }\n if (!title) {\n titleError = \"This field is required\";\n isValidated = false;\n }\n if (!gender) {\n genderError = \"This field is required\";\n isValidated = false;\n }\n if (!maritalStatusCode) {\n maritalStatusCodeError = \"This field is required\";\n isValidated = false;\n }\n if (!permCity) {\n permCityError = \"This field is required\";\n isValidated = false;\n }\n\n if (!mobilePhone) {\n mobilePhoneError = \"This field is required\";\n isValidated = false;\n }\n if (mobilePhone.length !== 11) {\n mobilePhoneError = \"Phone number should be 11 digits\";\n isValidated = false;\n }\n if (!ssn) {\n ssnError = \"This field is required\";\n isValidated = false;\n }\n if (ssn.length < 11 || ssn.length > 15) {\n ssnError = \"NIN should be under 11-15 digit long\";\n isValidated = false;\n }\n\n if (nationalityCode === \"NG\" && !permState) {\n permStateError = \"This field is required\";\n isValidated = false;\n }\n\n if (nationalityCode === \"NG\" && !permLga) {\n permLgaError = \"This field is required\";\n isValidated = false;\n }\n\n if (!placeOfBirth) {\n placeOfBirthError = \"This field is required\";\n isValidated = false;\n }\n\n if (!permanentAddressLocation) {\n permanentAddressLocationError = \"This field is required\";\n isValidated = false;\n }\n\n if (!dateOfBirth) {\n dateOfBirthError = \"This field is required\";\n isValidated = false;\n }\n\n if (!permCountry) {\n permCountryError = \"This field is required\";\n isValidated = false;\n }\n\n this.setState({\n surnameError,\n firstnameError,\n nationalityCodeError,\n titleError,\n genderError,\n maritalStatusCodeError,\n permCityError,\n permanentAddressLocationError,\n mobilePhoneError,\n ssnError,\n formRefnoError,\n permLgaError,\n permStateError,\n dateOfBirthError,\n placeOfBirthError,\n schemeIdError,\n permCountryError,\n stateOfOriginError,\n lgaCodeError,\n });\n\n return isValidated;\n };\n\n clearAllErrors = () => {\n this.setState({\n surnameError: \"\",\n firstnameError: \"\",\n nationalityCode: \"\",\n titleError: \"\",\n genderError: \"\",\n maritalStatusCodeError: \"\",\n permCityError: \"\",\n permanentAddressLocationError: \"\",\n mobilePhoneError: \"\",\n ssnError: \"\",\n schemeId: \"\",\n });\n };\n\n render() {\n const {\n formRefno,\n setPersonalDetailField,\n title,\n firstname,\n middleName,\n othernames,\n surname,\n maidenName,\n ssn,\n bvn,\n gender,\n dateOfBirth,\n maritalStatusCode,\n nationalityCode,\n permanentAddressLocation,\n permState,\n permLga,\n mobilePhone,\n permCity,\n placeOfBirth,\n countries,\n // schemeId,\n permCountry,\n stateOfOrigin,\n lgaCode,\n } = this.props;\n\n const {\n allStates,\n allLGA,\n surnameError,\n firstnameError,\n nationalityCodeError,\n titleError,\n genderError,\n maritalStatusCodeError,\n permCityError,\n mobilePhoneError,\n ssnError,\n formRefnoError,\n permStateError,\n permLgaError,\n placeOfBirthError,\n permanentAddressLocationError,\n dateOfBirthError,\n // schemeIdError,\n permCountryError,\n stateOfOriginError,\n lgaCodeError,\n allStates2,\n allLGA2,\n } = this.state;\n\n return (\n \n {\n setPersonalDetailField({ formRefno: e.target.value });\n }}\n />\n {/* {\n setPersonalDetailField({ schemeId: e.target.value });\n }}\n /> */}\n {\n setPersonalDetailField({ surname: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ firstname: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ middleName: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ othernames: e.target.value });\n }}\n />\n \n \n {countries.map((item) => (\n \n ))}\n \n {nationalityCodeError && (\n {nationalityCodeError} \n )}\n \n \n {allStates2.map((item) => (\n \n ))}\n \n {!!stateOfOriginError && (\n {stateOfOriginError} \n )}\n \n \n {allLGA2.map((item) => (\n \n ))}\n \n {!!lgaCodeError && {lgaCodeError} }\n \n \n \n \n \n \n \n {titleError && {titleError} }\n \n \n \n \n \n {genderError && {genderError} }\n \n \n \n \n \n \n \n \n {maritalStatusCodeError && (\n {maritalStatusCodeError} \n )}\n {\n setPersonalDetailField({ dateOfBirth: e });\n }}\n containerStyles={{ width: \"100%\" }}\n />\n {\n setPersonalDetailField({ placeOfBirth: e.target.value });\n }}\n />\n \n \n {countries.map((item) => (\n \n ))}\n \n {\n setPersonalDetailField({ permCity: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ maidenName: e.target.value });\n }}\n />\n \n \n \n \n \n {!!permanentAddressLocationError && (\n {permanentAddressLocationError} \n )}\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!permStateError && (\n {permStateError} \n )}\n \n \n {allLGA.map((item) => (\n \n ))}\n \n {!!permLgaError && {permLgaError} }\n {\n setPersonalDetailField({ mobilePhone: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ ssn: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ bvn: e.target.value });\n }}\n />\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.microPensionDublicated.personalDetail,\n countries: state.onboarding.countries,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setPersonalDetailField: mpAction.setPersonalDetailField,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(PersonalDetails);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\n// import { Input, FormFeedback } from \"reactstrap\";\n\nimport api from \"../../config/api\";\nimport historyAction from \"../../redux/history/action\";\nimport mpAction from \"../../redux/microPensionDublicated/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\n\nclass Residence extends Component {\n state = {\n allStates: [],\n allLGA: [],\n };\n\n componentDidMount() {\n const { customRef } = this.props;\n\n this.fetchState(null, true);\n\n customRef({ validate: this.validate });\n }\n\n fetchState = async (residenceCountryCode, dontClear) => {\n try {\n const { user, setResidenceField, residenceStateCode } = this.props;\n\n if (!dontClear) {\n setResidenceField({ residenceStateCode: \"\", residenceLGACode: \"\" });\n }\n\n if (residenceStateCode) {\n this.fetchLGA(null, true);\n }\n\n this.setState({ allStates: [], allLGA: [] });\n\n if (!residenceCountryCode) {\n residenceCountryCode = this.props.residenceCountryCode;\n }\n\n const state = await api.fetchState(\n { countryCode: residenceCountryCode },\n user.token\n );\n\n this.setState({ allStates: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (residenceStateCode, dontClear) => {\n try {\n const { user, setResidenceField } = this.props;\n\n if (!dontClear) {\n setResidenceField({ residenceLGACode: \"\" });\n }\n\n this.setState({ allLGA: [] });\n\n if (!residenceStateCode) {\n residenceStateCode = this.props.residenceStateCode;\n }\n\n const LGA = await api.fetchLGA(\n { stateCode: residenceStateCode },\n user.token\n );\n\n this.setState({ allLGA: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n onSelectChange = (e) => {\n const { setResidenceField } = this.props;\n\n setResidenceField({ [e.target.name]: e.target.value });\n\n if (e.target.name === \"residenceCountryCode\") {\n this.fetchState(e.target.value);\n }\n\n if (e.target.name === \"residenceStateCode\") {\n this.fetchLGA(e.target.value);\n }\n };\n\n validate = () => {\n const { email, permZip } = this.props;\n\n let isValidated = true,\n emailError = \"\",\n permBoxError = \"\",\n permZipError = \"\";\n // residenceHouseNoError = \"\";\n // residenceStateCodeError = \"\",\n // residenceLGACodeError = \"\";\n\n // if (!residenceStateCode) {\n // residenceStateCodeError = \"This field is required\";\n // isValidated = false;\n // }\n // if (!residenceLGACode) {\n // residenceLGACodeError = \"This field is required\";\n // isValidated = false;\n // }\n // if (!permBox) {\n // permBoxError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (!email) {\n emailError = \"This field is required\";\n isValidated = false;\n }\n\n // if (!residenceHouseNo) {\n // residenceHouseNoError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (!permZip) {\n permZipError = \"This field is required\";\n isValidated = false;\n }\n this.setState({\n // residenceStateCodeError,\n // residenceLGACodeError,\n permBoxError,\n emailError,\n // residenceHouseNoError,\n permZipError,\n });\n\n return isValidated;\n };\n\n render() {\n const {\n // residenceCountryCode,\n setResidenceField,\n // residenceHouseNo,\n // residenceLGACode,\n // residenceStateCode,\n // residenceStreetName,\n // residenceTownCity,\n permZip,\n email,\n permanentAddress,\n permanentAddress1,\n permBox,\n // countries\n } = this.props;\n\n const {\n emailError,\n permBoxError,\n // residenceHouseNoError,\n permZipError,\n // allStates,\n // allLGA,\n // residenceStateCodeError,\n // residenceLGACodeError\n } = this.state;\n\n return (\n \n {\n setResidenceField({ permanentAddress: e.target.value });\n }}\n />\n {/* {\n setResidenceField({ residenceHouseNo: e.target.value });\n }}\n /> */}\n {\n setResidenceField({ permanentAddress1: e.target.value });\n }}\n />\n {/* {\n setResidenceField({ residenceStreetName: e.target.value });\n }}\n />\n {\n setResidenceField({ residenceTownCity: e.target.value });\n }}\n />\n \n \n {countries.map(item => (\n \n ))}\n \n \n \n {allStates.map(item => (\n \n ))}\n \n {!!residenceStateCodeError && (\n {residenceStateCodeError} \n )}\n \n \n {allLGA.map(item => (\n \n ))}\n \n {!!residenceLGACodeError && (\n {residenceLGACodeError} \n )} */}\n {/* {\n setResidenceField({ residenceLGACode: e.target.value });\n }}\n /> */}\n {/* {\n setResidenceField({ residenceStateCode: e.target.value });\n }}\n /> */}\n {/* {\n setResidenceField({ residenceCountryCode: e.target.value });\n }}\n /> */}\n {\n setResidenceField({ permZip: e.target.value });\n }}\n />\n {\n setResidenceField({ email: e.target.value });\n }}\n />\n {\n setResidenceField({ permBox: e.target.value });\n }}\n />\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.microPensionDublicated.residence,\n countries: state.onboarding.countries,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setResidenceField: mpAction.setResidenceField,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Residence);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Input, FormFeedback } from \"reactstrap\";\n\nimport SelectPagination from \"../../component/SelectPagination/SelectPagination\";\nimport api from \"../../config/api\";\nimport historyAction from \"../../redux/history/action\";\nimport mpAction from \"../../redux/microPensionDublicated/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\nimport DatePickerComp from \"../../component/DatePicker/DatePicker\";\n\nclass Employer extends Component {\n state = {\n allStates: [],\n allLGA: [],\n sector: []\n };\n\n componentDidMount = async () => {\n const { customRef } = this.props;\n\n this.fetchState(null, true);\n\n try {\n let response = await api.fetchAllSectors()\n this.setState({\n sector: response.data.result\n })\n } catch (error) {\n console.log(\"E =>\", error)\n }\n \n customRef({ validate: this.validate });\n }\n\n onSelectChange = (e) => {\n const { setEmployerField } = this.props;\n\n setEmployerField({ [e.target.name]: e.target.value });\n\n if (e.target.name === \"employerCountry\") {\n this.fetchState(e.target.value);\n }\n\n if (e.target.name === \"employerStatecode\") {\n this.fetchLGA(e.target.value);\n }\n };\n\n fetchState = async (employerCountry, dontClear) => {\n try {\n const { user, setEmployerField, employerStatecode } = this.props;\n\n if (!dontClear) {\n setEmployerField({\n employerStatecode: \"\",\n employerLga: \"\",\n });\n }\n\n this.setState({ allStates: [], allLGA: [] });\n\n if (!employerCountry) {\n employerCountry = this.props.employerCountry;\n }\n\n if (employerStatecode) {\n this.fetchLGA(null, true);\n }\n\n const state = await api.fetchState(\n { countryCode: employerCountry },\n user.token\n );\n this.setState({ allStates: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (employerStatecode, dontClear) => {\n try {\n const { user, setEmployerField } = this.props;\n\n if (!dontClear) {\n setEmployerField({ employerLga: \"\" });\n }\n\n this.setState({ allLGA: [] });\n\n if (!employerStatecode) {\n employerStatecode = this.props.employerStatecode;\n }\n\n const LGA = await api.fetchLGA(\n { stateCode: employerStatecode },\n user.token\n );\n\n this.setState({ allLGA: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n validate = () => {\n const {\n // employerBuildingNameOrNumber,\n // employerStreetName,\n employerBusiness,\n employerLga,\n employerStatecode,\n // employerNigeriaOrAbroad,\n employerType,\n dateOfFirstApointment,\n employerCity,\n // employerBox,\n // employerZip,\n // employerPhone,\n stateOfPosting,\n employerLocation,\n employerCode,\n } = this.props;\n\n let isValidated = true,\n // employerBuildingNameOrNumberError,\n // employerStreetNameError,\n employerBusinessError,\n employerLgaError,\n employerStatecodeError,\n // employerNigeriaOrAbroadError,\n employerTypeError,\n dateOfFirstApointmentError,\n employerCityError,\n employerZipError,\n employerBoxError,\n employerPhoneError,\n stateOfPostingError,\n employerLocationError,\n employerCodeError;\n\n // if (!employerBuildingNameOrNumber) {\n // employerBuildingNameOrNumberError = \"This field is required\";\n // isValidated = false;\n // }\n // if (!employerStreetName) {\n // employerStreetNameError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (!employerLocation) {\n employerLocationError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerCode) {\n employerCodeError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerBusiness) {\n employerBusinessError = \"This field is required\";\n isValidated = false;\n }\n\n if (!stateOfPosting) {\n stateOfPostingError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerCity) {\n employerCityError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerStatecode) {\n employerStatecodeError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerLga) {\n employerLgaError = \"This field is required\";\n isValidated = false;\n }\n\n // if (!employerNigeriaOrAbroad) {\n // console.log(\"employerNigeriaOrAbroad\")\n\n // employerNigeriaOrAbroadError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (!employerType) {\n employerTypeError = \"This field is required\";\n isValidated = false;\n }\n\n if (employerType === \"PU\" && !dateOfFirstApointment) {\n dateOfFirstApointmentError = \"This field is required\";\n isValidated = false;\n }\n\n // if (!employerBox) {\n // employerBoxError = \"This field is required\";\n // isValidated = false;\n // }\n\n // if (!employerZip) {\n // employerZipError = \"This field is required\";\n // isValidated = false;\n // }\n\n // if (!employerPhone) {\n // employerPhoneError = \"This field is required\";\n // isValidated = false;\n // }\n\n this.setState({\n // employerBuildingNameOrNumberError,\n // employerStreetNameError,\n employerBusinessError,\n employerStatecodeError,\n employerLgaError,\n employerCityError,\n // employerNigeriaOrAbroadError,\n employerTypeError,\n dateOfFirstApointmentError,\n employerZipError,\n employerBoxError,\n employerPhoneError,\n stateOfPostingError,\n employerLocationError,\n employerCodeError,\n });\n\n return isValidated;\n };\n\n render() {\n const {\n employerType,\n setEmployerField,\n // employerCode,\n // employerBuildingNameOrNumber,\n employerCountry,\n employerLga,\n employerBusiness,\n // employerNigeriaOrAbroad,\n employerPhone,\n employerBox,\n employerStatecode,\n // employerStreetName,\n employerCity,\n employerZip,\n // dateOfCurrentEmployment,\n dateOfFirstApointment,\n employerAddress1,\n employerAddress,\n countries,\n stateOfPosting,\n allEmployers,\n employerCode,\n employerLocation,\n } = this.props;\n\n const {\n allStates,\n allLGA,\n sector,\n // employerBuildingNameOrNumberError,\n // employerStreetNameError,\n employerBusinessError,\n employerStatecodeError,\n employerLgaError,\n // employerNigeriaOrAbroadError,\n // employerAddress1Error,\n // employerAddressError\n employerTypeError,\n dateOfFirstApointmentError,\n employerCityError,\n employerZipError,\n employerBoxError,\n employerPhoneError,\n stateOfPostingError,\n isEmployerDropdown,\n employerLocationError,\n employerCodeError,\n } = this.state;\n\n return (\n \n \n \n {sector.map(item => (\n \n ))}\n \n\n {!!employerTypeError && (\n {employerTypeError} \n )}\n \n this.setState({ isEmployerDropdown })\n }\n allOptions={allEmployers}\n lookFor=\"EmployerName\"\n value={employerCode}\n key=\"EmployerCode\"\n onSelect={(item) => {\n setEmployerField({\n employerCode: item.EmployerName,\n employerRawCode: item.EmployerCode,\n });\n\n this.setState({ isEmployerDropdown: false });\n }}\n />\n {/* {\n setEmployerField({ employerType: e.target.value });\n }}\n /> */}\n {/* {\n setEmployerField({ employerCode: e.target.value });\n }}\n /> */}\n {/* {\n setEmployerField({ employerBuildingNameOrNumber: e.target.value });\n }}\n /> */}\n {/* {\n setEmployerField({ employerStreetName: e.target.value });\n }}\n errorMessage={employerStreetNameError}\n /> */}\n {\n setEmployerField({ employerCity: e.target.value });\n }}\n />\n \n \n {countries.map((item) => (\n \n ))}\n \n \n \n \n \n \n {!!employerLocationError && (\n {employerLocationError} \n )}\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!employerStatecodeError && (\n {employerStatecodeError} \n )}\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!stateOfPostingError && (\n {stateOfPostingError} \n )}\n \n \n {allLGA.map((item) => (\n \n ))}\n \n {!!employerLgaError && (\n {employerLgaError} \n )}\n {\n setEmployerField({ employerPhone: e.target.value });\n }}\n />\n {\n setEmployerField({ employerBox: e.target.value });\n }}\n />\n {\n setEmployerField({ employerBusiness: e.target.value });\n }}\n />\n {\n setEmployerField({ employerAddress1: e.target.value });\n }}\n />\n {\n setEmployerField({ employerAddress: e.target.value });\n }}\n />\n {/* {\n setEmployerField({ employerNigeriaOrAbroad: e.target.value });\n }}\n >\n \n \n \n */}\n {/* {!!employerNigeriaOrAbroadError && (\n {employerNigeriaOrAbroadError} \n )} */}\n {\n setEmployerField({ employerZip: e.target.value });\n }}\n />\n {\n setEmployerField({ dateOfFirstApointment: e });\n }}\n containerStyles={{ width: \"100%\" }}\n />\n {/* {\n setEmployerField({ dateOfCurrentEmployment: e.target.value });\n }}\n /> */}\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.microPensionDublicated.employer,\n countries: state.onboarding.countries,\n allEmployers: state.auth.allEmployers,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setEmployerField: mpAction.setEmployerField,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Employer);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Input, FormFeedback } from \"reactstrap\";\n\nimport api from \"../../config/api\";\nimport historyAction from \"../../redux/history/action\";\nimport mpAction from \"../../redux/microPensionDublicated/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\n\nclass Employer extends Component {\n state = {\n allStates: [],\n allLGA: [],\n };\n\n componentDidMount() {\n const { customRef } = this.props;\n\n this.fetchState(null, true);\n\n customRef({ validate: this.validate });\n }\n\n onSelectChange = (e) => {\n const { setNextOfKinField } = this.props;\n\n setNextOfKinField({ [e.target.name]: e.target.value });\n\n if (e.target.name === \"nokStatecode\") {\n this.fetchLGA(e.target.value);\n }\n };\n\n fetchState = async (nokCountry, dontClear) => {\n try {\n const { user, setNextOfKinField, nokStatecode } = this.props;\n\n if (!dontClear) {\n setNextOfKinField({\n nokStatecode: \"\",\n nokLga: \"\",\n });\n }\n\n this.setState({ allStates: [], allLGA: [] });\n\n if (!nokCountry) {\n nokCountry = this.props.nokCountry;\n }\n\n if (nokCountry === \"N\") {\n nokCountry = \"NG\";\n }\n\n if (nokStatecode) {\n this.fetchLGA(null, true);\n }\n\n const state = await api.fetchState(\n { countryCode: nokCountry },\n user.token\n );\n\n this.setState({ allStates: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (nokStatecode, dontClear) => {\n try {\n const { user, setNextOfKinField } = this.props;\n\n if (!dontClear) {\n setNextOfKinField({ nokLga: \"\" });\n }\n\n this.setState({ allLGA: [] });\n\n if (!nokStatecode) {\n nokStatecode = this.props.nokStatecode;\n }\n\n const LGA = await api.fetchLGA({ stateCode: nokStatecode }, user.token);\n\n this.setState({ allLGA: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n validate = () => {\n const {\n nokMobilePhone,\n nokResidenceHouseNumber,\n nokTitle,\n // nokResidenceStreetName,\n nokName,\n nokSurname,\n nokGender,\n nokRelationship,\n nokStatecode,\n nokLga,\n nokLocation,\n nokCountry,\n // nokEmailaddress,\n // nokOthername\n nokCity\n } = this.props;\n\n let isValidated = true,\n nokMobilePhoneError,\n nokResidenceHouseNumberError,\n // nokResidenceStreetNameError,\n nokTitleError,\n nokNameError,\n nokSurnameError,\n nokGenderError,\n nokRelationshipError,\n nokStatecodeError,\n nokLgaError,\n nokLocationError,\n nokCountryError,\n nokEmailaddressError,\n nokOthernameError,\n nokCityError;\n\n if (nokMobilePhone.length !== 11) {\n nokMobilePhoneError = \"Phone number should be 11 digits\";\n isValidated = false;\n }\n if (!nokCountry) {\n nokCountryError = \"This field is required\";\n isValidated = false;\n }\n\n if (!nokResidenceHouseNumber) {\n nokResidenceHouseNumberError = \"This field is required\";\n isValidated = false;\n }\n // if (nokLocation === \"N\" && !nokCity) {\n // nokCityError = \"This field is required\";\n // isValidated = false;\n // }\n // if (!nokResidenceStreetName) {\n // nokResidenceStreetNameError = \"This field is required\";\n // isValidated = false;\n // }\n if (!nokTitle) {\n nokTitleError = \"This field is required\";\n isValidated = false;\n }\n if (!nokName) {\n nokNameError = \"This field is required\";\n isValidated = false;\n }\n if (!nokSurname) {\n nokSurnameError = \"This field is required\";\n isValidated = false;\n }\n if (!nokGender) {\n nokGenderError = \"This field is required\";\n isValidated = false;\n }\n\n if (!nokRelationship) {\n nokRelationshipError = \"This field is required\";\n isValidated = false;\n }\n\n if (!nokCity) {\n nokCityError = \"This field is required\";\n isValidated = false;\n }\n\n if (nokLocation === \"N\" && !nokStatecode) {\n nokStatecodeError = \"This field is required\";\n isValidated = false;\n }\n\n if (nokLocation === \"N\" && !nokLga) {\n nokLgaError = \"This field is required\";\n isValidated = false;\n }\n\n if (!nokLocation) {\n nokLocationError = \"This field is required\";\n isValidated = false;\n }\n\n // if (!nokEmailaddress) {\n // nokEmailaddressError = \"This field is required\";\n // isValidated = false;\n // }\n\n // if (!nokOthername) {\n // nokOthernameError = \"This field is required\";\n // isValidated = false;\n // }\n\n this.setState({\n nokMobilePhoneError,\n nokResidenceHouseNumberError,\n // nokResidenceStreetNameError,\n nokTitleError,\n nokNameError,\n nokSurnameError,\n nokGenderError,\n nokRelationshipError,\n nokStatecodeError,\n nokLgaError,\n nokLocationError,\n nokCountryError,\n nokEmailaddressError,\n nokOthernameError,\n nokCityError\n });\n\n return isValidated;\n };\n\n render() {\n const {\n nokEmailaddress,\n setNextOfKinField,\n nokName,\n nokGender,\n nokOthername,\n nokLocation,\n nokMobilePhone,\n nokBox,\n nokRelationship,\n nokCountry,\n nokAddress,\n nokAddress1,\n nokLga,\n nokStatecode,\n // nokResidenceStreetName,\n nokCity,\n nokSurname,\n nokTitle,\n nokZip,\n countries,\n // nokOthername,\n allRelationShips,\n nokResidenceHouseNumber,\n } = this.props;\n\n const {\n allLGA,\n allStates,\n nokMobilePhoneError,\n nokResidenceHouseNumberError,\n // nokResidenceStreetNameError,\n nokTitleError,\n nokNameError,\n nokSurnameError,\n nokGenderError,\n nokRelationshipError,\n nokLgaError,\n nokStatecodeError,\n nokLocationError,\n nokCountryError,\n nokOthernameError,\n nokEmailaddressError,\n nokCityError\n } = this.state;\n\n return (\n \n \n \n \n \n \n \n \n {!!nokTitleError && (\n {nokTitleError} \n )}\n {\n setNextOfKinField({ nokName: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokOthername: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokSurname: e.target.value });\n }}\n />\n\n {/* {\n setNextOfKinField({ nokOthername: e.target.value });\n }}\n /> */}\n\n \n \n \n \n \n {!!nokGenderError && (\n {nokTitleError} \n )}\n\n \n \n {countries.map((item) => (\n \n ))}\n \n {!!nokCountryError && (\n {nokCountryError} \n )}\n {\n setNextOfKinField({ nokMobilePhone: e.target.value });\n }}\n errorMessage={nokMobilePhoneError}\n />\n \n \n {allRelationShips.map((item) => (\n \n ))}\n \n\n {/* {\n setNextOfKinField({ nokRelationship: e.target.value });\n }}\n /> */}\n {\n setNextOfKinField({ nokEmailaddress: e.target.value });\n }}\n />\n\n {\n setNextOfKinField({ nokLocation: e.target.value });\n this.fetchState(e.target.value);\n }}\n >\n \n \n \n \n {!!nokLocationError && (\n {nokLocationError} \n )}\n {\n setNextOfKinField({ nokAddress1: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokAddress: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokResidenceHouseNumber: e.target.value });\n }}\n errorMessage={nokResidenceHouseNumberError}\n />\n {/* {\n setNextOfKinField({ nokResidenceStreetName: e.target.value });\n }}\n errorMessage={nokResidenceStreetNameError}\n /> */}\n {\n setNextOfKinField({ nokCity: e.target.value });\n }}\n errorMessage={nokCityError}\n />\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!nokStatecodeError && (\n {nokStatecodeError} \n )}\n \n \n {allLGA.map((item) => (\n \n ))}\n \n {!!nokLgaError && {nokLgaError} }\n {\n setNextOfKinField({ nokBox: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokZip: e.target.value });\n }}\n />\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.microPensionDublicated.nextOfKin,\n countries: state.onboarding.countries,\n allRelationShips: state.auth.relationShips,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setNextOfKinField: mpAction.setNextOfKinField,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Employer);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Row, Col } from \"reactstrap\";\nimport Ink from \"react-ink\";\n\nimport {\n imageToDataURL,\n isNetworkRequestFailedError,\n} from \"../../config/helpers\";\nimport historyAction from \"../../redux/history/action\";\nimport authAction from \"../../redux/auth/action\";\nimport mpAction from \"../../redux/microPensionDublicated/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\n\nclass Signature extends Component {\n state = {\n signatureImageError: \"\",\n };\n\n componentDidMount() {\n const { customRef } = this.props;\n\n customRef({ validate: this.validate });\n }\n\n validate = () => {\n const { signatureImage } = this.props;\n\n let isValidated = true,\n signatureImageError;\n\n if (!signatureImage) {\n signatureImageError = \"signature Image is required\";\n isValidated = false;\n }\n\n this.setState({\n signatureImageError,\n });\n\n return isValidated;\n };\n\n handleOnChange = async (e) => {\n const { setSignatureField, setAlertMessage } = this.props;\n\n try {\n if (e.target.files[0]) {\n const response = await imageToDataURL(e.target.files[0]);\n setSignatureField(response);\n }\n } catch (error) {\n setAlertMessage({\n type: \"error\",\n message: error.message,\n onTryAgain: isNetworkRequestFailedError(error)\n ? () => this.handleOnChange(e)\n : null,\n });\n }\n };\n\n render() {\n const { signatureImage } = this.props;\n const { signatureImageError } = this.state;\n\n return (\n \n \n
\n {!!signatureImage && (\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n signatureImage: state.microPensionDublicated.signatureImage,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setSignatureField: mpAction.setSignatureField,\n setAlertMessage: authAction.setAlertMessage,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Signature);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Row, Col } from \"reactstrap\";\nimport Ink from \"react-ink\";\nimport base64 from \"base-64\";\nimport api from \"../../config/api\";\nimport { BlobProvider } from \"@react-pdf/renderer\";\n\nimport ConsentFormModal from \"../../component/ConsentFormModal\";\nimport CustomLoader from \"../../component/CustomLoader/CustomLoader\";\nimport ConsentFormPDF from \"../../component/ConsentFormPDF\";\nimport {\n imageToDataURL,\n isNetworkRequestFailedError,\n} from \"../../config/helpers\";\nimport historyAction from \"../../redux/history/action\";\nimport authAction from \"../../redux/auth/action\";\nimport mpAction from \"../../redux/microPensionDublicated/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\nimport CustomButton from \"../../component/CustomButton/CustomButton\";\n\nclass Picture extends Component {\n state = {\n pictureImageError: \"\",\n isLoading: false,\n };\n\n componentDidMount() {\n const { customRef } = this.props;\n\n customRef({ validate: this.validate });\n }\n\n handleOnChange = async (e) => {\n const { setPictureField, setAlertMessage } = this.props;\n\n try {\n if (e.target.files[0]) {\n const response = await imageToDataURL(e.target.files[0]);\n\n setPictureField(response);\n this.openModal();\n }\n } catch (error) {\n setAlertMessage({\n type: \"error\",\n message: error.message,\n onTryAgain: isNetworkRequestFailedError(error)\n ? () => this.handleOnChange(e)\n : null,\n });\n }\n };\n\n openModal = () => {\n this.props.setConsentFormField(\"\");\n this.setState({ isModal: true });\n };\n\n validate = () => {\n const { pictureImage, formImage } = this.props;\n let error = \"\";\n\n if (!pictureImage) {\n error = \"Picture is required\";\n } else if (!formImage) {\n error = \"Please accept consent form\";\n }\n\n return error;\n };\n\n upload = async () => {\n const {\n personalDetail,\n employer,\n nextOfKin,\n residence,\n pictureImage,\n formImage,\n signatureImage,\n bankDetails,\n validateUser,\n setAlertMessage,\n resetRSAForm,\n } = this.props;\n\n const header = {\n Authorization:\n \"Basic \" +\n base64.encode(validateUser.userName + \":\" + validateUser.password),\n };\n\n try {\n if (this.validate()) {\n throw new Error(this.validate());\n }\n\n this.setState({ isLoading: true });\n\n const data = {\n ...personalDetail,\n ...employer,\n ...nextOfKin,\n ...residence,\n ...bankDetails,\n pictureImage: pictureImage ? pictureImage.split(\"base64,\")[1] : \"\",\n formImage: formImage ? formImage.split(\"base64,\")[1] : \"\",\n signatureImage: signatureImage\n ? signatureImage.split(\"base64,\")[1]\n : \"\",\n agentCode: \"MPPPPL\",\n };\n data.employerRcno = employer.employerRawCode;\n delete data.employerRawCode;\n delete data.employerCode;\n // console.log(\"data =>\", data);\n\n // delete data.firstName;\n delete data.middleName;\n // delete data.maidenOrFormerName;\n // delete data.employerStateCode\n // delete data.dateOfFirstAppointment\n delete data.nokMiddleName;\n delete data.nokResidenceStateCode;\n\n // delete data.picture\n // delete data.consentForm\n // delete data.signature\n\n delete data.residenceHouseNo;\n delete data.employerStreetName;\n delete data.employerBuildingNameOrNumber;\n delete data.nokResidenceHouseNumber;\n\n const response = await api.RSAPinSubmit(data, header);\n setAlertMessage({ type: \"success\", message: response.errorMessage });\n resetRSAForm();\n } catch (e) {\n setAlertMessage({\n type: \"error\",\n message: e.message,\n onTryAgain: isNetworkRequestFailedError(e) ? this.upload : null,\n });\n }\n\n this.setState({ isLoading: false });\n };\n\n getName = () => {\n const { personalDetail } = this.props;\n\n return {\n firstName: personalDetail.firstname,\n middleName: personalDetail.middleName,\n lastName: personalDetail.surname,\n };\n };\n\n handleSubmit = () => {\n this.setState({ submit: true });\n };\n\n getDataForPDF = () => {\n const { personalDetail, signatureImage } = this.props;\n\n return {\n name: {\n firstName: personalDetail.firstname,\n middleName: personalDetail.middleName,\n lastName: personalDetail.surname,\n },\n signature: signatureImage,\n };\n };\n\n render() {\n const { pictureImage } = this.props;\n const { pictureImageError, isLoading, isModal } = this.state;\n\n return (\n \n \n
\n )}\n \n \n
\n {!!pictureImage && (\n this.setState({ isModal: false })}\n isOpen={isModal}\n />\n {this.state.submit && (\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n personalDetail: state.microPensionDublicated.personalDetail,\n pictureImage: state.microPensionDublicated.pictureImage,\n residence: state.microPensionDublicated.residence,\n employer: state.microPensionDublicated.employer,\n nextOfKin: state.microPensionDublicated.nextOfKin,\n signatureImage: state.microPensionDublicated.signatureImage,\n formImage: state.microPensionDublicated.formImage,\n bankDetails: state.microPensionDublicated.bankDetails,\n validateUser: state.onboarding.user,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setPictureField: mpAction.setPictureField,\n setAlertMessage: authAction.setAlertMessage,\n setConsentFormField: mpAction.setConsentFormField,\n resetRSAForm: mpAction.resetRSAForm,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Picture);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Container, Row, Col } from \"reactstrap\";\nimport Ink from \"react-ink\";\n\nimport api from \"../../config/api\";\nimport \"./style.css\";\nimport StepTab from \"./StepTab\";\nimport BankDetails from \"./BankDetails\";\nimport PersonalDetail from \"./PersonalDetail\";\nimport Residence from \"./Residence\";\nimport Employer from \"./Employer\";\nimport NextOfKin from \"./NextOfKin\";\nimport Signature from \"./Signature\";\nimport Picture from \"./Picture\";\n// import ConsentForm from \"./ConsentForm\";\nimport historyAction from \"../../redux/history/action\";\nimport onboardingAction from \"../../redux/onboarding/action\";\nimport mpAction from \"../../redux/microPensionDublicated/action\";\nimport PageHead from \"../../component/pageHead/PageHead\";\nimport CustomLoader from \"../../component/CustomLoader/CustomLoader\";\nimport nextBlueIcon from \"../../assets/icons/Conti_blue.png\";\nimport prevBlueIcon from \"../../assets/icons/back_blue.png\";\nimport authAction from \"../../redux/auth/action\";\n\nclass Onboarding extends Component {\n state = {\n step: 1,\n isLoading: false,\n };\n\n componentDidMount() {\n const { history, setHistory } = this.props;\n\n this.validate();\n this.fetchCountries();\n\n setHistory(history);\n }\n\n fetchCountries = async () => {\n try {\n const { saveCountries } = this.props;\n const response = await api.fetchCountries();\n\n saveCountries(response.data.result);\n } catch (e) {\n console.log(\"Error\", e.message);\n }\n };\n\n validate = async () => {\n const { validateUser, user, getUser } = this.props;\n\n if (!validateUser.userName) {\n this.setState({ isLoading: true });\n\n try {\n const response = await api.getUsernameAndPassword(\n { userName: user.User.userName },\n user.token\n );\n const data = {\n userName: response.data.result.UserName,\n password: response.data.result.Password,\n };\n getUser(data);\n } catch (e) {\n console.log(\"Error\", e.message);\n }\n this.setState({ isLoading: false });\n }\n };\n\n scrollToTop = () => {\n const target = document.querySelector(\".card-container .flex1\");\n var maxScroll = target.scrollHeight;\n\n var scrollInt = setInterval(() => {\n if (target.scrollTop !== 0) {\n target.scrollTop -= maxScroll / 100;\n } else {\n clearInterval(scrollInt);\n }\n }, 10);\n };\n\n decideTab = () => {\n const { step } = this.state;\n\n switch (step) {\n case 1:\n return (\n \n \n
\n )}\n \n \n {this.props.pictureImage && !this.props.formImage && (\n {\n this.setState({ isModal: true });\n }}\n />\n \n )}\n {\n this.upload();\n }}\n />\n \n
\n
\n {isLoading && \n {step !== 1 && (\n \n \n
\n )}\n {step !== 7 && (\n Back
\nContinue
\n{text}
\n\n {\n setBankDetailsField({ bankName: e.target.value });\n }}\n >\n \n {allBanks.map((item) => (\n \n ))}\n \n {!!bankNameError && (\n {bankNameError} \n )}\n {\n setBankDetailsField({ accountName: e.target.value });\n }}\n />\n {\n setBankDetailsField({ accountNumber: e.target.value });\n }}\n />\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.mpNINImplementation.bankDetails,\n allBanks: state.referral.newReferral.allBanks,\n token: state.mpNINImplementation.token,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setBankDetailsField: mpAction.setBankDetailsField,\n setAlertMessage: authAction.setAlertMessage,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(BankDetails);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Input, FormFeedback } from \"reactstrap\";\n\nimport historyAction from \"../../redux/history/action\";\nimport mpAction from \"../../redux/mpNINImplementation/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\nimport DatePickerComp from \"../../component/DatePicker/DatePicker\";\nimport api from \"../../config/api\";\n\nclass PersonalDetails extends Component {\n state = {\n allStates: [],\n allLGA: [],\n allStates2: [],\n allLGA2: [],\n };\n\n componentDidMount() {\n const { customRef } = this.props;\n\n this.fetchFormReferenceNo();\n this.fetchState(null, true);\n this.fetchState2(\"NG\", true);\n this.fetchLGA(null, true);\n customRef({ validate: this.validate });\n }\n\n fetchFormReferenceNo = async () => {\n const { setPersonalDetailField, formRefno } = this.props;\n\n try {\n if (!formRefno) {\n const response = await api.fetchFormReferenceNo();\n setPersonalDetailField({ formRefno: response.data.result });\n }\n } catch (e) {\n console.log(\"e =>\", e);\n }\n };\n\n onSelectChange = (e) => {\n const { setPersonalDetailField } = this.props;\n setPersonalDetailField({ [e.target.name]: e.target.value });\n if (e.target.name === \"permanentAddressLocation\") {\n this.fetchState(e.target.value);\n }\n if (e.target.name === \"permState\") {\n this.fetchLGA(e.target.value);\n }\n if (e.target.name === \"nationalityCode\") {\n this.fetchState2(e.target.value);\n }\n if (e.target.name === \"stateOfOrigin\") {\n this.fetchLGA2(e.target.value);\n }\n };\n\n fetchState = async (permanentAddressLocation, dontClear) => {\n try {\n const { token, setPersonalDetailField, permState } = this.props;\n\n if (!dontClear) {\n setPersonalDetailField({\n permState: \"\",\n permLga: \"\",\n });\n }\n\n if (permState) {\n this.fetchLGA(null, true);\n }\n\n this.setState({ allStates: [], allLGA: [] });\n\n if (!permanentAddressLocation) {\n permanentAddressLocation = this.props.permanentAddressLocation;\n }\n\n if (permanentAddressLocation === \"N\") {\n permanentAddressLocation = \"NG\";\n }\n\n const state = await api.fetchState(\n { countryCode: permanentAddressLocation },\n token\n );\n this.setState({ allStates: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchState2 = async (nationalityCode, dontClear) => {\n try {\n const { setPersonalDetailField, stateOfOrigin, token, setAllStates } =\n this.props;\n\n if (!dontClear) {\n setPersonalDetailField({\n stateOfOrigin: \"\",\n lgaCode: \"\",\n });\n }\n\n if (stateOfOrigin) {\n this.fetchLGA2(null, true);\n }\n\n this.setState({ allStates2: [], allLGA2: [] });\n\n if (!nationalityCode) {\n nationalityCode = this.props.nationalityCode;\n }\n\n if (nationalityCode === \"N\") {\n nationalityCode = \"NG\";\n }\n\n const state = await api.fetchState(\n { countryCode: nationalityCode },\n token\n );\n\n setAllStates({ allStatesArray: state.data.result });\n this.setState({ allStates2: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (permState, dontClear) => {\n try {\n const { token, setPersonalDetailField, setAllPermLGA, allPermLGA } =\n this.props;\n\n if (!dontClear) {\n setPersonalDetailField({ permLga: \"\" });\n }\n\n this.setState({ allLGA: [] });\n\n if (!permState) {\n permState = this.props.permState;\n }\n\n const LGA = await api.fetchLGA({ stateCode: permState }, token);\n\n setAllPermLGA({ allPermLGA: LGA.data.result });\n this.setState({ allLGA: allPermLGA });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA2 = async (stateOfOrigin, dontClear) => {\n try {\n const { setPersonalDetailField, token, setAllLGA, allLGAArray } =\n this.props;\n\n if (!dontClear) {\n setPersonalDetailField({ lgaCode: \"\" });\n }\n\n this.setState({ allLGA2: [] });\n\n if (!stateOfOrigin) {\n stateOfOrigin = this.props.stateOfOrigin;\n }\n\n const LGA = await api.fetchLGA({ stateCode: stateOfOrigin }, token);\n\n setAllLGA({ allLGAArray: LGA.data.result });\n this.setState({ allLGA2: allLGAArray });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n validate = () => {\n const {\n surname,\n firstname,\n nationalityCode,\n title,\n gender,\n maritalStatusCode,\n permCity,\n ssn,\n mobilePhone,\n formRefno,\n permLga,\n permState,\n placeOfBirth,\n permanentAddressLocation,\n dateOfBirth,\n stateOfOrigin,\n lgaCode,\n // schemeId,\n permCountry,\n } = this.props;\n\n let isValidated = true,\n formRefnoError = \"\",\n surnameError = \"\",\n firstnameError = \"\",\n nationalityCodeError = \"\",\n stateOfOriginError = \"\",\n lgaCodeError = \"\",\n titleError = \"\",\n genderError = \"\",\n maritalStatusCodeError = \"\",\n permCityError = \"\",\n permanentAddressLocationError = \"\",\n mobilePhoneError = \"\",\n ssnError = \"\",\n permLgaError = \"\",\n permStateError = \"\",\n placeOfBirthError = \"\",\n dateOfBirthError = \"\",\n schemeIdError = \"\",\n permCountryError = \"\";\n\n if (!formRefno) {\n formRefnoError = \"This field is required\";\n isValidated = false;\n }\n\n // if (!schemeId) {\n // schemeIdError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (formRefno.length > 50) {\n formRefnoError = \"Form number should not exceed 50 characters\";\n isValidated = false;\n }\n if (!surname) {\n surnameError = \"This field is required\";\n isValidated = false;\n }\n if (!firstname) {\n firstnameError = \"This field is required\";\n isValidated = false;\n }\n if (!nationalityCode) {\n nationalityCodeError = \"This field is required\";\n isValidated = false;\n }\n if (!stateOfOrigin) {\n stateOfOriginError = \"This field is required\";\n isValidated = false;\n }\n if (!lgaCode) {\n lgaCodeError = \"This field is required\";\n isValidated = false;\n }\n if (!title) {\n titleError = \"This field is required\";\n isValidated = false;\n }\n if (!gender) {\n genderError = \"This field is required\";\n isValidated = false;\n }\n if (!maritalStatusCode) {\n maritalStatusCodeError = \"This field is required\";\n isValidated = false;\n }\n if (!permCity) {\n permCityError = \"This field is required\";\n isValidated = false;\n }\n\n if (!mobilePhone) {\n mobilePhoneError = \"This field is required\";\n isValidated = false;\n }\n if (mobilePhone.length !== 11) {\n mobilePhoneError = \"Phone number should be 11 digits\";\n isValidated = false;\n }\n if (!ssn) {\n ssnError = \"This field is required\";\n isValidated = false;\n }\n if (ssn.length < 11 || ssn.length > 11) {\n ssnError = \"NIN should be 11 digit long\";\n isValidated = false;\n }\n if (isNaN(this.props.ssn)) {\n ssnError = \"NIN should be only a number\";\n isValidated = false;\n }\n if (nationalityCode === \"NG\" && !permState) {\n permStateError = \"This field is required\";\n isValidated = false;\n }\n\n if (nationalityCode === \"NG\" && !permLga) {\n permLgaError = \"This field is required\";\n isValidated = false;\n }\n\n if (!placeOfBirth) {\n placeOfBirthError = \"This field is required\";\n isValidated = false;\n }\n\n if (!permanentAddressLocation) {\n permanentAddressLocationError = \"This field is required\";\n isValidated = false;\n }\n\n if (!dateOfBirth) {\n dateOfBirthError = \"This field is required\";\n isValidated = false;\n }\n\n if (!permCountry) {\n permCountryError = \"This field is required\";\n isValidated = false;\n }\n\n this.setState({\n surnameError,\n firstnameError,\n nationalityCodeError,\n titleError,\n genderError,\n maritalStatusCodeError,\n permCityError,\n permanentAddressLocationError,\n mobilePhoneError,\n ssnError,\n formRefnoError,\n permLgaError,\n permStateError,\n dateOfBirthError,\n placeOfBirthError,\n schemeIdError,\n permCountryError,\n stateOfOriginError,\n lgaCodeError,\n });\n\n return isValidated;\n };\n\n clearAllErrors = () => {\n this.setState({\n surnameError: \"\",\n firstnameError: \"\",\n nationalityCode: \"\",\n titleError: \"\",\n genderError: \"\",\n maritalStatusCodeError: \"\",\n permCityError: \"\",\n permanentAddressLocationError: \"\",\n mobilePhoneError: \"\",\n ssnError: \"\",\n schemeId: \"\",\n });\n };\n\n render() {\n const {\n formRefno,\n setPersonalDetailField,\n title,\n firstname,\n middleName,\n othernames,\n surname,\n maidenName,\n ssn,\n bvn,\n gender,\n dateOfBirth,\n maritalStatusCode,\n nationalityCode,\n permanentAddressLocation,\n permState,\n permLga,\n mobilePhone,\n permCity,\n placeOfBirth,\n countries,\n // schemeId,\n permCountry,\n stateOfOrigin,\n lgaCode,\n isFormHidden,\n allLGAArray,\n isNINVerified,\n allPermLGA,\n } = this.props;\n\n const {\n allStates,\n surnameError,\n firstnameError,\n nationalityCodeError,\n titleError,\n genderError,\n maritalStatusCodeError,\n permCityError,\n mobilePhoneError,\n ssnError,\n formRefnoError,\n permStateError,\n permLgaError,\n placeOfBirthError,\n permanentAddressLocationError,\n dateOfBirthError,\n // schemeIdError,\n permCountryError,\n stateOfOriginError,\n lgaCodeError,\n allStates2,\n } = this.state;\n\n return (\n \n {\n setPersonalDetailField({ formRefno: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ ssn: e.target.value });\n }}\n />\n {/* {\n setPersonalDetailField({ schemeId: e.target.value });\n }}\n /> */}\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.mpNINImplementation.personalDetail,\n countries: state.onboarding.countries,\n isFormHidden: state.mpNINImplementation.isFormHidden,\n token: state.mpNINImplementation.token,\n isNINVerified: state.mpNINImplementation.isNINVerified,\n ...state.mpNINImplementation.personalDetail,\n ...state.mpNINImplementation.allStates,\n ...state.mpNINImplementation.allLGA,\n ...state.mpNINImplementation.allPermLGA,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setPersonalDetailField: mpAction.setPersonalDetailField,\n setAllStates: mpAction.setAllStates,\n setAllLGA: mpAction.setAllLGA,\n setAllPermStates: mpAction.setAllPermStates,\n setAllPermLGA: mpAction.setAllPermLGA,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(PersonalDetails);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\n// import { Input, FormFeedback } from \"reactstrap\";\n\nimport api from \"../../config/api\";\nimport historyAction from \"../../redux/history/action\";\nimport mpAction from \"../../redux/mpNINImplementation/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\n\nclass Residence extends Component {\n state = {\n allStates: [],\n allLGA: [],\n };\n\n componentDidMount() {\n const { customRef } = this.props;\n\n this.fetchState(null, true);\n\n customRef({ validate: this.validate });\n }\n\n fetchState = async (residenceCountryCode, dontClear) => {\n try {\n const { token, setResidenceField, residenceStateCode } = this.props;\n\n if (!dontClear) {\n setResidenceField({ residenceStateCode: \"\", residenceLGACode: \"\" });\n }\n\n if (residenceStateCode) {\n this.fetchLGA(null, true);\n }\n\n this.setState({ allStates: [], allLGA: [] });\n\n if (!residenceCountryCode) {\n residenceCountryCode = this.props.residenceCountryCode;\n }\n\n const state = await api.fetchState(\n { countryCode: residenceCountryCode },\n token\n );\n\n this.setState({ allStates: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (residenceStateCode, dontClear) => {\n try {\n const { token, setResidenceField } = this.props;\n\n if (!dontClear) {\n setResidenceField({ residenceLGACode: \"\" });\n }\n\n this.setState({ allLGA: [] });\n\n if (!residenceStateCode) {\n residenceStateCode = this.props.residenceStateCode;\n }\n\n const LGA = await api.fetchLGA(\n { stateCode: residenceStateCode },\n token\n );\n\n this.setState({ allLGA: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n onSelectChange = (e) => {\n const { setResidenceField } = this.props;\n\n setResidenceField({ [e.target.name]: e.target.value });\n\n if (e.target.name === \"residenceCountryCode\") {\n this.fetchState(e.target.value);\n }\n\n if (e.target.name === \"residenceStateCode\") {\n this.fetchLGA(e.target.value);\n }\n };\n\n validate = () => {\n const { email, permZip } = this.props;\n\n let isValidated = true,\n emailError = \"\",\n permBoxError = \"\",\n permZipError = \"\";\n // residenceHouseNoError = \"\";\n // residenceStateCodeError = \"\",\n // residenceLGACodeError = \"\";\n\n // if (!residenceStateCode) {\n // residenceStateCodeError = \"This field is required\";\n // isValidated = false;\n // }\n // if (!residenceLGACode) {\n // residenceLGACodeError = \"This field is required\";\n // isValidated = false;\n // }\n // if (!permBox) {\n // permBoxError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (!email) {\n emailError = \"This field is required\";\n isValidated = false;\n }\n\n // if (!residenceHouseNo) {\n // residenceHouseNoError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (!permZip) {\n permZipError = \"This field is required\";\n isValidated = false;\n }\n this.setState({\n // residenceStateCodeError,\n // residenceLGACodeError,\n permBoxError,\n emailError,\n // residenceHouseNoError,\n permZipError,\n });\n\n return isValidated;\n };\n\n render() {\n const {\n // residenceCountryCode,\n setResidenceField,\n // residenceHouseNo,\n // residenceLGACode,\n // residenceStateCode,\n // residenceStreetName,\n // residenceTownCity,\n permZip,\n email,\n permanentAddress,\n permanentAddress1,\n permBox,\n // countries\n } = this.props;\n\n const {\n emailError,\n permBoxError,\n // residenceHouseNoError,\n permZipError,\n // allStates,\n // allLGA,\n // residenceStateCodeError,\n // residenceLGACodeError\n } = this.state;\n\n return (\n \n {\n setPersonalDetailField({ surname: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ firstname: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ middleName: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ othernames: e.target.value });\n }}\n />\n \n \n {countries.map((item) => (\n \n ))}\n \n {nationalityCodeError && (\n {nationalityCodeError} \n )}\n \n \n {allStates2.map((item) => (\n \n ))}\n \n {!!stateOfOriginError && (\n {stateOfOriginError} \n )}\n \n \n {allLGAArray.map((item) => (\n \n ))}\n \n {!!lgaCodeError && (\n {lgaCodeError} \n )}\n \n \n \n \n \n \n \n {titleError && {titleError} }\n \n \n \n \n \n {genderError && {genderError} }\n \n \n \n \n \n \n \n \n {maritalStatusCodeError && (\n {maritalStatusCodeError} \n )}\n {\n setPersonalDetailField({ dateOfBirth: e });\n }}\n containerStyles={{ width: \"100%\" }}\n />\n {\n setPersonalDetailField({ placeOfBirth: e.target.value });\n }}\n />\n \n \n {countries.map((item) => (\n \n ))}\n \n {\n setPersonalDetailField({ permCity: e.target.value });\n }}\n />\n {\n setPersonalDetailField({ maidenName: e.target.value });\n }}\n />\n \n \n \n \n \n {!!permanentAddressLocationError && (\n {permanentAddressLocationError} \n )}\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!permStateError && (\n {permStateError} \n )}\n \n \n {allPermLGA.map((item) => (\n \n ))}\n \n {!!permLgaError && (\n {permLgaError} \n )}\n {\n setPersonalDetailField({ mobilePhone: e.target.value });\n }}\n />\n {/* {\n setPersonalDetailField({ ssn: e.target.value });\n }}\n /> */}\n {\n setPersonalDetailField({ bvn: e.target.value });\n }}\n />\n
\n \n {\n setResidenceField({ permanentAddress: e.target.value });\n }}\n />\n {/* {\n setResidenceField({ residenceHouseNo: e.target.value });\n }}\n /> */}\n {\n setResidenceField({ permanentAddress1: e.target.value });\n }}\n />\n {/* {\n setResidenceField({ residenceStreetName: e.target.value });\n }}\n />\n {\n setResidenceField({ residenceTownCity: e.target.value });\n }}\n />\n \n \n {countries.map(item => (\n \n ))}\n \n \n \n {allStates.map(item => (\n \n ))}\n \n {!!residenceStateCodeError && (\n {residenceStateCodeError} \n )}\n \n \n {allLGA.map(item => (\n \n ))}\n \n {!!residenceLGACodeError && (\n {residenceLGACodeError} \n )} */}\n {/* {\n setResidenceField({ residenceLGACode: e.target.value });\n }}\n /> */}\n {/* {\n setResidenceField({ residenceStateCode: e.target.value });\n }}\n /> */}\n {/* {\n setResidenceField({ residenceCountryCode: e.target.value });\n }}\n /> */}\n {\n setResidenceField({ permZip: e.target.value });\n }}\n />\n {\n setResidenceField({ email: e.target.value });\n }}\n />\n {\n setResidenceField({ permBox: e.target.value });\n }}\n />\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.mpNINImplementation.residence,\n token: state.mpNINImplementation.token,\n countries: state.onboarding.countries,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setResidenceField: mpAction.setResidenceField,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Residence);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Input, FormFeedback } from \"reactstrap\";\n\nimport SelectPagination from \"../../component/SelectPagination/SelectPagination\";\nimport api from \"../../config/api\";\nimport historyAction from \"../../redux/history/action\";\nimport mpAction from \"../../redux/mpNINImplementation/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\nimport DatePickerComp from \"../../component/DatePicker/DatePicker\";\n\nclass Employer extends Component {\n state = {\n allStates: [],\n allLGA: [],\n sector: []\n };\n\n componentDidMount = async () => {\n const { customRef } = this.props;\n\n this.fetchState(null, true);\n\n try {\n let response = await api.fetchAllSectors()\n this.setState({\n sector: response.data.result\n })\n } catch (error) {\n console.log(\"E =>\", error)\n }\n \n customRef({ validate: this.validate });\n }\n\n onSelectChange = (e) => {\n const { setEmployerField } = this.props;\n\n setEmployerField({ [e.target.name]: e.target.value });\n\n if (e.target.name === \"employerCountry\") {\n this.fetchState(e.target.value);\n }\n\n if (e.target.name === \"employerStatecode\") {\n this.fetchLGA(e.target.value);\n }\n };\n\n fetchState = async (employerCountry, dontClear) => {\n try {\n const { token, setEmployerField, employerStatecode } = this.props;\n\n if (!dontClear) {\n setEmployerField({\n employerStatecode: \"\",\n employerLga: \"\",\n });\n }\n\n this.setState({ allStates: [], allLGA: [] });\n\n if (!employerCountry) {\n employerCountry = this.props.employerCountry;\n }\n\n if (employerStatecode) {\n this.fetchLGA(null, true);\n }\n\n const state = await api.fetchState(\n { countryCode: employerCountry },\n token\n );\n this.setState({ allStates: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (employerStatecode, dontClear) => {\n try {\n const { token, setEmployerField } = this.props;\n\n if (!dontClear) {\n setEmployerField({ employerLga: \"\" });\n }\n\n this.setState({ allLGA: [] });\n\n if (!employerStatecode) {\n employerStatecode = this.props.employerStatecode;\n }\n\n const LGA = await api.fetchLGA(\n { stateCode: employerStatecode },\n token\n );\n\n this.setState({ allLGA: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n validate = () => {\n const {\n // employerBuildingNameOrNumber,\n // employerStreetName,\n employerBusiness,\n employerLga,\n employerStatecode,\n // employerNigeriaOrAbroad,\n employerType,\n dateOfFirstApointment,\n employerCity,\n // employerBox,\n // employerZip,\n // employerPhone,\n stateOfPosting,\n employerLocation,\n employerCode,\n } = this.props;\n\n let isValidated = true,\n // employerBuildingNameOrNumberError,\n // employerStreetNameError,\n employerBusinessError,\n employerLgaError,\n employerStatecodeError,\n // employerNigeriaOrAbroadError,\n employerTypeError,\n dateOfFirstApointmentError,\n employerCityError,\n employerZipError,\n employerBoxError,\n employerPhoneError,\n stateOfPostingError,\n employerLocationError,\n employerCodeError;\n\n // if (!employerBuildingNameOrNumber) {\n // employerBuildingNameOrNumberError = \"This field is required\";\n // isValidated = false;\n // }\n // if (!employerStreetName) {\n // employerStreetNameError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (!employerLocation) {\n employerLocationError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerCode) {\n employerCodeError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerBusiness) {\n employerBusinessError = \"This field is required\";\n isValidated = false;\n }\n\n if (!stateOfPosting) {\n stateOfPostingError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerCity) {\n employerCityError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerStatecode) {\n employerStatecodeError = \"This field is required\";\n isValidated = false;\n }\n\n if (!employerLga) {\n employerLgaError = \"This field is required\";\n isValidated = false;\n }\n\n // if (!employerNigeriaOrAbroad) {\n // console.log(\"employerNigeriaOrAbroad\")\n\n // employerNigeriaOrAbroadError = \"This field is required\";\n // isValidated = false;\n // }\n\n if (!employerType) {\n employerTypeError = \"This field is required\";\n isValidated = false;\n }\n\n if (employerType === \"PU\" && !dateOfFirstApointment) {\n dateOfFirstApointmentError = \"This field is required\";\n isValidated = false;\n }\n\n // if (!employerBox) {\n // employerBoxError = \"This field is required\";\n // isValidated = false;\n // }\n\n // if (!employerZip) {\n // employerZipError = \"This field is required\";\n // isValidated = false;\n // }\n\n // if (!employerPhone) {\n // employerPhoneError = \"This field is required\";\n // isValidated = false;\n // }\n\n this.setState({\n // employerBuildingNameOrNumberError,\n // employerStreetNameError,\n employerBusinessError,\n employerStatecodeError,\n employerLgaError,\n employerCityError,\n // employerNigeriaOrAbroadError,\n employerTypeError,\n dateOfFirstApointmentError,\n employerZipError,\n employerBoxError,\n employerPhoneError,\n stateOfPostingError,\n employerLocationError,\n employerCodeError,\n });\n\n return isValidated;\n };\n\n render() {\n const {\n employerType,\n setEmployerField,\n // employerCode,\n // employerBuildingNameOrNumber,\n employerCountry,\n employerLga,\n employerBusiness,\n // employerNigeriaOrAbroad,\n employerPhone,\n employerBox,\n employerStatecode,\n // employerStreetName,\n employerCity,\n employerZip,\n // dateOfCurrentEmployment,\n dateOfFirstApointment,\n employerAddress1,\n employerAddress,\n countries,\n stateOfPosting,\n allEmployers,\n employerCode,\n employerLocation,\n } = this.props;\n\n const {\n allStates,\n allLGA,\n sector,\n // employerBuildingNameOrNumberError,\n // employerStreetNameError,\n employerBusinessError,\n employerStatecodeError,\n employerLgaError,\n // employerNigeriaOrAbroadError,\n // employerAddress1Error,\n // employerAddressError\n employerTypeError,\n dateOfFirstApointmentError,\n employerCityError,\n employerZipError,\n employerBoxError,\n employerPhoneError,\n stateOfPostingError,\n isEmployerDropdown,\n employerLocationError,\n employerCodeError,\n } = this.state;\n\n return (\n \n \n \n {sector.map(item => (\n \n ))}\n \n\n {!!employerTypeError && (\n {employerTypeError} \n )}\n \n this.setState({ isEmployerDropdown })\n }\n allOptions={allEmployers}\n lookFor=\"EmployerName\"\n value={employerCode}\n key=\"EmployerCode\"\n onSelect={(item) => {\n setEmployerField({\n employerCode: item.EmployerName,\n employerRawCode: item.EmployerCode,\n });\n\n this.setState({ isEmployerDropdown: false });\n }}\n />\n {/* {\n setEmployerField({ employerType: e.target.value });\n }}\n /> */}\n {/* {\n setEmployerField({ employerCode: e.target.value });\n }}\n /> */}\n {/* {\n setEmployerField({ employerBuildingNameOrNumber: e.target.value });\n }}\n /> */}\n {/* {\n setEmployerField({ employerStreetName: e.target.value });\n }}\n errorMessage={employerStreetNameError}\n /> */}\n {\n setEmployerField({ employerCity: e.target.value });\n }}\n />\n \n \n {countries.map((item) => (\n \n ))}\n \n \n \n \n \n \n {!!employerLocationError && (\n {employerLocationError} \n )}\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!employerStatecodeError && (\n {employerStatecodeError} \n )}\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!stateOfPostingError && (\n {stateOfPostingError} \n )}\n \n \n {allLGA.map((item) => (\n \n ))}\n \n {!!employerLgaError && (\n {employerLgaError} \n )}\n {\n setEmployerField({ employerPhone: e.target.value });\n }}\n />\n {\n setEmployerField({ employerBox: e.target.value });\n }}\n />\n {\n setEmployerField({ employerBusiness: e.target.value });\n }}\n />\n {\n setEmployerField({ employerAddress1: e.target.value });\n }}\n />\n {\n setEmployerField({ employerAddress: e.target.value });\n }}\n />\n {/* {\n setEmployerField({ employerNigeriaOrAbroad: e.target.value });\n }}\n >\n \n \n \n */}\n {/* {!!employerNigeriaOrAbroadError && (\n {employerNigeriaOrAbroadError} \n )} */}\n {\n setEmployerField({ employerZip: e.target.value });\n }}\n />\n {\n setEmployerField({ dateOfFirstApointment: e });\n }}\n containerStyles={{ width: \"100%\" }}\n />\n {/* {\n setEmployerField({ dateOfCurrentEmployment: e.target.value });\n }}\n /> */}\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.mpNINImplementation.employer,\n countries: state.onboarding.countries,\n token: state.mpNINImplementation.token,\n allEmployers: state.auth.allEmployers,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setEmployerField: mpAction.setEmployerField,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Employer);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Input, FormFeedback } from \"reactstrap\";\n\nimport api from \"../../config/api\";\nimport historyAction from \"../../redux/history/action\";\nimport mpAction from \"../../redux/mpNINImplementation/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\n\nclass Employer extends Component {\n state = {\n allStates: [],\n allLGA: [],\n };\n\n componentDidMount() {\n const { customRef } = this.props;\n\n this.fetchState(null, true);\n\n customRef({ validate: this.validate });\n }\n\n onSelectChange = (e) => {\n const { setNextOfKinField } = this.props;\n\n setNextOfKinField({ [e.target.name]: e.target.value });\n\n if (e.target.name === \"nokStatecode\") {\n this.fetchLGA(e.target.value);\n }\n };\n\n fetchState = async (nokCountry, dontClear) => {\n try {\n const { token, setNextOfKinField, nokStatecode } = this.props;\n\n if (!dontClear) {\n setNextOfKinField({\n nokStatecode: \"\",\n nokLga: \"\",\n });\n }\n\n this.setState({ allStates: [], allLGA: [] });\n\n if (!nokCountry) {\n nokCountry = this.props.nokCountry;\n }\n\n if (nokCountry === \"N\") {\n nokCountry = \"NG\";\n }\n\n if (nokStatecode) {\n this.fetchLGA(null, true);\n }\n\n const state = await api.fetchState(\n { countryCode: nokCountry },\n token\n );\n\n this.setState({ allStates: state.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (nokStatecode, dontClear) => {\n try {\n const { token, setNextOfKinField } = this.props;\n\n if (!dontClear) {\n setNextOfKinField({ nokLga: \"\" });\n }\n\n this.setState({ allLGA: [] });\n\n if (!nokStatecode) {\n nokStatecode = this.props.nokStatecode;\n }\n\n const LGA = await api.fetchLGA({ stateCode: nokStatecode }, token);\n\n this.setState({ allLGA: LGA.data.result });\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n validate = () => {\n const {\n nokMobilePhone,\n nokResidenceHouseNumber,\n nokTitle,\n // nokResidenceStreetName,\n nokName,\n nokSurname,\n nokGender,\n nokRelationship,\n nokStatecode,\n nokLga,\n nokLocation,\n nokCountry,\n // nokEmailaddress,\n // nokOthername\n nokCity\n } = this.props;\n\n let isValidated = true,\n nokMobilePhoneError,\n nokResidenceHouseNumberError,\n // nokResidenceStreetNameError,\n nokTitleError,\n nokNameError,\n nokSurnameError,\n nokGenderError,\n nokRelationshipError,\n nokStatecodeError,\n nokLgaError,\n nokLocationError,\n nokCountryError,\n nokEmailaddressError,\n nokCityError,\n nokOthernameError;\n // nokCityError;\n\n if (nokMobilePhone.length !== 11) {\n nokMobilePhoneError = \"Phone number should be 11 digits\";\n isValidated = false;\n }\n if (!nokCountry) {\n nokCountryError = \"This field is required\";\n isValidated = false;\n }\n\n if (!nokResidenceHouseNumber) {\n nokResidenceHouseNumberError = \"This field is required\";\n isValidated = false;\n }\n // if (nokLocation === \"N\" && !nokCity) {\n // nokCityError = \"This field is required\";\n // isValidated = false;\n // }\n // if (!nokResidenceStreetName) {\n // nokResidenceStreetNameError = \"This field is required\";\n // isValidated = false;\n // }\n if (!nokTitle) {\n nokTitleError = \"This field is required\";\n isValidated = false;\n }\n if (!nokName) {\n nokNameError = \"This field is required\";\n isValidated = false;\n }\n if (!nokSurname) {\n nokSurnameError = \"This field is required\";\n isValidated = false;\n }\n if (!nokGender) {\n nokGenderError = \"This field is required\";\n isValidated = false;\n }\n\n if (!nokRelationship) {\n nokRelationshipError = \"This field is required\";\n isValidated = false;\n }\n\n if (nokLocation === \"N\" && !nokStatecode) {\n nokStatecodeError = \"This field is required\";\n isValidated = false;\n }\n\n if (nokLocation === \"N\" && !nokLga) {\n nokLgaError = \"This field is required\";\n isValidated = false;\n }\n\n if (!nokLocation) {\n nokLocationError = \"This field is required\";\n isValidated = false;\n }\n\n if (!nokCity) {\n nokCityError = \"This field is required\";\n isValidated = false;\n }\n\n // if (!nokEmailaddress) {\n // nokEmailaddressError = \"This field is required\";\n // isValidated = false;\n // }\n\n // if (!nokOthername) {\n // nokOthernameError = \"This field is required\";\n // isValidated = false;\n // }\n\n this.setState({\n nokMobilePhoneError,\n nokResidenceHouseNumberError,\n // nokResidenceStreetNameError,\n nokTitleError,\n nokNameError,\n nokSurnameError,\n nokGenderError,\n nokRelationshipError,\n nokStatecodeError,\n nokLgaError,\n nokLocationError,\n nokCountryError,\n nokEmailaddressError,\n nokOthernameError,\n nokCityError\n // nokCityError\n });\n\n return isValidated;\n };\n\n render() {\n const {\n nokEmailaddress,\n setNextOfKinField,\n nokName,\n nokGender,\n nokOthername,\n nokLocation,\n nokMobilePhone,\n nokBox,\n nokRelationship,\n nokCountry,\n nokAddress,\n nokAddress1,\n nokLga,\n nokStatecode,\n // nokResidenceStreetName,\n nokCity,\n nokSurname,\n nokTitle,\n nokZip,\n countries,\n // nokOthername,\n allRelationShips,\n nokResidenceHouseNumber,\n } = this.props;\n\n const {\n allLGA,\n allStates,\n nokMobilePhoneError,\n nokResidenceHouseNumberError,\n // nokResidenceStreetNameError,\n nokTitleError,\n nokNameError,\n nokSurnameError,\n nokGenderError,\n nokRelationshipError,\n nokLgaError,\n nokStatecodeError,\n nokLocationError,\n nokCountryError,\n nokOthernameError,\n nokEmailaddressError,\n nokCityError,\n } = this.state;\n\n return (\n \n \n \n \n \n \n \n \n {!!nokTitleError && (\n {nokTitleError} \n )}\n {\n setNextOfKinField({ nokName: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokOthername: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokSurname: e.target.value });\n }}\n />\n\n {/* {\n setNextOfKinField({ nokOthername: e.target.value });\n }}\n /> */}\n\n \n \n \n \n \n {!!nokGenderError && (\n {nokTitleError} \n )}\n\n \n \n {countries.map((item) => (\n \n ))}\n \n {!!nokCountryError && (\n {nokCountryError} \n )}\n {\n setNextOfKinField({ nokMobilePhone: e.target.value });\n }}\n errorMessage={nokMobilePhoneError}\n />\n \n \n {allRelationShips.map((item) => (\n \n ))}\n \n\n {/* {\n setNextOfKinField({ nokRelationship: e.target.value });\n }}\n /> */}\n {\n setNextOfKinField({ nokEmailaddress: e.target.value });\n }}\n />\n\n {\n setNextOfKinField({ nokLocation: e.target.value });\n this.fetchState(e.target.value);\n }}\n >\n \n \n \n \n {!!nokLocationError && (\n {nokLocationError} \n )}\n {\n setNextOfKinField({ nokAddress1: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokAddress: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokResidenceHouseNumber: e.target.value });\n }}\n errorMessage={nokResidenceHouseNumberError}\n />\n {/* {\n setNextOfKinField({ nokResidenceStreetName: e.target.value });\n }}\n errorMessage={nokResidenceStreetNameError}\n /> */}\n {\n setNextOfKinField({ nokCity: e.target.value });\n }}\n errorMessage={nokCityError}\n />\n \n \n {allStates.map((item) => (\n \n ))}\n \n {!!nokStatecodeError && (\n {nokStatecodeError} \n )}\n \n \n {allLGA.map((item) => (\n \n ))}\n \n {!!nokLgaError && {nokLgaError} }\n {\n setNextOfKinField({ nokBox: e.target.value });\n }}\n />\n {\n setNextOfKinField({ nokZip: e.target.value });\n }}\n />\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n ...state.mpNINImplementation.nextOfKin,\n countries: state.onboarding.countries,\n token: state.mpNINImplementation.token,\n allRelationShips: state.auth.relationShips,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setNextOfKinField: mpAction.setNextOfKinField,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Employer);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Row, Col } from \"reactstrap\";\nimport Ink from \"react-ink\";\n\nimport {\n imageToDataURL,\n isNetworkRequestFailedError,\n} from \"../../config/helpers\";\nimport historyAction from \"../../redux/history/action\";\nimport authAction from \"../../redux/auth/action\";\nimport mpAction from \"../../redux/mpNINImplementation/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\n\nclass Signature extends Component {\n state = {\n signatureImageError: \"\",\n };\n\n componentDidMount() {\n const { customRef } = this.props;\n\n customRef({ validate: this.validate });\n }\n\n validate = () => {\n const { signatureImage } = this.props;\n\n let isValidated = true,\n signatureImageError;\n\n if (!signatureImage) {\n signatureImageError = \"signature Image is required\";\n isValidated = false;\n }\n\n this.setState({\n signatureImageError,\n });\n\n return isValidated;\n };\n\n handleOnChange = async (e) => {\n const { setSignatureField, setAlertMessage } = this.props;\n\n try {\n if (e.target.files[0]) {\n const response = await imageToDataURL(e.target.files[0]);\n setSignatureField(response);\n }\n } catch (error) {\n setAlertMessage({\n type: \"error\",\n message: error.message,\n onTryAgain: isNetworkRequestFailedError(error)\n ? () => this.handleOnChange(e)\n : null,\n });\n }\n };\n\n render() {\n const { signatureImage } = this.props;\n const { signatureImageError } = this.state;\n\n return (\n \n \n
\n {!!signatureImage && (\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n token: state.mpNINImplementation.token,\n signatureImage: state.mpNINImplementation.signatureImage,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setSignatureField: mpAction.setSignatureField,\n setAlertMessage: authAction.setAlertMessage,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Signature);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Row, Col } from \"reactstrap\";\nimport Ink from \"react-ink\";\nimport base64 from \"base-64\";\nimport api from \"../../config/api\";\nimport { BlobProvider } from \"@react-pdf/renderer\";\nimport moment from \"moment\";\n\nimport {\n isNetworkRequestFailedError,\n removeNewLineOrTab,\n} from \"../../config/helpers\";\nimport PreviewModal from \"../RSANINImplementation/FormSummary/PreviewModal\";\nimport ConsentFormModal from \"../../component/ConsentFormModal\";\nimport CustomLoader from \"../../component/CustomLoader/CustomLoader\";\nimport ConsentFormPDF from \"../../component/ConsentFormPDF\";\nimport { imageToDataURL } from \"../../config/helpers\";\nimport historyAction from \"../../redux/history/action\";\nimport authAction from \"../../redux/auth/action\";\nimport mpAction from \"../../redux/mpNINImplementation/action\";\nimport InputComp from \"../../component/InputComp/InputComp\";\nimport CustomButton from \"../../component/CustomButton/CustomButton\";\n\nclass Picture extends Component {\n state = {\n pictureImageError: \"\",\n isLoading: false,\n showFormPreview: false,\n isConsentAccepted: false,\n showPreview: false,\n };\n\n componentDidMount() {\n const { customRef } = this.props;\n\n customRef({ validate: this.validate });\n }\n\n handleOnChange = async (e) => {\n const { setPictureField, setAlertMessage } = this.props;\n\n try {\n if (e.target.files[0]) {\n const response = await imageToDataURL(e.target.files[0]);\n\n setPictureField(response);\n this.openModal();\n }\n } catch (error) {\n setAlertMessage({\n type: \"error\",\n message: error.message,\n onTryAgain: isNetworkRequestFailedError(error)\n ? () => this.handleOnChange(e)\n : null,\n });\n }\n };\n\n openModal = () => {\n this.props.setConsentFormField(\"\");\n this.setState({ isModal: true });\n };\n\n validate = () => {\n const { pictureImage, formImage } = this.props;\n let error = \"\";\n\n if (!pictureImage) {\n error = \"Picture is required\";\n } else if (!formImage) {\n error = \"Please accept consent form\";\n }\n\n return error;\n };\n\n upload = async () => {\n const {\n personalDetail,\n employer,\n nextOfKin,\n residence,\n pictureImage,\n formImage,\n signatureImage,\n bankDetails,\n validateUser,\n setAlertMessage,\n resetRSAForm,\n } = this.props;\n\n const header = {\n Authorization:\n \"Basic \" +\n base64.encode(validateUser.userName + \":\" + validateUser.password),\n };\n\n try {\n if (this.validate()) {\n throw new Error(this.validate());\n }\n\n this.setState({ isLoading: true });\n\n const data = {\n ...personalDetail,\n ...employer,\n ...nextOfKin,\n ...residence,\n ...bankDetails,\n pictureImage: pictureImage ? pictureImage.split(\"base64,\")[1] : \"\",\n formImage: formImage ? formImage.split(\"base64,\")[1] : \"\",\n signatureImage: signatureImage\n ? signatureImage.split(\"base64,\")[1]\n : \"\",\n agentCode: \"MPPPPL\",\n };\n data.employerRcno = employer.employerRawCode;\n delete data.employerRawCode;\n delete data.employerCode;\n // console.log(\"data =>\", data);\n\n // delete data.firstName;\n delete data.middleName;\n // delete data.maidenOrFormerName;\n // delete data.employerStateCode\n // delete data.dateOfFirstAppointment\n delete data.nokMiddleName;\n delete data.nokResidenceStateCode;\n\n // delete data.picture\n // delete data.consentForm\n // delete data.signature\n\n delete data.residenceHouseNo;\n delete data.employerStreetName;\n delete data.employerBuildingNameOrNumber;\n delete data.nokResidenceHouseNumber;\n\n const response = await api.RSAPinSubmit(data, header);\n setAlertMessage({ type: \"success\", message: response.errorMessage });\n resetRSAForm();\n } catch (e) {\n setAlertMessage({\n type: \"error\",\n message: e.message,\n onTryAgain: isNetworkRequestFailedError(e) ? this.upload : null,\n });\n }\n\n this.setState({ isLoading: false });\n };\n\n getName = () => {\n const { personalDetail } = this.props;\n\n return {\n firstName: personalDetail.firstname || \"\",\n middleName: personalDetail.middleName || \"\",\n lastName: personalDetail.surname || \"\",\n };\n };\n\n handleSubmit = () => {\n this.setState({ submit: true, isConsentAccepted: true });\n };\n\n getDataForPDF = () => {\n const { personalDetail, signatureImage } = this.props;\n\n return {\n name: {\n firstName: personalDetail.firstname,\n middleName: personalDetail.middleName,\n lastName: personalDetail.surname,\n },\n signature: signatureImage,\n };\n };\n\n getPreviewData = () => {\n return [\n {\n label: \"Form Reference Number\",\n value: this.props.personalDetail.formRefno,\n },\n {\n label: \"Surname\",\n value: this.props.personalDetail.surname,\n },\n {\n label: \"First Name\",\n value: this.props.personalDetail.firstname,\n },\n {\n label: \"Middle Name\",\n value: this.props.personalDetail.middleName,\n },\n {\n label: \"Other Names\",\n value: this.props.personalDetail.othernames,\n },\n {\n label: \"Nationality\",\n value: this.props.personalDetail.nationalityCode,\n },\n {\n label: \"State of Origin\",\n value: this.props.personalDetail.stateOfOrigin,\n },\n {\n label: \"LGA Code\",\n value: this.props.personalDetail.lgaCode,\n },\n {\n label: \"Title\",\n value: this.props.personalDetail.title,\n },\n {\n label: \"Gender\",\n value: this.props.personalDetail.gender,\n },\n {\n label: \"Marital status\",\n value: this.props.personalDetail.maritalStatusCode,\n },\n {\n label: \"Date of Birth\",\n value: this.props.personalDetail.dateOfBirth\n ? moment(this.props.personalDetail.dateOfBirth).format(\"MM/DD/YYYY\")\n : \"\",\n },\n {\n label: \"Place of Birth\",\n value: this.props.personalDetail.placeOfBirth,\n },\n {\n label: \"Permanent Country\",\n value: this.props.personalDetail.permCountry,\n },\n {\n label: \"Permanent City\",\n value: this.props.personalDetail.permCity,\n },\n {\n label: \"Maiden/Former Name\",\n value: this.props.personalDetail.maidenName,\n },\n {\n label: \"Permanent Address Location\",\n value: this.props.personalDetail.permanentAddressLocation,\n },\n {\n label: \"Permanent State\",\n value: this.props.personalDetail.permState,\n },\n {\n label: \"Permanent LGA\",\n value: this.props.personalDetail.permLga,\n },\n {\n label: \"Mobile Phone\",\n value: this.props.personalDetail.mobilePhone,\n },\n {\n label: \"National Identity Number (NIN)\",\n value: this.props.personalDetail.ssn,\n },\n {\n label: \"Bank Verification Number\",\n value: this.props.personalDetail.bvn,\n },\n {\n label: \"Permanent Address of Account Holder\",\n value: this.props.residence.permanentAddress,\n },\n {\n label: \"Other Address Details\",\n value: this.props.residence.permanentAddress1,\n },\n {\n label: \"Zip\",\n value: this.props.residence.permZip,\n },\n {\n label: \"Email\",\n value: this.props.residence.email,\n },\n\n {\n label: \"P. O. Box of Account Holder\",\n value: this.props.residence.permBox,\n },\n {\n label: \"Sector of Employment\",\n value: this.props.employer.employerType,\n },\n {\n label: \"Employer\",\n value: removeNewLineOrTab(this.props.employer.employerCode),\n },\n {\n label: \"Employer City\",\n value: this.props.employer.employerCity,\n },\n {\n label: \"Employer’s Country of Origin\",\n value: this.props.employer.employerCountry,\n },\n {\n label: \"Employer Location\",\n value: this.props.employer.employerLocation,\n },\n {\n label: \"Employer State Code\",\n value: this.props.employer.employerStatecode,\n },\n {\n label: \"State Of Posting\",\n value: this.props.employer.stateOfPosting,\n },\n {\n label: \"Employer LGA\",\n value: this.props.employer.employerLga,\n },\n {\n label: \"Employer’s Contact phone\",\n value: this.props.employer.employerPhone,\n },\n {\n label: \"Employer’s P.O. Box\",\n value: this.props.employer.employerBox,\n },\n {\n label: \"Employer Business\",\n value: this.props.employer.employerBusiness,\n },\n {\n label: \"Employer’s Main Address\",\n value: this.props.employer.employerAddress1,\n },\n {\n label: \"Employer’s Additional Address\",\n value: this.props.employer.employerAddress,\n },\n {\n label: \"Employer’s ZIP Code\",\n value: this.props.employer.employerZip,\n },\n {\n label: \"First Appointment Date\",\n value: this.props.employer.dateOfFirstApointment\n ? moment(this.props.employer.dateOfFirstApointment).format(\n \"MM/DD/YYYY\"\n )\n : \"\",\n },\n {\n label: \"NOK Title\",\n value: this.props.nextOfKin.nokTitle,\n },\n {\n label: \"NOK First Name\",\n value: this.props.nextOfKin.nokName,\n },\n {\n label: \"NOK Middle Name\",\n value: this.props.nextOfKin.nokOthername,\n },\n {\n label: \"NOK Surname\",\n value: this.props.nextOfKin.nokSurname,\n },\n {\n label: \"NOK Gender\",\n value: this.props.nextOfKin.nokGender,\n },\n {\n label: \"Next Of Kin Country\",\n value: this.props.nextOfKin.nokCountry,\n },\n {\n label: \"Next of Kin Mobile Phone\",\n value: this.props.nextOfKin.nokMobilePhone,\n },\n\n {\n label: \"NOK Relationship\",\n value: this.props.nextOfKin.nokRelationship,\n },\n {\n label: \"Next of Kin Email\",\n value: this.props.nextOfKin.nokEmailaddress,\n },\n\n {\n label: \"Next of Kin Location\",\n value: this.props.nextOfKin.nokLocation,\n },\n {\n label: \"Next of Kin Address\",\n value: this.props.nextOfKin.nokAddress1,\n },\n {\n label: \"Next of Kin Additional Address\",\n value: this.props.nextOfKin.nokAddress,\n },\n {\n label: \"NOK Residence House Number\",\n value: this.props.nextOfKin.nokResidenceHouseNumber,\n },\n\n {\n label: \"Next of Kin city\",\n value: this.props.nextOfKin.nokCity,\n },\n {\n label: \"NOK Residence State Code\",\n value: this.props.nextOfKin.nokStatecode,\n },\n {\n label: \"Next of Kin Local Govt\",\n value: this.props.nextOfKin.nokLga,\n },\n {\n label: \"Next of Kin P.O.Box\",\n value: this.props.nextOfKin.nokBox,\n },\n {\n label: \"Next of Zip\",\n value: this.props.nextOfKin.nokZip,\n },\n\n {\n label: \"Bank Name\",\n value: this.props.bankDetails.bankName,\n },\n {\n label: \"Bank Account Name\",\n value: this.props.bankDetails.accountName,\n },\n\n {\n label: \"Bank Account Number\",\n value: this.props.bankDetails.accountNumber,\n },\n ];\n };\n\n render() {\n const { pictureImage } = this.props;\n const { pictureImageError, isLoading, isModal } = this.state;\n\n return (\n \n \n
\n )}\n \n \n
\n {!!pictureImage && (\n this.setState({ isModal: false })}\n isOpen={isModal}\n />\n this.setState({ showPreview: false })}\n isOpen={this.state.showPreview}\n />\n\n {this.state.submit && (\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n personalDetail: state.mpNINImplementation.personalDetail,\n pictureImage: state.mpNINImplementation.pictureImage,\n residence: state.mpNINImplementation.residence,\n employer: state.mpNINImplementation.employer,\n nextOfKin: state.mpNINImplementation.nextOfKin,\n signatureImage: state.mpNINImplementation.signatureImage,\n formImage: state.mpNINImplementation.formImage,\n bankDetails: state.mpNINImplementation.bankDetails,\n validateUser: state.onboarding.user,\n token: state.mpNINImplementation.token,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setPictureField: mpAction.setPictureField,\n setAlertMessage: authAction.setAlertMessage,\n setConsentFormField: mpAction.setConsentFormField,\n resetRSAForm: mpAction.resetRSAForm,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Picture);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Container, Row, Col } from \"reactstrap\";\nimport Ink from \"react-ink\";\n\nimport api from \"../../config/api\";\nimport \"./style.css\";\nimport StepTab from \"./StepTab\";\nimport BankDetails from \"./BankDetails\";\nimport PersonalDetail from \"./PersonalDetail\";\nimport Residence from \"./Residence\";\nimport Employer from \"./Employer\";\nimport NextOfKin from \"./NextOfKin\";\nimport Signature from \"./Signature\";\nimport Picture from \"./Picture\";\n// import ConsentForm from \"./ConsentForm\";\nimport historyAction from \"../../redux/history/action\";\nimport onboardingAction from \"../../redux/onboarding/action\";\nimport mpAction from \"../../redux/mpNINImplementation/action\";\nimport PageHead from \"../../component/pageHead/PageHead\";\nimport CustomLoader from \"../../component/CustomLoader/CustomLoader\";\nimport CustomModel from \"../../component/CustomModel/CustomModel\";\nimport nextBlueIcon from \"../../assets/icons/Conti_blue.png\";\nimport prevBlueIcon from \"../../assets/icons/back_blue.png\";\nimport authAction from \"../../redux/auth/action\";\nimport constants from \"../../config/constants\";\n\nclass Onboarding extends Component {\n state = {\n step: 1,\n isLoading: false,\n isModelVisible: false,\n alertMessage: \"\",\n };\n\n componentDidMount() {\n const { history, setHistory } = this.props;\n\n this.validate();\n this.fetchCountries();\n\n setHistory(history);\n }\n\n fetchBaseURLandToken = async () => {\n try {\n const { setBaseURL, setMPNINVerificationToken } = this.props;\n const baseURLandToken = await api.getBaseURLandPublicToken();\n\n setBaseURL(baseURLandToken.data.result);\n setMPNINVerificationToken(baseURLandToken.data.format);\n } catch (e) {\n console.log(e);\n }\n };\n\n fetchCountries = async () => {\n try {\n const { saveCountries } = this.props;\n const response = await api.fetchCountries();\n\n saveCountries(response.data.result);\n } catch (e) {\n console.log(\"Error\", e.message);\n }\n };\n\n verifyNIN = async () => {\n try {\n if (isNaN(this.props.ssn)) {\n return this.props.setAlertMessage({\n type: \"error\",\n message: \"NIN should be only number\",\n });\n }\n\n if (this.props.ssn.length < 11 || this.props.ssn.length > 11) {\n return this.props.setAlertMessage({\n type: \"error\",\n message: \"NIN should be 11 digit long\",\n });\n }\n\n this.setState({\n isLoading: true,\n });\n\n await this.fetchToken();\n await this.fetchBaseURLandToken();\n\n const {\n setIsFormHidden,\n baseURL,\n ninVerificationToken,\n ssn,\n setIsNINVerified,\n } = this.props;\n\n const body = {\n nin: ssn,\n };\n const headers = {\n Authorization: `Bearer ${ninVerificationToken}`,\n };\n const response = await api.verifyNIN(body, headers, baseURL);\n\n await this.dataMappingInField(response.data);\n setIsNINVerified(true);\n setIsFormHidden(false);\n } catch (e) {\n const { setPersonalDetailField } = this.props;\n\n setPersonalDetailField({\n ssn: \"\",\n });\n\n this.setState({\n isModelVisible: true,\n alertMessage:\n \"Record not found, Do you want to continue entering manually?\",\n });\n }\n\n this.setState({\n isLoading: false,\n });\n };\n\n dataMappingInField = async (data) => {\n const {\n setPersonalDetailField,\n countries,\n setNextOfKinField,\n setResidenceField,\n setPictureField,\n setSignatureField,\n permanentAddressLocation,\n setEmployerField,\n } = this.props;\n\n let nationalityCode;\n let stateCode;\n let LGACode;\n let permCountryCode;\n let permStateCode;\n let permLGACode;\n // let NOKStateCode;\n // let NOKLGACode;\n try {\n let dateOfBirth = await this.transformDateIntoValidDate(data.birthdate);\n\n setPersonalDetailField({\n surname: data.surname,\n firstname: data.firstname,\n middleName: data.maidenname,\n dateOfBirth: new Date(dateOfBirth),\n permCity: data.residence_Town,\n maidenName: data.maidenname,\n mobilePhone: data.telephoneno,\n });\n\n setResidenceField({\n permanentAddress: data.residence_AdressLine1,\n permZip: \"234\",\n });\n\n setEmployerField({\n employerZip: \"234\",\n });\n\n setNextOfKinField({\n nokName: data.nok_firstname,\n nokSurname: data.nok_surname,\n nokAddress1: data.nok_address1,\n nokAddress: Array.isArray(data.nok_address2)\n ? data.nok_address2[0] || \"\"\n : \"\",\n // nokStatecode: NOKStateCode,\n // nokLga: NOKLGACode,\n nokZip: \"234\",\n });\n\n setPictureField(\"data:image/jpeg;base64,\" + data.picture);\n setSignatureField(\"data:image/jpeg;base64,\" + data.signature);\n\n await this.fetchCountries();\n\n // Finding Gender and Title Code\n let titleCode = data.title;\n titleCode = titleCode.replace(/\\b[a-z]/g, (x) => x.toUpperCase());\n setPersonalDetailField({ title: titleCode });\n\n let genderCode = data.gender;\n genderCode = genderCode.replace(/\\b[a-z]/g, (x) => x.toUpperCase());\n setPersonalDetailField({ gender: genderCode });\n\n // Finding Maritial Status\n let maritalStatusArray = constants.MARITAL_STATUS_CODES;\n let maritialStatusResponse = data.maritalstatus;\n maritialStatusResponse = maritialStatusResponse.replace(/\\b[a-z]/g, (x) =>\n x.toUpperCase()\n );\n\n let maritalStatus = maritalStatusArray.find(\n //eslint-disable-next-line\n (item) => item.label == maritialStatusResponse\n );\n let maritalStatusCode = maritalStatus.value;\n setPersonalDetailField({ maritalStatusCode: maritalStatusCode });\n\n // For permenant country personal Detail tab\n if (data.birthcountry) {\n let permCountry = countries.find(\n //eslint-disable-next-line\n (item) => item.countryName == data.birthcountry.toUpperCase()\n );\n permCountryCode = permCountry.countryCode;\n setPersonalDetailField({ permCountry: permCountryCode });\n }\n\n // For Nationality (Personal Details Tab)\n if (data.birthcountry) {\n let nationalityCountry = countries.find(\n //eslint-disable-next-line\n (item) => item.countryName == data.birthcountry.toUpperCase()\n );\n nationalityCode = nationalityCountry.countryCode;\n }\n setPersonalDetailField({ nationalityCode: nationalityCode });\n\n // For State Of Origin and LGA (Personal Details Tab)\n if (data.self_origin_state && data.birthcountry) {\n let states = await this.fetchStates(nationalityCode);\n let stateOfOrigin = states.find(\n //eslint-disable-next-line\n (item) => item.stateName == data.self_origin_state.toUpperCase()\n );\n stateCode = stateOfOrigin.stateCode;\n setPersonalDetailField({ stateOfOrigin: stateCode });\n\n if (data.self_origin_lga) {\n let LGA = await this.fetchLGA(stateCode);\n let allLGA = LGA.find(\n //eslint-disable-next-line\n (item) => item.lgaName == data.self_origin_lga.toUpperCase()\n );\n LGACode = allLGA.lgaCode;\n setPersonalDetailField({ lgaCode: LGACode });\n }\n }\n\n // For Perm State Of Origin and LGA (Personal Details Tab)\n if (data.residence_state && permanentAddressLocation) {\n let permAddressLocation;\n\n //eslint-disable-next-line\n if (permanentAddressLocation === \"N\") {\n permAddressLocation = \"NG\";\n } else {\n permAddressLocation = permanentAddressLocation;\n }\n\n let states = await this.fetchPermStates(permAddressLocation);\n // console.log(states)\n let stateOfOrigin = states.find(\n //eslint-disable-next-line\n (item) => item.stateName == data.residence_state.toUpperCase()\n );\n // console.log(stateOfOrigin)\n permStateCode = stateOfOrigin.stateCode;\n setPersonalDetailField({ permState: permStateCode });\n\n if (data.residence_lga) {\n let LGA = await this.fetchPermLGA(permStateCode);\n let allLGA = LGA.find(\n //eslint-disable-next-line\n (item) => item.lgaName == data.residence_lga.toUpperCase()\n );\n permLGACode = allLGA.lgaCode;\n setPersonalDetailField({ permLga: permLGACode });\n }\n }\n\n // For State Of Origin and LGA (NOK Tab) // We can delete this according to client requirment!\n // if (data.nok_state) { // needed country validation\n // let states = await this.fetchNOKStates(\"NG\") // needed country code\n // let stateOfOrigin = states.find(item => item.stateName == data.nok_state.toUpperCase())\n // NOKStateCode = stateOfOrigin.stateCode\n // if (data.nok_lga) {\n // let LGA = await this.fetchNOKLGA(stateCode)\n // let allLGA = LGA.find(item => item.lgaName == data.self_origin_lga.toUpperCase())\n // NOKLGACode = allLGA.lgaCode\n // }\n // }\n } catch (e) {\n console.log(e);\n }\n };\n\n transformDateIntoValidDate = (rawDate) => {\n const parts = rawDate.split(\"-\");\n const monthNum = Number(parts[1]);\n return parts[0] + \"-\" + constants.MONTHS[monthNum] + \"-\" + parts[2];\n };\n\n fetchStates = async (nationalityCode) => {\n try {\n const { token, setAllStates } = this.props;\n\n this.setState({ allStates: [] });\n\n if (!nationalityCode) {\n nationalityCode = this.props.nationalityCode;\n }\n\n const state = await api.fetchState(\n { countryCode: nationalityCode },\n token\n );\n\n setAllStates({ allStatesArray: state.data.result });\n return state.data.result;\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchLGA = async (stateOfOrigin) => {\n try {\n const { token, setAllLGA } = this.props;\n\n if (!stateOfOrigin) {\n stateOfOrigin = this.props.stateOfOrigin;\n }\n\n const LGA = await api.fetchLGA({ stateCode: stateOfOrigin }, token);\n\n setAllLGA({ allLGAArray: LGA.data.result });\n return LGA.data.result;\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchPermStates = async (nationalityCode) => {\n try {\n const { token, setAllPermStates } = this.props;\n\n // this.setState({ allStates: [] });\n\n if (!nationalityCode) {\n nationalityCode = this.props.nationalityCode;\n }\n\n const state = await api.fetchState(\n { countryCode: nationalityCode },\n token\n );\n\n setAllPermStates({ allStatesArray: state.data.result });\n return state.data.result;\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchPermLGA = async (stateOfOrigin) => {\n try {\n const { token, setAllPermLGA } = this.props;\n\n if (!stateOfOrigin) {\n stateOfOrigin = this.props.stateOfOrigin;\n }\n\n const LGA = await api.fetchLGA({ stateCode: stateOfOrigin }, token);\n\n setAllPermLGA({ allPermLGA: LGA.data.result });\n return LGA.data.result;\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchNOKStates = async (nationalityCode) => {\n try {\n const { token, setAllNOKStates } = this.props;\n\n this.setState({ allStates: [] });\n\n if (!nationalityCode) {\n nationalityCode = this.props.nationalityCode;\n }\n\n const state = await api.fetchState(\n { countryCode: nationalityCode },\n token\n );\n\n setAllNOKStates({ allStatesArray: state.data.result });\n return state.data.result;\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n\n fetchNOKLGA = async (stateOfOrigin) => {\n try {\n const { token, setAllNOKLGA } = this.props;\n\n if (!stateOfOrigin) {\n stateOfOrigin = this.props.stateOfOrigin;\n }\n\n const LGA = await api.fetchLGA({ stateCode: stateOfOrigin }, token);\n\n setAllNOKLGA({ allLGAArray: LGA.data.result });\n return LGA.data.result;\n } catch (e) {\n console.log(\"E =>\", e);\n }\n };\n mannualyAddData = () => {\n const { setIsFormHidden } = this.props;\n\n setIsFormHidden(false);\n this.setState({ isModelVisible: false });\n };\n\n fetchToken = async () => {\n const { setToken } = this.props;\n\n if (this.props.token) {\n return \"\";\n }\n\n try {\n const payload = {\n username: constants.SYSTEM_ACCOUNT.USERNAME,\n password: constants.SYSTEM_ACCOUNT.PASSWORD,\n };\n\n const response = await api.login(payload);\n const token = response.data.token;\n\n setToken(token);\n } catch (e) {\n console.log(\"e =>\", e);\n }\n\n return \"\";\n };\n\n // validate = async () => {\n // const { validateUser, user, getUser } = this.props;\n\n // if (!validateUser.userName) {\n // this.setState({ isLoading: true });\n\n // try {\n // const response = await api.getUsernameAndPassword(\n // { userName: user.User.userName },\n // user.token\n // );\n // const data = {\n // userName: response.data.result.UserName,\n // password: response.data.result.Password,\n // };\n // getUser(data);\n // } catch (e) {\n // console.log(\"Error\", e.message);\n // }\n // this.setState({ isLoading: false });\n // }\n // };\n\n validate = async () => {\n const { validateUser, getUser } = this.props;\n\n if (!validateUser.userName) {\n this.setState({ isLoading: true });\n\n try {\n const response = await api.getUsernameAndPasswordUBA(\n {\n userName: \"test\",\n },\n \"\"\n );\n\n const data = {\n userName: response.data.result.UserName,\n password: response.data.result.Password,\n };\n\n getUser(data);\n } catch (e) {\n console.log(\"Error\", e.message);\n }\n this.setState({ isLoading: false });\n }\n };\n\n scrollToTop = () => {\n const target = document.querySelector(\".card-container .flex1\");\n var maxScroll = target.scrollHeight;\n\n var scrollInt = setInterval(() => {\n if (target.scrollTop !== 0) {\n target.scrollTop -= maxScroll / 100;\n } else {\n clearInterval(scrollInt);\n }\n }, 10);\n };\n\n decideTab = () => {\n const { step } = this.state;\n\n switch (step) {\n case 1:\n return (\n \n \n
\n )}\n \n \n {this.props.pictureImage && !this.state.isConsentAccepted && (\n {\n this.setState({ isModal: true });\n }}\n />\n \n )}\n {this.state.isConsentAccepted && (\n {\n this.setState({ showPreview: true });\n }}\n />\n \n )}\n {\n this.upload();\n }}\n />\n \n
\n
\n {isLoading && \n this.verifyNIN()}\n >\n \n
\n {step !== 1 && (\n Verify NIN
\nBack
\nContinue
\nProcessing
\n \n );\n}\n\nconst mapStateToProps = (state) => ({});\n\nconst mapDispatchToProps = {\n setAlertMessage: authAction.setAlertMessage,\n setHistory: historyAction.setHistory,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(CyberPaySuccess);\n","const setConsent = payload => ({\n type: \"SET_CONSENT\",\n payload\n});\n\nexport default {\n setConsent\n};\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Container } from \"reactstrap\";\n\nimport CustomLoader from \"../../component/CustomLoader/CustomLoader\";\nimport \"./style.css\";\nimport api from \"../../config/api\";\nimport { isNetworkRequestFailedError, logoutUser } from \"../../config/helpers\";\nimport historyAction from \"../../redux/history/action\";\nimport consentAction from \"../../redux/consent/action\";\nimport GradientButton from \"../../component/GradientButton/GradientButton\";\nimport authActions from \"../../redux/auth/action\";\n\nclass Consent extends Component {\n state = {\n isLoading: false,\n consent: \"\",\n };\n\n componentDidMount = async () => {\n const { history, setHistory, consent } = this.props;\n setHistory(history);\n\n let userData = sessionStorage.getItem(\"user\");\n if (!userData) {\n history.replace(\"/login\");\n }\n\n if (!consent) {\n this.getConsent();\n }\n };\n\n getConsent = async () => {\n const { setConsent } = this.props;\n\n try {\n this.setState({ isLoading: true });\n\n const response = await api.fetchConsent();\n let data = response.data.NdprClause;\n\n data = data.replace(/\\n/g, \"\");\n setConsent(data);\n this.setState({ consent: data });\n } catch (e) {\n console.log(\"e =>\", e);\n }\n this.setState({ isLoading: false });\n };\n\n logoutUser = async () => {\n this.setState({ isLoading: true });\n await logoutUser(this.props);\n this.setState({ isLoading: false });\n };\n\n rejectConsent = () => {\n this.logoutUser();\n };\n\n acceptConsent = async () => {\n const { setAlertMessage, history } = this.props;\n\n try {\n let userData = sessionStorage.getItem(\"user\");\n userData = JSON.parse(userData);\n let UserName = userData.User.UserName;\n let token = userData.token;\n\n const isNDPRAccepted = await api.acceptConsent(\n { userName: UserName, isAccepted: \"Accepted\" },\n token\n );\n\n if (\n isNDPRAccepted.data.Status != 200 && //eslint-disable-line\n isNDPRAccepted.data.ErrorCode != \"00\" //eslint-disable-line\n ) {\n throw new Error();\n }\n\n history.replace(\"/\");\n\n setAlertMessage({ type: \"success\", message: \"Successfull!\" });\n } catch (error) {\n setAlertMessage({\n message: error.message,\n type: \"error\",\n onTryAgain: isNetworkRequestFailedError(error)\n ? this.acceptConsent\n : null,\n });\n history.replace(\"/login\");\n }\n };\n render() {\n const { isLoading } = this.state;\n const { consent } = this.props;\n\n return (\n
\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n consent: state.consent.consent,\n user: state.auth.user,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setConsent: consentAction.setConsent,\n removeUser: authActions.removeUser,\n setAlertMessage: authActions.setAlertMessage,\n setUser: authActions.setUser,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Consent);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Container } from \"reactstrap\";\nimport { Link } from \"react-router-dom\";\n\nimport CustomLoader from \"../../component/CustomLoader/CustomLoader\";\nimport \"./style.css\";\nimport api from \"../../config/api\";\nimport GradientButton from \"../../component/GradientButton/GradientButton\";\nimport TextInputOutline from \"../../component/TextInputOutline/TextInputOutline\";\nimport historyAction from \"../../redux/history/action\";\nimport authAction from \"../../redux/auth/action\";\nimport { isNetworkRequestFailedError } from \"../../config/helpers\";\n\nclass RegistrationToken extends Component {\n state = {\n isLoading: false,\n registeredUser: null,\n };\n\n componentDidMount() {\n const { history, setHistory } = this.props;\n\n const registeredUser = localStorage.getItem(\"registeredUser\");\n if (registeredUser) {\n this.setState({ registeredUser: JSON.parse(registeredUser) });\n } else {\n history.goBack();\n }\n\n setHistory(history);\n }\n\n changeHandler = (e) => {\n const name = e.target.name;\n\n this.setState({\n [name]: e.target.value,\n [name + \"Error\"]: \"\",\n });\n };\n\n submit = async (e) => {\n const { localHistory, setAlertMessage } = this.props;\n e.preventDefault();\n\n try {\n const { registrationToken, registeredUser } = this.state;\n\n if (!registrationToken) {\n throw new Error(\"Please enter registration token\");\n }\n const payload = {\n pin: registeredUser.RSAPin,\n inputToken: registrationToken,\n };\n\n this.setState({ isLoading: true });\n\n await api.verifyActivationToken(payload);\n\n localStorage.removeItem(\"registeredUser\");\n setAlertMessage({ type: \"success\", message: \"Success\" });\n localHistory.push(\"/login\");\n } catch (error) {\n setAlertMessage({\n type: \"error\",\n message: error.message,\n onTryAgain: isNetworkRequestFailedError(error)\n ? () => this.submit(e)\n : null,\n });\n }\n\n this.setState({ isLoading: false });\n };\n\n render() {\n const {\n registrationToken,\n isLoading,\n registrationTokenError,\n registeredUser,\n } = this.state;\n\n if (!registeredUser) {\n return null;\n }\n\n return (\n \n \n {consent && }\n \n
\n\n {isLoading && \n this.rejectConsent()}\n />\n this.acceptConsent()}\n />\n
\n \n \n \n {isLoading &&
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n localHistory: state.history.localHistory,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setAlertMessage: authAction.setAlertMessage,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(RegistrationToken);\n","// export const USER = {\n// UserName: \"izaantest\",\n// MobileNumber: \"029348293489\",\n// Email: \"izaantest@example.com\"\n// }\n\nexport const USER = {};\n","import React, { useRef, useEffect, useState } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Container } from \"reactstrap\";\n// import { Link } from \"react-router-dom\";\n\nimport * as INITIAL_DATA from \"./INITIAL_DATA\";\nimport CustomLoader from \"../../component/CustomLoader/CustomLoader\";\nimport \"./style.css\";\nimport api from \"../../config/api\";\nimport GradientButton from \"../../component/GradientButton/GradientButton\";\nimport TextInputOutline from \"../../component/TextInputOutline/TextInputOutline\";\nimport historyAction from \"../../redux/history/action\";\nimport authAction from \"../../redux/auth/action\";\nimport { isNetworkRequestFailedError } from \"../../config/helpers\";\n\nconst UserActivation = (props) => {\n const [isLoading, setIsLoading] = useState(false);\n const [otp, setOTP] = useState(\"\");\n const [errors, setErrors] = useState({});\n const [resendTimer, setResendTimer] = useState(60);\n const [resendTimerBoolean, setResendTimerBoolean] = useState(true);\n const resendInterval = useRef(null);\n\n const data = props.activationOptionModal?.data || INITIAL_DATA.USER;\n\n console.log(\"data =>\", data);\n\n useEffect(() => {\n if (resendTimerBoolean) {\n resendInterval.current = setInterval(() => {\n setResendTimer((prev) => prev - 1);\n }, 1000);\n }\n\n return () => {\n if (resendInterval.current) {\n clearInterval(resendInterval.current);\n }\n };\n }, [resendTimerBoolean]);\n\n useEffect(() => {\n if (resendInterval.current && resendTimer <= 0) {\n clearInterval(resendInterval.current);\n setResendTimerBoolean(false);\n }\n }, [resendTimer]);\n\n useEffect(() => {\n const { history, setHistory } = props;\n\n // if (!localHistory) {\n // // window.location.replace(\"/register\");\n // }\n\n if (!data || !Object.keys(data).length) {\n history.push(\"/login\");\n }\n\n setHistory(history);\n }, []);\n\n const changeHandler = (e) => {\n const name = e.target.name;\n\n if (name === \"OTP\") {\n setOTP(e.target.value);\n }\n };\n\n const submit = async (e) => {\n const { localHistory, setAlertMessage } = props;\n e.preventDefault();\n\n try {\n if (validate()) return;\n\n setIsLoading(true);\n\n const payload = {\n username: data.UserName,\n activationToken: otp,\n };\n console.log(\"payload =>\", payload);\n\n const response = await api.regActivation(payload);\n\n setAlertMessage({\n type: \"success\",\n message:\n response.data.message || response.data.SuccessMessage || \"Successful\",\n });\n localHistory.push(\"/login\");\n } catch (error) {\n setAlertMessage({\n type: \"error\",\n message: error.message,\n onTryAgain: isNetworkRequestFailedError(error) ? () => submit(e) : null,\n });\n }\n\n setIsLoading(false);\n };\n\n const validate = () => {\n const errors = {};\n\n if (!otp) {\n errors.OTPError = \"Please fill all mandatory fields\";\n }\n\n setErrors(errors);\n\n console.log(\"errors =>\", errors);\n\n return Object.keys(errors).length;\n };\n\n const resendOTP = async () => {\n try {\n setIsLoading(true);\n console.log(\"data =>\", data);\n\n const payload = {\n username: data.UserName,\n };\n console.log(\"payload =>\", payload);\n const response = await api.getActivationStatus(payload);\n\n console.log(\"response =>\", response);\n\n if (response?.data.SuccessMessage) {\n props.setAlertMessage({\n type: \"success\",\n message: response?.data.SuccessMessage,\n });\n props.localHistory.push(\"/login\");\n setIsLoading(false);\n return;\n }\n\n props.setAlertMessage({\n type: \"success\",\n message: \"Sent successfully\",\n });\n setResendTimerBoolean(true);\n setResendTimer(60);\n } catch (e) {\n props.setAlertMessage({\n type: \"error\",\n message: e.message,\n onTryAgain: isNetworkRequestFailedError(e) ? resendOTP : null,\n });\n }\n\n setIsLoading(false);\n };\n\n return (\n \n \n
\n Premium Pension Limited
\n\n Enter the token sent to your phone number{\" \"}\n {registeredUser.mobile}{\" \"}\n and email{\" \"}\n {registeredUser.email}\n
\n\n
\n \n \n Already a member? Login\n \n
\n \n \n \n \n {isLoading &&
\n );\n};\n\nconst mapStateToProps = (state) => ({\n user: state.auth.user,\n localHistory: state.history.localHistory,\n activationOptionModal: state.activationOptionModal,\n});\n\nconst mapDispatchToProps = {\n setHistory: historyAction.setHistory,\n setAlertMessage: authAction.setAlertMessage,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(UserActivation);\n","import React from \"react\";\nimport { HashRouter, Route } from \"react-router-dom\";\n\nimport Home from \"../screens/Home/Home\";\nimport ContactUs from \"../screens/ContactUs/ContactUs\";\nimport ChangePassword from \"../screens/ChangePassword/ChangePassword\";\nimport CurrentBalance from \"../screens/CurrentBalance/CurrentBalance\";\nimport FAQ from \"../screens/FAQ/FAQ\";\nimport PersonalDetails from \"../screens/PersonalDetails/PersonalDetails\";\nimport NextOfKin from \"../screens/NextOfKin/NextOfKin\";\nimport EmployerDetails from \"../screens/EmployerDetails/EmployerDetails\";\n// import PensionCalculator from \"../screens/PensionCalculator/PensionCalculator\";\nimport PensionCalculatorWebview from \"../screens/PensionCalculator/PensionCalculatorWebview\";\nimport AddRole from \"../screens/AddRole/AddRole\";\nimport Login from \"../screens/Login/Login\";\nimport Register from \"../screens/Register/Register\";\nimport SelfService from \"../screens/SelfService/SelfService\";\n// import Enrollment from \"../screens/Enrollment/Enrollment\";\nimport DownloadForms from \"../screens/DownloadForms/DownloadForms\";\nimport TransactionDetails from \"../screens/TransactionDetails/TransactionDetails\";\nimport FundPrices from \"../screens/FundPrices/FundPrices\";\nimport PrivacyPolicy from \"../screens/PrivacyPolicy/PrivacyPolicy\";\n// import Onboarding from \"../screens/Onboarding/Onboarding\";\nimport RsaPinRegistration from \"../screens/RSAPinRegistration/Onboarding\";\nimport Contribution from \"../screens/Contribution/Contribution\";\nimport Withdrawl from \"../screens/Withdrawl/Withdrawl\";\nimport Referral from \"../screens/Referral/Referral\";\nimport RewardSystem from \"../screens/RewardSystem/RewardSystem\";\nimport ForgotPassword from \"../screens/ForgotPassword/ForgotPassword\";\nimport NewPassword from \"../screens/ForgotPassword/NewPassword\";\nimport ScheduleSubmissionReport from \"../screens/ScheduleSubmissionReport\";\nimport OutputScreen from \"../screens/OutputScreen\";\nimport RequestEmployerCode from \"../screens/RequestEmployerCode\";\nimport RSAPinDublicated from \"../screens/RSAPinDublicated/Onboarding\";\nimport RSANINImplementation from \"../screens/RSANINImplementation/Onboarding\";\nimport MicroPensionDublicated from \"../screens/MicroPensionDublicated/Onboarding\";\nimport MPNINImplementation from \"../screens/MPNINImplementation/Onboarding\";\n// import ExpressionOfInterest from \"../screens/ExpressionOfInterest\";\nimport ExpressionOfInterestWebview from \"../screens/ExpressionOfInterest/ExpressionOfInterestWebview\";\nimport CyberPaySuccess from \"../screens/CyberPaySuccess\";\nimport Consent from \"../screens/Consent/Consent\";\nimport RegistrationToken from \"../screens/RegistrationToken\";\nimport UserActivation from \"../screens/Register/UserActivation\";\n\nexport default function Router() {\n return (\n \n \n
\n Premium Pension Limited
\n\n Enter the token sent to your phone number and email address\n
\n\n
\n \n You can request again in {resendTimer} seconds\n
\n ) : (\n\n Resend OTP\n
\n )}\n\n
\n );\n};\n\nconst mapStateToProps = (store) => ({\n banner: store.bannerPopup.banner,\n});\n\nconst mapDispatchToProps = {\n removeBannerPopup: bannerPopupActions.removeBannerPopup,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(InfoBanner);\n","import React from \"react\";\nimport { connect } from \"react-redux\";\nimport { IdleTimerProvider } from \"react-idle-timer\"; // import IdleTimer from \"react-idle-timer\";\nimport Countly from \"countly-sdk-web\";\n\nimport { findBaseURL, isNetworkRequestFailedError } from \"./config/helpers\";\nimport activationOptionModalAction from \"../src/redux/activationOptionModal/action\";\nimport ActivationOptionModal from \"../src/component/ActivationOptionModal\";\nimport { checkPermissionForNonMember } from \"./config/helpers\";\nimport constants from \"./config/constants\";\nimport api from \"./config/api\";\nimport referralAction from \"./redux/referral/action\";\nimport authAction from \"./redux/auth/action\";\nimport historyAction from \"./redux/history/action\";\nimport AlertBox from \"./component/AlertBox/AlertBox\";\nimport Sidebar from \"./component/Sidebar/Sidebar\";\nimport Header from \"./component/Header/Header\";\nimport BackgroundIcon from \"./component/BackgroundIcon/BackgroundIcon\";\nimport CustomLoader from \"./component/CustomLoader/CustomLoader\";\nimport Router from \"./config/Router\";\nimport InfoBanner from \"./component/InfoBanner\";\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.idleTimer = null;\n // this.onIdle = this._onIdle.bind(this);\n }\n\n componentDidMount = async () => {\n // let isAccepted = await sessionStorage.getItem(\"IsConsentAccepted\")\n\n // try {\n // if (isAccepted === \"false\") {\n // await removeUser()\n // sessionStorage.removeItem(\"user\")\n // sessionStorage.removeItem(\"IsConsentAccepted\")\n // }\n // } catch (error) {\n // return null\n // }\n\n this.checkLogin(this.props);\n this.fetchAllBanks();\n this.fetchAllRelationships();\n this.checkPermission(this.props.user);\n\n if (!this.props.allEmployers.length) this.getAllEmployers();\n };\n\n // async _onIdle(e) {\n // const {\n // user,\n // showLoader,\n // removeUser,\n // hideLoader,\n // localHistory,\n // setHistory,\n // openSidebar,\n // closeSidebar\n // } = this.props;\n\n // if (user) {\n // try {\n // showLoader();\n // await api.logout(null, user.token);\n // } catch (e) {}\n\n // sessionStorage.removeItem(\"user\");\n // removeUser();\n // localHistory.push(\"/login\");\n // setHistory(localHistory);\n // openSidebar();\n // closeSidebar();\n\n // hideLoader();\n // }\n // }\n\n checkPermission = (user) => {\n const route = window.location.pathname;\n\n if (user) {\n const isMember = user.allRoles.some(\n (item) => item.id === constants.MEMBER_CODE\n );\n\n if (!isMember) {\n const shouldNavigate = checkPermissionForNonMember(route);\n if (!shouldNavigate) window.location.replace(\"/\");\n }\n }\n };\n\n fetchAllRelationships = async () => {\n const { setRelationShips, setAlertMessage } = this.props;\n\n try {\n const response = await api.getRelationships();\n setRelationShips(response.data.result);\n } catch (e) {\n setAlertMessage({\n type: \"error\",\n message: e.message,\n onTryAgain: isNetworkRequestFailedError(e)\n ? this.fetchAllRelationships\n : null,\n });\n }\n };\n\n fetchAllBanks = async () => {\n const { setAllBanks, setAlertMessage } = this.props;\n\n try {\n const response = await api.getAllBanks();\n setAllBanks(response.data.result);\n } catch (e) {\n setAlertMessage({\n type: \"error\",\n message: e.message,\n onTryAgain: isNetworkRequestFailedError(e) ? this.fetchAllBanks : null,\n });\n }\n };\n\n getAllEmployers = async () => {\n const { setAllEmployers } = this.props;\n\n try {\n const response = await api.getAllEmployers();\n\n setAllEmployers(response.data.result);\n sessionStorage.setItem(\n \"allEmployers\",\n JSON.stringify(response.data.result)\n );\n } catch (e) {\n console.log(\"e =>\", e);\n }\n };\n\n componentWillReceiveProps(nextProps) {\n const { localHistory: prevHistory } = this.props;\n const { localHistory: nextHistory } = nextProps;\n\n if (JSON.stringify(prevHistory) !== JSON.stringify(nextHistory)) {\n this.checkLogin(nextProps);\n }\n }\n\n checkLogin = (props) => {\n const { localHistory, user } = props;\n const pathname = localHistory && localHistory.location.pathname;\n\n let isAuthScreen = true;\n\n const isAlwaysAllowed = constants.ALWAYS_ALLOWED_ROUTES.some(\n (item) => pathname === item\n );\n\n if (isAlwaysAllowed) {\n return;\n }\n\n constants.NON_PROTECTED_ROUTES.forEach((item) => {\n if (pathname === item) {\n isAuthScreen = false;\n }\n });\n\n if (localHistory) {\n if (user) {\n const isAccepted = sessionStorage.getItem(\"IsConsentAccepted\");\n\n if (\n isAuthScreen &&\n pathname !== \"/consentscreen\" &&\n isAccepted === \"false\"\n ) {\n localHistory.replace(\"/consentscreen\");\n }\n\n //eslint-disable-next-line\n if (!isAuthScreen && pathname != \"/consentscreen\")\n localHistory.replace(\"/\");\n // this.resetIdle();\n } else {\n if (pathname === \"/onboarding\") {\n localHistory.replace(\"/login?redirect=onboarding\");\n } else if (pathname === \"/rsapin\") {\n localHistory.replace(\"/login?redirect=rsapin\");\n } else if (isAuthScreen) {\n localHistory.replace(\"/login\");\n }\n }\n }\n };\n\n // resetIdle = () => {\n // this.idle.reset();\n // };\n\n determineIfAuthScreens = () => {\n const { localHistory } = this.props;\n\n const pathname = localHistory && localHistory.location.pathname;\n let isAuthScreen = true;\n\n constants.NON_PROTECTED_ROUTES.forEach((item) => {\n if (pathname === item) {\n isAuthScreen = false;\n }\n });\n\n return isAuthScreen;\n };\n\n shouldCoverFullScreen = () => {\n const { localHistory } = this.props;\n\n const pathname = localHistory && localHistory.location.pathname;\n let isFullScreen = false;\n\n constants.FULL_SCREEN_ROUTES.forEach((item) => {\n if (pathname === item) {\n isFullScreen = true;\n }\n });\n\n return isFullScreen;\n };\n\n handleCloseMenu = (e) => {\n const name = e.target.getAttribute(\"data-name\");\n\n if (name !== \"drop-down-menu-item\") {\n this.header.setMenu(false);\n }\n };\n\n onIdle = () => {\n if (this.props.user) {\n this.logoutUser();\n }\n };\n\n navigate = (route) => {\n const { localHistory, setHistory, openSidebar, closeSidebar } = this.props;\n\n localHistory.push(route);\n setHistory(localHistory);\n openSidebar();\n closeSidebar();\n };\n\n logoutUser = async () => {\n const { user, removeUser } = this.props;\n try {\n await api.logout(null, user.token);\n sessionStorage.removeItem(\"user\");\n Countly.q.push([\n \"logout\",\n {\n key: \"click\",\n count: 1,\n },\n ]);\n\n this.navigate(\"/login\");\n removeUser();\n const newURL = findBaseURL(window.location.href);\n window.location.replace(newURL);\n } catch (e) {\n sessionStorage.removeItem(\"user\");\n this.navigate(\"/login\");\n removeUser();\n }\n };\n\n render() {\n const { alertMessage, isLoading } = this.props;\n\n return (\n \n
\n \n
\n \n {props.banner.title || \"Message\"}\n
\n\n {typeof props.banner.message === \"string\" ? (\n
\n {props.banner.message}
\n ) : (\n props.banner.message.map((item, index) => {\n return (\n\n {item}\n
\n );\n })\n )}\n\n
\n \n {alertMessage && (\n \n \n {this.determineIfAuthScreens() && \n {this.determineIfAuthScreens() && (\n (this.header = el)} />\n )}\n
\n