\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import {\r\n IconButton,\r\n Toolbar,\r\n useMediaQuery,\r\n useTheme,\r\n} from \"@material-ui/core\";\r\nimport List from \"@material-ui/core/List\";\r\nimport ListItem from \"@material-ui/core/ListItem\";\r\nimport ListItemText from \"@material-ui/core/ListItemText\";\r\nimport ListSubheader from \"@material-ui/core/ListSubheader\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport MenuIcon from \"@material-ui/icons/Menu\";\r\nimport React from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport YoozSvgIcon from \"../components/yooz_svg_icon\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n // width: \"100%\",\r\n maxWidth: 400,\r\n width: 200,\r\n backgroundColor: theme.palette.background.paper,\r\n },\r\n\r\n selected: {\r\n color: theme.palette.secondary.main,\r\n fontWeight: 600,\r\n backgroundColor: `#C0E8F8 !important`,\r\n },\r\n\r\n listHeader: {\r\n backgroundColor: theme.palette.secondary.main,\r\n padding: 0,\r\n color: \"#FFF\",\r\n },\r\n\r\n yoozLogo: {\r\n height: \"100%\",\r\n },\r\n}));\r\n\r\nexport default function SelectableNavList(props) {\r\n const classes = useStyles();\r\n const { value, setValue, toggleDrawer, routes } = props;\r\n const theme = useTheme();\r\n const xs = useMediaQuery(theme.breakpoints.down(\"xs\"));\r\n const sm = useMediaQuery(theme.breakpoints.down(\"sm\"));\r\n\r\n const handleListItemClick = (event, index) => {\r\n setValue(index);\r\n window.scrollTo(0, 0);\r\n toggleDrawer();\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n handleListItemClick(null,0)}\r\n >\r\n \r\n \r\n }\r\n >\r\n {routes.map((route, index) =>\r\n route.show ? (\r\n handleListItemClick(event, index)}\r\n classes={{\r\n selected: classes.selected,\r\n }}\r\n component={Link}\r\n to={route.path}\r\n key={index}\r\n >\r\n handleListItemClick(event, index)}\r\n classes={{\r\n selected: classes.selected,\r\n }}\r\n component={Link}\r\n to={route.path}\r\n key={index}\r\n style={{ display: \"none\" }}\r\n >\r\n
\r\n );\r\n}\r\n","import SwipeableDrawer from \"@material-ui/core/SwipeableDrawer\";\r\nimport React from \"react\";\r\nimport SelectableNavList from \"./selectableNavList\";\r\n\r\nexport default function SwipeableNavDrawer(props) {\r\n const { open, toggleDrawer, value, setValue, routes } = props;\r\n\r\n return (\r\n - \r\n
- \r\n
\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n","export default __webpack_public_path__ + \"static/media/home_content_5.597a3dec.png\";","import { useMediaQuery } from \"@material-ui/core\";\r\nimport List from \"@material-ui/core/List\";\r\nimport ListItem from \"@material-ui/core/ListItem\";\r\nimport { makeStyles, useTheme } from \"@material-ui/core/styles\";\r\nimport React from \"react\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n width: \"100%\",\r\n backgroundColor: \"transparent\",\r\n },\r\n}));\r\n\r\nexport default function ItemtList(props) {\r\n const classes = useStyles();\r\n const { items } = props;\r\n const theme = useTheme();\r\n const md = useMediaQuery(theme.breakpoints.down(\"md\"));\r\n const sm = useMediaQuery(theme.breakpoints.down(\"sm\"));\r\n const xs = useMediaQuery(theme.breakpoints.down(\"xs\"));\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {items.map((item, index) => (\r\n {item} \r\n ))}\r\n \r\n
\r\n );\r\n}\r\n","import {\r\n Grid,\r\n makeStyles,\r\n Typography,\r\n useMediaQuery,\r\n useTheme,\r\n} from \"@material-ui/core\";\r\nimport React from \"react\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n overlineText: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n flexWrap: \"wrap\",\r\n textTransform: \"uppercase\",\r\n padding: 0,\r\n },\r\n}));\r\n\r\nexport default function IconHeader(props) {\r\n const {\r\n title,\r\n title2,\r\n titleColor,\r\n titleColor2,\r\n titleLg = \"h1\",\r\n titleSm = \"h2\",\r\n titleXs = \"h3\",\r\n } = props;\r\n const theme = useTheme();\r\n const xs = useMediaQuery(theme.breakpoints.down(\"xs\"));\r\n const sm = useMediaQuery(theme.breakpoints.down(\"sm\"));\r\n\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n Please enter your email and password\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport React from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport bg from \"../../../../assets/images/login_bg.jpg\";\r\nimport Loading from \"../../../shared/loader/loader\";\r\nimport ForgotPasswordDialog from \"../forgot_password\";\r\nimport SmsVerificationDialog from \"../sms_verification\";\r\nimport LoginForm from \"./login_form\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n background: `url(${bg})`,\r\n backgroundSize: \"cover\",\r\n [theme.breakpoints.up(\"xl\")]: {\r\n backgroundSize: \"cover\",\r\n height: \"100vh\",\r\n },\r\n backgroundRepeat: \"no-repeat\",\r\n },\r\n}));\r\n\r\nexport default function Login(props) {\r\n const classes = useStyles();\r\n const {\r\n onLogin,\r\n onChangeFormField,\r\n setForgotPwdisibility,\r\n changeUser,\r\n authReducer,\r\n loginError,\r\n setMobileOtp,\r\n isVisible,\r\n setVisibility,\r\n onOtpVarify,\r\n mobNum,\r\n otpError,\r\n resendOtp,\r\n tokens,\r\n isForgot,\r\n emailError,\r\n sendResetLink,\r\n } = props;\r\n\r\n const loading = useSelector((state) => state.uiGlobal.loading);\r\n\r\n function renderLoginPage() {\r\n return (\r\n \r\n {loading &&
\r\n );\r\n}\r\n","import { createSlice } from \"@reduxjs/toolkit\";\r\n\r\nconst cleanState = {\r\n snackbar: {\r\n open: false,\r\n msg: \"\",\r\n type: \"default\",\r\n autoHideDuration: null,\r\n action: null,\r\n },\r\n loading: false,\r\n};\r\n\r\nconst uiGlobalSlice = createSlice({\r\n name: \"uiGlobal\",\r\n initialState: cleanState,\r\n reducers: {\r\n showSnackBar(state, action) {\r\n state.snackbar = { open: true, ...action.payload };\r\n },\r\n\r\n closeSnackBar(state, action) {\r\n state.snackbar = { ...cleanState };\r\n },\r\n\r\n setLoading(state, action) {\r\n state.loading = action.payload;\r\n },\r\n },\r\n});\r\n\r\nexport const {\r\n showSnackBar,\r\n closeSnackBar,\r\n setLoading,\r\n} = uiGlobalSlice.actions;\r\n\r\nexport default uiGlobalSlice.reducer;\r\n","class Authentication {\r\n constructor() {\r\n this.isAuth = false;\r\n }\r\n\r\n giveAuthAccess = () => {\r\n this.isAuth = true;\r\n };\r\n\r\n checkAuthAccess = () => {\r\n return this.isAuth;\r\n };\r\n\r\n deleteAuthAccess = () => {\r\n this.isAuth = false;\r\n };\r\n}\r\n\r\nexport default new Authentication();\r\n","import React, { PureComponent } from \"react\";\r\nimport { connect, useDispatch, useSelector } from \"react-redux\";\r\nimport {\r\n getCountryList,\r\n getUserDetails,\r\n otpVarification,\r\n sendOtp,\r\n sendPwdResetLink,\r\n userLogin,\r\n} from \"../../actions/auth\";\r\nimport Login from \"../../components/public-dashboard/features/login\";\r\nimport { setLoading, showSnackBar } from \"../../reducers/uiGlobal\";\r\nimport {\r\n LOGIN_FAILURE,\r\n LOGIN_SUCCESS,\r\n OTP_VARIFY_FAILURE,\r\n OTP_VARIFY_SUCCESS,\r\n PWDLINK_SENT_SUCCESS,\r\n RESEND_OTP_FAILURE,\r\n RESEND_OTP_SUCCESS,\r\n} from \"../../constants/actionTypes\";\r\nimport history from \"../../history/history\";\r\nimport {\r\n removeUserAuth,\r\n removeUserDetail,\r\n setToken,\r\n} from \"../../middleware/storage\";\r\nimport auth from \"../../routing/checkAuth\";\r\n\r\nclass Auth extends PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n mobNum: \"\",\r\n firstName: \"\",\r\n lastName: \"\",\r\n email: \"\",\r\n password: \"\",\r\n confirmPwd: \"\",\r\n countryId: 0,\r\n isChecked: false,\r\n isVisible: false,\r\n otp: \"\",\r\n username: \"\",\r\n userPwd: \"\",\r\n emailForReset: \"\",\r\n isForgot: false,\r\n error: \"\",\r\n loginError: \"\",\r\n otpError: \"\",\r\n emailError: \"\",\r\n loading: false,\r\n };\r\n this.inputRefs = Array(6).fill(React.createRef());\r\n this.inputOtp = Array(6).fill(React.createRef());\r\n this.props.dispatch(getCountryList()).then((res) => {});\r\n }\r\n\r\n updateLoading = (loading) => {\r\n this.props.dispatch(setLoading(loading));\r\n };\r\n\r\n onChangeFormField = (field, value) => {\r\n this.setState({ ...this.state, [field]: value });\r\n };\r\n\r\n validateLoginForm = () => {\r\n const { userPwd, username } = this.state;\r\n if (!username.length) {\r\n this.setState({ loginError: \"*Username can not be empty.\" });\r\n return false;\r\n }\r\n if (!this.checkEmail(username)) {\r\n this.setState({ loginError: \"Invalid email.Please enter a valid email\" });\r\n return false;\r\n }\r\n if (!userPwd.length) {\r\n this.setState({ loginError: \"Password can not be empty.\" });\r\n return false;\r\n }\r\n return true;\r\n };\r\n\r\n validateResetEmail = () => {\r\n const { emailForReset } = this.state;\r\n if (!emailForReset.length) {\r\n this.setState({ emailError: \"Email can not be empty.\" });\r\n return false;\r\n }\r\n if (!this.checkEmail(emailForReset)) {\r\n this.setState({\r\n emailError: \"Invalid email. Please enter a valid email.\",\r\n });\r\n return false;\r\n }\r\n return true;\r\n };\r\n\r\n checkEmail = (email) => {\r\n let regx = /^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/;\r\n let result = regx.test(email) === true ? true : false;\r\n return result;\r\n };\r\n\r\n checkPhone = (email) => {\r\n let regx = /^[+]?\\d+$/;\r\n let result = regx.test(email) === true ? true : false;\r\n return result;\r\n };\r\n validateSignUpForm = () => {\r\n const {\r\n mobNum,\r\n firstName,\r\n lastName,\r\n email,\r\n password,\r\n confirmPwd,\r\n countryId,\r\n isChecked,\r\n } = this.state;\r\n if (mobNum.length > 13) {\r\n this.setState({ error: \"Mobile Number should be greater then 12 digit\" });\r\n return false;\r\n }\r\n if (!mobNum.length) {\r\n this.setState({ error: \"Mobile Number can not be empty\" });\r\n return false;\r\n }\r\n if (!firstName.length) {\r\n this.setState({ error: \"Firstname can not be empty\" });\r\n return false;\r\n }\r\n if (!lastName.length) {\r\n this.setState({ error: \"Lastname can not be empty\" });\r\n return false;\r\n }\r\n if (!email.length) {\r\n this.setState({ error: \"Email can not be empty\" });\r\n return false;\r\n }\r\n if (!this.checkEmail(email)) {\r\n this.setState({ error: \"Invalid email.Please enter a valid email\" });\r\n return false;\r\n }\r\n if (!password.length) {\r\n this.setState({ error: \"Password can not be empty\" });\r\n return false;\r\n } else if (password.length < 8 || password.length > 12) {\r\n this.setState({ error: \"Password length should be 8 to 12\" });\r\n return false;\r\n }\r\n\r\n if (!confirmPwd.length) {\r\n this.setState({ error: \"Please confirm the password\" });\r\n return false;\r\n }\r\n if (password !== confirmPwd) {\r\n this.setState({ error: \"Password is not matched.Please confirm again\" });\r\n return false;\r\n }\r\n if (!isChecked) {\r\n this.setState({ error: \"Please agree with terms and conditions\" });\r\n return false;\r\n }\r\n if (countryId <= 0) {\r\n this.setState({ error: \"Please select country\" });\r\n return false;\r\n }\r\n return true;\r\n };\r\n\r\n setMobileOtp = (digit) => {\r\n this.setState({ otp: digit });\r\n };\r\n\r\n onOtpVarify = () => {\r\n const { otp } = this.state;\r\n const { smsCred } = this.props;\r\n if (otp.length === 6) {\r\n const cred = {\r\n phone: smsCred.phone,\r\n tempVerificationCodeId: smsCred.tempVerificationCodeId,\r\n sMSCode: otp,\r\n };\r\n\r\n removeUserAuth();\r\n removeUserDetail();\r\n this.updateLoading(true);\r\n this.props.dispatch(otpVarification(cred)).then((res) => {\r\n if (res.type === OTP_VARIFY_SUCCESS) {\r\n this.setState({ otpError: \"\" });\r\n this.login();\r\n }\r\n\r\n if (res.type === OTP_VARIFY_FAILURE) {\r\n this.updateLoading(false);\r\n this.setState({ otpError: res.error });\r\n }\r\n });\r\n } else {\r\n this.updateLoading(false);\r\n this.setState({ otpError: \"Please complete the OTP\" });\r\n }\r\n };\r\n\r\n login = () => {\r\n const { tokens } = this.props;\r\n\r\n setToken(tokens.token);\r\n\r\n auth.giveAuthAccess();\r\n\r\n this.props.dispatch(getUserDetails(tokens.token)).then((res) => {\r\n this.updateLoading(false);\r\n history.push(\"/user\", { isAuth: true });\r\n });\r\n };\r\n\r\n onLogin = (e) => {\r\n this.setState({ otpError: \"\" });\r\n\r\n e.preventDefault();\r\n this.setState({ loginError: \"\" });\r\n if (this.validateLoginForm()) {\r\n removeUserAuth();\r\n removeUserDetail();\r\n const { username, userPwd } = this.state;\r\n const user = {\r\n username: username,\r\n password: userPwd,\r\n };\r\n this.updateLoading(true);\r\n this.props.dispatch(userLogin(user)).then((res) => {\r\n const { tokens } = this.props;\r\n if (res.type === LOGIN_SUCCESS && tokens) {\r\n this.setState({ loginError: \"\" });\r\n let cred = { phone: tokens.phoneNumber, isVerify: true };\r\n this.props.dispatch(sendOtp(cred)).then((res) => {\r\n if (res.type === RESEND_OTP_SUCCESS) {\r\n this.updateLoading(false);\r\n if (res.entities.user.smsCred.twoFactor) {\r\n this.setState({ mobNum: tokens.phoneNumber });\r\n this.setState({ isVerify: true });\r\n this.setPopupVisibility();\r\n } else {\r\n this.login();\r\n }\r\n }\r\n if (res.type === RESEND_OTP_FAILURE) {\r\n this.updateLoading(false);\r\n this.setState({ loginError: res.error });\r\n }\r\n });\r\n }\r\n\r\n if (res.type === LOGIN_FAILURE) {\r\n this.updateLoading(false);\r\n this.setState({ loginError: res.error });\r\n }\r\n });\r\n }\r\n };\r\n\r\n resendOtp = () => {\r\n this.setState({ otp: \"\" });\r\n this.setState({ otpError: \"\" });\r\n\r\n const { mobNum, email, isVerify } = this.state;\r\n let isVerifyed = false;\r\n if (isVerify) {\r\n if (isVerify === true) {\r\n isVerifyed = true;\r\n } else {\r\n isVerifyed = false;\r\n }\r\n }\r\n let cred = { phone: mobNum, email: email, isVerify: isVerifyed };\r\n this.updateLoading(true);\r\n this.props.dispatch(sendOtp(cred)).then((res) => {\r\n if (res.type === RESEND_OTP_SUCCESS) {\r\n this.updateLoading(false);\r\n this.props.dispatch(\r\n showSnackBar({\r\n msg: \"A SMS verification code has been sent to: \" + mobNum,\r\n type: \"info\",\r\n autoHideDuration: 10000,\r\n })\r\n );\r\n }\r\n if (res.type === RESEND_OTP_FAILURE) {\r\n this.updateLoading(false);\r\n this.setState({ otpError: res.error });\r\n }\r\n });\r\n };\r\n\r\n setPopupVisibility = () => {\r\n const { isVisible } = this.state;\r\n this.setState({ isVisible: !isVisible, otp: \"\", otpError: \"\" });\r\n };\r\n\r\n setForgotPwdisibility = () => {\r\n const { isForgot } = this.state;\r\n this.setState({ isForgot: !isForgot });\r\n };\r\n\r\n onChangeFormField = (field, value) => {\r\n this.setState({ ...this.state, [field]: value });\r\n };\r\n\r\n sendResetLink = () => {\r\n const { emailForReset } = this.state;\r\n if (this.validateResetEmail()) {\r\n this.props.dispatch(sendPwdResetLink(emailForReset)).then((res) => {\r\n if (res.type === PWDLINK_SENT_SUCCESS) {\r\n this.setState({ emailError: \"\" });\r\n this.setForgotPwdisibility();\r\n this.props.dispatch(\r\n showSnackBar({\r\n msg: \"Password reset link has been sent to: \" + emailForReset,\r\n type: \"info\",\r\n autoHideDuration: 30000,\r\n })\r\n );\r\n }\r\n });\r\n }\r\n };\r\n\r\n setLoginOtpVarify = () => {\r\n const { isLoginOtpVarifyVisible } = this.state;\r\n this.setState({\r\n isLoginOtpVarifyVisible: !isLoginOtpVarifyVisible,\r\n otp: \"\",\r\n });\r\n };\r\n\r\n onLoginOtpVarify = () => {\r\n const { otp } = this.state;\r\n const { tokens, smsCred } = this.props;\r\n if (otp.replace(/ /g, \"\").length === 6) {\r\n const cred = {\r\n phone: smsCred.phone,\r\n tempVerificationCodeId: smsCred.tempVerificationCodeId,\r\n sMSCode: otp,\r\n };\r\n\r\n this.props.dispatch(otpVarification(cred)).then((res) => {\r\n if (res.type === OTP_VARIFY_SUCCESS) {\r\n this.setState({ otpError: \"\" });\r\n\r\n setToken(tokens.token);\r\n\r\n auth.giveAuthAccess();\r\n this.props.dispatch(getUserDetails(tokens.token)).then((res) => {\r\n history.push(\"/user\", { isAuth: true });\r\n });\r\n }\r\n\r\n if (res.type === OTP_VARIFY_FAILURE) {\r\n this.setState({ otpError: res.error });\r\n }\r\n });\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n {props.children}
;\r\n}\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport React from \"react\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n width: \"100%\",\r\n },\r\n}));\r\n\r\nexport default function PageBanner(props) {\r\n const { img } = props;\r\n const classes = useStyles();\r\n return \r\n \r\n {items.map((item, index) => (\r\n \r\n \r\n {item}\r\n \r\n \r\n ))}\r\n \r\n
\r\n );\r\n}\r\n","import { Grid, Typography, useMediaQuery } from \"@material-ui/core\";\r\nimport { makeStyles, useTheme } from \"@material-ui/core/styles\";\r\nimport React from \"react\";\r\nimport TextList from \"./TextList\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n overlineText: {\r\n fontFamily: \"Akzidenz-Grotesk BQ, serif\",\r\n marginTop: 20,\r\n [theme.breakpoints.up(\"md\")]: {\r\n marginTop: 0,\r\n },\r\n textTransform: \"uppercase\",\r\n color: \"rgb(28, 197, 255)\",\r\n },\r\n}));\r\n\r\nexport default function ContentList(props) {\r\n const { title, items } = props;\r\n const classes = useStyles();\r\n const theme = useTheme();\r\n const md = useMediaQuery(theme.breakpoints.down(\"md\"));\r\n const sm = useMediaQuery(theme.breakpoints.down(\"sm\"));\r\n const xs = useMediaQuery(theme.breakpoints.down(\"xs\"));\r\n return (\r\n \r\n {loading &&
\r\n );\r\n}\r\n","import React, { PureComponent } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {\r\n getCountryList,\r\n getUserDetails,\r\n otpVarification,\r\n sendOtp,\r\n userLogin,\r\n userRegistration,\r\n} from \"../../actions/auth\";\r\nimport Signup from \"../../components/public-dashboard/features/signup\";\r\nimport {\r\n LOGIN_SUCCESS,\r\n OTP_VARIFY_FAILURE,\r\n OTP_VARIFY_SUCCESS,\r\n RESEND_OTP_FAILURE,\r\n RESEND_OTP_SUCCESS,\r\n SIGNUP_SUCCESS,\r\n} from \"../../constants/actionTypes\";\r\nimport history from \"../../history/history\";\r\nimport {\r\n removeUserAuth,\r\n removeUserDetail,\r\n setToken,\r\n} from \"../../middleware/storage\";\r\nimport { setLoading } from \"../../reducers/uiGlobal\";\r\nimport auth from \"../../routing/checkAuth\";\r\n\r\nclass Auth extends PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n mobNum: \"\",\r\n firstName: \"\",\r\n lastName: \"\",\r\n email: \"\",\r\n password: \"\",\r\n confirmPwd: \"\",\r\n countryId: 0,\r\n isChecked: false,\r\n isVisible: false,\r\n otp: \"\",\r\n username: \"\",\r\n error: \"\",\r\n otpError: \"\",\r\n referral: \"\",\r\n isRegDisable: true,\r\n };\r\n this.props.dispatch(getCountryList()).then((res) => {});\r\n }\r\n\r\n updateLoading = (loading) => {\r\n this.props.dispatch(setLoading(loading));\r\n };\r\n\r\n onChangeFormFieldPhone = (event) => {\r\n this.setState({ ...this.state, countryId: event.target.value });\r\n this.setState({\r\n mobNum: this.props.countries.find(\r\n (country) => (country.value = event.target.value)\r\n ).phoneCode,\r\n });\r\n this.setState({ isRegDisable: event.target.value > 0 ? false : true });\r\n };\r\n\r\n checkEmail = (email) => {\r\n let regx = /^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/;\r\n let result = regx.test(email) === true ? true : false;\r\n return result;\r\n };\r\n\r\n validateSignUpForm = () => {\r\n const { mobNum, firstName, lastName, password, confirmPwd, referral } =\r\n this.state;\r\n if (mobNum.length != 11) {\r\n this.setState({\r\n error:\r\n \"Your mobile number must be atleast 11 digits. E.g 1(868) 333-4444 \",\r\n });\r\n return false;\r\n }\r\n if (firstName === \"\") {\r\n this.setState({\r\n error: \"First Name cannot be empty\",\r\n });\r\n return false;\r\n } else if (/[^a-zA-Z-'\\s]/.test(firstName)) {\r\n this.setState({\r\n error: \"First Name is invalid\",\r\n });\r\n return false;\r\n }\r\n\r\n if (lastName === \"\") {\r\n this.setState({\r\n error: \"Last Name cannot be empty\",\r\n });\r\n return false;\r\n } else if (/[^a-zA-Z-'\\s]/.test(lastName)) {\r\n this.setState({\r\n error: \"Last Name is invalid\",\r\n });\r\n return false;\r\n }\r\n\r\n const validPassword = new RegExp(\r\n \"^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$\"\r\n );\r\n if (password.match(validPassword) == null) {\r\n this.setState({\r\n error:\r\n \"Password must contain minimum eight characters, at least one uppercase letter, one lowercase letter, one number and one special character\",\r\n });\r\n return false;\r\n }\r\n\r\n if (password !== confirmPwd) {\r\n this.setState({ error: \"Your passwords does not match.\" });\r\n return false;\r\n }\r\n\r\n const validReferralCode = new RegExp(\r\n \"^[A-Za-z0-9- ]+$\"\r\n );\r\n if (referral.length > 0) {\r\n if (referral.match(validReferralCode) == null) {\r\n this.setState({ error: \"Invalid Referral Code\" });\r\n return false;\r\n }\r\n }\r\n\r\n return true;\r\n };\r\n\r\n setMobileOtp = (digit) => {\r\n this.setState({ otp: digit });\r\n };\r\n\r\n onOtpVarify = () => {\r\n this.setState({ otp: \"\" });\r\n this.setState({ otpError: \"\" });\r\n const { otp } = this.state;\r\n const { smsCred } = this.props;\r\n if (otp.length === 6) {\r\n const cred = {\r\n phone: smsCred.phone,\r\n tempVerificationCodeId: smsCred.tempVerificationCodeId,\r\n sMSCode: otp,\r\n };\r\n\r\n removeUserAuth();\r\n removeUserDetail();\r\n this.updateLoading(true);\r\n\r\n this.props.dispatch(otpVarification(cred)).then((res) => {\r\n if (res.type === OTP_VARIFY_SUCCESS) {\r\n this.updateLoading(false);\r\n this.setState({ otpError: \"\" });\r\n this.register();\r\n }\r\n\r\n if (res.type === OTP_VARIFY_FAILURE) {\r\n this.updateLoading(false);\r\n this.setState({ otpError: res.error });\r\n }\r\n });\r\n } else {\r\n this.updateLoading(false);\r\n this.setState({ otpError: \"Please complete the OTP\" });\r\n }\r\n };\r\n\r\n resendOtp = () => {\r\n this.setState({ otp: \"\" });\r\n this.setState({ otpError: \"\" });\r\n const { mobNum, email } = this.state;\r\n let cred = { phone: mobNum, email: email };\r\n this.updateLoading(true);\r\n this.props.dispatch(sendOtp(cred)).then((res) => {\r\n if (res.type === RESEND_OTP_SUCCESS) {\r\n this.updateLoading(false);\r\n }\r\n if (res.type === RESEND_OTP_FAILURE) {\r\n this.updateLoading(false);\r\n this.setState({ error: res.error });\r\n }\r\n });\r\n };\r\n\r\n register = () => {\r\n const {\r\n mobNum,\r\n firstName,\r\n lastName,\r\n email,\r\n password,\r\n countryId,\r\n referral,\r\n } = this.state;\r\n const user = {\r\n firstName: firstName,\r\n lastName: lastName,\r\n email: email,\r\n phone: mobNum,\r\n countryId: countryId,\r\n password: password,\r\n referralCode: referral,\r\n };\r\n this.updateLoading(true);\r\n this.props.dispatch(userRegistration(user)).then((res) => {\r\n if (res.type === SIGNUP_SUCCESS) {\r\n const userLog = {\r\n username: email,\r\n password: password,\r\n };\r\n this.props.dispatch(userLogin(userLog)).then((res) => {\r\n const { tokens } = this.props;\r\n if (res.type === LOGIN_SUCCESS && tokens) {\r\n this.setState({ error: \"\" });\r\n setToken(tokens.token);\r\n auth.giveAuthAccess();\r\n this.props.dispatch(getUserDetails(tokens.token)).then((res) => {\r\n this.updateLoading(false);\r\n history.push(\"/user\", { isAuth: true });\r\n });\r\n } else {\r\n this.updateLoading(false);\r\n this.setState({ otpError: res.error });\r\n }\r\n });\r\n } else {\r\n this.updateLoading(false);\r\n this.setState({ otpError: res.error });\r\n }\r\n });\r\n };\r\n\r\n setPopupVisibility = () => {\r\n const { isVisible } = this.state;\r\n this.setState({ isVisible: !isVisible, otp: \"\" });\r\n };\r\n\r\n validateCheckBox = (e) => {\r\n const { isChecked } = this.state;\r\n this.setState({ isChecked: !isChecked });\r\n };\r\n\r\n onChangeFormField = (field, value) => {\r\n this.setState({ ...this.state, [field]: value });\r\n };\r\n\r\n renderTermsPolicy = () => {\r\n window.open(\"http://www.africau.edu/images/default/sample.pdf\");\r\n };\r\n\r\n onSubmit = (e) => {\r\n const {\r\n mobNum,\r\n firstName,\r\n lastName,\r\n email,\r\n password,\r\n countryId,\r\n referral,\r\n } = this.state;\r\n e.preventDefault();\r\n this.setState({ error: \"\" });\r\n this.setState({ otpError: \"\" });\r\n if (this.validateSignUpForm()) {\r\n const user = {\r\n firstName: firstName,\r\n lastName: lastName,\r\n email: email,\r\n phone: mobNum,\r\n countryId: countryId,\r\n password: password,\r\n referral: referral,\r\n };\r\n\r\n ////--------------------------\r\n let cred = { phone: user.phone, email: user.email };\r\n this.updateLoading(true);\r\n this.props.dispatch(sendOtp(cred)).then((res) => {\r\n if (res.type === RESEND_OTP_SUCCESS) {\r\n this.updateLoading(false);\r\n if (res.entities.user.smsCred.twoFactor) {\r\n this.setPopupVisibility();\r\n } else {\r\n this.register();\r\n }\r\n }\r\n if (res.type === RESEND_OTP_FAILURE) {\r\n this.updateLoading(false);\r\n this.setState({ error: res.error });\r\n }\r\n });\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n 0}\r\n helperText={error.length > 0 ? error : \"\"}\r\n InputProps={{\r\n inputComponent: NumberFormatCustom,\r\n }}\r\n className={classes.formControl}\r\n color=\"secondary\"\r\n disabled={disabled}\r\n />\r\n
\r\n );\r\n}\r\n","import MenuItem from \"@material-ui/core/MenuItem\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport React from \"react\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n \"& .MuiTextField-root\": {\r\n marginBottom: theme.spacing(1),\r\n },\r\n },\r\n}));\r\n\r\nexport default function SelectCountry(props) {\r\n const classes = useStyles();\r\n const { value, countries, handleChange, label, error } = props;\r\n return (\r\n \r\n 0}\r\n helperText={error?.length > 0 ? error : \"\"}\r\n select\r\n label={label}\r\n value={value}\r\n onChange={handleChange(\"countryCode\")}\r\n variant=\"outlined\"\r\n fullWidth\r\n color=\"secondary\"\r\n >\r\n {countries.map((option) => (\r\n\r\n \r\n ))}\r\n \r\n
\r\n );\r\n}","import MenuItem from \"@material-ui/core/MenuItem\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport { fetchStates } from \"../bpSlice\";\r\nimport { countryIsoCode } from \"../../../../../constants/actionTypes\";\r\n\r\nimport { useDispatch } from \"react-redux\";\r\nimport React from \"react\";\r\nimport { useState } from \"react\";\r\nimport { useEffect } from \"react\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n \"& .MuiTextField-root\": {\r\n marginBottom: theme.spacing(1),\r\n },\r\n },\r\n}));\r\n\r\nexport default function SelectCountry(props) {\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n const { value, countryCode, handleChange , error } = props;\r\n const [countryStates, setStates] = useState([])\r\n\r\n useEffect(() => {\r\n fetchStatesByCountryCode(countryCode);\r\n }, [countryCode])\r\n\r\n async function fetchStatesByCountryCode(countryCode) {\r\n if (countryCode > 0) {\r\n const result = await dispatch(fetchStates(countryCode));\r\n setStates(result.payload);\r\n }\r\n }\r\n return (\r\n \r\n 0}\r\n helperText={error?.length ? error : \"\"}\r\n select\r\n label=\"State *\"\r\n value={value}\r\n onChange={handleChange(\"state\")}\r\n variant=\"outlined\"\r\n fullWidth\r\n color=\"secondary\"\r\n >\r\n {countryStates.map((option) => ( \r\n \r\n ))}\r\n \r\n
\r\n );\r\n\r\n // used for when we allowing states in the future for other countries beside US\r\n // if (countryCode == '840'){\r\n // return (\r\n // \r\n // 0}\r\n // select\r\n // label=\"State\"\r\n // value={value}\r\n // onChange={handleChange(\"state\")}\r\n // variant=\"outlined\"\r\n // fullWidth\r\n // color=\"secondary\"\r\n // >\r\n // {countryStates.map((option) => ( \r\n // \r\n // ))}\r\n // \r\n //
\r\n // );\r\n // }else {\r\n // return (\r\n // \r\n // 0}\r\n // label=\"State\"\r\n // value={value}\r\n // onChange={handleChange(\"state\")}\r\n // variant=\"outlined\"\r\n // fullWidth\r\n // color=\"secondary\"\r\n // >\r\n // \r\n //
\r\n // );\r\n // }\r\n \r\n\r\n\r\n}\r\n","import { Grid } from \"@material-ui/core\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport React, { Fragment, useRef, useState, useEffect } from \"react\";\r\nimport { getToken, getUserDetail } from \"../../../../../middleware/storage\";\r\nimport { connect, useSelector } from \"react-redux\";\r\nimport { setAddressDetails, resetBilling } from \"../bpSlice\";\r\nimport PhoneNumber from \"./masked_phone_number\";\r\nimport SelectCountry from \"./select_country\";\r\nimport SelectState from \"./select_state\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: { marginBottom: theme.spacing(2) },\r\n formControl: {\r\n marginBottom: theme.spacing(2),\r\n },\r\n}));\r\n\r\nconst blankAddressDetails = {\r\n line1: \"\",\r\n line2: \"\",\r\n postalCode: \"\",\r\n state: \"\",\r\n city: \"\"\r\n}\r\n\r\nconst cleanAddress = {\r\n firstName: \"\",\r\n lastName: \"\",\r\n line1: \"\",\r\n line2: \"\",\r\n city: \"\",\r\n state: \"\",\r\n postalCode: \"\",\r\n countryCode: \"\",\r\n emailAddress: \"\",\r\n phoneNumber: \"1868\"\r\n}\r\n\r\nfunction hasKey(obj, key) {\r\n return key in obj;\r\n}\r\nfunction AddressForm(props) {\r\n const classes = useStyles();\r\n const ref = useRef(null);\r\n let states = [];\r\n\r\n const { setAddressDetails, addressDetailsState, errors, resetBilling } = props;\r\n const { countries, cCards } = useSelector((state) => state.billpay);\r\n const { customerCardId } = useSelector((state) => state.billpay.paymentDetails);\r\n const [addressDetails, updateAddressDetails] = useState(addressDetailsState);\r\n const token = getToken();\r\n \r\n useEffect(() => {\r\n\t if (token && addressDetailsState.emailAddress == \"\") \r\n {\r\n if(customerCardId != 0)\r\n {\r\n if (hasKey(cCards[0], \"customerCardId\")) {\r\n for (var i = 0; i < cCards.length; i++) {\r\n if (cCards[i].customerCardId === customerCardId)\r\n {\r\n if(cCards[i].billingAddress.id != 0)\r\n {\r\n const updatedAddressDetails = {\r\n ...addressDetails,\r\n ...cCards[i].billingAddress,\r\n };\r\n \r\n setAddressDetails(updatedAddressDetails);\r\n updateAddressDetails(updatedAddressDetails);\r\n break;\r\n }\r\n else\r\n {\r\n setAddressDetails(cleanAddress);\r\n updateAddressDetails(cleanAddress);\r\n break; \r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n else if (token) \r\n {\r\n if(customerCardId != 0)\r\n {\r\n if (hasKey(cCards[0], \"customerCardId\")) {\r\n for (var i = 0; i < cCards.length; i++) {\r\n if (cCards[i].customerCardId === customerCardId)\r\n {\r\n if(cCards[i].billingAddress.id != 0)\r\n {\r\n const updatedAddressDetails = {\r\n ...addressDetails,\r\n ...cCards[i].billingAddress,\r\n };\r\n \r\n setAddressDetails(updatedAddressDetails);\r\n updateAddressDetails(updatedAddressDetails);\r\n break;\r\n }\r\n else\r\n {\r\n setAddressDetails(cleanAddress);\r\n updateAddressDetails(cleanAddress);\r\n break; \r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n \r\n }, []);\r\n\r\n const handleChange = (prop) => (event) => {\r\n let value = event.target.value\r\n let updatedDetails = { ...addressDetails, [prop]: value }\r\n if (prop === \"countryCode\" && event.target.value !== \"\") {\r\n updatedDetails = { ...updatedDetails, ...blankAddressDetails }\r\n } \r\n\r\n setAddressDetails({ ...addressDetails, ...updatedDetails });\r\n updateAddressDetails({ ...addressDetails, ...updatedDetails });\r\n }\r\n\r\n return (\r\n \r\n 0}\r\n select\r\n label=\"Saved Cards\"\r\n value={value}\r\n onChange={handleChange(\"customerCardId\")}\r\n helperText={error.length > 0 ? error : \"Click to select a saved card\"}\r\n variant=\"outlined\"\r\n fullWidth\r\n color=\"secondary\"\r\n >\r\n {cards.map((option) => (\r\n \r\n ))}\r\n \r\n
\r\n );\r\n}\r\n","import { Fade, IconButton, Popper } from \"@material-ui/core\";\r\nimport { amber } from \"@material-ui/core/colors\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport InfoIcon from \"@material-ui/icons/InfoOutlined\";\r\nimport { Alert, AlertTitle } from \"@material-ui/lab\";\r\nimport React from \"react\";\r\nimport ReactHtmlParser from \"react-html-parser\";\r\nimport NumberFormat from \"react-number-format\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n },\r\n formControl: {\r\n marginBottom: theme.spacing(2),\r\n },\r\n alert: {\r\n [theme.breakpoints.up(\"sm\")]: {\r\n width: 500,\r\n },\r\n maxWidth: \"97%\",\r\n wordBreak: \"break-word\",\r\n zIndex: 100,\r\n },\r\n}));\r\n\r\nfunction NumberFormatCustom(props) {\r\n const { inputRef, onChange, ...other } = props;\r\n return (\r\n \r\n setOpen(false)}\r\n variant=\"outlined\"\r\n error={error?.length > 0}\r\n helperText={error.length > 0 ? error : \"\"}\r\n InputProps={{\r\n inputComponent: NumberFormatCustom,\r\n endAdornment:\r\n \r\n \r\n\r\n }}\r\n className={classes.formControl}\r\n color=\"secondary\"\r\n />\r\n \r\n {({ TransitionProps }) => (\r\n \r\n \r\n Note \r\n {ReactHtmlParser(cvvHelper)}\r\n \r\n \r\n )}\r\n \r\n
\r\n );\r\n}","import { Button, Grid } from \"@material-ui/core\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport React, { Fragment, useEffect, useState } from \"react\";\r\nimport { connect, useDispatch } from \"react-redux\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { fetchCC, setLoading, setPaymentDetails } from \"../bpSlice\";\r\nimport SelectCC from \"./select_card\";\r\nimport { setNavIndex } from \"../../../../secured-app/uiSlice\";\r\nimport MaskedCvv from \"./masked_cvv_input\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: { marginBottom: theme.spacing(2) },\r\n formControl: {\r\n marginBottom: theme.spacing(2),\r\n },\r\n addBtn: {\r\n borderRadius: 20,\r\n },\r\n}));\r\n\r\nfunction PaymentDetailsRegistered(props) {\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n const {\r\n setPaymentDetails,\r\n paymentDetailsState,\r\n errors,\r\n cCards,\r\n } = props;\r\n const [paymentDetails, updatePaymentDetails] = useState(paymentDetailsState);\r\n\r\n const handleChange = (prop) => (event) => {\r\n setPaymentDetails({ ...paymentDetails, [prop]: event.target.value });\r\n updatePaymentDetails({ ...paymentDetails, [prop]: event.target.value });\r\n };\r\n\r\n useEffect(() => {\r\n async function fetchCards() {\r\n await dispatch(fetchCC());\r\n }\r\n\r\n fetchCards();\r\n }, [dispatch]);\r\n\r\n const handleClick = () => {\r\n dispatch(setNavIndex(4));\r\n };\r\n\r\n return (\r\n \r\n 0}\r\n helperText={error?.length > 0 ? error : \"\"}\r\n InputProps={{\r\n inputComponent: NumberFormatCustom,\r\n endAdornment: (\r\n \r\n {getCardTypeImage(value)}\r\n \r\n ),\r\n }}\r\n className={classes.formControl}\r\n color=\"secondary\"\r\n // required\r\n />\r\n
\r\n );\r\n}\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport React from \"react\";\r\nimport NumberFormat from \"react-number-format\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n },\r\n formControl: {\r\n marginBottom: theme.spacing(2),\r\n },\r\n}));\r\n\r\nfunction NumberFormatCustom(props) {\r\n const { inputRef, onChange, ...other } = props;\r\n return (\r\n \r\n 0}\r\n helperText={error?.length > 0 ? error : \"\"}\r\n InputProps={{\r\n inputComponent: NumberFormatCustom,\r\n }}\r\n className={classes.formControl}\r\n color=\"secondary\"\r\n // required\r\n />\r\n
\r\n );\r\n}\r\n","import { FormLabel, Grid } from \"@material-ui/core\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport React, { Fragment, useState, useEffect } from \"react\";\r\nimport { connect, useSelector } from \"react-redux\";\r\nimport { setPaymentDetails } from \"../bpSlice\";\r\nimport MaskedCCInput from \"./masked_cc_input\";\r\nimport MaskedCvv from \"./masked_cvv_input\";\r\nimport MaskedExpiryDate from \"./masked_expiry_date\";\r\nimport Checkbox from \"@material-ui/core/Checkbox\";\r\nimport { getToken } from \"../../../../../middleware/storage\";\r\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\r\nimport { isCardDuplicate } from \"../../../../../../src/components/utils\"\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: { marginBottom: theme.spacing(2) },\r\n formControl: {\r\n marginBottom: theme.spacing(2),\r\n },\r\n}));\r\n\r\nfunction PaymentDetailsUnregistered(props) {\r\n const classes = useStyles();\r\n const { setPaymentDetails, paymentDetailsState, errors } = props;\r\n const { cCards } = useSelector((state) => state.billpay);\r\n const [loggedIn, SetLogin] = useState(false);\r\n const [paymentDetails, updatePaymentDetails] = useState(paymentDetailsState);\r\n const [duplicateCardText, setDuplicateCardText] = useState(\"\");\r\n const [disableSaveCard, setDisableSaveCard] = useState(true);\r\n\r\n const handleChange = (prop) => (event) => {\r\n let value = event.target.value;\r\n\r\n if (prop === \"shouldSaveCard\") {\r\n value = event.target.checked;\r\n }\r\n\r\n if (prop === \"cardNumber\") {\r\n if (value.length < 16) {\r\n setDuplicateCardText(\"\");\r\n setDisableSaveCard(true);\r\n } else {\r\n if (cCards.length > 0) {\r\n const isCcardDuplicate = isCardDuplicate(cCards, value);\r\n if (isCcardDuplicate) {\r\n setDuplicateCardText(\"This card is already saved for this account.\");\r\n setDisableSaveCard(true);\r\n } else {\r\n setDuplicateCardText(\"\");\r\n setDisableSaveCard(false);\r\n }\r\n } else {\r\n setDuplicateCardText(\"\");\r\n setDisableSaveCard(false);\r\n }\r\n }\r\n }\r\n\r\n setPaymentDetails({ ...paymentDetails, [prop]: value });\r\n updatePaymentDetails({ ...paymentDetails, [prop]: value });\r\n };\r\n\r\n useEffect(() => {\r\n async function validateLogin() {\r\n const token = getToken();\r\n if (!token) {\r\n SetLogin(false);\r\n } else {\r\n SetLogin(true);\r\n }\r\n }\r\n \r\n validateLogin();\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n {title}\r\n \r\n {loading && (\r\n
\r\n );\r\n}\r\n","export default __webpack_public_path__ + \"static/media/robot-error.2cc1c837.png\";","import React from \"react\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport { Box, Button, Container, Typography } from \"@material-ui/core\";\r\nimport robotErrorImg from \"../../../assets/images/robot-error.png\";\r\nimport { Link } from \"react-router-dom\";\r\nimport withWidth from \"@material-ui/core/withWidth\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n flexGrow: 1,\r\n marginBottom:theme.spacing(3)\r\n },\r\n paper: {\r\n padding: theme.spacing(2),\r\n textAlign: \"center\",\r\n color: theme.palette.text.secondary,\r\n },\r\n img: {\r\n width: \"50%\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n width: \"100%\",\r\n padding: theme.spacing(3),\r\n },\r\n },\r\n button: {\r\n borderRadius: 50,\r\n [theme.breakpoints.up(\"sm\")]: {\r\n marginRight: theme.spacing(3),\r\n },\r\n marginRight: theme.spacing(1),\r\n },\r\n}));\r\n\r\nfunction SomethingWentWrong(props) {\r\n const classes = useStyles();\r\n const {\r\n redirect = \"/\",\r\n redirect2 = \"/\",\r\n redirectText = \"Try Again\",\r\n redirectText2 = \"Contact Us\",\r\n width,\r\n onClick1,\r\n onClick2\r\n } = props;\r\n return (\r\n {getStepContent(index)}
\r\n {facResponse.state === \"failed\" && index == steps.length -1 && renderFacError()}
\r\n \r\n \r\n Back\r\n \r\n {activeStep === steps.length - 1 ? (\r\n
\r\n \r\n 0}\r\n component=\"fieldset\"\r\n className={classes.formControl}\r\n >\r\n I've read and agree with \r\n {showCCForm ? (\r\n \r\n ) : (\r\n \r\n \r\n )}\r\n {error.length > 0 && error} \r\n \r\n
\r\n );\r\n}","import { Grid, ListItemAvatar, Typography } from \"@material-ui/core\";\r\nimport Divider from \"@material-ui/core/Divider\";\r\nimport List from \"@material-ui/core/List\";\r\nimport ListItem from \"@material-ui/core/ListItem\";\r\nimport ListItemText from \"@material-ui/core/ListItemText\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport React, { Fragment } from \"react\";\r\nimport { getCardImageByType } from \"../../../../utils\";\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n width: \"100%\",\r\n },\r\n cardLogo: {\r\n height: \"100%\",\r\n // marginRight: theme.spacing(3),\r\n },\r\n}));\r\n\r\nexport default function PaymentDetailListingRegistered(props) {\r\n const classes = useStyles();\r\n const { name = \"\", nickName = \"\", cardType = \"\" } = props.values;\r\n return (\r\n \r\n \r\n Terms & Conditions\r\n \r\n
\r\n }\r\n />\r\n \r\n \r\n Privacy Policy\r\n \r\n
\r\n }\r\n />\r\n \r\n \r\n Terms & Conditions\r\n \r\n
\r\n }\r\n />\r\n \r\n \r\n Privacy Policy\r\n \r\n
\r\n }\r\n />\r\n - \r\n
- \r\n
- \r\n
- \r\n
\r\n 0}\r\n helperText={error.length > 0 ? error : helperText}\r\n InputProps={{\r\n inputComponent: NumberFormatCustom,\r\n }}\r\n color=\"secondary\"\r\n disabled={disabled}\r\n />\r\n
\r\n );\r\n}\r\n","import MenuItem from \"@material-ui/core/MenuItem\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport { OpacityRounded } from \"@material-ui/icons\";\r\nimport React from \"react\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n \"& .MuiTextField-root\": {\r\n marginBottom: theme.spacing(1),\r\n },\r\n },\r\n}));\r\n\r\nexport default function SelectCharity(props) {\r\n const classes = useStyles();\r\n const { value, charities, handleChange, disabled,error } = props;\r\n return (\r\n \r\n 0}\r\n select\r\n label=\"Charity\"\r\n disabled={disabled}\r\n value={value}\r\n onChange={handleChange(\"charityId\")}\r\n helperText={\r\n error.length > 0 ? error : \"This is optional. Please leave empty if you do not wish to donate\"\r\n }\r\n variant=\"outlined\"\r\n fullWidth\r\n color=\"secondary\"\r\n >\r\n {\r\n }\r\n \r\n {charities.map((option) => ( \r\n \r\n ))}\r\n \r\n
\r\n );\r\n}\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { useEffect } from \"react\";\r\nimport { useState } from \"react\";\r\nimport { React } from \"react\";\r\nimport Select from \"react-select\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n \"& .MuiTextField-root\": {\r\n marginBottom: theme.spacing(1),\r\n },\r\n },\r\n}));\r\n\r\nexport default function SelectProvider(props) {\r\n const classes = useStyles();\r\n const { value = null, providers, handleChange, error } = props;\r\n \r\n const providerOptions = providers.map((option) => (\r\n {\r\n value: option.providerId,\r\n label: option.name,\r\n }\r\n ))\r\n\r\n const [provider, setProvider] = useState(null)\r\n\r\n useEffect(() => {\r\n setProvider(providerOptions.find(x => x.value === value))\r\n }, [value, providers])\r\n\r\n const selectStyles = {\r\n menu: base => ({\r\n ...base,\r\n zIndex: 100\r\n }),\r\n control: base => ({\r\n ...base,\r\n height: 55,\r\n borderColor: error?.length > 0 ? 'red' : 'grey',\r\n\r\n }),\r\n };\r\n\r\n const onHandleChange = (event) => {\r\n handleChange({ target: { value: event.value, name: 'providerId', id: 'providerId' } })\r\n }\r\n\r\n return (\r\n \r\n 0}\r\n required\r\n placeholder='Payee'\r\n onChange={(event) => onHandleChange(event)}\r\n\r\n variant=\"outlined\"\r\n fullWidth\r\n color=\"secondary\"\r\n />\r\n {error?.length > 0 &&
\r\n );\r\n}\r\n","import { Fade, Grid, IconButton, Divider, Typography } from \"@material-ui/core\";\r\nimport { amber } from \"@material-ui/core/colors\";\r\nimport Popper from \"@material-ui/core/Popper\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport WarningIcon from \"@material-ui/icons/ReportProblemOutlined\";\r\nimport { Alert, AlertTitle } from \"@material-ui/lab\";\r\nimport React, { Fragment, useEffect, useLayoutEffect, useState } from \"react\";\r\nimport ReactHtmlParser from \"react-html-parser\";\r\nimport { connect, Provider, useDispatch, useSelector } from \"react-redux\";\r\nimport { useHistory, useParams } from \"react-router\";\r\nimport { getToken, getUserDetail } from \"../../../../../middleware/storage\";\r\nimport { setNavIndex } from \"../../../../secured-app/uiSlice\";\r\nimport SomethingWentWrong from \"../../../components/somethingWentWrong\";\r\nimport { setTabPosition } from \"../../../uiSlice\";\r\nimport PhoneNumber from \"../address_details/masked_phone_number\";\r\nimport { setTxnDetails, setAddressDetails, resetTxn } from \"../bpSlice\";\r\nimport EnterAmount from \"./enter_amount\";\r\nimport SelectCharity from \"./select_charity\";\r\nimport SelectProvider from \"./select_provider\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: { marginBottom: theme.spacing(2) },\r\n formControl: {\r\n marginBottom: theme.spacing(2),\r\n },\r\n alert: {\r\n [theme.breakpoints.up(\"sm\")]: {\r\n width: 500,\r\n },\r\n maxWidth: \"97%\",\r\n wordBreak: \"break-word\",\r\n zIndex: 100,\r\n },\r\n commentField: {\r\n height: 200,\r\n }\r\n}));\r\n\r\nfunction TxnDetails(props) {\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n const { providers, charities, loading } = useSelector((state) => state.billpay);\r\n const token = getToken();\r\n let { providerId = \"\", accountNumber = \"\", amount = \"\", email = \"\", charityId = \"\", donationAmount = \"\" } = useParams();\r\n\r\n if (providerId != \"\") {\r\n providerId = parseInt(providerId);\r\n }\r\n if (charityId != \"\") {\r\n charityId = parseInt(charityId);\r\n }\r\n const { setTxnDetails, txnDetailsState, errors, addressDetails, setAddressDetails } = props;\r\n const [helperText, setHelperText] = useState(\"\");\r\n const [helperDisclaimerText, setHelperDisclaimerText] = useState(\"\");\r\n\r\n const [txnDetails, updateTxnDetails] = useState(txnDetailsState);\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n const [open, setOpen] = React.useState(false);\r\n const [placement, setPlacement] = React.useState();\r\n\r\n const handleClick = (newPlacement) => (event) => {\r\n if (helperDisclaimerText) {\r\n setAnchorEl(event.currentTarget);\r\n setOpen((prev) => placement !== newPlacement || !prev);\r\n setPlacement(newPlacement);\r\n }\r\n };\r\n\r\n const handleClose = () => {\r\n setOpen(false);\r\n };\r\n\r\n const handleChange = (prop) => (event) => {\r\n setTxnDetails({ ...txnDetails, [prop]: event.target.value });\r\n\r\n //prefill billing address section of email and phone number\r\n if (prop === \"email\") {\r\n setAddressDetails({ ...addressDetails, emailAddress: event.target.value })\r\n } else if (prop === \"phoneNumber\") {\r\n setAddressDetails({ ...addressDetails, phoneNumber: event.target.value })\r\n }\r\n updateTxnDetails({ ...txnDetails, [prop]: event.target.value });\r\n if (prop === \"providerId\") {\r\n const provider = providers.find(\r\n (p) => p.providerId === event.target.value\r\n );\r\n\r\n if (provider) {\r\n setHelperText(provider.accountHelperMessage);\r\n setHelperDisclaimerText(provider.accountDisclaimerMessage);\r\n }\r\n if (provider.type === 'Charity') {\r\n setTxnDetails({ ...txnDetails, charityId: \"\", donationAmount: 0, [prop]: event.target.value });\r\n updateTxnDetails({ ...txnDetails, charityId: \"\", donationAmount: 0, [prop]: event.target.value });\r\n }\r\n }\r\n if (prop === \"charityId\") {\r\n if (event.target.value === \"\") {\r\n setTxnDetails({ ...txnDetails, charityId: event.target.value, donationAmount: 0 });\r\n updateTxnDetails({ ...txnDetails, charityId: event.target.value, donationAmount: 0 });\r\n }\r\n\r\n }\r\n\r\n\r\n };\r\n\r\n const checkIfProviderIsCharity = (providerId, providers) => {\r\n if (providerId === \"\" || providers.length === 0) {\r\n return true;\r\n }\r\n else {\r\n let provider = providers.find(\r\n (p) => p.providerId === txnDetails.providerId\r\n );\r\n if (typeof provider === 'undefined') {\r\n return true;\r\n }\r\n if (provider.type != \"Charity\") {\r\n return true;\r\n }\r\n else return false;\r\n }\r\n }\r\n\r\n const checkIfCommentFieldAllowed = (providerId, providers) => {\r\n if (providerId === \"\" || providers.length === 0) {\r\n return false;\r\n }\r\n else {\r\n let provider = providers.find(\r\n (p) => p.providerId === txnDetails.providerId\r\n );\r\n if (typeof provider === 'undefined') {\r\n return false;\r\n }\r\n return provider.commentsField;\r\n }\r\n }\r\n\r\n const history = useHistory();\r\n\r\n const unlisten = history.listen((location) => {\r\n // Call your function here or perform any other logic\r\n console.log('Router changed:', location.pathname);\r\n if (![\"/quickpay\", \"/user/billpay\"].includes(location.pathname)) {\r\n dispatch(resetTxn()); // Call the resetTxn function when navigating away from the current route\r\n }\r\n\r\n });\r\n\r\n\r\n useLayoutEffect(() => {\r\n const prefillLoggedInDetails = () => {\r\n if (token) {\r\n const user = getUserDetail();\r\n updateTxnDetails({\r\n ...txnDetails,\r\n email: user.email,\r\n phoneNumber: user.phoneNumber,\r\n });\r\n setTxnDetails({\r\n ...txnDetailsState,\r\n email: user.email,\r\n phoneNumber: user.phoneNumber\r\n });\r\n if (addressDetails.emailAddress == \"\") {\r\n setAddressDetails({\r\n ...addressDetails,\r\n emailAddress: user.email,\r\n phoneNumber: user.phoneNumber\r\n })\r\n }\r\n }\r\n };\r\n prefillLoggedInDetails();\r\n\r\n // Clean up the listener when the component unmounts\r\n return () => {\r\n //listen for router change\r\n unlisten()\r\n };\r\n\r\n }, [history])\r\n\r\n useEffect(() => {\r\n const prefillTxnDetails = () => {\r\n if (providerId !== \"\") {\r\n const updatedTxnDetails = {\r\n providerId: providerId,\r\n charityId: charityId !== \"\" ? charityId : txnDetails.charityId,\r\n accountNumber: accountNumber !== \"\" ? accountNumber : txnDetails.accountNumber,\r\n amount: amount !== \"\" ? amount : txnDetails.amount,\r\n email: email !== \"\" ? email : txnDetails.email,\r\n donationAmount: donationAmount !== \"\" ? donationAmount : txnDetails.donationAmount\r\n };\r\n\r\n setTxnDetails({ ...txnDetailsState, ...updatedTxnDetails });\r\n updateTxnDetails({ ...txnDetailsState, ...updatedTxnDetails });\r\n }\r\n }\r\n\r\n console.log(\"Were prefilling\");\r\n prefillTxnDetails();\r\n\r\n }, []);\r\n\r\n if (!loading && providers.length === 0) {\r\n return (\r\n {error}
}\r\n\r\n
\r\n )}\r\n \r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n txnDetails: state.billpay.txnDetails,\r\n paymentDetails: state.billpay.paymentDetails,\r\n addressDetails: state.billpay.addressDetails,\r\n submissionDetails: state.billpay.submissionDetails,\r\n loading: state.billpay.loading,\r\n showCCForm: state.billpay.showCCForm,\r\n providers: state.billpay.providers,\r\n charities: state.billpay.charities,\r\n addressDetails: state.billpay.addressDetails\r\n});\r\n\r\nconst mapDispatch = { setErrors, fetchProviders, setLoading, resetTxn };\r\n\r\nexport default connect(mapStateToProps, mapDispatch)(BillPayStepper);\r\n","export default __webpack_public_path__ + \"static/media/systemAlert.483bb698.png\";","import React from \"react\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport { Box, Button, Container, Typography } from \"@material-ui/core\";\r\nimport systemAlertImg from \"../../../assets/images/systemAlert.png\";\r\nimport { Link } from \"react-router-dom\";\r\nimport withWidth from \"@material-ui/core/withWidth\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n flexGrow: 1,\r\n marginBottom: theme.spacing(3)\r\n },\r\n paper: {\r\n padding: theme.spacing(2),\r\n textAlign: \"center\",\r\n color: theme.palette.text.secondary,\r\n },\r\n img: {\r\n width: \"50%\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n width: \"100%\",\r\n padding: theme.spacing(3),\r\n },\r\n },\r\n button: {\r\n borderRadius: 50,\r\n [theme.breakpoints.up(\"sm\")]: {\r\n marginRight: theme.spacing(3),\r\n },\r\n marginRight: theme.spacing(1),\r\n },\r\n}));\r\n\r\nfunction SystemMessage(props) {\r\n const classes = useStyles();\r\n const {\r\n width,\r\n title = \"\",\r\n message = \"\"\r\n } = props;\r\n return (\r\n \r\n {facResponse.state === \"success\" && \r\n \r\n New Transaction\r\n \r\n
\r\n )}\r\n \r\n
\r\n );\r\n}\r\n","export default __webpack_public_path__ + \"static/media/contact_banner.5c95a73d.jpg\";","import {\r\n Button,\r\n FormGroup,\r\n TextField,\r\n useMediaQuery,\r\n Grid,\r\n} from \"@material-ui/core\";\r\nimport { makeStyles, useTheme } from \"@material-ui/core/styles\";\r\nimport MuiAlert from \"@material-ui/lab/Alert\";\r\nimport React, { Fragment, useState } from \"react\";\r\nimport { useDispatch } from \"react-redux\";\r\nimport { API_ROOT } from \"../../../../constants/actionTypes\";\r\nimport { postAsync } from \"../../services/api_util\";\r\nimport { setAnonTokenApi } from \"../../services/utility\";\r\nimport { showSnackBar } from \"../../../../reducers/uiGlobal\";\r\n\r\nfunction Alert(props) {\r\n return \r\n
\r\n YOOZ is actually the first fully secure mobile payment\r\n platform that lets you top up and pay bills directly from any debit\r\n or credit card. We also recently launched our online bill payment\r\n service.\r\n \r\n
\r\n You can top up your mobile phone or someone else’s on the same\r\n network. You can also pay bills and invoices for a variety of\r\n utilities and merchants.\r\n
\r\n
\r\n YOOZ Online
\r\n You can top up and pay bills using the Quick Pay option, no sign up\r\n necessary, or you or you can sign up and create a secure account.\r\n From your secure account, you can make payments and save your card\r\n details so you don’t need to remember them next time.\r\n
\r\n
\r\n We’re always adding new utilities and merchants, so stay tuned!\r\n \r\n
- \r\n
- Phone Number \r\n
- Debit Card or Credit Card \r\n
- A form of ID \r\n
- \r\n
- Email Address \r\n
- Phone Number \r\n
- Visa Debit Card or AnyCredit Card \r\n
\r\n Enter 3 - Pay Bills.
\r\n Select the payee (bill you want to pay).
\r\n Enter your account number or select saved account.
\r\n Enter payment amount.
\r\n Enter YOOZ passcode.
\r\n You'll get a success message and a confirmation SMS once your\r\n payment is successful.
\r\n
\r\n
\r\n
\r\n No need to register! Just follow the steps to enter your information\r\n and you’re done!\r\n
\r\n
\r\n
\r\n Sign up to create a YOOZer account and save your details so\r\n you don’t have to remember them next time.\r\n \r\n
\r\n Maximum payment daily – $5,000 per utility
\r\n Maximum payment monthly – $10,000 per utility
\r\n \r\n
\r\n Enter 4 - My Account.
\r\n Enter 4 - Manage Bill Payments.
\r\n Enter 2 - Delete Account.
\r\n Select the chosen payee (bill you want to stop paying)
\r\n Enter YOOZ passcode.
\r\n You’ll get a confirmation message once the account is deleted.{\" \"}\r\n
\r\n \r\n
\r\n Enter 1 - Top Up My Phone or 2 - Top Up Other Phone.
\r\n Enter Top Up amount.
\r\n If Option 2 was selected, enter other mobile number
\r\n Enter 1 to confirm, then your YOOZ passcode
\r\n You'll get a success message and a confirmation SMS once your Top Up\r\n is successful.
\r\n \r\n
\r\n Enter 1 to confirm the amount of Top Up and press send
\r\n Enter your YOOZ passcode and press send.
\r\n You'll get a success message and a confirmation SMS once your Top Up\r\n is successful.\r\n \r\n
\r\n
\r\n No need to register! Just follow the steps to enter your information\r\n and you’re done!\r\n
\r\n
\r\n
\r\n Sign up to create a YOOZer account and save your details so\r\n you don’t have to remember them next time.\r\n \r\n
\r\n Maximum Top Up per transaction – $200
\r\n Maximum Top Up per day – $500
\r\n \r\n
\r\n
\r\n - Business registration documents
\r\n - Business Bank account information
\r\n - Utility bill and IDs
\r\n
\r\n
\r\n
\r\n You can also encourage them to send you a screen shot of their\r\n receipt.
\r\n
\r\n If you have an online portal, YOOZ can integrate with you to\r\n automatically apply payments to customers’ accounts and invoices.\r\n \r\n
\r\n FTP: Every 15 minutes.
\r\n Transaction Reports: As required.\r\n \r\n
\r\n
\r\n Service deactivation
\r\n YOOZ transactions
\r\n Unapplied payments
\r\n
\r\n Utility account inquiries
\r\n Late application of payments
\r\n Unapplied payments
\r\n Payment made to incorrect utility account
\r\n \r\n
\r\n Service deactivation
\r\n Top Up promotions
\r\n \r\n\r\n
\r\n
\r\n 
\r\n
\r\n \r\n 
\r\n
\r\n \r\n 
\r\n
\r\n \r\n 
\r\n
\r\n \r\n 
\r\n
\r\n \r\n 
\r\n
\r\n {/* \r\n \r\n \r\n \r\n \r\n }\r\n list={\r\n \r\n YOOZ It to pay bills!\r\n
\r\n YOOZ It to top up!\r\n
\r\n YOOZ It to get paid!\r\n
\r\n ,\r\n \r\n It's convenient, safe and easy!
\r\n No apps! No lines! No problems!\r\n ,\r\n ]}\r\n />\r\n }\r\n img={yoozIt_img}\r\n />\r\n {xs &&Make payments... anywhere, anytime!,\r\n \r\n Top up any prepaid phone... anywhere, anytime!,\r\n \r\n \r\n Expand the earning potential of your business with YOOZ. Collect payments securely, quickly and easily through various channels.\r\n ,\r\n \r\n Want to close that sale even faster? Then{\" \"}\r\n \r\n
\r\n \r\n YOOZ It to top up!\r\n
\r\n YOOZ It to get paid!\r\n
\r\n ,\r\n \r\n It's convenient, safe and easy!
\r\n No apps! No lines! No problems!\r\n ,\r\n ]}\r\n />\r\n }\r\n img={yoozIt_img}\r\n />\r\n {xs &&
\r\n \r\n Sign up to access YOOZ from your mobile\r\n device using your credit card and mobile number.\r\n ,\r\n ]}\r\n />\r\n }\r\n img={signUp_img}\r\n />\r\n
\r\n \r\n 
\r\n
\r\n ))}\r\n \r\n );\r\n}\r\n","export default \"data:image/png;base64,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\"","export default \"data:image/png;base64,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\"","export default \"data:image/png;base64,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\"","import {\r\n Box,\r\n Container,\r\n Grid,\r\n makeStyles,\r\n Typography,\r\n useTheme,\r\n} from \"@material-ui/core\";\r\nimport React, { Fragment } from \"react\";\r\nimport Carousel from \"react-multi-carousel\";\r\nimport \"react-multi-carousel/lib/styles.css\";\r\nimport leftQouteImg from \"../../../../assets/images/quote_left.png\";\r\nimport rightQuoteImg from \"../../../../assets/images/quote_right.png\";\r\nimport img from \"../../../../assets/images/testimony_img_1.png\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {},\r\n img: { height: \"100%\", width: \"100%\" },\r\n container: {\r\n padding: 20,\r\n },\r\n}));\r\n\r\nconst responsive = {\r\n superLargeDesktop: {\r\n // the naming can be any, depends on you.\r\n breakpoint: { max: 4000, min: 3000 },\r\n items: 1,\r\n },\r\n desktop: {\r\n breakpoint: { max: 3000, min: 1024 },\r\n items: 1,\r\n },\r\n tablet: {\r\n breakpoint: { max: 1024, min: 464 },\r\n items: 1,\r\n },\r\n mobile: {\r\n breakpoint: { max: 464, min: 0 },\r\n items: 1,\r\n },\r\n};\r\n\r\nexport default function TestimonyCarousel(props) {\r\n const classes = useStyles();\r\n const theme = useTheme();\r\n const { text, note = \"\", name } = props\r\n\r\n function QuoteContainer(props) {\r\n return (\r\n \r\n\r\n \r\n
\r\n \r\n
,\r\n \r\n
\r\n );\r\n}\r\n","import { createAsyncThunk, createSlice } from \"@reduxjs/toolkit\";\r\nimport { API_ROOT } from \"../../../../constants/actionTypes\";\r\nimport { getAsync } from \"../../services/api_util\";\r\nimport { setAnonTokenApi } from \"../../services/utility\";\r\nimport { getUserDetail } from \"../../../../middleware/storage\";\r\n\r\nexport const fetchCountries = createAsyncThunk(\r\n \"topup/fetchCountries\",\r\n async (thunkAPI, { getState, requestId }) => {\r\n await setAnonTokenApi();\r\n\r\n const { currentRequestId, loading } = getState().topup;\r\n\r\n if (loading !== \"pending\" || requestId !== currentRequestId) {\r\n return;\r\n }\r\n const response = await getAsync(`${API_ROOT}users/countries`);\r\n if (response.state === 1) {\r\n return response.data;\r\n }\r\n return [];\r\n }\r\n);\r\n\r\nexport const fetchCharities = createAsyncThunk(\r\n \"topup/fetchCharities\",\r\n async (thunkAPI, { getState, requestId }) => {\r\n await setAnonTokenApi();\r\n\r\n const { currentRequestId, loading } = getState().topup;\r\n\r\n if (loading !== \"pending\" || requestId !== currentRequestId) {\r\n return;\r\n }\r\n const response = await getAsync(`${API_ROOT}Transaction/GetCharities`);\r\n if (response.state === 1) {\r\n return response.data;\r\n }\r\n return [];\r\n }\r\n);\r\n\r\nexport const fetchVat = createAsyncThunk(\r\n \"topup/fetchVat\",\r\n async (countryId, { getState, requestId }) => {\r\n await setAnonTokenApi();\r\n\r\n const { currentRequestId, loading, txnDetails } = getState().topup;\r\n\r\n if (loading !== \"pending\" || requestId !== currentRequestId) {\r\n return;\r\n }\r\n const response = await getAsync(`${API_ROOT}topup/getVat?countryId=`+countryId);\r\n if (response.state === 1) {\r\n return response.data;\r\n }\r\n return [];\r\n }\r\n);\r\n\r\nexport const fetchAmountPresets = createAsyncThunk(\r\n \"topup/fetchAmountPresets\",\r\n async (thunkAPI, { getState, requestId }) => {\r\n const { currentRequestId, loading, txnDetails } = getState().topup;\r\n\r\n if (loading !== \"pending\" || requestId !== currentRequestId) {\r\n return;\r\n }\r\n const response = await getAsync(\r\n `${API_ROOT}topup/GetPresetTopups?phoneProviderId=` +\r\n txnDetails.carrier.phoneProviderId\r\n );\r\n if (response.state === 1) {\r\n return response.data;\r\n }\r\n return [];\r\n }\r\n);\r\n\r\nexport const fetchCC = createAsyncThunk(\r\n \"topup/fetchCC\",\r\n async (thunkAPI, { getState, requestId }) => {\r\n const { currentRequestId, loading, txnDetails } = getState().topup;\r\n\r\n if (loading !== \"pending\" || requestId !== currentRequestId) {\r\n return;\r\n }\r\n const response = await getAsync(`${API_ROOT}customers/getcardlist`);\r\n\r\n if (response.state === 1) {\r\n return response.data;\r\n }\r\n return [];\r\n }\r\n);\r\n\r\nexport const fetchAddressCountries = createAsyncThunk(\r\n \"topup/fetchAddressCountries\",\r\n async (thunkAPI) => {\r\n await setAnonTokenApi();\r\n const response = await getAsync(`${API_ROOT}public/countries`);\r\n if (response.state === 1) {\r\n return response.data;\r\n }\r\n return [];\r\n }\r\n);\r\n\r\nexport const fetchAddressStates = createAsyncThunk(\r\n \"topup/fetchAddressStates\",\r\n async (countryCode, thunkAPI) => {\r\n await setAnonTokenApi();\r\n const response = await getAsync(`${API_ROOT}public/country/${countryCode}/states`);\r\n if (response.state === 1) {\r\n return response.data;\r\n }\r\n return [];\r\n }\r\n);\r\n\r\n\r\nconst testState = {\r\n txnDetails: {\r\n amount: \"50\",\r\n mobileNumber: \"18683082120\",\r\n email: \"\",\r\n transactionType: 2,\r\n carrier: \"1\",\r\n presetSelected: {\r\n amount: 50,\r\n id: 1,\r\n phoneProviderId: 1,\r\n status: 1,\r\n },\r\n country: {\r\n code: \"TT\",\r\n countryId: 2,\r\n description: \"Trinidad and Tobago\",\r\n phoneCode: \"+1868\",\r\n },\r\n carrier: {\r\n name: \"Digicel\",\r\n path: null,\r\n phoneProviderId: 1,\r\n },\r\n coverVat: false,\r\n },\r\n paymentDetails: {\r\n name: \"Haifeng Mei\",\r\n cardNumber: \"4111111111111111\",\r\n expirationDate: \"1234\",\r\n cvv: \"123\",\r\n customerCardId: 1,\r\n },\r\n errors: {\r\n amount: \"\",\r\n country: \"\",\r\n mobileNumber: \"\",\r\n name: \"\",\r\n cardNumber: \"\",\r\n expirationDate: \"\",\r\n cvv: \"\",\r\n email: \"\",\r\n customerCardId: \"\",\r\n agreement: \"\",\r\n },\r\n submissionDetails: {\r\n tac: true,\r\n ppolicy: true,\r\n },\r\n addressDetails: {\r\n firstName: \"\",\r\n lastName: \"\",\r\n line1: \"\",\r\n line2: \"\",\r\n city: \"\",\r\n state: \"\",\r\n postalCode: \"\",\r\n countryCode: \"\",\r\n emailAddress: \"\",\r\n phoneNumber: \"\"\r\n },\r\n error: null,\r\n showCCForm: false,\r\n countries: [],\r\n charities: [],\r\n amountPresets: [],\r\n loading: \"idle\",\r\n nextStepValidation: false,\r\n disabled: false,\r\n activeStep: 0,\r\n currentRequestId: undefined,\r\n};\r\n\r\nconst cleanState = {\r\n txnDetails: {\r\n country: { countryId: \"\" },\r\n amount: \"\",\r\n donationAmount: \"\",\r\n charity: \"\",\r\n mobileNumber: \"\",\r\n email: \"\",\r\n transactionType: 2,\r\n carrier: \"\",\r\n presetSelected: { id: \"\", amount: 0 },\r\n coverVat: false,\r\n },\r\n paymentDetails: {\r\n name: \"\",\r\n cardNumber: \"\",\r\n expirationDate: \"\",\r\n cvv: \"\",\r\n customerCardId: 0,\r\n shouldSaveCard: false\r\n },\r\n addressDetails: {\r\n firstName: \"\",\r\n lastName: \"\",\r\n line1: \"\",\r\n line2: \"\",\r\n city: \"\",\r\n state: \"\",\r\n postalCode: \"\",\r\n countryCode: \"\",\r\n emailAddress: \"\",\r\n phoneNumber: \"\"\r\n },\r\n errors: {\r\n name: \"\",\r\n cardNumber: \"\",\r\n expirationDate: \"\",\r\n cvv: \"\",\r\n email: \"\",\r\n customerCardId: \"\",\r\n agreement: \"\",\r\n addressDetails: {\r\n firstName: \"\",\r\n lastName: \"\",\r\n line1: \"\",\r\n line2: \"\",\r\n city: \"\",\r\n state: \"\",\r\n postalCode: \"\",\r\n countryCode: \"\",\r\n emailAddress: \"\",\r\n phoneNumber: \"\"\r\n },\r\n },\r\n submissionDetails: {\r\n tac: false,\r\n ppolicy: false,\r\n saveCard: false,\r\n },\r\n error: null,\r\n showCCForm: false,\r\n countries: [],\r\n charities: [],\r\n amountPresets: [],\r\n loading: \"idle\",\r\n disabled: false,\r\n validatedSteps: [],\r\n email: \"\",\r\n activeStep: 0,\r\n currentRequestId: undefined,\r\n cCards: [],\r\n vat: 0,\r\n};\r\n\r\nconst cleanAddress = {\r\n firstName: \"\",\r\n lastName: \"\",\r\n line1: \"\",\r\n line2: \"\",\r\n city: \"\",\r\n state: \"\",\r\n postalCode: \"\",\r\n countryCode: \"\",\r\n emailAddress: \"\",\r\n phoneNumber: \"1868\"\r\n}\r\n\r\nconst topupSlice = createSlice({\r\n name: \"topup\",\r\n initialState: cleanState,\r\n reducers: {\r\n setTxnDetails(state, action) {\r\n state.txnDetails = action.payload;\r\n },\r\n setCoverTax(state, action) {\r\n state.txnDetails.coverVat = action.payload;\r\n },\r\n setPaymentDetails(state, action) {\r\n state.paymentDetails = action.payload;\r\n },\r\n setAddressDetails(state, action) {\r\n state.addressDetails = action.payload;\r\n },\r\n setSubmissionDetails(state, action) {\r\n state.submissionDetails = action.payload;\r\n },\r\n setErrors(state, action) {\r\n state.errors = action.payload;\r\n },\r\n setLoading(state, action) {\r\n state.loading = action.payload;\r\n },\r\n toggleCCForm(state, action) {\r\n state.showCCForm = action.payload;\r\n },\r\n resetTxn(state, action) {\r\n state = {\r\n ...cleanState,\r\n };\r\n state.validatedSteps = [];\r\n },\r\n setValidatedSteps(state, action) {\r\n state.validatedSteps = action.payload;\r\n },\r\n addValidatedStep(state, action) {\r\n if (state.validatedSteps.indexOf(action.payload) === -1) {\r\n state.validatedSteps.push(action.payload);\r\n }\r\n },\r\n removeValidatedStep(state, action) {\r\n const idx = state.validatedSteps.indexOf(action.payload);\r\n if (idx >= 0) {\r\n state.validatedSteps.splice(idx, 1);\r\n }\r\n },\r\n setActiveStep(state, action) {\r\n if (action.payload === 0) {\r\n // reset everything\r\n state.activeStep = 0;\r\n state.txnDetails = { ...cleanState.txnDetails };\r\n state.paymentDetails = { ...cleanState.paymentDetails };\r\n state.addressDetails = { ...cleanState.addressDetails };\r\n state.submissionDetails = { ...cleanState.submissionDetails };\r\n state.errors = { ...cleanState.errors };\r\n state.validatedSteps = [];\r\n } else {\r\n state.activeStep = state.activeStep + action.payload;\r\n }\r\n },\r\n resetBilling(state) {\r\n //debugger\r\n state.addressDetails = {\r\n ...cleanAddress\r\n }\r\n }\r\n },\r\n extraReducers: {\r\n [fetchCountries.pending]: (state, action) => {\r\n if (state.loading === \"idle\") {\r\n state.loading = \"pending\";\r\n state.currentRequestId = action.meta.requestId;\r\n }\r\n },\r\n [fetchCountries.fulfilled]: (state, action) => {\r\n const { requestId } = action.meta;\r\n if (state.loading === \"pending\" && state.currentRequestId === requestId) {\r\n state.loading = \"idle\";\r\n state.countries = [...action.payload]; \r\n state.currentRequestId = undefined;\r\n }\r\n },\r\n [fetchCountries.rejected]: (state, action) => {\r\n const { requestId } = action.meta;\r\n if (state.loading === \"pending\" && state.currentRequestId === requestId) {\r\n state.loading = \"idle\";\r\n state.error = action.error;\r\n state.currentRequestId = undefined;\r\n }\r\n },\r\n [fetchCharities.pending]: (state, action) => {\r\n if (state.loading === \"idle\") {\r\n state.loading = \"pending\";\r\n state.currentRequestId = action.meta.requestId;\r\n }\r\n },\r\n [fetchCharities.fulfilled]: (state, action) => {\r\n const { requestId } = action.meta; \r\n if (state.loading === \"pending\" && state.currentRequestId === requestId) {\r\n state.loading = \"idle\";\r\n state.charities = [...action.payload];\r\n state.currentRequestId = undefined;\r\n \r\n }\r\n },\r\n [fetchCharities.rejected]: (state, action) => {\r\n const { requestId } = action.meta;\r\n if (state.loading === \"pending\" && state.currentRequestId === requestId) {\r\n state.loading = \"idle\";\r\n state.error = action.error;\r\n state.currentRequestId = undefined;\r\n }\r\n },\r\n [fetchAmountPresets.pending]: (state, action) => {\r\n if (state.loading === \"idle\") {\r\n state.loading = \"pending\";\r\n state.currentRequestId = action.meta.requestId;\r\n }\r\n },\r\n [fetchAmountPresets.fulfilled]: (state, action) => {\r\n const { requestId } = action.meta;\r\n if (state.loading === \"pending\" && state.currentRequestId === requestId) {\r\n state.loading = \"idle\";\r\n state.amountPresets = [...action.payload];\r\n state.currentRequestId = undefined;\r\n }\r\n },\r\n [fetchAmountPresets.rejected]: (state, action) => {\r\n const { requestId } = action.meta;\r\n if (state.loading === \"pending\" && state.currentRequestId === requestId) {\r\n state.loading = \"idle\";\r\n state.error = action.error;\r\n state.currentRequestId = undefined;\r\n }\r\n },\r\n [fetchCC.pending]: (state, action) => {\r\n if (state.loading === \"idle\") {\r\n state.loading = \"pending\";\r\n state.currentRequestId = action.meta.requestId;\r\n }\r\n },\r\n [fetchCC.fulfilled]: (state, action) => {\r\n const { requestId } = action.meta;\r\n if (state.loading === \"pending\" && state.currentRequestId === requestId) {\r\n state.loading = \"idle\";\r\n state.cCards = [...action.payload];\r\n state.currentRequestId = undefined;\r\n }\r\n },\r\n [fetchCC.rejected]: (state, action) => {\r\n const { requestId } = action.meta;\r\n if (state.loading === \"pending\" && state.currentRequestId === requestId) {\r\n state.loading = \"idle\";\r\n state.error = action.error;\r\n state.currentRequestId = undefined;\r\n }\r\n },\r\n [fetchVat.pending]: (state, action) => {\r\n if (state.loading === \"idle\") {\r\n state.loading = \"pending\";\r\n state.currentRequestId = action.meta.requestId;\r\n }\r\n },\r\n [fetchVat.fulfilled]: (state, action) => {\r\n const { requestId } = action.meta;\r\n if (state.loading === \"pending\" && state.currentRequestId === requestId) {\r\n state.loading = \"idle\";\r\n state.vat = action.payload;\r\n state.currentRequestId = undefined;\r\n }\r\n },\r\n [fetchVat.rejected]: (state, action) => {\r\n const { requestId } = action.meta;\r\n if (state.loading === \"pending\" && state.currentRequestId === requestId) {\r\n state.loading = \"idle\";\r\n state.error = action.error;\r\n state.currentRequestId = undefined;\r\n }\r\n },\r\n [fetchAddressCountries.fulfilled]: (state, action) => {\r\n state.countries = [...action.payload];\r\n },\r\n [fetchAddressStates.fulfilled]: (state, action) => {\r\n state.states = [...action.payload];\r\n }\r\n },\r\n});\r\n\r\nexport const {\r\n setTxnDetails,\r\n setPaymentDetails,\r\n setAddressDetails,\r\n setSubmissionDetails,\r\n setErrors,\r\n setLoading,\r\n toggleCCForm,\r\n resetTxn,\r\n setActiveStep,\r\n setCoverTax,\r\n addValidatedStep,\r\n removeValidatedStep,\r\n resetFromStep2,\r\n resetFromStep1,\r\n setValidatedSteps,\r\n resetBilling\r\n} = topupSlice.actions;\r\n\r\nexport default topupSlice.reducer;\r\n","import { Divider } from \"@material-ui/core\";\r\nimport { makeStyles, useTheme } from \"@material-ui/core/styles\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport { default as React } from \"react\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n table: { border: \"none\", width: \"100%\" },\r\n right: { textAlign: \"right\" },\r\n total: { textAlign: \"right\", color: theme.palette.secondary.main },\r\n\r\n \"@keyframes blinker\": {\r\n from: { opacity: 1 },\r\n to: { opacity: 0 },\r\n },\r\n blinkText: {\r\n animationName: \"$blinker\",\r\n animationDuration: \"1s\",\r\n animationTimingFunction: \"linear\",\r\n animationIterationCount: \"10\",\r\n color: theme.palette.primary.main,\r\n },\r\n}));\r\n\r\nexport default function CostBreakdown(props) {\r\n const { amount, total, updated, vat } = props;\r\n const theme = useTheme();\r\n const classes = useStyles();\r\n return (\r\n \r\n {sm ? (\r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n {amountPresets.map((preset) => (\r\n \r\n handleChange(preset)}\r\n selected={value}\r\n toggleVat={handleCoverVat}\r\n handleValidateNext={handleValidateNext}\r\n invalidateStep={invalidateStep}\r\n coverVat={txnDetails.coverVat}\r\n vat={vat}\r\n />\r\n \r\n ))}\r\n \r\n )}\r\n
\r\n );\r\n}\r\n","import MenuItem from \"@material-ui/core/MenuItem\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { getToken } from \"../../../../middleware/storage\";\r\nimport { setNavIndex } from \"../../../secured-app/uiSlice\";\r\nimport SomethingWentWrong from \"../../components/somethingWentWrong\";\r\nimport { setTabPosition } from \"../../uiSlice\";\r\nimport {\r\n addValidatedStep,\r\n fetchCountries,\r\n fetchVat,\r\n setTxnDetails,\r\n setValidatedSteps,\r\n} from \"./topupSlice\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n \"& .MuiTextField-root\": {\r\n margin: theme.spacing(1),\r\n },\r\n },\r\n}));\r\n\r\nexport default function CountrySelector(props) {\r\n const { handleNext } = props;\r\n const classes = useStyles();\r\n const token = getToken();\r\n const dispatch = useDispatch();\r\n const { countries, txnDetails, activeStep, loading } = useSelector(\r\n (state) => state.topup\r\n );\r\n useEffect(() => {\r\n const loadCountries = async () => {\r\n try {\r\n await dispatch(fetchCountries());\r\n } catch (err) {\r\n console.log(\"error\", `Fetch failed: ${err.message}`);\r\n }\r\n };\r\n\r\n loadCountries();\r\n }, [dispatch]);\r\n\r\n const [value, setValue] = useState(txnDetails.country.countryId);\r\n const [error, setError] = useState(\"\");\r\n\r\n const handleChange = (e) => {\r\n const countryId = e.target.value;\r\n setValue(countryId);\r\n const country = countries.find((c) => c.countryId === countryId);\r\n dispatch(fetchVat(country.countryId));\r\n dispatch(setValidatedSteps([]));\r\n dispatch(\r\n setTxnDetails({\r\n ...txnDetails,\r\n country: country,\r\n mobileNumber: country.phoneCode,\r\n carrier: \"\",\r\n amount: \"\",\r\n presetSelected: { id: \"\", amount: 0 },\r\n coverVat: false,\r\n })\r\n );\r\n dispatch(addValidatedStep(activeStep));\r\n handleNext();\r\n };\r\n\r\n return (\r\n \r\n
\r\n {amountPresets.map((preset) => (\r\n \r\n handleChange(preset)}\r\n selected={value}\r\n toggleVat={handleCoverVat}\r\n handleValidateNext={handleValidateNext}\r\n invalidateStep={invalidateStep}\r\n coverVat={txnDetails.coverVat}\r\n vat={vat}\r\n />\r\n
\r\n ))}\r\n \r\n {countries.length > 0 && (\r\n 0}\r\n select\r\n label=\"Country of Top Up\"\r\n value={value}\r\n onChange={handleChange}\r\n helperText={error.length > 0 ? error : \"\"}\r\n variant=\"outlined\"\r\n fullWidth\r\n color=\"secondary\"\r\n >\r\n {countries.map((option) => (\r\n \r\n ))}\r\n \r\n )}\r\n {loading === \"idle\" && countries.length === 0 && (\r\n window.location.reload()}\r\n onClick2={\r\n token\r\n ? () => dispatch(setNavIndex(6))\r\n : () => dispatch(setTabPosition(6))\r\n }\r\n />\r\n )}\r\n
\r\n );\r\n}\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport {InputAdornment,TextField} from \"@material-ui/core\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\nimport { getToken, getUserDetail } from \"../../../../middleware/storage\";\r\nimport {\r\n addValidatedStep,\r\n\r\n\r\n removeValidatedStep,\r\n setTxnDetails\r\n} from \"./topupSlice\";\r\nimport NumberFormat from \"react-number-format\";\r\nimport { fetchCharities } from \"./topupSlice\";;\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n \"& .MuiTextField-root\": {\r\n margin: theme.spacing(1),\r\n },\r\n },\r\n}));\r\n\r\nfunction NumberFormatCustom(props) {\r\n const { inputRef, onChange, ...other } = props;\r\n return (\r\n \r\n 0}\r\n select\r\n label=\"Charity\"\r\n defaultValue=''\r\n value={charityValue}\r\n onChange={handleChangeCharity}\r\n helperText={\r\n error.length > 0 ? error : \"This is optional. Please leave empty if you do not wish to donate\"\r\n }\r\n variant=\"outlined\"\r\n fullWidth\r\n color=\"secondary\"\r\n >\r\n {}\r\n {\r\n \r\n charities.map((option) => ( \r\n \r\n ))\r\n }\r\n \r\n 0 ? error : \"\"}\r\n variant=\"outlined\"\r\n fullWidth\r\n value={value}\r\n onChange={handleChange}\r\n className={classes.formControl}\r\n InputProps={{\r\n startAdornment: (\r\n $ \r\n ),\r\n endAdornment: (\r\n TTD \r\n ),\r\n inputComponent: NumberFormatCustom,\r\n }}\r\n error={error.length > 0}\r\n color=\"secondary\"\r\n disabled={txnDetails.charity===\"\"}\r\n />\r\n
\r\n );\r\n}\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { getToken, getUserDetail } from \"../../../../middleware/storage\";\r\nimport {\r\n addValidatedStep,\r\n\r\n\r\n removeValidatedStep,\r\n setTxnDetails\r\n} from \"./topupSlice\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n \"& .MuiTextField-root\": {\r\n margin: theme.spacing(1),\r\n },\r\n },\r\n}));\r\n\r\nexport default function EmailEntry(props) {\r\n const { handleNext } = props;\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n const { txnDetails, activeStep } = useSelector((state) => state.topup);\r\n const token = getToken();\r\n\r\n useEffect(() => {\r\n const checkEmailExist = () => {\r\n if (token && txnDetails.email == \"\") {\r\n const user = getUserDetail();\r\n setValue(user.email);\r\n dispatch(\r\n setTxnDetails({\r\n ...txnDetails,\r\n email: user.email,\r\n })\r\n );\r\n dispatch(addValidatedStep(activeStep));\r\n } else{\r\n dispatch(addValidatedStep(activeStep));\r\n }\r\n };\r\n\r\n checkEmailExist();\r\n }, [dispatch]);\r\n \r\n\r\n const [value, setValue] = useState(txnDetails.email);\r\n const [error, setError] = useState(\"\");\r\n\r\n const handleChange = (e) => {\r\n const email = e.target.value;\r\n setValue(email);\r\n if (token){\r\n if (email === \"\") {\r\n setError(\"Email cannot be empty\");\r\n dispatch(removeValidatedStep(activeStep));\r\n } else if ( \r\n /^([A-Za-z0-9_\\-\\.])+\\@([A-Za-z0-9_\\-\\.])+\\.([A-Za-z]{2,9})$/.test(\r\n email\r\n ) === false\r\n ) {\r\n setError(\"Invalid email address.\");\r\n dispatch(removeValidatedStep(activeStep));\r\n } \r\n \r\n if ( /^([A-Za-z0-9_\\-\\.])+\\@([A-Za-z0-9_\\-\\.])+\\.([A-Za-z]{2,9})$/.test(email) === false) {\r\n setError(\"Invalid email address.\");\r\n dispatch(removeValidatedStep(activeStep));\r\n } else {\r\n setError(\"\");\r\n dispatch(\r\n setTxnDetails({\r\n ...txnDetails,\r\n email: email,\r\n })\r\n );\r\n dispatch(addValidatedStep(activeStep));\r\n handleNext();\r\n }\r\n }\r\n else{\r\n if ((email !=\"\") &&\r\n (/^([A-Za-z0-9_\\-\\.])+\\@([A-Za-z0-9_\\-\\.])+\\.([A-Za-z]{2,9})$/.test(email) === false))\r\n {\r\n setError(\"Invalid email address.\");\r\n dispatch(removeValidatedStep(activeStep));\r\n } \r\n else {\r\n setError(\"\");\r\n dispatch(\r\n setTxnDetails({\r\n ...txnDetails,\r\n email: email,\r\n })\r\n );\r\n dispatch(addValidatedStep(activeStep));\r\n handleNext();\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n 0 ? error : \"\"}\r\n variant=\"outlined\"\r\n fullWidth\r\n value={value}\r\n onChange={handleChange}\r\n className={classes.formControl}\r\n error={error.length > 0}\r\n type=\"email\"\r\n color=\"secondary\"\r\n />\r\n
\r\n );\r\n}\r\n","import { InputAdornment, TextField } from \"@material-ui/core\";\r\nimport { green } from \"@material-ui/core/colors\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { CheckCircle } from \"@material-ui/icons\";\r\nimport React, { useState } from \"react\";\r\nimport NumberFormat from \"react-number-format\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { API_ROOT } from \"../../../../constants/actionTypes\";\r\nimport { postAsync } from \"../../services/api_util\";\r\nimport {\r\n addValidatedStep,\r\n removeValidatedStep,\r\n setLoading,\r\n setTxnDetails\r\n} from \"./topupSlice\";\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n },\r\n margin: {\r\n marginBottom: theme.spacing(1),\r\n },\r\n}));\r\n\r\nfunction NumberFormatCustom(props) {\r\n const { inputRef, onChange, ...other } = props;\r\n return (\r\n \r\n 0}\r\n helperText={error.length > 0 ? error : \"\"}\r\n InputProps={{\r\n startAdornment: (\r\n \r\n {txnDetails.carrier && txnDetails.carrier.name}\r\n \r\n ),\r\n endAdornment: (\r\n \r\n {txnDetails.carrier && (\r\n \r\n ),\r\n inputComponent: NumberFormatCustom,\r\n }}\r\n color=\"secondary\"\r\n />\r\n
\r\n );\r\n}\r\n","import { ListItemAvatar, ListItemText } from \"@material-ui/core\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport React from \"react\";\r\nimport { getCardImageByType } from \"../../../../utils\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n \"& .MuiTextField-root\": {\r\n marginBottom: theme.spacing(1),\r\n },\r\n },\r\n cardLogo: {\r\n marginRight: theme.spacing(3),\r\n float: \"left\",\r\n },\r\n}));\r\n\r\nexport default function SelectCC(props) {\r\n const classes = useStyles();\r\n const { value, cards, handleChange, error } = props;\r\n return (\r\n \r\n
\r\n )}\r\n \r\n 0}\r\n select\r\n label=\"Saved Cards\"\r\n value={value}\r\n onChange={handleChange(\"customerCardId\")}\r\n helperText={error.length > 0 ? error : \"Click to select a saved card\"}\r\n variant=\"outlined\"\r\n fullWidth\r\n color=\"secondary\"\r\n >\r\n {cards.map((option) => (\r\n \r\n ))}\r\n \r\n
\r\n );\r\n}\r\n","import { Grid } from \"@material-ui/core\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport React, { Fragment, useEffect, useState } from \"react\";\r\nimport { connect, useDispatch, useSelector } from \"react-redux\";\r\nimport { setNavIndex } from \"../../../../secured-app/uiSlice\";\r\nimport MaskedCvv from \"../../billpay/payment_details/masked_cvv_input\";\r\nimport { fetchCC, setErrors } from \"../topupSlice\";\r\nimport SelectCC from \"./select_card\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: { marginBottom: theme.spacing(2) },\r\n formControl: {\r\n marginBottom: theme.spacing(2),\r\n },\r\n addBtn: {\r\n borderRadius: 20,\r\n },\r\n}));\r\n\r\nfunction PaymentDetailsRegistered(props) {\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n const {\r\n setPaymentDetails,\r\n paymentDetailsState,\r\n handleValidateNext,\r\n invalidateStep = { invalidateStep },\r\n } = props;\r\n const [paymentDetails, updatePaymentDetails] = useState(paymentDetailsState);\r\n const [errors, updateErrors] = useState({\r\n customerCardId: \"\",\r\n cvv: \"\",\r\n });\r\n const { cCards } = useSelector((state) => state.topup);\r\n const handleChange = (prop) => (event) => {\r\n let isEmpty = false;\r\n if (paymentDetails.customerCardId <= 0 && paymentDetails.cvv === \"\") {\r\n isEmpty = true;\r\n }\r\n\r\n let value = event.target.value\r\n updatePaymentDetails({ ...paymentDetails, [prop]: value });\r\n setPaymentDetails({ ...paymentDetails, [prop]: value });\r\n\r\n const newErrors = {\r\n customerCardId: \"\",\r\n cvv: \"\",\r\n };\r\n\r\n if (prop === \"customerCardId\") {\r\n newErrors.customerCardId = \"\";\r\n\r\n if (value === 0) {\r\n newErrors.customerCardId = \"Must select a payment method\";\r\n }\r\n } else if (prop === \"cvv\") {\r\n newErrors.cvv = \"\";\r\n\r\n if (value === \"\") {\r\n newErrors.cvv = \"CVV cannot be empty\";\r\n } else if (value.length < 3) {\r\n newErrors.cvv = \"CVV must be exactly 3 digits\";\r\n }\r\n }\r\n\r\n updateErrors({ ...newErrors });\r\n dispatch(setErrors({ ...newErrors }));\r\n if (!isEmpty) {\r\n handleValidateNext();\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n async function fetchCards() {\r\n await dispatch(fetchCC());\r\n }\r\n\r\n fetchCards();\r\n }, [dispatch]);\r\n\r\n const handleClick = () => {\r\n dispatch(setNavIndex(4));\r\n };\r\n\r\n return (\r\n \r\n 0}\r\n helperText={error.length > 0 ? error : \"\"}\r\n InputProps={{\r\n inputComponent: NumberFormatCustom,\r\n endAdornment: (\r\n \r\n {getCardTypeImage(value)}\r\n \r\n ),\r\n }}\r\n className={classes.formControl}\r\n color=\"secondary\"\r\n required\r\n />\r\n
\r\n );\r\n}\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport React from \"react\";\r\nimport NumberFormat from \"react-number-format\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n },\r\n formControl: {\r\n marginBottom: theme.spacing(2),\r\n },\r\n}));\r\n\r\nfunction NumberFormatCustom(props) {\r\n const { inputRef, onChange, ...other } = props;\r\n return (\r\n \r\n 0}\r\n helperText={error.length > 0 ? error : \"\"}\r\n InputProps={{\r\n inputComponent: NumberFormatCustom,\r\n }}\r\n className={classes.formControl}\r\n color=\"secondary\"\r\n required\r\n />\r\n
\r\n );\r\n}\r\n","import { Grid } from \"@material-ui/core\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport React, { Fragment, useState, useEffect } from \"react\";\r\nimport { connect, useDispatch, useSelector } from \"react-redux\";\r\nimport { checkExpDate, getCardType, isValidateExpDate } from \"../../../../utils\";\r\nimport { setErrors, setPaymentDetails } from \"../topupSlice\";\r\nimport MaskedCCInput from \"./masked_cc_input\";\r\nimport MaskedExpiryDate from \"./masked_expiry_date\";\r\nimport Checkbox from \"@material-ui/core/Checkbox\";\r\nimport { getToken } from \"../../../../../middleware/storage\";\r\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\r\nimport MaskedCvv from \"../../billpay/payment_details/masked_cvv_input\";\r\nimport { isCardDuplicate } from \"../../../../../../src/components/utils\"\r\n\r\n\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: { marginBottom: theme.spacing(2) },\r\n formControl: {\r\n marginBottom: theme.spacing(2),\r\n },\r\n}));\r\n\r\nfunction PaymentDetailsUnregistered(props) {\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n const { setPaymentDetails, paymentDetailsState, handleValidateNext } = props;\r\n const { cCards } = useSelector((state) => state.topup);\r\n const [loggedIn, SetLogin] = useState(false);\r\n const [paymentDetails, updatePaymentDetails] = useState(paymentDetailsState);\r\n const [errors, updateErrors] = useState({\r\n name: \"\",\r\n cardNumber: \"\",\r\n expirationDate: \"\",\r\n cvv: \"\",\r\n });\r\n const [duplicateCardText, setDuplicateCardText] = useState(\"\");\r\n const [disableSaveCard, setDisableSaveCard] = useState(true);\r\n\r\n const handleChange = (prop) => (event) => {\r\n let isEmpty = false;\r\n for (const [key, value] of Object.entries(paymentDetailsState)) {\r\n if (value === \"\") {\r\n isEmpty = true;\r\n }\r\n }\r\n\r\n let value = event.target.value\r\n if (prop === \"shouldSaveCard\") {\r\n value = event.target.checked;\r\n }\r\n\r\n if (prop === \"cardNumber\") {\r\n if (value.length < 16) {\r\n setDuplicateCardText(\"\");\r\n setDisableSaveCard(true);\r\n } else {\r\n if (cCards.length > 0) {\r\n const isCcardDuplicate = isCardDuplicate(cCards, value);\r\n if (isCcardDuplicate) {\r\n setDuplicateCardText(\"This card is already saved for this account.\");\r\n setDisableSaveCard(true);\r\n } else {\r\n setDuplicateCardText(\"\");\r\n setDisableSaveCard(false);\r\n }\r\n } else {\r\n setDuplicateCardText(\"\");\r\n setDisableSaveCard(false);\r\n }\r\n }\r\n }\r\n setPaymentDetails({ ...paymentDetails, [prop]: value });\r\n updatePaymentDetails({ ...paymentDetails, [prop]: value });\r\n \r\n const newErrors = {\r\n name: \"\",\r\n cardNumber: \"\",\r\n expirationDate: \"\",\r\n cvv: \"\",\r\n };\r\n\r\n if (prop === \"name\") {\r\n newErrors.name = \"\";\r\n\r\n if (value === \"\") {\r\n newErrors.name = \"Name cannot be empty\";\r\n }\r\n } else if (prop === \"cardNumber\") {\r\n const cardType = getCardType(value);\r\n newErrors.cardNumber = \"\";\r\n\r\n if (value.length < 16) {\r\n newErrors.value = \"Incomplete credit card number\";\r\n }\r\n\r\n if (\r\n cardType.toUpperCase() !== \"VISA\" &&\r\n cardType.toUpperCase() !== \"MASTERCARD\"\r\n ) {\r\n newErrors.cardNumber = \"Invalid credit card number\";\r\n }\r\n\r\n if (cardType.toUpperCase() === \"VISA\") {\r\n if (value.length !== 13 && value.length !== 16) {\r\n newErrors.cardNumber = \"Incomplete credit card number\";\r\n }\r\n }\r\n\r\n if (cardType.toUpperCase() === \"MASTERCARD\") {\r\n if (value.length !== 16) {\r\n newErrors.value = \"Incomplete credit card number\";\r\n }\r\n }\r\n } else if (prop === \"expirationDate\") {\r\n newErrors.expirationDate = \"\";\r\n\r\n if (value === \"\") {\r\n newErrors.expirationDate = \"Expiration date cannot be empty\";\r\n } else if (value.length < 4) {\r\n newErrors.expirationDate = \"Expiration date is incomplete\";\r\n } else if (!isValidateExpDate(value)) {\r\n newErrors.expirationDate = \"Expiration date is invalid\";\r\n }\r\n } else if (prop === \"cvv\") {\r\n newErrors.cvv = \"\";\r\n\r\n if (value === \"\") {\r\n newErrors.cvv = \"CVV cannot be empty\";\r\n } else if (value.length < 3) {\r\n newErrors.cvv = \"CVV must be exactly 3 digits\";\r\n }\r\n }\r\n\r\n updateErrors({ ...newErrors });\r\n dispatch(setErrors({ ...newErrors }));\r\n if (!isEmpty && \r\n newErrors.cardNumber == \"\"&&\r\n newErrors.cvv == \"\"&&\r\n newErrors.expirationDate == \"\"&&\r\n newErrors.name == \"\"\r\n ) {\r\n handleValidateNext();\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n async function validateLogin() {\r\n const token = getToken();\r\n if (!token) {\r\n SetLogin(false);\r\n } else {\r\n SetLogin(true);\r\n }\r\n }\r\n \r\n validateLogin();\r\n }, []);\r\n\r\n return (\r\n \r\n 0}\r\n component=\"fieldset\"\r\n className={classes.formControl}\r\n >\r\n I've read and agree with \r\n {showCCForm ? (\r\n \r\n ) : (\r\n \r\n \r\n )}\r\n {error.length > 0 && error} \r\n \r\n
\r\n );\r\n}\r\n","import { Grid, ListItemAvatar, Typography } from \"@material-ui/core\";\r\nimport Divider from \"@material-ui/core/Divider\";\r\nimport List from \"@material-ui/core/List\";\r\nimport ListItem from \"@material-ui/core/ListItem\";\r\nimport ListItemText from \"@material-ui/core/ListItemText\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport React, { Fragment } from \"react\";\r\nimport { getCardImageByType } from \"../../../../utils\";\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n width: \"100%\",\r\n },\r\n cardLogo: {\r\n height: \"100%\",\r\n // marginRight: theme.spacing(3),\r\n },\r\n}));\r\n\r\nexport default function PaymentDetailListingRegistered(props) {\r\n const classes = useStyles();\r\n const { name = \"\", nickName = \"\", cardType = \"\" } = props.values;\r\n return (\r\n \r\n \r\n Terms & Conditions\r\n \r\n
\r\n }\r\n />\r\n \r\n \r\n Privacy Policy\r\n \r\n
\r\n }\r\n />\r\n \r\n \r\n Terms & Conditions\r\n \r\n
\r\n }\r\n />\r\n \r\n \r\n Privacy Policy\r\n \r\n
\r\n }\r\n />\r\n - \r\n
- \r\n
- \r\n
- \r\n
\r\n
\r\n )}\r\n \r\n \r\n {steps.map((step, index) => (\r\n \r\n {step.label} \r\n \r\n {getStepContent(index)}\r\n \r\n \r\n ))}\r\n \r\n {activeStep === steps.length && (\r\n \r\n \r\n )}\r\n
\r\n );\r\n}\r\n","import { Box, Container, Paper, useMediaQuery } from \"@material-ui/core\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport { makeStyles, useTheme } from \"@material-ui/core/styles\";\r\nimport React, { useEffect } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport MasterLogo from \"../../../../assets/images/master.png\";\r\nimport FACLogo from \"../../../../assets/images/poweredByFirstAtlantic.png\";\r\nimport VisaLogo from \"../../../../assets/images/verifiedByVisa.jpg\";\r\nimport { getToken } from \"../../../../middleware/storage\";\r\nimport Loading from \"../../../shared/loader/loader\";\r\nimport IconHeader from \"../../components/iconHeader\";\r\nimport TopupStepper from \"./stepper\";\r\nimport { setActiveStep } from \"./topupSlice\";\r\nimport SystemMessage from \"../../components/systemMessage\";\r\nimport useServiceStatus from \"../../../../hooks/useServiceStatus\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n minHeight:'100vh'\r\n },\r\n paper: {\r\n padding: theme.spacing(2),\r\n margin: theme.spacing(3),\r\n [theme.breakpoints.down(\"sm\")]: {\r\n padding: 0,\r\n boxShadow: \"none\",\r\n margin: theme.spacing(1),\r\n },\r\n },\r\n logo: {\r\n width: \"100%\",\r\n maxWidth: \"120px\",\r\n },\r\n gridContainer: {\r\n [theme.breakpoints.up(\"sm\")]: {\r\n marginTop: theme.spacing(10),\r\n },\r\n },\r\n}));\r\n\r\nexport default function Topup(props) {\r\n const classes = useStyles();\r\n const theme = useTheme();\r\n const md = useMediaQuery(theme.breakpoints.down(\"md\"));\r\n const token = getToken();\r\n const { loading } = useSelector((state) => state.topup);\r\n const dispatch = useDispatch();\r\n useEffect(() => {\r\n dispatch(setActiveStep(0));\r\n }, [dispatch]);\r\n\r\n const { serviceLoading, serviceStatus } = useServiceStatus(\"topup\");\r\n if (serviceLoading) {\r\n return {facResponse.state === \"failed\" && index == steps.length - 1 && renderFacError()}
\r\n \r\n
\r\n \r\n {activeStep > 0 && (\r\n \r\n Back\r\n \r\n )}\r\n \r\n {activeStep === steps.length - 1 ? \"Finish\" : \"Next\"}\r\n \r\n
\r\n \r\n {facResponse.state === \"success\" &&\r\n \r\n New Transaction\r\n \r\n
\r\n \r\n {children}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import { IconButton } from \"@material-ui/core\";\r\nimport Snackbar from \"@material-ui/core/Snackbar\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport MuiAlert from \"@material-ui/lab/Alert\";\r\nimport React from \"react\";\r\nimport { useDispatch } from \"react-redux\";\r\nimport { closeSnackBar } from \"../../../reducers/uiGlobal\";\r\n\r\nfunction Alert(props) {\r\n return \r\n {type === \"default\" ? (\r\n \r\n \r\n \r\n \r\n {msg}\r\n \r\n \r\n )}\r\n
\r\n );\r\n}\r\n","import axios from \"axios\";\r\nimport {\r\n API_ROOT,\r\n CARD_ADD_FAILURE,\r\n CARD_ADD_REQUEST,\r\n CARD_ADD_SUCCESS,\r\n CARD_EDIT_FAILURE,\r\n CARD_EDIT_REQUEST,\r\n CARD_EDIT_SUCCESS,\r\n CARD_REMOVE_FAILURE,\r\n CARD_REMOVE_REQUEST,\r\n CARD_REMOVE_SUCCESS,\r\n CARD_LIST_FAILURE,\r\n CARD_LIST_REQUEST,\r\n CARD_LIST_SUCCESS,\r\n DETAIL_EDIT_FAILURE,\r\n DETAIL_EDIT_REQUEST,\r\n DETAIL_EDIT_SUCCESS,\r\n NUMBER_ACTIVATE_FAILURE,\r\n NUMBER_ACTIVATE_REQUEST,\r\n NUMBER_ACTIVATE_SUCCESS,\r\n NUMBER_ADD_FAILURE,\r\n NUMBER_ADD_REQUEST,\r\n NUMBER_ADD_SUCCESS,\r\n OTP_VARIFY_FAILURE,\r\n OTP_VARIFY_REQUEST,\r\n OTP_VARIFY_SUCCESS,\r\n PHONE_LIST_FAILURE,\r\n PHONE_LIST_REQUEST,\r\n PHONE_LIST_SUCCESS,\r\n PRIMARY_CARD_FAILURE,\r\n PRIMARY_CARD_REQUEST,\r\n PRIMARY_CARD_SUCCESS,\r\n PRIMARY_PHONE_FAILURE,\r\n PRIMARY_PHONE_REQUEST,\r\n PRIMARY_PHONE_SUCCESS,\r\n RESEND_OTP_FAILURE,\r\n RESEND_OTP_REQUEST,\r\n RESEND_OTP_SUCCESS,\r\n} from \"../constants/actionTypes\";\r\nimport { setUserDetails } from \"../middleware/storage\";\r\n\r\nfunction Request(type) {\r\n return {\r\n type: type,\r\n };\r\n}\r\n\r\nfunction Success(type, payload) {\r\n return {\r\n type: type,\r\n entities: payload,\r\n };\r\n}\r\n\r\nfunction Failure(message, type) {\r\n return {\r\n type: type,\r\n error: message,\r\n };\r\n}\r\n\r\nexport function activatePhone(phoneId, customerId, token) {\r\n return (dispatch, getState) => {\r\n dispatch(Request(NUMBER_ACTIVATE_REQUEST));\r\n return axios\r\n .post(\r\n API_ROOT +\r\n `customers/activatephone?phoneId=` +\r\n phoneId +\r\n \"&customerId=\" +\r\n customerId,\r\n null,\r\n { headers: { Authorization: `Bearer ${token}` } }\r\n )\r\n .then((response) => {\r\n return dispatch(Success(NUMBER_ACTIVATE_SUCCESS));\r\n })\r\n .catch((error) => {\r\n return dispatch(Failure(error, NUMBER_ACTIVATE_FAILURE));\r\n });\r\n };\r\n}\r\n\r\nexport function primaryPhone(phoneId, customerId, token) {\r\n return (dispatch, getState) => {\r\n //getState().entities.accounts.accounts = {};\r\n dispatch(Request(PRIMARY_PHONE_REQUEST));\r\n return axios\r\n .post(\r\n API_ROOT +\r\n `customers/primaryphone?phoneId=` +\r\n phoneId +\r\n \"&customerId=\" +\r\n customerId,\r\n null,\r\n { headers: { Authorization: `Bearer ${token}` } }\r\n )\r\n .then((response) => {\r\n return dispatch(Success(PRIMARY_PHONE_SUCCESS));\r\n })\r\n .catch((error) => {\r\n return dispatch(Failure(error, PRIMARY_PHONE_FAILURE));\r\n });\r\n };\r\n}\r\n\r\nexport function deactivatePhone(phoneId, customerId, token) {\r\n return (dispatch, getState) => {\r\n //getState().entities.accounts.accounts = {};\r\n dispatch(Request(PRIMARY_PHONE_REQUEST));\r\n return axios\r\n .post(\r\n API_ROOT +\r\n `customers/deactivatephone?phoneId=` +\r\n phoneId +\r\n \"&customerId=\" +\r\n customerId,\r\n null,\r\n { headers: { Authorization: `Bearer ${token}` } }\r\n )\r\n .then((response) => {\r\n return dispatch(Success(PRIMARY_PHONE_SUCCESS));\r\n })\r\n .catch((error) => {\r\n return dispatch(Failure(error, PRIMARY_PHONE_FAILURE));\r\n });\r\n };\r\n}\r\n\r\nexport function primaryCard(id, customerId, token) {\r\n return (dispatch, getState) => {\r\n dispatch(Request(PRIMARY_CARD_REQUEST));\r\n return axios\r\n .post(\r\n API_ROOT +\r\n `customers/primarycard?id=` +\r\n id +\r\n \"&customerId=\" +\r\n customerId,\r\n null,\r\n { headers: { Authorization: `Bearer ${token}` } }\r\n )\r\n .then((response) => {\r\n return dispatch(Success(PRIMARY_CARD_SUCCESS));\r\n })\r\n .catch((error) => {\r\n return dispatch(Failure(error, PRIMARY_CARD_FAILURE));\r\n });\r\n };\r\n}\r\n\r\nexport function addNewNumber(phone, token) {\r\n return (dispatch, getState) => {\r\n dispatch(Request(NUMBER_ADD_REQUEST));\r\n return axios\r\n .post(API_ROOT + `customers/addphone`, phone, {\r\n headers: { Authorization: `Bearer ${token}` },\r\n })\r\n .then((response) => {\r\n return dispatch(Success(NUMBER_ADD_SUCCESS));\r\n })\r\n .catch((error) => {\r\n return dispatch(Failure(error, NUMBER_ADD_FAILURE));\r\n });\r\n };\r\n}\r\n\r\nexport function getPhoneList(token) {\r\n return (dispatch, getState) => {\r\n getState().entities.accounts.phoneList = [];\r\n dispatch(Request(PHONE_LIST_REQUEST));\r\n return axios\r\n .get(API_ROOT + `customers/getphonelist`, {\r\n headers: { Authorization: `Bearer ${token}` },\r\n })\r\n .then((response) => {\r\n return dispatch(\r\n Success(PHONE_LIST_SUCCESS, {\r\n accounts: { phoneList: response.data.data },\r\n })\r\n );\r\n })\r\n .catch((error) => {\r\n return dispatch(Failure(error, PHONE_LIST_FAILURE));\r\n });\r\n };\r\n}\r\n\r\nexport function getCardList(token) {\r\n return (dispatch, getState) => {\r\n getState().entities.accounts.payCards = [];\r\n dispatch(Request(CARD_LIST_REQUEST));\r\n return axios\r\n .get(API_ROOT + `customers/getcardlist`, {\r\n headers: { Authorization: `Bearer ${token}` },\r\n })\r\n .then((response) => {\r\n return dispatch(\r\n Success(CARD_LIST_SUCCESS, {\r\n accounts: { payCards: response.data.data },\r\n })\r\n );\r\n })\r\n .catch((error) => {\r\n return dispatch(Failure(error, CARD_LIST_FAILURE));\r\n });\r\n };\r\n}\r\n\r\nexport function addNewPaymentCard(credential, token) {\r\n return (dispatch, getState) => {\r\n // getState().entities.accounts.payCards = {};\r\n dispatch(Request(CARD_ADD_REQUEST));\r\n return axios\r\n .post(API_ROOT + \"customers/addcard\", credential, {\r\n headers: { Authorization: `Bearer ${token}` },\r\n })\r\n .then((response) => {\r\n if(response.data.state === 1){\r\n return dispatch(\r\n Success(CARD_ADD_SUCCESS, {\r\n // user : {auth: response.data},\r\n })\r\n );\r\n }else{\r\n return dispatch(Failure(response.data.msg, CARD_ADD_FAILURE));\r\n }\r\n \r\n })\r\n .catch((error) => {\r\n return dispatch(Failure(error, CARD_ADD_FAILURE));\r\n });\r\n };\r\n}\r\n\r\nexport function editPaymentCard(credential, token) {\r\n return (dispatch, getState) => {\r\n // getState().entities.accounts.payCards = {};\r\n dispatch(Request(CARD_EDIT_REQUEST));\r\n return axios\r\n .post(API_ROOT + \"customers/updatecard\", credential, {\r\n headers: { Authorization: `Bearer ${token}` },\r\n })\r\n .then((response) => {\r\n if(response.data.state === 1){\r\n return dispatch(\r\n Success(CARD_EDIT_SUCCESS, {\r\n // user : {auth: response.data},\r\n })\r\n );\r\n }else{\r\n return dispatch(Failure(response.data.msg, CARD_EDIT_FAILURE));\r\n }\r\n \r\n })\r\n .catch((error) => {\r\n return dispatch(Failure(error, CARD_EDIT_FAILURE));\r\n });\r\n };\r\n}\r\n\r\nexport function removePaymentCard(credential, token) {\r\n return (dispatch, getState) => {\r\n // getState().entities.accounts.payCards = {};\r\n dispatch(Request(CARD_REMOVE_REQUEST));\r\n return axios\r\n .post(API_ROOT + \"customers/removecard\", credential, {\r\n headers: { Authorization: `Bearer ${token}` },\r\n })\r\n .then((response) => {\r\n if(response.data.state === 1){\r\n return dispatch(\r\n Success(CARD_REMOVE_SUCCESS, {\r\n // user : {auth: response.data},\r\n })\r\n );\r\n }else{\r\n return dispatch(Failure(response.data.msg, CARD_REMOVE_FAILURE));\r\n }\r\n \r\n })\r\n .catch((error) => {\r\n return dispatch(Failure(error, CARD_REMOVE_FAILURE));\r\n });\r\n };\r\n}\r\n\r\nexport function updateUserDetails(user, token) {\r\n return (dispatch, getState) => {\r\n getState().entities.user.details = {};\r\n dispatch(Request(DETAIL_EDIT_REQUEST));\r\n return axios\r\n .post(API_ROOT + \"Customers/update\", user, {\r\n headers: { Authorization: `Bearer ${token}` },\r\n })\r\n .then((response) => {\r\n setUserDetails(response.data.data);\r\n return dispatch(\r\n Success(DETAIL_EDIT_SUCCESS, {\r\n user: { details: response.data.data },\r\n })\r\n );\r\n })\r\n .catch((error) => {\r\n return dispatch(Failure(error, DETAIL_EDIT_FAILURE));\r\n });\r\n };\r\n}\r\n\r\nexport function otpVarification(phone) {\r\n return (dispatch, getState) => {\r\n getState().entities.user.auth = {};\r\n dispatch(Request(OTP_VARIFY_REQUEST));\r\n return axios\r\n .post(API_ROOT + `users/phoneverify`, phone)\r\n .then((response) => {\r\n if (response.data.state) {\r\n if (response.data.state === 1) {\r\n return dispatch(\r\n Success(OTP_VARIFY_SUCCESS, {\r\n user: { auth: response.data },\r\n })\r\n );\r\n } else {\r\n return dispatch(Failure(response.data.msg, OTP_VARIFY_FAILURE));\r\n }\r\n }\r\n\r\n return dispatch(\r\n Failure(\r\n \"Server communication error. Please try again later\",\r\n OTP_VARIFY_FAILURE\r\n )\r\n );\r\n })\r\n .catch((error) => {\r\n return dispatch(Failure(error.response.data.msg, OTP_VARIFY_FAILURE));\r\n });\r\n };\r\n}\r\n\r\nexport function sendOtp(phone) {\r\n return (dispatch, getState) => {\r\n getState().entities.accounts.smsCred = {};\r\n dispatch(Request(RESEND_OTP_REQUEST));\r\n return axios\r\n .post(API_ROOT + `users/sendsmsverifycode`, phone)\r\n .then((response) => {\r\n if (response.data.state === 1) {\r\n return dispatch(\r\n Success(RESEND_OTP_SUCCESS, {\r\n accounts: { smsCred: response.data.data },\r\n })\r\n );\r\n } else {\r\n return dispatch(Failure(response.data, RESEND_OTP_FAILURE));\r\n }\r\n })\r\n .catch((error) => {\r\n return dispatch(Failure(error, RESEND_OTP_FAILURE));\r\n });\r\n };\r\n}\r\n","export const assets = {\r\n //sky : require('../app/assets/Images/cloud.png'),\r\n // logo: require(\"../src/assets/images/logo.png\"),\r\n // reg: require(\"../src/assets/images/registration-image.png\"),\r\n // regIcon: require(\"../src/assets/images/registration-icon.png\"),\r\n // close: require(\"../src/assets/images/close-icon.png\"),\r\n // checkIcon: require(\"../src/assets/images/check-icon.png\"),\r\n // signUp: require(\"../src/assets/images/signup-main-bg.png\"),\r\n // siteIcon: require(\"../src/assets/images/site-icon.png\"),\r\n // notification: require(\"../src/assets/images/notification.png\"),\r\n // user: require(\"../src/assets/images/user.png\"),\r\n // toggle: require(\"../src/assets/images/toggle-icon.png\"),\r\n // innerLogo: require(\"../src/assets/images/inner-logo.png\"),\r\n // combined: require(\"../src/assets/images/combined-icon.png\"),\r\n // TransactionIcon2: require(\"../src/assets/images/transaction-icon2.png\"),\r\n // TransactionType2: require(\"../src/assets/images/transaction-type2.png\"),\r\n // TransactionType4: require(\"../src/assets/images/transaction-type4.png\"),\r\n\r\n // TransactionIcon1: require(\"../src/assets/images/transaction-icon1.png\"),\r\n // TransactionType1: require(\"../src/assets/images/transaction-type1.png\"),\r\n // TransactionType3: require(\"../src/assets/images/transaction-type3.png\"),\r\n // graph: require(\"../src/assets/images/graph.png\"),\r\n\r\n // vide: require(\"../src/assets/images/vide.png\"),\r\n // video_preview2: require(\"../src/assets/images/video_preview2.png\"),\r\n // video_preview3: require(\"../src/assets/images/video_preview3.png\"),\r\n\r\n // field_icon2: require(\"../src/assets/images/field-icon2.png\"),\r\n // field_icon1: require(\"../src/assets/images/field-icon1.png\"),\r\n\r\n // plus_icon: require(\"../src/assets/images/plus-icon.png\"),\r\n card_logo2: require(\"../src/assets/images/card-logo2.png\"),\r\n card_logo1: require(\"../src/assets/images/card-logo1.png\"),\r\n // number_company2: require(\"../src/assets/images/number-company2.png\"),\r\n // number_company1: require(\"../src/assets/images/number-company1.png\"),\r\n // Checkmark: require(\"../src/assets/images/Checkmark.png\"),\r\n // Mastercard: require(\"../src/assets/images/Mastercard.png\"),\r\n // deleteImg: require(\"../src/assets/images/Delete.png\"),\r\n};\r\n","import { Typography, useMediaQuery, useTheme } from \"@material-ui/core\";\r\nimport Dialog from \"@material-ui/core/Dialog\";\r\nimport DialogContent from \"@material-ui/core/DialogContent\";\r\nimport MuiDialogTitle from \"@material-ui/core/DialogTitle\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport Slide from \"@material-ui/core/Slide\";\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport React from \"react\";\r\nimport Loading from \"../../../../shared/loader/loader\";\r\n\r\nconst Transition = React.forwardRef(function Transition(props, ref) {\r\n return - \r\n {phoneList.map((phone) => {\r\n return
\r\n \r\n Add another mobile number to your Yooz account\r\n \r\n \r\n \r\n \r\n
\r\n - \r\n {cards.map((card) => {\r\n return
\r\n \r\n \r\n \r\n
\r\n - \r\n
\r\n \r\n {theme.direction === \"rtl\" ? \r\n {theme.direction === \"rtl\" ? (\r\n = Math.ceil(count / rowsPerPage) - 1}\r\n aria-label=\"next page\"\r\n >\r\n {theme.direction === \"rtl\" ? (\r\n = Math.ceil(count / rowsPerPage) - 1}\r\n aria-label=\"last page\"\r\n >\r\n {theme.direction === \"rtl\" ?
\r\n );\r\n}\r\n","import Paper from \"@material-ui/core/Paper\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Table from \"@material-ui/core/Table\";\r\nimport TableBody from \"@material-ui/core/TableBody\";\r\nimport TableCell from \"@material-ui/core/TableCell\";\r\nimport TableContainer from \"@material-ui/core/TableContainer\";\r\nimport TableHead from \"@material-ui/core/TableHead\";\r\nimport TablePagination from \"@material-ui/core/TablePagination\";\r\nimport TableRow from \"@material-ui/core/TableRow\";\r\nimport React, { useState } from \"react\";\r\nimport TablePaginationActions from \"./tablePaginationActions\";\r\nimport moment from \"moment\";\r\nconst columns = [\r\n {\r\n id: \"transactionDate\",\r\n label: \"Transaction Date\",\r\n format: (value) => moment(value).format(\"LL\"),\r\n },\r\n { id: \"accountNumber\", label: \"Account #\" },\r\n { id: \"provider\", label: \"Provider/Carrier\" },\r\n { id: \"nameOnAccount\", label: \"Account Name\" },\r\n {\r\n id: \"amount\",\r\n label: \"Amount\",\r\n align: \"right\",\r\n },\r\n {\r\n id: \"tranType\",\r\n label: \"Type\",\r\n },,\r\n {\r\n id: \"tranStatus\",\r\n label: \"Status\",\r\n },\r\n { id: \"orderNumber\", label: \"Receipt Number\" },\r\n\r\n { id: \"authCode\", label: \"Authorization Code\" },\r\n];\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n width: \"100%\",\r\n },\r\n container: {\r\n [theme.breakpoints.up(\"xl\")]: {\r\n maxHeight: 600,\r\n },\r\n [theme.breakpoints.down(\"lg\")]: {\r\n maxHeight: 500,\r\n },\r\n },\r\n}));\r\n\r\nexport default function CustomTable(props) {\r\n const {\r\n pagedItems = [],\r\n totalItems = 10,\r\n handleFetch,\r\n pageIndex,\r\n handleQueryUpdate,\r\n query,\r\n } = props;\r\n const classes = useStyles();\r\n\r\n const [pageSize, setPageSize] = useState(10);\r\n const [pageIndexLocal, setPageIndex] = useState(pageIndex - 1);\r\n\r\n const handleChangePage = (event, newPage) => {\r\n setPageIndex(newPage);\r\n handleQueryUpdate({ ...query, pageNumber: ++newPage, pageSize });\r\n handleFetch();\r\n };\r\n\r\n const handleChangeRowsPerPage = (e) => {\r\n const pageSize = e.target.value;\r\n setPageSize(pageSize)\r\n handleQueryUpdate({ ...query, pageSize });\r\n handleFetch();\r\n };\r\n\r\n return (\r\n \r\n {loading === \"pending\" && \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import React, { useState, useEffect } from \"react\";\r\nimport Chart from \"react-google-charts\";\r\nimport withWidth from \"@material-ui/core/withWidth\";\r\n\r\nfunction CustomChart(props) {\r\n const { monthlystats, width } = props;\r\n const [key, setkey] = useState(false);\r\n\r\n useEffect(() => {\r\n setkey((prevKey) => !prevKey);\r\n }, [width]);\r\n\r\n return (\r\n - \r\n {items.map((item, id) => (\r\n
\r\n
\r\n \r\n
\r\n );\r\n\r\n return (\r\n \r\n \r\n {/* \r\n\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import React from \"react\";\r\nimport { Route, Redirect } from \"react-router-dom\";\r\nimport { getToken } from \"../middleware/storage\";\r\n\r\nexport default function ProtectedRoute(props) {\r\n const { component } = props;\r\n const token = getToken();\r\n return token ? (\r\n \r\n
\r\n ) : (\r\n