\r\n
\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 \r\n \r\n {route.title}\r\n \r\n {route.routes && (\r\n \r\n {route.routes.map((x, index) => {\r\n return (\r\n \r\n {renderMenuItem(x, index)}\r\n {renderSubMenu(x.subRoutes, `submenu-${index}`)}\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 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 {routes.map((route, index) => renderRoute(route, index))}\r\n \r\n
\r\n );\r\n}\r\n","export const actionRoutes = {\r\n login: { path: `/login`, label: \"Login\" },\r\n signup: { path: `/signup`, label: \"Signup\" },\r\n quickpay: { path: `/quickpay`, label: \"QUICK PAY\" },\r\n quicktopup: { path: `/quicktopup`, label: \"⚡ TOP UP\" },\r\n};\r\n\r\nexport const quickPayRoutes = {\r\n title: \"⚡ Quick Pay\",\r\n routes: [\r\n { path: `/quickpay`, label: \"Bill Pay\" },\r\n { path: `/quicktopup`, label: \"Top Up\" },\r\n ],\r\n};\r\n\r\nexport const waysToPayRoutes = {\r\n title: \"PAY with YOOZ\",\r\n routes: [\r\n {\r\n label: \"Ways to Pay\",\r\n show: true,\r\n path: \"\",\r\n subRoutes: [\r\n {\r\n path: `/billpay`,\r\n label: \"Pay Bills\",\r\n show: true,\r\n },\r\n {\r\n path: `/topup`,\r\n label: \"Top Up\",\r\n show: true,\r\n },\r\n {\r\n path: `/scan2payGnS`,\r\n label: \"Pay For Goods\",\r\n show: true,\r\n },\r\n {\r\n path: `/AgentLocations`,\r\n label: \"Pay at Agent Locations\",\r\n show: true,\r\n },\r\n ],\r\n },\r\n {\r\n label: \"Donate\",\r\n show: true,\r\n path: \"/donate\",\r\n },\r\n ],\r\n};\r\n\r\nexport const yoozBusinessRoutes = {\r\n title: \"YOOZ for Business\",\r\n routes: [\r\n {\r\n label: \"Services\",\r\n show: true,\r\n path: \"\",\r\n subRoutes: [\r\n {\r\n path: `/partners`,\r\n label: \"Collect Payments\",\r\n show: true,\r\n },\r\n {\r\n path: `/scan2pay`,\r\n label: \"YOOZ Scan2Pay\",\r\n show: true,\r\n },\r\n {\r\n path: `/payment-gateway`,\r\n label: \"YOOZ Payment Gateway\",\r\n show: true,\r\n },\r\n {\r\n path: `/collect-donations`,\r\n label: \"Collect Donations\",\r\n show: true,\r\n },\r\n { path: `/agents`, label: \"Become a YOOZ Agent\", show: true },\r\n ],\r\n },\r\n {\r\n label: \"Onboarding Documents\",\r\n show: true,\r\n path: \"\",\r\n subRoutes: [\r\n {\r\n path: `/OnboardingDocuments`,\r\n label: \"For Business\",\r\n show: true,\r\n },\r\n {\r\n path: `/AgentOnboardingDocuments`,\r\n label: \"For Agents\",\r\n show: true,\r\n },\r\n ],\r\n },\r\n ],\r\n};\r\n","import { Hidden, Menu, MenuItem } from \"@material-ui/core\";\r\nimport AppBar from \"@material-ui/core/AppBar\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport Tab from \"@material-ui/core/Tab\";\r\nimport Toolbar from \"@material-ui/core/Toolbar\";\r\nimport { makeStyles, useTheme, withStyles } from \"@material-ui/core/styles\";\r\nimport useMediaQuery from \"@material-ui/core/useMediaQuery\";\r\nimport { ExpandMore } from \"@material-ui/icons\";\r\nimport MenuIcon from \"@material-ui/icons/Menu\";\r\nimport React, { Fragment, useEffect, useState } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { Link, useLocation } from \"react-router-dom\";\r\nimport YoozSvgIcon from \"components/public-dashboard/components/yooz_svg_icon\";\r\nimport { setTabPosition } from \"components/public-dashboard/uiSlice\";\r\nimport SwipeableNavDrawer from \"./swipableNavDrawer\";\r\nimport RoutesDropdown from \"./routesDropdown\";\r\nimport {\r\n actionRoutes,\r\n quickPayRoutes,\r\n waysToPayRoutes,\r\n yoozBusinessRoutes,\r\n} from \"./constants\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n backgroundColor: theme.palette.secondary.main,\r\n },\r\n menu: {\r\n marginRight: theme.spacing(0),\r\n [theme.breakpoints.up(\"lg\")]: {\r\n marginRight: theme.spacing(2),\r\n },\r\n },\r\n actionButton: {\r\n borderRadius: 20,\r\n marginRight: theme.spacing(1),\r\n [theme.breakpoints.down(\"xs\")]: {\r\n whiteSpace: \"nowrap\",\r\n fontSize: 10,\r\n },\r\n },\r\n signupIcon: {\r\n borderRadius: 20,\r\n marginRight: theme.spacing(1),\r\n background: \"#FFF\",\r\n color: theme.palette.secondary.main,\r\n [theme.breakpoints.down(\"xs\")]: {\r\n whiteSpace: \"nowrap\",\r\n fontSize: 10,\r\n },\r\n },\r\n loginButton: {\r\n borderRadius: 20,\r\n marginRight: theme.spacing(2),\r\n },\r\n yoozLogo: {\r\n width: theme.spacing(8),\r\n height: \"100%\",\r\n // backgroundColor:theme.palette.primary.main\r\n },\r\n flex: {\r\n flexGrow: 1,\r\n },\r\n active: {\r\n color: theme.palette.primary.main,\r\n },\r\n tabs: {\r\n display: \"none\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n display: \"block\",\r\n },\r\n },\r\n indicator: {\r\n backgroundColor: \"#FFF !important\",\r\n },\r\n noIndicator: {\r\n backgroundColor: \"transparent\",\r\n },\r\n submenu1: {\r\n paddingLeft: theme.spacing(2),\r\n },\r\n submenu2: {\r\n paddingLeft: theme.spacing(5),\r\n },\r\n}));\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n \"aria-controls\": `simple-tabpanel-${index}`,\r\n };\r\n}\r\n\r\nexport default function CustomAppBar(props) {\r\n const classes = useStyles();\r\n const theme = useTheme();\r\n const [scrollPosition, setScrollPosition] = useState(0);\r\n const [open, setOpen] = React.useState(false);\r\n const xs = useMediaQuery(theme.breakpoints.down(\"xs\"));\r\n const sm = useMediaQuery(theme.breakpoints.down(\"sm\"));\r\n const dispatch = useDispatch();\r\n const location = useLocation();\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n const isMenuOpen = Boolean(anchorEl);\r\n const { tabPosition } = useSelector((state) => state.ui);\r\n const match = \"\";\r\n const isAppBarScrolled = scrollPosition > 0;\r\n\r\n const toggleDrawer = (open) => (event) => {\r\n if (\r\n event &&\r\n event.type === \"keydown\" &&\r\n (event.key === \"Tab\" || event.key === \"Shift\")\r\n ) {\r\n return;\r\n }\r\n\r\n setOpen(open);\r\n };\r\n\r\n const handleChange = (event, newValue) => {\r\n dispatch(setTabPosition(newValue));\r\n window.scrollTo(0, 0);\r\n };\r\n\r\n const handleChangeMobile = (newValue) => {\r\n dispatch(setTabPosition(newValue));\r\n window.scrollTo(0, 0);\r\n };\r\n const handleScroll = () => {\r\n setScrollPosition(window.scrollY);\r\n };\r\n\r\n const handleProfileMenuOpen = (event) => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleMenuClose = () => {\r\n setAnchorEl(null);\r\n };\r\n\r\n const menuId = \"auth-menu\";\r\n const RenderMobileAuthMenu = () => (\r\n \r\n Copyright {\"© \"}\r\n YOOZ. All Rights Reserved.\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 {selectedOTPMethod === \"sms\" && (\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 { 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","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport React from \"react\";\r\nimport {useDispatch, useSelector} from \"react-redux\";\r\nimport bg from \"assets/images/login_bg.jpg\";\r\nimport Loading from \"components/shared/loader/loader\";\r\nimport ForgotPasswordDialog from \"components/public-dashboard/features/forgot_password\";\r\nimport SmsVerificationDialog from \"components/public-dashboard/features/sms_verification\";\r\nimport LoginForm from \"./login_form\";\r\nimport {sendEmailOtp, sendOtp} from \"../../../../actions/auth\";\r\nimport {RESEND_OTP_FAILURE, RESEND_OTP_SUCCESS} from \"../../../../constants/actionTypes\";\r\nimport {showSnackBar} from \"../../../../reducers/uiGlobal\";\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 dispatch = useDispatch();\r\n const {\r\n onLogin,\r\n onChangeFormField,\r\n setForgotPwdisibility,\r\n changeUser,\r\n authReducer,\r\n loginError,\r\n setOtpType,\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 username,\r\n timeoutDuration\r\n } = props;\r\n\r\n const loading = useSelector((state) => state.uiGlobal.loading);\r\n\r\n\r\n const sendSMSOTP = (phone) =>{\r\n let cred = { phone, isVerify: true };\r\n dispatch(sendOtp(cred)).then((res) => {\r\n if (res.type === RESEND_OTP_FAILURE) {\r\n dispatch(showSnackBar({\r\n msg: \"There was an issue sending the OTP code\",\r\n type: \"error\",\r\n autoHideDuration: 30000,\r\n }))\r\n }\r\n });\r\n }\r\n\r\n const sendEmailOTP = (email, mobile) =>{\r\n dispatch( sendEmailOtp(email, mobile)).then((res) => {\r\n if (res.type === RESEND_OTP_FAILURE) {\r\n dispatch(showSnackBar({\r\n msg: \"There was an issue sending the OTP code\",\r\n type: \"error\",\r\n autoHideDuration: 30000,\r\n }))\r\n }\r\n });\r\n }\r\n function renderLoginPage() {\r\n return (\r\n \r\n {loading &&
\r\n );\r\n}\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","export default __webpack_public_path__ + \"static/media/mastercard_logo.faca5df5.png\";","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAkCAYAAADLsGk3AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAABXhJREFUeJztV3tQlFUUhyA1y4qZivJRDdPEVDPk+DW9LJtimlJnmpgxIgWxLFPEQBN1lDQgbRK1QWSALN4i8gp5P0ReyqLA8hB0eQXCAsrLXUAeu+yezr2w3353dz/6p5lmmu8382PgO+c+fveee87BykqCBAkSJEiQ8D+C7lY4aC+5gLZgnQnXw0ylF4BmFEwxMjYF2yKvwlv+OTyjL7fCxPQMfHaqBF4/mE355qFsuKlUMWPV9zVwLL0B3kD7E1vPg80XsbBwUxws354MzoH5kFenNFtPjwxIqYf3juTB27gW4bs/5IJGq+N9rOhP7QToe3JBm/8xaBKXMtQpIs0mLr7RBw9ujAOrz2Mol+9IhobOYVAO34ent13gv9t9lQgdd4wHkVl9G+1JvN0So/BATJEm67LoW9LUbyJEgMjYMOiOcuSFaEs9GPuMTg8+MdeYCT1Cy6mt8fYIPV3Dd4ddaTAyPk1tVa0D8IhnwrwirFxjoLS5n1mP3MZKv4sW/Q8nycWFxJW2gZ17BGSc+mBWTMqLc9PNoq1fDc95pfCTPbblHOTUdlNbrlzJLLQaQ0Cn11PxzgH5jM0l+DLIWu5C9+A4tPaqcWwP+MVdh66BMWY/V27dERW+9mihuBD1/Wmwxbi1cYuG6F/WUzH6sS7efvZSCzOZc2ABTM/FamjeTca286yMfh9QT8KzO1MYW2F9r+nSFuESXMyPefzLc7ACw9jw9zJ8V6JCCF47kEUdbVFM0el3QK8s4EWu/7mIn2gBvpPIIgU/ztck5KLn4p0kB4ddqYzt5d1/QlFDL70xMbT2qcFaMGZjSBlsCatg5lEOjYsLOXS+lne03xwGXbJQ+p0svGhTPG8jmWkYNzkrUgPrBCJJMpD/NcTPGZhSB7aCBEFo4xZLM1FiRQeMTmjM9rE/oYb3JVFS2zEE8WXtzByRhQpxIXIcIDwJ35MRoJnRgU/0NWbio5hGDejE2Hb0SeftT32TROPfgLFJDezAUHt4s/mDX4AJwvuPKhganeL9e/CkX9mTwftw+zPp94auYWas++lycSHkupd+a0yjSzxiaHoVhscL36XRqzegBsUvcjfelqNvOt28EOQtJZS3w5ojuYwvobVbDJzIbAKdbjbUTmU3MSk+JKeZfp/EWrXYwzjWaW+GuBCCDScuMwt5/y4zLor0mnvIBqRXsbn+w6ACEAv/8Ukt/JrdDCu82ASwBsNsEBODCt/iaix4wtvPqemBq4q7lC/h+zLYSKiP44GJCokqbmUWeRTTrOH3J79OgjKTfB988QbjfwDjm4CIERMUgO9GOGbVvkzoxaJK3oxZCLoKaBKa5O2KChlQTdLYtZS/Pz1eDNoZY3tA6sT23yoZn1RZJ7WRuhCE7QU5SZJh7mGBJCeu6FXBhpMlzBhXbG9IhvvkeLHFdcV4MLFWXAjBKnxgpoPISZETE4JsjoSSwWchxj+p8gRZ1d1zIRAHr2KF/uinQlh7rJAWVfIuhPMmV3bCpcY+2oMZa0cirMSbMqUwGdG15xOy26QuEJIG8d5c22EA6accvI2J4Bnst0iIEPx4Qf6PJ2qHmw1KrafJYWv4Fcbmf15Om0MhpzUz2GQakxHt7+YTUt0+SDdFiVmMVNLwQoWZH8nvy9Bujw0h4ZrDuTCJixFEoL/T3os0HT+E2cYaa8cDyCWe5+B5FO95poLWGxKeTXiLpK+yR19C0hEb6pQpfKKqeD9CIoQT48SUlvNPqJllYi0XlFzHKZQqM7+WXhXnF3OdZ0hWE6cX2Bu7RjjfqCrO6fsMbuGmeG6xezz3/pE8Lq6kjcPWn/er6xji9uH4PVHXKAOS6kT3li/v4f0I/+t/hyRIkCBBggQJ/yb+BhGIH/6dt/BCAAAAAElFTkSuQmCC\"","import CreditCardIcon from \"@material-ui/icons/CreditCard\";\r\nimport mastercard_logo from \"assets/images/mastercard_logo.png\";\r\nimport visa_logo from \"assets/images/visa-logo.png\";\r\nimport React from \"react\";\r\n\r\nexport function getCardType(cardNumber) {\r\n const visa = new RegExp(\"^4[0-9]{12}(?:[0-9]{3})?$\");\r\n const master = new RegExp(\r\n \"^(?:5[1-5][0-9]{2}|222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[01][0-9]|2720)[0-9]{12}$\"\r\n );\r\n\r\n if (cardNumber.match(visa)) {\r\n return \"VISA\";\r\n } else if (cardNumber.match(master)) {\r\n return \"MASTERCARD\";\r\n }\r\n\r\n return \"\";\r\n}\r\n\r\nexport function getCardTypeImage(cardNumber) {\r\n let cardType = getCardType(cardNumber);\r\n cardType = cardType.toUpperCase();\r\n switch (cardType) {\r\n case \"VISA\":\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: 0,\r\n [theme.breakpoints.up(\"md\")]: {\r\n marginTop: 0,\r\n },\r\n textTransform: \"uppercase\",\r\n },\r\n}));\r\n\r\nexport default function ContentList(props) {\r\n const { title, items, color, styles } = 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\r\n return (\r\n \");\r\n const renderTitle = () => {\r\n if (hasLineBreak) {\r\n return (\r\n
\r\n INCOME AS A\r\n \r\n
\r\n 0}\r\n component=\"fieldset\"\r\n className={applyDefaultStyles ? classes.formControl : \"\"}\r\n >\r\n I've read and agree with \r\n \r\n \r\n \r\n {error.length > 0 && error}\r\n \r\n \r\n
\r\n );\r\n}\r\n","import { Container, Grid } from \"@material-ui/core\";\r\nimport { useTheme } from \"@material-ui/core/styles\";\r\nimport React from \"react\";\r\nimport IconHeader from \"components/public-dashboard/components/iconHeader\";\r\n\r\nexport default function SignupHeader() {\r\n const theme = useTheme();\r\n\r\n return (\r\n \r\n \r\n Terms & Conditions\r\n {\" \"}\r\n and{\" \"}\r\n \r\n Privacy Policy\r\n \r\n
\r\n }\r\n />\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\nimport {checkEmailRegex} from \"components/utils\"\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 tosError: \"\",\r\n otpError: \"\",\r\n referral: \"\",\r\n isRegDisable: true,\r\n receivePromo: true,\r\n timeoutDuration: 2,\r\n\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 result = checkEmailRegex(email);\r\n return result;\r\n };\r\n\r\n validateSignUpForm = () => {\r\n const { mobNum, firstName, lastName, email, password, confirmPwd, referral, isChecked } =\r\n this.state;\r\n\r\n\r\n if (mobNum.length != 11) {\r\n this.setState({\r\n error:\r\n \"Your mobile number must be at least 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 let emailRes = this.checkEmail(email);\r\n if(!emailRes){\r\n this.setState({\r\n error:\r\n \"Email invalid. Only the following special characters are allowed period (.), underscore (_), hyphen (-).\",\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 password entries do 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 if(!isChecked){\r\n this.setState({ tosError: \"Agree to the terms and conditions.\" });\r\n return false;\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 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 receivePromo\r\n } = this.state;\r\n\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 receivePromotions: receivePromo\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 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 isChecked,\r\n receivePromo\r\n } = this.state;\r\n e.preventDefault();\r\n this.setState({ error: \"\" });\r\n this.setState({ tosError: \"\" });\r\n this.setState({ otpError: \"\" });\r\n\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 receivePromotions: receivePromo\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.setState({timeoutDuration: res.entities.user.smsCred.timeoutDuration})\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
\r\n )}\r\n \r\n x.value === value)}\r\n error={error?.length > 0}\r\n required\r\n placeholder=\"Country\"\r\n onChange={(event) => onHandleChange(event)}\r\n variant=\"outlined\"\r\n fullWidth\r\n color=\"secondary\"\r\n />\r\n
\r\n );\r\n}\r\n","import MenuItem from \"@material-ui/core/MenuItem\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\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 { countryStates, value, handleChange, error } = props;\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","import { Grid } from \"@material-ui/core\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport React, { Fragment, useRef } from \"react\";\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\nexport default function BillingAddress(props) {\r\n const classes = useStyles();\r\n const ref = useRef(null);\r\n const { errors, handleChange, addressDetails, countryStates, countries, requireMinFields = false } =\r\n props;\r\n\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 { 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 \"components/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 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, useState } from \"react\";\r\nimport MaskedCvv from \"./masked_cvv_input\";\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\nexport default function PaymentDetailsRegistered(props) {\r\n const classes = useStyles();\r\n const { setPaymentDetails, paymentDetailsState, errors, cCards, handleCardSelectedAddress } = 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 if(prop == \"customerCardId\"){\r\n handleCardSelectedAddress(event.target.value)\r\n }\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 Checkbox from \"@material-ui/core/Checkbox\";\r\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport React, { Fragment, useEffect, useState } from \"react\";\r\nimport { getToken } from \"middleware/storage\";\r\nimport { isCardDuplicate } from \"components/utils\";\r\nimport MaskedCCInput from \"./masked_cc_input\";\r\nimport MaskedCvv from \"./masked_cvv_input\";\r\nimport MaskedExpiryDate from \"./masked_expiry_date\";\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\nexport default function PaymentDetailsUnregistered(props) {\r\n const classes = useStyles();\r\n const {\r\n setPaymentDetails,\r\n paymentDetailsState,\r\n errors,\r\n addressDetails,\r\n setAddressDetails,\r\n cCards\r\n } = props;\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 if (prop === \"shouldSaveCard\") {\r\n value = event.target.checked;\r\n }\r\n\r\n if (prop === \"cardNumber\") {\r\n if (cCards.length > 0 && value.length == 16) {\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 if (prop === \"name\") {\r\n const names = extractName(value);\r\n setAddressDetails({\r\n ...addressDetails,\r\n firstName: names.firstName,\r\n lastName: names.lastName,\r\n });\r\n }\r\n };\r\n\r\n function extractName(fullName) {\r\n // Remove extra whitespace from the beginning and end of the string\r\n fullName = fullName.trim();\r\n\r\n // Check if the fullName contains only one word\r\n if (fullName.split(/\\s+/).length === 1) {\r\n // If it's a single word, consider it as the first name\r\n return {\r\n firstName: fullName,\r\n lastName: \"\", // No last name available\r\n };\r\n } else {\r\n // If it contains multiple words, split it into first name and last name\r\n const nameParts = fullName.split(/\\s+/);\r\n const lastName = nameParts.pop(); // Remove and get the last word as last name\r\n const firstName = nameParts.join(\" \"); // Join remaining words as first name\r\n return {\r\n firstName: firstName,\r\n lastName: lastName,\r\n };\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 \r\n {title}\r\n \r\n {loading && (\r\n
\r\n );\r\n}\r\n","import Button from \"@material-ui/core/Button\";\r\nimport Step from \"@material-ui/core/Step\";\r\nimport StepContent from \"@material-ui/core/StepContent\";\r\nimport StepLabel from \"@material-ui/core/StepLabel\";\r\nimport Stepper from \"@material-ui/core/Stepper\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { Alert } from \"@material-ui/lab\";\r\nimport React, { Fragment } from \"react\";\r\nimport LoaderButton from \"components/public-dashboard/components/loaderButton\";\r\nimport SomethingWentWrong from \"components/shared/ui/somethingWentWrong\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n padding: 0,\r\n },\r\n backButton: {\r\n marginRight: theme.spacing(1),\r\n borderRadius: 20,\r\n },\r\n finishButton: {\r\n float:\"right\",\r\n marginLeft: theme.spacing(1),\r\n borderRadius: 20,\r\n },\r\n instructions: {\r\n marginTop: theme.spacing(1),\r\n marginBottom: theme.spacing(1),\r\n },\r\n actionBtn: {\r\n borderRadius: 20,\r\n },\r\n actionsContainer: {\r\n float: \"right\",\r\n marginTop: theme.spacing(2),\r\n marginBottom: theme.spacing(2),\r\n },\r\n resetBtn: {\r\n float: \"right\",\r\n marginTop: theme.spacing(1),\r\n marginBottom: theme.spacing(2),\r\n borderRadius: 20,\r\n },\r\n}));\r\n\r\nexport default function BillPayMobileStepper(props) {\r\n const {\r\n steps,\r\n activeStep,\r\n getStepContent,\r\n handleNext,\r\n handleBack,\r\n handleFinish,\r\n loading,\r\n facResponse,\r\n token,\r\n dispatch,\r\n setNavIndex,\r\n setTabPosition,\r\n stepsValidated\r\n } = props;\r\n const classes = useStyles();\r\n\r\n const renderFacError = () => {\r\n if (facResponse.msg.length > 0) {\r\n return {getStepContent(index)}
\r\n {facResponse.state === \"failed\" && index == steps.length -1 && renderFacError()}
\r\n \r\n \r\n Back\r\n \r\n\r\n {/*due to current float stles on loaderbuttons etc, had to place it inbetween back and next*/}\r\n {activeStep !== steps.length - 1 && stepsValidated &&\r\n handleFinish(3)}\r\n className={classes.finishButton}\r\n >\r\n FINISH\r\n \r\n }\r\n\r\n {activeStep < steps.length - 1 &&\r\n
\r\n - \r\n {paymentDetails.cardNumber && (\r\n
- \r\n
- \r\n
- \r\n
- \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 { FormHelperText, IconButton, TextField, Typography, useTheme } from \"@material-ui/core\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport React from \"react\";\r\nimport WarningIcon from \"@material-ui/icons/ReportProblemOutlined\";\r\nimport NumberFormat from \"react-number-format\";\r\nimport { amber } from \"@material-ui/core/colors\";\r\n\r\n\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 disclaimer: {\r\n marginTop: theme.spacing(1),\r\n color: theme.palette.text.secondary,\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 : null}\r\n InputProps={{\r\n inputComponent: NumberFormatCustom,\r\n }}\r\n color=\"secondary\"\r\n disabled={disabled}\r\n FormHelperTextProps={{ // Pass props to FormHelperText\r\n style: { color: helperTextColor }, // Apply text color\r\n }}\r\n />\r\n\r\n {helperText && (\r\n \r\n {helperText}\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 { 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 \"components/secured-app/uiSlice\";\r\nimport SomethingWentWrong from \"components/shared/ui/somethingWentWrong\";\r\nimport { setTabPosition } from \"components/public-dashboard/uiSlice\";\r\nimport PhoneNumber from \"components/shared/billing_address/masked_phone_number\";\r\nimport { setTxnDetails, setAddressDetails, resetTxn } from \"components/public-dashboard/features/billpay/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 const [customerFeeDisclaimer, setCustomerFeeDisclaimerText] = 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((p) => p.providerId === event.target.value);\r\n \r\n if (provider) {\r\n setHelperText(provider.accountHelperMessage);\r\n setHelperDisclaimerText(provider.accountDisclaimerMessage);\r\n if ((provider.customerCardRate || provider.customerFee) > 0) {\r\n //setCustomerFeeDisclaimerText(provider.customerFeesDisclaimer);\r\n updateTxnDetails({ ...txnDetails, customerFeesDisclaimer: provider.customerFeesDisclaimer, customerCardRate: provider.customerCardRate, customerFee: provider.customerFee, [prop]: event.target.value });\r\n }else {\r\n setCustomerFeeDisclaimerText(\"\");\r\n }\r\n }\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 \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 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 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 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 let { isValid, errors } = await runValidations();\r\n if (isValid) {\r\n handleStepChange(step);\r\n return;\r\n }\r\n setErrors(errors);\r\n }}\r\n handleReset={handleReset}\r\n getStepContent={getStepContent}\r\n facResponse={facResponse}\r\n loading={loading}\r\n setFacResponse={setFacResponse}\r\n token={token}\r\n dispatch={dispatch}\r\n setNavIndex={setNavIndex}\r\n setTabPosition={setTabPosition}\r\n />\r\n {activeStep === steps.length - 1 && (\r\n \r\n \r\n \r\n SUBMIT\r\n \r\n \r\n \r\n )}\r\n {activeStep === steps.length && (\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});\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 \r\n \r\n New Transaction\r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n Look for the YOOZ sign at your nearby shop, supermarket or pharmacy.\r\n
\r\n It’s quick and easy! \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/scan2pay_banner.d67976ac.png\";","export default __webpack_public_path__ + \"static/media/home_content_6.24f235cc.png\";","import { Container, Grid, useMediaQuery } from \"@material-ui/core\";\r\nimport { makeStyles, useTheme } from \"@material-ui/core/styles\";\r\nimport React from \"react\";\r\nimport { useDispatch } from \"react-redux\";\r\nimport signUp_img from \"assets/images/home_content_6.png\";\r\nimport ContentList from \"components/public-dashboard/components/contentList\";\r\nimport { API_ROOT } from \"constants/actionTypes\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n img: {\r\n marginTop: theme.spacing(3),\r\n marginBottom: theme.spacing(3),\r\n },\r\n\r\n videoContainer: {\r\n paddingLeft: 50,\r\n },\r\n\r\n yoozBlueLink: {\r\n color: \"#00AFE2\",\r\n },\r\n}));\r\n\r\nexport default function Scan2PayContent() {\r\n const classes = useStyles();\r\n const theme = useTheme();\r\n const sm = useMediaQuery(theme.breakpoints.up(\"sm\"));\r\n const xs = useMediaQuery(theme.breakpoints.down(\"sm\"));\r\n const md = useMediaQuery(theme.breakpoints.up(\"md\"));\r\n\r\n const dispatch = useDispatch();\r\n const listItems = [\r\n \r\n We give you your unique, secure{\" \"}\r\n YOOZ QR Code{\" \"}\r\n and{\" \"}\r\n \r\n YOOZ Payment Link\r\n \r\n .\r\n ,\r\n \"Display the Code anywhere you sell: in-store, pop-up market, online, social media.\",\r\n \"Share the Link via all virtual sales channels e.g. WhatsApp.\",\r\n \"When the customer scans the code or clicks the link, they are taken to our secure payment portal with your store name prefilled.\",\r\n \"There they can enter their card details to pay.\",\r\n \"Once the transaction is successful both you and the customer immediately receive an e-receipt.\",\r\n \"At that point you can hand over the goods/service.\",\r\n ];\r\n return (\r\n \r\n
\r\n\r\n\r\n Collections are remitted via ACH at a cost of $1.00 per bulk\r\n transfer, 3 business days after transactions are made.\r\n\r\n ,\r\n ]}\r\n />\r\n
- \r\n
- \r\n ✓ No APP\r\n Downloads required\r\n \r\n
- \r\n ✓ No sign up\r\n necessary\r\n \r\n\r\n
\r\n
\r\n YOOZ is actually the most comprehensive digital{\" \"}\r\n payment service that lets you Top Up, Pay Bills and Collect Payments\r\n Online, and at Authorized Agent locations.\r\n \r\n
\r\n
\r\n Top Up your mobile phone or someone else’s on any network and Pay\r\n Bills and invoices for a variety of utilities and vendors.\r\n
\r\n
\r\n YOOZ Online
\r\n You can Top Up & Pay Bills using the Quick Pay option, no sign-up\r\n necessary. Or you can sign up FREE and create a secure Login Account\r\n where you can make payments, save card details, and keep track of\r\n all your payments and account info, making payments easier and\r\n faster.\r\n
\r\n
\r\n YOOZ Agents
\r\n There are over 1,000 authorised YOOZ Agents located throughout Trinidad and Tobago. Look out for the YOOZ Authorised\r\n Agent sticker at your nearby shop, supermarket, or pharmacy within\r\n your community.\r\n
\r\n
\r\n We’re always adding new utilities and merchants, so stay tuned!\r\n \r\n
\r\n
\r\n Payments to some of our Bill Payment\r\n Payees (Service Providers) on{\" \"}\r\n YOOZ Online may include online payment\r\n processing and transaction fees. The\r\n inclusion of these fees is at the discretion of\r\n the Payee (Service Provider) you are paying.\r\n Fees will be displayed as Transaction Fees{\" \"}\r\n just above the Total in the Payment Review\r\n section, before you Submit your payment to\r\n be processed. If you do have questions\r\n regarding the fees, please feel free to contact\r\n your Service Provider.\r\n
\r\n
\r\n YOOZ Bill Payment Agents may charge a\r\n convenience fee up to $5.00 for bill payments to\r\n Service Providers on our YOOZ Agent Network listing.\r\n \r\n
\r\n
\r\n To have quick access to our YOOZ Online service on your\r\n mobile phone, follow the steps below (based on your device). This\r\n will save the YOOZ website as an app icon on your phone.\r\n Whenever you need to Pay a Bill or Top Up, simply click on it and\r\n proceed to our Quick Pay or Login tabs on our website.\r\n
\r\n
\r\n Android:\r\n
- \r\n
- \r\n Visit our site:{\" \"}\r\n \r\n https://portal.yoozit.today/ {\" \"}\r\n {\" \"}\r\n \r\n
- Click on the 3 vertical buttons on the right of browser. \r\n
- A drop-down menu will appear. \r\n
- Click on “Install App”. \r\n
- Click “Install”. \r\n
\r\n iPhone:\r\n
- \r\n
- \r\n Visit our site:{\" \"}\r\n \r\n https://portal.yoozit.today/ {\" \"}\r\n {\" \"}\r\n \r\n
- Click on the Share button at bottom of screen. \r\n
- Click on “Add to Home Screen”. \r\n
\r\n \r\n
\r\n
\r\n YOOZ Agents only accept Cash and Visa Debit Card payments.\r\n
\r\n \r\n
\r\n
\r\n No need to register! Just follow the steps to enter your payment\r\n information and you’re done!\r\n
\r\n
\r\n
\r\n Click LOGIN found on top menu bar. If not already a registered user,\r\n head to{\" \"}\r\n \r\n SIGNUP\r\n {\" \"}\r\n page and create a profile. Once logged in click on Bill Pay tab,\r\n enter payment details and click submit. This option allows you to\r\n track all payments made on YOOZ Online. You can also save your card\r\n details, making it easier and faster to use for future transactions.\r\n \r\n
\r\n Minimum payment per transaction - $25\r\n
\r\n Maximum payment per transaction - $5,000 per Scan2Pay merchant{\" \"}\r\n
\r\n Maximum payment per transaction - $20,000 per utility/service\r\n provider
\r\n *Exceptions may apply based on the Service Provider
\r\n
\r\n
\r\n YOOZ Agent
\r\n Minimum payment per transaction - $5
\r\n Maximum payment per transaction - $5,000
\r\n *Exceptions may apply based on the Service Provider
\r\n \r\n
\r\n You will receive a Successful Transaction receipt via email\r\n for Online transactions.\r\n
\r\n
\r\n YOOZ Agent\r\n
\r\n You will receive a printed receipt for Agent transactions.\r\n \r\n
\r\n
\r\n Yes. Check to ensure you entered the correct card number, CVV number\r\n and that you have funds on your card, then try again.\r\n
\r\n
\r\n You can refer to our SECURITY section for more on this.\r\n \r\n
\r\n
\r\n No need to Sign-up! Just follow the steps to enter your payment\r\n information and you’re done!\r\n
\r\n
\r\n
\r\n
\r\n Click LOGIN found on top menu bar. If not already a registered user,\r\n head to{\" \"}\r\n \r\n SIGNUP\r\n {\" \"}\r\n page and create a profile. Once logged in click on Top Up tab, enter\r\n payment details and click submit. This option allows you to track\r\n all payments made on YOOZ Online. You can also save your card\r\n details, making it easier and faster to use for future transactions.\r\n \r\n
\r\n Minimum Top Up per transaction - $60
\r\n Maximum Top Up per transaction - $600
\r\n
\r\n YOOZ Agent
\r\n Minimum Top Up per transaction – Digicel $13.33 | Bmobile $15.00{\" \"}\r\n
\r\n Maximum Top Up per transaction – Digicel & Bmobile $511.11
\r\n
\r\n \r\n All prices are subject to 12.5% VAT.\r\n \r\n
\r\n \r\n
\r\n
\r\n In the event you did Top Up the wrong number please contact your\r\n Carrier (Bmobile or Digicel), inform them of the error and request a\r\n reversal. We recommend that this be done immediately as the Carrier\r\n will not be able to reverse the funds if the Top Up is used by the\r\n number that received it.\r\n \r\n
\r\n You will receive a Successful Transaction receipt via email.\r\n
\r\n
\r\n YOOZ Agent\r\n
\r\n Pin Top Ups - you will receive a printed receipt.
\r\n Direct Top Ups - these are confirmed via an SMS message on your\r\n phone.\r\n \r\n
\r\n
\r\n Yes. Check to ensure you entered the correct card number, CVV number\r\n and that you have funds on your card, then try again.\r\n
\r\n
\r\n You can refer to our SECURITY section for more on this.\r\n \r\n
- \r\n
- Your YOOZ registered number (if registered) \r\n
- \r\n The phone number you were topping up (if different from your\r\n registered number){\" \"}\r\n \r\n
- Transaction amount \r\n
- \r\n Supporting documents showing the deductions on your account.{\" \"}\r\n \r\n
\r\n
\r\n You can click on link above or on SIGNUP tab found on top menu bar.\r\n
\r\n
\r\n You will need:\r\n
- \r\n
- Email Address \r\n
- Phone Number \r\n
\r\n
\r\n You must enter that OTP number on the SIGNUP Verification Page to\r\n gain access to your account.\r\n \r\n
\r\n
\r\n You must enter that OTP number on the LOGIN Verification Page to\r\n gain access to your account.\r\n
\r\n
\r\n You have 120 seconds to enter the code before it becomes invalid.\r\n
\r\n
\r\n If you are unable to submit the code in time you can click on RESEND\r\n CODE on the LOGIN Verification Page, to request another code. .\r\n \r\n
\r\n YOOZ has no access to your bank account data.\r\n \r\n
\r\n
\r\n For each bank card you save, it is recommended that you save the\r\n phone number that your bank has on file for you.\r\n \r\n
\r\n
\r\n Remember, the email entered to reset your password must be the same\r\n as the one entered on sign-up. If you have forgotten that email, no\r\n problem at all, simply contact us as stated above.\r\n \r\n\r\n
\r\n
\r\n The referral code is a reference for 2 reasons. Sometimes we run\r\n registration promotions and to qualify for a prize we give you a\r\n referral code, which you can enter on sign-up.\r\n
\r\n
\r\n If you are signing up and did not receive a referral code, just tell\r\n us where you heard about us. This helps us understand where you\r\n heard about us, so we can continue to communicate with you there,\r\n allowing us to share all our latest innovations that will make your\r\n payments simpler, faster and more secure.\r\n \r\n
\r\n
\r\n Our system safeguards your transaction data while making the\r\n payment process smoother and easier for you. It also monitors\r\n suspicious\r\n
\r\n transactions online and sends real-time alerts on any suspicious\r\n or potentially fraudulent transactions.\r\n {/*
\r\n This number provides added security and providing it when doing\r\n online transactions verifies that the card is physically available\r\n with the\r\n
\r\n individual using it during the transaction.\r\n \r\n
\r\n
\r\n YOOZ collaborates with your bank to verify that the person using\r\n your card to make the online purchase, is in fact you.\r\n \r\n
- \r\n
- \r\n On the YOOZ Payment page‚ you enter the transaction details,\r\n your bank card information and click submit.{\" \"}\r\n \r\n
- \r\n YOOZ through its payment processor First Atlantic Commerce\r\n (FAC) codes the data and submits it to your bank.\r\n \r\n
- \r\n Your bank analyses the transaction details along with the\r\n information you would have given them previously e.g.\r\n
\r\n email address, phone number, billing address or previous online\r\n transaction history using the card.\r\n \r\n - \r\n If your bank is satisfied that the person making the purchase, is\r\n you, they Approve the transaction.\r\n \r\n
- \r\n If the bank is not satisfied, they may send a request, known as\r\n a Challenge (within the YOOZ payment page) to ask you to verify\r\n your identity.\r\n \r\n
- \r\n If you respond correctly your bank approves the transaction.\r\n \r\n
- \r\n If your bank is not satisfied, or believes they need more\r\n information from you they will not authorise the transaction.\r\n \r\n
- \r\n Only when YOOZ gets approval from your bank‚ do we charge your\r\n card.\r\n \r\n
\r\n
\r\n All card data entered, is coded (tokenized) and then shared with\r\n your bank. Only your bank can de-code.\r\n
\r\n
\r\n YOOZ has no access to your bank account data.\r\n \r\n
\r\n
\r\n The more information sent to your bank to verify your identity\r\n allows for faster and smoother approval of the transaction. Less\r\n Challenges/Failures.\r\n
\r\n
\r\n This is optional to fill out.\r\n \r\n
- \r\n
- \r\n It will be an ID that you already know e.g. A password, pin,\r\n fingerprint (previously saved with your bank){\" \"}\r\n \r\n
- \r\n It will be a verification code e.g. One Time Passcode (OTP) that\r\n you receive from your bank‚ during the transaction. It will be\r\n sent via email or SMS to the email address or phone number you\r\n gave to your bank previously.{\" \"}\r\n \r\n
OR
\r\n
- \r\n
- \r\n No. Your bank sends the request within the YOOZ payment page.{\" \"}\r\n \r\n
- \r\n You simply answer the Challenge (following your bank’s\r\n instructions) within the YOOZ payment page.{\" \"}\r\n \r\n
- \r\n If you need to access your email for the OTP code (sent by your\r\n bank), you will have to open it in a new browser tab.{\" \"}\r\n \r\n
- \r\n If you “go back” or leave the YOOZ payment page to access your\r\n email in the same browser, the transaction will end, and you\r\n will have to restart.{\" \"}\r\n \r\n
\r\n
\r\n Some may be within your control and can be quickly resolved:\r\n
- \r\n
- \r\n Poor or lost internet service while attempting to make the\r\n payment{\" \"}\r\n \r\n
- \r\n Accidentally leaving the payment page while the transaction was\r\n processing{\" \"}\r\n \r\n
- \r\n Incorrect card details were entered, such as Card Number, Expiry\r\n Date, CVV, as well as Billing Address.{\" \"}\r\n \r\n
- \r\n
- Expired credit card \r\n
- Insufficient funds or funds on hold \r\n
- \r\n Failed authentication of cardholder identity –{\" \"}\r\n \r\n you may need to provide your bank with updated contact\r\n details.\r\n \r\n \r\n
- \r\n Your bank declined the transaction for a reason unknown to us.\r\n \r\n
- \r\n Your Bank card is not 3D Secure enabled -{\" \"}\r\n \r\n Not all bank cards are equipped to transact on sites that have\r\n the latest safety protocols in place. Ask your bank for a 3D\r\n Secure 2 enabled card so you can transact safely online.{\" \"}\r\n \r\n \r\n
\r\n
\r\n Or call your bank to:\r\n
- \r\n
- enquire on why the transaction failed \r\n
- provide your bank with updated contact details \r\n
- verify the status of the card \r\n
- \r\n ask your bank for a 3D Secure 2 enabled card so you can transact\r\n safely online.{\" \"}\r\n \r\n
\r\n
\r\n The “hold” is sometimes applied when you attempt to do online\r\n transactions. It prevents transactions from being processed, leading\r\n to a failed transaction.\r\n \r\n
- \r\n
- \r\n Find out if your card is 3D Secure 2 enabled. If not‚ request a\r\n 3DSecure2 enabled card.{\" \"}\r\n \r\n
- \r\n Find out if there is a “hold” on your card. Advise them‚ you are\r\n attempting to make a transaction using YOOZ and request they\r\n remove the “hold”.{\" \"}\r\n \r\n
- \r\n During this call, your bank may request further information from\r\n you that will help make the processing of online transactions\r\n faster with limited/no interruptions in the future e.g. confirm\r\n your phone number.{\" \"}\r\n \r\n
\r\n
\r\n The more accurate information submitted leads to more approvals and\r\n faster transactions.\r\n
\r\n
\r\n Feel confident knowing your transactions on YOOZ are always safe.\r\n \r\n
\r\n
\r\n YOOZ Online\r\n
\r\n
\r\n Collect payments quickly, easily and securely on our YOOZ Online\r\n payment platform.\r\n
\r\n
\r\n YOOZ Scan2Pay \r\n
\r\n
\r\n Accept payments online with a YOOZ QR Code and Payment Link unique to your\r\n business and avoid the hassle of terminals and online transfers. No\r\n website, no problem, YOOZ Scan2Pay moves your business online with one click.\r\n
\r\n
\r\n YOOZ Payment Gateway \r\n
\r\n
\r\n This secure Payment Gateway equips your website\r\n or e-commerce ready site to accept card payments on checkout\r\n without the hassle of compliance and processing requirements.\r\n\r\n
\r\n
\r\n YOOZ Bill Pay Agents \r\n
\r\n
\r\n Collect payments from your customers via any of our 150+ Authorized\r\n YOOZ Bill Payment Agents located throughout Trinidad and Tobago.\r\n \r\n
\r\n
\r\n Sole Trader\r\n
\r\n
\r\n Limited Liability\r\n
\r\n
\r\n Charity/NGO– Link to Docs\r\n
\r\n
\r\n School/Alumni Association\r\n \r\n
\r\n
\r\n There are varying KYC document requirements based on the business\r\n structure.\r\n
\r\n
\r\n Due diligence on business entities is required for the monitoring of\r\n Anti-Money Laundering (AML) and Combatting the Financing of\r\n Terrorism (CFT) as per the Financial Obligations Regulations and the\r\n Central Bank of Trinidad and Tobago (CBTT) AML/CFT Guidelines.\r\n
\r\n
\r\n As part of YOOZ’s procedure to meet these mandatory CBTT/FIU\r\n requirements for AML/CFT, all authorized signatories, directors and\r\n beneficial owners are required to provide two forms of\r\n identification and proof of residential address.\r\n
\r\n
\r\n In terms of gathering information related to the directors,\r\n beneficial owners and authorised signatories, this information can\r\n be provided by the Company Secretary, or any person authorized by\r\n the company to do so.\r\n
\r\n
\r\n \r\n
\r\n
\r\n As a Bill Payment merchant that uses our YOOZ Online and YOOZ Agents\r\n services, you are provided with transaction reports of all payments\r\n made to you by your customers. You can be informed of these\r\n transactions as follows:\r\n
- \r\n
- \r\n FTP – File Transfer Protocol – periodically based on agreed\r\n delivery timeline.\r\n \r\n
- \r\n Website API Integration – payments are automatically applied in\r\n real time, directly to your customers’ account and invoices.\r\n \r\n
\r\n
\r\n YOOZ Scan2Pay merchants will receive confirmation of\r\n successful payment via an emailed receipt. This receipt can be used\r\n to reconcile. You can also encourage your customers to send you a\r\n screen shot of their receipt. We presently do not provide\r\n transaction reports for this service.\r\n \r\n
SUCCESSFUL TRANSACTION
\r\n \r\n- \r\n
- \r\n When a transaction is successful, e-mails are sent\r\n simultaneously to both you the merchant and the paying customer\r\n confirming you got paid and the transaction was successful.\r\n \r\n
- \r\n You will receive an email from YOOZ with the header{\" \"}\r\n “You Got Paid”.\r\n \r\n
- \r\n All successful transactions will have a transaction number and\r\n an authorization number.\r\n \r\n
\r\n
\r\n
\r\n \r\n
UNSUCCESSFUL TRANSACTION
\r\n \r\n- \r\n
- \r\n When a transaction is unsuccessful, the customer will recieve an\r\n email with the header{\" \"}\r\n \r\n “Your attempted transaction was unsuccessful.”.\r\n \r\n \r\n
- The authorization number will be blank. \r\n
- \r\n You (the merchant) will{\" \"}\r\n \r\n not\r\n {\" \"}\r\n receive any e-mail receipts from YOOZ.\r\n \r\n
- \r\n If the transaction is unsuccessful you can ask your customer to\r\n try again.\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n Goods/services should only be delivered when you receive the\r\n e-mail receipt with “You Got Paid” header and the authorization\r\n number included.\r\n \r\n
\r\n
\r\n
MERCHANT successful transaction email sent to you
\r\nCUSTOMER successful transaction e-mail receipt
\r\n\r\n FTP: Daily. Can be done as frequently as every 5 minutes.
\r\n Email: Scan2Pay Merchants receive e-mail confirmation on each\r\n successful transaction.
\r\n \r\n
\r\n \r\n
- \r\n
- Physical Business Location \r\n
- Internet access at the location \r\n
- \r\n Functional Point of Sale (POS), laptop or desktop system, for\r\n those that prefer to sell off their own devices.{\" \"}\r\n \r\n
- \r\n Any Android device, for customers interested in our Direct Top\r\n Up (DTU) service.{\" \"}\r\n \r\n
\r\n Optional\r\n
\r\n
\r\n
- \r\n
- A physical location - Brick & Mortar Store \r\n
- Internet access at the location \r\n
- A computer device (Laptop, Desktop, Point of Sale device) \r\n
- A thermal receipt printer \r\n
\r\n To register you will need to provide:\r\n
- \r\n
- A National ID \r\n
- Proof of Address - Utility Bill in your name \r\n
- \r\n Business Registration Certificate (if business is registered){\" \"}\r\n \r\n
\r\n
\r\n On our website we provide both an Agent listing of\r\n our Bill Pay Agents as well as a Google map so customers can\r\n search for an Agent in their preferred area.\r\n
\r\n Every month we promote Agents\r\n on our social media pages.\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 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 ANYWHERE, ANYTIME
\r\n ,\r\n \r\n It's convenient, safe and easy!
\r\n No lines! No problems!\r\n ,\r\n ]}\r\n />\r\n }\r\n img={yoozIt_img}\r\n />\r\n {xs &&\r\n Pay major utilities or purchase goods and services wherever\r\n you are.\r\n ,\r\n \r\n
\r\n Payment Method – Credit Cards & Visa Debit Cards \r\n ,\r\n
\r\n The Safe, Easy, Contactless Way to PAY for your favourite\r\n goods and services, instore (QR Code) or wherever you are\r\n (Payment Link).\r\n ,\r\n \r\n
\r\n Payment Method – Cash or Debit Card\r\n
\r\n Visit a{\" \"}\r\n\r\n location{\" \"}\r\n {\" \"}\r\n near you and pay your bill with cash or debit card.\r\n ,\r\n ]}\r\n />\r\n }\r\n img={billPay_img}\r\n />\r\n {xs && \r\n Top Up any B-Mobile or{\" \"}\r\n Digicel Prepaid phone, yours or someone\r\n else’s…anywhere, anytime…at NO EXTRA COST.\r\n ,\r\n \r\n
\r\n\r\n Payment Method – Credit Cards & Visa Debit Cards {\" \"}\r\n
\r\n \r\n FREE SERVICE\r\n \r\n ,\r\n
\r\n Payment Method – Cash or Debit Card\r\n
\r\n Visit a location near you and top up. Look out for the YOOZ\r\n Authorised Agent sticker at a shop, supermarket or pharmacy\r\n within your community.\r\n ,\r\n ]}\r\n />\r\n }\r\n img={topUp_img}\r\n />\r\n {xs &&\r\n Looking for safe, convenient, affordable ways for your\r\n customers and clients to pay? If the answer is YES, the answer\r\n is YOOZ.\r\n ,\r\n \r\n Expand your earning potential and connect with your customers\r\n and partners wherever they are.\r\n ,\r\n \r\n Cash or card, debit or credit, Agent network or Online, our\r\n extensive payment channel offering, caters to the needs and\r\n means of your customers. View all the ways you can{\" \"}\r\n \r\n {\" \"}\r\n Collect Payments{\" \"}\r\n \r\n here.\r\n ,\r\n ]}\r\n />\r\n }\r\n img={getpPaid_img}\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 ANYWHERE, ANYTIME
\r\n ,\r\n \r\n It's convenient, safe and easy!
\r\n No lines! No problems!\r\n ,\r\n ]}\r\n />\r\n }\r\n img={yoozIt_img}\r\n />\r\n {xs &&
\r\n Payment Method – Credit Cards & Visa Debit Cards \r\n ,\r\n
- \r\n
- \r\n \r\n
\r\n No need to sign up... just pay!\r\n \r\n \r\n - \r\n \r\n
{\" \"}\r\n
\r\n \r\n
\r\n The Safe, Easy, Contactless Way to PAY for your favourite\r\n goods and services, instore (QR Code) or wherever you are\r\n (Payment Link).\r\n ,\r\n \r\n
\r\n Payment Method – Cash or Debit Card\r\n
\r\n Visit a{\" \"}\r\n
\r\n\r\n Payment Method – Credit Cards & Visa Debit Cards {\" \"}\r\n
\r\n \r\n FREE SERVICE\r\n \r\n ,\r\n
- \r\n
- \r\n \r\n
\r\n No need to sign up... just top up!\r\n \r\n \r\n - \r\n \r\n
{\" \"}\r\n
\r\n \r\n
\r\n Payment Method – Cash or Debit Card\r\n
\r\n Visit a location near you and top up. Look out for the YOOZ\r\n Authorised Agent sticker at a shop, supermarket or pharmacy\r\n within your community.\r\n ,\r\n ]}\r\n />\r\n }\r\n img={topUp_img}\r\n />\r\n {xs &&
\r\n
\r\n \r\n
\r\n ))}\r\n \r\n );\r\n}\r\n","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 GATEWAY\",\r\n color: \"#A43168\",\r\n img: yooz_payments,\r\n lines: [\r\n \r\n Boost your business and start accepting payments online by\r\n integrating the\r\n
\r\n With over 900 YOOZ Agents located nationwide, you can Top Up at an easily accessible location within your very own community.\r\n
\r\n Look for the YOOZ sign at your nearby shop, supermarket or pharmacy. \r\n
\r\n It’s quick and easy! \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 \"components/public-dashboard/services/api_util\";\r\nimport { setAnonTokenApi } from \"components/public-dashboard/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(\r\n `${API_ROOT}topup/getVat?countryId=` + countryId\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 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(\r\n `${API_ROOT}public/country/${countryCode}/states`\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 fetchPhoneProviders = createAsyncThunk(\r\n \"topup/GetPhoneProviders\",\r\n async (thunkAPI, { getState, requestId }) => {\r\n const response = await getAsync(`${API_ROOT}topup/GetPhoneProviders`);\r\n if (response.state === 1) {\r\n return response.data;\r\n }\r\n return [];\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 phoneProviders: [],\r\n};\r\n\r\nconst cleanState = {\r\n txnDetails: {\r\n country: {\r\n countryId: 1,\r\n },\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: \"780\",\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 topupCountries: [],\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 phoneProviders: [],\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: \"780\",\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 resetFromStep(state, action) {\r\n state.activeStep = action.payload;\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 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.topupCountries = [...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 [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 [fetchPhoneProviders.pending]: (state, action) => {\r\n state.phoneProviders = [];\r\n },\r\n [fetchPhoneProviders.fulfilled]: (state, action) => {\r\n state.phoneProviders = [...action.payload];\r\n },\r\n [fetchPhoneProviders.rejected]: (state, action) => {\r\n state.error = action.error;\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 resetFromStep,\r\n setValidatedSteps,\r\n resetBilling,\r\n} = topupSlice.actions;\r\n\r\nexport default topupSlice.reducer;\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { connect, useDispatch } from \"react-redux\";\r\nimport BillingAddress from \"components/shared/billing_address\";\r\nimport { addValidatedStep, fetchAddressStates, setActiveStep, setAddressDetails } from \"components/public-dashboard/features/topup/topupSlice\";\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\nfunction TopupBillingAddress(props) {\r\n const { setAddressDetails, addressDetailsState } = props;\r\n const [addressDetails, updateAddressDetails] = useState(addressDetailsState);\r\n const { countryCode } = addressDetails;\r\n const [countryStates, setStates] = useState([]);\r\n const dispatch = useDispatch();\r\n\r\n useEffect(() => {\r\n fetchStatesByCountryCode(countryCode);\r\n dispatch(addValidatedStep(4));\r\n }, [countryCode]);\r\n\r\n async function fetchStatesByCountryCode(countryCode) {\r\n if (countryCode > 0) {\r\n const result = await dispatch(fetchAddressStates(countryCode));\r\n setStates(result.payload);\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 {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, useLayoutEffect, useState } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { getToken } from \"middleware/storage\";\r\nimport { setNavIndex } from \"components/secured-app/uiSlice\";\r\nimport SomethingWentWrong from \"components/shared/ui/somethingWentWrong\";\r\nimport { setTabPosition } from \"components/public-dashboard/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 { topupCountries: countries, txnDetails, activeStep, loading } = useSelector(\r\n (state) => state.topup\r\n );\r\n useLayoutEffect(() => {\r\n const loadCountries = () => {\r\n try {\r\n 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(0);\r\n const [error, setError] = useState(\"\");\r\n\r\n useEffect(() => {\r\n if (txnDetails.country.countryId > 0 && countries.length > 0 && value == 0) {\r\n selectCountry(txnDetails.country.countryId);\r\n }\r\n }, [countries]);\r\n\r\n\r\n\r\n const handleChange = (e) => {\r\n const countryId = e.target.value;\r\n selectCountry(countryId);\r\n };\r\n\r\n const selectCountry = (countryId) => {\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 {checkEmailRegex} from \"components/utils\"\r\n\r\nimport {\r\n addValidatedStep,\r\n setErrors,\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, errors } = 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\r\n\r\n const handleChange = (e) => {\r\n const email = e.target.value;\r\n setValue(email);\r\n if (email === \"\") {\r\n dispatch(setErrors({...errors, email: \"Email cannot be empty\"}));\r\n dispatch(removeValidatedStep(activeStep));\r\n } else if (!checkEmailRegex(email)\r\n ) {\r\n dispatch(setErrors({...errors, email: \"Invalid email address.\"}));\r\n dispatch(removeValidatedStep(activeStep));\r\n }\r\n\r\n if (checkEmailRegex(email)) {\r\n dispatch(dispatch(setErrors({ ...errors, email: \"\" })));\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 return (\r\n \r\n 0 ? errors.email : \"\"}\r\n variant=\"outlined\"\r\n fullWidth\r\n value={value}\r\n onChange={handleChange}\r\n className={classes.formControl}\r\n error={errors.email.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 \"components/public-dashboard/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 { Button } from \"@material-ui/core\";\r\nimport React, { Fragment, useLayoutEffect, useState } from \"react\";\r\nimport { connect, useDispatch, useSelector } from \"react-redux\";\r\nimport { getToken } from \"middleware/storage\";\r\nimport PaymentDetailsRegistered from \"components/shared/payments/PaymentDetailsRegistered\";\r\nimport PaymentDetailsUnregistered from \"components/shared/payments/PaymentDetailsUnregistered\";\r\nimport {\r\n addValidatedStep,\r\n fetchCC,\r\n resetBilling,\r\n setAddressDetails,\r\n setPaymentDetails,\r\n toggleCCForm\r\n} from \"components/public-dashboard/features/topup/topupSlice\";\r\n\r\nfunction PaymentDetails(props) {\r\n const {\r\n showCCForm,\r\n setPaymentDetails,\r\n toggleCCForm,\r\n cCards,\r\n resetBilling,\r\n setAddressDetails,\r\n } = props;\r\n\r\n const [loggedIn, SetLogin] = useState(false);\r\n const dispatch = useDispatch();\r\n const { activeStep } = useSelector((state) => state.topup);\r\n\r\n useLayoutEffect(() => {\r\n dispatch(addValidatedStep(activeStep));\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 fetchCards();\r\n }\r\n }\r\n\r\n function fetchCards() {\r\n dispatch(fetchCC());\r\n }\r\n\r\n validateLogin();\r\n }, []);\r\n\r\n function togglerRegistered() {\r\n const resetPayment = {\r\n name: \"\",\r\n cardNumber: \"\",\r\n expirationDate: \"\",\r\n cvv: \"\",\r\n customerCardId: 0,\r\n shouldSaveCard: false,\r\n };\r\n setPaymentDetails(resetPayment);\r\n resetBilling();\r\n toggleCCForm(!showCCForm);\r\n }\r\n\r\n const 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: \"780\",\r\n emailAddress: \"\",\r\n phoneNumber: \"1868\",\r\n };\r\n\r\n const handleCardSelectedAddress = (customerCardId) => {\r\n for (var i = 0; i < cCards.length; i++) {\r\n if (cCards[i].customerCardId === customerCardId) {\r\n if (cCards[i].billingAddress.id != 0) {\r\n const updatedAddressDetails = {\r\n ...cCards[i].billingAddress,\r\n };\r\n\r\n setAddressDetails(updatedAddressDetails);\r\n break;\r\n } else {\r\n setAddressDetails(cleanAddress);\r\n break;\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 {phoneProviders.map((carrier) => (\r\n \r\n handleChange(carrier)}\r\n selected={selectedCarrier}\r\n handleValidateNext={handleValidateNext}\r\n invalidateStep={invalidateStep}\r\n />\r\n \r\n ))}\r\n \r\n
\r\n );\r\n}","import Button from \"@material-ui/core/Button\";\r\nimport Paper from \"@material-ui/core/Paper\";\r\nimport Step from \"@material-ui/core/Step\";\r\nimport StepContent from \"@material-ui/core/StepContent\";\r\nimport StepLabel from \"@material-ui/core/StepLabel\";\r\nimport Stepper from \"@material-ui/core/Stepper\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { Alert } from \"@material-ui/lab\";\r\nimport { postAsync } from \"components/public-dashboard/services/api_util\";\r\nimport { setTabPosition } from \"components/public-dashboard/uiSlice\";\r\nimport { setNavIndex } from \"components/secured-app/uiSlice\";\r\nimport TxnResult from \"components/shared/txn_result\";\r\nimport SomethingWentWrong from \"components/shared/ui/somethingWentWrong\";\r\nimport { getCardType, isValidateExpDate } from \"components/utils\";\r\nimport { API_ROOT } from \"constants/actionTypes\";\r\nimport { getToken } from \"middleware/storage\";\r\nimport React, { useRef, useState } from \"react\";\r\nimport { useGoogleReCaptcha } from \"react-google-recaptcha-v3\";\r\nimport NumberFormat from \"react-number-format\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport AddressForm from \"./address_details\";\r\nimport AmountSelector from \"./amount_selector\";\r\nimport CountrySelector from \"./country_selector\";\r\nimport DonationEntry from \"./enter_donation_amount\";\r\nimport EmailEntry from \"./enter_email\";\r\nimport MobileValidator from \"./mobile_validator\";\r\nimport PaymentDetails from \"./payment_details\";\r\nimport {\r\n resetFromStep,\r\n setActiveStep,\r\n setErrors,\r\n setLoading,\r\n} from \"./topupSlice\";\r\nimport TxnConfirmation from \"./txn_confirmation\";\r\nimport { Grid } from \"@material-ui/core\";\r\nimport CarrierSelector from \"./carrier_selector\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n \"& .MuiStepper-root\": {\r\n padding: 0,\r\n },\r\n },\r\n button: {\r\n marginTop: theme.spacing(1),\r\n marginRight: theme.spacing(1),\r\n borderRadius: 20,\r\n },\r\n actionsContainer: {\r\n marginBottom: theme.spacing(2),\r\n float: \"right\",\r\n },\r\n resetContainer: {\r\n paddingTop: theme.spacing(2),\r\n [theme.breakpoints.up(\"md\")]: {\r\n padding: theme.spacing(3),\r\n },\r\n },\r\n resetBtn: {\r\n borderRadius: 20,\r\n marginTop: theme.spacing(2),\r\n float: \"right\",\r\n [theme.breakpoints.down(\"xs\")]: {\r\n width: \"100%\",\r\n },\r\n },\r\n phoneNumberEntered: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n gap: 10,\r\n },\r\n}));\r\n\r\nconst facState = { state: \"pending\", data: \"\" };\r\n\r\nexport default function TopupStepper() {\r\n const btnRef = useRef(null);\r\n const dispatch = useDispatch();\r\n\r\n const classes = useStyles();\r\n const {\r\n activeStep,\r\n validatedSteps,\r\n txnDetails,\r\n errors,\r\n submissionDetails,\r\n paymentDetails,\r\n addressDetails,\r\n showCCForm,\r\n } = useSelector((state) => state.topup);\r\n const [facResponse, setFacResponse] = useState(facState);\r\n const [emailError, setEmailError] = useState(\"\");\r\n const token = getToken();\r\n const { executeRecaptcha } = useGoogleReCaptcha();\r\n const steps = [\r\n {\r\n label: \"Select Country\",\r\n value: (\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 - 1 && (\r\n \r\n \r\n \r\n SUBMIT\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 \"components/shared/loader/loader\";\r\nimport IconHeader from \"components/public-dashboard/components/iconHeader\";\r\nimport TopupStepper from \"./stepper\";\r\nimport { fetchAddressCountries, setActiveStep } from \"./topupSlice\";\r\nimport SystemMessage from \"components/public-dashboard/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\r\n useEffect(async () => {\r\n dispatch(setActiveStep(0));\r\n await dispatch(fetchAddressCountries());\r\n }, [dispatch]);\r\n\r\n const { serviceLoading, serviceStatus } = useServiceStatus(\"topup\");\r\n if (serviceLoading) {\r\n return \r\n {facResponse.state === \"failed\" &&\r\n index == steps.length - 1 &&\r\n renderFacError()}\r\n
\r\n \r\n
\r\n \r\n {activeStep > 0 && (\r\n \r\n Back\r\n \r\n )}\r\n {activeStep < steps.length - 1 && (\r\n \r\n Next\r\n \r\n )}\r\n {allStepsValidated && (\r\n {\r\n handleNext(true);\r\n }}\r\n className={classes.button}\r\n >\r\n FINISH\r\n \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 \r\n {text}\r\n \r\n
\r\n );\r\n}\r\n","import {\r\n Container,\r\n Grid,\r\n makeStyles,\r\n useMediaQuery,\r\n useTheme,\r\n} from \"@material-ui/core\";\r\nimport React, { Fragment } from \"react\";\r\nimport billPay_img from \"assets/images/billpay_image.png\";\r\nimport revenue_img from \"assets/images/more_revenue.png\";\r\nimport getpPaid_img from \"assets/images/foot-traffic.png\";\r\nimport signUp_img from \"assets/images/home_content_4.png\";\r\nimport digi_bmobile_logo from \"assets/images/digicel-and-bmobile-logos.png\";\r\nimport topup_requirements from \"assets/images/YOOZ_TOP_UP_REQUIREMENT_POST.jpg\";\r\nimport billpay_requirements from \"assets/images/YOOZ_BILL_PAYMENT_REQUIREMENT_POST.jpg\";\r\nimport ContentImageBlock from \"components/public-dashboard/components/contentImageBlock\";\r\nimport ContentList from \"components/public-dashboard/components/contentList\";\r\nimport TextList from \"components/public-dashboard/components/TextList\";\r\nimport PrimaryTextHeading from \"components/public-dashboard/components/primaryTextHeading\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n headingTitle: {\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 fontSize: 34,\r\n },\r\n headingSubTitle: {\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 fontSize: 18,\r\n },\r\n content: {\r\n color: theme.palette.secondary.main,\r\n [theme.breakpoints.up(\"lg\")]: {},\r\n },\r\n\r\n signUpContainer: {\r\n background: \"#F2F2F2\",\r\n margin: \"auto\",\r\n paddingTop: 20,\r\n },\r\n link: {\r\n color: theme.palette.secondary.main,\r\n fontFamily: \"Akzidenz-Grotesk BQ, serif\",\r\n },\r\n img: {\r\n width: \"100%\",\r\n maxWidth: \"200px\",\r\n [theme.breakpoints.down(\"xs\")]: {\r\n maxWidth: 150,\r\n },\r\n },\r\n linktext: {\r\n color: theme.palette.primary.light,\r\n \"&:hover\": { color: `${theme.palette.primary.main} !important` },\r\n },\r\n largeGreenText: {\r\n fontSize: 30,\r\n color: \"#57B56B\",\r\n fontFamily: \"Arial Rounded MT\",\r\n },\r\n largeOrangeText: {\r\n fontSize: 30,\r\n color: \"#FBAD18\",\r\n fontFamily: \"Arial Rounded MT\",\r\n },\r\n largeBlueText: {\r\n fontSize: 30,\r\n color: \"rgb(28, 197, 255)\",\r\n fontFamily: \"Arial Rounded MT\",\r\n },\r\n LargePurpleText: {\r\n fontSize: 30,\r\n color: \"#A43168\",\r\n fontFamily: \"Arial Rounded MT\",\r\n },\r\n largeRedText: {\r\n fontSize: 30,\r\n color: \"#CA0000\",\r\n fontFamily: \"Arial Rounded MT\",\r\n },\r\n greenText: {\r\n color: \"#57B56B\",\r\n },\r\n redText: {\r\n color: \"#CA0000\",\r\n },\r\n yoozBlueLink: {\r\n color: \"#00AFE2\",\r\n },\r\n agentIncomes: {\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n flexDirection: \"column\",\r\n },\r\n incomeSource: {\r\n marginTop: theme.spacing(2),\r\n marginBottom: theme.spacing(2),\r\n [theme.breakpoints.up(\"md\")]: {\r\n marginTop: theme.spacing(8),\r\n marginBottom: theme.spacing(8),\r\n },\r\n },\r\n}));\r\n\r\nexport default function AgentContent() {\r\n const classes = useStyles();\r\n const theme = useTheme();\r\n const sm = useMediaQuery(theme.breakpoints.down(\"sm\"));\r\n const xs = useMediaQuery(theme.breakpoints.down(\"xs\"));\r\n\r\n const sections = [\r\n {\r\n title: \"SELL TOP UP\",\r\n img: digi_bmobile_logo,\r\n colorMappings: {\r\n SELL: \"largeBlueText\",\r\n TOP: \"largeRedText\",\r\n UP: \"largeRedText\",\r\n },\r\n },\r\n {\r\n title: \"COLLECT BILL PAYMENTS\",\r\n img: billPay_img,\r\n colorMappings: {\r\n COLLECT: \"largeGreenText\",\r\n BILL: \"largeGreenText\",\r\n PAYMENTS: \"largeGreenText\",\r\n },\r\n },\r\n {\r\n title: \"EARN MORE REVENUE\",\r\n img: revenue_img,\r\n colorMappings: {\r\n EARN: \"largeBlueText\",\r\n MORE: \"LargePurpleText\",\r\n REVENUE: \"LargePurpleText\",\r\n },\r\n },\r\n {\r\n title: \"INCREASE FOOT TRAFFIC\",\r\n img: getpPaid_img,\r\n colorMappings: {\r\n INCREASE: \"largeBlueText\",\r\n FOOT: \"largeOrangeText\",\r\n TRAFFIC: \"largeOrangeText\",\r\n },\r\n },\r\n ];\r\n\r\n return (\r\n \r\n
\r\n \r\n {section.title.split(\" \").map((word, index) => (\r\n \r\n \r\n {word}\r\n {\" \"}\r\n \r\n ))}\r\n
\r\n \r\n \r\n Call +1 (868) 235-6182 to speak to one of our\r\n representatives or email{\" \"}\r\n \r\n servicett@yoozit.today\r\n {\" \"}\r\n along with your Onboarding documents. To see all required\r\n documents for registration check out our{\" \"}\r\n \r\n Onboarding Documents\r\n {\" \"}\r\n page.\r\n ,\r\n ]}\r\n />\r\n }\r\n />\r\n
\r\n \r\n \r\n {text}\r\n \r\n
\r\n );\r\n}\r\n","import { Container, Divider, Grid, useMediaQuery } from \"@material-ui/core\";\r\nimport Link from \"@material-ui/core/Link\";\r\nimport { makeStyles, useTheme } from \"@material-ui/core/styles\";\r\nimport React, { Fragment } from \"react\";\r\nimport { useDispatch } from \"react-redux\";\r\nimport { Link as RouterLink } from \"react-router-dom\";\r\nimport yooz_scan2pay from \"assets/images/YOOZScan2Pay-Image-to-resize-and-reformat_2.png\";\r\nimport yooz_agent from \"assets/images/YOOZ_AGENT.png\";\r\nimport yooz_online from \"assets/images/YOOZ_ONLINE.png\";\r\nimport yooz_payments from \"assets/images/YOOZ_PAYMENTS.png\";\r\nimport Accessible from \"assets/images/accessible_donors.png\";\r\nimport EasyDoners from \"assets/images/easy_donors_icon.png\";\r\nimport signUp_img from \"assets/images/get_started_2.png\";\r\nimport icon4 from \"assets/images/pg-icon4.png\";\r\nimport StreamLine from \"assets/images/stream_line.png\";\r\nimport TextList from \"components/public-dashboard/components/TextList\";\r\nimport ContentImageBlock from \"components/public-dashboard/components/contentImageBlock\";\r\nimport ContentList from \"components/public-dashboard/components/contentList\";\r\nimport IconHeader from \"components/public-dashboard/components/iconHeader\";\r\nimport PrimaryText from \"components/public-dashboard/components/primaryText\";\r\nimport { setTabPosition } from \"components/public-dashboard/uiSlice\";\r\nimport { API_ROOT } from \"constants/actionTypes\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n logoHeading: {\r\n width: 150,\r\n [theme.breakpoints.up(\"sm\")]: {\r\n width: 180,\r\n },\r\n [theme.breakpoints.up(\"md\")]: {\r\n width: 250,\r\n },\r\n minWidth: 100,\r\n },\r\n body: {\r\n color: theme.palette.secondary.main,\r\n [theme.breakpoints.up(\"lg\")]: {\r\n marginLeft: 70,\r\n marginBottom: theme.spacing(10),\r\n },\r\n },\r\n overlineText: {\r\n display: \"flex\",\r\n alignItems: \"left\",\r\n flexWrap: \"wrap\",\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 },\r\n it: {\r\n fontStyle: \"italic\",\r\n fontFamily: \"Arial Rounded MT\",\r\n textTransform: \"none\",\r\n },\r\n right: {\r\n textAlign: \"right\",\r\n },\r\n img: {\r\n marginTop: theme.spacing(3),\r\n marginBottom: theme.spacing(3),\r\n width: \"75%\",\r\n },\r\n ol: {\r\n paddingLeft: theme.spacing(3),\r\n marginBottom: theme.spacing(2),\r\n },\r\n collectPayment: {\r\n color: \"#008BC3\",\r\n },\r\n\r\n yoozBlueLink: {\r\n color: \"#00AFE2\",\r\n },\r\n helpYouText: {\r\n fontSize: 38,\r\n },\r\n featureImg: {\r\n [theme.breakpoints.up(\"md\")]: {\r\n height: 70,\r\n width: 70,\r\n },\r\n height: 30,\r\n width: 30,\r\n },\r\n gatewayFeatures: {\r\n [theme.breakpoints.up(\"md\")]: {\r\n marginLeft: 40,\r\n marginBottom: 48,\r\n },\r\n paddingLeft: 16,\r\n },\r\n}));\r\n\r\nexport default function PartnersContent(props) {\r\n const classes = useStyles();\r\n const theme = useTheme();\r\n const sm = useMediaQuery(theme.breakpoints.up(\"sm\"));\r\n const xs = useMediaQuery(theme.breakpoints.down(\"xs\"));\r\n const md = useMediaQuery(theme.breakpoints.up(\"md\"));\r\n\r\n const dispatch = useDispatch();\r\n const gatewayFeatures = [\r\n { text: \"Make it easier for Donors to pay you ANYTIME.\", img: EasyDoners },\r\n {\r\n text: \"Streamline and automate your accounting process.\",\r\n img: StreamLine,\r\n },\r\n { text: \"Be more accessible to Donors.\", img: Accessible },\r\n {\r\n text: (\r\n \r\n Accept donations without the hassle of processing or compliance\r\n requirements -YOOZ does the work for you!\r\n \r\n ),\r\n img: icon4,\r\n },\r\n ];\r\n const LinkText = (props) => {\r\n const { navIndex, route, text } = props;\r\n return (\r\n GATEWAY\",\r\n color: \"#A43168\",\r\n img: yooz_payments,\r\n lines: [\r\n \r\n Boost your donations and start accepting payments online by\r\n integrating the\r\n
\r\n Secure, quick and easy to use, YOOZ makes it easy to collect\r\n donations through multiple channels:\r\n
\r\n ,\r\n ]}\r\n />\r\n \r\n\r\n {contentList().map((c, index) => (\r\n,\r\n \r\n YOOZ can help you:\r\n ,\r\n ]}\r\n />\r\n
\r\n Have a website or e-commerce site but it's not equipped to\r\n accept card payments on checkout?\r\n ,\r\n \r\n Then our YOOZ Hosted Payment Page option\r\n is just what you need as it will redirect your customers\r\n to a YOOZ payment page co-branded with\r\n your logo or wordmark.\r\n ,\r\n ]}\r\n />\r\n
\r\n where we collaborate closely with the cardholder’s bank to\r\n verify\r\n
\r\n their identity. This system safeguards your transaction\r\n data while\r\n
\r\n making the payment process smoother and easier for you.\r\n ,\r\n ]}\r\n />\r\n
\r\n card industry compliance and safety mechanisms{\" \"}\r\n (3DS2) allow\r\n
\r\n banks to interact with their cardholders on our platform\r\n during a
\r\n transaction. If you attempt to pay your bill or buy top up\r\n with us, your\r\n
\r\n bank may require you to enter additional information, so\r\n they can\r\n
\r\n verify your identity.\r\n ,\r\n \r\n One way they do this is by asking you to submit a One Time\r\n
\r\n Passcode they send to you during the transaction process.\r\n A\r\n
\r\n message branded and sent by your bank will appear within\r\n our\r\n
\r\n payment page asking that you enter a One Time Passcode.\r\n
\r\n Simultaneously, the code is sent to the contact info they\r\n have on file. If you no longer have access to that contact\r\n info, you cannot access,\r\n nor enter the code. The bank will not approve a\r\n transaction if they\r\n
\r\n cannot verify your identity. Only when YOOZ gets approval\r\n from your\r\n
\r\n bank‚ do we charge your card.\r\n ,\r\n \r\n If you have changed your contact details, you should\r\n contact your\r\n
bank and advise them.\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 {Menu, MenuItem, TableSortLabel, TextField} from \"@material-ui/core\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport Paper from \"@material-ui/core/Paper\";\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 { makeStyles } from \"@material-ui/core/styles\";\r\nimport React, { useState } from \"react\";\r\nimport { API_ROOT } from \"constants/actionTypes\";\r\nimport {\r\n downloadBlob,\r\n postBlob\r\n} from \"components/public-dashboard/services/api_util\";\r\nimport { renderTableCellContent } from \"./tableHelper\";\r\nimport TablePaginationActions from \"./tablePaginationActions\";\r\nimport {Link} from \"react-router-dom\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\n\r\nimport SearchIcon from '@material-ui/icons/Search';\r\nimport ClearIcon from '@material-ui/icons/Clear';\r\n\r\nexport function descendingComparator(a, b, orderBy) {\r\n if (b[orderBy] < a[orderBy]) {\r\n return -1;\r\n }\r\n if (b[orderBy] > a[orderBy]) {\r\n return 1;\r\n }\r\n return 0;\r\n}\r\n\r\nexport function getComparator(order, orderBy) {\r\n return order === 'desc'\r\n ? (a, b) => descendingComparator(a, b, orderBy)\r\n : (a, b) => -descendingComparator(a, b, orderBy);\r\n}\r\n\r\nexport function stableSort(array, comparator) {\r\n const stabilizedThis = array.map((el, index) => [el, index]);\r\n stabilizedThis.sort((a, b) => {\r\n const order = comparator(a[0], b[0]);\r\n if (order !== 0) return order;\r\n return a[1] - b[1];\r\n });\r\n return stabilizedThis.map((el) => el[0]);\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 exportButton: {\r\n marginLeft: \"16px\",\r\n marginTop: \"16px\",\r\n },\r\n paginationStyles: {\r\n flexWrap: \"wrap\",\r\n justifyContent: \"center\",\r\n },\r\n visuallyHidden: {\r\n border: 0,\r\n clip: 'rect(0 0 0 0)',\r\n height: 1,\r\n margin: -1,\r\n overflow: 'hidden',\r\n padding: 0,\r\n position: 'absolute',\r\n top: 20,\r\n width: 1,\r\n },\r\n searchField: {\r\n float:\"right\",\r\n marginBottom: 5,\r\n marginRight: 5\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 columns,\r\n excelExportUrl,\r\n csvExportUrl,\r\n headStyle,\r\n searchValue = \"\",\r\n paginationEnabled = true,\r\n sortingEnabled = false,\r\n containerStyles,\r\n handleSort\r\n } = props;\r\n const classes = useStyles();\r\n\r\n const [order, setOrder] = React.useState('asc');\r\n const [orderBy, setOrderBy] = React.useState('Name');\r\n const [pageSize, setPageSize] = useState(10);\r\n const [pageIndexLocal, setPageIndex] = useState(pageIndex - 1);\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n const open = Boolean(anchorEl);\r\n\r\n const handleChangePage = (event, newPage) => {\r\n setPageIndex(newPage);\r\n handleQueryUpdate({ ...query, searchTerm: searchValue, 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, searchTerm: searchValue });\r\n handleFetch();\r\n };\r\n\r\n const handleExcelExport = async (e) => {\r\n const blob = await postBlob(\r\n { ...query, pageSize: null },\r\n `${API_ROOT}${excelExportUrl}`\r\n );\r\n downloadBlob(blob, \"Transactions Report.xlsx\", \"application/vnd.ms-excel\");\r\n };\r\n\r\n const handleCSVExport = async (e) => {\r\n const blob = await postBlob(\r\n { ...query, pageSize: null },\r\n `${API_ROOT}${csvExportUrl}`\r\n );\r\n downloadBlob(blob, \"Transactions Report.csv\", \"text/plain\");\r\n };\r\n\r\n const createSortHandler = (property) => (event) => {\r\n const isAsc = orderBy === property && order === 'asc';\r\n setOrder(isAsc ? 'desc' : 'asc');\r\n setOrderBy(property);\r\n handleSort(order, orderBy);\r\n };\r\n\r\n return (\r\n \r\n
\r\n The first step is to fill out and submit your Onboarding documents\r\n including the{\" \"}\r\n
\r\n
\r\n Simply scroll down to find your business structure and send your\r\n documents to us via{\" \"}\r\n
\r\n
\r\n If you would like further clarification, feel free to contact our\r\n YOOZ Onboardng Team at +1 (868) 235-6182.\r\n ,\r\n ]}\r\n />\r\n
\r\n YOOZ Scan2Pay is an added feature of the YOOZ Online Service.\r\n
\r\n\r\n {comment}\r\n
\r\n\r\n\r\n Due diligence on business entities is required for the monitoring of\r\n Anti-Money Laundering (AML) and Combatting the Financing of\r\n Terrorism (CFT) as per the Financial Obligations Regulations and the\r\n Central Bank of Trinidad and Tobago (CBTT) AML/CFT Guidelines.\r\n
\r\n YOOZ operates under the FIUTT (Financial Intelligence Unit of\r\n Trinidad and Tobago), FINTECH and CBTT guidelines and regulations.\r\n ,\r\n ]}\r\n />\r\n
{comment}
\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 \"components/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 {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