Username and/or Password is not correct
}\r\n \r\n \r\n \r\n = Math.ceil(count / rowsPerPage) - 1}\r\n aria-label='next page'\r\n >\r\n = Math.ceil(count / rowsPerPage) - 1}\r\n aria-label='last page'\r\n >\r\n
\r\n );\r\n}\r\n\r\nTablePaginationActions.propTypes = {\r\n count: PropTypes.number.isRequired,\r\n onPageChange: PropTypes.func.isRequired,\r\n page: PropTypes.number.isRequired,\r\n rowsPerPage: PropTypes.number.isRequired,\r\n};\r\n\r\nexport default TablePaginationActions;","import React from 'react';\r\nimport {usePagination, useTable} from 'react-table';\r\nimport PropTypes from 'prop-types';\r\nimport clsx from 'clsx';\r\n\r\nimport {CircularProgress, withStyles} from '@material-ui/core';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport MuiTable 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 TableSortLabel from '@material-ui/core/TableSortLabel';\r\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\r\n\r\nimport {blackColor, whiteColor} from '../assets/jss/portalStyle';\r\nimport {bgShadeClass} from '../assets/jss/classes/bgShade'\r\nimport TablePaginationActions from './TablePaginationActions';\r\n\r\nconst styles = () => ({\r\n root: {\r\n overflow: 'auto',\r\n },\r\n cellAlignCenter: {\r\n textAlign: 'center',\r\n },\r\n cellAlignRight: {\r\n textAlign: 'right',\r\n },\r\n cellAlignLeft: {\r\n textAlign: 'left',\r\n },\r\n header: {\r\n backgroundColor: blackColor,\r\n color: whiteColor,\r\n textAlign: 'center',\r\n },\r\n headerFirstChild: {\r\n backgroundColor: blackColor,\r\n color: whiteColor,\r\n textAlign: 'left',\r\n borderTopLeftRadius: '12px',\r\n },\r\n headerLastChild: {\r\n backgroundColor: blackColor,\r\n color: whiteColor,\r\n textAlign: 'center',\r\n borderTopRightRadius: '12px',\r\n },\r\n pagination: {\r\n minHeight: '32px',\r\n overflow: 'inherit',\r\n },\r\n ...bgShadeClass,\r\n})\r\n\r\nexport const classNames = {\r\n CURRENCY: 'currency-info',\r\n DATE: 'date-info',\r\n ICON: 'icon-info',\r\n STRING: 'string-info',\r\n}\r\n\r\nfunction Table(props) {\r\n const matches = useMediaQuery('(min-width:480px) and (min-height: 480px');\r\n\r\n const {\r\n classes,\r\n columns,\r\n data,\r\n fetchData,\r\n loading,\r\n pageCount: controlledPageCount,\r\n orderBy,\r\n order,\r\n handleSortChange,\r\n totalRows,\r\n } = props;\r\n\r\n // Use the state and functions returned from useTable to build your UI\r\n const {\r\n getTableProps,\r\n getTableBodyProps,\r\n headerGroups,\r\n prepareRow,\r\n page,\r\n gotoPage,\r\n setPageSize,\r\n // Get the state from the instance\r\n state: { pageIndex, pageSize },\r\n } = useTable(\r\n {\r\n columns,\r\n data,\r\n initialState: { pageIndex: 0, pageSize: 10 }, // Pass our hoisted table state\r\n manualPagination: true, // Tell the usePagination hook that we'll handle our own data fetching\r\n // This means we'll also have to provide our own pageCount.\r\n pageCount: controlledPageCount,\r\n },\r\n usePagination\r\n );\r\n\r\n const createSortHandler = (property) => (event) => {\r\n handleSortChange(event, property);\r\n };\r\n\r\n const StyledTableSortLabel = withStyles({\r\n icon: {\r\n '& path': {\r\n fill: '#eee'\r\n },\r\n },\r\n root: {\r\n '&.MuiTableSortLabel-active': {\r\n color: '#fff',\r\n },\r\n },\r\n })(TableSortLabel);\r\n\r\n // Listen for changes in pagination and use the state to fetch our new data\r\n React.useEffect(() => {\r\n fetchData({ pageIndex, pageSize })\r\n }, [fetchData, pageIndex, pageSize]);\r\n\r\n const alignmentStyleByClass = (className) => {\r\n switch (className) {\r\n case classNames.CURRENCY:\r\n return classes.cellAlignRight;\r\n case classNames.ICON:\r\n case classNames.DATE:\r\n return classes.cellAlignCenter;\r\n case classNames.STRING:\r\n default:\r\n return classes.cellAlignLeft;\r\n }\r\n };\r\n\r\n const alignmentStyleByAlign = (alignment) => {\r\n switch (alignment.toLowerCase()) {\r\n case 'right':\r\n return classes.cellAlignRight;\r\n case 'center':\r\n case 'centre':\r\n return classes.cellAlignCenter;\r\n case 'left':\r\n default:\r\n return classes.cellAlignLeft;\r\n }\r\n };\r\n // Render the UI for your table\r\n return (\r\n Next Bill Date: {nextBill}
\r\n Status: {status}
\r\n \r\n {row.value.serviceName}
\r\n {row.value.packageName}\r\n
\r\n )\r\n },\r\n },\r\n {\r\n accessor: 'col2',\r\n align: 'center',\r\n className: classNames.STRING,\r\n columnName: 'usageIdentifier',\r\n id: 'ColumnHeaderUsageIdentifier',\r\n isSortable: false,\r\n width: '30%',\r\n Header: 'Usage Identifier',\r\n },\r\n {\r\n accessor: 'col3',\r\n align: 'center',\r\n className: classNames.STRING,\r\n columnName: 'totalCharge',\r\n id: 'ColumnHeaderTotalUsed',\r\n isSortable: false,\r\n width: '15%',\r\n Header: 'Total Used',\r\n },\r\n];\r\n\r\nconst setUsageBillingPeriods = (usageBillDay, locale) => {\r\n const now = dayjs();\r\n const month = now.month() + 1,\r\n year = now.year();\r\n let startDateFirstPeriod = dayjs.utc(`${year}-${month}-${usageBillDay}`, 'YYYY-M-D');\r\n // if before the bill day, start a month earlier\r\n if (now.isBefore(startDateFirstPeriod, 'day')) {\r\n startDateFirstPeriod = startDateFirstPeriod.subtract(1, 'months');\r\n }\r\n\r\n const setEndDate = (startDate) => {\r\n return dayjs(startDate).add(1, 'months').subtract(1, 'days');\r\n }\r\n let endDateFirstPeriod = setEndDate(startDateFirstPeriod);\r\n\r\n const fnPeriodMap = (monthOffset) => {\r\n if (monthOffset > 0) {\r\n startDateFirstPeriod = startDateFirstPeriod.subtract(1, 'months');\r\n endDateFirstPeriod = setEndDate(startDateFirstPeriod);\r\n }\r\n \r\n return {\r\n id: monthOffset + 1,\r\n start: startDateFirstPeriod.locale(locale).format('MMM DD YYYY'),\r\n end: endDateFirstPeriod.locale(locale).format('MMM DD YYYY'),\r\n month: startDateFirstPeriod.month() + 1,\r\n year: startDateFirstPeriod.year(),\r\n }\r\n }\r\n // 18 months\r\n return [...Array(18).keys()].map(fnPeriodMap);\r\n}\r\n\r\nconst screenId = 'portalScreen_Usage';\r\n\r\nfunction Usage(props) {\r\n const { currentAccount, currentLocale } = props;\r\n const classes = useStyles();\r\n const [usageBillingPeriod, setUsageBillingPeriod] = React.useState('1'); // current billing period\r\n // We'll start our table without any data\r\n const [data, setData] = React.useState([]);\r\n const [loading, setLoading] = React.useState(true);\r\n const [isDialogOpen, setIsDialogOpen] = React.useState(false);\r\n const [usageLoading, setUsageLoading] = React.useState(false);\r\n const [usageBillingPeriodList, setUsageBillingPeriodList] = React.useState([]);\r\n const [totalRows, setTotalRows] = React.useState(0);\r\n const [pageCount, setPageCount] = React.useState(0);\r\n const [pageIdx, setPageIdx] = React.useState(1);\r\n const [rowsPerPage, setPageSize] = React.useState(10);\r\n\r\n const handleBillingPeriodChange = (event) => {\r\n const currentPageIdx = pageIdx;\r\n setUsageBillingPeriod(event.target.value);\r\n setPageIdx(1);\r\n if (currentPageIdx !== pageIdx) {\r\n fetchUsage({ pageIndex: pageIdx, pageSize: rowsPerPage })\r\n }\r\n };\r\n\r\n const usageTransform = (item) => {\r\n return {\r\n id: item.identity,\r\n col1: {\r\n serviceName: item.serviceName,\r\n packageName: item.packageName\r\n },\r\n col2: item.udrUsageIdentifier,\r\n col3: `${item.displayUsageTotal}`,\r\n };\r\n };\r\n\r\n useEffect(() => {\r\n const usageBillDay = currentAccount.usageBillDay;\r\n const usagePeriodList = setUsageBillingPeriods(usageBillDay, currentLocale);\r\n setUsageBillingPeriodList(usagePeriodList);\r\n setLoading(false);\r\n }, [currentAccount])\r\n\r\n\r\n const openDownloadDialog = function () {\r\n setIsDialogOpen(true);\r\n }\r\n\r\n const onUsageDialogClose = function () {\r\n setIsDialogOpen(false);\r\n }\r\n\r\n const downloadUsage = useCallback(({ pageSize, pageIndex }) => {\r\n const accountId = currentAccount.uid\r\n const usagePeriod = usageBillingPeriodList.find((period) => period.id === parseInt(usageBillingPeriod));\r\n if (accountId === undefined) return;\r\n return getUsage(\r\n accountId,\r\n usagePeriod.month,\r\n usagePeriod.year,\r\n {\r\n pageNumber: pageIndex,\r\n pageSize,\r\n }\r\n )\r\n }, [currentAccount, usageBillingPeriod, usageBillingPeriodList]);\r\n\r\n const fetchUsage = useCallback(({ pageSize, pageIndex }) => {\r\n // This will get called when the table needs new data like page size change or page# change\r\n const accountId = currentAccount.uid\r\n const usagePeriod = usageBillingPeriodList.find((period) => period.id === parseInt(usageBillingPeriod));\r\n if (accountId === undefined) return;\r\n pageIndex += 1;\r\n // Set the loading state\r\n setUsageLoading(true);\r\n\r\n getUsage(\r\n accountId,\r\n usagePeriod.month,\r\n usagePeriod.year,\r\n {\r\n pageNumber: pageIndex,\r\n pageSize,\r\n }\r\n ).then((results) => {\r\n let usage = results.items;\r\n let totalCount = results.totalCount;\r\n setData(usage);\r\n setPageCount(Math.ceil(totalCount / pageSize));\r\n setTotalRows(totalCount);\r\n setPageSize(pageSize);\r\n setPageIdx(pageIndex);\r\n setUsageLoading(false);\r\n });\r\n }, [currentAccount, usageBillingPeriod, usageBillingPeriodList]);\r\n\r\n return (\r\n loading ? \r\n {row.value.packageName}\r\n
\r\n
\r\n
\r\n\r\n No usage found for the selected period\r\n \r\n
\r\n )}\r\n \r\n )\r\n}\r\n\r\nexport default Usage;","import React from \"react\";\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\n\r\nconst styles = (theme) => ({\r\n caption: {\r\n fontSize: 'smaller',\r\n },\r\n text: {\r\n fontWeight: 'bold',\r\n },\r\n spacer: {\r\n height: theme.spacing(1),\r\n }\r\n});\r\n\r\nfunction ReadOnlyField (props) {\r\n const { classes, caption, text } = props;\r\n return (\r\n <>\r\n \r\n
\r\n
- \r\n {validationErrors.map((error, idx) => (\r\n
- \r\n {error.message}\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\nexport default withStyles(styles)(BillingInformation)","import CustomerPortalApiCall from './CustomerPortalApiCall';\r\n\r\nclass PutPaymentMethod extends CustomerPortalApiCall {\r\n apiCall(data) {\r\n return this.apiManager.paymentMethod.update(data);\r\n }\r\n}\r\n\r\nconst putPaymentMethod = (data) => new PutPaymentMethod().execute(data);\r\nexport default putPaymentMethod;","import CustomerPortalApiCall from './CustomerPortalApiCall';\r\n\r\nclass PostSetPaymentMethodAsDefault extends CustomerPortalApiCall {\r\n apiCall(paymentMethodId) {\r\n return this.apiManager.postSetPaymentMethodAsDefault(paymentMethodId)\r\n }\r\n}\r\n\r\nconst postSetPaymentMethodAsDefault = (paymentMethodId) => new PostSetPaymentMethodAsDefault().execute(paymentMethodId);\r\nexport default postSetPaymentMethodAsDefault;","import React, { useState, useCallback } from 'react';\r\nimport {\r\n makeStyles, Dialog, DialogTitle, DialogContent, DialogActions, Button,\r\n Checkbox, FormControl, FormControlLabel, Grid, TextField, IconButton\r\n} from '@material-ui/core';\r\nimport putPaymentMethod from '../../../api/putPaymentMethod';\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport { DataEnums } from '@lb/utils/enums';\r\nimport ValidationErrors from '../../../components/ValidationErrors';\r\n\r\nconst useStyles = makeStyles(() => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n formBody: {\r\n marginBlock: '8px'\r\n },\r\n formControl: {\r\n marginBlock: '6px'\r\n },\r\n spreedlyInput: {\r\n borderBottom: '1px',\r\n height: '48px'\r\n }\r\n}));\r\n\r\nconst EditPaymentDialog = (props) => {\r\n const { autopay, isActive, paymentMethodId, disabled, name, accountNumber, paymentMethodBaseId, hasDefault, paymentMethodNameList, onSuccessfulPayment } = props;\r\n const classes = useStyles();\r\n const [newName, setNewName] = useState(name);\r\n const [open, setOpen] = React.useState(false);\r\n const [defaultModalCheck, setDefaultModalCheck] = useState(autopay);\r\n const [activeModalCheck, setActiveModalCheck] = useState(isActive);\r\n const [validationErrors, setValidationErrors] = useState([]);\r\n\r\n const handleOpen = () => {\r\n setNewName(name);\r\n setDefaultModalCheck(autopay);\r\n setActiveModalCheck(isActive);\r\n setOpen(true);\r\n };\r\n const handleClose = () => {\r\n setOpen(false);\r\n };\r\n\r\n const saveClose = useCallback(() => {\r\n setValidationErrors([]);\r\n if (paymentMethodNameList.includes(newName) && newName !== name) {\r\n setValidationErrors([{ error: 'Invalid Name', message: 'Name is already in use.' }]);\r\n return\r\n }\r\n if (newName === undefined || newName === null || newName === '') {\r\n setValidationErrors([{ error: 'Invalid Name', message: 'Invalid Name.' }]);\r\n return\r\n }\r\n const putBody = {\r\n name: newName,\r\n identity: paymentMethodId,\r\n isActive: activeModalCheck,\r\n autopay: activeModalCheck ? defaultModalCheck : false,\r\n };\r\n putPaymentMethod(putBody).then(() => onSuccessfulPayment());\r\n setValidationErrors([]);\r\n handleClose();\r\n }, [defaultModalCheck, activeModalCheck, paymentMethodId, newName]);\r\n\r\n return (props !== undefined) && (\r\n \r\n \r\n \r\n \r\n \r\n Edit Payment Method\r\n \r\n \r\n \r\n setNewName(event.target.value)}\r\n label='Name'\r\n fullWidth\r\n />\r\n \r\n \r\n {\r\n (\r\n <>\r\n \r\n \r\n \r\n setActiveModalCheck(event.target.checked)}\r\n />\r\n }\r\n label='Active'\r\n />\r\n \r\n \r\n setDefaultModalCheck(event.target.checked)}\r\n />\r\n }\r\n label='Default'\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\nexport default EditPaymentDialog;\r\n","import React from 'react'\r\n\r\nimport { withStyles } from '@material-ui/core';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Switch from '@material-ui/core/Switch';\r\nimport Radio from '@material-ui/core/Radio';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\n\r\nimport { DataEnums } from '@lb/utils/enums';\r\nimport ReadOnlyField from '../../../components/ReadOnlyField';\r\nimport EditPaymentDialog from './EditPaymentDialog';\r\n\r\nconst styles = () => ({\r\n badgeCell: {\r\n display: 'flex',\r\n },\r\n});\r\n\r\nfunction PaymentMethodRow(props) {\r\n const { paymentMethod, customerPortalSettings, handleIsActiveChange, handleIsDefaultChange,\r\n accountId, hasDefault, paymentMethodNameList, onSuccessfulPayment } = props;\r\n\r\n const handleEditPaymentMethod = (e, fnUpdate) => {\r\n fnUpdate(e, paymentMethod.identity);\r\n }\r\n\r\n return (\r\n <>\r\n \r\n setDialogOpen(true)}\r\n color='primary'\r\n style={{ 'marginLeft': 'auto' }}\r\n >\r\n Add New\r\n \r\n \r\n \r\n Add Payment Method\r\n \r\n \r\n \r\n setName(event.target.value)}\r\n label='Name'\r\n fullWidth\r\n />\r\n \r\n \r\n Payment Method \r\n setPaymentMethod(event.target.value)}\r\n labelId={'paymentMethodLabel'}\r\n label='Payment Method'\r\n fullWidth\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {/*Name Components*/}\r\n {\r\n (paymentMethod !== PaymentTypeEnum.NONE) && (\r\n \r\n \r\n \r\n setFirstName(event.target.value)}\r\n fullWidth\r\n />\r\n \r\n \r\n setLastName(event.target.value)}\r\n fullWidth\r\n />\r\n \r\n \r\n \r\n )\r\n }\r\n {/*Credit Card Components*/}\r\n {\r\n (paymentMethod === PaymentTypeEnum.CREDIT_CARD) && (\r\n <>\r\n \r\n Credit Card \r\n {spreedlyCreditError} \r\n \r\n \r\n \r\n \r\n \r\n {\r\n const [year, month] = event.target.value.split('-');\r\n setExpiry({ year, month });\r\n }}\r\n fullWidth\r\n />\r\n {spreedlyDateError} \r\n \r\n \r\n \r\n \r\n CVV \r\n {spreedlyCVVError} \r\n \r\n \r\n \r\n \r\n \r\n )\r\n }\r\n {/*ACH Components*/}\r\n {\r\n (paymentMethod === PaymentTypeEnum.ACH) && (\r\n <>\r\n \r\n setRoutingNumber(event.target.value)}\r\n fullWidth />\r\n {routingNumberError} \r\n \r\n \r\n setAccountNumber(event.target.value)}\r\n fullWidth />\r\n {accountNumberError} \r\n \r\n \r\n )\r\n }\r\n \r\n \r\n \r\n setDefaultPaymentCheck(event.target.checked)}\r\n />\r\n }\r\n label='Default'\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\nAddPaymentDialog.propTypes = {\r\n currentAccountId: PropTypes.number.isRequired,\r\n};\r\n\r\nexport default AddPaymentDialog;","import React, { useState, useEffect } from 'react';\r\n\r\nimport MuiTable from '@material-ui/core/Table';\r\nimport { withStyles, Container, TableBody, TableContainer } from '@material-ui/core';\r\n\r\nimport { getCurrentAccountId, getCurrentOwnerCustomerPortalSettings } from '../../../helpers/getInfoFromCurrentUser';\r\nimport Loading from '../../../components/Loading';\r\nimport { getAllPaymentTypes } from '../../../api/getPaymentType';\r\nimport getPaymentMethods from '../../../api/getPaymentMethods';\r\nimport putPaymentMethod from '../../../api/putPaymentMethod';\r\nimport postSetPaymentMethodAsDefault from '../../../api/postSetPaymentMethodAsDefault';\r\nimport PaymentMethodRow from './PaymentMethodRow';\r\nimport EmptyPaymentMethod from './EmptyPaymentMethod';\r\nimport AddPaymentDialog from './AddPaymentDialog';\r\n\r\nconst styles = (theme) => ({});\r\n\r\nfunction PaymentMethods() {\r\n const [loading, setLoading] = useState(true);\r\n const [paymentMethods, setPaymentMethods] = useState([]);\r\n const [customerPortalSettings, setCustomerPortalSettings] = useState({});\r\n const [accountId, setAccountId] = useState(false);\r\n const [hasDefault, setHasDefault] = useState(false);\r\n const [paymentMethodNameList, setPaymentMethodNameList] = useState([]);\r\n const allowPayments = customerPortalSettings.allowPaymentMethodUpdate;\r\n\r\n const getData = async () => {\r\n let accountId = await getCurrentAccountId();\r\n setAccountId(accountId);\r\n let getPaymentTypes = getAllPaymentTypes();\r\n let getPaymentMethodsPromise = getPaymentMethods(accountId);\r\n let getSettingsPromise = getCurrentOwnerCustomerPortalSettings();\r\n Promise.all([getPaymentTypes, getPaymentMethodsPromise, getSettingsPromise])\r\n .then((data) => {\r\n const [paymentTypeList, paymentMethodList, settings] = data;\r\n let paymentMethods = paymentMethodList.map((paymentMethod) => {\r\n return {\r\n ...paymentMethod,\r\n paymentMethodBaseId: paymentTypeList.find(paymentType => paymentMethod.paymentTypeId === paymentType.identity).paymentBaseTypeId,\r\n }\r\n })\r\n setPaymentMethods(paymentMethods);\r\n setCustomerPortalSettings(settings);\r\n let checkDefault = paymentMethodList.some(paymentMethod => paymentMethod.autopay === true && paymentMethod.isActive === true) === true;\r\n setHasDefault(checkDefault);\r\n let paymentMethodNameList = paymentMethodList.map(paymentMethod => paymentMethod.name);\r\n setPaymentMethodNameList(paymentMethodNameList);\r\n setLoading(false);\r\n })\r\n };\r\n\r\n useEffect(() => {\r\n getData();\r\n }, [])\r\n\r\n const handleIsActiveChange = (e, paymentMethodId) => {\r\n let selectedPaymentMethod = paymentMethods.find(pm => pm.identity === paymentMethodId);\r\n let newActiveValue = !selectedPaymentMethod.isActive;\r\n // Set auto-pay to false. \r\n // Either it is now inactive and it should not be default, or it was already inactive and should not have been default in the first place\r\n let newAutopayValue = false;\r\n let putBody = {\r\n identity: paymentMethodId,\r\n isActive: newActiveValue,\r\n autopay: newAutopayValue,\r\n };\r\n putPaymentMethod(putBody).then(() => {\r\n selectedPaymentMethod.isActive = newActiveValue;\r\n selectedPaymentMethod.autopay = newAutopayValue;\r\n updatePaymentMethodState([selectedPaymentMethod]);\r\n });\r\n }\r\n\r\n const handleIsDefaultChange = (e, paymentMethodId) => {\r\n let selectedPaymentMethod = paymentMethods.find(pm => pm.identity === paymentMethodId);\r\n let defaultPaymentMethod = paymentMethods.find(pm => pm.autopay === true);\r\n let isSelectedPaymentMethodDefault = (selectedPaymentMethod === defaultPaymentMethod)\r\n let paymentMethodsToUpdate = [selectedPaymentMethod];\r\n if (isSelectedPaymentMethodDefault) {\r\n // Set Auto-pay to false, there should not be a default payment method anymore\r\n let putBody = {\r\n identity: paymentMethodId,\r\n autopay: false,\r\n };\r\n putPaymentMethod(putBody).then(() => {\r\n selectedPaymentMethod.autopay = false;\r\n updatePaymentMethodState([selectedPaymentMethod]);\r\n })\r\n } else {\r\n // Set Auto-pay to true using the specialized endpoint. This will set other payment methods default = false\r\n postSetPaymentMethodAsDefault(paymentMethodId).then(() => {\r\n selectedPaymentMethod.autopay = true;\r\n if (defaultPaymentMethod) {\r\n defaultPaymentMethod.autopay = false;\r\n paymentMethodsToUpdate.push(defaultPaymentMethod);\r\n }\r\n updatePaymentMethodState(paymentMethodsToUpdate);\r\n })\r\n }\r\n }\r\n\r\n const updatePaymentMethodState = (paymentMethods) => {\r\n setPaymentMethods(oldValue => oldValue.map(pm => {\r\n let paymentMethod = paymentMethods.find(z => z.identity === pm.identity);\r\n return paymentMethod !== undefined ? paymentMethod : pm;\r\n }));\r\n }\r\n\r\n const onSuccessfulPayment = () => {\r\n setLoading(true);\r\n getData();\r\n };\r\n\r\n return loading ? \r\n {\r\n matches\r\n ?\r\n \r\n {tabInfos.map((tab, idx) => {\r\n return buildTab(tab, idx);\r\n })}\r\n \r\n :\r\n \r\n {tabInfos.map((tab, idx) => {\r\n return buildTab(tab, idx);\r\n })}\r\n \r\n }\r\n { tabInfos.map((tab, idx) => {\r\n return buildTabPanel(tab, idx);\r\n }) }\r\n
\r\n \r\n )\r\n}\r\n\r\nexport default withStyles(styles)(Profile);","import PropTypes from 'prop-types';\r\nimport CustomerPortalApiCall from './CustomerPortalApiCall';\r\n\r\nclass GetAccountInvoicers extends CustomerPortalApiCall {\r\n apiCall(invoicerAccountId) {\r\n return this.apiManager.account.all({\r\n filters: [{ name: 'invoicerAccountId', value: invoicerAccountId }]\r\n });\r\n }\r\n}\r\n\r\nconst getAccountInvoicers = (invoicerAccountId) => new GetAccountInvoicers().execute(invoicerAccountId);\r\n\r\ngetAccountInvoicers.propTypes = {\r\n identity: PropTypes.number.isRequired,\r\n accountStatusTypeId: PropTypes.number.isRequired,\r\n accountStatusTypeName: PropTypes.string.isRequired,\r\n accountTypeId: PropTypes.number.isRequired,\r\n accountTypeName: PropTypes.string.isRequired,\r\n accountsReceivableTermsId: PropTypes.number.isRequired,\r\n accountsReceivableTermsName: PropTypes.string.isRequired,\r\n actingOwnerId: PropTypes.number.isRequired,\r\n actingOwnerName: PropTypes.string.isRequired,\r\n billDay: PropTypes.number,\r\n billGroupId: PropTypes.number,\r\n billGroupName: PropTypes.string,\r\n created: PropTypes.string.isRequired,\r\n createdByUserId: PropTypes.number.isRequired,\r\n createdByUserName: PropTypes.string.isRequired,\r\n currencyCode: PropTypes.string.isRequired,\r\n currencyId: PropTypes.number.isRequired,\r\n currencyName: PropTypes.string.isRequired,\r\n extensions: PropTypes.object,\r\n invoiceDeliveryId: PropTypes.number,\r\n invoiceDeliveryName: PropTypes.string,\r\n invoicerAccountId: PropTypes.number,\r\n invoicerAccountName: PropTypes.string,\r\n name: PropTypes.string.isRequired,\r\n taxSettingAccountId: PropTypes.number,\r\n taxSettingAccountName: PropTypes.string,\r\n usageBillDay: PropTypes.number,\r\n usageInvoicerAccountId: PropTypes.number,\r\n usageInvoicerAccountName: PropTypes.string,\r\n};\r\n\r\nexport default getAccountInvoicers;\r\n","import PropTypes from 'prop-types';\r\nimport CustomerPortalApiCall from './CustomerPortalApiCall';\r\n\r\nclass GetCustomerPortalUser extends CustomerPortalApiCall {\r\n apiCall(accountId) {\r\n return this.apiManager.portalUser.first();\r\n }\r\n}\r\n\r\nconst getCustomerPortalUser = (accountId) => new GetCustomerPortalUser().execute(accountId);\r\ngetCustomerPortalUser.propTypes = {\r\n identity: PropTypes.number.isRequired,\r\n accountId: PropTypes.number.isRequired,\r\n accountName: PropTypes.string.isRequired,\r\n created: PropTypes.string.isRequired,\r\n email: PropTypes.string.isRequired,\r\n firstName: PropTypes.string.isRequired,\r\n isActive: PropTypes.bool.isRequired,\r\n lastName: PropTypes.string.isRequired,\r\n localeId: PropTypes.number.isRequired,\r\n localeName: PropTypes.string.isRequired,\r\n name: PropTypes.string.isRequired,\r\n ownerId: PropTypes.number.isRequired,\r\n ownerName: PropTypes.string.isRequired,\r\n timeZone: PropTypes.string.isRequired,\r\n}\r\n\r\nexport default getCustomerPortalUser;","import React from 'react';\r\n\r\nimport InvoicesIcon from '@material-ui/icons/InsertDriveFile';\r\nimport OverviewIcon from '@material-ui/icons/Home';\r\nimport ProductsIcon from '@material-ui/icons/Widgets';\r\nimport UsageIcon from '@material-ui/icons/Storage';\r\n\r\nconst routeList = [\r\n { id: 'Overview', icon: - \r\n
\r\n
\r\n {auth && (\r\n \r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n );\r\n}\r\n\r\nBuildPage.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default withStyles(styles)(BuildPage);","import { createSlice } from '@reduxjs/toolkit';\r\n\r\nexport const counterSlice = createSlice({\r\n name: 'counter',\r\n initialState: {\r\n value: 0,\r\n },\r\n reducers: {\r\n increment: state => {\r\n // Redux Toolkit allows us to write \"mutating\" logic in reducers. It\r\n // doesn't actually mutate the state because it uses the Immer library,\r\n // which detects changes to a \"draft state\" and produces a brand new\r\n // immutable state based off those changes\r\n state.value += 1;\r\n },\r\n decrement: state => {\r\n state.value -= 1;\r\n },\r\n incrementByAmount: (state, action) => {\r\n state.value += action.payload;\r\n },\r\n },\r\n});\r\n\r\nexport const { increment, decrement, incrementByAmount } = counterSlice.actions;\r\n\r\n// The function below is called a thunk and allows us to perform async logic. It\r\n// can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This\r\n// will call the thunk with the `dispatch` function as the first argument. Async\r\n// code can then be executed and other actions can be dispatched\r\nexport const incrementAsync = amount => dispatch => {\r\n setTimeout(() => {\r\n dispatch(incrementByAmount(amount));\r\n }, 1000);\r\n};\r\n\r\n// The function below is called a selector and allows us to select a value from\r\n// the state. Selectors can also be defined inline where they're used instead of\r\n// in the slice file. For example: `useSelector((state) => state.counter.value)`\r\nexport const selectCount = state => state.counter.value;\r\n\r\nexport default counterSlice.reducer;\r\n","import React, { useState } from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport AccessAlarmIcon from '@material-ui/icons/AccessAlarm';\r\nimport AccessAlarmIcon2Tone from '@material-ui/icons/AccessAlarmTwoTone';\r\nimport AddCircleIcon from '@material-ui/icons/AddCircle';\r\nimport {\r\n decrement,\r\n increment,\r\n incrementByAmount,\r\n incrementAsync,\r\n selectCount,\r\n} from './counterSlice';\r\nimport styles from './Counter.module.css';\r\n\r\nexport function Counter() {\r\n const count = useSelector(selectCount);\r\n const dispatch = useDispatch();\r\n const [incrementAmount, setIncrementAmount] = useState('2');\r\n\r\n return (\r\n \r\n
\r\n }\r\n \r\n
\r\n \r\n {url === '/invoices' && {\r\n if (reason !== 'backdropClick') {\r\n handleModalClose();\r\n }\r\n }}\r\n disableEscapeKeyDown\r\n >\r\n
\r\n \r\n \r\n Login expired\r\n \r\n \r\n \r\n You've been logged out due to inactivity. Please re-authenticate to continue\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 LogisenseLogo from 'assets/images/logiSense/logisense_login_logo.png'\r\n\r\nexport default (props) => {\r\n return (\r\n \r\n
\r\n \r\n dispatch(increment())}\r\n >\r\n +\r\n \r\n {count}\r\n dispatch(decrement())}\r\n >\r\n -\r\n \r\n
\r\n \r\n setIncrementAmount(e.target.value)}\r\n />\r\n \r\n dispatch(incrementByAmount(Number(incrementAmount) || 0))\r\n }\r\n >\r\n Add Amount\r\n \r\n dispatch(incrementAsync(Number(incrementAmount) || 0))}\r\n >\r\n Add Async\r\n \r\n
\r\n Check your Email
\r\n \r\n
\r\n {resendCount > 0 && \r\n Hello {userName},
\r\n We've sent you an email with a link to finish resetting your password.
\r\n \r\n \r\n Resend the Email\r\n \r\n \r\n Return to Login\r\n \r\n
\r\n \r\n Email has been resent {resendCount} times\r\n
\r\n }\r\n Forgot your Password?
\r\n \r\n Enter New 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 \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default App;\r\n","import {useEffect} from 'react';\r\n\r\nexport default function (resourceUrl) {\r\n useEffect(() => {\r\n const script = document.createElement('script');\r\n script.src = resourceUrl;\r\n script.async = true;\r\n document.body.appendChild(script);\r\n return () => {\r\n document.body.removeChild(script);\r\n }\r\n }, [resourceUrl]);\r\n}","import { configureStore } from '@reduxjs/toolkit';\r\nimport counterReducer from 'counter/counterSlice';\r\n\r\nexport default configureStore({\r\n reducer: {\r\n counter: counterReducer,\r\n },\r\n});\r\n","// This optional code is used to register a service worker.\r\n// register() is not called by default.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on subsequent visits to a page, after all the\r\n// existing tabs open on the page have been closed, since previously cached\r\n// resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model and instructions on how to\r\n// opt-in, read https://bit.ly/CRA-PWA\r\n\r\nconst isLocalhost = Boolean(\r\n window.location.hostname === 'localhost' ||\r\n // [::1] is the IPv6 localhost address.\r\n window.location.hostname === '[::1]' ||\r\n // 127.0.0.0/8 are considered localhost for IPv4.\r\n window.location.hostname.match(\r\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\r\n )\r\n);\r\n\r\nexport function register(config) {\r\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n // The URL constructor is available in all browsers that support SW.\r\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\r\n if (publicUrl.origin !== window.location.origin) {\r\n // Our service worker won't work if PUBLIC_URL is on a different origin\r\n // from what our page is served on. This might happen if a CDN is used to\r\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\r\n return;\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n\r\n if (isLocalhost) {\r\n // This is running on localhost. Let's check if a service worker still exists or not.\r\n checkValidServiceWorker(swUrl, config);\r\n\r\n // Add some additional logging to localhost, pointing developers to the\r\n // service worker/PWA documentation.\r\n navigator.serviceWorker.ready.then(() => {\r\n console.log(\r\n 'This web app is being served cache-first by a service ' +\r\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\r\n );\r\n });\r\n } else {\r\n // Is not localhost. Just register service worker\r\n registerValidSW(swUrl, config);\r\n }\r\n });\r\n }\r\n}\r\n\r\nfunction registerValidSW(swUrl, config) {\r\n navigator.serviceWorker\r\n .register(swUrl)\r\n .then(registration => {\r\n registration.onupdatefound = () => {\r\n const installingWorker = registration.installing;\r\n if (installingWorker == null) {\r\n return;\r\n }\r\n installingWorker.onstatechange = () => {\r\n if (installingWorker.state === 'installed') {\r\n if (navigator.serviceWorker.controller) {\r\n // At this point, the updated precached content has been fetched,\r\n // but the previous service worker will still serve the older\r\n // content until all client tabs are closed.\r\n console.log(\r\n 'New content is available and will be used when all ' +\r\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\r\n );\r\n\r\n // Execute callback\r\n if (config && config.onUpdate) {\r\n config.onUpdate(registration);\r\n }\r\n } else {\r\n // At this point, everything has been precached.\r\n // It's the perfect time to display a\r\n // \"Content is cached for offline use.\" message.\r\n console.log('Content is cached for offline use.');\r\n\r\n // Execute callback\r\n if (config && config.onSuccess) {\r\n config.onSuccess(registration);\r\n }\r\n }\r\n }\r\n };\r\n };\r\n })\r\n .catch(error => {\r\n console.error('Error during service worker registration:', error);\r\n });\r\n}\r\n\r\nfunction checkValidServiceWorker(swUrl, config) {\r\n // Check if the service worker can be found. If it can't reload the page.\r\n fetch(swUrl, {\r\n headers: { 'Service-Worker': 'script' },\r\n })\r\n .then(response => {\r\n // Ensure service worker exists, and that we really are getting a JS file.\r\n const contentType = response.headers.get('content-type');\r\n if (\r\n response.status === 404 ||\r\n (contentType != null && contentType.indexOf('javascript') === -1)\r\n ) {\r\n // No service worker found. Probably a different app. Reload the page.\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister().then(() => {\r\n window.location.reload();\r\n });\r\n });\r\n } else {\r\n // Service worker found. Proceed as normal.\r\n registerValidSW(swUrl, config);\r\n }\r\n })\r\n .catch(() => {\r\n console.log(\r\n 'No internet connection found. App is running in offline mode.'\r\n );\r\n });\r\n}\r\n\r\nexport function unregister() {\r\n if ('serviceWorker' in navigator) {\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister();\r\n });\r\n }\r\n}\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport {Provider} from 'react-redux';\r\n\r\nimport CssBaseline from '@material-ui/core/CssBaseline';\r\n\r\nimport App from './app/App';\r\nimport store from './app/store';\r\nimport * as serviceWorker from './serviceWorker';\r\nimport './ApplicationStubs.js'\r\nimport './import.js'\r\nimport loadDayjsPlugins from './assets/dayjsPlugins.js'\r\n\r\n\r\n// Load plugins for dayjs\r\nloadDayjsPlugins();\r\n\r\nReactDOM.render(\r\n