\r\n onChangeHandler('name', value)}\r\n />\r\n {parentSelect.error ? (\r\n onChangeHandler('parent', value)}\r\n label='Parent Account'\r\n loading={parentSelect.loading}\r\n getOptionDisabled={(option) => +option?.level < 2}\r\n options={parentSelect.data}\r\n value={data.parent}\r\n />\r\n )}\r\n {data.parent &&\r\n (codeSelect.error ? (\r\n onChangeHandler('code', value)}\r\n value={data.code}\r\n />\r\n ))}\r\n onChangeHandler('openingBalance', value)}\r\n />\r\n onChangeHandler('startDate', val)}\r\n inputFormat='MM/dd/yyyy'\r\n renderInput={(params) =>
\r\n Create Account
\r\n{parseErrorMessage(parentSelect.error)}
\r\n ) : (\r\n {parseErrorMessage(codeSelect.error)}
\r\n ) : codeSelect.loading ? (\r\n \r\n {error &&
\r\n \r\n );\r\n};\r\n\r\nexport default CreateAccountDrawer;\r\n\r\nCreateAccountDrawer.propTypes = {\r\n open: PropTypes.bool,\r\n onClose: PropTypes.func,\r\n onSubmit: PropTypes.func,\r\n loading: PropTypes.bool,\r\n error: PropTypes.any,\r\n parentSelect: PropTypes.object,\r\n codeSelect: PropTypes.object\r\n};\r\n","import CreateAccount from './CreateAccount';\r\nexport default CreateAccount;\r\n","var api = require(\"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./style.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./style.scss\",\n function () {\n content = require(\"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./style.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useEffect, useState } from 'react';\r\nimport Drawer from 'components/common/Drawer';\r\nimport PropTypes from 'prop-types';\r\nimport './style.scss';\r\nimport { Divider } from '@mui/material';\r\nimport TextField from 'components/common/TextField';\r\nimport AutoComplete from 'components/common/AutoCompleteNew';\r\nimport { DatePicker } from '@mui/lab';\r\nimport Button from 'components/common/Button';\r\nimport { parseErrorMessage } from 'services/webApi';\r\nimport { select } from 'async';\r\nimport LoadingSpinner from 'components/common/LoadingSpinner';\r\n\r\nconst EditAccountDrawer = (props) => {\r\n const {\r\n open,\r\n onClose,\r\n onSubmit = () => {},\r\n loading,\r\n error,\r\n parentSelect = {\r\n data: [],\r\n error: null,\r\n loading: false,\r\n onSelect: () => {}\r\n },\r\n editData = {}\r\n } = props;\r\n const editDate = new Date(editData.startDate * 1000);\r\n\r\n const initialEditData = {\r\n code: null,\r\n name: '',\r\n description: null,\r\n parent: null,\r\n openingBalance: 0,\r\n startDate: editDate\r\n };\r\n\r\n const [data, setData] = useState(initialEditData);\r\n\r\n useEffect(() => {\r\n if (open) {\r\n setData((prev) => ({\r\n ...prev,\r\n name: editData.name,\r\n parent:\r\n parentSelect.data.find((d) => d.id === editData.masterId) || null,\r\n openingBalance: editData.openingBalance\r\n }));\r\n }\r\n }, [editData, parentSelect.data]);\r\n\r\n const onChangeHandler = (name, value) => {\r\n setData((prev) => ({ ...prev, [name]: value }));\r\n\r\n if (name === 'parent' && value) {\r\n parentSelect.onSelect(value.id);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n setData((prev) => ({ ...prev, startDate: editDate }));\r\n }, [editData.startDate]);\r\n\r\n const onSubmitHandler = () => {\r\n onSubmit({\r\n name: data.name,\r\n description: null,\r\n accountBalance: data.openingBalance,\r\n masterId: data.parent?.id || editData.masterId,\r\n startDate: 1673680720.487,\r\n id: editData.id\r\n });\r\n };\r\n\r\n return (\r\n {parseErrorMessage(error)}
}\r\n \r\n \r\n\r\n onSubmit(data)}\r\n >\r\n Create Account\r\n \r\n
\r\n \r\n onChangeHandler('name', value)}\r\n />\r\n {parentSelect.error ? (\r\n onChangeHandler('parent', value)}\r\n label='Parent Account'\r\n loading={parentSelect.loading}\r\n getOptionDisabled={(option) => +option?.level < 2}\r\n options={parentSelect.data}\r\n value={data.parent}\r\n />\r\n )}\r\n onChangeHandler('openingBalance', value)}\r\n />\r\n onChangeHandler('startDate', value)}\r\n inputFormat='MM/dd/yyyy'\r\n renderInput={(params) =>
\r\n Edit Account
\r\n{parseErrorMessage(parentSelect.error)}
\r\n ) : parentSelect.loading ? (\r\n \r\n {error &&
\r\n {parseErrorMessage(error)}
}\r\n \r\n \r\n\r\n \r\n Save Changes\r\n \r\n
\r\n \r\n setIsTransferPanelOpen(false)}\r\n accountsData={accountsData}\r\n onDoneTransfer={refetchAccounts}\r\n />\r\n
\r\n );\r\n}\r\n\r\nAccounts.propTypes = {\r\n children: PropTypes.node,\r\n location: PropTypes.object\r\n};\r\n","import { connect } from 'react-redux';\r\nimport Accounts from './Accounts';\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Accounts);\r\n","import AccountsCard from 'components/AccountsCard';\r\nimport React, { useCallback, useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from 'components/common/Button';\r\nimport LoadingSpinner from 'components/common/LoadingSpinner';\r\nimport ArrowForwardIcon from '@mui/icons-material/ArrowForward';\r\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack';\r\nimport 'react-responsive-carousel/lib/styles/carousel.min.css';\r\nimport { Carousel } from 'react-responsive-carousel';\r\nimport { createNestedArray } from 'services/arrays';\r\nimport './styles/accountsCardContainer.scss';\r\nimport { useCancelPromise, useMobile } from 'services/hooks';\r\n\r\nexport default function AccountsCardContainer({\r\n isAccountsLoading,\r\n accountsData,\r\n onSelectAccount,\r\n selectedAccount,\r\n setError,\r\n totalRows\r\n}) {\r\n const isMobileNarrow = useMobile(55);\r\n const isMobileWide = useMobile(90);\r\n const [initialCarouselPage, setInitialCarouselPage] = useState(0);\r\n\r\n const setCardsPerPage = () => {\r\n if (isMobileNarrow) {\r\n return 1;\r\n } else if (isMobileWide) {\r\n return 2;\r\n }\r\n return 3;\r\n };\r\n const accountArray = createNestedArray(accountsData, setCardsPerPage());\r\n\r\n useEffect(() => {\r\n const selectedItemIndex = accountsData.findIndex((account) => account.Id === selectedAccount);\r\n setInitialCarouselPage(Math.floor(selectedItemIndex / setCardsPerPage()));\r\n }, [selectedAccount]);\r\n\r\n return (\r\n \r\n Account Transactions\r\n
\r\n {parseErrorMessage(error || accountError, 'en-US')}
\r\n \r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n
}\r\n \r\n \r\n hasPrev && (\r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n renderArrowNext={(onClickHandler, hasNext, label) =>\r\n hasNext && (\r\n \r\n \r\n
\r\n )\r\n }\r\n >\r\n {accountArray.slice(0).map((subArray, index) => {\r\n return (\r\n \r\n {subArray.map((accountData, index) => {\r\n return (\r\n
\r\n );\r\n })}\r\n \r\n
\r\n );\r\n}\r\n\r\nAccountsFilter.propTypes = {\r\n fromDate: PropTypes.date,\r\n toDate: PropTypes.date,\r\n searchText: PropTypes.string,\r\n setFromDate: PropTypes.func,\r\n setToDate: PropTypes.func,\r\n setSearchText: PropTypes.func,\r\n onApplyFilter: PropTypes.func\r\n};\r\n","import AccountsFilter from './AccountsFilter';\r\n\r\nexport default AccountsFilter;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./accountsFilter.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./accountsFilter.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./accountsFilter.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { parseErrorMessage, updateGlCode } from 'services/webApi';\r\nimport LoadingSpinner from 'components/common/LoadingSpinner';\r\nimport TableHeader from 'components/common/TableHeader';\r\nimport Alert from 'components/common/Alert';\r\nimport { Checkbox, Table, TableBody, TableCell, TableContainer, TablePagination, TableRow } from '@mui/material';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport Button from 'components/common/Button';\r\nimport './styles/accountsTransactionsTable.scss';\r\nimport NoResultsSection from 'components/NoResultsSection';\r\nimport { formatCurrency } from 'services/currency';\r\n\r\nexport default function AccountsTransactionsTable({\r\n onApplyPagination,\r\n isLoading,\r\n error,\r\n transactions,\r\n totalRows,\r\n pageNumber,\r\n setPageNumber,\r\n rowsPerPage,\r\n setRowsPerPage,\r\n rowsPerPageOptions,\r\n order,\r\n setOrder,\r\n orderBy,\r\n setOrderBy,\r\n setSelectedTransaction,\r\n setAlertOpen,\r\n setAlertMessage,\r\n setTransactions\r\n}) {\r\n const [transactionsSelection, setTransactionsSelection] = useState([]);\r\n const transactionHeaders = [\r\n { id: 'TransactionDate', label: 'Date', width: '2rem' },\r\n { id: 'Description', label: 'Transaction', width: '25rem' },\r\n { id: 'Amount', label: 'Amount', width: '2rem' },\r\n { id: 'RemainingBalance', label: 'Balance', width: '2rem' }\r\n ];\r\n\r\n const handleSelectAll = (event) => {\r\n if (event.target.checked) {\r\n const newSelection = transactions.map((item) => item.id);\r\n setTransactionsSelection(newSelection);\r\n return;\r\n }\r\n setTransactionsSelection([]);\r\n };\r\n\r\n const handleChangePage = (event, newPage) => {\r\n setPageNumber(newPage);\r\n onApplyPagination({ pageNumber: newPage, rowsPerPage: rowsPerPage, order: order, orderBy: orderBy });\r\n };\r\n\r\n const handleChangeRowsPerPage = (event) => {\r\n const numOfRows = parseInt(event.target.value, 10);\r\n setRowsPerPage(numOfRows);\r\n setPageNumber(0);\r\n onApplyPagination({ pageNumber: 0, rowsPerPage: numOfRows, order: order, orderBy: orderBy });\r\n };\r\n\r\n const handleRowKeypress = (event, transaction) => {\r\n if (event.charCode === 13) {\r\n setSelectedTransaction(event, transaction);\r\n }\r\n };\r\n\r\n const handleRequestSort = (event, orderByParam) => {\r\n const orderParam = (orderBy === orderByParam && order === 'asc') ? 'desc' : 'asc';\r\n setOrder(orderParam);\r\n setOrderBy(orderByParam);\r\n onApplyPagination({ pageNumber: pageNumber, rowsPerPage: rowsPerPage, order: orderParam, orderBy: orderByParam });\r\n };\r\n\r\n return (\r\n \r\n
\r\n {advancedOpen && (\r\n \r\n
\r\n \r\n setAdvancedOpen(!advancedOpen)}\r\n className=\"accounts-filter__filter__actions__advanced-toggle\"\r\n >\r\n Advanced\r\n
\r\n \r\n
\r\n \r\n setFromDate(new Date(val).toLocaleDateString('sv'))}\r\n inputFormat=\"MM/dd/yyyy\"\r\n renderInput={(params) => setToDate(new Date(val).toLocaleDateString('sv'))}\r\n inputFormat=\"MM/dd/yyyy\"\r\n renderInput={(params) =>
\r\n )}\r\n \r\n {error && \r\n {transactionsSelection.length > 0 && \r\n \r\n
\r\n {transactions.length === 0 && !isLoading &&\r\n \r\n {transactions.length !== 0 &&\r\n }\r\n
\r\n );\r\n};\r\n\r\nAccountsTransactionsTable.propTypes = {\r\n onApplyPagination: PropTypes.func,\r\n isLoading: PropTypes.bool,\r\n error: PropTypes.string,\r\n transactions: PropTypes.arrayOf(PropTypes.object),\r\n totalRows: PropTypes.number,\r\n pageNumber: PropTypes.number,\r\n setPageNumber: PropTypes.func,\r\n rowsPerPage: PropTypes.number,\r\n setRowsPerPage: PropTypes.func,\r\n rowsPerPageOptions: PropTypes.array,\r\n order: PropTypes.string,\r\n setOrder: PropTypes.func,\r\n orderBy: PropTypes.string,\r\n setOrderBy: PropTypes.func,\r\n setSelectedTransaction: PropTypes.func,\r\n setAlertOpen: PropTypes.func,\r\n setAlertMessage: PropTypes.func,\r\n setTransactions: PropTypes.func\r\n};\r\n","import { connect } from 'react-redux';\r\nimport TransactionsTable from './AccountsTransactionsTable';\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(TransactionsTable);\r\n","import AccountsTransactionsTableContainer from './AccountsTransactionsTableContainer';\r\n\r\nexport default AccountsTransactionsTableContainer;\r\n","var api = require(\"!../../../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./accountsTransactionsTable.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./accountsTransactionsTable.scss\",\n function () {\n content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./accountsTransactionsTable.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Drawer from 'components/common/Drawer';\r\nimport Button from 'components/common/Button';\r\nimport { Divider } from '@mui/material';\r\nimport './styles/transferFunds.scss';\r\nimport ArrowForwardIcon from '@mui/icons-material/ArrowForward';\r\nimport useTransferFunds from './hooks/useTransferFunds';\r\nimport TransferFundsEFT from './components/TransferFundsEFT';\r\nimport TransferFundsETransfer from './components/TransferFundsETransfer';\r\nimport TransferFundsAccounts from './components/TransferFundsAccounts/TransferFundsAccounts';\r\nimport { getAllEFTPayeeAccounts, getAllETransferPayeeAccounts, getAllExternalAccount } from 'services/webApi/accountsApi';\r\nimport TonUpEtransfer from './components/TonUpEtransfer';\r\nimport TopUpEtransferReview from './components/TopUpEtransferReview';\r\n\r\nexport default function TransferFunds({\r\n open,\r\n onClose,\r\n accountsData,\r\n externalAccounts,\r\n externalBankAccounts,\r\n selectedAccount,\r\n onDoneTransfer\r\n}) {\r\n const {\r\n isTransferBetweenAccounts,\r\n isEtransfer,\r\n isTransferContact,\r\n topUpAmount,\r\n isDisabled,\r\n error,\r\n isReviewTransfer,\r\n isTransferSuccess,\r\n pageView,\r\n setPageView,\r\n setIsTransferBetweenAccounts,\r\n setIsEtransfer,\r\n setIsTransferContact,\r\n setTonUpEtransfer,\r\n setIsDisabled,\r\n setIsLoading,\r\n setError,\r\n setIsTransferSuccess,\r\n setIsReviewTransfer,\r\n resetStates,\r\n handlePrevious\r\n } = useTransferFunds();\r\n\r\n const closePanel = () => {\r\n onDoneTransfer(isTransferSuccess);\r\n resetStates();\r\n onClose();\r\n };\r\n\r\n const [eftPayees, setEFTPayees] = useState([]);\r\n const [eTransferPayees, setEtransferPayees] = useState([]);\r\n\r\n useEffect(() => {\r\n refetchEFTPayees();\r\n refetchEtransferPayees();\r\n }, []);\r\n\r\n const refetchEtransferPayees = () => {\r\n getAllETransferPayeeAccounts()\r\n .then((res) => {\r\n setEtransferPayees(res.data.result);\r\n })\r\n .catch(err => {\r\n setError(err);\r\n setIsLoading(false);\r\n });\r\n };\r\n\r\n const refetchEFTPayees = () => {\r\n getAllEFTPayeeAccounts()\r\n .then((res) => {\r\n setEFTPayees(res.data.result);\r\n })\r\n .catch(err => {\r\n setError(err);\r\n setIsLoading(false);\r\n });\r\n };\r\n\r\n const isTransferPage = (isTransferBetweenAccounts && !isTransferSuccess) || (isEtransfer && !isTransferSuccess) || (isTransferContact && !isTransferSuccess) || topUpAmount;\r\n\r\n return (\r\n \r\n \r\n
}\r\n \r\n
}\r\n {isTransferContact &&\r\n \r\n Transfer funds\r\n
\r\n \r\n Send money to an external account or transfer between your Fuse accounts.\r\n
\r\n \r\n {/* TODO Enable for R3 Transfer to Payees */}\r\n { setTonUpEtransfer(topUpAmount) }} />\r\n
\r\n \r\n } className='transfer-fund__nav__btn' onClick={() => { setIsTransferContact(true) }}>\r\n Send bank transfer to payee\r\n \r\n
\r\n \r\n } className='transfer-fund__nav__btn' onClick={() => { setIsEtransfer(true) }}>\r\n Send E-Transfer to payee\r\n \r\n
\r\n \r\n } className='transfer-fund__nav__btn' onClick={() => { setIsTransferBetweenAccounts(true) }}>\r\n Transfer between my accounts\r\n \r\n
\r\n \r\n {error && selectContactPayee(event, value)}\r\n blurOnSelect\r\n loading={isLoading}\r\n />\r\n
\r\n );\r\n}\r\n\r\ncontactPayees.propTypes = {\r\n selectContactPayee: PropTypes.func,\r\n contactPayee: PropTypes.object,\r\n contactPayeeList: PropTypes.array\r\n};\r\n","import ContactPayees from './ContactPayees';\r\n\r\nexport default ContactPayees;\r\n","var api = require(\"!../../../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./contactPayees.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./contactPayees.scss\",\n function () {\n content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./contactPayees.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState, useEffect } from 'react';\r\nimport Button from 'components/common/Button';\r\nimport { InputAdornment, Card as MUICard, Divider } from '@mui/material';\r\nimport './styles/managePayees.scss';\r\nimport useManagePayees from './hooks/useManagePayees';\r\nimport { parseErrorMessage, getContactPayees } from 'services/webApi';\r\nimport PayeesTable from '../PayeesTable';\r\nimport PayeesInfo from '../PayeesInfo/PayeesInfo';\r\nimport PayeesInfoForm from '../PayeesInfoForm/PayeesInfoForm';\r\nimport Alert from 'components/common/Alert';\r\nimport PropTypes from 'prop-types';\r\nimport AddIcon from '@mui/icons-material/Add';\r\n\r\nexport default function ManagePayees({\r\n contactPayeeList,\r\n setPageView,\r\n onCreateEtransferPayee,\r\n onCreateEFTPayee\r\n}) {\r\n const {\r\n locale,\r\n error,\r\n isDisabled,\r\n isLoading,\r\n isPayeeView,\r\n isPayeeEdit,\r\n selectedPayee,\r\n alertOpen,\r\n alertMessage,\r\n setIsPayeeEdit,\r\n setAlertOpen,\r\n setAlertMessage,\r\n selectPayeeView,\r\n selectPayeeEdit,\r\n navigateToPayeeList\r\n } = useManagePayees(onCreateEtransferPayee, onCreateEFTPayee);\r\n\r\n return (\r\n \r\n {parseErrorMessage(error)}\r\n
}\r\n \r\n
\r\n {!isPayeeEdit && \r\n {isPayeeView ? `${selectedPayee.PayeeName}` : 'Payees'}\r\n
\r\n \r\n {error && !isLoading &&\r\n
}\r\n \r\n {parseErrorMessage(error, locale)}\r\n
}\r\n \r\n {isPayeeView && }\r\n {!isPayeeEdit && !isPayeeView && }\r\n {!isPayeeEdit && !isPayeeView && } onClick={() => { setIsPayeeEdit(true) }} disabled={isDisabled} isLoading={isLoading}>\r\n Create Contact\r\n }\r\n
\r\n \r\n selectPayeeEdit(e, selectedPayee)} label='Edit Customer' />\r\n
\r\n Contact Details
\r\n \r\n First Name\r\n
\r\n \r\n {selectedPayee?.partnerIntermediaryAccountInfo?.firstName}\r\n
\r\n \r\n Last Name\r\n
\r\n \r\n {selectedPayee?.partnerIntermediaryAccountInfo?.lastName}\r\n
\r\n \r\n Business Name\r\n
\r\n \r\n {selectedPayee?.partnerIntermediaryAccountInfo?.tradeName}\r\n
\r\n {!!selectedPayee?.partnerIntermediaryAccountInfo?.financialInstitutionId && Banking Details
\r\n \r\n Description\r\n
\r\n \r\n {selectedPayee?.partnerIntermediaryAccountInfo?.financialImage}\r\n
\r\n \r\n Financial Institution\r\n
\r\n \r\n {selectedPayee?.partnerIntermediaryAccountInfo?.financialInstitutionId}\r\n
\r\n \r\n Transit\r\n
\r\n \r\n {selectedPayee?.partnerIntermediaryAccountInfo?.financialInstitutionBranchId}\r\n
\r\n \r\n Account\r\n
\r\n \r\n {selectedPayee?.partnerIntermediaryAccountInfo?.externalBankAccountNumber}\r\n
\r\n E-Transfer Details
\r\n \r\n Email\r\n
\r\n \r\n {selectedPayee?.partnerIntermediaryAccountInfo?.registeredEmail}\r\n
\r\n \r\n Phone number\r\n
\r\n \r\n {selectedPayee?.partnerIntermediaryAccountInfo?.phoneNumber}\r\n
\r\n \r\n Security Question\r\n
\r\n \r\n {selectedPayee?.partnerIntermediaryAccountInfo?.securityQuestion}\r\n
\r\n \r\n Security Answer\r\n
\r\n \r\n {selectedPayee?.partnerIntermediaryAccountInfo?.securityAnswer}\r\n
\r\n \r\n handlePayeeArchive()}\r\n flavourText={'This contact will be archived and no longer appear in your contacts list.'}\r\n headerText={'Archive Contact'} />}\r\n
\r\n \r\n {isEdit ? `Edit ${selectedPayee.PayeeName}` : 'Create Payee'}\r\n
\r\n \r\n {isEdit && \r\n {error && !isLoading && (\r\n
\r\n {parseErrorMessage(error, locale)}
\r\n )}\r\n \r\n {\r\n {\r\n onSavePayee();\r\n }}\r\n >\r\n Cancel\r\n \r\n }\r\n {\r\n \r\n Save Changes\r\n \r\n }\r\n
\r\n \r\n \r\n \r\n
\r\n { payees.length === 0 &&\r\n \r\n
\r\n );\r\n}\r\n\r\nPayeesTable.propTypes = {\r\n payees: PropTypes.array,\r\n selectPayeeView: PropTypes.func,\r\n selectPayeeEdit: PropTypes.func\r\n};\r\n","import PayeesTable from './PayeesTable';\r\n\r\nexport default PayeesTable;\r\n","var api = require(\"!../../../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./payeesTable.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./payeesTable.scss\",\n function () {\n content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./payeesTable.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState } from 'react';\r\nimport TextField from '../../../../../common/TextField';\r\nimport { InputAdornment } from '@mui/material';\r\nimport Button from '../../../../../common/Button';\r\nimport PropTypes from 'prop-types';\r\nimport './styles/topUpEtransfer.scss';\r\n\r\nexport default function TonUpEtransfer({ onClick }) {\r\n const [amount, setAmount] = useState(0);\r\n\r\n function handleInput(value) {\r\n const number = Number(value);\r\n\r\n (number || value.length === 0) && setAmount(number);\r\n }\r\n\r\n function handleClick() {\r\n onClick(amount);\r\n }\r\n\r\n return (\r\n \r\n
);\r\n};\r\n\r\nTonUpEtransfer.propTypes = {\r\n onClick: PropTypes.func\r\n};\r\n","import TonUpEtransfer from './TonUpEtransfer';\r\n\r\nexport default TonUpEtransfer;\r\n","var api = require(\"!../../../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./topUpEtransfer.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./topUpEtransfer.scss\",\n function () {\n content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./topUpEtransfer.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Divider } from '@mui/material';\r\nimport { parseErrorMessage } from '../../../../../../services/webApi';\r\nimport Button from '../../../../../common/Button';\r\nimport { formatCurrency } from '../../../../../../services/currency';\r\nimport { useTopUpEtransferReview } from './hooks/useTopUpEtransferReview';\r\n\r\nexport default function TopUpEtransferReview({ amount, accountData, closePanel, eTransferPayees }) {\r\n const {\r\n isTransferSuccess,\r\n isLoading,\r\n error,\r\n locale,\r\n closeAccountsPanel,\r\n formattedDate,\r\n moneyRequest\r\n } = useTopUpEtransferReview(closePanel, eTransferPayees, accountData, amount);\r\n\r\n return Quick Top-Up
\r\n Quickly fund your main Fuse account from your saved E-Transfer account. View your saved account here.
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {!isTransferSuccess ? 'Review your top-up' : 'Top-up initiated'}\r\n
\r\n {!isTransferSuccess && \r\n Move up to $25,000 in a single top-up.\r\n
}\r\n Date
\r\n \r\n {formattedDate}\r\n
\r\n From
\r\n \r\n Email\r\n
\r\n \r\n {accountData?.bridgeCustomer?.interacEmail}\r\n
\r\n To
\r\n \r\n {accountData?.bridgeMainAccount[0]?.accountName}\r\n
\r\n \r\n {accountData?.bridgeMainAccount[0]?.accountNumber}\r\n
\r\n \r\n {isTransferSuccess ? 'Pending Balance' : 'Balance'}\r\n
\r\n \r\n {isTransferSuccess ? formatCurrency(accountData?.bridgeMainAccount[0]?.balance + amount) : formatCurrency(accountData?.bridgeMainAccount[0]?.Balance)}\r\n
\r\n Amount
\r\n \r\n {formatCurrency(amount)}\r\n
\r\n \r\n
\r\n \r\n {parseErrorMessage(error, locale)}\r\n
}\r\n \r\n {!isTransferSuccess && }\r\n\r\n {!isTransferSuccess && }\r\n {isTransferSuccess && }\r\n
\r\n \r\n \r\n extractAccountData(e.target.value, selectedTransferToAccount, accountsData, eftPayees, true)}\r\n />\r\n handleToAccountSelection(e.target.value)}\r\n />\r\n {accountError &&\r\n $ }}\r\n />\r\n }\r\n
\r\n \r\n {!isTransferSuccess && (isReviewTransfer ? 'Review your transfer' : 'Transfer between accounts')}\r\n {isTransferSuccess && 'Funds transfer initiated'}\r\n
\r\n From
\r\n To
\r\n \r\n {parseErrorMessage(accountError, locale)}\r\n
}\r\n Amount
\r\n \r\n
\r\n \r\n {parseErrorMessage(error, locale)}\r\n
}\r\n \r\n {!isTransferSuccess && }\r\n {!isReviewTransfer && }\r\n {isReviewTransfer && !isTransferSuccess && }\r\n {isTransferSuccess && }\r\n
\r\n \r\n \r\n { extractAccountData(e.target.value) }} />\r\n }\r\n
\r\n \r\n {!isTransferSuccess && (isReviewTransfer ? 'Review your bank transfer' : 'Send a bank transfer')}\r\n {isTransferSuccess && 'Bank transfer sent'}\r\n
\r\n From
\r\n \r\n To\r\n setIsEditing(true)} label='Manage Payees' />\r\n
\r\n Amount
\r\n Message
\r\n \r\n
\r\n \r\n {parseErrorMessage(error, locale)}\r\n
}\r\n \r\n {!isTransferSuccess && }\r\n {!isReviewTransfer && }\r\n {isReviewTransfer && !isTransferSuccess && }\r\n {isTransferSuccess && }\r\n
\r\n \r\n \r\n { extractAccountData(e.target.value, accountsData) }}\r\n />\r\n }\r\n
\r\n \r\n {!isTransferSuccess && (isReviewTransfer ? 'Review your E-Transfer' : 'Send an E-Transfer')}\r\n {isTransferSuccess && 'E-Transfer sent'}\r\n
\r\n From
\r\n To\r\n setPageView('manageContacts')} label='Manage Payees' />\r\n
\r\n Send E-Transfer using
\r\n \r\n selectTransferMethod(e.target.value)}\r\n items={transferTypes}\r\n row\r\n value={transferType}\r\n />\r\n
\r\n \r\n Security Question: { contactPayee?.partnerIntermediaryAccountInfo?.securityQuestion }\r\n
\r\n \r\n Security Answer: { contactPayee?.partnerIntermediaryAccountInfo?.securityAnswer }\r\n
\r\n Amount
\r\n Message
\r\n \r\n
\r\n \r\n {parseErrorMessage(error, locale)}\r\n
}\r\n \r\n {!isTransferSuccess && }\r\n {!isReviewTransfer && }\r\n {isReviewTransfer && !isTransferSuccess && }\r\n {isTransferSuccess && }\r\n
\r\n Date
\r\n \r\n {formattedDate}\r\n
\r\n \r\n
\r\n From
\r\n \r\n {selectedFromAccount.AccountName || selectedFromAccount.PayeeName}\r\n
\r\n {!selectedFromAccount.PayeeId && \r\n {selectedFromAccount.AccountNumber}\r\n
\r\n \r\n {isTransferSuccess ? 'New Balance' : 'Balance'}\r\n
}\r\n {selectedFromAccount.PayeeId && \r\n {isTransferSuccess ? formatCurrency(selectedFromAccount.Balance - transferAmount) : formatCurrency(selectedFromAccount.Balance)}\r\n
\r\n \r\n {'E-Transfer'}\r\n
}\r\n \r\n {selectedFromAccount.PayeeEmail}\r\n
\r\n \r\n \r\n }\r\n {(transferMethod === 'EFT' || transferMethod === 'betweenAccounts') &&\r\n \r\n }\r\n {selectedToAccount.Balance &&
\r\n To
\r\n {contactPayee && \r\n {`${contactPayee.PayeeName}`}\r\n
\r\n {contactPayee.businessName && \r\n {contactPayee.businessName}\r\n
}\r\n \r\n {selectedToAccount.AccountName || selectedToAccount.PayeeName || selectedToAccount.accountName}\r\n
}\r\n {transferMethod === 'ETransfer' &&\r\n \r\n {selectedToAccount.AccountNumber || selectedToAccount.PayeeEmail || selectedToAccount.accountNumber}\r\n
\r\n \r\n {transferType}\r\n
\r\n \r\n {transferType === 'Email' ? selectedToAccount.PayeeEmail : selectedToAccount.textNumber}\r\n
\r\n \r\n {selectedToAccount.question}\r\n
\r\n \r\n {isTransferSuccess ? 'New Balance' : 'Balance'}\r\n
}\r\n \r\n {isTransferSuccess ? formatCurrency(Number(selectedToAccount.Balance) + Number(transferAmount)) : formatCurrency(selectedToAccount.Balance)}\r\n
\r\n Amount
\r\n \r\n {formatCurrency(transferAmount)}\r\n
\r\n {showMessage && \r\n
}\r\n Message
\r\n \r\n {showMessage}\r\n
\r\n \r\n { onSelectAccount(accountData.Id) }} data-testid='account-card'>\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nAccountsCard.propTypes = {\r\n accountData: PropTypes.object.isRequired,\r\n onSelectAccount: PropTypes.func,\r\n selectedAccount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n setError: PropTypes.func,\r\n totalRows: PropTypes.number\r\n};\r\n","import AccountsCard from './AccountsCard';\r\n\r\nexport default AccountsCard;\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./AccountsCard.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./AccountsCard.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./AccountsCard.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { ButtonBase, Card as MUICard, CardContent, CardHeader, Card, CardActionArea } from '@mui/material';\r\nimport { formatCurrency } from 'services/currency';\r\nimport { getAccountTransactionsList } from 'services/webApi';\r\nimport FuseIcon from 'components/common/FuseIcon';\r\nimport Button from 'components/common/Button';\r\nimport InsertLinkOutlinedIcon from '@mui/icons-material/InsertLinkOutlined';\r\nimport { browserHistory } from 'react-router';\r\nimport './styles/accountsCardLarge.scss';\r\n\r\nexport default function AccountsCardLarge({ accountData, onSelectAccount, selectedAccount, isExternal, handleTransferFunds }) {\r\n const activeClassName = 'account-card-large__preview__active';\r\n const notActiveClassName = 'account-card-large__preview__not-active';\r\n const [transactionNumber, setTransactionNumber] = useState(0);\r\n\r\n // TODO remove this API call when transactions amount is passed with Account Data instead of\r\n // Account Transactions Data\r\n useEffect(() => {\r\n const accountId = accountData.Id;\r\n const fromDate = '2022-09-01';\r\n const toDate = '2022-09-30';\r\n getAccountTransactionsList({ accountId, fromDate, toDate })\r\n .then((res) => {\r\n setTransactionNumber(res.data.totalTransactions);\r\n })\r\n .catch(err => {\r\n setError(err);\r\n });\r\n }, []);\r\n\r\n const viewAccountTransaction = () => {\r\n browserHistory.push({ pathname: '/main/accounts', state: { selectedAccount } });\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n Balance
\r\n \r\n {formatCurrency(accountData.Balance)}\r\n
\r\n \r\n
\r\n Available
\r\n {formatCurrency(accountData.Balance - accountData.PendingBalance)}
\r\n \r\n
\r\n Transactions
\r\n \r\n {transactionNumber}\r\n
\r\n \r\n \r\n { onSelectAccount(accountData) }} data-testid='account-card-large'>\r\n {/* External accounts currently do not have an unique id assigned to them. Add identifier when fixed. */}\r\n \r\n {isExternal && \r\n \r\n { selectedAccount.Id && selectedAccount.Id === accountData.Id && \r\n
\r\n );\r\n}\r\n\r\nAccountsCardLarge.propTypes = {\r\n accountData: PropTypes.object.isRequired,\r\n onSelectAccount: PropTypes.func,\r\n selectedAccount: PropTypes.object,\r\n isExternal: PropTypes.bool,\r\n handleTransferFunds: PropTypes.func\r\n};\r\n","import AccountsCardLarge from './AccountsCardLarge';\r\n\r\nexport default AccountsCardLarge;\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./accountsCardLarge.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./accountsCardLarge.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./accountsCardLarge.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState, useEffect } from 'react';\r\nimport { browserHistory, Router } from 'react-router';\r\nimport PropTypes from 'prop-types';\r\nimport ReactGA from 'react-ga';\r\nimport materialTheme from 'styles/materialTheme';\r\nimport AdapterDateFns from '@mui/lab/AdapterDateFns';\r\nimport MUILocalizationProvider from '@mui/lab/LocalizationProvider';\r\nimport { ThemeProvider } from '@mui/material';\r\nimport FuseModal from 'components/common/FuseModal';\r\nimport { isOnUnauthenticatedRoute } from 'services/route';\r\nimport { refresh } from 'services/webApi';\r\n\r\nexport default function App({ routes }) {\r\n const [isSessionModalOpen, setIsSessionModalOpen] = useState(false);\r\n useEffect(() => {\r\n const interval = setInterval(() => {\r\n if (!isOnUnauthenticatedRoute(location.pathname)) {\r\n const expiredDate = sessionStorage.getItem('expiredDate');\r\n\r\n const remainingTime = Date.parse(expiredDate) - Date.now();\r\n\r\n if (remainingTime < 90000) {\r\n setIsSessionModalOpen(true);\r\n }\r\n if (remainingTime < 30000) {\r\n logOff();\r\n }\r\n }\r\n }, 5000);\r\n return () => clearInterval(interval);\r\n }, []);\r\n function onRouteUpdate() {\r\n window.scrollTo(0, 0);\r\n ReactGA.pageview(window.location.pathname);\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n
}\r\n Account Type
\r\n \r\n
\r\n {!isExternal && Balance
\r\n \r\n {formatCurrency(accountData.Balance)}\r\n
\r\n \r\n
}\r\n Available
\r\n {formatCurrency(accountData.Balance - accountData.PendingBalance)}
\r\n \r\n
\r\n Transactions
\r\n \r\n {transactionNumber}\r\n
\r\n \r\n
\r\n To Reconcile
\r\n \r\n {transactionNumber}\r\n
\r\n \r\n {!isExternal && }\r\n {/* Temporarily disable transactions button, as transactions page does not show external accounts */}\r\n \r\n
}\r\n \r\n \r\n
\r\n Are you still there?
\r\n\r\n \r\n\r\n\r\n
\r\n );\r\n}\r\n\r\nArchiveSection.propTypes = {\r\n headerText: PropTypes.string.isRequired,\r\n flavourText: PropTypes.string.isRequired,\r\n onArchiveClick: PropTypes.func.isRequired,\r\n isDisabled: PropTypes.bool,\r\n isLoading: PropTypes.bool,\r\n requiresConfirmation: PropTypes.bool\r\n};\r\n","import ArchiveSection from './ArchiveSection';\r\n\r\nexport default ArchiveSection;\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./archiveSection.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./archiveSection.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./archiveSection.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from 'components/common/Button';\r\nimport { Divider } from '@mui/material';\r\nimport './styles/bankAccounts.scss';\r\nimport FuseAccountsContainer from './components/FuseAccountsContainer/FuseAccountsContainer.js';\r\nimport useBankAccounts from './hooks/useBankAccounts.js';\r\n// import TransferFunds from './components/TransferFunds/TransferFunds';\r\nimport AddIcon from '@mui/icons-material/Add';\r\nimport ExpandMoreOutlinedIcon from '@mui/icons-material/ExpandMoreOutlined';\r\nimport ExpandLessIcon from '@mui/icons-material/ExpandLess';\r\nimport { parseErrorMessage } from 'services/webApi';\r\nimport { convertISOtoDateTimeString } from 'services/dateTime';\r\nimport TransferFunds from '../Accounts/components/TransferFunds';\r\nimport LoadingSpinner from 'components/common/LoadingSpinner';\r\n\r\nexport default function BankAccounts({ children }) {\r\n const {\r\n accountsData,\r\n externalAccounts,\r\n selectedAccount,\r\n isLoading,\r\n error,\r\n setIsLoading,\r\n setSelectedAccount,\r\n getAccounts,\r\n getExternalAccounts,\r\n setError\r\n} = useBankAccounts();\r\n\r\n const [isTransferPanelOpen, setIsTransferPanelOpen] = useState(false);\r\n const [isExpand, setIsExpand] = useState(false);\r\n const selectAccount = (account) => {\r\n setSelectedAccount(account);\r\n };\r\n\r\n const externalAccountsInstitutions = externalAccounts?.externalBankAccount\r\n ?.map((account) => account.financialInstitutionId)\r\n .filter((value, index, self) => self.indexOf(value) === index);\r\n\r\n useEffect(() => {\r\n getAccounts()\r\n .then((res) => {\r\n selectAccount(res[0].Id);\r\n })\r\n .catch(err => {\r\n setError(err);\r\n setIsLoading(false);\r\n });\r\n getExternalAccounts();\r\n }, [getAccounts]);\r\n\r\n const refetchAccounts = (isTransferComplete) => {\r\n if (isTransferComplete) {\r\n getAccounts()\r\n .then((res) => {\r\n selectAccount(res[0].Id);\r\n })\r\n .catch(err => {\r\n setError(err);\r\n setIsLoading(false);\r\n });\r\n }\r\n };\r\n\r\n const handleTransferFunds = () => {\r\n setIsTransferPanelOpen(true);\r\n };\r\n\r\n return (\r\n {headerText}
\r\n {flavourText}
\r\n\r\n {!hasArchiveBeenClicked ? (\r\n handleInitialClick() : onArchiveClick}\r\n disabled={isDisabled}\r\n isLoading={isLoading}\r\n >\r\n Archive\r\n \r\n ) : (\r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n \r\n setIsTransferPanelOpen(false)}\r\n accountsData={accountsData}\r\n externalAccounts={externalAccounts}\r\n externalBankAccounts={externalAccounts?.externalBankAccount}\r\n selectedAccount={selectedAccount}\r\n onDoneTransfer={refetchAccounts}\r\n />\r\n \r\n \r\n );\r\n })}\r\n
\r\n );\r\n}\r\n\r\nBankAccounts.propTypes = {\r\n children: PropTypes.node\r\n};\r\n","import AccountsCardLarge from 'components/AccountsCardLarge';\r\nimport React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from 'components/common/Button';\r\nimport 'react-responsive-carousel/lib/styles/carousel.min.css';\r\nimport './styles/fuseAccountsContainer.scss';\r\n\r\nexport default function FuseAccountsContainer({\r\n accountsData,\r\n onSelectAccount,\r\n selectedAccount,\r\n isExternal,\r\n handleTransferFunds\r\n}) {\r\n return (\r\n \r\n Accounts\r\n
\r\n {parseErrorMessage(error, 'en-US')}
\r\n \r\n \r\n
\r\n {isLoading ? (\r\n Fuse Accounts
\r\n } onClick={() => {}}>\r\n Create Account\r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n {externalAccountsInstitutions?.map((institutionNumber) => {\r\n const filteredAccounts = externalAccounts?.externalBankAccount?.filter(\r\n (account) => account.financialInstitutionId === institutionNumber\r\n );\r\n return (\r\n External Accounts
\r\n } onClick={() => {}}>\r\n New Connection\r\n \r\n \r\n
\r\n \r\n {/* TODO: Replace institution number with institution name. institution info needed as part of response */}\r\n
\r\n {institutionNumber}
\r\n {`${filteredAccounts.length} Accounts`}
\r\n {`Updated ${convertISOtoDateTimeString(\r\n new Date()\r\n )}`}\r\n \r\n \r\n {\r\n setIsExpand(!isExpand);\r\n }}\r\n className=\"bank-accounts__group--btn\"\r\n >\r\n {isExpand ?
\r\n \r\n
\r\n \r\n {accountsData.map((accountData, index) => {\r\n return (\r\n
\r\n \r\n {error && option?.id === value?.id}\r\n blurOnSelect\r\n loading={isLoading}\r\n {...otherProps}\r\n />\r\n
\r\n );\r\n}\r\n\r\nGlCode.propTypes = {\r\n glCode: PropTypes.object,\r\n onChangeGlCode: PropTypes.func\r\n};\r\n","import React, { useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport './styles/glCode.scss';\r\nimport { FormControl, InputLabel, MenuItem, Select } from '@mui/material';\r\nimport AutoComplete from 'components/common/AutoCompleteNew';\r\n\r\nexport default function GlCode({\r\n value,\r\n loading,\r\n onChangeGlCode,\r\n options,\r\n ...otherProps\r\n}) {\r\n const getValue = (id) => {\r\n const value = options?.find((option) => option?.id === id);\r\n return value;\r\n };\r\n\r\n const [glCodeValue, setGlCodeValue] = useState(getValue(value));\r\n\r\n useEffect(() => {\r\n setGlCodeValue(getValue(value));\r\n }, [value]);\r\n\r\n return (\r\n \r\n {parseErrorMessage(error)}\r\n
}\r\n \r\n {\r\n if (changeValue) {\r\n setGlCodeValue(changeValue);\r\n onChangeGlCode(changeValue);\r\n } else {\r\n setGlCodeValue(getValue(value));\r\n }\r\n }}\r\n labelKey='label'\r\n />\r\n
\r\n );\r\n}\r\n\r\nGlCode.propTypes = {\r\n value: PropTypes.string,\r\n onChangeGlCode: PropTypes.func,\r\n loading: PropTypes.bool,\r\n options: PropTypes.array\r\n};\r\n","import GlCode from './GlCodeNew';\r\n\r\nexport default GlCode;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./glCode.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./glCode.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./glCode.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Dropdown from 'components/common/Dropdown';\r\nimport LoadingSpinner from 'components/common/LoadingSpinner';\r\nimport './styles/taxCode.scss';\r\nimport {\r\n getCoTaxList,\r\n getTaxCodes,\r\n parseErrorMessage\r\n} from '../../../../services/webApi';\r\n\r\nexport default function TaxCode({\r\n taxCodeId,\r\n onChangeTaxCode,\r\n showOther = true\r\n}) {\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [error, setError] = useState('');\r\n const [taxCodeList, setTaxCodeList] = useState([]);\r\n\r\n useEffect(() => {\r\n setIsLoading(true);\r\n setError('');\r\n getTaxCodes()\r\n .then((response) => {\r\n let taxCodes = response.data.result;\r\n if (taxCodes && taxCodes.length > 0) {\r\n if (showOther) {\r\n setTaxCodeList(taxCodes);\r\n } else {\r\n setTaxCodeList(taxCodes.filter((t) => t.taxCode !== 'other'));\r\n }\r\n setIsLoading(false);\r\n setError('');\r\n }\r\n })\r\n .catch((err) => {\r\n setError(err);\r\n setIsLoading(false);\r\n setTaxCodeList([]);\r\n });\r\n }, []);\r\n\r\n return (\r\n \r\n {error && !isLoading && (\r\n ({\r\n label: item.taxRateLabel,\r\n value: item.id\r\n }))}\r\n />\r\n )}\r\n
\r\n );\r\n}\r\n\r\nTaxCode.propTypes = {\r\n taxCodeId: PropTypes.string,\r\n onChangeTaxCode: PropTypes.func,\r\n showOther: PropTypes.bool\r\n};\r\n","import TaxCode from './TaxCode';\r\n\r\nexport default TaxCode;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./taxCode.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./taxCode.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./taxCode.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./cardForm.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./cardForm.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./cardForm.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from 'components/common/Button';\r\nimport CardsTable from 'components/CardsTable';\r\nimport './styles/cards.scss';\r\nimport CreateCard from 'components/CreateCard';\r\nimport { Divider, LinearProgress, Popover } from '@mui/material';\r\nimport { getCards, getCardsInfo } from 'services/webApi';\r\nimport ManageCard from 'components/ManageCard/ManageCard';\r\nimport Filters from './components/Filters/Filters';\r\nimport CardsBulkEdit from 'components/CardsBulkEdit';\r\nimport FilterAltOutlinedIcon from '@mui/icons-material/FilterAltOutlined';\r\nimport LaunchIcon from '@mui/icons-material/Launch';\r\nimport { formatCurrency } from 'services/currency';\r\nimport { formatCount } from 'services/count';\r\nimport { useCancelPromise } from 'services/hooks';\r\nimport InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';\r\nimport Alert from 'components/common/Alert';\r\nimport CardStatusFilter from './components/CardStatusFilter/CardStatusFilter';\r\nimport { ROWS_PER_PAGE_OPTIONS, ROWS_PER_PAGE_DEFAULT } from 'services/constants';\r\nexport default function Cards({ children, location }) {\r\n const currentDate = new Date(Date.now() + (48 * 60 * 60 * 1000));\r\n const newDate = new Date(Date.now() + (48 * 60 * 60 * 1000));\r\n const yearAgoFromCurrent = new Date(newDate.setFullYear(newDate.getFullYear() - 1));\r\n\r\n const [isCreatePanelOpen, setIsCreatePanelOpen] = useState(false);\r\n const [isManagePanelOpen, setIsManagePanelOpen] = useState(false);\r\n const [isBulkApprovePanelOpen, setIsBulkApprovePanelOpen] = useState(false);\r\n const [alertOpen, setAlertOpen] = useState(false);\r\n const [alertMessage, setAlertMessage] = useState('');\r\n const [popOverLocation, setPopOverLocation] = useState();\r\n const [tempUser, setTempUser] = useState({ role: 'admin' });\r\n\r\n // state for locked preset filter\r\n const [isLocked, setIsLocked] = useState(false);\r\n\r\n // state for filters\r\n const [searchTerm, setSearchTerm] = useState('');\r\n const [startDate, setStartDate] = useState(yearAgoFromCurrent);\r\n const [endDate, setEndDate] = useState(currentDate);\r\n const [cardType, setCardType] = useState('');\r\n const [cardStatus, setCardStatus] = useState('');\r\n const [limitOperator, setLimitOperator] = useState('');\r\n const [limit, setLimit] = useState('');\r\n\r\n // states for the cards data\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [error, setError] = useState('');\r\n const [totalSpent, setTotalSpent] = useState(0);\r\n const [totalLimit, setTotalLimit] = useState(0);\r\n const [totalCards, setTotalCards] = useState(0);\r\n const [cards, setCards] = useState([]);\r\n const [totalRows, setTotalRows] = useState(0);\r\n const [pageNumber, setPageNumber] = useState(0);\r\n const [rowsPerPage, setRowsPerPage] = useState(ROWS_PER_PAGE_DEFAULT);\r\n const [order, setOrder] = useState('asc');\r\n const [orderBy, setOrderBy] = useState('name');\r\n const [selectedCard, setSelectedCard] = useState();\r\n\r\n const cancelPromise = useCancelPromise();\r\n\r\n const openCreateCardPanel = () => {\r\n setIsCreatePanelOpen(true);\r\n };\r\n\r\n const openEditCardPanel = (card) => {\r\n setIsManagePanelOpen(true);\r\n setSelectedCard(card);\r\n };\r\n\r\n const openAlertBox = (message) => {\r\n setAlertMessage(message);\r\n setAlertOpen(true);\r\n };\r\n\r\n const closeAlertBox = (event, reason) => {\r\n setAlertOpen(false);\r\n };\r\n\r\n const appendFilterParams = (filters) => {\r\n // set preset locked cards filter to false\r\n if (filters.cardStatus !== 'locked') {\r\n setIsLocked(false);\r\n }\r\n\r\n const { searchTerm, cardType, cardStatus, limit, limitOperator, startDate, endDate } = filters;\r\n setSearchTerm(searchTerm);\r\n setCardType(cardType);\r\n setCardStatus(cardStatus);\r\n setLimit(limit);\r\n setLimitOperator(limitOperator);\r\n setStartDate(startDate);\r\n setEndDate(endDate);\r\n setPageNumber(0);\r\n fetchData({ ...filters, pageNumber: 0, rowsPerPage, order, orderBy });\r\n };\r\n\r\n const resetFilters = () => {\r\n setSearchTerm('');\r\n setStartDate(startDate);\r\n setEndDate(endDate);\r\n setCardType('');\r\n setCardStatus('');\r\n setLimitOperator('');\r\n setLimit('');\r\n };\r\n\r\n const cardStatusMap = {\r\n Requested: 'requested',\r\n Inactive: 'inactive',\r\n Active: 'active',\r\n Locked: 'locked',\r\n Deactivated: 'deactivated',\r\n Denied: 'denied'\r\n };\r\n\r\n const addLockedStatusFilter = (status) => {\r\n const filterParam = { searchTerm,\r\n cardType,\r\n cardStatus,\r\n limit,\r\n limitOperator,\r\n startDate,\r\n endDate,\r\n pageNumber: 0,\r\n rowsPerPage,\r\n order,\r\n orderBy };\r\n\r\n setPageNumber(0);\r\n resetFilters();\r\n if (!isLocked) {\r\n setCardStatus('locked');\r\n fetchData({ ...filterParam, cardStatus: status });\r\n setIsLocked(true);\r\n return;\r\n }\r\n fetchData({ ...filterParam, cardStatus: '' });\r\n setIsLocked(false);\r\n };\r\n\r\n const appendPaginationParams = (pagination) => {\r\n fetchData({ cardType, cardStatus, limitOperator, limit, startDate, endDate, ...pagination });\r\n };\r\n\r\n const getTotalCardsInfo = () => {\r\n getCardsInfo()\r\n .then(({ data }) => {\r\n if (!cancelPromise.current && data) {\r\n setTotalLimit(data.totalLimit);\r\n setTotalSpent(data.totalSpent);\r\n setTotalCards(data.totalCards);\r\n }\r\n }).catch(err => {\r\n if (!cancelPromise.current) {\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'error', message: err });\r\n }\r\n });\r\n };\r\n\r\n const fetchData = (params, newCard = null) => {\r\n setIsLoading(true);\r\n setError('');\r\n getCards(params)\r\n .then((response) => {\r\n if (!cancelPromise.current && response) {\r\n let { cardsData, totalRows } = response.data;\r\n if (newCard) {\r\n cardsData.unshift(newCard);\r\n totalRows += 1;\r\n }\r\n setTotalRows(totalRows);\r\n setIsLoading(false);\r\n setError('');\r\n setCards(cardsData);\r\n getTotalCardsInfo();\r\n }\r\n })\r\n .catch(err => {\r\n if (!cancelPromise.current) {\r\n setError(err);\r\n setIsLoading(false);\r\n setCards(null);\r\n }\r\n });\r\n };\r\n\r\n const addNewCard = (newCard) => {\r\n fetchData({ cardType,\r\n cardStatus,\r\n limitOperator,\r\n limit,\r\n startDate,\r\n endDate,\r\n pageNumber,\r\n rowsPerPage,\r\n order,\r\n orderBy }, newCard);\r\n };\r\n\r\n // Temporary function to edit card status\r\n const editCardStatus = (status) => {\r\n const selectedCardIndex = cards.findIndex(obj => obj.id === selectedCard.cardInfo.id);\r\n const newCardsData = [...cards];\r\n newCardsData[selectedCardIndex].status = status;\r\n setCards(newCardsData);\r\n };\r\n\r\n const deleteSelectedCard = () => {\r\n const newCardsData = cards.filter(card => card.id !== selectedCard.cardInfo.id);\r\n setCards(newCardsData);\r\n };\r\n\r\n // Temporary function to update card balance once Top Up is done\r\n const updateToppedUpCard = (cardBalance) => {\r\n const selectedCardIndex = cards.findIndex(obj => obj.id === selectedCard.cardInfo.id);\r\n const newCardsData = [...cards];\r\n newCardsData[selectedCardIndex].balance = parseInt(cardBalance);\r\n setCards(newCardsData);\r\n };\r\n\r\n return (\r\n {parseErrorMessage(error)}
\r\n )}\r\n {isLoading && \r\n setAlertOpen(false)}>{alertMessage.message} \r\n {/* To do: Create common PopOver component */}\r\n setPopOverLocation(null)}\r\n >\r\n setIsBulkApprovePanelOpen(false)}\r\n setAlertOpen={setAlertOpen}\r\n setAlertMessage={setAlertMessage}\r\n />\r\n setIsCreatePanelOpen(false)}\r\n openAlert={openAlertBox}\r\n onCreateCard={addNewCard}\r\n rowsPerPage={rowsPerPage}\r\n />\r\n setIsManagePanelOpen(false)}\r\n openAlert={openAlertBox}\r\n status={selectedCard && selectedCard.status}\r\n cardInfo={selectedCard && selectedCard.cardInfo}\r\n user={tempUser}\r\n editCardStatus={editCardStatus}\r\n deleteSelectedCard={deleteSelectedCard}\r\n openCreateCard={() => setIsCreatePanelOpen(true)}\r\n updateToppedUpCard={updateToppedUpCard}\r\n />\r\n
\r\n );\r\n}\r\n\r\nCards.propTypes = {\r\n children: PropTypes.node,\r\n location: PropTypes.object\r\n};\r\n","import { connect } from 'react-redux';\r\nimport Cards from './Cards';\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Cards);\r\n","import React, { useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport './styles/cardStatusFilter.scss';\r\nimport { getCardsCount, parseErrorMessage } from 'services/webApi';\r\nimport LoadingSpinner from 'components/common/LoadingSpinner';\r\nimport Button from 'components/common/Button/Button';\r\n\r\nexport default function CardStatusFilter({ label, onApplyFilter, filterParam, className, icon, isActive }) {\r\n const Icon = icon;\r\n\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [error, setError] = useState('');\r\n const [count, setCount] = useState(0);\r\n\r\n useEffect(() => {\r\n getCount(filterParam);\r\n }, []);\r\n\r\n function getCount(filterParam) {\r\n setIsLoading(true);\r\n setError('');\r\n getCardsCount(filterParam)\r\n .then((response) => {\r\n let { cardsCount } = response.data;\r\n setIsLoading(false);\r\n setError('');\r\n setCount(cardsCount);\r\n })\r\n .catch(err => {\r\n setError(err);\r\n setIsLoading(false);\r\n setCount(null);\r\n });\r\n }\r\n\r\n return (\r\n Includes all active, locked and inactive cards.
\r\n \r\n Cards
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Total Spent
\r\n {formatCurrency(totalSpent)}
\r\n \r\n
\r\n Total Limit
\r\n {formatCurrency(totalLimit)}
\r\n \r\n
\r\n {formatCount(totalCards)} cards
\r\n setPopOverLocation(event.currentTarget)}\r\n onMouseLeave={() => setPopOverLocation(undefined)}>\r\n
\r\n \r\n
\r\n \r\n { addLockedStatusFilter(cardStatusMap.Locked) }}\r\n className=\"alert\"\r\n icon={FilterAltOutlinedIcon}\r\n isActive={isLocked}\r\n />\r\n { setIsBulkApprovePanelOpen(true) }}\r\n icon={LaunchIcon}\r\n />\r\n
\r\n \r\n openCreateCardPanel()}>\r\n Create Card\r\n \r\n
\r\n \r\n
\r\n \r\n { (error && !isLoading) &&\r\n /* eslint-disable no-console */\r\n console.log(parseErrorMessage(error))\r\n /* eslint-enable no-console */\r\n }\r\n {isLoading && \r\n \r\n }\r\n
\r\n );\r\n}\r\n\r\nCardStatusFilter.propTypes = {\r\n icon: PropTypes.object,\r\n label: PropTypes.string,\r\n onApplyFilter: PropTypes.func,\r\n filterParam: PropTypes.object,\r\n className: PropTypes.string,\r\n isActive: PropTypes.bool\r\n};\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./cardStatusFilter.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./cardStatusFilter.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./cardStatusFilter.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","export const cardTypes = [{\r\n value: 'all',\r\n label: 'All'\r\n}, {\r\n value: 'physical',\r\n label: 'Physical'\r\n}, {\r\n value: 'virtual',\r\n label: 'Virtual'\r\n}];\r\n\r\nexport const status = [{\r\n value: 'all',\r\n label: 'All'\r\n}, {\r\n value: 'active',\r\n label: 'Active'\r\n}, {\r\n value: 'locked',\r\n label: 'Locked'\r\n},\r\n{\r\n value: 'deactivated',\r\n label: 'Deactivated'\r\n},\r\n{\r\n value: 'requested',\r\n label: 'Requested'\r\n},\r\n{\r\n value: 'denied',\r\n label: 'Denied'\r\n}];\r\n\r\nexport const limitOperators = [{\r\n value: 'eq',\r\n label: '='\r\n}, {\r\n value: 'gt',\r\n label: '>'\r\n},\r\n{\r\n value: 'gte',\r\n label:'≥'\r\n},\r\n{\r\n value: 'lt',\r\n label: '<'\r\n},\r\n{\r\n value: 'lte',\r\n label: '≤'\r\n}];\r\n\r\nexport const restrictions = [{\r\n value: 'all',\r\n label: 'All'\r\n}, {\r\n value: 'White Listed',\r\n label: 'White Listed'\r\n},\r\n{\r\n value: 'Black Listed',\r\n label: 'Black Listed'\r\n}];\r\n","import React, { useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport './styles/filters.scss';\r\nimport ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';\r\nimport Button from '../../../common/Button';\r\nimport Dropdown from '../../../common/Dropdown';\r\nimport { ButtonBase } from '@mui/material';\r\nimport TextField from '../../../common/TextField/TextField';\r\nimport FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';\r\nimport AdapterDateFns from '@mui/lab/AdapterDateFns';\r\nimport LocalizationProvider from '@mui/lab/LocalizationProvider';\r\nimport { DatePicker } from '@mui/lab';\r\nimport { cardTypes, status, limitOperators, restrictions } from './DropDownFilters';\r\n\r\nexport default function Filters({ onApplyFilters, isPresetFilterActive }) {\r\n const currentDate = new Date(Date.now() + (48 * 60 * 60 * 1000));\r\n const newDate = new Date(Date.now() + (48 * 60 * 60 * 1000));\r\n const yearAgoFromCurrent = new Date(newDate.setFullYear(newDate.getFullYear() - 1));\r\n\r\n // state for search filters\r\n const [searchTerm, setSearchTerm] = useState('');\r\n\r\n // states for advanced filters\r\n const [advancedOpen, setAdvancedOpen] = useState(false);\r\n const [startDate, setStartDate] = useState(yearAgoFromCurrent);\r\n const [endDate, setEndDate] = useState(currentDate);\r\n const [cardType, setCardType] = useState('');\r\n const [cardStatus, setCardStatus] = useState('');\r\n const [limitOperator, setLimitOperator] = useState('');\r\n const [limit, setLimit] = useState('');\r\n\r\n const currentFilters = {\r\n searchTerm: searchTerm,\r\n cardType: cardType,\r\n cardStatus: cardStatus,\r\n limit: limit,\r\n limitOperator: limitOperator,\r\n startDate: startDate,\r\n endDate: endDate\r\n };\r\n\r\n const applyAdvancedSearchFilters = (e) => {\r\n e && e.preventDefault();\r\n onApplyFilters(currentFilters);\r\n };\r\n\r\n useEffect(() => {\r\n if (isPresetFilterActive) {\r\n setCardStatus('locked');\r\n } else {\r\n const currentCardStatus = cardStatus === 'locked' ? '' : cardStatus;\r\n setCardStatus(currentCardStatus);\r\n }\r\n }, [isPresetFilterActive]);\r\n\r\n return (\r\n \r\n
\r\n {label}
\r\n {count}
\r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nFilters.propTypes = {\r\n onApplyFilters: PropTypes.func,\r\n isPresetFilterActive: PropTypes.bool\r\n};\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./filters.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./filters.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./filters.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import CardsContainer from './CardsContainer';\r\n\r\nexport default CardsContainer;\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./cards.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./cards.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./cards.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Drawer from 'components/common/Drawer';\r\nimport Button from 'components/common/Button';\r\nimport { ButtonBase, Divider, TablePagination } from '@mui/material';\r\nimport { parseErrorMessage } from 'services/webApi';\r\nimport useCardsBulkEdit from './hooks/useCardsBulkEdit';\r\nimport Checkbox from 'components/common/Checkbox';\r\nimport Dropdown from 'components/common/Dropdown';\r\nimport ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';\r\nimport './styles/cardsBulkEdit.scss';\r\n\r\nexport default function CardsBulkEdit({\r\n open,\r\n onClose,\r\n setAlertOpen,\r\n setAlertMessage\r\n}) {\r\n const tempCards = [\r\n {}\r\n ];\r\n const [\r\n isLoading,\r\n error,\r\n cardsData,\r\n cardsSelection,\r\n setCardsSelection,\r\n sortBy,\r\n setSortBy,\r\n order,\r\n setOrder,\r\n dataPage,\r\n setDataPage,\r\n dataPageCount,\r\n setDataPageCount,\r\n handleCheckboxClick,\r\n handleSelectAll,\r\n handlePageChange,\r\n approveSelectedCards,\r\n denySelectedCards,\r\n selectionActive,\r\n closePanel\r\n ] = useCardsBulkEdit(setAlertOpen, setAlertMessage, onClose);\r\n\r\n const filterTypes = [\r\n { value: 'user', label: 'User' },\r\n { value: 'date', label: 'Date' },\r\n { value: 'glCode', label: 'GL Code' },\r\n { value: 'amount', label: 'Amount' }\r\n ];\r\n\r\n return (\r\n \r\n \r\n setAdvancedOpen(!advancedOpen)}\r\n className=\"filters__search__advancedsearch\"\r\n >\r\n Advanced\r\n
\r\n {advancedOpen &&\r\n \r\n
\r\n \r\n
\r\n }\r\n \r\n { setCardType(e.target.value) }}\r\n inputProps={{\r\n 'data-testid': 'cardType-dropdown'\r\n }}\r\n />\r\n { setCardStatus(e.target.value) }}\r\n inputProps={{\r\n 'data-testid': 'cardStatus-dropdown'\r\n }}\r\n />\r\n
\r\n \r\n { setLimitOperator(e.target.value) }}\r\n inputProps={{\r\n 'data-testid': 'limitOperator-dropdown'\r\n }}\r\n />\r\n setLimit(val)} />\r\n
\r\n \r\n \r\n setStartDate(val)}\r\n inputFormat=\"MM/dd/yyyy\"\r\n renderInput={(params) => setEndDate(val)}\r\n inputFormat=\"MM/dd/yyyy\"\r\n renderInput={(params) => \r\n
\r\n {/* \r\n \r\n
*/}\r\n \r\n
\r\n \r\n
\r\n \r\n Card Requests\r\n
\r\n \r\n View, approve, or deny selected requests\r\n
\r\n \r\n
\r\n \r\n handleSelectAll(e)}\r\n />\r\n
\r\n Select All
\r\n \r\n setSortBy(e.target.value)} size='small' />\r\n setOrder(order === 'asc' ? 'desc' : 'asc')}>\r\n
\r\n Sort By
\r\n \r\n {cardsData.map((card, index) => (\r\n \r\n \r\n ))}\r\n
\r\n\r\n \r\n handleCheckboxClick(card.id)} />\r\n
\r\n \r\n
\r\n \r\n
\r\n {card.type === 'virtual' ? 'Virtual' : 'Physical'} - ${card.limit}
\r\n {card.recurringFrequency}
\r\n \r\n
\r\n {card.cardHolder}
\r\n {card.glCode}
\r\n \r\n {error && !isLoading &&
\r\n \r\n {parseErrorMessage(error, 'en-US')}\r\n
}\r\n \r\n
\r\n\r\n \r\n {cardsSelection.length} Selected\r\n
\r\n \r\n denySelectedCards()}>\r\n Deny Selected\r\n \r\n approveSelectedCards()}>\r\n Approve Selected\r\n \r\n
\r\n \r\n { onSelectCard(cardsData.id) }} data-testid='account-card'>\r\n \r\n
\r\n \r\n \r\n
\r\n }\r\n title={cardsData.cardNickname}\r\n subheader={`**** **** **** ${cardsData.cardNumber.slice(15)}`}\r\n />\r\n \r\n
\r\n Transactions
\r\n \r\n {10}\r\n
\r\n \r\n
\r\n Updated
\r\n \r\n {new Date('2020-05-12T23:50:21.817Z').toLocaleString()}\r\n
\r\n \r\n {error && \r\n \r\n \r\n
\r\n {cardsData.length === 0 &&\r\n \r\n {cardsData.length !== 0 && \r\n )}\r\n
\r\n );\r\n};\r\n\r\nCardsTable.propTypes = {\r\n onApplyPagination: PropTypes.func,\r\n isLoading: PropTypes.bool,\r\n error: PropTypes.string,\r\n cardsData: PropTypes.arrayOf(PropTypes.object),\r\n totalRows: PropTypes.number,\r\n pageNumber: PropTypes.number,\r\n setPageNumber: PropTypes.func,\r\n rowsPerPage: PropTypes.number,\r\n setRowsPerPage: PropTypes.func,\r\n rowsPerPageOptions: PropTypes.array,\r\n order: PropTypes.string,\r\n setOrder: PropTypes.func,\r\n orderBy: PropTypes.string,\r\n setOrderBy: PropTypes.func,\r\n setSelectedCard: PropTypes.func\r\n};\r\n","import CardsTable from './CardsTable';\r\n\r\nexport default CardsTable;\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./cardsTable.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./cardsTable.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./cardsTable.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState } from 'react';\r\nimport { Tabs, Tab } from '@mui/material';\r\nimport Alert from 'components/common/Alert';\r\nimport ServicesView from './components/ServicesView';\r\nimport ProductsView from './components/ProductsView';\r\nimport useCategories from './hooks/useCategories';\r\nimport useUnits from './hooks/useUnits';\r\nimport './styles/catalogue.scss';\r\nimport { PRODUCTS_APPLIED_ITEMS_ID, SERVICES_APPLIED_ITEMS_ID } from 'services/constants';\r\n\r\nexport default function Catalogue() {\r\n const [catalogueTab, setCatalogueTab] = useState('products');\r\n const [serviceUnitsMap, productUnitsmap] = useUnits();\r\n const [alertOpen, setAlertOpen] = useState(false);\r\n const [alertMessage, setAlertMessage] = useState('');\r\n\r\n const {\r\n isLoading: isCategoriesLoading,\r\n error,\r\n categories,\r\n categoriesMap,\r\n categoriesMapProduct,\r\n categoriesMapService,\r\n selectedCategory,\r\n setSelectedCategory,\r\n refetchCategories\r\n } = useCategories();\r\n\r\n const filteredCategories = categories.filter(category => category.appliedItems.id === (catalogueTab === 'products' ? PRODUCTS_APPLIED_ITEMS_ID : SERVICES_APPLIED_ITEMS_ID));\r\n const showAlertBox = (message) => {\r\n setAlertMessage(message);\r\n setAlertOpen(true);\r\n };\r\n\r\n const [isCategoryDrawerOpen, setIsCategoryDrawerOpen] = useState(false);\r\n\r\n return (\r\n \r\n setAlertOpen(false)}>{alertMessage.message} \r\n
\r\n );\r\n}\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from 'components/common/Button';\r\nimport AddIcon from '@mui/icons-material/Add';\r\nimport Drawer from 'components/common/Drawer';\r\nimport CreateProductDrawerContent from './components/CreateProductDrawerContent';\r\nimport CreateServiceDrawerContent from './components/CreateServiceDrawerContent';\r\nimport './styles/createCatalogueItem.scss';\r\nimport useCategories from '../../hooks/useCategories';\r\n\r\nexport default function CreateCatalogueItem({ catalogueTab, refetchItems, productUnitsMap, serviceUnitsMap, onOpenAlert, isCategoryDrawerOpen, setIsCategoryDrawerOpen }) {\r\n const [isDrawerOpen, setIsDrawerOpen] = useState(false);\r\n // const [isCategoryDrawerOpen, setIsCategoryDrawerOpen] = useState(false);\r\n const {\r\n categoriesMap,\r\n categoriesMapProduct,\r\n categoriesMapService,\r\n refetchCategories\r\n } = useCategories();\r\n\r\n const headerTitle = catalogueTab === 'products' ? 'Products' : 'Services';\r\n\r\n const handlePrevious = () => {\r\n setIsCategoryDrawerOpen(false);\r\n refetchCategories();\r\n };\r\n\r\n const resetDrawers = () => {\r\n setIsDrawerOpen(false);\r\n setIsCategoryDrawerOpen(false);\r\n };\r\n\r\n return (\r\n Catalogue
\r\n \r\n setCatalogueTab(value)}>\r\n \r\n
\r\n { categoriesMap && (\r\n catalogueTab === 'products' ? (\r\n \r\n \r\n {catalogueTab === 'products' ? (\r\n
\r\n );\r\n}\r\n\r\nCreateCatalogueItem.propTypes = {\r\n catalogueTab: PropTypes.string.isRequired,\r\n refetchItems: PropTypes.func.isRequired,\r\n productUnitsMap: PropTypes.object,\r\n serviceUnitsMap: PropTypes.object,\r\n onOpenAlert: PropTypes.func.isRequired,\r\n isCategoryDrawerOpen: PropTypes.bool,\r\n setIsCategoryDrawerOpen: PropTypes.func\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Divider, InputAdornment } from '@mui/material';\r\nimport TextField from 'components/common/TextField';\r\nimport useCreateEditProduct from 'components/Catalogue/hooks/useCreateEditProduct';\r\nimport Button from 'components/common/Button';\r\nimport Dropdown from 'components/common/Dropdown';\r\nimport ArchiveSection from 'components/ArchiveSection';\r\nimport './styles/createProductDrawerContent.scss';\r\nimport { objectSortByLabel } from 'services/objects';\r\nimport ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';\r\nimport CategoriesDrawerContent from './components/CategoriesDrawerContent/CategoriesDrawerContent';\r\nimport AutoComplete from 'components/common/AutoComplete';\r\n\r\nexport default function CreateProductDrawerContent({ setIsDrawerOpen, categoriesMap, productUnitsMap, onProductUpdate, onOpenAlert, editingProductObject, catalogueTab, isCategoryDrawerOpen, setIsCategoryDrawerOpen }) {\r\n const {\r\n name,\r\n description,\r\n category,\r\n brandName,\r\n sku,\r\n unitType,\r\n onHoundCount,\r\n averageCost,\r\n price,\r\n salePrice,\r\n preferredTaxCode,\r\n preferredGlCode,\r\n taxCodes,\r\n glCodes,\r\n handleSubmit,\r\n archiveProduct,\r\n isLoading\r\n } = useCreateEditProduct(categoriesMap, productUnitsMap, editingProductObject || {}, onOpenAlert);\r\n const isEditing = !!editingProductObject;\r\n const unSortedCategoryOptions = Object.values(categoriesMap).map(category => ({ value: category, label: category }));\r\n // passing compare function 'objectSortByLabel'\r\n // to sort array of objects by label\r\n let categoryOptions = unSortedCategoryOptions.sort(objectSortByLabel);\r\n\r\n const unitOptions = Object.values(productUnitsMap).map(unitObject => ({ value: unitObject.unit, label: unitObject.unit }));\r\n const isDisabled = !name.name || !category.category || !unitType.unitType || !price.price;\r\n\r\n return (\r\n \r\n
\r\n {headerTitle}
\r\n \r\n \r\n name.setName(value)} />\r\n description.setDescription(value)} />\r\n brandName.setBrandName(value)} />\r\n sku.setSku(value)} />\r\n unitType.setUnitType(e.target.value)} />\r\n category.setCategory(e.target.value)} />\r\n } className=\"drawer__input--btn\" onClick={() => setIsCategoryDrawerOpen(true)}>Edit Categories\r\n onHoundCount.setOnHandCount(value)}\r\n type='number'\r\n />\r\n option?.id === value?.id}\r\n onChange={(e, val) => preferredGlCode.setPreferredGlCode(val)} />\r\n averageCost.setAverageCost(value)}\r\n type='number'\r\n InputProps={{ inputProps: { min: 0 }, startAdornment: $ }}\r\n />\r\n price.setPrice(value)}\r\n type='number'\r\n InputProps={{ inputProps: { min: 0 }, startAdornment: $ }}\r\n />\r\n salePrice.setSalePrice(value)}\r\n type='number'\r\n InputProps={{ inputProps: { min: 0 }, startAdornment: $ }}\r\n />\r\n option?.id === value?.id}\r\n onChange={(e, val) => preferredTaxCode.setPreferredTaxCode(val)} />\r\n {isEditing && (\r\n archiveProduct(setIsDrawerOpen, onProductUpdate)}\r\n isDisabled={isLoading} // let submit button handle loading spinner\r\n requiresConfirmation\r\n />\r\n )}\r\n
\r\n {isEditing ? `Edit ${editingProductObject.productName}` : 'Create Product'}
\r\n Product Details
\r\n Availability Details
\r\n Financial Details
\r\n Enter the financial details per unit.
\r\n Tax Code
\r\n Optional. You can assign a specific tax code to the product to be used in the invoice.
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n Edit Categories
\r\n \r\n
\r\n {categoryError}
}\r\n\r\n {!categoryEditID && }\r\n {categoryEditID && }\r\n {!categoryEditID && } isLoading={isCategoryLoading} onClick={() => createCategory()}>Add Category}\r\n {categoryEditID && }\r\n
\r\n \r\n {!(category.id === categoryEditID) && \r\n }\r\n { category.id === categoryEditID &&\r\n setNewCategoryName(val)}\r\n autoFocus />}\r\n
\r\n {categoryName}
\r\n \r\n \r\n \r\n
\r\n \r\n name.setName(value)} />\r\n description.setDescription(value)} />\r\n category.setCategory(e.target.value)} />\r\n } className=\"drawer__input--btn\" onClick={() => setIsCategoryDrawerOpen(true)}>Edit Categories\r\n option?.id === value?.id}\r\n onChange={(e, val) => preferredGlCode.setPreferredGlCode(val)} />\r\n rate.setRate(value)}\r\n type='number'\r\n InputProps={{ inputProps: { min: 0 }, startAdornment: $ }}\r\n />\r\n saleRate.setSaleRate(value)}\r\n type='number'\r\n InputProps={{ inputProps: { min: 0 }, startAdornment: $ }}\r\n />\r\n rateType.setRateType(e.target.value)} />\r\n option?.id === value?.id}\r\n onChange={(e, val) => preferredTaxCode.setPreferredTaxCode(val)} />\r\n {isEditing && (\r\n archiveService(setIsDrawerOpen, onServiceUpdate)}\r\n isDisabled={isLoading} // let submit button handle loading spinner\r\n requiresConfirmation\r\n />\r\n )}\r\n
\r\n {isEditing ? `Edit ${editingServiceObject.productName}` : 'Create Service'}
\r\n Service Details
\r\n Rate Details
\r\n Enter the financial details per unit.
\r\n Tax Code
\r\n Optional. You can assign a specific tax code to the service to be used in the invoice.
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {/*
\r\n );\r\n}\r\n\r\nProductsView.propTypes = {\r\n categoriesMap: PropTypes.object.isRequired,\r\n productUnitsMap: PropTypes.object.isRequired,\r\n onOpenAlert: PropTypes.func.isRequired,\r\n categories: PropTypes.array.isRequired,\r\n isCategoryDrawerOpen: PropTypes.bool,\r\n setIsCategoryDrawerOpen: PropTypes.func\r\n};\r\n","import React, { useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { TableBody, TableCell, TableContainer, TablePagination, TableRow, Table } from '@mui/material';\r\nimport TableHeader from 'components/common/TableHeader';\r\nimport { formatCurrency } from 'services/currency';\r\nimport { ROWS_PER_PAGE_OPTIONS } from 'services/constants';\r\nimport Drawer from 'components/common/Drawer';\r\nimport ProductsViewDrawerContent from '../ProductsViewDrawerContent';\r\nimport CreateProductDrawerContent from 'components/Catalogue/components/CreateCatalogueItem/components/CreateProductDrawerContent';\r\nimport { getProductDetail } from 'services/webApi';\r\nimport { useCancelPromise } from 'services/hooks';\r\nimport { shapeProduct } from 'components/Catalogue/services/shapeCatalogueItem';\r\nimport './styles/productsTable.scss';\r\n\r\nexport default function ProductsTable({\r\n catalogueItems,\r\n paginationInfo,\r\n handlePageChange,\r\n resultsPerPage,\r\n handleResultsPerPageChange,\r\n categoriesMap,\r\n productUnitsMap,\r\n onOpenAlert,\r\n refetchItems,\r\n orderInfo,\r\n onSort,\r\n isCategoryDrawerOpen,\r\n setIsCategoryDrawerOpen\r\n}) {\r\n const [isDrawerOpen, setIsDrawerOpen] = useState(false);\r\n const [isLoadingView, setIsLoadingView] = useState(false);\r\n const [viewingProduct, setViewingProduct] = useState({});\r\n const [error, setError] = useState('');\r\n const [isEditing, setIsEditing] = useState(false);\r\n const cancelPromise = useCancelPromise();\r\n // IDs aligned to API call for sorting (can be changed)\r\n const headerData = [\r\n { id: 'ProductName', label: 'Name', width: '10rem' },\r\n { id: 'Category', label: 'Category', width: '10rem', disableSort: true },\r\n { id: 'unitType', label: 'Unit Type', width: '4rem', disableSort: true },\r\n { id: 'AverageCost', label: 'Avg. Cost', width: '4rem' },\r\n { id: 'BaseSalesPrice', label: 'Price', width: '4rem' },\r\n { id: 'salePrice', label: 'Sale Price', width: '4rem', disableSort: true },\r\n { id: 'SellableQuantityOnHand', label: 'Available', width: '4rem' }\r\n ];\r\n\r\n const handleRowClickOpen = (item) => {\r\n setIsLoadingView(true);\r\n setIsDrawerOpen(true);\r\n\r\n getProductDetail(item.id).then(({ data }) => {\r\n if (!cancelPromise.current && data.response) {\r\n setViewingProduct(shapeProduct(data.response, categoriesMap));\r\n setIsLoadingView(false);\r\n }\r\n }).catch((error) => {\r\n if (!cancelPromise.current) {\r\n setError(error);\r\n setIsLoadingView(false);\r\n }\r\n });\r\n };\r\n\r\n const handleRowClickClose = () => {\r\n setIsDrawerOpen(false);\r\n setIsEditing(false);\r\n setIsCategoryDrawerOpen(false);\r\n };\r\n\r\n const renderViewDrawerContent = () => (\r\n \r\n null} exportPdf={() => null} />\r\n
\r\n {isFilterOpen && \r\n performSearch(val)} />\r\n \r\n setIsFilterOpen(!isFilterOpen)}\r\n className='products-view__actions__search__filter-button'>\r\n Advanced\r\n
\r\n \r\n setFilter(val)} />\r\n
}\r\n {isTableDataLoading && \r\n \r\n \r\n
\r\n \r\n handleRowClickClose()} previousPage={isEditing ? resetDrawers : undefined}>\r\n {!isEditing ? renderViewDrawerContent() : renderEditDrawerContent()}\r\n \r\n
\r\n );\r\n}\r\n\r\nProductsTable.propTypes = {\r\n catalogueItems: PropTypes.array.isRequired,\r\n paginationInfo: PropTypes.object.isRequired,\r\n handlePageChange: PropTypes.func.isRequired,\r\n resultsPerPage: PropTypes.number.isRequired,\r\n handleResultsPerPageChange: PropTypes.func.isRequired,\r\n categoriesMap: PropTypes.object.isRequired,\r\n productUnitsMap: PropTypes.object.isRequired,\r\n onOpenAlert: PropTypes.func.isRequired,\r\n refetchItems: PropTypes.func.isRequired,\r\n orderInfo: PropTypes.object.isRequired,\r\n onSort: PropTypes.func.isRequired,\r\n isCategoryDrawerOpen: PropTypes.bool,\r\n setIsCategoryDrawerOpen: PropTypes.func\r\n};\r\n","import ProductsTable from './ProductsTable';\r\n\r\nexport default ProductsTable;\r\n","var api = require(\"!../../../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./productsTable.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./productsTable.scss\",\n function () {\n content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./productsTable.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Divider } from '@mui/material';\r\nimport Button from 'components/common/Button';\r\nimport LoadingSpinner from 'components/common/LoadingSpinner';\r\nimport { formatCurrency } from 'services/currency';\r\nimport EditButton from 'components/common/EditButton';\r\nimport './styles/productsViewDrawerContent.scss';\r\n\r\nexport default function ProductsViewDrawerContent({ product, isLoading, setIsDrawerOpen, setIsEditing }) {\r\n if (isLoading) {\r\n return \r\n setIsEditing(true)} label='Edit Product' />\r\n \r\n \r\n )}\r\n {product.productCategory && (\r\n \r\n \r\n )}\r\n {product.brandName && (\r\n \r\n \r\n )}\r\n {product.sku && (\r\n \r\n \r\n )}\r\n {product.unitType && (\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n )}\r\n {product.averageCost !== 0 && (\r\n \r\n \r\n )}\r\n \r\n \r\n {product.salePrice !== 0 && (\r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n {product.productName}
\r\n Product Details
\r\n Name
\r\n {product.productName}
\r\n {product.productDescription && (\r\n Description
\r\n {product.productDescription}
\r\n Category
\r\n {product.productCategory}
\r\n Brand Name
\r\n {product.brandName}
\r\n SKU
\r\n {product.sku}
\r\n Unit Type
\r\n {product.unitType}
\r\n Availability Details
\r\n On-Hand Count
\r\n {product.available}
\r\n Financial Details
\r\n Financial details are per unit.
\r\n {product.glCode && (\r\n GL Code
\r\n {product.glCode}
\r\n Average Cost
\r\n {formatCurrency(product.averageCost)}
\r\n Price
\r\n {formatCurrency(product.basePrice)}
\r\n Sale Price
\r\n {formatCurrency(product.salePrice)}
\r\n Preferred Tax Code
\r\n {product.taxCode ? product.taxCode?.taxRateLabel : 'None'}
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nServicesView.propTypes = {\r\n categoriesMap: PropTypes.object.isRequired,\r\n serviceUnitsMap: PropTypes.object.isRequired,\r\n onOpenAlert: PropTypes.func.isRequired,\r\n categories: PropTypes.array.isRequired,\r\n isCategoryDrawerOpen: PropTypes.bool,\r\n setIsCategoryDrawerOpen: PropTypes.func\r\n};\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { TableBody, TableCell, TableContainer, TablePagination, TableRow, Table } from '@mui/material';\r\nimport TableHeader from 'components/common/TableHeader';\r\nimport { formatCurrency } from 'services/currency';\r\nimport { ROWS_PER_PAGE_OPTIONS } from 'services/constants';\r\nimport Drawer from 'components/common/Drawer';\r\nimport ServicesViewDrawerContent from '../ServicesViewDrawerContent';\r\nimport CreateServiceDrawerContent from 'components/Catalogue/components/CreateCatalogueItem/components/CreateServiceDrawerContent';\r\nimport { getProductDetail } from 'services/webApi';\r\nimport { useCancelPromise } from 'services/hooks';\r\nimport { shapeService } from 'components/Catalogue/services/shapeCatalogueItem';\r\nimport './styles/servicesTable.scss';\r\n\r\nexport default function ServicesTable({\r\n catalogueItems,\r\n paginationInfo,\r\n handlePageChange,\r\n resultsPerPage,\r\n handleResultsPerPageChange,\r\n categoriesMap,\r\n serviceUnitsMap,\r\n onOpenAlert,\r\n refetchItems,\r\n orderInfo,\r\n onSort,\r\n isCategoryDrawerOpen,\r\n setIsCategoryDrawerOpen\r\n}) {\r\n const [isDrawerOpen, setIsDrawerOpen] = useState(false);\r\n const [isLoadingView, setIsLoadingView] = useState(false);\r\n const [viewingService, setViewingService] = useState({});\r\n const [error, setError] = useState('');\r\n const [isEditing, setIsEditing] = useState(false);\r\n const cancelPromise = useCancelPromise();\r\n // IDs aligned to API call for sorting (can be changed)\r\n const headerData = [\r\n { id: 'ProductName', label: 'Name', width: '10rem' },\r\n { id: 'Category', label: 'Category', width: '10rem', disableSort: true },\r\n { id: 'BaseSalesPrice', label: 'Rate', width: '4rem' },\r\n { id: 'saleRate', label: 'Sale Rate', width: '4rem', disableSort: true },\r\n { id: 'rateType', label: 'Rate Type', width: '4rem', disableSort: true }\r\n ];\r\n\r\n const handleRowClickOpen = (item) => {\r\n setIsLoadingView(true);\r\n setIsDrawerOpen(true);\r\n\r\n getProductDetail(item.id).then(({ data }) => {\r\n if (!cancelPromise.current && data.response) {\r\n setViewingService(shapeService(data.response, categoriesMap));\r\n setIsLoadingView(false);\r\n }\r\n }).catch((error) => {\r\n if (!cancelPromise.current) {\r\n setError(error);\r\n setIsLoadingView(false);\r\n }\r\n });\r\n };\r\n\r\n const handleRowClickClose = () => {\r\n setIsDrawerOpen(false);\r\n setIsEditing(false);\r\n setIsCategoryDrawerOpen(false);\r\n };\r\n\r\n const renderViewDrawerContent = () => (\r\n \r\n null} exportPdf={() => null} />\r\n
\r\n {isFilterOpen && \r\n performSearch(val)} />\r\n \r\n setIsFilterOpen(!isFilterOpen)}\r\n className=\"users-filters__search__advancedsearch\">\r\n Advanced\r\n
\r\n \r\n setFilter(val)} />\r\n
}\r\n {isTableDataLoading && \r\n \r\n \r\n
\r\n \r\n handleRowClickClose()} previousPage={isEditing ? resetDrawers : undefined}>\r\n {!isEditing ? renderViewDrawerContent() : renderEditDrawerContent()}\r\n \r\n
\r\n );\r\n}\r\n\r\nServicesTable.propTypes = {\r\n catalogueItems: PropTypes.array.isRequired,\r\n paginationInfo: PropTypes.object.isRequired,\r\n handlePageChange: PropTypes.func.isRequired,\r\n resultsPerPage: PropTypes.number.isRequired,\r\n handleResultsPerPageChange: PropTypes.func.isRequired,\r\n categoriesMap: PropTypes.object.isRequired,\r\n serviceUnitsMap: PropTypes.object.isRequired,\r\n onOpenAlert: PropTypes.func.isRequired,\r\n refetchItems: PropTypes.func.isRequired,\r\n orderInfo: PropTypes.object.isRequired,\r\n onSort: PropTypes.func.isRequired,\r\n isCategoryDrawerOpen: PropTypes.bool,\r\n setIsCategoryDrawerOpen: PropTypes.func\r\n};\r\n","import ServicesTable from './ServicesTable';\r\n\r\nexport default ServicesTable;\r\n","var api = require(\"!../../../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./servicesTable.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./servicesTable.scss\",\n function () {\n content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./servicesTable.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Divider } from '@mui/material';\r\nimport Button from 'components/common/Button';\r\nimport LoadingSpinner from 'components/common/LoadingSpinner';\r\nimport { formatCurrency } from 'services/currency';\r\nimport EditButton from 'components/common/EditButton';\r\nimport './styles/servicesViewDrawerContent.scss';\r\n\r\nexport default function ServicesViewDrawerContent({ service, isLoading, setIsDrawerOpen, setIsEditing }) {\r\n if (isLoading) {\r\n return \r\n setIsEditing(true)} label='Edit Service' />\r\n \r\n \r\n )}\r\n {service.productCategory && (\r\n \r\n \r\n )}\r\n \r\n \r\n )}\r\n \r\n \r\n {service.saleRate !== 0 && (\r\n \r\n \r\n )}\r\n
\r\n {service.productName}
\r\n Service Details
\r\n Name
\r\n {service.productName}
\r\n {service.productDescription && (\r\n Description
\r\n {service.productDescription}
\r\n Category
\r\n {service.productCategory}
\r\n Rate Details
\r\n Financial details are per unit.
\r\n {service.glCode && (\r\n GL Code
\r\n {service.glCode}
\r\n Rate
\r\n {formatCurrency(service.rate)}
\r\n Sale Rate
\r\n {formatCurrency(service.saleRate)}
\r\n Rate Type
\r\n {service.rateType}
\r\n Preferred Tax Code
\r\n {service.taxCode ? service.taxCode?.taxRateLabel : 'None'}
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nCompany.propTypes = {\r\n location: PropTypes.object\r\n};\r\n","import { connect } from 'react-redux';\r\nimport Company from './Company';\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Company);\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport TextField from 'components/common/TextField';\r\nimport Button from 'components/common/Button';\r\nimport Drawer from 'components/common/Drawer';\r\nimport ArchiveSection from 'components/ArchiveSection';\r\nimport useCompanyBranchForm from 'components/Company/services/hooks/useCompanyBranch';\r\nimport { parseErrorMessage } from 'services/webApi';\r\nimport { Divider, InputAdornment } from '@mui/material';\r\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\r\nimport './styles/branchForm.scss';\r\nimport { formatPhoneNumber, validatePhone } from 'services/phone';\r\nimport { useAddressLookup } from 'services/hooks';\r\nimport AutoComplete from 'components/common/AutoComplete';\r\nimport {\r\n defaultAutoCompleteOption\r\n} from '../../../../services/webApi/googleApi';\r\n\r\nexport default function BranchForm({ open, onClose, selectedBranch, setAlertOpen, setAlertMessage, fetchInitialData }) {\r\n const [edit, setEdit] = useState(false);\r\n const {\r\n isLoading,\r\n error,\r\n branchName,\r\n setBranchName,\r\n branchAlias,\r\n setBranchAlias,\r\n branchManager,\r\n setBranchManager,\r\n email,\r\n setEmail,\r\n phoneNumber,\r\n updatePhoneNumber,\r\n address,\r\n setAddress,\r\n taxCodes,\r\n preferredTaxCode,\r\n setPreferredTaxCode,\r\n openingBalance,\r\n setOpeningBalance,\r\n createBranch,\r\n editBranch,\r\n deleteBranch,\r\n phoneNumberPrefix,\r\n resetForm,\r\n applyAddress\r\n} = useCompanyBranchForm(selectedBranch);\r\n const handleCreateBranch = async () => {\r\n try {\r\n await createBranch();\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'success', message: 'Successfully created branch' });\r\n closePanel();\r\n fetchInitialData();\r\n } catch (err) {\r\n /* eslint-disable no-console */\r\n console.error(err);\r\n }\r\n };\r\n\r\n const handleUpdateBranch = async () => {\r\n try {\r\n await editBranch();\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'success', message: `Successfully updated branch: ${branchName}` });\r\n closePanel();\r\n fetchInitialData();\r\n } catch (err) {\r\n /* eslint-disable no-console */\r\n console.error(err);\r\n }\r\n };\r\n\r\n const handleDeleteBranch = async () => {\r\n try {\r\n await deleteBranch();\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'success', message: `Successfully deleted branch: ${selectedBranch.branchName}` });\r\n closePanel();\r\n fetchInitialData();\r\n } catch (err) {\r\n /* eslint-disable no-console */\r\n console.error(err);\r\n }\r\n };\r\n\r\n const closePanel = () => {\r\n resetForm();\r\n setEdit(false);\r\n onClose();\r\n };\r\n\r\n const isCreateFormComplete = () => {\r\n // TODO: postal code valication\r\n return branchName && branchAlias && branchManager && email && validatePhone(phoneNumber) && address.addressOne && address.city && address.province;\r\n };\r\n\r\n console.log(address);\r\n return (\r\n Company
\r\n \r\n setPageTab(value)}>\r\n \r\n
\r\n \r\n {isLoading &&
\r\n \r\n {!selectedBranch && \r\n \r\n }\r\n {selectedBranch && edit &&\r\n \r\n \r\n }\r\n {selectedBranch && edit && (\r\n
\r\n \r\n Create Branch\r\n
\r\n }\r\n {selectedBranch && !edit &&\r\n {selectedBranch.branchCode}
\r\n {selectedBranch.branchName}
\r\n Edit Branch
\r\n }\r\n \r\n setBranchNumber(val)} /> */}\r\n setBranchName(val)} />\r\n setBranchAlias(val)} />\r\n
\r\n Branch
\r\n {/* Cannot set branch number, branch code generated upon creation */}\r\n {/* \r\n setBranchManager(val)} />\r\n setEmail(val)} />\r\n {phoneNumberPrefix} }}\r\n onInputChange={val => updatePhoneNumber(val)} />\r\n
\r\n Contact
\r\n \r\n setAddress({ ...address, addressOne: val })}\r\n onAutocomplete={place => applyAddress(place)}\r\n autocompleteOptions={defaultAutoCompleteOption} />\r\n setAddress({ ...address, addressTwo: val })} />\r\n
\r\n Address
\r\n \r\n setAddress({ ...address, city: val })} />\r\n setAddress({ ...address, province: val })} />\r\n
\r\n \r\n setAddress({ ...address, country: val })} />\r\n setAddress({ ...address, postalCode: val })} />\r\n
\r\n \r\n option?.id === value?.id}\r\n onChange={(e, val) => setPreferredTaxCode(val)} />\r\n
\r\n {/* Tax Code Preset
\r\n Optional. This will be the predetermined tax code when adding products/services in an invoice while this is your selected branch.
\r\n */}\r\n {/* setOpeningBalance(val)} /> */}\r\n\r\n {/*
*/}\r\n Opening Credit
*/}\r\n\r\n {/* \r\n
\r\n }\r\n \r\n } onClick={() => setEdit(true)}>Edit Branch\r\n
\r\n \r\n
\r\n Branch
\r\n \r\n
\r\n Name
\r\n {selectedBranch.branchName}
\r\n \r\n
\r\n Number
\r\n {selectedBranch.branchCode}
\r\n \r\n
\r\n Contact
\r\n \r\n
\r\n Manager
\r\n {selectedBranch.branchManager}
\r\n \r\n
\r\n Branch Email
\r\n {selectedBranch.emailAddress}
\r\n \r\n
\r\n Branch Phone
\r\n {phoneNumberPrefix} {formatPhoneNumber(selectedBranch.phoneNumber)}
\r\n \r\n
\r\n Address
\r\n \r\n
\r\n Address 1
\r\n {selectedBranch.branchAddress}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n City
\r\n {selectedBranch.city}
\r\n \r\n
\r\n Province
\r\n {selectedBranch.province?.province}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Country
\r\n {selectedBranch.country?.country}
\r\n \r\n
\r\n Postal Code
\r\n {selectedBranch.postalCode}
\r\n \r\n
\r\n {/* Tax Code
\r\n \r\n
\r\n Preferred Tax Code
\r\n {selectedBranch.preferredTaxCode ? selectedBranch.preferredTaxCode?.taxRateLabel : 'None'}
\r\n */}\r\n {/*
*/}\r\n\r\n Opening Credit
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* Opening Balance
*/}\r\n {/* {selectedBranch.openingBalance ? selectedBranch.openingBalance : '0.00'}
*/}\r\n {/* \r\n {error && !isLoading &&
\r\n \r\n );\r\n}\r\n\r\nBranchForm.propTypes = {\r\n open: PropTypes.bool,\r\n onClose: PropTypes.func,\r\n selectedBranch: PropTypes.object || PropTypes.null,\r\n setAlertOpen: PropTypes.func,\r\n setAlertMessage: PropTypes.func,\r\n fetchInitialData: PropTypes.func\r\n};\r\n","import { connect } from 'react-redux';\r\nimport BranchForm from './BranchForm';\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(BranchForm);\r\n","import BranchFormContainer from './BranchFormContainer';\r\n\r\nexport default BranchFormContainer;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./branchForm.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./branchForm.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./branchForm.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React from 'react';\r\nimport './styles/branchesExport.scss';\r\nimport ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';\r\nimport { ButtonBase } from '@mui/material';\r\nimport FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport MenuList from '@mui/material/MenuList';\r\nimport useCompanyBranchExport from '../../services/hooks/useCompanyBranchExport';\r\n\r\nexport default function BranchesExport() {\r\n const [\r\n exportBranchesAsCsv,\r\n exportBranchesAsPdf,\r\n targetElement,\r\n setTargetElement,\r\n closeExportDropdown] = useCompanyBranchExport();\r\n\r\n const updateTargetElement = (event) => {\r\n setTargetElement(event.currentTarget);\r\n };\r\n\r\n return (\r\n \r\n {parseErrorMessage(error)}\r\n
}\r\n \r\n \r\n {!selectedBranch &&\r\n \r\n }\r\n {selectedBranch && edit &&\r\n \r\n }\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import BranchesExport from './BranchesExport';\r\n\r\nexport default BranchesExport;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./branchesExport.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./branchesExport.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./branchesExport.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport TextField from 'components/common/TextField';\r\nimport Modal from 'components/common/Modal';\r\nimport Button from 'components/common/Button';\r\nimport Dropdown from 'components/common/Dropdown';\r\nimport ErrorIcon from '@mui/icons-material/Error';\r\nimport { Divider } from '@mui/material';\r\nimport Alert from 'components/common/Alert';\r\nimport CheckIcon from '@mui/icons-material/Check';\r\nimport useCompanyBanking from './hooks/useCompanyBanking';\r\nimport useRemoveConnectionModal from './hooks/useRemoveConnectionModal';\r\nimport clearlyPaymentsImage from './assets/clearly_payments.png';\r\nimport { parseErrorMessage } from 'services/webApi';\r\nimport './styles/companyBanking.scss';\r\n\r\nexport default function CompanyBanking({\r\n companyBankingDetails,\r\n fetchCompanyBankingInfo,\r\n onRemoveConnection,\r\n externalAccountDetails\r\n}) {\r\n const [alertOpen, setAlertOpen] = useState(false);\r\n const [alertMessage, setAlertMessage] = useState('');\r\n\r\n const { isModalOpen, setIsModalOpen, currentModalType, openModal } = useRemoveConnectionModal();\r\n\r\n const { isLoading, error, paymentAccounts, defaultAccountExists, externalAccountExists, etransferConnected, paymentGatewayConnected, defaultAccountEdit, setDefaultAccountEdit, externalAccountEdit, setExternalAccountEdit,\r\n paymentGatewayEdit, setPaymentGatewayEdit, etransferEdit, setEtransferEdit, paymentFrom, setPaymentFrom, paymentTo, setPaymentTo, description, setDescription, financialInstitution, setFinancialInstitution,\r\n branchNumber, setBranchNumber, accountNumber, setAccountNumber, etransferEmail, setEtransferEmail, paymentTransactionType, setPaymentTransactionType,\r\n paymentMerchantId, setPaymentMerchantId, paymentUserId, setPaymentUserId, paymentPIN, setPaymentPIN, resetFields, saveChanges, saveExternalAccountChanges,\r\n removeConnection, defaultAccountFormFilled, externalAccountFormFilled, etransferFormFilled, paymentGatewayFormFilled, defaultAccountInputChanged\r\n } = useCompanyBanking(companyBankingDetails, fetchCompanyBankingInfo, externalAccountDetails, currentModalType, onRemoveConnection, setAlertOpen, setAlertMessage);\r\n\r\n const removeExistingConnection = () => {\r\n setIsModalOpen(false);\r\n removeConnection();\r\n };\r\n\r\n return (\r\n \r\n setAlertOpen(false)}>{alertMessage.message} \r\n removeExistingConnection()}\r\n isPrimaryDelete\r\n onClose={() => setIsModalOpen(false)}\r\n />\r\n
\r\n );\r\n}\r\n\r\nCompanyBanking.propTypes = {\r\n companyBankingDetails: PropTypes.object,\r\n fetchCompanyBankingInfo: PropTypes.func,\r\n onRemoveConnection: PropTypes.func,\r\n externalAccountDetails: PropTypes.object\r\n};\r\n","import { connect } from 'react-redux';\r\nimport CompanyBanking from './CompanyBanking';\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CompanyBanking);\r\n","export default __webpack_public_path__ + \"72cea104d7d508052beeab739fff9187.png\";","import { useEffect, useState } from 'react';\r\nimport { updateCompanyDetails, createExternalAccount, getAllAccounts, getAllInternalAccounts } from 'services/webApi';\r\nimport { useApi } from 'services/hooks';\r\n\r\nexport default function useCompanyBanking (companyBankingDetails, fetchCompanyBankingInfo, externalAccountDetails, currentModalType, onRemoveConnection, setAlertOpen, setAlertMessage) {\r\n const [isLoading, callApi] = useApi();\r\n const [defaultAccountExists, setDefaultAccountExists] = useState();\r\n const [externalAccountExists, setExternalAccountExists] = useState();\r\n const [etransferConnected, setEtransferConnected] = useState();\r\n const [paymentGatewayConnected, setPaymentGatewayConnected] = useState();\r\n const [defaultAccountEdit, setDefaultAccountEdit] = useState(false);\r\n const [externalAccountEdit, setExternalAccountEdit] = useState(false);\r\n const [etransferEdit, setEtransferEdit] = useState(false);\r\n const [paymentGatewayEdit, setPaymentGatewayEdit] = useState(false);\r\n const [paymentFrom, setPaymentFrom] = useState();\r\n const [paymentTo, setPaymentTo] = useState();\r\n const [description, setDescription] = useState();\r\n const [financialInstitution, setFinancialInstitution] = useState();\r\n const [branchNumber, setBranchNumber] = useState();\r\n const [accountNumber, setAccountNumber] = useState();\r\n const [etransferEmail, setEtransferEmail] = useState();\r\n const [paymentTransactionType, setPaymentTransactionType] = useState();\r\n const [paymentMerchantId, setPaymentMerchantId] = useState();\r\n const [paymentUserId, setPaymentUserId] = useState();\r\n const [paymentPIN, setPaymentPIN] = useState();\r\n const [paymentAccounts, setPaymentAccounts] = useState([]);\r\n\r\n useEffect(() => {\r\n fetchInternalAccounts();\r\n }, []);\r\n\r\n const fetchInternalAccounts = async () => {\r\n try {\r\n const response = await getAllInternalAccounts();\r\n setPaymentAccounts(response?.data?.result || []);\r\n setPaymentFrom(response?.data?.result[0] || '');\r\n setPaymentTo(response?.data?.result[0] || '');\r\n } catch (err) {\r\n setAlertMessage({ type: 'error', message: 'Error while retrieving default accounts' });\r\n setAlertOpen(true);\r\n }\r\n };\r\n\r\n const removeConnection = async () => {\r\n let updatedCompanyInfo;\r\n if (currentModalType === 'ExternalAccount') {\r\n updatedCompanyInfo = { ...companyBankingDetails, externalAccountExists: false, description: '', financialInstitution: '', branchNumber: '', accountNumber: '' };\r\n } else if (currentModalType === 'ETransfer') {\r\n updatedCompanyInfo = { ...companyBankingDetails, etransferConnected: false, etransferEmail: '' };\r\n } else if (currentModalType === 'PaymentGateway') {\r\n updatedCompanyInfo = { ...companyBankingDetails, paymentGatewayConnected: false, paymentTransactionType: '', paymentMerchantId: '', paymentUserId: '', paymentPIN: '' };\r\n } else {\r\n return;\r\n }\r\n try {\r\n const response = await callApi(() => updateCompanyDetails(updatedCompanyInfo));\r\n setAlertMessage({ type: 'success', message: 'Connection has been removed successfully!' });\r\n setAlertOpen(true);\r\n onRemoveConnection(response.data.updatedCompanyInfo);\r\n } catch (err) {\r\n setAlertMessage({ type: 'error', message: 'Error while removing the connection. Try again later!' });\r\n setAlertOpen(true);\r\n }\r\n };\r\n\r\n const resetFields = () => {\r\n if (companyBankingDetails) {\r\n setDefaultAccountExists(companyBankingDetails.defaultAccountExists);\r\n setExternalAccountExists(companyBankingDetails.externalAccountExists);\r\n setEtransferConnected(companyBankingDetails.etransferConnected);\r\n setPaymentGatewayConnected(companyBankingDetails.paymentGatewayConnected);\r\n setDescription(externalAccountDetails.accountName);\r\n setFinancialInstitution(externalAccountDetails.financialInstitutionId);\r\n setBranchNumber(externalAccountDetails.financialInstitutionBranchId);\r\n setAccountNumber(externalAccountDetails.accountNumber);\r\n setEtransferEmail(companyBankingDetails.etransferEmail);\r\n setPaymentTransactionType(companyBankingDetails.paymentTransactionType);\r\n setPaymentMerchantId(companyBankingDetails.paymentMerchantId);\r\n setPaymentUserId(companyBankingDetails.paymentUserId);\r\n setPaymentPIN(companyBankingDetails.paymentPIN);\r\n }\r\n setDefaultAccountEdit(false);\r\n setExternalAccountEdit(false);\r\n setEtransferEdit(false);\r\n setPaymentGatewayEdit(false);\r\n };\r\n\r\n const saveChanges = async () => {\r\n const response = await callApi(() => updateCompanyDetails());\r\n if (response) {\r\n setDefaultAccountEdit(false);\r\n setExternalAccountEdit(false);\r\n setEtransferEdit(false);\r\n fetchCompanyBankingInfo();\r\n }\r\n };\r\n\r\n const saveExternalAccountChanges = async () => {\r\n // TODO - Waiting on API changes where branch Number and Financial Institution can be added to bank-account/create\r\n const externalAccountInfo = {\r\n accountName: description,\r\n accountNumber: accountNumber\r\n };\r\n const response = await callApi(() => createExternalAccount(externalAccountInfo));\r\n if (response) {\r\n setDefaultAccountEdit(false);\r\n setExternalAccountEdit(false);\r\n setEtransferEdit(false);\r\n fetchCompanyBankingInfo();\r\n }\r\n };\r\n\r\n // Can add proper form validation in the following functions in the future. Currently only checks that form is filled\r\n const defaultAccountFormFilled = () => {\r\n return paymentFrom && paymentTo;\r\n };\r\n\r\n const externalAccountFormFilled = () => {\r\n return description && financialInstitution && branchNumber && accountNumber;\r\n };\r\n\r\n const etransferFormFilled = () => {\r\n return etransferEmail;\r\n };\r\n\r\n const paymentGatewayFormFilled = () => {\r\n return paymentTransactionType && paymentMerchantId && paymentUserId && paymentPIN;\r\n };\r\n\r\n const defaultAccountInputChanged = () => {\r\n return companyBankingDetails.paymentFrom !== paymentFrom || companyBankingDetails.paymentTo !== paymentTo;\r\n };\r\n\r\n useEffect(() => {\r\n resetFields();\r\n }, [companyBankingDetails]);\r\n\r\n return {\r\n isLoading,\r\n paymentAccounts,\r\n defaultAccountExists,\r\n externalAccountExists,\r\n etransferConnected,\r\n paymentGatewayConnected,\r\n defaultAccountEdit,\r\n setDefaultAccountEdit,\r\n externalAccountEdit,\r\n setExternalAccountEdit,\r\n paymentGatewayEdit,\r\n setPaymentGatewayEdit,\r\n etransferEdit,\r\n setEtransferEdit,\r\n paymentFrom,\r\n setPaymentFrom,\r\n paymentTo,\r\n setPaymentTo,\r\n description,\r\n setDescription,\r\n financialInstitution,\r\n setFinancialInstitution,\r\n branchNumber,\r\n setBranchNumber,\r\n accountNumber,\r\n setAccountNumber,\r\n etransferEmail,\r\n setEtransferEmail,\r\n paymentTransactionType,\r\n setPaymentTransactionType,\r\n paymentMerchantId,\r\n setPaymentMerchantId,\r\n paymentUserId,\r\n setPaymentUserId,\r\n paymentPIN,\r\n setPaymentPIN,\r\n resetFields,\r\n saveChanges,\r\n saveExternalAccountChanges,\r\n removeConnection,\r\n defaultAccountFormFilled,\r\n externalAccountFormFilled,\r\n etransferFormFilled,\r\n paymentGatewayFormFilled,\r\n defaultAccountInputChanged\r\n };\r\n}\r\n","import { useState } from 'react';\r\n\r\nexport default function useRemoveConnectionModal () {\r\n const [isModalOpen, setIsModalOpen] = useState(false);\r\n const [currentModalType, setCurrentModalType] = useState(null);\r\n\r\n const openModal = (modalFor) => {\r\n setIsModalOpen(true);\r\n setCurrentModalType(modalFor);\r\n };\r\n\r\n return {\r\n isModalOpen,\r\n setIsModalOpen,\r\n currentModalType,\r\n openModal\r\n };\r\n}\r\n","import CompanyBankingContainer from './CompanyBankingContainer';\r\n\r\nexport default CompanyBankingContainer;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./companyBanking.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./companyBanking.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./companyBanking.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","const branches = [\r\n {\r\n id: '0001',\r\n branchNumber: '0001',\r\n name: 'Branch Name 1',\r\n address: {\r\n street1: 'street 1',\r\n street2: 'street 1',\r\n city: 'city 1',\r\n province: 'province 1',\r\n country: 'country 1',\r\n postalCode: 'M1P N2X'\r\n },\r\n manager: 'Manager Name 1',\r\n branchEmail: 'test1@gmail.com',\r\n branchPhone: '+1 5197982984',\r\n status: 'active'\r\n },\r\n {\r\n id: '0002',\r\n branchNumber: '0002',\r\n name: 'Branch Name 2',\r\n address: {\r\n street1: 'street 2',\r\n street2: 'street 2',\r\n city: 'city 2',\r\n province: 'province 2',\r\n country: 'country 2',\r\n postalCode: 'M1P N2X'\r\n },\r\n manager: 'Manager Name 2',\r\n branchEmail: 'test1@gmail.com',\r\n branchPhone: '+1 5197982984',\r\n status: 'active'\r\n },\r\n {\r\n id: '0003',\r\n branchNumber: '0003',\r\n name: 'Branch Name 3',\r\n address: {\r\n street1: 'street 3',\r\n street2: '',\r\n city: 'city 3',\r\n province: 'province 3',\r\n country: 'country 3',\r\n postalCode: 'M1P N2X'\r\n },\r\n manager: 'Manager Name 3',\r\n branchEmail: 'test1@gmail.com',\r\n branchPhone: '+1 5197982984',\r\n status: 'active'\r\n },\r\n {\r\n id: '0004',\r\n branchNumber: '0004',\r\n name: 'Branch Name 4',\r\n address: {\r\n street1: 'street 4',\r\n street2: '',\r\n city: 'city 4',\r\n province: 'province 4',\r\n country: 'country 4',\r\n postalCode: 'M1P N2X'\r\n },\r\n manager: 'Manager Name 4',\r\n branchEmail: 'test1@gmail.com',\r\n branchPhone: '+1 5197982984',\r\n status: 'active'\r\n },\r\n {\r\n id: '0005',\r\n branchNumber: '0005',\r\n name: 'Branch Name 5',\r\n address: {\r\n street1: 'street 5',\r\n street2: '',\r\n city: 'city 5',\r\n province: 'province 5',\r\n country: 'country 5',\r\n postalCode: 'M1P N2X'\r\n },\r\n manager: 'Manager Name 5',\r\n branchEmail: 'test1@gmail.com',\r\n branchPhone: '+1 5197982984',\r\n status: 'active'\r\n },\r\n {\r\n id: '0006',\r\n branchNumber: '0006',\r\n name: 'Branch Name 6',\r\n address: {\r\n street1: 'street 6',\r\n street2: '',\r\n city: 'city 6',\r\n province: 'province 6',\r\n country: 'country 6',\r\n postalCode: 'M1P N2X'\r\n },\r\n manager: 'Manager Name 6',\r\n branchEmail: 'test1@gmail.com',\r\n branchPhone: '+1 5197982984',\r\n status: 'active'\r\n },\r\n {\r\n id: '0007',\r\n branchNumber: '0007',\r\n name: 'Branch Name 7',\r\n address: {\r\n street1: 'street 7',\r\n street2: '',\r\n city: 'city 7',\r\n province: 'province 7',\r\n country: 'country 7',\r\n postalCode: 'M1P N2X'\r\n },\r\n manager: 'Manager Name 7',\r\n branchEmail: 'test1@gmail.com',\r\n branchPhone: '+1 5197982984',\r\n status: 'active'\r\n },\r\n {\r\n id: '0008',\r\n branchNumber: '0008',\r\n name: 'Branch Name 8',\r\n address: {\r\n street1: 'street 8',\r\n street2: '',\r\n city: 'city 8',\r\n province: 'province 8',\r\n country: 'country 8',\r\n postalCode: 'M1P N2X'\r\n },\r\n manager: 'Manager Name 8',\r\n branchEmail: 'test1@gmail.com',\r\n branchPhone: '+1 5197982984',\r\n status: 'active'\r\n },\r\n {\r\n id: '0009',\r\n branchNumber: '0009',\r\n name: 'Branch Name 9',\r\n address: {\r\n street1: 'street 9',\r\n street2: '',\r\n city: 'city 9',\r\n province: 'province 9',\r\n country: 'country 9',\r\n postalCode: 'M1P N2X'\r\n },\r\n manager: 'Manager Name 9',\r\n branchEmail: 'test1@gmail.com',\r\n branchPhone: '+1 5197982984',\r\n status: 'active'\r\n },\r\n {\r\n id: '0010',\r\n branchNumber: '0010',\r\n name: 'Branch Name 10',\r\n address: {\r\n street1: 'street 10',\r\n street2: '',\r\n city: 'city 10',\r\n province: 'province 10',\r\n country: 'country 10',\r\n postalCode: 'M1P N2X'\r\n },\r\n manager: 'Manager Name 10',\r\n branchEmail: 'test1@gmail.com',\r\n branchPhone: '+1 5197982984',\r\n status: 'active'\r\n },\r\n {\r\n id: '0011',\r\n branchNumber: '0011',\r\n name: 'Branch Name 11',\r\n address: {\r\n street1: 'street 11',\r\n street2: '',\r\n city: 'city 11',\r\n province: 'province 11',\r\n country: 'country 11',\r\n postalCode: 'M1P N2X'\r\n },\r\n manager: 'Manager Name 11',\r\n branchEmail: 'test1@gmail.com',\r\n branchPhone: '+1 5197982984',\r\n status: 'active'\r\n }\r\n];\r\n\r\nexport default branches;\r\n","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from 'components/common/Button';\r\nimport LoadingSpinner from 'components/common/LoadingSpinner';\r\nimport TableHeader from 'components/common/TableHeader';\r\nimport Alert from 'components/common/Alert';\r\nimport BranchForm from '../BranchForm';\r\nimport { useApi } from 'services/hooks';\r\nimport { parseErrorMessage, getTenantBranchList } from 'services/webApi';\r\nimport AddIcon from '@mui/icons-material/Add';\r\nimport { Table, TableBody, TableCell, TableContainer, TablePagination, TableRow } from '@mui/material';\r\nimport './styles/companyBranches.scss';\r\nimport BranchesExport from '../BranchesExport';\r\nimport { ROWS_PER_PAGE_OPTIONS, ROWS_PER_PAGE_DEFAULT } from 'services/constants';\r\nimport { formatPhoneNumber } from 'services/phone';\r\n\r\nexport default function CompanyBranches({ businessId }) {\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [error, setError] = useState('');\r\n const [branches, setBranches] = useState();\r\n const [totalRows, setTotalRows] = useState(0);\r\n const [pageNumber, setPageNumber] = useState(0);\r\n const [resultsPerPage, setResultsPerPage] = useState(ROWS_PER_PAGE_DEFAULT);\r\n const [order, setOrder] = useState('');\r\n const [orderBy, setOrderBy] = useState('');\r\n\r\n const [isPanelOpen, setIsPanelOpen] = useState(false);\r\n const [selectedRow, setSelectedRow] = useState([]);\r\n const [selectedBranch, setSelectedBranch] = useState(null);\r\n const [alertMessage, setAlertMessage] = useState({});\r\n const [alertOpen, setAlertOpen] = useState(false);\r\n\r\n const fetchCompanyBranches = async (pageNumber, resultsPerPage, orderBy, order) => {\r\n const sortText = orderBy && order && `${orderBy} ${order}` || '';\r\n try {\r\n const response = await getTenantBranchList({\r\n page: pageNumber + 1,\r\n limit: resultsPerPage || '10',\r\n sortText: sortText\r\n });\r\n setBranches(response.data?.result);\r\n setTotalRows(response.data?.totalCount);\r\n } catch (err) {\r\n setError('Error retrieving branches. Please try again later.');\r\n }\r\n };\r\n\r\n const fetchInitialData = () => {\r\n setPageNumber(0);\r\n fetchCompanyBranches('0', resultsPerPage, orderBy, order);\r\n };\r\n\r\n useEffect(() => {\r\n fetchInitialData();\r\n }, []);\r\n\r\n const branchHeaders = [\r\n { id: 'branchCode', label: 'Number', width: '4rem' },\r\n { id: 'branchName', label: 'Name', width: '8rem' },\r\n { id: 'branchAddress', label: 'Address', width: '10rem', disableSort: true },\r\n { id: 'branchManager', label: 'Primary Contact', width: '8rem' },\r\n { id: 'isActive', label: 'Status', width: '4em' }\r\n ];\r\n\r\n const capitalizeFirstLetter = str => str.charAt(0).toUpperCase() + str.slice(1);\r\n\r\n const handlePageChange = (newPage) => {\r\n setPageNumber(newPage);\r\n fetchCompanyBranches(newPage, resultsPerPage, order, orderBy);\r\n };\r\n\r\n const handleResultsPerPageChange = (newResultsPerPage) => {\r\n setResultsPerPage(newResultsPerPage);\r\n setPageNumber(0);\r\n fetchCompanyBranches(0, newResultsPerPage, order, orderBy);\r\n };\r\n\r\n const sortItems = (orderByParam) => {\r\n const newOrder = (orderBy === orderByParam && order === 'asc') ? 'desc' : order === 'desc' ? '' : 'asc';\r\n const newOrderBy = newOrder ? orderByParam : '';\r\n setOrderBy(newOrderBy);\r\n setOrder(newOrder);\r\n fetchCompanyBranches(0, resultsPerPage, newOrderBy, newOrder);\r\n };\r\n\r\n const openPanelForBranch = (event, branch) => {\r\n setSelectedBranch(branch);\r\n setIsPanelOpen(true);\r\n };\r\n\r\n const handleRowKeypress = (event, row) => {\r\n if (event.charCode === 13) {\r\n openPanelForBranch(event, row);\r\n }\r\n };\r\n\r\n const closePanel = () => {\r\n setSelectedBranch(null);\r\n setIsPanelOpen(false);\r\n };\r\n\r\n return (\r\n \r\n
\r\n\r\n \r\n Default Accounts\r\n {defaultAccountExists && !defaultAccountEdit &&
\r\n \r\n \r\n
}\r\n Choose your default Fuse accounts for making bill payments and receiving invoice payments.
\r\n {(defaultAccountExists || defaultAccountEdit) && \r\n
}\r\n {!defaultAccountExists && !defaultAccountEdit && \r\n `${account.AccountName} (${account.AccountNumber})`}\r\n onChange={(e) => setPaymentFrom(e.target.value)} items={paymentAccounts.map(account => ({ label: `${account.AccountName} (${account.AccountNumber})`, value: account }))} />\r\n :
\r\n Make Payments From
\r\n {defaultAccountEdit\r\n ? {paymentFrom && `${paymentFrom.AccountName} (${paymentFrom.AccountNumber})`}
}\r\n \r\n `${account.AccountName} (${account.AccountNumber})`}\r\n onChange={(e) => setPaymentTo(e.target.value)} items={paymentAccounts.map(account => ({ label: `${account.AccountName} (${account.AccountNumber})`, value: account }))} />\r\n :
\r\n Make Payments To
\r\n {defaultAccountEdit\r\n ? {paymentTo && `${paymentTo.AccountName} (${paymentTo.AccountNumber})`}
}\r\n \r\n
}\r\n {defaultAccountEdit && \r\n \r\n
\r\n \r\n
}\r\n \r\n \r\n saveChanges()}\r\n isLoading={isLoading}\r\n disabled={defaultAccountExists ? !defaultAccountInputChanged() : !defaultAccountFormFilled()}>\r\n Save Changes\r\n \r\n
\r\n \r\n
\r\n \r\n External Account\r\n {/* {externalAccountExists && !externalAccountEdit &&
\r\n \r\n \r\n
} */}\r\n Link an external account to fund your Fuse Account. Amount will be available in 24 hours.
\r\n {(externalAccountExists || externalAccountEdit) && \r\n
}\r\n {!externalAccountExists && !externalAccountEdit && \r\n setDescription(val)} />\r\n :
\r\n Description
\r\n {externalAccountEdit && !externalAccountExists\r\n ? {description}
}\r\n \r\n setFinancialInstitution(val)} />\r\n :
\r\n Financial Institution
\r\n {externalAccountEdit && !externalAccountExists\r\n ? {financialInstitution}
}\r\n \r\n setBranchNumber(val)} />\r\n :
\r\n Branch Number
\r\n {externalAccountEdit && !externalAccountExists\r\n ? {branchNumber}
}\r\n \r\n setAccountNumber(val)} />\r\n :
\r\n Account Number
\r\n {externalAccountEdit && !externalAccountExists\r\n ? {accountNumber}
}\r\n \r\n
}\r\n {!externalAccountExists && externalAccountEdit && \r\n \r\n
\r\n \r\n
}\r\n {externalAccountExists && externalAccountEdit && \r\n \r\n saveExternalAccountChanges()}\r\n isLoading={isLoading}\r\n disabled={!externalAccountFormFilled()}>\r\n Connect Account\r\n \r\n
\r\n \r\n
}\r\n \r\n \r\n openModal('ExternalAccount')}\r\n variant='filled-deactivate'\r\n isLoading={isLoading}>\r\n Remove Connection\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n E-Transfer\r\n {etransferConnected && !etransferEdit &&
\r\n \r\n \r\n
}\r\n You can provide an email to allow customers to pay invoices through E-Transfer.
\r\n {(etransferConnected || etransferEdit) && \r\n
}\r\n {!etransferConnected && !etransferEdit && \r\n setEtransferEmail(val)} />\r\n :
\r\n Email
\r\n {etransferEdit && !etransferConnected\r\n ? {etransferEmail}
}\r\n \r\n
}\r\n {!etransferConnected && etransferEdit && \r\n \r\n
\r\n \r\n
}\r\n {etransferConnected && etransferEdit && \r\n \r\n saveChanges()}\r\n isLoading={isLoading}\r\n disabled={!etransferFormFilled()}>\r\n Save Changes\r\n \r\n
\r\n \r\n
}\r\n \r\n \r\n openModal('ETransfer')}\r\n isLoading={isLoading}>\r\n Remove Connection\r\n \r\n
\r\n \r\n
\r\n \r\n Payment Gateway\r\n {paymentGatewayConnected && !paymentGatewayEdit &&
\r\n \r\n \r\n
}\r\n \r\n
\r\n {(paymentGatewayConnected || paymentGatewayEdit) && \r\n 
\r\n
\r\n \r\n Accept credit card payments to get paid faster!\r\n
\r\n \r\n {paymentGatewayConnected\r\n ? \r\n \r\n \r\n \r\n }\r\n
\r\n Connected
\r\n : !paymentGatewayEdit && \r\n
}\r\n {paymentGatewayEdit && !paymentGatewayConnected && \r\n setPaymentTransactionType(val)} />\r\n :
\r\n Transaction Type
\r\n {paymentGatewayEdit && !paymentGatewayConnected\r\n ? {paymentTransactionType}
}\r\n \r\n setPaymentMerchantId(val)} />\r\n :
\r\n Merchant ID
\r\n {paymentGatewayEdit && !paymentGatewayConnected\r\n ? {paymentMerchantId}
}\r\n \r\n setPaymentUserId(val)} />\r\n :
\r\n Payment User ID
\r\n {paymentGatewayEdit && !paymentGatewayConnected\r\n ? {paymentUserId}
}\r\n \r\n setPaymentPIN(val)} />\r\n :
\r\n Payment PIN
\r\n {paymentGatewayEdit && !paymentGatewayConnected\r\n ? {paymentPIN}
}\r\n \r\n
}\r\n {paymentGatewayEdit && paymentGatewayConnected && \r\n \r\n \r\n
\r\n \r\n
}\r\n \r\n \r\n \r\n
\r\n \r\n setAlertOpen(false)}>{alertMessage.message} \r\n closePanel()}\r\n selectedBranch={selectedBranch}\r\n setAlertOpen={setAlertOpen}\r\n setAlertMessage={setAlertMessage}\r\n fetchInitialData={fetchInitialData}\r\n />\r\n
\r\n );\r\n}\r\n\r\nCompanyBranches.propTypes = {\r\n businessId: PropTypes.string\r\n};\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./companyBranches.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./companyBranches.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./companyBranches.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport TextField from 'components/common/TextField';\r\nimport Button from 'components/common/Button';\r\nimport { useApi } from 'services/hooks';\r\nimport { parseErrorMessage, updateCompanyDetails } from 'services/webApi';\r\nimport { DatePicker } from '@mui/lab';\r\nimport { Divider } from '@mui/material';\r\nimport './styles/companyDetail.scss';\r\nimport { Rectangle } from '@mui/icons-material';\r\nimport CompanyBranches from '../CompanyBranches/CompanyBranches';\r\n\r\nexport default function CompanyDetail({\r\n headOfficeError,\r\n headOfficeDetails,\r\n fetchHeadOfficeInfo\r\n}) {\r\n const [isLoading, error, callApi] = useApi();\r\n const [editMode, setEditMode] = useState(false);\r\n const [valid, setValid] = useState(true);\r\n const [businessName, setBusinessName] = useState('');\r\n const [businessId, setBusinessId] = useState('');\r\n const [businessAlias, setBusinessAlias] = useState('');\r\n const [companyType, setCompanyType] = useState('');\r\n const [businessStartDate, setBusinessStartDate] = useState('');\r\n const [industry, setIndustry] = useState('');\r\n const [address, setAddress] = useState({\r\n addressOne: '',\r\n addressTwo: '',\r\n city: '',\r\n province: '',\r\n country: '',\r\n postalCode: ''\r\n });\r\n const [timeZone, setTimeZone] = useState('');\r\n\r\n useEffect(() => {\r\n resetFields();\r\n }, [headOfficeDetails]);\r\n\r\n const resetFields = () => {\r\n headOfficeDetails && setBusinessName(headOfficeDetails.businessName);\r\n headOfficeDetails && setBusinessId(headOfficeDetails.businessId);\r\n headOfficeDetails && setBusinessStartDate(headOfficeDetails.businessStartDate);\r\n headOfficeDetails && setCompanyType(headOfficeDetails.companyType);\r\n headOfficeDetails && setBusinessAlias(headOfficeDetails.businessAlias);\r\n headOfficeDetails && setIndustry(headOfficeDetails.industry);\r\n headOfficeDetails && setAddress(headOfficeDetails.address);\r\n headOfficeDetails && setTimeZone(headOfficeDetails.timeZone);\r\n setEditMode(false);\r\n };\r\n const handleBusinessIdValidation = (val) => {\r\n const reg = new RegExp('[0-9]{15}');\r\n setValid(reg.test(val));\r\n setBusinessId(val);\r\n };\r\n\r\n const saveChanges = async () => {\r\n const response = await callApi(() => updateCompanyDetails());\r\n if (response) {\r\n setEditMode(false);\r\n fetchHeadOfficeInfo();\r\n }\r\n };\r\n\r\n const determineChangesMade = () => {\r\n return true;\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n Branches\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {error &&
\r\n {error}
}\r\n {isLoading && \r\n \r\n \r\n
\r\n \r\n handlePageChange(page)}\r\n onRowsPerPageChange={(event) => handleResultsPerPageChange(event.target.value)}\r\n />\r\n
}\r\n \r\n
\r\n );\r\n}\r\n\r\nCompanyDetail.propTypes = {\r\n headOfficeError: PropTypes.string,\r\n headOfficeDetails: PropTypes.object,\r\n fetchHeadOfficeInfo: PropTypes.func\r\n};\r\n","import { connect } from 'react-redux';\r\nimport CompanyDetail from './CompanyDetail';\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CompanyDetail);\r\n","import CompanyDetailContainer from './CompanyDetailContainer';\r\n\r\nexport default CompanyDetailContainer;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./companyDetail.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./companyDetail.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./companyDetail.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import CompanyContainer from './CompanyContainer';\r\n\r\nexport default CompanyContainer;\r\n","import React, { useState, useEffect } from 'react';\r\nimport { useApi, useCancelPromise, useTaxCodesList } from 'services/hooks';\r\nimport { createTenantBranch, deleteTenantBranch, editTenantBranch } from 'services/webApi';\r\nimport { extractAddressFromGoogleArray, validateGooglePlace } from '../../../../services/webApi/googleApi';\r\n\r\nexport default function useCompanyBranchForm (\r\n selectedBranch\r\n) {\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [error, setError] = useState('');\r\n const [branchName, setBranchName] = useState('');\r\n const [branchAlias, setBranchAlias] = useState('');\r\n const [branchManager, setBranchManager] = useState('');\r\n const [email, setEmail] = useState('');\r\n const [phoneNumber, setPhoneNumber] = useState('');\r\n const [address, setAddress] = useState(\r\n { addressOne: '', addressTwo: '', city: '', province: '', country: 'Canada', postalCode: '' });\r\n const [preferredTaxCode, setPreferredTaxCode] = useState(undefined);\r\n\r\n const { error: taxCodesError, isLoading: taxCodesIsLoading, taxCodes } = useTaxCodesList();\r\n const [isCheckingGooglePlace, errorCheckingGooglePlace, callApi] = useApi();\r\n const cancelPromise = useCancelPromise();\r\n\r\n const phoneNumberPrefix = '+1';\r\n\r\n useEffect(() => {\r\n if (selectedBranch) {\r\n setBranchName(selectedBranch.branchName);\r\n setBranchAlias(selectedBranch.branchAlias);\r\n setBranchManager(selectedBranch.branchManager);\r\n setEmail(selectedBranch.emailAddress);\r\n setPhoneNumber(selectedBranch.phoneNumber);\r\n setAddress({\r\n addressOne: selectedBranch.branchAddress,\r\n city: selectedBranch.city,\r\n province: selectedBranch.province,\r\n postalCode: selectedBranch.postalCode,\r\n country: 'Canada'\r\n });\r\n setPreferredTaxCode(selectedBranch.preferredTaxCode);\r\n }\r\n }, [selectedBranch]);\r\n\r\n const updatePhoneNumber = phoneNum => {\r\n setPhoneNumber(phoneNum.toString().replace(/[^0-9]/g, ''));\r\n };\r\n\r\n const createBranch = async () => {\r\n setIsLoading(true);\r\n setError('');\r\n try {\r\n const response = await createTenantBranch({\r\n branchName: branchName,\r\n branchAlias: branchAlias,\r\n branchManager: branchManager,\r\n emailAddress: email,\r\n phoneNumber: phoneNumber,\r\n branchAddress: address.addressOne,\r\n city: address.city,\r\n provinceId: address.province?.id,\r\n postalCode: address.postalCode,\r\n preferredTaxCodeId: preferredTaxCode?.id\r\n });\r\n if (!cancelPromise.current) {\r\n setIsLoading(false);\r\n return response;\r\n }\r\n } catch (err) {\r\n setIsLoading(false);\r\n setError('Error occured while creating branch. Please try again later.');\r\n throw err;\r\n }\r\n };\r\n\r\n const editBranch = async () => {\r\n setIsLoading(true);\r\n setError('');\r\n try {\r\n const response = await editTenantBranch(selectedBranch.id, {\r\n branchName: branchName,\r\n branchAlias: branchAlias,\r\n branchManager: branchManager,\r\n emailAddress: email,\r\n phoneNumber: phoneNumber,\r\n branchAddress: address.addressOne,\r\n city: address.city,\r\n provinceId: address.province?.id,\r\n postalCode: address.postalCode,\r\n preferredTaxCodeId: preferredTaxCode?.id,\r\n isActive: true // API defaults isActive to be false unless stated otherwise. Forcing true as default for current phase.\r\n });\r\n if (!cancelPromise.current) {\r\n setIsLoading(false);\r\n return response;\r\n }\r\n } catch (err) {\r\n setIsLoading(false);\r\n setError('Error occured while updating branch. Please try again later.');\r\n throw err;\r\n }\r\n };\r\n\r\n const deleteBranch = async () => {\r\n setIsLoading(true);\r\n setError('');\r\n try {\r\n const response = await deleteTenantBranch(selectedBranch.id);\r\n if (!cancelPromise.current) {\r\n setIsLoading(false);\r\n return response;\r\n }\r\n } catch (err) {\r\n setIsLoading(false);\r\n setError('Error occured while deleting branch. Please try again later.');\r\n throw err;\r\n }\r\n };\r\n\r\n const resetForm = () => {\r\n setBranchName('');\r\n setBranchAlias('');\r\n setBranchManager('');\r\n setEmail('');\r\n setPhoneNumber('');\r\n setAddress({ street1: '', street2: '', city: '', province: undefined, country: 'Canada', postalCode: '' });\r\n setError('');\r\n setPreferredTaxCode(undefined);\r\n };\r\n\r\n const applyAddress = async (googlePlace, type) => {\r\n if (googlePlace) {\r\n const response = await callApi(() => validateGooglePlace(googlePlace));\r\n\r\n if (response) {\r\n const { addressOne, city, province, postalCode, country } = extractAddressFromGoogleArray(googlePlace);\r\n\r\n setAddress({\r\n ...address,\r\n addressOne,\r\n city,\r\n province: province.long_name,\r\n country: country.long_name,\r\n postalCode\r\n });\r\n }\r\n }\r\n };\r\n\r\n return {\r\n isLoading,\r\n error,\r\n branchName,\r\n setBranchName,\r\n branchAlias,\r\n setBranchAlias,\r\n branchManager,\r\n setBranchManager,\r\n email,\r\n setEmail,\r\n phoneNumber,\r\n updatePhoneNumber,\r\n address,\r\n setAddress,\r\n taxCodes,\r\n preferredTaxCode,\r\n setPreferredTaxCode,\r\n createBranch,\r\n editBranch,\r\n deleteBranch,\r\n phoneNumberPrefix,\r\n resetForm,\r\n applyAddress\r\n };\r\n}\r\n","import { useState } from 'react';\r\nimport { getBranchesCsv, getBranchesPdf } from 'services/webApi';\r\nimport { useApi } from 'services/hooks';\r\n\r\nexport default function useCompanyBranchExport () {\r\n const [isLoading, error, callApi, setError] = useApi();\r\n const [targetElement, setTargetElement] = useState(null);\r\n\r\n const closeExportDropdown = () => {\r\n setTargetElement(null);\r\n };\r\n\r\n const exportBranchesAsCsv = async () => {\r\n closeExportDropdown();\r\n const response = await callApi(() => getBranchesCsv());\r\n if (response) {\r\n // Code here to download the csv file\r\n // console.log(response);\r\n }\r\n if (error) {\r\n /* eslint-disable no-console */\r\n console.log(error);\r\n /* eslint-enable no-console */\r\n }\r\n };\r\n\r\n const exportBranchesAsPdf = async () => {\r\n closeExportDropdown();\r\n const response = await callApi(() => getBranchesPdf());\r\n if (response) {\r\n // Code here to download the csv file\r\n // console.log(response);\r\n }\r\n if (error) {\r\n /* eslint-disable no-console */\r\n console.log(error);\r\n /* eslint-enable no-console */\r\n }\r\n };\r\n\r\n return [\r\n exportBranchesAsCsv,\r\n exportBranchesAsPdf,\r\n targetElement,\r\n setTargetElement,\r\n closeExportDropdown\r\n ];\r\n}\r\n","export function shapeHeadOfficeInfo (data) {\r\n return {\r\n businessName: data.businessName,\r\n businessId: data.businessIdNumber,\r\n companyType: data.companyType,\r\n industry: data.industryType,\r\n businessAlias: data.companyName,\r\n businessStartDate: data.businessStartDate,\r\n address: {\r\n addressOne: data.addressLine1,\r\n addressTwo: data.addressLine2,\r\n city: data.city,\r\n province: data.province,\r\n country: data.country,\r\n postalCode: data.zipCode\r\n },\r\n timeZone: data.timezone\r\n };\r\n}\r\n\r\nexport function shapeCompanyBankingDetails(data) {\r\n return {\r\n defaultAccountExists: true,\r\n externalAccountExists: true,\r\n etransferConnected: true,\r\n paymentGatewayConnected: true,\r\n description: 'Example description example',\r\n financialInstitution: data.financialInstitutionId,\r\n accountNumber: data.accountNumber,\r\n branchNumber: data.financialInstitutionBranchId,\r\n etransferEmail: data.interacEmail,\r\n paymentTransactionType: data.paymentGatewayCredential?.sslTransactionType,\r\n paymentMerchantId: data.paymentGatewayCredential?.sslMerchantId,\r\n paymentUserId: data.paymentGatewayCredential?.sslUserId,\r\n paymentPIN: data.paymentGatewayCredential?.sslPin\r\n };\r\n}\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./company.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./company.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./company.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport './styles/contacts.scss';\r\nimport ContactsCustomers from './components/ContactsCustomers';\r\nimport { Divider } from '@mui/material';\r\n\r\nexport default function Contacts() {\r\n return (\r\n \r\n
\r\n {headOfficeError && Head Office
\r\n \r\n {!editMode && }\r\n
\r\n \r\n {parseErrorMessage(headOfficeError, 'en-US')}\r\n
}\r\n {error && \r\n {parseErrorMessage(error, 'en-US')}\r\n
}\r\n \r\n
\r\n \r\n setBusinessName(val)} />\r\n :
\r\n \r\n Business Name\r\n
\r\n {editMode\r\n ? {businessName}
}\r\n \r\n handleBusinessIdValidation(val)} type=\"text\" InputProps={{ inputProps: { maxLength: 15 } }} />\r\n :
\r\n \r\n Business ID\r\n
\r\n {editMode\r\n ? {businessId}
}\r\n \r\n setBusinessStartDate(val)}\r\n inputFormat=\"MM/dd/yyyy\"\r\n renderInput={(params) =>
\r\n \r\n Business Start Date\r\n
\r\n {editMode\r\n ? \r\n {businessStartDate && new Date(businessStartDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}\r\n
}\r\n \r\n setCompanyType(val)} />\r\n :
\r\n \r\n Company Type\r\n
\r\n {editMode\r\n ? {companyType}
}\r\n \r\n setIndustry(val)} />\r\n :
\r\n \r\n Industry\r\n
\r\n {editMode\r\n ? {industry}
}\r\n \r\n setBusinessAlias(val)} />\r\n :
\r\n \r\n Doing Business As\r\n
\r\n {editMode\r\n ? {businessAlias}
}\r\n \r\n
\r\n {editMode && \r\n
\r\n \r\n Address\r\n
\r\n {editMode\r\n ? \r\n setAddress({ ...address, addressOne: val })} />\r\n setAddress({ ...address, addressTwo: val })} />\r\n
\r\n : address && \r\n setAddress({ ...address, city: val })} />\r\n setAddress({ ...address, province: val })} />\r\n
\r\n \r\n setAddress({ ...address, country: val })} />\r\n setAddress({ ...address, postalCode: val })} />\r\n
\r\n \r\n
}\r\n {address.addressOne}
\r\n {address.addressTwo}
\r\n {`${address.city}, ${address.province}`}
\r\n {`${address.country}, ${address.postalCode}`}
\r\n \r\n \r\n \r\n
}\r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nContacts.propTypes = {\r\n location: PropTypes.object\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport TextField from 'components/common/TextField';\r\nimport Button from 'components/common/Button';\r\nimport { addRailzConnection, parseErrorMessage, validateRailz } from 'services/webApi';\r\nimport AddIcon from '@mui/icons-material/Add';\r\nimport UploadIcon from '@mui/icons-material/Upload';\r\nimport { ButtonBase, Divider, Menu, MenuItem, MenuList } from '@mui/material';\r\nimport CustomersTable from './components/CustomersTable/CustomersTable';\r\nimport useCustomers from './hooks/useCustomers';\r\nimport LaunchIcon from '@mui/icons-material/Launch';\r\nimport ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';\r\nimport FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';\r\nimport './styles/contactsCustomers.scss';\r\nimport { formatCurrency } from 'services/currency';\r\nimport Alert from 'components/common/Alert';\r\nimport success from 'styles/materialTheme/palette/success';\r\nimport CreateCustomer from './components/CreateCustomer';\r\nimport ManageCustomer from './components/ManageCustomer';\r\nimport ImportCustomersDrawer from '../ImportCustomersDrawer';\r\nimport RailzConnection from 'components/RailzConnection';\r\n\r\n// TODO: add logic so only one \"Drawer\" can be open at at time\r\nexport default function ContactsCustomers({ location }) {\r\n const [customerCreatePanelOpen, setCustomerCreatePanelOpen] = useState(false);\r\n const [customerManagePanelOpen, setCustomerManagePanelOpen] = useState(false);\r\n const [isImportCustomersPanelOpen, setIsImportCustomersPanelOpen] = useState(false);\r\n const [exportMenu, setExportMenu] = useState(null);\r\n // Search parameters\r\n const [searchText, setSearchText] = useState('');\r\n // Table parameters\r\n const [totalRows, setTotalRows] = useState(0);\r\n const [pageNumber, setPageNumber] = useState(0);\r\n const [rowsPerPage, setRowsPerPage] = useState(10);\r\n const [order, setOrder] = useState('');\r\n const [orderBy, setOrderBy] = useState('');\r\n const [selectedCustomer, setSelectedCustomer] = useState(null);\r\n const [alertOpen, setAlertOpen] = useState(false);\r\n const [alertMessage, setAlertMessage] = useState({});\r\n const [isRailzConnectionOpen, setIsRailzConnectionOpen] = useState(false);\r\n const [railzValidationInfo, setRailzValidationInfo] = useState(undefined);\r\n const [isValidationLoading, setIsValidationLoading] = useState(false);\r\n\r\n const { isLoading, error, customers, fetchCustomers, fetchInitialData, handleCustomerSearch } = useCustomers(rowsPerPage, pageNumber, searchText, order, orderBy, setTotalRows);\r\n\r\n const handleExportMenuOpen = (event) => {\r\n setExportMenu(event.currentTarget);\r\n };\r\n\r\n const handleExportMenuClose = () => {\r\n setExportMenu(null);\r\n };\r\n\r\n const handleAlertClose = (event, reason) => {\r\n setAlertOpen(false);\r\n };\r\n\r\n const handleCreatePanelClose = () => {\r\n setCustomerCreatePanelOpen(false);\r\n };\r\n\r\n const handleManagePanelClose = () => {\r\n setCustomerManagePanelOpen(false);\r\n setSelectedCustomer(null);\r\n };\r\n\r\n const handleTableRowClick = (e, customer) => {\r\n setSelectedCustomer(customer);\r\n setCustomerManagePanelOpen(true);\r\n };\r\n\r\n const handleOpenImportDrawer = async () => {\r\n setIsValidationLoading(true);\r\n try {\r\n const response = await validateRailz();\r\n setRailzValidationInfo(response.data);\r\n if (response.data?.isValid) {\r\n setIsImportCustomersPanelOpen(true);\r\n } else {\r\n setIsRailzConnectionOpen(true);\r\n }\r\n } catch (err) {\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'error', message: 'Could not retrieve information. Please try again later.' });\r\n }\r\n setIsValidationLoading(false);\r\n };\r\n\r\n const performSearch = (searchText) => {\r\n setSearchText(searchText);\r\n handleCustomerSearch(searchText);\r\n };\r\n\r\n useEffect(() => {\r\n // Updates the fuse account to update the railz connection status\r\n const addRailz = async () => {\r\n const response = await addRailzConnection();\r\n return response;\r\n };\r\n if (location.query?.railzConnection === 'success') {\r\n addRailz()\r\n .then((res) => {\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'success', message: 'Connected successfully' });\r\n }).catch(() => {\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'error', message: 'Connection could not be finalized. Please try again later.' });\r\n });\r\n }\r\n }, [location.query]);\r\n\r\n return (\r\n Customers
\r\n \r\n
\r\n \r\n setAlertOpen(false)}>{alertMessage.message} \r\n setIsRailzConnectionOpen(false)} redirectUrl='/main/contacts' />\r\n setIsImportCustomersPanelOpen(false)} />\r\n
\r\n );\r\n}\r\n\r\nContactsCustomers.propTypes = {\r\n location: PropTypes.object\r\n};\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Drawer from 'components/common/Drawer';\r\nimport Button from 'components/common/Button';\r\nimport { Divider } from '@mui/material';\r\nimport CustomerForm from '../CustomerForm';\r\nimport useManageCustomer from '../ManageCustomer/hooks/useManageCustomer';\r\nimport { validatePhone } from 'services/phone';\r\nimport './styles/createCustomer.scss';\r\n\r\nexport default function CreateCustomer({\r\n open,\r\n onClose,\r\n fetchCustomers,\r\n fetchAllCustomers,\r\n setAlertOpen,\r\n setAlertMessage\r\n}) {\r\n const [customerName, setCustomerName] = useState('');\r\n const [companyName, setCompanyName] = useState('');\r\n const [branchName, setBranchName] = useState('');\r\n const [role, setRole] = useState('');\r\n const [email, setEmail] = useState('');\r\n const [phoneNumber, setPhoneNumber] = useState('');\r\n const [isBranch, setIsBranch] = useState(false);\r\n // Billing and shipping country defaulted to Canada to avoid unnecessary province lookup\r\n const [billingAddress, setBillingAddress] = useState({ addressOne: '', addressTwo: '', city: '', province: '', country: '1adc086a-346b-4367-88b0-ca90e6aaaea3', postalCode: '' });\r\n const [shippingAddress, setShippingAddress] = useState({ addressOne: '', addressTwo: '', city: '', province: '', country: '1adc086a-346b-4367-88b0-ca90e6aaaea3', postalCode: '' });\r\n const [shippingMatchesBilling, setShippingMatchesBilling] = useState(false);\r\n const [openingBalance, setOpeningBalance] = useState(0);\r\n const [openingCredit, setOpeningCredit] = useState(0);\r\n\r\n const {\r\n isLoading,\r\n error,\r\n companies,\r\n handleCreateCustomer,\r\n provinces,\r\n billingCities,\r\n shippingCities,\r\n getBillingCityList,\r\n getShippingCityList\r\n } = useManageCustomer(customerName, companyName, branchName, role, email, phoneNumber, isBranch, billingAddress, shippingAddress, shippingMatchesBilling, openingBalance, openingCredit, fetchCustomers, fetchAllCustomers);\r\n\r\n const createCustomer = async () => {\r\n try {\r\n await handleCreateCustomer();\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'success', message: 'Successfully created customer' });\r\n onClose();\r\n } catch (err) {\r\n // eslint-disable-next-line no-console\r\n console.error('create customer error', err?.response?.data);\r\n }\r\n };\r\n\r\n const isFormComplete = () => {\r\n return customerName && (isBranch ? branchName : companyName || customerName) && email && validatePhone(phoneNumber) && billingAddress.addressOne && billingAddress.city && billingAddress.province &&\r\n billingAddress.country && billingAddress.postalCode && (shippingMatchesBilling ? true : shippingAddress.addressOne && shippingAddress.city && shippingAddress.province && shippingAddress.country && shippingAddress.postalCode);\r\n };\r\n\r\n const handleProvinceChange = (value, type) => {\r\n if (type === 'billing') {\r\n setBillingAddress({ ...billingAddress, province: value });\r\n getBillingCityList(value.id);\r\n } else {\r\n setShippingAddress({ ...shippingAddress, province: value });\r\n getShippingCityList(value.id);\r\n }\r\n };\r\n\r\n const handleCityChange = (value, type) => {\r\n if (type === 'billing') {\r\n setBillingAddress({ ...billingAddress, city: value });\r\n } else {\r\n setShippingAddress({ ...shippingAddress, city: value });\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n Top Customers
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Transactions
\r\n {/* Temp value, replace when API is ready */}\r\n {'No Data'}
\r\n {formatCurrency(0)}
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {/* Temp value, replace when API is ready */}\r\n
\r\n Total Revenue
\r\n {'No Data'}
\r\n {formatCurrency(0)}
\r\n \r\n \r\n
\r\n \r\n
\r\n Customers
\r\n \r\n } onClick={handleOpenImportDrawer} isLoading={isValidationLoading}>Import Customers\r\n } onClick={() => setCustomerCreatePanelOpen(true)}>Create Customer\r\n
\r\n \r\n
\r\n \r\n performSearch(val)} />\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 {error &&
\r\n {error}
}\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n Create Customer\r\n
\r\n \r\n {error && !isLoading &&
\r\n \r\n );\r\n}\r\n\r\nCreateCustomer.propTypes = {\r\n open: PropTypes.bool,\r\n onClose: PropTypes.func,\r\n fetchCustomers: PropTypes.func,\r\n fetchAllCustomers: PropTypes.func,\r\n setAlertOpen: PropTypes.func,\r\n setAlertMessage: PropTypes.func\r\n};\r\n","import CreateCustomer from './CreateCustomer';\r\n\r\nexport default CreateCustomer;\r\n","var api = require(\"!../../../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./createCustomer.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./createCustomer.scss\",\n function () {\n content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./createCustomer.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport TextField from 'components/common/TextField';\r\nimport AttachMoneyIcon from '@mui/icons-material/AttachMoney';\r\nimport Checkbox from 'components/common/Checkbox';\r\nimport './styles/customerForm.scss';\r\nimport { validatePhone } from 'services/phone';\r\nimport {\r\n defaultAutoCompleteOption,\r\n extractAddressFromGoogleArray,\r\n validateGooglePlace\r\n} from '../../../../../../services/webApi/googleApi';\r\nimport { useApi } from '../../../../../../services/hooks';\r\n\r\nexport default function CustomerForm({\r\n formId,\r\n customerName,\r\n setCustomerName,\r\n companyName,\r\n setCompanyName,\r\n branchName,\r\n setBranchName,\r\n role,\r\n setRole,\r\n email,\r\n setEmail,\r\n phoneNumber,\r\n setPhoneNumber,\r\n isBranch,\r\n setIsBranch,\r\n billingAddress,\r\n setBillingAddress,\r\n shippingAddress,\r\n setShippingAddress,\r\n shippingMatchesBilling,\r\n setShippingMatchesBilling,\r\n openingBalance,\r\n setOpeningBalance,\r\n openingCredit,\r\n setOpeningCredit,\r\n provinces,\r\n billingCities,\r\n shippingCities,\r\n handleProvinceChange,\r\n handleCityChange,\r\n noBranchAssociated,\r\n edit = false\r\n}) {\r\n const [isLoading, error, apiCall] = useApi();\r\n\r\n const updatePhoneNumber = (phoneNum) => {\r\n setPhoneNumber(phoneNum.toString().replace(/[^0-9]/g, ''));\r\n };\r\n\r\n const applyAddress = async (googlePlace, type) => {\r\n if (googlePlace) {\r\n const response = await apiCall(() => validateGooglePlace(googlePlace));\r\n\r\n if (response) {\r\n const { addressOne, city, province, postalCode } = extractAddressFromGoogleArray(googlePlace);\r\n\r\n if (type === 'billing') {\r\n setBillingAddress({\r\n ...billingAddress,\r\n addressOne,\r\n city,\r\n province: province.short_name,\r\n postalCode\r\n });\r\n } else if (type === 'shipping') {\r\n setShippingAddress({\r\n ...shippingAddress,\r\n addressOne,\r\n city,\r\n province: province.short_name,\r\n postalCode\r\n });\r\n }\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n );\r\n}\r\n\r\nCustomerForm.propTypes = {\r\n formId: PropTypes.string,\r\n customerName: PropTypes.string,\r\n setCustomerName: PropTypes.func,\r\n companyName: PropTypes.string,\r\n setCompanyName: PropTypes.func,\r\n branchName: PropTypes.string,\r\n setBranchName: PropTypes.func,\r\n role: PropTypes.string,\r\n setRole: PropTypes.func,\r\n email: PropTypes.string,\r\n setEmail: PropTypes.func,\r\n phoneNumber: PropTypes.string,\r\n setPhoneNumber: PropTypes.func,\r\n isBranch: PropTypes.bool,\r\n setIsBranch: PropTypes.func,\r\n billingAddress: PropTypes.object,\r\n setBillingAddress: PropTypes.func,\r\n shippingAddress: PropTypes.object,\r\n setShippingAddress: PropTypes.func,\r\n shippingMatchesBilling: PropTypes.bool,\r\n setShippingMatchesBilling: PropTypes.func,\r\n openingBalance: PropTypes.number,\r\n setOpeningBalance: PropTypes.func,\r\n openingCredit: PropTypes.number,\r\n setOpeningCredit: PropTypes.func,\r\n provinces: PropTypes.array,\r\n billingCities: PropTypes.array,\r\n shippingCities: PropTypes.array,\r\n handleProvinceChange: PropTypes.func,\r\n handleCityChange: PropTypes.func,\r\n noBranchAssociated: PropTypes.bool,\r\n edit: PropTypes.bool\r\n};\r\n","import CustomerForm from './CustomerForm';\r\n\r\nexport default CustomerForm;\r\n","var api = require(\"!../../../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./customerForm.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./customerForm.scss\",\n function () {\n content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./customerForm.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { parseErrorMessage } from 'services/webApi';\r\nimport NoResultsSection from 'components/NoResultsSection';\r\nimport TableHeader from 'components/common/TableHeader';\r\nimport { Table, TableBody, TableCell, TableContainer, TablePagination, TableRow } from '@mui/material';\r\nimport { formatPhoneNumber } from 'services/phone';\r\nimport { formatCurrency } from 'services/currency';\r\nimport './styles/customersTable.scss';\r\n\r\nexport default function CustomersTable({\r\n fetchCustomers,\r\n isLoading,\r\n customers,\r\n searchText,\r\n totalRows,\r\n pageNumber,\r\n setPageNumber,\r\n rowsPerPage,\r\n setRowsPerPage,\r\n order,\r\n setOrder,\r\n orderBy,\r\n setOrderBy,\r\n setSelectedCustomer\r\n}) {\r\n const customerHeaders = [\r\n { id: 'PartnerName', label: 'Company', width: '12em' },\r\n { id: 'PartnerType', label: 'Name', width: '10rem' },\r\n { id: 'Email', label: 'Contact', width: '8rem' },\r\n { id: 'CurrentBalance', label: 'Unpaid Invoices', width: '4rem' },\r\n { id: 'totalRevenue', label: 'Total Revenue', width: '4rem' },\r\n { id: 'invoices', label: 'Invoices', width: '2rem' }\r\n ];\r\n\r\n const handleChangePage = (event, newPage) => {\r\n setPageNumber(newPage);\r\n fetchCustomers(rowsPerPage, newPage);\r\n };\r\n\r\n const handleChangeRowsPerPage = (event) => {\r\n const newRowsPerPage = parseInt(event.target.value, 10);\r\n setRowsPerPage(newRowsPerPage);\r\n setPageNumber(0);\r\n fetchCustomers(newRowsPerPage, pageNumber);\r\n };\r\n\r\n const handleChangeSort = (event, orderByParam) => {\r\n const orderParam = (orderBy === orderByParam && order === 'asc') ? 'desc' : order === 'desc' ? '' : 'asc';\r\n setOrder(orderParam);\r\n setOrderBy(orderParam ? orderByParam : '');\r\n fetchCustomers(rowsPerPage, pageNumber, searchText, orderByParam, orderParam);\r\n };\r\n\r\n const handleRowKeypress = (event, customer) => {\r\n if (event.charCode === 13) {\r\n setSelectedCustomer(event, customer);\r\n }\r\n };\r\n\r\n return (\r\n \r\n {error}\r\n
}\r\n \r\n \r\n \r\n
\r\n \r\n {customers && \r\n \r\n \r\n
\r\n { customers.length === 0 &&\r\n \r\n {customers.length !== 0 && }\r\n
\r\n );\r\n};\r\n\r\nCustomersTable.propTypes = {\r\n fetchCustomers: PropTypes.func,\r\n isLoading: PropTypes.bool,\r\n customers: PropTypes.arrayOf(PropTypes.object),\r\n searchText: PropTypes.string,\r\n totalRows: PropTypes.number,\r\n pageNumber: PropTypes.number,\r\n setPageNumber: PropTypes.func,\r\n rowsPerPage: PropTypes.number,\r\n setRowsPerPage: PropTypes.func,\r\n order: PropTypes.string,\r\n setOrder: PropTypes.func,\r\n orderBy: PropTypes.string,\r\n setOrderBy: PropTypes.func,\r\n setSelectedCustomer: PropTypes.func\r\n};\r\n","var api = require(\"!../../../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./customersTable.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./customersTable.scss\",\n function () {\n content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./customersTable.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Drawer from 'components/common/Drawer';\r\nimport Button from 'components/common/Button';\r\nimport { Divider } from '@mui/material';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport CustomerForm from '../CustomerForm';\r\nimport useManageCustomer from './hooks/useManageCustomer';\r\nimport './styles/manageCustomer.scss';\r\nimport { formatPhoneNumber } from 'services/phone';\r\nimport { formatCurrency } from 'services/currency';\r\nimport { formatDate } from 'services/dateTime';\r\n\r\nexport default function ManageCustomer({\r\n open,\r\n onClose,\r\n fetchCustomers,\r\n selectedCustomer,\r\n setAlertOpen,\r\n setAlertMessage\r\n}) {\r\n const [editActive, setEditActive] = useState(false);\r\n const [customerName, setCustomerName] = useState('');\r\n const [companyName, setCompanyName] = useState('');\r\n const [branchName, setBranchName] = useState('');\r\n const [role, setRole] = useState('');\r\n const [email, setEmail] = useState('');\r\n const [phoneNumber, setPhoneNumber] = useState('');\r\n const [isBranch, setIsBranch] = useState(false);\r\n const [billingAddress, setBillingAddress] = useState({ addressOne: '', addressTwo: '', city: null, province: null, country: '1adc086a-346b-4367-88b0-ca90e6aaaea3', postalCode: '' });\r\n const [shippingAddress, setShippingAddress] = useState({ addressOne: '', addressTwo: '', city: null, province: null, country: '1adc086a-346b-4367-88b0-ca90e6aaaea3', postalCode: '' });\r\n const [shippingMatchesBilling, setShippingMatchesBilling] = useState(false);\r\n const [openingBalance, setOpeningBalance] = useState(0);\r\n const [openingCredit, setOpeningCredit] = useState(0);\r\n\r\n const recentInvoices = [\r\n { invoiceNumber: '00001', date: '2022-07-15', amount: 500, status: 'active' },\r\n { invoiceNumber: '00002', date: '2022-07-16', amount: 600, status: 'active' },\r\n { invoiceNumber: '00003', date: '2022-07-17', amount: 800, status: 'active' },\r\n { invoiceNumber: '00004', date: '2022-07-18', amount: 400, status: 'active' }\r\n ];\r\n\r\n const {\r\n isLoading,\r\n error,\r\n provinces,\r\n billingCities,\r\n shippingCities,\r\n getProvinceList,\r\n getBillingCityList,\r\n getShippingCityList,\r\n handleUpdateCompany,\r\n handleDeleteCompany,\r\n handleArchiveCompany\r\n } = useManageCustomer(customerName, companyName, branchName, role, email, phoneNumber, isBranch, billingAddress, shippingAddress, shippingMatchesBilling, openingBalance, openingCredit, selectedCustomer);\r\n\r\n useEffect(() => {\r\n if (selectedCustomer) {\r\n setCustomerName(selectedCustomer.customerName);\r\n setCompanyName(selectedCustomer.partnerName);\r\n setBranchName(selectedCustomer.branch?.branchName);\r\n setEmail(selectedCustomer.email);\r\n setPhoneNumber(selectedCustomer.primaryPhone);\r\n setBillingAddress({\r\n addressOne: selectedCustomer.branch?.billToAddress || '',\r\n addressTwo: null,\r\n city: selectedCustomer.branch?.billToCity,\r\n province: selectedCustomer.branch?.billToProvince,\r\n country: 'Canada',\r\n postalCode: selectedCustomer.branch?.billToPostalCode || ''\r\n });\r\n setShippingAddress({\r\n addressOne: selectedCustomer.branch?.shipToAddress || '',\r\n addressTwo: null,\r\n city: selectedCustomer.branch?.shipToCity || undefined,\r\n province: selectedCustomer.branch?.shipToProvince || undefined,\r\n country: 'Canada',\r\n postalCode: selectedCustomer.branch?.shipToPostalCode || ''\r\n });\r\n }\r\n }, [selectedCustomer]);\r\n\r\n const handlePrevious = () => {\r\n setEditActive(false);\r\n };\r\n\r\n const handleClose = () => {\r\n setEditActive(false);\r\n onClose();\r\n };\r\n\r\n const updateCustomer = async () => {\r\n try {\r\n await handleUpdateCompany(selectedCustomer.id, selectedCustomer.branch?.id);\r\n // TODO: Need to update branch information, but api is currently broken and does not update properly\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'success', message: 'Successfully updated customer' });\r\n fetchCustomers();\r\n handleClose();\r\n } catch (err) {\r\n // eslint-disable-next-line no-console\r\n console.error('create customer error', err?.response?.data);\r\n }\r\n };\r\n\r\n const archiveCustomer = async () => {\r\n try {\r\n await handleArchiveCompany(selectedCustomer.id);\r\n // TODO: Need to update branch information, but api is currently broken and does not update properly\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'success', message: 'Successfully archived customer' });\r\n fetchCustomers();\r\n handleClose();\r\n } catch (err) {\r\n // eslint-disable-next-line no-console\r\n console.error('archive customer error', err?.response?.data);\r\n }\r\n };\r\n\r\n const deleteCustomer = async () => {\r\n try {\r\n await handleDeleteCompany(selectedCustomer.id);\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'success', message: 'Successfully deleted customer' });\r\n fetchCustomers();\r\n handleClose();\r\n } catch (err) {\r\n // eslint-disable-next-line no-console\r\n console.error('create customer error', err?.response?.data);\r\n }\r\n };\r\n\r\n const handleProvinceChange = (value, type) => {\r\n if (type === 'billing') {\r\n setBillingAddress({ ...billingAddress, province: value });\r\n getBillingCityList(value.id);\r\n } else {\r\n setShippingAddress({ ...shippingAddress, province: value });\r\n getShippingCityList(value.id);\r\n }\r\n };\r\n\r\n const handleCityChange = (value, type) => {\r\n if (type === 'billing') {\r\n setBillingAddress({ ...billingAddress, city: value });\r\n } else {\r\n setShippingAddress({ ...shippingAddress, city: value });\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 {editActive && \r\n }\r\n
\r\n\r\n \r\n
\r\n \r\n {editActive && 'Edit '}{selectedCustomer && selectedCustomer.customerName}\r\n
\r\n \r\n } onClick={() => setEditActive(true)}>Edit Customer\r\n
\r\n Details
\r\n \r\n
\r\n {!selectedCustomer.branch && \r\n
\r\n Company
\r\n {selectedCustomer.partnerName}
\r\n \r\n
\r\n Branch Name
\r\n {selectedCustomer.branch?.branchName}
\r\n \r\n
\r\n Role
\r\n {selectedCustomer.partnerType.parameterValue}
\r\n \r\n
\r\n Email
\r\n {selectedCustomer.email}
\r\n \r\n
\r\n Phone Number
\r\n {formatPhoneNumber(selectedCustomer.primaryPhone)}
\r\n No Branch Associated
}\r\n {selectedCustomer.branch && Billing Address
\r\n \r\n
\r\n {selectedCustomer.branch.billToAddress}
\r\n {/* Hiding address two as it doesn't exist in the returned data */}\r\n {/* {selectedCustomer.branch.billToAddress}
*/}\r\n {`${selectedCustomer.branch?.billToCity?.city}, ${selectedCustomer.branch?.billToProvince?.province}`}
\r\n {/* TODO: Change Canada to 'billToCountry.country' once backend returns proper data */}\r\n {`Canada, ${selectedCustomer.branch?.billToPostalCode}`}
\r\n Shipping Address
\r\n \r\n
\r\n {selectedCustomer.branch.shipToAddress}
\r\n {/* Hiding address two as it doesn't exist in the returned data */}\r\n {/* {selectedCustomer.branch.shipToAddress}
*/}\r\n {`${selectedCustomer.branch?.shipToCity?.city}, ${selectedCustomer.branch?.shipToProvince?.province}`}
\r\n {/* TODO: Change Canada to 'billToCountry.country' once backend returns proper data */}\r\n {`Canada, ${selectedCustomer.branch?.shipToPostalCode}`}
\r\n Financial Summary
\r\n \r\n
\r\n\r\n {/* TODO: Customer invoice information to be developed in later phase */}\r\n {/* \r\n
\r\n Current Balance
\r\n {`Canada, ${selectedCustomer.branch?.shipToPostalCode}`}
\r\n {formatCurrency(selectedCustomer.branch?.currentBalance)}
\r\n \r\n
\r\n Credit
\r\n {formatCurrency(selectedCustomer.branch?.currentCredit)}
\r\n \r\n
\r\n Total Revenue
\r\n {formatCurrency(selectedCustomer.totalRevenue)}
\r\n Recent Invoices
\r\n \r\n {recentInvoices && recentInvoices.map((invoice, index) => (\r\n
*/}\r\n \r\n
\r\n ))}\r\n \r\n
\r\n #{invoice.invoiceNumber}
\r\n {formatCurrency(invoice.amount)}
\r\n \r\n
\r\n {invoice.date}
\r\n {invoice.status}
\r\n \r\n
\r\n \r\n
\r\n Delete Customer
\r\n \r\n Delete the customer and its associated data. This action is not reversible.\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n Archive Customer
\r\n \r\n Archive the customer and its associated data. This action is not reversible.\r\n
\r\n \r\n \r\n
\r\n \r\n {error && !isLoading &&
\r\n \r\n );\r\n}\r\n\r\nManageCustomer.propTypes = {\r\n open: PropTypes.bool,\r\n onClose: PropTypes.func,\r\n fetchCustomers: PropTypes.func,\r\n selectedCustomer: PropTypes.object,\r\n setAlertOpen: PropTypes.func,\r\n setAlertMessage: PropTypes.func\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport { createCustomerBranch, createCustomerCompany, createCustomerContact, deleteCustomerCompany, getCities, getProvinces, updateCustomerBranch, updateCustomerCompany } from 'services/webApi';\r\nimport { useApi, useAddressLookup, useCancelPromise } from 'services/hooks';\r\nimport useManageInvoice from 'components/Invoices/hooks/useManageInvoice';\r\n\r\nexport default function useManageCustomer (\r\n customerName,\r\n companyName,\r\n branchName,\r\n role,\r\n email,\r\n phoneNumber,\r\n isBranch,\r\n billingAddress,\r\n shippingAddress,\r\n shippingMatchesBilling,\r\n openingBalance,\r\n openingCredit,\r\n fetchCustomers,\r\n fetchAllCustomers\r\n) {\r\n // const [isLoading, error, callApi, setError] = useApi();\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [error, setError] = useState(undefined);\r\n const [roles, setRoles] = useState([]);\r\n const [companies, setCompanies] = useState([]);\r\n const { isAddressLoading: isBillingAddressLoading, addressError: billingAddressError, provinces, getProvinceList, cities: billingCities, getCityList: getBillingCityList } = useAddressLookup();\r\n const { isAddressLoading: isShippingAddressLoading, addressError: shippingAddressError, cities: shippingCities, getCityList: getShippingCityList } = useAddressLookup();\r\n\r\n const cancelPromise = useCancelPromise();\r\n\r\n const currencyTypeId = 'f8303726-bc93-4ac5-85e4-89c8e6f9b6ca'; // Associated id for currencyType: CAD\r\n const partnerTypeId = 'd9a2957f-21aa-46fd-894a-c4652f1dd77d'; // Associated id for partnerType: Customer\r\n const countryId = '1adc086a-346b-4367-88b0-ca90e6aaaea3'; // Canada id for city list retrieval\r\n const accountNumber = '12345678'; // temporary account number\r\n\r\n const handleCreateCustomer = async () => {\r\n setIsLoading(true);\r\n setError('');\r\n try {\r\n const companyData = {\r\n AccountNumber: accountNumber,\r\n currencyTypeId: currencyTypeId,\r\n email: email,\r\n partnerName: companyName || customerName,\r\n partnerTypeId: partnerTypeId,\r\n primaryPhone: phoneNumber,\r\n partnerStatus: true,\r\n customerName: customerName\r\n };\r\n const customerResponse = await createCustomerCompany(companyData);\r\n\r\n if (!cancelPromise.current && customerResponse) {\r\n const createdCompanyId = customerResponse.data.responseId;\r\n if (shippingMatchesBilling) shippingAddress = { ...billingAddress };\r\n const branchData = {\r\n AccountNumber: accountNumber,\r\n currencyTypeId: currencyTypeId,\r\n branchName: companyName || customerName,\r\n email: email,\r\n cellPhone: phoneNumber,\r\n billToAddress: billingAddress.addressOne,\r\n billToCityId: billingAddress.city.id,\r\n billToProvince: billingAddress.province.id,\r\n billToPostalCode: billingAddress.postalCode,\r\n isSameAdress: shippingMatchesBilling,\r\n shipToAddress: shippingAddress.addressOne,\r\n shipToCityId: shippingAddress.city.id,\r\n shipToProvince: shippingAddress.province.id,\r\n shipToCountry: countryId,\r\n shipToPostalCode: shippingAddress.postalCode,\r\n openingBalance: parseInt(openingBalance),\r\n openingCredit: parseInt(openingCredit),\r\n registeredEmail: email,\r\n partnerStatus: true\r\n };\r\n const branchResponse = await createCustomerBranch(createdCompanyId, branchData);\r\n if (!cancelPromise.current && branchResponse) {\r\n const createdBranchId = branchResponse.data.responseId;\r\n const contactResponse = await createCustomerContact(createdBranchId, customerName, email);\r\n if (!cancelPromise.current && contactResponse) {\r\n const customerId = customerResponse?.data?.responseId;\r\n fetchAllCustomers && fetchAllCustomers(customerId);\r\n fetchCustomers && fetchCustomers();\r\n setIsLoading(false);\r\n }\r\n }\r\n }\r\n } catch (err) {\r\n if (!cancelPromise.current) {\r\n setIsLoading(false);\r\n let errorMessage = '';\r\n if (Array.isArray(err?.response?.data)) {\r\n err?.response?.data.forEach((error, index) => {\r\n errorMessage += `${error.value} `;\r\n });\r\n }\r\n setError(errorMessage || err?.response?.data || 'Error occured while creating customer. Please try again later');\r\n throw err;\r\n }\r\n }\r\n };\r\n\r\n // To be implemented in later phase\r\n // const handleCreateBranch = async (companyId) => {\r\n // const branchResponse = await callApi(() => createCustomerBranch(companyId, branchData));\r\n // };\r\n\r\n const handleUpdateCompany = async (companyId, branchId) => {\r\n setIsLoading(true);\r\n setError('');\r\n try {\r\n const companyData = {\r\n currencyTypeId: currencyTypeId,\r\n email: email,\r\n partnerName: companyName || customerName,\r\n partnerTypeId: partnerTypeId,\r\n primaryPhone: phoneNumber,\r\n partnerStatus: true,\r\n customerName: customerName\r\n };\r\n const updateResponse = await updateCustomerCompany(companyId, companyData);\r\n if (!cancelPromise.current && updateResponse) {\r\n if (shippingMatchesBilling) shippingAddress = { ...billingAddress };\r\n const branchData = {\r\n AccountNumber: accountNumber,\r\n currencyTypeId: currencyTypeId,\r\n branchName: companyName || customerName,\r\n email: email,\r\n cellPhone: phoneNumber,\r\n billToAddress: billingAddress?.addressOne,\r\n billToCityId: billingAddress?.city?.id,\r\n billToProvince: billingAddress?.province?.id,\r\n billToPostalCode: billingAddress?.postalCode,\r\n isSameAdress: shippingMatchesBilling,\r\n shipToAddress: shippingAddress?.addressOne,\r\n shipToCityId: shippingAddress?.city?.id,\r\n shipToProvince: shippingAddress?.province?.id,\r\n shipToPostalCode: shippingAddress?.postalCode,\r\n registeredEmail: email,\r\n partnerStatus: true\r\n };\r\n const branchResponse = await updateCustomerBranch(branchId, branchData);\r\n if (!cancelPromise.current && branchResponse) {\r\n // const createdBranchId = branchResponse.data.responseId;\r\n // const contactResponse = await updateCustomerContact(createdBranchId, customerName, email);\r\n // if (!cancelPromise.current && contactResponse) {\r\n setIsLoading(false);\r\n // }\r\n }\r\n }\r\n } catch (err) {\r\n setIsLoading(false);\r\n setError(err?.response?.data || 'Error occured while updating customer. Please try again later');\r\n throw err;\r\n }\r\n };\r\n\r\n const handleUpdateBranch = async (branchId) => {\r\n setIsLoading(true);\r\n setError('');\r\n try {\r\n if (shippingMatchesBilling) shippingAddress = { ...billingAddress };\r\n const branchData = {\r\n AccountNumber: accountNumber,\r\n currencyTypeId: currencyTypeId,\r\n branchName: branchName,\r\n email: email,\r\n cellPhone: phoneNumber,\r\n billToAddress: billingAddress.addressOne,\r\n billToCityId: billingAddress.city?.id,\r\n billToProvince: billingAddress.province?.id,\r\n billToPostalCode: billingAddress.postalCode,\r\n isSameAdress: shippingMatchesBilling,\r\n shipToAddress: shippingAddress.addressOne,\r\n shipToCityId: shippingAddress.city.id,\r\n shipToProvince: shippingAddress.province.id,\r\n shipToPostalCode: shippingAddress.postalCode,\r\n registeredEmail: email,\r\n partnerStatus: true\r\n };\r\n const updateResponse = await updateCustomerBranch(branchId, branchData);\r\n if (!cancelPromise.current && updateResponse) {\r\n setIsLoading(false);\r\n }\r\n } catch (err) {\r\n setIsLoading(false);\r\n setError(err?.response?.data || 'Error occured while updating branch. Please try again later');\r\n throw err;\r\n }\r\n };\r\n\r\n const handleDeleteCompany = async (companyId) => {\r\n try {\r\n const deleteResponse = await deleteCustomerCompany(companyId);\r\n if (!cancelPromise.current && deleteResponse) {\r\n // TODO: Add alert for successful deletion\r\n }\r\n } catch (err) {\r\n if (!cancelPromise.current) {\r\n setError(err?.response?.data || 'Error occured while deleting company. Please try again later');\r\n throw err;\r\n }\r\n }\r\n };\r\n\r\n const handleArchiveCompany = async (companyId) => {\r\n setIsLoading(true);\r\n setError('');\r\n try {\r\n const companyData = {\r\n currencyTypeId: currencyTypeId,\r\n email: email,\r\n partnerName: companyName || customerName,\r\n partnerTypeId: partnerTypeId,\r\n primaryPhone: phoneNumber,\r\n partnerStatus: false,\r\n customerName: customerName\r\n\r\n };\r\n const updateResponse = await updateCustomerCompany(companyId, companyData);\r\n if (!cancelPromise.current && updateResponse) {\r\n setIsLoading(false);\r\n }\r\n } catch (err) {\r\n setIsLoading(false);\r\n setError(err?.response?.data || 'Error occured while updating customer. Please try again later');\r\n throw err;\r\n }\r\n };\r\n const retrieveCompanies = async () => {\r\n // const response = await callApi(() => getCompanies());\r\n };\r\n\r\n return {\r\n isLoading,\r\n error,\r\n companies,\r\n handleCreateCustomer,\r\n handleUpdateCompany,\r\n handleUpdateBranch,\r\n handleDeleteCompany,\r\n handleArchiveCompany,\r\n provinces,\r\n billingCities,\r\n shippingCities,\r\n getProvinceList,\r\n getBillingCityList,\r\n getShippingCityList\r\n };\r\n}\r\n","import ManageCustomer from './ManageCustomer';\r\n\r\nexport default ManageCustomer;\r\n","var api = require(\"!../../../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./manageCustomer.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./manageCustomer.scss\",\n function () {\n content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./manageCustomer.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useEffect, useState } from 'react';\r\nimport { getCustomersList } from 'services/webApi';\r\nimport { useApi, useDebounce } from 'services/hooks';\r\n\r\nexport default function useCustomers (rowsPerPage, pageNumber, searchText, order, orderBy, setTotalRows) {\r\n const [isLoading, error, callApi, setError] = useApi();\r\n const [customers, setCustomers] = useState([]);\r\n\r\n const fetchCustomers = async (limit = rowsPerPage, page = pageNumber, search = searchText, sortBy = orderBy, sort = order) => {\r\n const sortText = sortBy && sort && `${sortBy} ${sort}` || '';\r\n const response = await callApi(() => getCustomersList(limit, page, search, sortText));\r\n if (error || !response || response.statusText !== 'OK') {\r\n setError('Error occured while retrieving customers. Please try again later.');\r\n } else {\r\n setCustomers(response?.data?.result);\r\n setTotalRows(response?.data?.totalCount);\r\n }\r\n };\r\n\r\n const handleInvoiceSearch = (searchText) => {\r\n fetchCustomers(rowsPerPage, 0, searchText, orderBy, order);\r\n };\r\n\r\n const debouncedHandleInvoiceSearch = useDebounce(handleInvoiceSearch, 500);\r\n\r\n const fetchInitialData = () => {\r\n fetchCustomers(rowsPerPage, 0, searchText, '', '');\r\n };\r\n\r\n useEffect(() => {\r\n fetchInitialData();\r\n }, []);\r\n\r\n return {\r\n isLoading,\r\n error,\r\n customers,\r\n fetchCustomers,\r\n fetchInitialData,\r\n handleCustomerSearch: debouncedHandleInvoiceSearch\r\n };\r\n}\r\n","import ContactsCustomers from './ContactsCustomers';\r\n\r\nexport default ContactsCustomers;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./contactsCustomers.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./contactsCustomers.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./contactsCustomers.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Divider } from '@mui/material';\r\nimport Button from 'components/common/Button';\r\nimport Drawer from 'components/common/Drawer';\r\nimport { importCustomers, validateRailz } from 'services/webApi';\r\nimport { useCancelPromise } from 'services/hooks';\r\nimport './styles/importCustomersDrawer.scss';\r\n\r\nexport default function ImportCustomersDrawer({ isOpen, onClose, setAlertOpen, setAlertMessage, fetchInitialData }) {\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [error, setError] = useState('');\r\n const cancelPromise = useCancelPromise();\r\n\r\n const callImportCustomers = async () => {\r\n setIsLoading(true);\r\n try {\r\n await importCustomers();\r\n if (!cancelPromise.current) {\r\n setAlertMessage({ type: 'success', message: 'Successfully imported customers' });\r\n setAlertOpen(true);\r\n fetchInitialData();\r\n closeAndReset();\r\n }\r\n } catch (err) {\r\n setError(err?.response?.data || 'Error importing customers. Please try again later.');\r\n setIsLoading(false);\r\n }\r\n };\r\n\r\n const closeAndReset = () => {\r\n onClose();\r\n setIsLoading(false);\r\n setError('');\r\n };\r\n\r\n return (\r\n \r\n {error}\r\n
}\r\n \r\n \r\n {editActive && }\r\n
\r\n \r\n
\r\n Import Customers
\r\n \r\n
\r\n {error}
}\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nHeader.propTypes = {\r\n account: PropTypes.object,\r\n location: PropTypes.object,\r\n logout: PropTypes.func,\r\n onOpenAccountDialog: PropTypes.func,\r\n onOpenPasswordDialog: PropTypes.func,\r\n isNavOpen: PropTypes.bool,\r\n openNav: PropTypes.func,\r\n closeNav: PropTypes.func\r\n};\r\n\r\n","import { connect } from 'react-redux';\r\nimport Header from './Header';\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nconst mapStateToProps = ({ account, locale }) => ({\r\n account, locale\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Header);\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { browserHistory } from 'react-router';\r\nimport { isOnUnauthenticatedRoute } from 'services/route';\r\nimport CloseImg from './assets/cross-icon.svg';\r\n\r\nexport default function Menu({ account, logout, location, loadLocale }) {\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [isClosing, setIsClosing] = useState(false);\r\n\r\n const handleLoginSignUpClick = (event, redirectToLogin) => {\r\n event.preventDefault();\r\n setIsOpen(false);\r\n browserHistory.push(redirectToLogin ? `/login` : `/signup`);\r\n };\r\n\r\n const handleLogoutClick = (event) => {\r\n event.preventDefault();\r\n setIsOpen(false);\r\n logout && logout();\r\n };\r\n\r\n const handleTransitionEnd = () => {\r\n setIsClosing(false);\r\n };\r\n\r\n const toggleMenu = (event) => {\r\n event.preventDefault();\r\n setIsOpen(!isOpen);\r\n setIsClosing(isOpen);\r\n };\r\n\r\n const handleLocaleSelect = (event, locale) => {\r\n event.preventDefault();\r\n loadLocale(locale);\r\n toggleMenu();\r\n };\r\n\r\n return (\r\n \r\n {isOnHeaderMenuRoute &&
\r\n {/* \r\n closeNav() : () => openNav()}>\r\n {isNavOpen ? (\r\n
}\r\n \r\n {isOnUnauthenticatedRoute(location.pathname) && (\r\n \r\n \r\n {name && name.first + ' ' + name.last}\r\n \r\n onOpenAccountDialog(e)}\r\n onOpenPasswordDialog={(e) => onOpenPasswordDialog(e)}\r\n />\r\n \r\n )}\r\n
*/}\r\n \r\n \r\n Login\r\n \r\n \r\n
\r\n )}\r\n {isOnHeaderMenuRoute && (\r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nMenu.propTypes = {\r\n account: PropTypes.object,\r\n logout: PropTypes.func,\r\n location: PropTypes.object,\r\n loadLocale: PropTypes.func\r\n};\r\n","import { connect } from 'react-redux';\r\nimport { loadLocale } from 'reducers/locale';\r\nimport Menu from './Menu';\r\n\r\nconst mapDispatchToProps = {\r\n loadLocale\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n account: state.account,\r\n administrator: state.administrator,\r\n locale: state.locale\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Menu);\r\n","export default __webpack_public_path__ + \"src/components/CoreLayout/components/Header/components/Menu/assets/cross-icon.svg\";","import MenuContainer from './MenuContainer';\r\n\r\nexport default MenuContainer;\r\n","import Header from './HeaderContainer';\r\n\r\nexport default Header;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./header.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./header.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./header.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useContext, useState, useEffect, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Drawer from '@mui/material/Drawer';\r\nimport { LocalizationContext } from 'services/localization';\r\nimport {\r\n links,\r\n dropDownInvoiceLinks,\r\n invoiceLink,\r\n dropDownSettingsLinks,\r\n settingsLink,\r\n dropDownTransactionLinks,\r\n transactionLink,\r\n dropDownAccountingLinks,\r\n accountingLink\r\n} from './services';\r\nimport NavLink from './components/NavLink';\r\nimport './styles/navigation.scss';\r\nimport { Divider } from '@mui/material';\r\nimport logo from '../../../../../public/branding/logoSmall.svg';\r\nimport Button from 'components/common/Button';\r\nimport Modal from 'components/common/Modal';\r\nimport { Scrollbars } from 'react-custom-scrollbars';\r\nimport { browserHistory } from 'react-router';\r\n\r\nfunction Navigation({ isNavOpen, handleNavClose, location, isMobile, logout }) {\r\n const localized = useContext(LocalizationContext);\r\n const [isInvoicesDropDown, setIsInvoicesDropDown] = useState(false);\r\n const [isSettingsDropDown, setIsSettingsDropDown] = useState(false);\r\n const [isTransactionsDropDown, setIsTransactionsDropDown] = useState(false);\r\n const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);\r\n const [isAccountingOpen, setIsAccountingOpen] = useState(false);\r\n const [navLinks, setNavLinks] = useState(links);\r\n\r\n const triggerNav = (label) => {\r\n if (\r\n label !== 'Transactions' &&\r\n label !== 'Invoice' &&\r\n label !== 'Accounting' &&\r\n label !== 'Settings'\r\n ) {\r\n handleNavClose();\r\n }\r\n // function replaces links in the menu array with the dropdown array\r\n if (\r\n label === 'Transactions' ||\r\n label === 'Bills' ||\r\n label === 'Invoice' ||\r\n label === 'Settings' ||\r\n label === 'Accounting'\r\n ) {\r\n let newNavLinks = [...navLinks];\r\n if (label === 'Transactions' && !isTransactionsDropDown) {\r\n let removeIndex = newNavLinks.findIndex(\r\n (elem) => elem.label === 'Transactions'\r\n );\r\n newNavLinks.splice(removeIndex, 1, ...dropDownTransactionLinks);\r\n setNavLinks(newNavLinks);\r\n setIsTransactionsDropDown(true);\r\n } else if (label === 'Transactions' && isTransactionsDropDown) {\r\n let removeIndex = newNavLinks.findIndex(\r\n (elem) => elem.label === 'Transactions'\r\n );\r\n newNavLinks.splice(\r\n removeIndex,\r\n dropDownInvoiceLinks.length,\r\n ...transactionLink\r\n );\r\n setNavLinks(newNavLinks);\r\n setIsTransactionsDropDown(false);\r\n } else if (label === 'Invoice' && !isInvoicesDropDown) {\r\n let removeIndex = newNavLinks.findIndex(\r\n (elem) => elem.label === 'Invoice'\r\n );\r\n newNavLinks.splice(removeIndex, 1, ...dropDownInvoiceLinks);\r\n setNavLinks(newNavLinks);\r\n setIsInvoicesDropDown(true);\r\n } else if (label === 'Invoice' && isInvoicesDropDown) {\r\n let removeIndex = newNavLinks.findIndex(\r\n (elem) => elem.label === 'Invoice'\r\n );\r\n newNavLinks.splice(\r\n removeIndex,\r\n dropDownInvoiceLinks.length,\r\n ...invoiceLink\r\n );\r\n setNavLinks(newNavLinks);\r\n setIsInvoicesDropDown(false);\r\n } else if (label === 'Accounting' && !isAccountingOpen) {\r\n let removeIndex = newNavLinks.findIndex(\r\n (elem) => elem.label === 'Accounting'\r\n );\r\n newNavLinks.splice(removeIndex, 1, ...dropDownAccountingLinks);\r\n setNavLinks(newNavLinks);\r\n setIsAccountingOpen(true);\r\n } else if (label === 'Accounting' && isAccountingOpen) {\r\n let removeIndex = newNavLinks.findIndex(\r\n (elem) => elem.label === 'Accounting'\r\n );\r\n newNavLinks.splice(\r\n removeIndex,\r\n dropDownAccountingLinks.length,\r\n ...accountingLink\r\n );\r\n setNavLinks(newNavLinks);\r\n setIsAccountingOpen(false);\r\n } else if (label === 'Settings' && !isSettingsDropDown) {\r\n let removeIndex = newNavLinks.findIndex(\r\n (elem) => elem.label === 'Settings'\r\n );\r\n newNavLinks.splice(removeIndex, 1, ...dropDownSettingsLinks);\r\n setNavLinks(newNavLinks);\r\n setIsSettingsDropDown(true);\r\n } else if (label === 'Settings' && isSettingsDropDown) {\r\n let removeIndex = newNavLinks.findIndex(\r\n (elem) => elem.label === 'Settings'\r\n );\r\n newNavLinks.splice(\r\n removeIndex,\r\n dropDownSettingsLinks.length,\r\n ...settingsLink\r\n );\r\n setNavLinks(newNavLinks);\r\n setIsSettingsDropDown(false);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n toggleMenu(event)}\r\n className={isOpen && 'header__overlay header__overlay--active' ||\r\n (isClosing && 'header__overlay header__overlay--closing') ||\r\n 'header__overlay'\r\n }\r\n onTransitionEnd={() => handleTransitionEnd()}\r\n />\r\n toggleMenu(event)}\r\n >\r\n handleTransitionEnd()}\r\n >\r\n
\r\n \r\n { account && account.photoUrl\r\n ? \r\n : \r\n }\r\n
\r\n \r\n \r\n toggleMenu(e)}>\r\n 
\r\n \r\n
\r\n {isOnUnauthenticatedRoute(location.pathname)\r\n ? (\r\n \r\n handleLoginSignUpClick(e, true)}>\r\n Login\r\n \r\n handleLoginSignUpClick(e)}>\r\n Register\r\n \r\n
\r\n )\r\n : (\r\n \r\n handleLogoutClick(e)}>\r\n Logout\r\n \r\n
\r\n )\r\n }\r\n \r\n
\r\n \r\n browserHistory.push('/main/invoices')}\r\n >\r\n
\r\n - \r\n {navLinks.map((link, i) => (\r\n
\r\n setIsLogoutModalOpen(true)}\r\n >\r\n Log Out\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {label}\r\n
\r\n {comingSoonMenu.has(label) && \r\n Coming Soon\r\n
}\r\n \r\n
}\r\n {createCardType &&\r\n \r\n Create a Card\r\n
\r\n \r\n Create a new physical or virtual card for yourself or a member of your team.\r\n
\r\n \r\n Card Type\r\n
\r\n \r\n setCreateCardType('physical')}>\r\n \r\n \r\n \r\n \r\n \r\n setCreateCardType('virtual')}>\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n Physical Card\r\n
\r\n \r\n Limit one per person\r\n
\r\n \r\n Virtual Card\r\n
\r\n \r\n Great for managing online expenses\r\n
\r\n \r\n Recent Cards\r\n
\r\n \r\n Start creating a new card using the same settings of a recent card\r\n
\r\n \r\n {recentCards && recentCards.map((card, i) => (\r\n \r\n createFromPreviousCard(card)} focusRipple>\r\n \r\n {card.type === 'physical' ? 'P' : 'V'}}\r\n // title={`$${card.limit}`}\r\n title={ \r\n \r\n \r\n ))}\r\n
\r\n \r\n
}\r\n subheader={card.user.toString()}\r\n />\r\n ${card.limit}
\r\n \r\n {card.recurringType === 'recurring' ? 'Recurring' : 'Single Use'}\r\n
\r\n \r\n
\r\n }\r\n\r\n \r\n Create a {createCardType === 'physical' ? 'Physical' : 'Virtual'} Card\r\n
\r\n \r\n Create a virtual card for you or team member. Great for one-time expenses.\r\n
\r\n \r\n {error && !isLoading &&
\r\n \r\n );\r\n}\r\n\r\nCreateCard.propTypes = {\r\n location: PropTypes.object,\r\n open: PropTypes.bool,\r\n onClose: PropTypes.func,\r\n openAlert: PropTypes.func,\r\n onCreateCard: PropTypes.func\r\n};\r\n","import { connect } from 'react-redux';\r\nimport CreateCard from './CreateCard';\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CreateCard);\r\n","import CreateCardContainer from './CreateCardContainer';\r\n\r\nexport default CreateCardContainer;\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./createCard.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./createCard.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./createCard.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Drawer from 'components/common/Drawer';\r\nimport Button from 'components/common/Button';\r\nimport TextField from 'components/common/TextField';\r\nimport { Divider } from '@mui/material';\r\nimport './styles/createInvoiceTerm.scss';\r\nimport { createPaymentTerm } from 'services/webApi';\r\n\r\nexport default function CreateInvoiceTerm({\r\n open,\r\n onClose,\r\n fetchTerms,\r\n setAlertOpen,\r\n setAlertMessage\r\n}) {\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [error, setError] = useState('');\r\n const [termName, setTermName] = useState('');\r\n const [termLength, setTermLength] = useState(0);\r\n // const [termDiscountRate, setTermDiscountRate] = useState(0);\r\n\r\n const createTerm = async () => {\r\n setIsLoading(true);\r\n try {\r\n const termDetail = {\r\n termDescription: termName,\r\n dueDate: +termLength,\r\n discountRate: 0 // Feature to be implemented in future\r\n };\r\n await createPaymentTerm(termDetail).then((response) => {\r\n const paymentTermId = response?.data?.responseId;\r\n fetchTerms(paymentTermId);\r\n });\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'success', message: `Successfully created term: ${termName}` });\r\n onClose();\r\n } catch (err) {\r\n // eslint-disable-next-line no-console\r\n console.error('create customer error', err?.response?.data);\r\n setError('Error occured while creating term. Please try again later.');\r\n }\r\n setIsLoading(false);\r\n };\r\n\r\n const isFormComplete = () => {\r\n return termName && termLength;\r\n };\r\n\r\n return (\r\n \r\n {parseErrorMessage(error, locale)}\r\n
}\r\n \r\n \r\n { createCardType &&\r\n \r\n }\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n Create Invoice Term\r\n
\r\n Invoice Term Details
\r\n \r\n setTermName(val)} />\r\n
\r\n \r\n setTermLength(val)} />\r\n
\r\n \r\n {error && !isLoading &&
\r\n \r\n );\r\n}\r\n\r\nCreateInvoiceTerm.propTypes = {\r\n open: PropTypes.bool,\r\n onClose: PropTypes.func,\r\n fetchTerms: PropTypes.func,\r\n setAlertOpen: PropTypes.func,\r\n setAlertMessage: PropTypes.func\r\n};\r\n","import CreateInvoiceTerm from './CreateInvoiceTerm';\r\n\r\nexport default CreateInvoiceTerm;\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./createInvoiceTerm.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./createInvoiceTerm.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./createInvoiceTerm.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Drawer from 'components/common/Drawer';\r\nimport Button from 'components/common/Button';\r\nimport TextField from 'components/common/TextField';\r\nimport { Divider, InputAdornment } from '@mui/material';\r\nimport { createShippingRate } from 'services/webApi';\r\nimport './styles/createShippingRate.scss';\r\n\r\nexport default function CreateShippingRate({\r\n open,\r\n onClose,\r\n fetchShippingHandlingList,\r\n setAlertOpen,\r\n setAlertMessage\r\n}) {\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [error, setError] = useState('');\r\n const [shippingRateName, setShippingRateName] = useState('');\r\n const [shippingRateFee, setIppingRateFee] = useState(0);\r\n\r\n const createShipping = async () => {\r\n setIsLoading(true);\r\n try {\r\n const shippinRateDetail = {\r\n courierName: shippingRateName,\r\n feeType: 0,\r\n standardFee: +shippingRateFee\r\n };\r\n await createShippingRate(shippinRateDetail).then((response) => {\r\n const shippingHandlingId = response?.data?.responseId;\r\n fetchShippingHandlingList(shippingHandlingId);\r\n });\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'success', message: `Successfully created shipping rate: ${shippingRateName}` });\r\n onClose();\r\n } catch (err) {\r\n // eslint-disable-next-line no-console\r\n console.error('create shipping error', err?.response?.data);\r\n setError('Error occured while creating shipping rate. Please try again later.');\r\n }\r\n setIsLoading(false);\r\n };\r\n\r\n const isFormComplete = () => {\r\n return shippingRateName && shippingRateFee;\r\n };\r\n\r\n return (\r\n \r\n {error}\r\n
}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n Create Shipping Rate\r\n
\r\n Shipping Rate Details
\r\n \r\n setShippingRateName(val)} />\r\n
\r\n \r\n $ }}\r\n onInputChange={(val) => setIppingRateFee(val)} />\r\n
\r\n \r\n {error && !isLoading &&
\r\n \r\n );\r\n}\r\n\r\nCreateShippingRate.propTypes = {\r\n open: PropTypes.bool,\r\n onClose: PropTypes.func,\r\n fetchShippingHandlingList: PropTypes.func,\r\n setAlertOpen: PropTypes.func,\r\n setAlertMessage: PropTypes.func\r\n};\r\n","import CreateShippingRate from './CreateShippingRate';\r\n\r\nexport default CreateShippingRate;\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./createShippingRate.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./createShippingRate.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./createShippingRate.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useEffect, useState, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport TextField from 'components/common/TextField';\r\nimport Button from 'components/common/Button';\r\nimport AddIcon from '@mui/icons-material/Add';\r\nimport { browserHistory, useLocation } from 'react-router';\r\nimport { ButtonBase, Divider, Menu, MenuItem, MenuList } from '@mui/material';\r\nimport ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';\r\nimport FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';\r\nimport useInvoiceList from './hooks/useInvoiceList';\r\nimport InvoicesTable from './components/InvoicesTable';\r\nimport LoadingSpinner from 'components/common/LoadingSpinner';\r\nimport UploadIcon from '@mui/icons-material/Upload';\r\nimport ImportInvoicesDrawer from './components/ImportInvoicesDrawer';\r\nimport './styles/invoices.scss';\r\nimport Alert from 'components/common/Alert';\r\nimport RailzConnection from 'components/RailzConnection';\r\nimport { addRailzConnection, validateRailz } from 'services/webApi';\r\nimport ContextMenu from '../common/ContextMenu';\r\n\r\nexport default function Invoices({ children, location }) {\r\n const [exportMenu, setExportMenu] = useState(null);\r\n const [alertOpen, setAlertOpen] = useState(false);\r\n const [alertMessage, setAlertMessage] = useState('');\r\n const [isRailzConnectionOpen, setIsRailzConnectionOpen] = useState(false);\r\n const [railzValidationInfo, setRailzValidationInfo] = useState(undefined);\r\n const [isImportInvoicesPanelOpen, setIsImportInvoicesPanelOpen] = useState(false);\r\n const [isValidationLoading, setIsValidationLoading] = useState(false);\r\n const {\r\n invoices,\r\n isLoading,\r\n error,\r\n paginationInfo,\r\n rowsPerPage,\r\n orderInfo,\r\n searchText,\r\n setSearchText,\r\n handlePageChange,\r\n handleRowsPerPageChange,\r\n handleInvoiceSearch,\r\n sortColumn,\r\n fetchInitialData\r\n } = useInvoiceList();\r\n\r\n const exportMenuItems = useMemo(() => [\r\n {\r\n onClick: null,\r\n text: 'Export as CSV'\r\n },\r\n {\r\n onClick: null,\r\n text: 'Export as PDF'\r\n }\r\n ], []);\r\n\r\n useEffect(() => {\r\n if (!children && location.action === 'PUSH') {\r\n if (location.state?.refreshTable) {\r\n // TODO: Table refresh doesn't seem as responsive, with a slight delay - may need investigation.\r\n // This only resets the search. Decision needed to whether sort should also be reset.\r\n handleInvoiceSearch('');\r\n }\r\n if (location.state?.alertMessage) {\r\n setAlertOpen(true);\r\n setAlertMessage(location.state?.alertMessage);\r\n }\r\n }\r\n if (!children && location.state?.alertMessage) {\r\n setAlertOpen(true);\r\n setAlertMessage(location.state?.alertMessage);\r\n }\r\n }, [children]);\r\n\r\n useEffect(() => {\r\n // Updates the fuse account to update the railz connection status\r\n const addRailz = async () => {\r\n const response = await addRailzConnection();\r\n return response;\r\n };\r\n if (location.query?.railzConnection === 'success') {\r\n addRailz()\r\n .then((res) => {\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'success', message: 'Connected successfully' });\r\n }).catch(() => {\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'error', message: 'Connection could not be finalized. Please try again later.' });\r\n });\r\n }\r\n }, [location.query]);\r\n\r\n const handleExportMenuOpen = (event) => {\r\n setExportMenu(event.currentTarget);\r\n };\r\n\r\n const handleExportMenuClose = () => {\r\n setExportMenu(null);\r\n };\r\n\r\n const performSearch = (searchText) => {\r\n setSearchText(searchText);\r\n handleInvoiceSearch(searchText);\r\n };\r\n\r\n const handleOpenImportDrawer = async () => {\r\n setIsValidationLoading(true);\r\n try {\r\n const response = await validateRailz();\r\n setRailzValidationInfo(response.data);\r\n if (response.data?.isValid) {\r\n setIsImportInvoicesPanelOpen(true);\r\n } else {\r\n setIsRailzConnectionOpen(true);\r\n }\r\n } catch (err) {\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'error', message: 'Could not retrieve information. Please try again later.' });\r\n }\r\n setIsValidationLoading(false);\r\n };\r\n\r\n if (children) {\r\n return \r\n {error}\r\n
}\r\n \r\n \r\n \r\n
\r\n \r\n {children}\r\n
;\r\n }\r\n\r\n return (\r\n \r\n setAlertOpen(false)}>{alertMessage.message} \r\n setIsRailzConnectionOpen(false)} redirectUrl='/main/invoices' />\r\n setIsImportInvoicesPanelOpen(false)} setAlertOpen={setAlertOpen} setAlertMessage={setAlertMessage} fetchInitialData={fetchInitialData} />\r\n
\r\n );\r\n}\r\n\r\nInvoices.propTypes = {\r\n children: PropTypes.node,\r\n location: PropTypes.object\r\n};\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from 'components/common/Button';\r\nimport { ButtonBase, Divider, Switch } from '@mui/material';\r\nimport { browserHistory } from 'react-router';\r\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack';\r\nimport CheckIcon from '@mui/icons-material/Check';\r\nimport InvoiceForm from './InvoiceForm';\r\nimport useManageInvoice from 'components/Invoices/hooks/useManageInvoice';\r\nimport ReviewInvoice from './ReviewInvoice/ReviewInvoice';\r\nimport { useCancelPromise } from 'services/hooks';\r\nimport Modal from 'components/common/Modal';\r\nimport Alert from 'components/common/Alert';\r\nimport RouteBlocker from 'components/common/RouteBlocker';\r\nimport CreateInvoiceTerm from 'components/CreateInvoiceTerm';\r\nimport './styles/createInvoice.scss';\r\nimport CreateShippingRate from 'components/CreateShippingRate';\r\nimport FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';\r\nimport ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';\r\nimport ContextMenu from '../../../common/ContextMenu';\r\nimport PaymentOptions from './PaymentOptions';\r\nimport RecurringInvoiceParams from './components/RecurringInvoiceParams';\r\nimport RecurringProfile from './components/RecurringProfile';\r\nimport useRecurringInvoice from '../../hooks/useRecurringInvoice';\r\nimport { updateRecurringInvoice } from '../../../../services/webApi';\r\nimport CreateCustomer from 'components/Contacts/components/ContactsCustomers/components/CreateCustomer';\r\nimport CreateInvoiceItem from './CreateInvoiceItem';\r\nimport useUnits from 'components/Catalogue/hooks/useUnits';\r\n\r\nexport default function CreateInvoice({\r\n params\r\n}) {\r\n const { invoiceId } = params;\r\n const [reviewInvoice, setReviewInvoice] = useState(false);\r\n const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);\r\n const [isBlockRouteNav, setIsBlockRouteNav] = useState(true);\r\n const [isCreatePaymentTermOpen, setIsCreatePaymentTermOpen] = useState(false);\r\n const [isCreateShippingOpen, setIsCreateShippingOpen] = useState(false);\r\n const [isCreateCustomerOpen, setIsCreateCustomerOpen] = useState(false);\r\n const [isCreateInvoiceItemOpen, setIsCreateInvoiceItemOpen] = useState(false);\r\n const [itemType, setItemType] = useState('');\r\n const [alertOpen, setAlertOpen] = useState(false);\r\n const [alertMessage, setAlertMessage] = useState('');\r\n const [serviceUnitsMap, productUnitsMap] = useUnits();\r\n const [fetchInvoiceItemList, setFetchIvoiceItemList] = useState(null);\r\n const cancelPromise = useCancelPromise();\r\n\r\n const [optionsMenuAnchor, setOptionsMenuAnchor] = useState(null);\r\n const optionsMenuItems = useMemo(() => [\r\n {\r\n text: 'Record a Payment'\r\n },\r\n {\r\n text: 'Duplicate Invoice'\r\n },\r\n {\r\n text: 'Preview Invoice'\r\n },\r\n {\r\n text: 'Delete'\r\n }\r\n ], []);\r\n\r\n const { isLoading, error, isAddressLoading, addressError, provinces, cities, fetchInvoiceInfo, invoiceInfo, invoiceNumber, invoiceStatus, invoiceName, setInvoiceName, poNumber, setPoNumber, issueDate, setIssueDate, paymentTerm, setPaymentTerm,\r\n originBranch, setOriginBranch, customer, setCustomer, invoiceItems, setInvoiceItems, shippingAddress, setShippingAddress, shippingEqualsBilling, setShippingEqualsBilling,\r\n notes, setNotes, credit, setCredit, discount, setDiscount, shippingHandling, setShippingHandling, branches, customers, products, branch, services, shippingHandlingFees, paymentTerms, taxCodes,\r\n fetchBranchInfo, saveInvoice, deleteSelectedInvoice, sendInvoiceToCustomer, checkHasValueChanged, fetchPaymentTermList, fetchShippingHandlingList, fetchCustomerListSearch, defaultSettings, defaultEmailSettings,\r\n fetchAllCustomers, fetchProductList, fetchServiceList, invoiceItem, setInvoiceItem, setInvoiceItemIndex } = useManageInvoice(invoiceId);\r\n\r\n const {\r\n recurringInvoice,\r\n setRecurringInvoice,\r\n recurringName,\r\n setRecurringName,\r\n startDate,\r\n setStartDate,\r\n occurrences,\r\n setOccurrences,\r\n frequency,\r\n setFrequency,\r\n isRecurring,\r\n setRecurring,\r\n sendUntilCanceled,\r\n setSendUntilCanceled,\r\n validateRecurringProfile,\r\n saveRecurringInvoice,\r\n error: recurringError,\r\n cancelRecurringInvoice,\r\n resumePauseInvoice\r\n } = useRecurringInvoice(invoiceId, issueDate);\r\n useEffect(() => {\r\n if (invoiceId) {\r\n setReviewInvoice(true);\r\n }\r\n }, [invoiceId]);\r\n\r\n const invoiceValid = () => {\r\n return issueDate && paymentTerm && originBranch && customer && invoiceItems.length > 0 && invoiceItems.every(item => item.product && item.taxCode) && validateRecurringProfile();\r\n };\r\n\r\n const showAlertBox = (message) => {\r\n setAlertMessage(message);\r\n setAlertOpen(true);\r\n };\r\n\r\n const handlePaymentSelection = (selection) => {\r\n if (selection?.id === 'add-item') {\r\n setIsCreatePaymentTermOpen(true);\r\n } else {\r\n setPaymentTerm(selection);\r\n }\r\n };\r\n\r\n const handleShippingSelection = (selection) => {\r\n if (selection?.id === 'add-item') {\r\n setIsCreateShippingOpen(true);\r\n } else {\r\n setShippingHandling(selection);\r\n }\r\n };\r\n\r\n const handleCustomerSelection = (selection) => {\r\n if (selection?.id === 'add-item') {\r\n setIsCreateCustomerOpen(true);\r\n } else {\r\n setCustomer(selection);\r\n }\r\n };\r\n\r\n const handleInvoiceItemSelection = (selection, index) => {\r\n if (selection?.id === 'add-item-product') {\r\n setItemType('products');\r\n setInvoiceItemIndex(index);\r\n setIsCreateInvoiceItemOpen(true);\r\n } else if (selection?.id === 'add-item-service') {\r\n setItemType('services');\r\n setInvoiceItemIndex(index);\r\n setIsCreateInvoiceItemOpen(true);\r\n } else {\r\n setInvoiceItems(selection);\r\n }\r\n };\r\n\r\n const handleCreateNewInvoice = async () => {\r\n const response = await saveInvoice();\r\n if (response.status === 200) {\r\n await saveRecurringInvoice(response?.data?.responseId);\r\n\r\n browserHistory.push({ pathname: '/main/invoices', state: { refreshTable: true, alertMessage: { type: 'success', message: 'Invoice was created successfully' } } });\r\n } else {\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'error', message: 'An error occured while creating invoice. Please try again later.' });\r\n }\r\n };\r\n\r\n const handleUpdateInvoice = async (setToReview) => {\r\n const response = await saveInvoice(invoiceId);\r\n if (response.status === 200) {\r\n await saveRecurringInvoice(response?.data?.responseId);\r\n if (setToReview) {\r\n setReviewInvoice(true);\r\n fetchInvoiceInfo();\r\n } else {\r\n browserHistory.push({ pathname: '/main/invoices', state: { refreshTable: true, alertMessage: { type: 'success', message: 'Invoice was updated successfully' } } });\r\n }\r\n } else {\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'error', message: 'An error occured while updating invoice. Please try again later.' });\r\n }\r\n };\r\n\r\n const handleReviewNewInvoice = async () => {\r\n const response = await saveInvoice();\r\n if (response.status === 200) {\r\n const invoiceId = response.data?.responseId;\r\n await saveRecurringInvoice(invoiceId);\r\n browserHistory.push(`/main/invoices/details/${invoiceId}`);\r\n } else {\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'error', message: 'An error occured while creating invoice. Please try again later.' });\r\n }\r\n };\r\n\r\n const handleSendInvoice = async () => {\r\n const response = await sendInvoiceToCustomer();\r\n if (response.status === 200) {\r\n browserHistory.push({ pathname: '/main/invoices', state: { refreshTable: true, alertMessage: { type: 'success', message: 'Invoice was sent successfully' } } });\r\n } else {\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'error', message: 'An error occured while sending the invoice. Please try again later.' });\r\n }\r\n };\r\n\r\n const deleteInvoice = async () => {\r\n const response = await deleteSelectedInvoice(invoiceId);\r\n if (response.status === 200) {\r\n setIsBlockRouteNav(false);\r\n setIsDeleteModalOpen(false);\r\n\r\n await delay(500);\r\n\r\n browserHistory.push({ pathname: '/main/invoices', state: { refreshTable: true, alertMessage: { type: 'success', message: 'Invoice was deleted successfully' } } });\r\n } else {\r\n setIsBlockRouteNav(false);\r\n setAlertMessage({ type: 'error', message: 'An error occured while deleting the invoice. Please try again later.' });\r\n setAlertOpen(true);\r\n setIsDeleteModalOpen(false);\r\n }\r\n };\r\n\r\n const delay = ms => new Promise(\r\n resolve => setTimeout(resolve, ms)\r\n );\r\n\r\n const companyPath = '/main/company';\r\n const bankingPaymentTab = 'bankingPayment';\r\n\r\n const onSaveClick = () => {\r\n if (!invoiceId && invoiceValid()) {\r\n handleCreateNewInvoice();\r\n } else if (!invoiceId) {\r\n // TODO: submit in progress/draft invoice\r\n // when API is available\r\n } else if (invoiceId && invoiceValid()) {\r\n // TODO: sumbit edited invoice when API\r\n // is available\r\n handleUpdateInvoice();\r\n }\r\n };\r\n\r\n const shouldBlock = () => {\r\n return checkHasValueChanged() && isBlockRouteNav;\r\n };\r\n\r\n const handleCancelRecurring = async (e) => {\r\n const isCanceledSuccessfully = await cancelRecurringInvoice(e);\r\n if (isCanceledSuccessfully) {\r\n setReviewInvoice(true);\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'success', message: 'Recurring is canceled successfully' });\r\n }\r\n };\r\n\r\n const handleDate = (date, type) => {\r\n if (type === 'recurring') {\r\n\r\n } else {\r\n setIssueDate(date);\r\n if (startDate) {\r\n if (startDate.getTime() < date.getTime()) {\r\n setStartDate(date);\r\n }\r\n }\r\n }\r\n };\r\n\r\n return (\r\n Invoices
\r\n \r\n
\r\n Invoices
\r\n \r\n } onClick={handleOpenImportDrawer} isLoading={isValidationLoading}>Import Invoices\r\n } onClick={() => browserHistory.push('/main/invoices/create')}>Create Invoice\r\n
\r\n \r\n
\r\n {isLoading && \r\n performSearch(val)} />\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n browserHistory.push({ pathname: '/main/invoices', state: { refreshTable: true } })}>\r\n \r\n
\r\n \r\n {invoiceId ? 'Edit' : 'Create'} Invoice {invoiceNumber && `#${invoiceNumber}`}\r\n
\r\n {{invoiceStatus}
\r\n \r\n {reviewInvoice ? \r\n {invoiceStatus === 'Draft' &&\r\n }\r\n {invoiceStatus === 'Draft' && !(recurringInvoice && recurringInvoice.isCanceled) &&\r\n }\r\n {invoiceStatus === 'Draft' && }\r\n {invoiceStatus === 'Sent' && }\r\n \r\n : invoiceId ? \r\n \r\n : \r\n \r\n \r\n }\r\n
}\r\n \r\n \r\n setOptionsMenuAnchor(event.currentTarget)}\r\n className=\"invoices__actions__export__label\"\r\n >\r\n Options\r\n setOptionsMenuAnchor(null)}\r\n menuItems={optionsMenuItems} />\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {reviewInvoice ? \r\n {invoiceInfo && setReviewInvoice(false)} />}\r\n \r\n : handleDate(date, 'issue')}\r\n paymentTerm={paymentTerm}\r\n setPaymentTerm={handlePaymentSelection}\r\n originBranch={originBranch}\r\n setOriginBranch={setOriginBranch}\r\n customer={customer}\r\n setCustomer={handleCustomerSelection}\r\n invoiceItems={invoiceItems}\r\n setInvoiceItems={setInvoiceItems}\r\n shippingAddress={shippingAddress}\r\n setShippingAddress={setShippingAddress}\r\n shippingEqualsBilling={shippingEqualsBilling}\r\n setShippingEqualsBilling={setShippingEqualsBilling}\r\n notes={notes}\r\n setNotes={setNotes}\r\n credit={credit}\r\n setCredit={setCredit}\r\n discount={discount}\r\n setDiscount={setDiscount}\r\n shippingHandling={shippingHandling}\r\n setShippingHandling={handleShippingSelection}\r\n branches={branches}\r\n customers={customers}\r\n products={products}\r\n branch={branch}\r\n services={services}\r\n taxCodes={taxCodes}\r\n shippingHandlingFees={shippingHandlingFees}\r\n paymentTerms={paymentTerms}\r\n fetchBranchInfo={fetchBranchInfo}\r\n fetchCustomerListSearch={fetchCustomerListSearch}\r\n defaultSettings={defaultSettings}\r\n defaultEmailSetting={defaultEmailSettings}\r\n fetchCustomerList={fetchAllCustomers}\r\n invoiceItem={invoiceItem}\r\n setInvoiceItem={handleInvoiceItemSelection}\r\n />}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n setInvoiceName(val)} /> */}\r\n setPoNumber(val)} />\r\n
\r\n Invoice # {invoiceNumber}
\r\n {/* To be added in later phase, pending backend changes */}\r\n {/* \r\n setIssueDate(val)}\r\n inputFormat=\"MM/dd/yyyy\"\r\n renderInput={(params) =>
\r\n Issue Date
\r\n \r\n option?.id === value?.id}\r\n options={paymentTerms}\r\n onChange={(e, val) => setPaymentTerm(val)} />\r\n
\r\n Terms
\r\n Due Date
\r\n {issueDate && paymentTerm && calculateDueDate(issueDate, paymentTerm.dueDate).toISOString().slice(0, 10)}
\r\n \r\n
\r\n \r\n setOriginBranch(val)} />\r\n {originBranch &&
\r\n From
\r\n \r\n
}\r\n {originBranch.branchAddress}
\r\n {originBranch.city}, {originBranch.province?.province}
\r\n {originBranch.country?.country}, {originBranch.postalCode}
\r\n \r\n fetchCustomerListSearch('')}\r\n handleInputChange={(val) => fetchCustomerListSearch(val)} */\r\n\r\n renderOption={(props, option) => ({option.id === 'add-item' && )}\r\n getOptionLabel={option => option.customerName + (option.partnerName && (option.partnerName !== option.customerName) ? ` - ${option.partnerName}` : '')}\r\n options={customers}\r\n isOptionEqualToValue={(option, value) => option?.id === value?.id}\r\n onChange={(e, val) => handleSelectCustomer(val)} />\r\n {branch &&
\r\n Invoice To
\r\n \r\n setShippingEqualsBilling(e.target.checked)} disabled /> */}\r\n
}\r\n {customer?.email}
\r\n {branch.billToAddress}
\r\n {branch.billToCity?.city}, {branch.billToProvince?.province}
\r\n {branch.billToCountry?.country}, {branch.billToPostalCode}
\r\n {/* Hiding for R1 */}\r\n {/* \r\n {isMobile\r\n ? \r\n \r\n : \r\n }\r\n\r\n {invoiceItems.map((item, index) => (\r\n
\r\n \r\n Products / Services\r\n
\r\n \r\n
\r\n Name
\r\n Price
\r\n Quantity
\r\n Subtotal
\r\n Tax Code
\r\n \r\n \r\n
\r\n ))}\r\n \r\n editProduct(index, 'product', val)} />\r\n
\r\n \r\n editProduct(index, 'price', val)}\r\n clearButton={false}\r\n {...dollarInputAdornment} />\r\n {item.type === 'product' &&\r\n editProduct(index, 'isOnSale', e.target.checked)} />}\r\n
\r\n \r\n editProduct(index, 'quantity', val)} clearButton={false} />\r\n
\r\n \r\n {isMobile &&
\r\n Subtotal
}\r\n {formatCurrency(determineItemPrice(item) * +item.quantity)}\r\n \r\n option?.id === value?.id}\r\n onChange={(e, val) => editProduct(index, 'taxCode', val)} />\r\n
\r\n \r\n {isMobile &&
\r\n deleteInvoiceItem(index)}>Remove
}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n invoiceItems.forEach((item, index) => editProduct(index, 'taxCode', val))} />\r\n
\r\n Apply To All
\r\n \r\n
\r\n \r\n setNotes(val)} />\r\n
\r\n\r\n Shipping Address
\r\n {!shippingEqualsBilling && \r\n
}\r\n {shippingEqualsBilling && branch && \r\n setShippingAddress({ ...shippingAddress, name: val })} />\r\n
\r\n \r\n setShippingAddress({ ...shippingAddress, addressOne: val })} />\r\n
\r\n \r\n option?.id === value?.id}\r\n onChange={(e, val) => handleSelectProvince(val)} />\r\n setShippingAddress({ ...shippingAddress, city: val })} />\r\n
\r\n \r\n setShippingAddress({ ...shippingAddress, postalCode: val })} />\r\n
\r\n \r\n
}\r\n {branch.billToAddress}
\r\n {branch.billToCity?.city}, {branch.billToProvince?.province}
\r\n {branch.billToCountry?.country}, {branch.billToPostalCode}
\r\n Notes
\r\n \r\n
\r\n \r\n
\r\n Subtotal
\r\n {formatCurrency(subtotal)}
\r\n \r\n
\r\n \r\n setDiscount(({ amount: 0, type: e.target.value }))}\r\n items={[{ label: '$', value: 'dollar' }, { label: '%', value: 'percentage' }]} />\r\n setDiscount({ ...discount, amount: parseInt(val) || 0 })} />\r\n
\r\n \r\n -{formatCurrency((discount.type === 'dollar' ? discount.amount : subtotal * (discount.amount / 100)) || 0)}\r\n
\r\n \r\n option?.id === value?.id}\r\n onChange={(e, val) => setShippingHandling(val)} />\r\n
\r\n {/* {formatCurrency(shippingHandling?.standardFee || 0)}
\r\n \r\n
*/}\r\n {Object.keys(taxBreakDown).map((taxCode, index) => {\r\n return Taxes
\r\n {formatCurrency(tax)}
\r\n \r\n
;\r\n })}\r\n {taxCode}
\r\n {formatCurrency(taxBreakDown[taxCode] || 0)}
\r\n \r\n
\r\n Total
\r\n {formatCurrency(netTotal + tax)}
\r\n \r\n setCredit(val)} {...dollarInputAdornment} disabled />\r\n
\r\n \r\n
\r\n Credits
\r\n ${branch?.currentCredit || 0} Available
\r\n \r\n
\r\n Amount Due
\r\n {formatCurrency(netTotal + tax)}
\r\n \r\n \r\n }\r\n
\r\n );\r\n}\r\n\r\nexport default PaymentOptions;\r\n","import PaymentOptions from './PaymentOptions';\r\n\r\nexport default PaymentOptions;\r\n","var api = require(\"!../../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./paymentOptions.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./paymentOptions.scss\",\n function () {\n content = require(\"!!../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./paymentOptions.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Divider } from '@mui/material';\r\nimport Checkbox from 'components/common/Checkbox';\r\nimport { formatCurrency, convertTaxRateLabel } from 'services/currency';\r\nimport './styles/reviewInvoice.scss';\r\nimport { calculateDueDate, formatDate } from 'services/dateTime';\r\nimport { useMobile } from 'services/hooks';\r\n\r\nexport default function ReviewInvoice({\r\n companyName,\r\n invoiceDetails\r\n}) {\r\n const isMobile = useMobile(48);\r\n const { invoiceNumber, poNumber, invoiceDate, paymentTerm, billToCustomerName, shippedFromBranch, billToBranchInfo, details, shippingAddress, shippingEqualsBilling,\r\n customerMessage, appliedDiscount, appliedCredits, shipToBranchInfo, shippingTotal, discountedTotal, subTotal, balanceDue } = invoiceDetails || {};\r\n\r\n const taxBreakDown = details?.reduce((prev, current) => {\r\n const taxCode = current.taxDefinition?.taxCode;\r\n const secTaxCode = current.taxDefinition?.secTaxCode;\r\n if (!prev[taxCode]) {\r\n prev[taxCode] = 0;\r\n };\r\n prev[taxCode] += current.totalAmount * current.taxDefinition?.taxRate;\r\n if (secTaxCode) {\r\n if (secTaxCode && !prev[secTaxCode]) {\r\n prev[secTaxCode] = 0;\r\n };\r\n prev[secTaxCode] += current.totalAmount * current.taxDefinition?.secTaxRate;\r\n }\r\n return prev;\r\n }, {});\r\n const taxTotal = Object.values(taxBreakDown).reduce((prev, current) => prev + current, 0);\r\n const tenantLogoBase64 = localStorage.getItem('tenantLogo');\r\n return (\r\n \r\n setOpened(!isOpened)}>\r\n {isOpened ? < ArrowUp /> : \r\n
\r\n {isOpened && Payment Options
\r\n \r\n < Close className='payment-options__header__row__icon_close' />\r\n
\r\n Credit Cards
\r\n \r\n Sign up to allow payments by credit card and get paid faster!\r\n
\r\n \r\n } onClick={() => {}}>Allow Credit Cards\r\n
\r\n \r\n
\r\n Bank Transfer
\r\n \r\n
\r\n E-Transfer (Up to $25K)
\r\n \r\n * E-Transfer is only available for invoices less than $25,000.00\r\n
\r\n \r\n {/*
\r\n */}\r\n {/* {companyName || 'Company Name'} */}\r\n {/*
*/}\r\n \r\n
\r\n \r\n \r\n\r\n
\r\n \r\n {invoiceNumber &&
\r\n {invoiceNumber}
}\r\n {/* Invoice Name
*/}\r\n {poNumber}
\r\n \r\n
\r\n Issue Date
\r\n {formatDate(new Date(invoiceDate))}
\r\n \r\n
\r\n \r\n
\r\n Terms
\r\n {paymentTerm?.termDescription}
\r\n \r\n
\r\n Due Date
\r\n {paymentTerm && formatDate(calculateDueDate(new Date(invoiceDate), paymentTerm.dueDate))}
\r\n \r\n
\r\n \r\n
\r\n From
\r\n {shippedFromBranch && \r\n
}\r\n {shippedFromBranch.branchName}
\r\n {shippedFromBranch.branchAddress}
\r\n {shippedFromBranch.city}, {shippedFromBranch.province?.province}
\r\n {shippedFromBranch.country?.country}, {shippedFromBranch.postalCode}
\r\n \r\n
\r\n Invoice To
\r\n {billToBranchInfo && \r\n
}\r\n {billToCustomerName}
\r\n {billToCustomerName !== billToBranchInfo?.partnerName && {billToBranchInfo.partnerName}
}\r\n {billToBranchInfo.email}
\r\n {billToBranchInfo.billToAddress}
\r\n {billToBranchInfo.billToCity?.city}, {billToBranchInfo.billToProvince?.province}
\r\n {billToBranchInfo.billToCountry?.country}, {billToBranchInfo.billToPostalCode}
\r\n {/* Hiding for R1 */}\r\n {/* \r\n {isMobile\r\n ?
\r\n Products / Services
\r\n : \r\n
}\r\n Name
\r\n Price
\r\n Quantity
\r\n Subtotal
\r\n Tax Code
\r\n \r\n
\r\n : \r\n
\r\n {item.product?.productName}
\r\n {formatCurrency(item.totalAmount)}
\r\n \r\n
\r\n {item?.taxDefinition?.taxRateLabel}
\r\n {item.quantity || item.Quantity} x {formatCurrency(item.unitPrice)}
\r\n \r\n
\r\n ))}\r\n {item.product?.productName}
\r\n {formatCurrency(item.unitPrice)}
\r\n {/* displaying both quantity/Quantity fields as response is inconsistent. remove Quantity when/if response is fixed */}\r\n {item.quantity || item.Quantity}
\r\n {formatCurrency(item.totalAmount)}
\r\n {item?.taxDefinition?.taxRateLabel}
\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n Shipping Address
\r\n {shipToBranchInfo && \r\n {/* TODO: remove shipToAdress when response is fixed */}\r\n
}\r\n {shipToBranchInfo.shipToAddress || shipToBranchInfo.shipToAdress}
\r\n {shipToBranchInfo.shipToCity?.city}, {shipToBranchInfo.shipToProvince?.province}
\r\n {shipToBranchInfo.shipToCountry?.country}, {shipToBranchInfo.shipToPostalCode}
\r\n Notes
\r\n {customerMessage}
\r\n \r\n
\r\n \r\n
\r\n Subtotal
\r\n {formatCurrency(subTotal)}
\r\n \r\n
\r\n Discount
\r\n {formatCurrency(appliedDiscount)}
\r\n \r\n
\r\n {Object.keys(taxBreakDown).map((taxCode, index) => {\r\n return Shipping
\r\n {formatCurrency(shippingTotal)}
\r\n \r\n
;\r\n })}\r\n {taxCode}
\r\n {formatCurrency(taxBreakDown[taxCode])}
\r\n \r\n
\r\n Net Total
\r\n {formatCurrency(discountedTotal)}
\r\n \r\n
\r\n Credit
\r\n {formatCurrency(appliedCredits)}
\r\n \r\n
\r\n Amount Due
\r\n {formatCurrency(balanceDue)}
\r\n Cancel Recurring Invoice
\r\n Your recurring invoice #RecurringName will be cancelled and no future invoices will be sent
\r\n \r\n
Would you like to continue?
\r\n setRecurring(!isRecurring)} checked={isRecurring} />\r\n
}\r\n \r\n Make recurring\r\n
\r\n \r\n setStartDate(val)}\r\n inputFormat=\"MM/dd/yyyy\"\r\n minDate={issueDate.getTime() > new Date(Date.now()).getTime() ? issueDate : new Date(Date.now())}\r\n renderInput={(params) => setStartDate(val)} />}\r\n disabled={!isRecurring}\r\n />\r\n
\r\n \r\n setOccurrences(Number(val))}\r\n disabled={!isRecurring}\r\n InputProps={{ inputProps: { min: 0, maxLength: 3 } }}\r\n />\r\n
\r\n Total you want to send
\r\n \r\n setSendUntilCanceled(!sendUntilCanceled)} checked={sendUntilCanceled} disabled={!isRecurring} />\r\n
\r\n {recurringInvoice && \r\n resumePauseInvoice(e.target.value)}\r\n variant={recurringInvoice.isPaused ? 'filled' : 'outlined'}>\r\n {recurringInvoice.isPaused ? 'Resume' : 'Pause' }\r\n \r\n \r\n
}\r\n ;\r\n};\r\n\r\nRecurringInvoiceParams.propTypes = {\r\n recurringInvoice: PropTypes.object,\r\n recurringName: PropTypes.string,\r\n setRecurringName: PropTypes.func,\r\n startDate: PropTypes.any,\r\n issueDate: PropTypes.any,\r\n setStartDate: PropTypes.func,\r\n occurrences: PropTypes.number,\r\n setOccurrences: PropTypes.func,\r\n frequency: PropTypes.object,\r\n setFrequency: PropTypes.func,\r\n isRecurring: PropTypes.bool,\r\n setRecurring: PropTypes.func,\r\n sendUntilCanceled: PropTypes.bool,\r\n setSendUntilCanceled: PropTypes.func,\r\n cancelRecurringInvoice: PropTypes.func,\r\n resumePauseInvoice: PropTypes.func\r\n};\r\n\r\nexport default RecurringInvoiceParams;\r\n","import RecurringInvoiceParams from './RecurringInvoiceParams';\r\n\r\nexport default RecurringInvoiceParams;\r\n","var api = require(\"!../../../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./recurringInvoiceParams.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./recurringInvoiceParams.scss\",\n function () {\n content = require(\"!!../../../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./recurringInvoiceParams.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState } from 'react';\r\nimport IconButton from '../../../../../common/IconButton';\r\nimport ArrowUp from '@mui/icons-material/ExpandLess';\r\nimport ArrowDown from '@mui/icons-material/ExpandMore';\r\nimport RecurringInvoiceParams from '../RecurringInvoiceParams';\r\nimport PropTypes from 'prop-types';\r\nimport RecurringProfileReviewParams from '../RecurringProfileReviewParams';\r\n\r\nconst RecurringProfile = ({\r\n\trecurringInvoice,\r\n\tsetRecurringInvoice,\r\n\tinvoiceId,\r\n\trecurringName,\r\n\tsetRecurringName,\r\n\tstartDate,\r\n\tsetStartDate,\r\n\toccurrences,\r\n\tsetOccurrences,\r\n\tfrequency,\r\n\tsetFrequency,\r\n\tisRecurring,\r\n\tsetRecurring,\r\n\tsendUntilCanceled,\r\n\tsetSendUntilCanceled,\r\n\treviewInvoice,\r\n\tcancelRecurringInvoice,\r\n\tresumePauseInvoice,\r\n\tissueDate\r\n}) => {\r\n const [isCollapsed, setCollapsed] = useState(false);\r\n\r\n return \r\n
;\r\n};\r\n\r\nRecurringProfile.propTypes = {\r\n invoiceId: PropTypes.any,\r\n recurringInvoice: PropTypes.object,\r\n setRecurringInvoice: PropTypes.func,\r\n recurringName: PropTypes.string,\r\n setRecurringName: PropTypes.func,\r\n startDate: PropTypes.any,\r\n issueDate: PropTypes.any,\r\n setStartDate: PropTypes.func,\r\n occurrences: PropTypes.number,\r\n setOccurrences: PropTypes.func,\r\n frequency: PropTypes.object,\r\n setFrequency: PropTypes.func,\r\n isRecurring: PropTypes.bool,\r\n setRecurring: PropTypes.func,\r\n sendUntilCanceled: PropTypes.bool,\r\n setSendUntilCanceled: PropTypes.func,\r\n reviewInvoice: PropTypes.bool,\r\n cancelRecurringInvoice: PropTypes.func,\r\n resumePauseInvoice: PropTypes.func\r\n};\r\n\r\nexport default RecurringProfile;\r\n","import RecurringProfile from './RecurringProfile';\r\n\r\nexport default RecurringProfile;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Parameter from '../../../../../InvoicesAndBillsSettings/components/Parameter';\r\nimport Chip from '../../../../../common/Chip';\r\nimport './styles/recurringProfileReviewParams.scss';\r\nimport { getChipVariant, getStatus } from '../services/recurringParamsService';\r\n\r\nfunction RecurringProfileReviewParams ({ recurringInvoice }) {\r\n return \r\n setCollapsed(!isCollapsed)} >\r\n {isCollapsed ? \r\n
\r\n {isCollapsed && \r\n\t\t\t\tRecurring Invoice\r\n\t\t\t
\r\n \r\n {reviewInvoice || recurringInvoice?.isCanceled ? }\r\n
}\r\n \r\n setStartDate(value)}\r\n inputFormat=\"MM/dd/yyyy\"\r\n disableFuture\r\n renderInput={(params) => setEndDate(value)}\r\n inputFormat=\"MM/dd/yyyy\"\r\n disabled={Boolean(!startDate)}\r\n minDate={startDate}\r\n disableFuture\r\n renderInput={(params) => setImportStatus(e.target.value)}\r\n />\r\n
\r\n Import Invoices
\r\n \r\n
\r\n {error}
}\r\n\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n { invoices.length === 0 &&\r\n \r\n
\r\n );\r\n}\r\n\r\nInvoicesTable.propTypes = {\r\n invoices: PropTypes.array.isRequired,\r\n onPageChange: PropTypes.func.isRequired,\r\n onRowsPerPageChange: PropTypes.func.isRequired,\r\n rowsPerPage: PropTypes.number.isRequired,\r\n paginationInfo: PropTypes.object.isRequired,\r\n orderInfo: PropTypes.object.isRequired,\r\n onSortClick: PropTypes.func.isRequired\r\n};\r\n","export const getHeaders = () => [\r\n\t{ id: 'issueDate', label: 'Issue Date', width: '5rem' },\r\n\t{ id: 'customer', label: 'Customer', width: '10rem' },\r\n\t{ id: 'invoice', label: 'Invoice', width: '10rem' },\r\n\t{ id: 'status', label: 'Status', width: '5rem' },\r\n\t{ id: 'unpaid', label: 'Unpaid', width: '5rem' },\r\n\t{ id: 'invoiceTotal', label: 'Invoice Total', width: '5rem' },\r\n\t{ id: 'dueDate', label: 'Due Date', width: '5.5rem' }\r\n];\r\n\r\nexport const getMenuItems = () => [\r\n {\r\n onClick: null,\r\n text: 'Send Invoice'\r\n },\r\n {\r\n onClick: null,\r\n text: 'Mark payment'\r\n },\r\n {\r\n onClick: null,\r\n text: 'Download PDF'\r\n },\r\n {\r\n onClick: null,\r\n text: 'Duplicate Draft'\r\n },\r\n {\r\n onClick: null,\r\n text: 'Preview Invoice'\r\n },\r\n {\r\n onClick: null,\r\n text: 'Close Invoice'\r\n }\r\n];\r\n","import InvoicesTable from './InvoicesTable';\r\n\r\nexport default InvoicesTable;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./invoicesTable.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./invoicesTable.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./invoicesTable.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useCallback, useEffect, useMemo, useState } from 'react';\r\nimport { ORDER_INFO_OBJECT, PAGINATION_INFO_OBJECT, ROWS_PER_PAGE_DEFAULT } from 'services/constants';\r\nimport { useCancelPromise, useDebounce } from 'services/hooks';\r\nimport { getInvoicesList } from 'services/webApi';\r\nimport { MenuItem } from '@mui/material';\r\n\r\n// sorting by customer name, can be adjusted\r\nconst SEARCH_COLUMN_PARAM = 'BillToCustomerName';\r\n\r\n// NOTE: If we ever need to shape an individual invoice similarily,\r\n// bring this into a service file and make a new function called\r\n// shapeInvoice that this calls for each invoice.\r\nconst shapeInvoices = (invoices) => (\r\n invoices.reduce((previous, currentInvoice, index) => {\r\n previous.push({\r\n id: currentInvoice.id || index.toString(),\r\n issueDate: currentInvoice.invoiceDate || '',\r\n customerName: currentInvoice.billToCustomerName || '',\r\n companyName: currentInvoice.companyName,\r\n invoiceNumber: currentInvoice.invoiceNumber || 0,\r\n status: currentInvoice.trnStatus || '',\r\n unpaid: currentInvoice.openBalance || 0, // inferring from use in legacy app\r\n invoiceTotal: currentInvoice.balanceDue || 0, // inferring from use in legacy app\r\n dueDate: currentInvoice.dueDate || ''\r\n });\r\n\r\n return previous;\r\n }, [])\r\n);\r\n\r\nconst columnToApiSortMap = {\r\n 'issueDate': 'InvoiceDate',\r\n 'customer': 'BillToCustomerName',\r\n 'invoice': 'InvoiceDate',\r\n 'status': 'TrnStatus',\r\n 'unpaid': 'OpenBalance',\r\n 'invoiceTotal': 'BalanceDue',\r\n 'dueDate': 'DueDate'\r\n};\r\n\r\nexport default function useInvoiceList() {\r\n const [searchText, setSearchText] = useState('');\r\n const [invoices, setInvoices] = useState([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [error, setError] = useState('');\r\n const [rowsPerPage, setRowsPerPage] = useState(ROWS_PER_PAGE_DEFAULT);\r\n const [paginationInfo, setPaginationInfo] = useState(PAGINATION_INFO_OBJECT);\r\n const [orderInfo, setOrderInfo] = useState(ORDER_INFO_OBJECT);\r\n const cancelPromise = useCancelPromise();\r\n\r\n const resetPaginationInfo = { currentPage: 1, totalPages: 1, totalResults: 0 };\r\n\r\n const updatePaginationInfo = (currentPage, totalResults) => {\r\n setPaginationInfo({\r\n currentPage,\r\n totalPages: Math.ceil(totalResults / rowsPerPage),\r\n totalResults\r\n });\r\n };\r\n\r\n const getInvoices = async (paginationInfo, rowsPerPage, searchText = '', column = '', sortText = '') => {\r\n setIsLoading(true);\r\n\r\n let response;\r\n try {\r\n response = await getInvoicesList(rowsPerPage, paginationInfo.currentPage.toString(), searchText, sortText, column);\r\n } catch (error) {\r\n if (!cancelPromise.current) {\r\n setError('Error fetching invoices. Please try again later.');\r\n setIsLoading(false);\r\n }\r\n\r\n return;\r\n }\r\n\r\n const shapedInvoices = shapeInvoices(response.data?.result || []);\r\n if (!cancelPromise.current) {\r\n setInvoices(shapedInvoices);\r\n setIsLoading(false);\r\n updatePaginationInfo(paginationInfo.currentPage, response.data.totalCount || 0);\r\n }\r\n };\r\n\r\n const handlePageChange = (newPage) => {\r\n const newPaginationInfo = { ...paginationInfo, currentPage: newPage };\r\n getInvoices(newPaginationInfo, rowsPerPage);\r\n };\r\n\r\n const handleRowsPerPageChange = (newRowsPerPage) => {\r\n setRowsPerPage(newRowsPerPage);\r\n getInvoices(resetPaginationInfo, newRowsPerPage);\r\n };\r\n\r\n const fetchInitialData = useCallback(() => getInvoices(paginationInfo, rowsPerPage), []);\r\n\r\n const handleInvoiceSearch = (searchText) => {\r\n getInvoices(resetPaginationInfo, rowsPerPage, searchText, SEARCH_COLUMN_PARAM);\r\n };\r\n\r\n const sortColumn = (orderByParam) => {\r\n const orderParam = (orderInfo.orderBy === orderByParam && orderInfo.order === 'asc') ? 'desc' : orderInfo.order === 'desc' ? '' : 'asc';\r\n setOrderInfo({ order: orderParam, orderBy: orderParam ? orderByParam : '' });\r\n getInvoices(\r\n resetPaginationInfo,\r\n rowsPerPage,\r\n searchText,\r\n SEARCH_COLUMN_PARAM,\r\n `${columnToApiSortMap[orderByParam]} ${orderParam}`\r\n );\r\n };\r\n\r\n const debouncedHandleInvoiceSearch = useDebounce(handleInvoiceSearch, 500);\r\n\r\n useEffect(() => {\r\n fetchInitialData();\r\n }, [fetchInitialData]);\r\n\r\n return {\r\n invoices,\r\n isLoading,\r\n error,\r\n paginationInfo,\r\n rowsPerPage,\r\n orderInfo,\r\n searchText,\r\n setSearchText,\r\n handlePageChange,\r\n handleRowsPerPageChange,\r\n handleInvoiceSearch: debouncedHandleInvoiceSearch,\r\n sortColumn,\r\n fetchInitialData\r\n };\r\n}\r\n","import { useEffect, useState } from 'react';\r\nimport {\r\n createInvoice, updateInvoice, deleteInvoice, getAllPartners, getCustomersListSearch,\r\n getAllPaymentTerms, getAllProducts, getAllShippingHandlingFees, getAllTaxCodes, getAllUserBranches,\r\n getCustomerBranch, getInvoiceInfo, sendInvoice, getInvoiceSettings, getInvoiceEmailSettings\r\n} from 'services/webApi';\r\nimport { useApi, useAddressLookup, useCancelPromise, useHasValueChanged, useDebounce } from 'services/hooks';\r\nimport { browserHistory } from 'react-router';\r\nimport { calculateInvoiceNetTotal, calculateInvoiceTax, determineItemPrice } from 'services/currency';\r\nimport { calculateDueDate } from 'services/dateTime';\r\n\r\nexport default function useManageInvoice (selectedInvoiceId, isReviewOnly = false) {\r\n const [isLoading, error, callApi] = useApi();\r\n\r\n const PRODUCTS_CODE = 1;\r\n const SERVICES_CODE = 3;\r\n const DISCOUNTTYPE_PERCENT_ID = '75ec5d03-1b8a-4202-905a-2d0a3301e74b';\r\n const DISCOUNTTYPE_VALUE_ID = 'b76f633f-c3bc-4cbf-8de7-317a3b8a4cc3';\r\n const DEFAULT_PAYMENT_TERM = {\r\n 'id': '5ac0613a-a7f0-403a-b364-449bdd177b7c',\r\n 'termType': 'Generic',\r\n 'dueDate': 1,\r\n 'discountRate': 5,\r\n 'termDescription': 'Due on receipt',\r\n 'isDefault': true,\r\n 'isActive': false\r\n };\r\n const DEFAULT_DISCOUNT_TYPE = 'dollar';\r\n\r\n const [invoiceInfo, setInvoiceInfo] = useState();\r\n\r\n // Form field states\r\n const [invoiceNumber, setInvoiceNumber] = useState('');\r\n const [invoiceStatus, setInvoiceStatus] = useState('');\r\n const [invoiceName, setInvoiceName] = useState('');\r\n const [poNumber, setPoNumber] = useState('');\r\n const [issueDate, setIssueDate] = useState(new Date());\r\n const [paymentTerm, setPaymentTerm] = useState(DEFAULT_PAYMENT_TERM);\r\n const [originBranch, setOriginBranch] = useState(null);\r\n const [customer, setCustomer] = useState(null);\r\n const [invoiceItems, setInvoiceItems] = useState([]);\r\n const [shippingAddress, setShippingAddress] = useState({ name: '', addressOne: '', addressTwo: null, city: null, province: null, country: { country: 'Canada', id: '1adc086a-346b-4367-88b0-ca90e6aaaea3' } });\r\n const [shippingEqualsBilling, setShippingEqualsBilling] = useState(true);\r\n const [notes, setNotes] = useState('');\r\n const [credit, setCredit] = useState(0);\r\n const [discount, setDiscount] = useState({ amount: 0, type: DEFAULT_DISCOUNT_TYPE });\r\n const [shippingHandling, setShippingHandling] = useState(null);\r\n const [invoiceItem, setInvoiceItem] = useState(null);\r\n const [invoiceItemIndex, setInvoiceItemIndex] = useState(-1);\r\n const [shippingHandlingId, setShippingHandlingId] = useState(null);\r\n\r\n // States for autocomplete option lists\r\n const [branches, setBranches] = useState([]);\r\n const [customers, setCustomers] = useState([]);\r\n const [branch, setBranch] = useState();\r\n const [products, setProducts] = useState([]);\r\n const [services, setServices] = useState([]);\r\n const [shippingHandlingFees, setShippingHandlingFees] = useState([]);\r\n const [paymentTerms, setPaymentTerms] = useState([]);\r\n const [glCodes, setGlCodes] = useState([]);\r\n const [taxCodes, setTaxCodes] = useState([]);\r\n const [defaultSettings, setDefaultSettings] = useState(null);\r\n const [defaultEmailSettings, setDefaultEmailSettings] = useState(null);\r\n const cancelPromise = useCancelPromise();\r\n const { checkHasValueChanged, overrideInitialValue } = useHasValueChanged({\r\n invoiceName,\r\n poNumber,\r\n issueDate,\r\n paymentTerm,\r\n originBranch,\r\n customer,\r\n invoiceItems,\r\n shippingAddress,\r\n shippingEqualsBilling,\r\n notes,\r\n credit,\r\n discount,\r\n shippingHandling\r\n });\r\n\r\n useEffect(() => {\r\n if (!isReviewOnly) {\r\n fetchBranchList();\r\n fetchAllCustomers();\r\n fetchProductList();\r\n fetchServiceList();\r\n fetchShippingHandlingList();\r\n fetchPaymentTermList();\r\n fetchTaxCodeList();\r\n fetchDefaultSettings();\r\n fetchDefaultEmailSettings();\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (selectedInvoiceId) {\r\n fetchInvoiceInfo();\r\n }\r\n }, [selectedInvoiceId]);\r\n const fetchInvoiceInfo = async () => {\r\n const response = await callApi(() => getInvoiceInfo(selectedInvoiceId));\r\n if (!cancelPromise.current && response) {\r\n setInvoiceInfo(response.data?.response);\r\n const invoice = response.data.response;\r\n const items = invoice.details?.map((item) => {\r\n return {\r\n type: item.productType === '1' ? 'product' : 'service',\r\n product: item.product,\r\n price: item.unitPrice, // Temporarily using unitPrice as default. API currently does not return array of available prices.\r\n isOnSale: false,\r\n quantity: item.Quantity,\r\n taxCode: item.taxDefinition\r\n };\r\n });\r\n setInvoiceNumber(invoice.invoiceNumber);\r\n setPoNumber(invoice.poNumber);\r\n setInvoiceStatus(invoice.trnStatus);\r\n setIssueDate(new Date(invoice.invoiceDate));\r\n setPaymentTerm(invoice.paymentTerm);\r\n setOriginBranch(invoice.shippedFromBranch);\r\n setCustomer(invoice.billToBranchInfo); // This should be customer object, but isn't returned from invoice details at the moment.\r\n setBranch(invoice.billToBranchInfo);\r\n setInvoiceItems(items);\r\n setNotes(invoice.customerMessage);\r\n setCredit(invoice.appliedCredits);\r\n setDiscount({ type: invoice.discountType === '1' ? 'percentage' : 'dollar', amount: invoice.discountRate });\r\n setShippingHandling(invoice.courierDefinition);\r\n\r\n overrideInitialValue({\r\n invoiceName,\r\n poNumber,\r\n issueDate: new Date(invoice.invoiceDate),\r\n paymentTerm: invoice.paymentTerm,\r\n originBranch: invoice.shippedFromBranch,\r\n customer: invoice.billToBranchInfo,\r\n invoiceItems: items,\r\n shippingAddress,\r\n shippingEqualsBilling,\r\n notes: invoice.customerMessage,\r\n credit: invoice.appliedCredits,\r\n discount: { type: invoice.discountType === '1' ? 'percentage' : 'dollar', amount: invoice.discountRate },\r\n shippingHandling: invoice.courierDefinition\r\n });\r\n }\r\n };\r\n\r\n const fetchDefaultSettings = async () => {\r\n const response = await callApi(() => getInvoiceSettings());\r\n\r\n if (response) {\r\n setDefaultSettings(response.data?.response);\r\n }\r\n };\r\n\r\n const fetchDefaultEmailSettings = async () => {\r\n const response = await callApi(() => getInvoiceEmailSettings());\r\n\r\n if (response) {\r\n setDefaultEmailSettings(response.data?.response);\r\n }\r\n };\r\n\r\n const fetchBranchList = async () => {\r\n const branchResponse = await callApi(() => getAllUserBranches());\r\n if (!cancelPromise.current && branchResponse) {\r\n setBranches(branchResponse.data?.result);\r\n }\r\n };\r\n\r\n const fetchAllCustomers = async (customerId) => {\r\n const customersResponse = await callApi(() => getAllPartners('customer'));\r\n if (!cancelPromise.current && customersResponse) {\r\n const consolidatedList = [\r\n { id: 'add-item', customerName: 'Add Customer' },\r\n ...customersResponse.data?.result\r\n ];\r\n setCustomers(consolidatedList);\r\n if (customerId) {\r\n const newCustomer = customersResponse.data?.result.find((customer) => customer.id === customerId);\r\n if (newCustomer) {\r\n fetchBranchInfo(newCustomer.id);\r\n setCustomer({ ...newCustomer });\r\n }\r\n }\r\n }\r\n };\r\n\r\n const fetchCustomerListSearch = async (searchText) => {\r\n const customersResponse = await callApi(() => getCustomersListSearch('customer', '100', '0', searchText));\r\n if (!cancelPromise.current && customersResponse) {\r\n const consolidatedList = [\r\n { id: 'add-item', customerName: 'Add Customer' },\r\n ...customersResponse.data?.result\r\n ];\r\n setCustomers(consolidatedList);\r\n }\r\n };\r\n\r\n const debouncedfetchCustomerListSearch = useDebounce(fetchCustomerListSearch, 500);\r\n\r\n const fetchProductList = async (productId) => {\r\n const productResponse = await callApi(() => getAllProducts(PRODUCTS_CODE));\r\n if (!cancelPromise.current && productResponse) {\r\n const consolidatedList = [\r\n { id: 'add-item-product', productName: 'Add Product', displayPrices: { price: 0 } },\r\n ...productResponse.data?.result\r\n ];\r\n setProducts(consolidatedList);\r\n if (productId) {\r\n const product = productResponse.data?.result.find((product) => product.id === productId);\r\n if (product) {\r\n const newList = [...invoiceItems];\r\n newList[invoiceItemIndex]['product'] = product;\r\n if (product?.taxCode) {\r\n newList[invoiceItemIndex].taxCode = product?.taxCode;\r\n }\r\n setInvoiceItemIndex(-1);\r\n setInvoiceItems(newList);\r\n }\r\n }\r\n }\r\n };\r\n\r\n const fetchServiceList = async (productId) => {\r\n const serviceResponse = await callApi(() => getAllProducts(SERVICES_CODE));\r\n if (!cancelPromise.current && serviceResponse) {\r\n const consolidatedList = [\r\n { id: 'add-item-service', productName: 'Add Service', displayPrices: { price: 0 } },\r\n ...serviceResponse.data?.result\r\n ];\r\n setServices(consolidatedList);\r\n if (productId) {\r\n const service = serviceResponse.data?.result.find((product) => product.id === productId);\r\n if (service) {\r\n const newList = [...invoiceItems];\r\n newList[invoiceItemIndex]['product'] = service;\r\n if (service?.taxCode) {\r\n newList[invoiceItemIndex].taxCode = service?.taxCode;\r\n }\r\n setInvoiceItemIndex(-1);\r\n setInvoiceItems(newList);\r\n }\r\n }\r\n }\r\n };\r\n\r\n const fetchShippingHandlingList = async (shippingHandlingId) => {\r\n const response = await callApi(() => getAllShippingHandlingFees());\r\n if (!cancelPromise.current && response) {\r\n const consolidatedList = [\r\n { id: 'add-item', courierName: 'Add Shipping' },\r\n ...response.data?.result\r\n ];\r\n setShippingHandlingFees(consolidatedList);\r\n if (shippingHandlingId) {\r\n const shippingHandling = response.data?.result.find((shippingHandling) => shippingHandling.id === shippingHandlingId);\r\n if (shippingHandling) {\r\n setShippingHandling(shippingHandling);\r\n }\r\n }\r\n }\r\n };\r\n\r\n const fetchPaymentTermList = async (paymentTermId) => {\r\n const response = await callApi(() => getAllPaymentTerms());\r\n\r\n if (!cancelPromise.current && response) {\r\n const consolidatedList = [\r\n { id: 'add-item', termDescription: 'Add Term' },\r\n ...response.data?.result\r\n ];\r\n setPaymentTerms(consolidatedList);\r\n if (paymentTermId) {\r\n const paymentTerm = response.data?.result.find((paymentTerm) => paymentTerm.id === paymentTermId);\r\n if (paymentTerm) {\r\n setPaymentTerm(paymentTerm);\r\n }\r\n }\r\n }\r\n };\r\n\r\n const fetchTaxCodeList = async () => {\r\n const response = await callApi(() => getAllTaxCodes());\r\n if (!cancelPromise.current && response) {\r\n setTaxCodes(response.data?.result);\r\n }\r\n };\r\n\r\n const fetchBranchInfo = async (customerId) => {\r\n const response = await callApi(() => getCustomerBranch(customerId));\r\n if (!cancelPromise.current && response) {\r\n // Currently expects one branch for customer, will need refactor depending on design/api changes\r\n setBranch(response.data?.result[0]);\r\n }\r\n };\r\n\r\n const saveInvoice = async (invoiceId) => {\r\n const items = invoiceItems.map((item) => {\r\n return {\r\n Quantity: +item.quantity,\r\n // gstRate: 0,\r\n journalCaseId: '7fe03fef-c4a0-4b23-a9da-e47b2f6686a3', // TODO: Investigate what this is used for\r\n productDescription: item.product?.productDescription || '',\r\n productId: item.product?.id,\r\n productType: item.type === 'product' ? '1' : '3',\r\n taxCode: item.taxCode?.id,\r\n totalAmount: determineItemPrice(item) * item.quantity,\r\n unitPrice: determineItemPrice(item),\r\n unitTypeId: item.product?.unitTypeId\r\n };\r\n });\r\n\r\n const invoice = {\r\n appliedCredits: credit,\r\n appliedDiscount: discount.amount,\r\n balanceDue: calculateInvoiceNetTotal(invoiceItems, discount, shippingHandling) + calculateInvoiceTax(invoiceItems, discount, shippingHandling),\r\n billToAddress: `${branch.billToAddress}, ${branch.billToCity?.city}, ${branch.billToProvince?.province}, ${branch.billToCountry?.country}, ${branch.billToPostalCode}`,\r\n billToAddressId: branch.id,\r\n billToCustomerId: branch.id,\r\n billToCustomerName: customer.customerName,\r\n billToCustomerEmail: customer.email,\r\n courierId: shippingHandling?.id,\r\n customerEmail: customer.email,\r\n customerMessage: notes,\r\n cyclePeriod: null,\r\n details: items,\r\n discountTypeID: discount.type === 'percentage' ? DISCOUNTTYPE_PERCENT_ID : DISCOUNTTYPE_VALUE_ID, // Returned from calculateInvoiceDetail\r\n discountedGSTTotal: 0,\r\n discountedPSTTotal: 0,\r\n discountedTaxTotal: calculateInvoiceTax(invoiceItems, discount, shippingHandling),\r\n dueDate: calculateDueDate(issueDate, paymentTerm?.dueDate),\r\n invoiceDate: issueDate.toISOString(),\r\n invoiceType: '1',\r\n isOpen: false,\r\n isSaveAndSend: false,\r\n isSendEmail: false,\r\n openBalance: calculateInvoiceNetTotal(invoiceItems, discount, shippingHandling) + calculateInvoiceTax(invoiceItems, discount, shippingHandling) - credit,\r\n paymentTermId: paymentTerm?.id,\r\n poNumber: poNumber,\r\n shipToAddress: `${branch.billToAddress}, ${branch.billToCity?.city}, ${branch.billToProvince?.province}, ${branch.billToCountry?.country}, ${branch.billToPostalCode}`, // Defaulted to follow billing address\r\n shipToCustomerId: branch?.id,\r\n shipToCustomerName: customer.partnerName,\r\n shippedFromBranchId: originBranch.id,\r\n shippingTotal: shippingHandling?.standardFee,\r\n subTotal: calculateInvoiceNetTotal(invoiceItems, discount, shippingHandling) - credit,\r\n trnStatus: 'Created',\r\n url: __PAYMENTURL__ // Was included in the request of legacy app, although it isn't part of the invoice detail response\r\n };\r\n let response;\r\n if (invoiceId) {\r\n try {\r\n response = await updateInvoice(invoiceId, invoice);\r\n } catch (err) {\r\n return err;\r\n }\r\n }\r\n if (!invoiceId) {\r\n try {\r\n response = await createInvoice(invoice);\r\n } catch (err) {\r\n return err;\r\n }\r\n }\r\n overrideInitialValue({\r\n invoiceName,\r\n poNumber,\r\n issueDate,\r\n paymentTerm,\r\n originBranch,\r\n customer,\r\n invoiceItems,\r\n shippingAddress,\r\n shippingEqualsBilling,\r\n notes,\r\n credit,\r\n discount,\r\n shippingHandling\r\n });\r\n if (!cancelPromise.current) {\r\n return response;\r\n }\r\n };\r\n\r\n const deleteSelectedInvoice = async (invoiceId) => {\r\n try {\r\n const response = await deleteInvoice(invoiceId);\r\n if (!cancelPromise.current) {\r\n return response;\r\n }\r\n } catch (err) {\r\n if (!cancelPromise.current) {\r\n return err;\r\n }\r\n }\r\n };\r\n\r\n const sendInvoiceToCustomer = async () => {\r\n const body = {\r\n email: branch?.email,\r\n isSendEmail: true,\r\n url: __PAYMENTURL__\r\n };\r\n const response = await callApi(() => sendInvoice(selectedInvoiceId, body));\r\n if (!cancelPromise.current) {\r\n return response;\r\n }\r\n };\r\n\r\n return {\r\n isLoading,\r\n error,\r\n fetchInvoiceInfo,\r\n invoiceInfo,\r\n invoiceNumber,\r\n invoiceStatus,\r\n invoiceName,\r\n setInvoiceName,\r\n poNumber,\r\n setPoNumber,\r\n issueDate,\r\n setIssueDate,\r\n paymentTerm,\r\n setPaymentTerm,\r\n originBranch,\r\n setOriginBranch,\r\n customer,\r\n setCustomer,\r\n invoiceItems,\r\n setInvoiceItems,\r\n shippingAddress,\r\n setShippingAddress,\r\n shippingEqualsBilling,\r\n setShippingEqualsBilling,\r\n notes,\r\n setNotes,\r\n credit,\r\n setCredit,\r\n discount,\r\n setDiscount,\r\n shippingHandling,\r\n setShippingHandling,\r\n branches,\r\n customers,\r\n branch,\r\n products,\r\n services,\r\n shippingHandlingFees,\r\n paymentTerms,\r\n taxCodes,\r\n fetchBranchInfo,\r\n saveInvoice,\r\n deleteSelectedInvoice,\r\n sendInvoiceToCustomer,\r\n checkHasValueChanged,\r\n fetchPaymentTermList,\r\n fetchShippingHandlingList,\r\n fetchCustomerListSearch : debouncedfetchCustomerListSearch,\r\n defaultSettings,\r\n defaultEmailSettings,\r\n fetchAllCustomers,\r\n fetchProductList,\r\n fetchServiceList,\r\n invoiceItem,\r\n setInvoiceItem,\r\n setInvoiceItemIndex,\r\n setShippingHandlingId\r\n };\r\n}\r\n","import { useEffect, useState } from 'react';\r\nimport {\r\n createRecurringInvoice,\r\n getRecurringInvoice,\r\n updateRecurringInvoice,\r\n updateRecurringProfile\r\n} from '../../../services/webApi';\r\nimport { useApi } from '../../../services/hooks';\r\n\r\nconst useRecurringInvoice = (invoiceId, issueDate) => {\r\n const [recurringInvoice, setRecurringInvoice] = useState(null);\r\n const [isLoading, error, apiCall] = useApi();\r\n\r\n const [recurringName, setRecurringName] = useState(recurringInvoice?.recurringProfile?.recurringName || '');\r\n const [startDate, setStartDate] = useState(new Date(recurringInvoice?.recurringProfile?.startDate || Date.now()));\r\n const [occurrences, setOccurrences] = useState(recurringInvoice?.recurringProfile?.occurrences || 0);\r\n const [frequency, setFrequency] = useState({});\r\n const [isRecurring, setRecurring] = useState(!!recurringInvoice);\r\n const [sendUntilCanceled, setSendUntilCanceled] = useState(recurringInvoice?.recurringProfile?.sendUntilCanceled || false);\r\n\r\n useEffect(() => {\r\n fetchRecurringInvoice();\r\n }, []);\r\n\r\n async function fetchRecurringInvoice () {\r\n if (!invoiceId) return;\r\n\r\n const response = await apiCall(() => getRecurringInvoice(invoiceId));\r\n\r\n if (response?.status === 200) {\r\n if (response?.data?.response) {\r\n setRecurringInvoice({\r\n ...response?.data?.response,\r\n recurringProfile: {\r\n ...response?.data?.response?.recurringProfile,\r\n startDate: new Date(response?.data?.response.recurringProfile?.startDate)\r\n }\r\n });\r\n setRecurring(true);\r\n setRecurringName(response?.data?.response.recurringProfile?.recurringName);\r\n setStartDate(new Date(response?.data?.response.recurringProfile?.startDate));\r\n setFrequency({\r\n id: response?.data?.response.recurringProfile?.frequencyId,\r\n parameterValue: response?.data?.response.recurringProfile?.frequencyName\r\n });\r\n setSendUntilCanceled(response?.data?.response.recurringProfile?.sendUntilCanceled);\r\n setOccurrences(response?.data?.response.recurringProfile?.occurrences);\r\n }\r\n }\r\n }\r\n\r\n function validateRecurringProfile () {\r\n if (isRecurring) {\r\n const isRecurringNameValid = recurringName && recurringName.length >= 3 && recurringName.length <= 50;\r\n\r\n issueDate.setHours(0, 0, 0, 0);\r\n\r\n const isStartDateValid = startDate && (startDate.getTime && issueDate.getTime && startDate.getTime() >= issueDate?.getTime());\r\n\r\n return isRecurringNameValid && isStartDateValid && occurrences && frequency;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n async function saveRecurringInvoice (invoiceId) {\r\n if (!isRecurring) return;\r\n\r\n const recurringProfileDto = {\r\n id: recurringInvoice?.recurringProfile?.id,\r\n recurringName,\r\n startDate,\r\n frequencyId: frequency.id,\r\n occurrences,\r\n sendUntilCanceled,\r\n invoiceId\r\n };\r\n\r\n if (recurringInvoice) {\r\n const response = await apiCall(() => updateRecurringProfile({\r\n ...recurringProfileDto\r\n }));\r\n\r\n if (response?.data?.responseId) {\r\n setRecurringInvoice({\r\n ...recurringInvoice,\r\n recurringProfile: {\r\n ...recurringProfileDto,\r\n frequencyName: frequency.parameterDesc,\r\n frequency: {\r\n ...frequency\r\n }\r\n }\r\n });\r\n }\r\n } else {\r\n const response = await apiCall(() => createRecurringInvoice(recurringProfileDto));\r\n\r\n if (response?.data?.responseId) {\r\n setRecurringInvoice({\r\n ...recurringInvoice,\r\n recurringProfile: {\r\n ...recurringProfileDto,\r\n id: response?.data?.recurringProfile?.id,\r\n frequencyName: frequency.parameterDesc,\r\n frequency: {\r\n ...frequency\r\n }\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n async function cancelRecurringInvoice() {\r\n const updateRecurringInvoiceDto = {\r\n ...recurringInvoice,\r\n isCanceled: true\r\n };\r\n\r\n const response = await apiCall(() => updateRecurringInvoice(updateRecurringInvoiceDto));\r\n\r\n if (response?.status === 200) {\r\n setRecurringInvoice({ ...updateRecurringInvoiceDto });\r\n return true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n async function resumePauseInvoice() {\r\n const updateRecurringInvoiceDto = {\r\n ...recurringInvoice,\r\n isPaused: !recurringInvoice?.isPaused\r\n };\r\n\r\n const response = await apiCall(() => updateRecurringInvoice(updateRecurringInvoiceDto));\r\n\r\n if (response?.status === 200) {\r\n setRecurringInvoice({ ...updateRecurringInvoiceDto });\r\n }\r\n }\r\n\r\n return {\r\n recurringInvoice,\r\n setRecurringInvoice,\r\n recurringName,\r\n setRecurringName,\r\n startDate,\r\n setStartDate,\r\n occurrences,\r\n setOccurrences,\r\n frequency,\r\n setFrequency,\r\n isRecurring,\r\n setRecurring,\r\n sendUntilCanceled,\r\n setSendUntilCanceled,\r\n validateRecurringProfile,\r\n saveRecurringInvoice,\r\n error,\r\n cancelRecurringInvoice,\r\n resumePauseInvoice\r\n };\r\n};\r\n\r\nexport default useRecurringInvoice;\r\n","import Invoices from './Invoices';\r\n\r\nexport default Invoices;\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./invoices.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./invoices.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./invoices.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useEffect, useState } from 'react';\r\nimport { Divider } from '@mui/material';\r\nimport './styles/invoicesAndBillsSettings.scss';\r\nimport Parameter from './components/Parameter';\r\nimport SettingsSection from './components/SettingsSection';\r\nimport TwoColumnLayout from './components/TwoColumnLayout';\r\nimport ImageInfo from './components/ImageInfo';\r\nimport UploadImage from './components/LoadImage';\r\nimport AutoComplete from '../common/AutoComplete';\r\nimport EditButton from '../common/EditButton';\r\nimport TextField from '../common/TextField';\r\nimport ManageTermsContainer from './components/ManageTermsContainer';\r\nimport ManageShippingRateContainer from './components/ManageShippingRateContainer';\r\nimport { useApi } from '../../services/hooks';\r\nimport {\r\n createOrUpdateInvoiceEmailSettingsPreferences,\r\n createOrUpdateInvoiceSettingsPreferences, createPaymentTerm, createShippingFeeRate,\r\n getAllPaymentTerms,\r\n getAllShippingHandlingFees,\r\n getInvoiceEmailSettings,\r\n getInvoiceSettings, updatePaymentTerm, updateShippingRate\r\n} from '../../services/webApi';\r\nimport { validateEmail } from '../../services/email';\r\n\r\nexport default function InvoicesAndBillsSettings () {\r\n const [isEditInvoicePreferences, setEditInvoicePreferences] = useState(false);\r\n const [isEditShippingPreferences, setEditShippingPreferences] = useState(false);\r\n const [isEditEmailPreferences, setEditEmailPreferences] = useState(false);\r\n const [isManageTerms, setManageTerms] = useState(false);\r\n const [isManageShippingRate, setManageShippingRate] = useState(false);\r\n\r\n const [isLoading, error, callApi] = useApi();\r\n const [terms, setTerms] = useState([]);\r\n const [shippingRates, setShippingRates] = useState([]);\r\n const [invoiceSettings, setInvoiceSettings] = useState(null);\r\n const [invoiceEmailSettings, setInvoiceEmailSettings] = useState(null);\r\n const [defaultShippingRate, setDefaultShippingRate] = useState(undefined);\r\n const [cachedInvoiceSettings, setCachedInvoiceSettings] = useState(null);\r\n const [cachedInvoiceEmailSettings, setCachedInvoiceEmailSettings] = useState(null);\r\n const [cachedDefaultShippingRate, setCachedDefaultShippingRate] = useState(null);\r\n\r\n useEffect(() => {\r\n fetchTerms();\r\n fetchShippingRates();\r\n fetchInvoiceSettings();\r\n fetchInvoiceEmailSettings();\r\n }, []);\r\n\r\n const fetchTerms = async () => {\r\n const response = await callApi(() => getAllPaymentTerms());\r\n\r\n if (response?.data?.result) {\r\n setTerms(response.data.result);\r\n }\r\n };\r\n\r\n const fetchInvoiceSettings = async () => {\r\n const response = await callApi(() => getInvoiceSettings());\r\n if (response?.data?.response) {\r\n setInvoiceSettings(response.data.response);\r\n setCachedInvoiceSettings(response.data.response);\r\n }\r\n };\r\n\r\n const fetchInvoiceEmailSettings = async () => {\r\n const response = await callApi(() => getInvoiceEmailSettings());\r\n\r\n if (response?.data?.response) {\r\n setInvoiceEmailSettings(response.data.response);\r\n setCachedInvoiceEmailSettings(response.data.response);\r\n }\r\n };\r\n\r\n const fetchShippingRates = async () => {\r\n const response = await callApi(() => getAllShippingHandlingFees());\r\n\r\n if (response?.data?.result) {\r\n setShippingRates(response.data.result);\r\n setDefaultShippingRate(response.data.result.find(sR => sR.isDefault));\r\n setCachedDefaultShippingRate(response.data.result.find(sR => sR.isDefault));\r\n }\r\n };\r\n\r\n const saveInvoiceSettingsPreferences = async () => {\r\n const dto = {\r\n imageUrl: invoiceSettings?.imageUrl,\r\n termId: invoiceSettings?.term?.id,\r\n note: invoiceSettings?.note\r\n };\r\n\r\n const response = await callApi(() => createOrUpdateInvoiceSettingsPreferences(dto));\r\n\r\n if (response?.status === 200) {\r\n setEditInvoicePreferences(false);\r\n setCachedInvoiceSettings({ ...cachedInvoiceSettings, ...dto });\r\n }\r\n };\r\n\r\n const saveEmailSettings = async () => {\r\n const response = await callApi(() => createOrUpdateInvoiceEmailSettingsPreferences(invoiceEmailSettings));\r\n\r\n if (response?.status === 200) {\r\n setEditEmailPreferences(false);\r\n setCachedInvoiceEmailSettings({ ...cachedInvoiceEmailSettings, ...invoiceEmailSettings });\r\n }\r\n };\r\n\r\n const saveDefaultShippingRate = async () => {\r\n if (cachedDefaultShippingRate) {\r\n const response = await callApi(() => updateShippingRate({ ...cachedDefaultShippingRate, isDefault: false }));\r\n\r\n if (response?.status !== 200) {\r\n return;\r\n }\r\n }\r\n\r\n if (!defaultShippingRate || Object.keys(defaultShippingRate).length === 0) {\r\n setEditShippingPreferences(false);\r\n return;\r\n }\r\n\r\n const dto = {\r\n ...defaultShippingRate,\r\n isDefault: true\r\n };\r\n\r\n const response = await callApi(() => updateShippingRate(dto));\r\n\r\n if (response?.status === 200) {\r\n setEditShippingPreferences(false);\r\n setCachedDefaultShippingRate({ ...cachedDefaultShippingRate, ...dto });\r\n }\r\n };\r\n\r\n function getShippingRateDetailsComponent() {\r\n return \r\n {\r\n setEditInvoicePreferences(!isEditInvoicePreferences);\r\n }}\r\n onSave={saveInvoiceSettingsPreferences}\r\n onDiscard={() => {\r\n setInvoiceSettings({ ...cachedInvoiceSettings });\r\n setEditInvoicePreferences(!isEditInvoicePreferences);\r\n }}\r\n isEditMode={isEditInvoicePreferences}\r\n >\r\n {!isEditInvoicePreferences\r\n ? \r\n {\r\n const newInvoiceSettings = invoiceSettings ? { ...invoiceSettings, note } : { note };\r\n setInvoiceSettings(newInvoiceSettings);\r\n }} />\r\n \r\n ]}\r\n columnTwo={[\r\n \r\n {\r\n const newInvoiceSettings = invoiceSettings ? { ...invoiceSettings, term } : { ...term };\r\n setInvoiceSettings(newInvoiceSettings);\r\n }} />\r\n setManageTerms(true)} label='Manage Terms' />\r\n } />\r\n ]} />}\r\n \r\n {\r\n setEditShippingPreferences(!isEditShippingPreferences);\r\n }}\r\n onSave={saveDefaultShippingRate}\r\n onDiscard={() => {\r\n setDefaultShippingRate({ ...cachedDefaultShippingRate });\r\n setEditShippingPreferences(!isEditShippingPreferences);\r\n }}\r\n isEditMode={isEditShippingPreferences}\r\n >\r\n {!isEditShippingPreferences\r\n ? 0}\r\n columnOne={[\r\n \r\n { setDefaultShippingRate({ ...shippingRate }) }} />\r\n setManageShippingRate(true)} label='Manage Rates' />\r\n } />\r\n ]}\r\n columnTwo={[\r\n {\r\n setEditEmailPreferences(!isEditEmailPreferences);\r\n }}\r\n onSave={saveEmailSettings}\r\n onDiscard={() => {\r\n setInvoiceEmailSettings({ ...cachedInvoiceEmailSettings });\r\n setEditEmailPreferences(!isEditEmailPreferences);\r\n }}\r\n isEditMode={isEditEmailPreferences}>\r\n {!isEditEmailPreferences\r\n ? 0}\r\n columnOne={[\r\n {\r\n const newEmailSettings = invoiceEmailSettings ? { ...invoiceEmailSettings, email } : { email };\r\n setInvoiceEmailSettings(newEmailSettings);\r\n }}\r\n />} />\r\n ]}\r\n columnTwo={[\r\n {\r\n const newEmailSettings = invoiceEmailSettings ? { ...invoiceEmailSettings, message } : { message };\r\n setInvoiceEmailSettings(newEmailSettings);\r\n }} />} />\r\n ]} />}\r\n \r\n {isManageTerms && setManageTerms(false)} />}\r\n {isManageShippingRate && setManageShippingRate(false)} />}\r\n
\r\n );\r\n}\r\n","import React from 'react';\r\nimport { Divider } from '@mui/material';\r\nimport './styles/drawerManager.scss';\r\nimport PropTypes from 'prop-types';\r\nimport Drawer from '../../../common/Drawer';\r\n\r\nexport default function DrawerManager({\r\n close,\r\n children,\r\n buttons,\r\n title,\r\n onPreviousPage\r\n}) {\r\n return (\r\n \r\n Invoices\r\n
\r\n \r\n
\r\n \r\n {title}\r\n
\r\n \r\n
\r\n \r\n {buttons}\r\n
\r\n \r\n \r\n \r\n
\r\n { items.length === 0 &&\r\n \r\n
\r\n );\r\n}\r\n\r\nDrawerTable.propTypes = {\r\n items: PropTypes.array,\r\n selectView: PropTypes.func,\r\n selectEdit: PropTypes.func,\r\n field: PropTypes.string\r\n};\r\n","import DrawerTable from './DrawerTable';\r\n\r\nexport default DrawerTable;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./drawerTable.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./drawerTable.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./drawerTable.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport ImageLogo from '../../../../assets/icons/imageInfo.svg';\r\nimport './styles/imageInfo.scss';\r\n\r\nexport default function ImageInfo ({ title, date, name }) {\r\n return \r\n 
\r\n
\r\n \r\n
\r\n {title}
\r\n {date} - {name}
\r\n Max image size is XXX by XXX.
\r\n \r\n
\r\n );\r\n}\r\n\r\n;\r\n","import UploadImage from './UploadImage';\r\n\r\nexport default UploadImage;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./loadImage.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./loadImage.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./loadImage.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useCallback, useRef, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport DrawerManager from '../DrawerManager';\r\nimport DrawerTable from '../DrawerTable';\r\nimport Button from '../../../common/Button';\r\nimport AddIcon from '@mui/icons-material/Add';\r\nimport ShippingRateForm from './ShippingRateForm';\r\nimport ShippingRateInfo from './ShippingRateInfo';\r\nimport {\r\n createPaymentTerm,\r\n createShippingFeeRate,\r\n updatePaymentTerm,\r\n updateShippingRate\r\n} from '../../../../services/webApi';\r\nimport { useApi } from '../../../../services/hooks';\r\n\r\nconst list = 'Shipping Rates';\r\nconst edit = 'Edit Shipping Rate';\r\nconst create = 'Create Shipping Rate';\r\nconst view = 'Shipping Rate';\r\n\r\nfunction ManageShippingRateContainer ({ items, close, refetchList }) {\r\n const [page, setPage] = useState(list);\r\n const [selectedIndex, setSelectedIndex] = useState(null);\r\n const formRef = useRef();\r\n const [isLoading, error, callApi] = useApi();\r\n\r\n const createShippingRate = async () => {\r\n const rate = {\r\n ...formRef?.current?.getState()\r\n };\r\n\r\n const response = await callApi(() => createShippingFeeRate(rate));\r\n\r\n if (response?.status === 200) {\r\n await refetchList();\r\n setPage(list);\r\n }\r\n };\r\n\r\n const updateShippingFeeRate = async (isArchived) => {\r\n const rate = {\r\n ...formRef?.current?.getState(),\r\n isArchived\r\n };\r\n\r\n const response = await callApi(() => updateShippingRate(rate));\r\n\r\n if (response?.status === 200) {\r\n await refetchList();\r\n setPage(list);\r\n }\r\n };\r\n\r\n const getButtons = useCallback(() => {\r\n switch (page) {\r\n case list:\r\n return \r\n 
\r\n Upload Logo\r\n
\r\n Shipping Rate Details
\r\n \r\n edit(e, shippingRate)} label='Edit Rate' />\r\n
\r\n Shipping Rate Details
\r\n Invoice Term Details
\r\n \r\n edit(e, term)} label='Edit Term' />\r\n
\r\n Invoice Term Details
\r\n \r\n
;\r\n}\r\n\r\nParameter.propTypes = {\r\n title: PropTypes.string,\r\n value: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.number,\r\n PropTypes.node\r\n ]),\r\n children: PropTypes.node\r\n};\r\n","import Parameter from './Parameter';\r\n\r\nexport default Parameter;\r\n","import React from 'react';\r\nimport Button from '../../../common/Button';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport { Divider } from '@mui/material';\r\nimport '../../styles/invoicesAndBillsSettings.scss';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport default function SettingsSection ({ title, onClick, onSave, onDiscard, isEditMode, children }) {\r\n return {title}
\r\n {validatedValue || '-'}{children}
\r\n \r\n
;\r\n}\r\n\r\nSettingsSection.propTypes = {\r\n title: PropTypes.string,\r\n onClick: PropTypes.func,\r\n onSave: PropTypes.func,\r\n onDiscard: PropTypes.func,\r\n isEditMode: PropTypes.bool,\r\n children: PropTypes.oneOfType([\r\n PropTypes.arrayOf(PropTypes.node),\r\n PropTypes.node\r\n ])\r\n};\r\n","import SettingsSection from './SettingsSection';\r\n\r\nexport default SettingsSection;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport default function TwoColumnLayout ({ columnOne, columnTwo, visible = true }) {\r\n if (!visible) return <>;\r\n\r\n return \r\n
\r\n {children}\r\n {isEditMode && {title}
\r\n {!isEditMode && } variant=\"outlined\" onClick={onClick}>Edit}\r\n \r\n \r\n \r\n
}\r\n \r\n
;\r\n}\r\n\r\nTwoColumnLayout.propTypes = {\r\n visible: PropTypes.bool,\r\n columnOne: PropTypes.arrayOf(PropTypes.node),\r\n columnTwo: PropTypes.arrayOf(PropTypes.node)\r\n};\r\n","import TwoColumnLayout from './TwoColumnLayout';\r\n\r\nexport default TwoColumnLayout;\r\n","import InvoicesAndBillsSettings from './InvoicesAndBillsSettings';\r\n\r\nexport default InvoicesAndBillsSettings;\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./invoicesAndBillsSettings.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./invoicesAndBillsSettings.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./invoicesAndBillsSettings.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Header from 'components/CoreLayout/components/Header';\r\nimport Navigation from 'components/CoreLayout/components/Navigation';\r\nimport LoadingSpinner from 'components/common/LoadingSpinner';\r\nimport breakpoints from 'styles/materialTheme/breakpoints';\r\nimport { isOnUnauthenticatedRoute } from 'services/route';\r\nimport './styles/main.scss';\r\n\r\nexport default function Main({ children, location, isLoading, setIsLoading, logout }) {\r\n const [isNavOpen, setIsNavOpen] = useState(false);\r\n const [isMobile, setIsMobile] = useState(false);\r\n\r\n const handleNavOpen = () => {\r\n setIsNavOpen(true);\r\n };\r\n\r\n const handleNavClose = () => {\r\n setIsNavOpen(false);\r\n };\r\n\r\n const handleResize = () => {\r\n const bodyFontSize = parseInt(window.getComputedStyle(document.body).fontSize);\r\n const currentSize = window.innerWidth / bodyFontSize;\r\n const breakpoint = breakpoints.values['25'];\r\n\r\n if (currentSize <= breakpoint && !isMobile) {\r\n return setIsMobile(true);\r\n }\r\n\r\n if (currentSize > breakpoint && isMobile) {\r\n return setIsMobile(false);\r\n }\r\n };\r\n\r\n useEffect(handleResize, []);\r\n\r\n useEffect(() => {\r\n if (window) {\r\n window.addEventListener('resize', handleResize);\r\n return () => window.removeEventListener('resize', handleResize);\r\n }\r\n }, [handleResize]);\r\n\r\n return (\r\n \r\n {columnOne.map(i => i)}\r\n
\r\n \r\n {columnTwo.map(i => i)}\r\n
\r\n \r\n {!isLoading && isMobile && logout()}\r\n isNavOpen={isNavOpen}\r\n openNav={() => handleNavOpen()}\r\n closeNav={() => handleNavClose()}\r\n />}\r\n
\r\n );\r\n}\r\n\r\nMain.propTypes = {\r\n children: PropTypes.node,\r\n location: PropTypes.object,\r\n isLoading: PropTypes.bool,\r\n setIsLoading: PropTypes.func,\r\n logout: PropTypes.func\r\n};\r\n","import { connect } from 'react-redux';\r\nimport Main from './Main';\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Main);\r\n","import MainContainer from './MainContainer';\r\n\r\nexport default MainContainer;\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./main.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./main.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./main.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Drawer from 'components/common/Drawer';\r\nimport Button from 'components/common/Button';\r\nimport { Avatar, ButtonBase, Card as MUICard, CardActions, CardContent, CardHeader, CardMedia, Divider, LinearProgress, InputAdornment } from '@mui/material';\r\nimport { activateCard, approveRequestedCard, deactivateCard, deleteCard, denyRequestedCard, lockCard, parseErrorMessage, changeActiveCardPin, topUpCard, unlockCard } from 'services/webApi';\r\nimport VisibilityIcon from '@mui/icons-material/Visibility';\r\nimport VisibilityOffIcon from '@mui/icons-material/VisibilityOff';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport tempImage from 'components/auth/AuthCardContainer/assets/fuse_auth.png';\r\nimport CardForm from 'components/CardForm/CardForm';\r\nimport './styles/manageCard.scss';\r\nimport TextField from 'components/common/TextField';\r\nimport TopUpCard from 'components/ManageCard/components/TopUpCard';\r\n\r\nexport default function ManageCard({\r\n open,\r\n onClose,\r\n openAlert,\r\n role = 'admin',\r\n status = 'locked',\r\n user,\r\n editCardStatus,\r\n deleteSelectedCard,\r\n updateToppedUpCard,\r\n openCreateCard,\r\n cardInfo = {\r\n isVirtual: true,\r\n pinNumber: '1212 3434 5656 7878',\r\n cvv: '369',\r\n cardUser: 'Jim Halpert',\r\n cardNickname: 'Sales Team',\r\n cardLimit: 6000,\r\n transactionLimit: 500,\r\n cardType: 'recurring',\r\n recurringFrequency: 'monthly',\r\n cardLockDate: null,\r\n requireReceipts: false,\r\n missingReceipts: 5,\r\n glCode: '555',\r\n taxCode: '5%',\r\n cardBalance: 2400,\r\n tags: ['Tag A', 'Tag B', 'Tag C']\r\n }\r\n}) {\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [viewEdit, setViewEdit] = useState(null);\r\n const [viewActivate, setViewActivate] = useState(false);\r\n const [viewChangePin, setViewChangePin] = useState(false);\r\n const [viewTopUp, setViewTopUp] = useState(false);\r\n const [reviewTopUp, setReviewTopUp] = useState(false);\r\n const [viewCompleteTopUp, setViewCompleteTopUp] = useState(false);\r\n const [cardInfoVisible, setCardInfoVisible] = useState(false);\r\n const [error, setError] = useState();\r\n const locale = 'en-US'; // Temporary locale setting\r\n\r\n const [cardUser, setCardUser] = useState(cardInfo && cardInfo.cardUser || '');\r\n const [cardNickname, setCardNickname] = useState(cardInfo && cardInfo.cardNickname || '');\r\n const [cardIsVirtual, setCardIsVirtual] = useState(cardInfo && cardInfo.isVirtual || false);\r\n const [cardLimit, setCardLimit] = useState(cardInfo && cardInfo.cardLimit || 2000);\r\n const [cardBalance, setCardBalance] = useState(cardInfo && cardInfo.cardBalance || 5000);\r\n const [transactionLimit, setTransactionLimit] = useState(cardInfo && cardInfo.transactionLimit || 200);\r\n const [cardType, setCardType] = useState(cardInfo && cardInfo.cardType || 'recurring');\r\n const [cardLockDate, setCardLockDate] = useState(cardInfo && cardInfo.cardLockDate);\r\n const [recurringFrequency, setRecurringFrequency] = useState(cardInfo && cardInfo.recurringFrequency || 'weekly');\r\n const [requireReceipts, setRequireReceipts] = useState(cardInfo && cardInfo.requireReceipts || false);\r\n const [missingReceipts, setMissingReceipts] = useState(cardInfo && cardInfo.missingReceipts || 5);\r\n const [glCode, setGlCode] = useState(cardInfo && cardInfo.glCode || '');\r\n const [taxCode, setTaxCode] = useState(cardInfo && cardInfo.taxCode || '');\r\n const [tags, setTags] = useState(cardInfo && cardInfo.tags || []);\r\n const [activatePin, setActivatePin] = useState('');\r\n const [currentPin, setCurrentPin] = useState('');\r\n const [currentPinError, setCurrentPinError] = useState(null);\r\n const [newPin, setNewPin] = useState('');\r\n const [newPinError, setNewPinError] = useState(null);\r\n const [reEnteredNewPin, setReEnteredNewPin] = useState('');\r\n const [reEnteredNewPinError, setReEnteredNewPinError] = useState(null);\r\n const [accountBalance, setAccountBalance] = useState(10000); // Temporary account balance\r\n const [topUpAmount, setTopUpAmount] = useState(0);\r\n\r\n const allowNumbersOnly = val => val.toString().replace(/[^0-9]/g, '');\r\n\r\n useEffect(() => {\r\n setCardUser(cardInfo.cardUser);\r\n setCardNickname(cardInfo.cardNickname);\r\n setCardIsVirtual(cardInfo.isVirtual);\r\n setCardLimit(cardInfo.cardLimit);\r\n setCardBalance(cardInfo.cardBalance);\r\n setTransactionLimit(cardInfo.transactionLimit);\r\n setCardType(cardInfo.cardType);\r\n setCardLockDate(cardInfo.cardLockDate);\r\n setRecurringFrequency(cardInfo.recurringFrequency);\r\n setRequireReceipts(cardInfo.requireReceipts);\r\n setMissingReceipts(cardInfo.missingReceipts);\r\n setGlCode(cardInfo.glCode);\r\n setTaxCode(cardInfo.taxCode);\r\n setTags(cardInfo.setTags);\r\n setError(null);\r\n }, [cardInfo]);\r\n\r\n const handlePrevious = () => {\r\n setViewEdit(null);\r\n setViewActivate(null);\r\n setViewChangePin(null);\r\n resetPinChange();\r\n resetPinChangeErrors();\r\n if (reviewTopUp) {\r\n setReviewTopUp(false);\r\n setError();\r\n } else {\r\n setViewTopUp(false);\r\n }\r\n };\r\n\r\n const handleApproveCard = async () => {\r\n setError(null);\r\n setIsLoading(true);\r\n try {\r\n const response = await approveRequestedCard(cardInfo);\r\n setIsLoading(false);\r\n editCardStatus('active');\r\n closePanel();\r\n openAlert({ type: 'success', message: 'Successfully approved card' });\r\n } catch (err) {\r\n setIsLoading(false);\r\n setError(err);\r\n }\r\n };\r\n\r\n const handleDenyCard = async () => {\r\n setError(null);\r\n setIsLoading(true);\r\n try {\r\n const response = await denyRequestedCard(cardInfo);\r\n setIsLoading(false);\r\n editCardStatus('denied');\r\n closePanel();\r\n openAlert({ type: 'success', message: 'Successfully denied card' });\r\n } catch (err) {\r\n setIsLoading(false);\r\n setError(err);\r\n }\r\n };\r\n\r\n const handleActivateCard = async () => {\r\n setError(null);\r\n setIsLoading(true);\r\n try {\r\n const response = await activateCard(cardInfo, activatePin);\r\n setIsLoading(false);\r\n editCardStatus('active');\r\n openAlert({ type: 'success', message: 'Successfully activated card' });\r\n closePanel();\r\n } catch (err) {\r\n setIsLoading(false);\r\n setError(err);\r\n }\r\n };\r\n\r\n const resetPinChange = () => {\r\n setCurrentPin('');\r\n setNewPin('');\r\n setReEnteredNewPin('');\r\n };\r\n\r\n const resetPinChangeErrors = () => {\r\n setCurrentPinError(null);\r\n setNewPinError(null);\r\n setReEnteredNewPinError(null);\r\n };\r\n\r\n const changeCardPin = async () => {\r\n resetPinChangeErrors();\r\n if (newPin === currentPin) {\r\n setNewPinError('PIN cannot match your previous PIN');\r\n resetPinChange();\r\n return;\r\n }\r\n if (newPin !== reEnteredNewPin) {\r\n setReEnteredNewPinError('PIN does not match');\r\n resetPinChange();\r\n return;\r\n }\r\n setError(null);\r\n setIsLoading(true);\r\n try {\r\n const response = await changeActiveCardPin(cardInfo, currentPin);\r\n setIsLoading(false);\r\n setViewChangePin(false);\r\n openAlert('successfully changed pin!');\r\n closePanel();\r\n } catch (err) {\r\n setIsLoading(false);\r\n setCurrentPinError(err.error.message);\r\n }\r\n resetPinChange();\r\n };\r\n\r\n const handleDeactivateCard = async () => {\r\n setError(null);\r\n setIsLoading(true);\r\n try {\r\n const response = await deactivateCard(cardInfo, user);\r\n setIsLoading(false);\r\n editCardStatus('deactivated');\r\n closePanel();\r\n openAlert({ type: 'success', message: 'Successfully deactivated card' });\r\n } catch (err) {\r\n setIsLoading(false);\r\n setError(err);\r\n }\r\n };\r\n\r\n const handleLockCard = async () => {\r\n setError(null);\r\n setIsLoading(true);\r\n try {\r\n const response = await lockCard(cardInfo, user);\r\n setIsLoading(false);\r\n editCardStatus('locked');\r\n closePanel();\r\n openAlert({ type: 'success', message: 'Successfully locked card' });\r\n } catch (err) {\r\n setError(err);\r\n }\r\n };\r\n\r\n const handleUnlockCard = async () => {\r\n setError(null);\r\n setIsLoading(true);\r\n try {\r\n const response = await unlockCard(cardInfo, user);\r\n setIsLoading(false);\r\n editCardStatus('active');\r\n closePanel();\r\n openAlert({ type: 'success', message: 'Successfully unlocked card' });\r\n } catch (err) {\r\n setError(err);\r\n }\r\n };\r\n\r\n const handleDeleteCard = async () => {\r\n setError(null);\r\n setIsLoading(true);\r\n try {\r\n const response = await deleteCard(cardInfo, user);\r\n deleteSelectedCard();\r\n closePanel();\r\n } catch (err) {\r\n setError(err.message);\r\n }\r\n setIsLoading();\r\n };\r\n\r\n const openReviewTopUpPanel = () => {\r\n setReviewTopUp(true);\r\n if (accountBalance < topUpAmount) {\r\n setError('You have insufficient balance in your Fuse Account');\r\n }\r\n };\r\n\r\n const topUpSelectedCard = async () => {\r\n setError(null);\r\n setIsLoading(true);\r\n try {\r\n const response = await topUpCard(cardInfo, user);\r\n setAccountBalance(accountBalance - topUpAmount);\r\n setCardBalance(cardBalance + topUpAmount);\r\n updateToppedUpCard(cardBalance + topUpAmount);\r\n setViewCompleteTopUp(true);\r\n } catch (err) {\r\n setError(err.message);\r\n }\r\n setIsLoading();\r\n };\r\n\r\n const openCreateCardPanel = () => {\r\n closePanel();\r\n openCreateCard();\r\n };\r\n\r\n const closePanel = () => {\r\n setViewEdit(false);\r\n setViewActivate(false);\r\n setViewChangePin(false);\r\n setCardInfoVisible(false);\r\n setViewTopUp(false);\r\n setReviewTopUp(false);\r\n setViewCompleteTopUp(false);\r\n setActivatePin('');\r\n resetPinChange();\r\n resetPinChangeErrors();\r\n setTopUpAmount(0);\r\n setError(null);\r\n onClose();\r\n };\r\n\r\n // Temporary Lookup, can be refactored to use global library\r\n const recurringFrequencyLookup = {\r\n daily: 'Daily',\r\n weekly: 'Weekly',\r\n monthly: 'Monthly',\r\n annually: 'Annually'\r\n };\r\n\r\n return (\r\n \r\n {!isLoading && !isOnUnauthenticatedRoute(location.pathname) && (\r\n handleNavClose()}\r\n location={location}\r\n isMobile={isMobile}\r\n logout={logout}\r\n ModalProps={{\r\n keepMounted: true\r\n }} />\r\n )}\r\n {children}\r\n
\r\n \r\n {viewActivate && !viewTopUp && \r\n }\r\n {viewChangePin && \r\n }\r\n {(!viewChangePin && !viewTopUp) &&\r\n
\r\n\r\n \r\n Activate Card\r\n
\r\n \r\n You're almost there! To activate your card, enter the last four digits of your card number.\r\n
\r\n \r\n Manage PIN\r\n
\r\n \r\n Create a new 4-digit PIN for your card. It cannot be the same as your pervious PIN. Do not share your PIN with anyone.\r\n
\r\n \r\n \r\n \r\n V\r\n \r\n }\r\n title={cardUser}\r\n subheader={status}\r\n />\r\n \r\n }\r\n {status !== 'requested' && status !== 'denied' && !viewActivate &&\r\n \r\n {status === 'inactive'\r\n ? \r\n setViewActivate(true)}>\r\n Activate\r\n \r\n \r\n : \r\n {cardInfo && !cardIsVirtual && status === 'active' && setViewChangePin(true)}\r\n variant='outlined'\r\n >Manage PIN\r\n }\r\n setCardInfoVisible(!cardInfoVisible)}\r\n disabled={status === 'deactivated' || status === 'locked'}\r\n startIcon={cardInfoVisible ? }\r\n\r\n }\r\n \r\n
\r\n }\r\n {!viewEdit && !viewActivate && !viewChangePin && !viewTopUp &&\r\n \r\n {cardInfoVisible ? cardInfo.pinNumber : '**** **** **** 7878'}\r\n
\r\n \r\n
\r\n 05/22
\r\n CVV {cardInfoVisible ? cardInfo.cvv : '***'}
\r\n \r\n
}\r\n\r\n {viewActivate && }\r\n\r\n {viewChangePin && }\r\n {viewEdit && }\r\n {viewTopUp &&\r\n \r\n {cardNickname}\r\n setViewEdit(true)}\r\n disabled={status !== 'active' && status !== 'requested'}\r\n variant='text'>\r\n
\r\n \r\n setViewTopUp(true)}\r\n variant='outlined'>\r\n Top-up\r\n \r\n }\r\n
\r\n \r\n
\r\n {`$${cardInfo.cardBalance}`}
\r\n {`$${cardLimit}`}
\r\n \r\n
\r\n {cardInfo && cardInfo.virtual && status === 'active' &&\r\n Balance
\r\n Limit
\r\n \r\n
\r\n Deny transactions larger than
\r\n {cardInfo.transactionLimit}
\r\n Usability
\r\n \r\n
\r\n Recurs
\r\n {recurringFrequencyLookup[recurringFrequency]}
\r\n \r\n
\r\n Auto-Lock at midnight on
\r\n test date
\r\n Expense Submission
\r\n \r\n
\r\n Receipts are
\r\n {requireReceipts ? 'Required' : 'Not Required'}
\r\n \r\n
\r\n Card will LOCK if
\r\n {missingReceipts} Receipts Missing
\r\n \r\n
\r\n All transactions are GL Code
\r\n {glCode}
\r\n \r\n
\r\n\r\n All transactions are Tax Code
\r\n {taxCode}
\r\n \r\n {error && !isLoading &&
\r\n \r\n );\r\n}\r\n\r\nManageCard.propTypes = {\r\n open: PropTypes.bool,\r\n onClose: PropTypes.func,\r\n openAlert: PropTypes.func,\r\n role: PropTypes.oneOf(['admin', 'manager', 'employee']),\r\n status: PropTypes.oneOf(['requested', 'inactive', 'active', 'locked', 'deactivated', 'denied']),\r\n cardInfo: PropTypes.object,\r\n user: PropTypes.object,\r\n editCardStatus: PropTypes.func,\r\n deleteSelectedCard: PropTypes.func,\r\n updateToppedUpCard: PropTypes.func,\r\n openCreateCard: PropTypes.func\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Card as MUICard, Divider, InputAdornment } from '@mui/material';\r\nimport './styles/topUpCard.scss';\r\nimport TextField from 'components/common/TextField';\r\n\r\nexport default function TopUpCard({ viewTopUp, cardInfo, reviewTopUp, viewCompleteTopUp, accountBalance,\r\n topUpAmount, setTopUpAmount, cardBalance, error }) {\r\n const formattedDate = new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });\r\n return (\r\n \r\n {parseErrorMessage(error, locale)}\r\n
}\r\n \r\n {!viewCompleteTopUp &&\r\n \r\n }\r\n {!viewEdit && status === 'active' && viewTopUp && !reviewTopUp && \r\n \r\n }\r\n {!viewEdit && status === 'active' && viewTopUp && reviewTopUp && !viewCompleteTopUp && \r\n \r\n }\r\n {!viewEdit && status === 'active' && viewTopUp && reviewTopUp && viewCompleteTopUp && \r\n \r\n }\r\n {!viewEdit && status === 'requested' && \r\n \r\n \r\n }\r\n {!viewEdit && viewActivate && status === 'inactive' && \r\n \r\n }\r\n {!viewEdit && viewChangePin && status === 'active' && \r\n \r\n }\r\n {!viewEdit && !viewChangePin && !viewTopUp && status === 'active' && \r\n \r\n \r\n }\r\n {!viewEdit && status === 'locked' && \r\n \r\n \r\n }\r\n {!viewEdit && status === 'deactivated' && \r\n \r\n }\r\n {!viewEdit && status === 'denied' && \r\n \r\n \r\n }\r\n {viewEdit && }\r\n
\r\n \r\n {viewTopUp &&\r\n \r\n {!reviewTopUp && !viewCompleteTopUp &&\r\n \r\n \r\n }\r\n {reviewTopUp && !viewCompleteTopUp &&\r\n \r\n \r\n }\r\n {viewCompleteTopUp &&\r\n \r\n \r\n }\r\n \r\n \r\n }\r\n {reviewTopUp &&\r\n \r\n }\r\n
\r\n );\r\n}\r\n\r\nTopUpCard.propTypes = {\r\n viewTopUp: PropTypes.bool,\r\n cardInfo: PropTypes.object,\r\n reviewTopUp: PropTypes.bool,\r\n viewCompleteTopUp: PropTypes.bool,\r\n accountBalance: PropTypes.number,\r\n topUpAmount: PropTypes.number,\r\n setTopUpAmount: PropTypes.func,\r\n cardBalance: PropTypes.number,\r\n error: PropTypes.string\r\n};\r\n","import { connect } from 'react-redux';\r\nimport TopUpCard from './TopUpCard';\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(TopUpCard);\r\n","import TopUpCardContainer from './TopUpCardContainer';\r\n\r\nexport default TopUpCardContainer;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./topUpCard.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./topUpCard.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./topUpCard.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./manageCard.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./manageCard.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./manageCard.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useEffect, useRef, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Drawer from 'components/common/Drawer';\r\nimport Button from 'components/common/Button';\r\nimport {\r\n Avatar,\r\n Card as MUICard,\r\n CardHeader,\r\n Divider,\r\n Modal\r\n} from '@mui/material';\r\nimport {\r\n getTaxCodes,\r\n parseErrorMessage,\r\n saveTransaction,\r\n getTags,\r\n getInboxFiles,\r\n deleteReceipt\r\n} from 'services/webApi';\r\nimport AddIcon from '@mui/icons-material/Add';\r\nimport HighlightOffIcon from '@mui/icons-material/HighlightOff';\r\nimport UploadIcon from '@mui/icons-material/Upload';\r\nimport TextField from 'components/common/TextField';\r\nimport Dropdown from 'components/common/Dropdown';\r\nimport AutoComplete from 'components/common/AutoCompleteNew';\r\nimport GlCode from 'components/CardForm/components/GlCode';\r\nimport ReceiptsList from 'components/ReceiptsList';\r\nimport ReceiptItem from 'components/ReceiptsList/components/ReceiptItem';\r\nimport LoadingSpinner from 'components/common/LoadingSpinner';\r\nimport useManageTransaction from './hooks/useManageTransaction';\r\nimport './styles/manageTransaction.scss';\r\nimport { Box } from '@mui/system';\r\nimport Pagination from 'components/common/Pagination';\r\nimport { useApi } from 'services/hooks';\r\n\r\nexport default function ManageTransaction({\r\n open,\r\n onClose,\r\n transactionInfo,\r\n transactions,\r\n setTransactions,\r\n glCodes,\r\n glCodesLoading,\r\n showInboxOnly,\r\n updateInboxCount,\r\n updateMissingsCount\r\n}) {\r\n const [\r\n isLoading,\r\n error,\r\n isReceiptLoading,\r\n receiptError,\r\n isDeleteModalOpen,\r\n setIsDeleteModalOpen,\r\n viewReceiptList,\r\n setViewReceiptList,\r\n attachedReceipt,\r\n setAttachedReceipt,\r\n selectedReceipt,\r\n setSelectedReceipt,\r\n receiptInfo,\r\n transaction,\r\n setTransaction,\r\n transactionItemList,\r\n setTransactionItemList,\r\n description,\r\n setDescription,\r\n taxCode,\r\n setTaxCode,\r\n taxAmount,\r\n setTaxAmount,\r\n tipAmount,\r\n setTipAmount,\r\n tags,\r\n setTags,\r\n memo,\r\n setMemo,\r\n closePanel,\r\n editTransaction,\r\n addAdditionalTransaction,\r\n deleteAdditionalTransaction,\r\n calculateTax,\r\n calculateNetTotal,\r\n calculateNetTotalDifference,\r\n saveTransactionChanges,\r\n attachReceipt,\r\n detachReceipt,\r\n uploadReciept,\r\n handlePrevious,\r\n handleReceiptDelete,\r\n handleReceiptMoveToInbox,\r\n openReceiptsList,\r\n taxCodeList,\r\n setTaxCodeList\r\n ] = useManageTransaction(\r\n onClose,\r\n transactionInfo,\r\n transactions,\r\n setTransactions\r\n );\r\n\r\n const locale = 'en-US'; // Temporary locale setting\r\n const [tagsList, setTagsList] = useState([]);\r\n const [sortReceiptListCategory, setSortReceiptListCategory] =\r\n useState('CreatedAt');\r\n const [sortReceiptListOrder, setSortReceiptListOrder] = useState('asc');\r\n const [receiptsData, setReceiptsData] = useState({ count: 0, data: [] });\r\n const [receiptsPagination, setReceiptPagination] = useState({\r\n limit: 25,\r\n page: 1\r\n });\r\n\r\n const [isReceiptListLoading, receiptListError, callReceiptApi] = useApi();\r\n\r\n const handleSortCategoryChange = (e) => {\r\n setSortReceiptListCategory(e.target.value);\r\n };\r\n\r\n const handleSortOrderChange = () => {\r\n setSortReceiptListOrder(sortReceiptListOrder === 'asc' ? 'desc' : 'asc');\r\n };\r\n\r\n const getReceipts = async () => {\r\n const response = await callReceiptApi(() =>\r\n getInboxFiles(\r\n sortReceiptListCategory,\r\n sortReceiptListOrder,\r\n receiptsPagination.limit,\r\n receiptsPagination.page\r\n )\r\n );\r\n if (response) {\r\n setReceiptsData(response);\r\n updateInboxCount(response.count);\r\n }\r\n };\r\n\r\n const onReceiptsPaginationChange = (page) => {\r\n setReceiptPagination((prev) => ({ ...prev, page }));\r\n };\r\n\r\n const openReceiptDeleteFromInbox = async (receiptId) => {\r\n const response = await callReceiptApi(() => deleteReceipt(receiptId));\r\n if (response) {\r\n const newReceiptsData = [...receiptsData.data];\r\n const index = newReceiptsData.findIndex((item) => item.id === receiptId);\r\n newReceiptsData.splice(index, 1);\r\n setReceiptsData((prev) => ({\r\n count: prev.count - 1,\r\n data: newReceiptsData\r\n }));\r\n // Will fetch a new list with the api implemented\r\n }\r\n };\r\n\r\n const uploadInputRef = useRef();\r\n\r\n useEffect(() => {\r\n getTaxCodesList();\r\n getTagsList();\r\n getReceiptsInboxLength();\r\n }, []);\r\n\r\n const getReceiptsInboxLength = () => {\r\n getInboxFiles(sortReceiptListCategory, sortReceiptListOrder, 1, 1).then(\r\n (response) => {\r\n updateInboxCount(response.count);\r\n }\r\n );\r\n };\r\n\r\n useEffect(() => {\r\n if (showInboxOnly) {\r\n setViewReceiptList(true);\r\n }\r\n }, [showInboxOnly]);\r\n\r\n useEffect(() => {\r\n // if receipt inbox is open\r\n if (viewReceiptList) {\r\n getReceipts();\r\n }\r\n }, [\r\n sortReceiptListOrder,\r\n sortReceiptListCategory,\r\n receiptsPagination,\r\n viewReceiptList\r\n ]);\r\n\r\n const getTaxCodesList = async () => {\r\n try {\r\n const response = await getTaxCodes();\r\n setTaxCodeList(response.data.result);\r\n } catch (error) {\r\n setTaxCodeList([]);\r\n }\r\n };\r\n\r\n const getTagsList = async () => {\r\n try {\r\n const response = await getTags();\r\n setTagsList(response.data.result);\r\n } catch (error) {\r\n setTagsList([]);\r\n }\r\n };\r\n\r\n const selectedReceiptFile = () => {\r\n uploadInputRef.current.click();\r\n };\r\n\r\n const uploadReceiptFile = (e) => {\r\n const file = e.target.files[0];\r\n if (file) {\r\n const formData = new FormData();\r\n formData.append('files', file);\r\n uploadReciept(formData);\r\n }\r\n };\r\n\r\n return (\r\n Top-Up
\r\n \r\n Add additional funds to your cards. Only active cards can be topped up.\r\n
\r\n Review Your top-up
\r\n Top-up Complete
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {cardInfo.cardUser}
\r\n {cardInfo.cardNickname}
\r\n \r\n
\r\n Card Nickname
\r\n {`***${cardInfo.pinNumber.slice(-4)}`}
\r\n \r\n
\r\n \r\n
\r\n Limit
\r\n {`$${cardInfo.cardLimit}.00`}
\r\n \r\n
\r\n Spent
\r\n {`$${cardInfo.cardLimit - cardInfo.cardBalance}.00`}
\r\n \r\n
\r\n Available
\r\n {`$${cardInfo.cardBalance}.00`}
\r\n Top-Up
\r\n \r\n $ }}\r\n onInputChange={val => setTopUpAmount(Math.min(cardInfo.cardLimit - cardInfo.cardBalance, val))}\r\n />\r\n
\r\n Cannot topup more than limit!
\r\n \r\n
\r\n }\r\n {(viewTopUp || reviewTopUp) && !viewCompleteTopUp &&\r\n Date
\r\n \r\n {formattedDate}\r\n
\r\n From
\r\n \r\n
\r\n Available Funds
\r\n {`$${accountBalance}.00`}
\r\n To
\r\n \r\n
\r\n \r\n
\r\n 1234 Amazon
\r\n { viewCompleteTopUp\r\n ? Available
\r\n : \r\n {`+ $${topUpAmount}.00`}\r\n
\r\n }\r\n \r\n
\r\n {cardInfo.cardUser}
\r\n \r\n \r\n {`$${cardBalance}.00`}\r\n {` / $${cardInfo.cardLimit}.00 Limit`}\r\n
\r\n Total
\r\n }\r\n {reviewTopUp && viewCompleteTopUp &&\r\n Transferred
\r\n }\r\n {`$${topUpAmount}.00`}
\r\n \r\n Remove Attachment\r\n
\r\n \r\n
\r\n Are you sure you want to remove this receipt?
\r\n \r\n Select Move to Inbox to attach to a different transaction.\r\n
\r\n \r\n Deleted receipts cannot be recovered.\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Inbox
\r\n \r\n Uploaded documents unattached to a transaction. Unattached files\r\n will be deleted after 45 days in the inbox.\r\n
\r\n \r\n
\r\n \r\n {\r\n if (val.length <= 100) {\r\n setDescription(val);\r\n }\r\n }}\r\n />\r\n \r\n {transactionItemList.map((transaction, index) => (\r\n \r\n \r\n editTransaction(value, index, 'glCode')\r\n }\r\n />\r\n \r\n editTransaction(val, index, 'amount')\r\n }\r\n />\r\n {transactionItemList.length > 1 && (\r\n deleteAdditionalTransaction(index)}\r\n >\r\n
\r\n ))}\r\n {calculateNetTotalDifference() !== 0 && (\r\n \r\n
\r\n \r\n Description\r\n
\r\n \r\n ${transaction && transaction.transactionAmount}\r\n
\r\n \r\n {transaction && transaction.description}\r\n
\r\n \r\n \r\n {'V'}}\r\n title={\r\n \r\n
\r\n \r\n
\r\n }\r\n subheader={\r\n \r\n {transaction && transaction.cardOwnerName}\r\n
\r\n {transaction && transaction.cardNickName}
\r\n \r\n
\r\n }\r\n />\r\n \r\n {transaction &&\r\n new Date(\r\n transaction.transactionDate * 1000\r\n ).toLocaleDateString('default', {\r\n month: 'short',\r\n day: 'numeric',\r\n year: 'numeric'\r\n })}\r\n
\r\n \r\n {'***'}\r\n {transaction && transaction.maskedCardNumber.slice(-4)}\r\n
\r\n Accounting
\r\n \r\n Line items, tax, and tips must equal Total\r\n
\r\n \r\n {transactionItemList && transactionItemList.length === 1 && (\r\n
\r\n )}\r\n {transactionItemList && transactionItemList.length > 1 && (\r\n \r\n \r\n editTransaction(value, 0, 'glCode')\r\n }\r\n />\r\n \r\n ${calculateNetTotal()}\r\n
\r\n \r\n
\r\n )}\r\n Line items must equal Net Total
\r\n \r\n Difference: ${calculateNetTotalDifference().toFixed(2)}\r\n
\r\n \r\n {transactionItemList.length < 4 && (\r\n addAdditionalTransaction()}\r\n >\r\n
\r\n \r\n
\r\n \r\n Net Total\r\n
\r\n \r\n ${calculateNetTotal()}\r\n
\r\n \r\n ({\r\n label: item.taxRateLabel,\r\n value: item.id\r\n }))}\r\n onChange={(e) => setTaxCode(e.target.value)}\r\n />\r\n\r\n {taxCode === 'other' ? (\r\n setTaxAmount(val)}\r\n />\r\n ) : (\r\n
\r\n \r\n ${calculateTax().toFixed(2)}\r\n
\r\n )}\r\n \r\n setTipAmount(val)}\r\n />\r\n
\r\n\r\n \r\n
\r\n \r\n Tip Amount\r\n
\r\n \r\n Optional\r\n
\r\n \r\n
\r\n \r\n\r\n Total
\r\n \r\n ${transaction && transaction.transactionAmount}\r\n
\r\n Receipt
\r\n {receiptError && (\r\n \r\n {parseErrorMessage(receiptError, locale)}\r\n
\r\n )}\r\n {isReceiptLoading && \r\n setViewReceiptList(true)}\r\n >\r\n Select from Inbox\r\n
\r\n \r\n or\r\n
\r\n Advanced
\r\n \r\n setTags(val)}\r\n multiple\r\n />\r\n
\r\n \r\n setMemo(val)}\r\n />\r\n
\r\n \r\n \r\n )}\r\n\r\n \r\n {viewReceiptList && (\r\n
\r\n \r\n );\r\n}\r\n\r\nManageTransaction.propTypes = {\r\n glCodes: PropTypes.array,\r\n glCodesLoading: PropTypes.bool,\r\n open: PropTypes.bool,\r\n onClose: PropTypes.func,\r\n transactionInfo: PropTypes.object,\r\n transactions: PropTypes.array,\r\n setTransactions: PropTypes.func,\r\n showInboxOnly: PropTypes.bool,\r\n updateInboxCount: PropTypes.func,\r\n updateMissingsCount: PropTypes.func\r\n};\r\n","import { connect } from 'react-redux';\r\nimport ManageTransaction from './ManageTransaction';\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ManageTransaction);\r\n","import React, { useState, useEffect } from 'react';\r\nimport {\r\n saveTransaction,\r\n attachTransactionReceipt,\r\n detachTransactionReceipt,\r\n getReceiptDetails,\r\n deleteReceipt,\r\n uploadReceiptFiles,\r\n moveReceiptToInbox\r\n} from 'services/webApi';\r\nimport { useApi } from 'services/hooks';\r\n\r\nexport default function useTransactionsBulkEdit(\r\n onClose,\r\n transactionInfo,\r\n transactions,\r\n setTransactions\r\n) {\r\n const [isLoading, error, callApi] = useApi();\r\n const [isReceiptLoading, receiptError, callReceiptApi, setReceiptError] =\r\n useApi();\r\n\r\n const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);\r\n const [viewReceiptList, setViewReceiptList] = useState(false);\r\n const [attachedReceipt, setAttachedReceipt] = useState('');\r\n const [selectedReceipt, setSelectedReceipt] = useState(null);\r\n const [receiptInfo, setReceiptInfo] = useState({});\r\n // Transaction information\r\n const [transaction, setTransaction] = useState({});\r\n const [transactionItemList, setTransactionItemList] = useState([]);\r\n const [description, setDescription] = useState('');\r\n const [taxCode, setTaxCode] = useState('');\r\n const [taxAmount, setTaxAmount] = useState(0);\r\n const [tipAmount, setTipAmount] = useState(0);\r\n const [tags, setTags] = useState([]);\r\n const [memo, setMemo] = useState('');\r\n const [taxCodeList, setTaxCodeList] = useState([]);\r\n\r\n useEffect(() => {\r\n setTransaction(transactionInfo);\r\n if (transactionInfo) {\r\n setAttachedReceipt(transactionInfo.receiptId);\r\n setTags(transactionInfo.tags);\r\n setTaxCode(transactionInfo.taxRateId);\r\n setTipAmount(transactionInfo.tipAmount);\r\n setMemo(transactionInfo.memo);\r\n setDescription(transactionInfo.fuseDescription);\r\n const transactionItems = transactionInfo.accountingTransactions.length\r\n ? transactionInfo.accountingTransactions\r\n : [\r\n {\r\n glAccountDefineId: transactionInfo.glCode\r\n }\r\n ];\r\n setTransactionItemList(transactionItems);\r\n }\r\n }, [transactionInfo]);\r\n\r\n useEffect(() => {\r\n if (attachedReceipt) {\r\n loadRecieptDetails();\r\n }\r\n }, [attachedReceipt]);\r\n\r\n const closePanel = () => {\r\n setSelectedReceipt(null);\r\n setDescription('');\r\n setTaxCode('');\r\n setTipAmount(0);\r\n setTags([]);\r\n setAttachedReceipt('');\r\n setMemo('');\r\n setViewReceiptList(false);\r\n onClose();\r\n setReceiptError(null);\r\n };\r\n\r\n const editTransaction = (value, index, field) => {\r\n let newList = [...transactionItemList];\r\n\r\n if (field === 'glCode') {\r\n newList[index] = {\r\n ...newList[index],\r\n glAccountDefineId: value.id,\r\n glAccountCode: value.accountNo\r\n };\r\n } else {\r\n newList[index].amount = value;\r\n }\r\n setTransactionItemList(newList);\r\n };\r\n\r\n const addAdditionalTransaction = () => {\r\n const newList = [...transactionItemList];\r\n newList.push({ glAccountDefineId: '', amount: null });\r\n setTransactionItemList(newList);\r\n };\r\n\r\n const deleteAdditionalTransaction = (index) => {\r\n const newList = [...transactionItemList];\r\n newList.splice(index, 1);\r\n setTransactionItemList(newList);\r\n };\r\n\r\n // Tax = (TotalAtTheBottom- Tip) * 10%\r\n // Net Total = TotalAtTheBottom - Tip - Tax\r\n // Difference = Net Total - Line Items\r\n\r\n const calculateTax = () => {\r\n // if (taxCode === 'other') {\r\n // return taxAmount;\r\n // } else {\r\n // return (\r\n // transactionInfo.transactionAmount -\r\n // (transactionInfo.transactionAmount - tipAmount) / (taxCode + 1)\r\n // );\r\n // }\r\n\r\n if (taxCode === 'other') {\r\n return taxAmount;\r\n } else {\r\n const selectedTax = taxCodeList.find((tax) => tax.id === taxCode);\r\n // lucas's tax calculation code\r\n // const tax =\r\n // transactionInfo.transactionAmount -\r\n // (transactionInfo.transactionAmount - tipAmount) /\r\n // (selectedTax?.taxRate + 1);\r\n\r\n // Amna's calculation\r\n // Tax = (TotalAtTheBottom- Tip) * 10%\r\n // Net Total = TotalAtTheBottom - Tip - Tax\r\n // Difference = Net Total - Line Items\r\n const tax = (transactionInfo.transactionAmount - tipAmount) * selectedTax?.taxRate;\r\n\r\n if (isNaN(tax)) {\r\n return 0;\r\n } else {\r\n return tax;\r\n }\r\n }\r\n };\r\n\r\n const calculateNetTotal = () => {\r\n const tax = calculateTax();\r\n return (transactionInfo.transactionAmount - tax - tipAmount).toFixed(2);\r\n };\r\n\r\n const calculateNetTotalDifference = () => {\r\n const transactionSum = transactionItemList.reduce(\r\n (total, obj) => +obj.amount + total,\r\n 0\r\n );\r\n return transactionSum - calculateNetTotal();\r\n };\r\n\r\n const saveTransactionChanges = async () => {\r\n const transactionId = transaction.id;\r\n const data = {\r\n fuseDescription: description,\r\n accountingTransactions: transactionItemList.map((data) => ({\r\n bridgeCardTransactionId: transactionId,\r\n glAccountDefineId: data.glAccountDefineId,\r\n amount: data.amount\r\n })),\r\n taxRateId: taxCode,\r\n taxAmount: calculateTax(),\r\n tipAmount: +tipAmount,\r\n receiptId: attachedReceipt || null,\r\n tags: tags.map((tag) => tag.tagId),\r\n memo: memo\r\n };\r\n\r\n const response = await callApi(() => saveTransaction(transactionId, data));\r\n\r\n if (response) {\r\n const newTransactions = [...transactions];\r\n const index = transactions.findIndex(\r\n (item) => item.id === transactionInfo.id\r\n );\r\n newTransactions[index] = {\r\n ...newTransactions[index],\r\n accountingTransactions: transactionItemList,\r\n taxRateId: taxCode,\r\n tags,\r\n receiptId: attachedReceipt || null,\r\n memo,\r\n fuseDescription: description,\r\n tipAmount\r\n };\r\n setTransactions(newTransactions);\r\n closePanel();\r\n }\r\n };\r\n\r\n const attachReceipt = async () => {\r\n const response = await callApi(() =>\r\n attachTransactionReceipt(transactionInfo.id, selectedReceipt.id)\r\n );\r\n if (response) {\r\n setSelectedReceipt(null);\r\n setAttachedReceipt(selectedReceipt);\r\n setViewReceiptList(false);\r\n }\r\n };\r\n\r\n const detachReceipt = async () => {\r\n const response = await callApi(() =>\r\n detachTransactionReceipt(transactionInfo.id)\r\n );\r\n if (response) {\r\n setAttachedReceipt('');\r\n }\r\n };\r\n\r\n const handleReceiptDelete = async () => {\r\n setIsDeleteModalOpen(false);\r\n const response = await callReceiptApi(() => deleteReceipt(attachedReceipt));\r\n if (response) {\r\n setAttachedReceipt('');\r\n }\r\n };\r\n const handleReceiptMoveToInbox = async () => {\r\n setIsDeleteModalOpen(false);\r\n const response = await callReceiptApi(() =>\r\n moveReceiptToInbox(attachedReceipt, transactionInfo.id)\r\n );\r\n if (response) {\r\n setAttachedReceipt('');\r\n }\r\n };\r\n const loadRecieptDetails = async (when) => {\r\n const response = await callReceiptApi(() =>\r\n getReceiptDetails(attachedReceipt)\r\n );\r\n if (response) {\r\n setReceiptInfo(response);\r\n }\r\n };\r\n\r\n const uploadReciept = async (formData) => {\r\n const response = await callReceiptApi(() => uploadReceiptFiles(formData));\r\n if (response) {\r\n setAttachedReceipt(response.data.responseId);\r\n }\r\n };\r\n\r\n const handlePrevious = () => {\r\n setViewReceiptList(false);\r\n };\r\n\r\n const openReceiptsList = () => {\r\n setIsDeleteModalOpen(false);\r\n setViewReceiptList(true);\r\n };\r\n\r\n return [\r\n isLoading,\r\n error,\r\n isReceiptLoading,\r\n receiptError,\r\n isDeleteModalOpen,\r\n setIsDeleteModalOpen,\r\n viewReceiptList,\r\n setViewReceiptList,\r\n attachedReceipt,\r\n setAttachedReceipt,\r\n selectedReceipt,\r\n setSelectedReceipt,\r\n receiptInfo,\r\n transaction,\r\n setTransaction,\r\n transactionItemList,\r\n setTransactionItemList,\r\n description,\r\n setDescription,\r\n taxCode,\r\n setTaxCode,\r\n taxAmount,\r\n setTaxAmount,\r\n tipAmount,\r\n setTipAmount,\r\n tags,\r\n setTags,\r\n memo,\r\n setMemo,\r\n closePanel,\r\n editTransaction,\r\n addAdditionalTransaction,\r\n deleteAdditionalTransaction,\r\n calculateTax,\r\n calculateNetTotal,\r\n calculateNetTotalDifference,\r\n saveTransactionChanges,\r\n attachReceipt,\r\n detachReceipt,\r\n uploadReciept,\r\n handlePrevious,\r\n handleReceiptDelete,\r\n handleReceiptMoveToInbox,\r\n openReceiptsList,\r\n taxCodeList,\r\n setTaxCodeList\r\n ];\r\n}\r\n","import ManageTransactionContainer from './ManageTransactionContainer';\r\n\r\nexport default ManageTransactionContainer;\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./manageTransaction.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./manageTransaction.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./manageTransaction.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState } from 'react';\r\nimport Button from 'components/common/Button';\r\nimport { withRouter, browserHistory } from 'react-router';\r\nimport { useCancelPromise, useMobile } from 'services/hooks';\r\nimport TextField from 'components/common/TextField';\r\nimport Header from './components/Header';\r\nimport './styles/newUserLogin.scss';\r\nimport { updateAccountPassword } from 'services/webApi';\r\n\r\nfunction Payment() {\r\n const isMobile = useMobile();\r\n const cancelPromise = useCancelPromise();\r\n\r\n const [tempPassword, setTempPassword] = useState('');\r\n const [newPassword, setNewPassword] = useState('');\r\n const [newPasswordConfirm, setNewPasswordConfirm] = useState('');\r\n\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [error, setError] = useState('');\r\n\r\n const handleUpdatePassword = async () => {\r\n setIsLoading(true);\r\n setError('');\r\n try {\r\n await updateAccountPassword({\r\n currentPassword: tempPassword,\r\n newPassword: newPassword,\r\n newPasswordConfirmed: newPasswordConfirm\r\n });\r\n if (!cancelPromise.current) {\r\n // Temporarily redirect all logins to invoices page until dashboard is ready\r\n browserHistory.push('/main/invoices');\r\n }\r\n } catch (err) {\r\n setError(err?.response?.data?.message || 'Error occured while updating password. Please try again later.');\r\n }\r\n setIsLoading(false);\r\n };\r\n\r\n return (\r\n \r\n {parseErrorMessage(error, locale)}\r\n
\r\n )}\r\n {!showInboxOnly && (\r\n \r\n \r\n {viewReceiptList ? (\r\n attachReceipt()}\r\n >\r\n Attach\r\n \r\n ) : (\r\n saveTransactionChanges()}\r\n >\r\n Save Changes\r\n \r\n )}\r\n
\r\n )}\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default withRouter(Payment);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from 'components/common/Button';\r\nimport logo from '../../../../../public/branding/logo.svg';\r\nimport './styles/header.scss';\r\n\r\nexport default function Header({ isMobile }) {\r\n return (\r\n \r\n setTempPassword(val)} />\r\n setNewPassword(val)} />\r\n setNewPasswordConfirm(val)} />\r\n {error &&
\r\n Create New Password
\r\n {error}
}\r\n \r\n
\r\n Password Requirements
\r\n 10 Character Minimum
\r\n One Uppercase Letter
\r\n One Lowercase Letter
\r\n One Number
\r\n One Symbol
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n );\r\n}\r\n\r\nHeader.propTypes = {\r\n isMobile: PropTypes.bool.isRequired\r\n};\r\n","import Header from './Header';\r\n\r\nexport default Header;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./header.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./header.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./header.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import NewUserLogin from './NewUserLogin';\r\n\r\nexport default NewUserLogin;\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./newUserLogin.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./newUserLogin.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./newUserLogin.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport './styles/noResultsSection.scss';\r\n\r\nexport default function NoResultsSection({\r\n headerText\r\n}) {\r\n return (\r\n \r\n 
\r\n
\r\n \r\n \r\n Sign Out\r\n \r\n
\r\n \r\n {headerText}\r\n
\r\n );\r\n}\r\n\r\nNoResultsSection.propTypes = {\r\n headerText: PropTypes.string.isRequired\r\n};\r\n","import NoResultsSection from './NoResultsSection';\r\n\r\nexport default NoResultsSection;\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./noResultsSection.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./noResultsSection.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./noResultsSection.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useContext, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from 'components/common/Button';\r\nimport { withRouter } from 'react-router';\r\nimport PaymentOptionCard from './components/PaymentOptionCard';\r\nimport useBankPayment from './hooks/useBankPayment';\r\nimport useCardProcessor from './hooks/useCardProcessor';\r\nimport useInvoice from './hooks/useInvoice';\r\nimport { useMobile } from 'services/hooks';\r\nimport LoadingSpinner from 'components/common/LoadingSpinner';\r\nimport PaymentResult from './components/PaymentResult';\r\nimport Header from './components/Header';\r\nimport FuseModal from 'components/common/FuseModal';\r\nimport TermsContent from './components/TermsContent';\r\nimport BankInfoContent from './components/BankInfoContent';\r\nimport { formatCurrency } from 'services/currency';\r\nimport ReviewInvoice from 'components/Invoices/components/CreateInvoice/ReviewInvoice/ReviewInvoice';\r\nimport useEtransfer from './hooks/useEtransfer';\r\nimport EtransferContent from './components/EtransferContent';\r\nimport './styles/payment.scss';\r\nimport Modal from 'components/common/Modal';\r\nimport { updateInvoiceStatus } from 'services/webApi';\r\nimport RejectMessageModalBody from './components/RejectMessageModalBody';\r\nimport ClearIcon from '@mui/icons-material/Clear';\r\nimport { width } from '@mui/system';\r\n\r\n// INFO: when developing locally - to use Credit Card\r\n// payment integration, machine must use 127.0.0.1\r\n// instead of localhost\r\n\r\n// TODO: add alert once common component fix merged\r\nfunction Payment({ location, router }) {\r\n const invoiceToken = location.query.t || '';\r\n if (!invoiceToken) { router.push('/') }\r\n const [view, setView] = useState('paymentPending');\r\n const [isRejectModalOpen, setIsRejectModalOpen] = useState(false);\r\n const [isThankYouModalOpen, setIsThankYouModalOpen] = useState(false);\r\n const [isRejectionLoading, setIsRejectionLoading] = useState(false);\r\n const {\r\n isPadAgreementOpen,\r\n setIsPadAgreementOpen,\r\n proceedToAccountFields,\r\n isBankInfoOpen,\r\n setIsBankInfoOpen,\r\n bankInfoFields,\r\n setBankInfoField,\r\n isBankPaymentLoading,\r\n isBankPaymentDisabled,\r\n payWithBankAccount,\r\n bankPaymentError\r\n } = useBankPayment(setView, invoiceToken);\r\n const { error: cardProcessorError, openPayModal, isModalLoading } = useCardProcessor(setView, invoiceToken);\r\n const { invoice, invoicePaid, isLoading: isInvoiceLoading, error } = useInvoice(invoiceToken, setView);\r\n const {\r\n isEtransferModalOpen,\r\n setIsEtransferModalOpen,\r\n closeEtransferModal,\r\n sendEtransferRequest,\r\n isEtransferLoading,\r\n etransferError,\r\n email,\r\n emailName,\r\n isEtransferDisabled\r\n } = useEtransfer(invoice?.billToBranchInfo?.email, invoice?.billToBranchInfo?.partnerName, setView, invoiceToken);\r\n\r\n const isMobile = useMobile();\r\n const [message, setMessage] = useState('');\r\n\r\n const rejectInvoice = () => {\r\n setIsRejectionLoading(true);\r\n updateInvoiceStatus(invoiceToken, true, '', message).then(() => {\r\n setView('invoiceRejected');\r\n setIsThankYouModalOpen(true);\r\n setIsRejectionLoading(false);\r\n }).catch(() => {\r\n // setError('Error occured while rejecting invoice. Please try again later.');\r\n setView('noInvoice');\r\n setIsRejectionLoading(false);\r\n });\r\n setIsRejectModalOpen(false);\r\n };\r\n\r\n if (isInvoiceLoading) {\r\n return \r\n
\r\n );\r\n }\r\n\r\n if (!isInvoiceLoading && (error || !invoice)) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n const invoiceAmount = formatCurrency(invoice.payableAmount);\r\n const invoiceNameString = invoice.invoiceNumber.toString();\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nPayment.propTypes = {\r\n location: PropTypes.object.isRequired,\r\n router: PropTypes.object.isRequired\r\n};\r\n\r\nexport default withRouter(Payment);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport TextField from 'components/common/TextField';\r\nimport AutoComplete from 'components/common/AutoComplete';\r\nimport { useFinancialInstitutionLookup } from 'services/hooks/useFinancialInstitutionLookup';\r\nimport './styles/bankInfoContent.scss';\r\n\r\nexport default function BankInfoContent({ bankInfoObject, onInputChange, invoiceAmount, invoiceName }) {\r\n const {\r\n accountFirstName,\r\n accountLastName,\r\n businessName,\r\n financialInstitutionId,\r\n financialInstitutionBranchId,\r\n accountNumber\r\n } = bankInfoObject;\r\n const {\r\n isFinancialInstitutionLoading,\r\n financialInstitutionError,\r\n financialInstitutions,\r\n institutionBranches,\r\n getInstitutionBranches\r\n } = useFinancialInstitutionLookup();\r\n\r\n const handleInstitutionSelect = (value) => {\r\n getInstitutionBranches(value.bankNumber);\r\n onInputChange(financialInstitutionId.id, value);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n {invoice.salesInvoiceDetail &&
\r\n \r\n {view === 'paymentPending' ? (\r\n \r\n setIsPadAgreementOpen(false)}\r\n onPrimaryClick={proceedToAccountFields}\r\n >\r\n setIsBankInfoOpen(false)}\r\n primaryLabel='Pay From Account'\r\n isPrimaryLoading={isBankPaymentLoading}\r\n isPrimaryDisabled={isBankPaymentDisabled}\r\n onPrimaryClick={payWithBankAccount}\r\n error={bankPaymentError}\r\n >\r\n closeEtransferModal()}\r\n primaryLabel='Send Request'\r\n isPrimaryLoading={isEtransferLoading}\r\n isPrimaryDisabled={isEtransferDisabled}\r\n onPrimaryClick={sendEtransferRequest}\r\n error={etransferError}\r\n >\r\n openPayModal(invoice.payableAmount, invoice.invoiceId, invoice.tenant?.tenantId)}\r\n isLoading={isModalLoading}\r\n isMobile={isMobile}\r\n />\r\n setIsPadAgreementOpen(true)}\r\n isMobile={isMobile}\r\n />\r\n setIsEtransferModalOpen(true)}\r\n isMobile={isMobile}\r\n />\r\n \r\n ) : (\r\n
\r\n \r\n \r\n
\r\n {cardProcessorError && {cardProcessorError}
}\r\n \r\n onInputChange(accountFirstName.id, value)} />\r\n onInputChange(accountLastName.id, value)} />\r\n onInputChange(businessName.id, value)} />\r\n ({`${option.bankNumber} - ${option.bankName}` || ''} )}\r\n getOptionLabel={option => `${option.bankNumber} - ${option.bankName}` || ''}\r\n onChange={(e, value) => handleInstitutionSelect(value)} />\r\n ({`${option.branchName} - ${option.transitNumber}` || ''} )}\r\n getOptionLabel={option => `${option.branchName} - ${option.transitNumber}` || ''}\r\n onChange={(e, value) => onInputChange(financialInstitutionBranchId.id, value)} />\r\n {/* onInputChange(transitNumber.id, value)}\r\n /> */}\r\n {/* onInputChange(transitNumber.id, value)} /> */}\r\n onInputChange(accountNumber.id, value)} />\r\n
\r\n );\r\n}\r\n\r\nBankInfoContent.propTypes = {\r\n bankInfoObject: PropTypes.object.isRequired,\r\n onInputChange: PropTypes.func.isRequired,\r\n invoiceAmount: PropTypes.string,\r\n invoiceName: PropTypes.string\r\n};\r\n","import BankInfoContent from './BankInfoContent';\r\n\r\nexport default BankInfoContent;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./bankInfoContent.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./bankInfoContent.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./bankInfoContent.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport TextField from 'components/common/TextField';\r\nimport './styles/etransferContent.scss';\r\n\r\n// INFO: At least for now, the email cannot be changed. The API may eventually accept\r\n// both a new email and the value of the name field. Leaving both fields disabled\r\n// in the meantime like the legacy application.\r\nexport default function EtransferContent({ invoiceAmount, invoiceName, fieldsObject }) {\r\n const { email, emailName } = fieldsObject;\r\n\r\n return (\r\n \r\n {invoiceAmount &&
\r\n {invoiceAmount}
}\r\n Please provide your account information so we can debit your account for payment{invoiceName ? ` of invoice ${invoiceName}.` : '.'}
\r\n\r\n emailName.setValue(value)} />\r\n email.setValue(value)} />\r\n
\r\n );\r\n}\r\n\r\nEtransferContent.propTypes = {\r\n fieldsObject: PropTypes.object.isRequired,\r\n invoiceAmount: PropTypes.string,\r\n invoiceName: PropTypes.string\r\n};\r\n","import EtransferContent from './EtransferContent';\r\n\r\nexport default EtransferContent;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./etransferContent.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./etransferContent.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./etransferContent.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from 'components/common/Button';\r\nimport logo from '../../../../../public/branding/logo.svg';\r\nimport { formatCurrency } from 'services/currency';\r\nimport './styles/header.scss';\r\n\r\nexport default function Header({ isMobile, invoice }) {\r\n return (\r\n \r\n {invoiceAmount &&
\r\n {invoiceAmount}
}\r\n Please confirm your name and email to receive the E-transfer Request{invoiceName ? ` for ${invoiceName}.` : '.'} Contact the person who sent you the invoice if there is an issue.
\r\n\r\n
\r\n {isMobile && invoice && (\r\n \r\n \r\n
\r\n {!isMobile && invoice && {`Invoice ${invoice.invoiceNumber}`}
}\r\n \r\n \r\n Try Fuse For Free\r\n \r\n
\r\n \r\n
\r\n )}\r\n {`Invoice ${invoice.invoiceNumber}`}
\r\n {formatCurrency(invoice.payableAmount)}
\r\n \r\n \r\n
\r\n ) : (\r\n {flavourText}
\r\n \r\n \r\n
\r\n \r\n
\r\n )}\r\n {flavourText}
\r\n \r\n } isLoading={isLoading} />\r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nPaymentResult.propTypes = {\r\n variant: PropTypes.string.isRequired,\r\n invoiceName: PropTypes.string,\r\n companyName: PropTypes.string,\r\n amount: PropTypes.string\r\n};\r\n","import PaymentResult from './PaymentResult';\r\n\r\nexport default PaymentResult;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./paymentResult.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./paymentResult.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./paymentResult.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState, useMemo } from 'react';\r\nimport RadioSelect from 'components/common/RadioSelect/RadioSelect';\r\nimport TextField from 'components/common/TextField';\r\nimport PropTypes from 'prop-types';\r\nimport './styles/rejectMessageModalBody.scss';\r\n\r\nexport default function RejectMessageModalBody ({ message, setMessage }) {\r\n const [value, setValue] = useState('');\r\n\r\n const rejectReasons = useMemo(() => [\r\n { value: 'I will pay through cheque or cash', label: 'I will pay through cheque or cash' },\r\n { value: 'The invoice is incorrect or I\\'m not the intended recipient', label: 'The invoice is incorrect or I\\'m not the intended recipient' },\r\n { value: 'I\\'ve already paid this invoice', label: 'I\\'ve already paid this invoice' },\r\n { value: 'Other', label: 'Other' }\r\n ], []);\r\n\r\n const handleRejectReasonSelect = val => {\r\n setValue(val);\r\n\r\n if (val === 'Other') {\r\n setMessage('');\r\n return;\r\n }\r\n\r\n setMessage(rejectReasons.find(r => r.value === val).label);\r\n };\r\n\r\n return \r\n {resultVariant.headerText}\r\n
\r\n \r\n {resultVariant.success ? (\r\n
\r\n {resultVariant.flavourText}
\r\n \r\n handleRejectReasonSelect(e.target.value)}\r\n items={rejectReasons}\r\n value={value} />\r\n\r\n setMessage(val)}\r\n inputProps={{ maxLength: 500 }} />\r\n
;\r\n}\r\n\r\nRejectMessageModalBody.propTypes = {\r\n message: PropTypes.string,\r\n setMessage: PropTypes.func\r\n};\r\n","import RejectMessageModalBody from './RejectMessageModalBody';\r\n\r\nexport default RejectMessageModalBody;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./rejectMessageModalBody.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./rejectMessageModalBody.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./rejectMessageModalBody.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React from 'react';\r\nimport './styles/termsContent.scss';\r\n\r\nexport default function TermsContent() {\r\n const PAYMENTS_LINK = 'https://www.payments.ca/';\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n","import TermsContent from './TermsContent';\r\n\r\nexport default TermsContent;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./termsContent.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./termsContent.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./termsContent.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import { useState } from 'react';\r\nimport { useCancelPromise } from 'services/hooks';\r\nimport { paymentEftRequest, paymentEtransferRequest, updateInvoiceStatus } from 'services/webApi';\r\n\r\nconst INITIAL_BANK_INFO_OBJ = {\r\n accountFirstName: { id: 'accountFirstName', label: 'Account First Name', value: '' },\r\n accountLastName: { id: 'accountLastName', label: 'Account Last Name', value: '' },\r\n businessName: { id: 'businessName', label: 'Business Name', value: '' },\r\n financialInstitutionBranchId: { id: 'financialInstitutionBranchId', label: 'Transit Number', value: '' },\r\n accountNumber: { id: 'accountNumber', label: 'Account Number', value: '' },\r\n financialInstitutionId: {\r\n id: 'financialInstitutionId',\r\n label: 'Financial Institution Number',\r\n value: ''\r\n }\r\n};\r\n\r\nexport default function useBankPayment(setView, invoiceToken) {\r\n const [bankPaymentError, setBankPaymentError] = useState('');\r\n const [isBankPaymentLoading, setIsBankPaymentLoading] = useState(false);\r\n const [isPadAgreementOpen, setIsPadAgreementOpen] = useState(false);\r\n const [isBankInfoOpen, setIsBankInfoOpen] = useState(false);\r\n const [bankInfoFields, setBankInfoFieldsValidated] = useState(INITIAL_BANK_INFO_OBJ);\r\n const cancelPromise = useCancelPromise();\r\n\r\n const { accountFirstName, accountLastName, businessName, financialInstitutionBranchId, accountNumber, financialInstitutionId } = bankInfoFields;\r\n const isBankPaymentDisabled = (\r\n !accountFirstName.value ||\r\n !accountLastName.value ||\r\n !financialInstitutionBranchId.value ||\r\n !accountNumber.value ||\r\n !financialInstitutionId.value\r\n );\r\n\r\n const proceedToAccountFields = () => {\r\n setIsPadAgreementOpen(false);\r\n setBankPaymentError('');\r\n setIsBankInfoOpen(true);\r\n };\r\n\r\n const setBankInfoField = (field, newValue) => {\r\n // Should we need to, we can run the newValue through validation(s)\r\n // here before setting the new value. Perhaps retain old value if not\r\n // valid.\r\n setBankInfoFieldsValidated((previousState) => {\r\n previousState[field] = {\r\n ...previousState[field],\r\n value: newValue\r\n };\r\n\r\n return { ...previousState };\r\n });\r\n };\r\n\r\n const payWithBankAccount = async () => {\r\n setIsBankPaymentLoading(true);\r\n const paymentInfo = {\r\n paymentMethod: 'EFT',\r\n hashedString: encodeURIComponent(invoiceToken),\r\n signedBy: '',\r\n accountFirstName: accountFirstName.value,\r\n accountLastName: accountLastName.value,\r\n businessName: businessName.value,\r\n financialInstitutionId: +financialInstitutionId.value?.id,\r\n financialInstitutionBranchId: +financialInstitutionBranchId.value?.id,\r\n externalAccountNumber: accountNumber.value\r\n };\r\n\r\n try {\r\n await paymentEftRequest(paymentInfo);\r\n if (!cancelPromise.current) {\r\n try {\r\n await updateInvoiceStatus(invoiceToken, false, 'EFT');\r\n if (!cancelPromise.current) {\r\n setView('paymentSuccess');\r\n setIsBankPaymentLoading(false);\r\n setIsBankInfoOpen(false);\r\n }\r\n } catch (err) {\r\n if (!cancelPromise.current) {\r\n setError('Error updating invoice status.');\r\n setIsBankPaymentLoading(false);\r\n }\r\n }\r\n }\r\n } catch (err) {\r\n if (!cancelPromise.current) {\r\n setBankPaymentError('Error paying from account. Please try again later.');\r\n setIsBankPaymentLoading(false);\r\n }\r\n }\r\n };\r\n\r\n return {\r\n isPadAgreementOpen,\r\n setIsPadAgreementOpen,\r\n proceedToAccountFields,\r\n isBankInfoOpen,\r\n setIsBankInfoOpen,\r\n bankInfoFields,\r\n setBankInfoField,\r\n isBankPaymentLoading,\r\n isBankPaymentDisabled,\r\n payWithBankAccount,\r\n bankPaymentError\r\n };\r\n}\r\n","import { useState } from 'react';\r\nimport { ELAVON_CC_SCRIPT_DEMO_URL } from 'services/constants';\r\nimport { useCancelPromise, useScript } from 'services/hooks';\r\nimport { postForElavonToken, updateInvoiceStatus } from 'services/webApi';\r\n\r\n// Lightbox Integration:\r\n// https://developer.elavon.com/na/docs/converge/1.0.0/integration-guide/integration_methods/lightbox\r\n\r\n// TODO: refactor error handling (result state)\r\nexport default function useCardProcessor(setView, token) {\r\n const [error, setError] = useState('');\r\n const [isModalLoading, setIsModalLoading] = useState(false);\r\n const elavonStatus = useScript(ELAVON_CC_SCRIPT_DEMO_URL);\r\n const cancelPromise = useCancelPromise();\r\n\r\n const callbackFunctions = {\r\n onError: () => {\r\n setError('An error occurred during credit card payment. Please try again later.');\r\n setIsModalLoading(false);\r\n },\r\n onCancelled: () => setIsModalLoading(false),\r\n onDeclined: (response) => {\r\n setError('Card declined. Please try again.');\r\n setIsModalLoading(false);\r\n },\r\n onApproval: () => {\r\n updateInvoiceStatus(token, false, 'Credit Card').then(() => {\r\n if (!cancelPromise.current) {\r\n setView('paymentSuccess');\r\n setIsModalLoading(false);\r\n }\r\n }).catch(() => {\r\n if (!cancelPromise.current) {\r\n setError('Error updating invoice status.');\r\n setIsModalLoading(false);\r\n }\r\n });\r\n }\r\n };\r\n\r\n const getToken = async (amount, invoiceId, tenantId) => {\r\n let response;\r\n try {\r\n response = await postForElavonToken(amount, encodeURIComponent(invoiceId), tenantId);\r\n } catch (error) {\r\n if (!cancelPromise.current) {\r\n setError('Payment processor not ready. Please try again.');\r\n return;\r\n }\r\n }\r\n\r\n return response.data;\r\n };\r\n\r\n const openPayModal = async (amount, invoiceId, tenantId) => {\r\n setIsModalLoading(true);\r\n\r\n if (elavonStatus !== 'ready') {\r\n setError('Payment processor not ready. Please try again.');\r\n return;\r\n }\r\n\r\n setError('');\r\n\r\n const authToken = await getToken(amount, invoiceId, tenantId);\r\n if (!authToken) {\r\n setIsModalLoading(false);\r\n return;\r\n }\r\n\r\n const paymentFields = {\r\n ssl_txn_auth_token: authToken\r\n };\r\n\r\n PayWithConverge.open(paymentFields, callbackFunctions);\r\n };\r\n\r\n return {\r\n error,\r\n elavonStatus,\r\n openPayModal,\r\n isModalLoading\r\n };\r\n}\r\n","import { useCallback, useEffect, useState } from 'react';\r\nimport { useCancelPromise } from 'services/hooks';\r\nimport { paymentEtransferRequest } from 'services/webApi';\r\n\r\nexport default function useEtransfer(defaultEmail, defaultName, setView, invoiceToken) {\r\n const [isEtransferModalOpen, setIsEtransferModalOpen] = useState(false);\r\n const [isEtransferLoading, setIsEtransferLoading] = useState(false);\r\n const [emailName, setEmailName] = useState(defaultName || '');\r\n const [email, setEmail] = useState(defaultEmail || '');\r\n const [etransferError, setEtransferError] = useState('');\r\n const cancelPromise = useCancelPromise();\r\n const isEtransferDisabled = !email || !emailName;\r\n\r\n const sendEtransferRequest = () => {\r\n setIsEtransferLoading(true);\r\n const paymentInfo = {\r\n paymentMethod: 'E-Transfer',\r\n hashedString: encodeURIComponent(invoiceToken),\r\n payeeemail: email,\r\n payeeType: '',\r\n firstName: '',\r\n lastName: '',\r\n middleName: '',\r\n tradeName: emailName,\r\n companyName: emailName,\r\n isCreatePayee: false\r\n };\r\n paymentEtransferRequest(paymentInfo).then(() => {\r\n if (!cancelPromise.current) {\r\n setView('paymentSuccess');\r\n setIsEtransferLoading(false);\r\n setIsEtransferModalOpen(false);\r\n }\r\n }).catch(() => {\r\n if (!cancelPromise.current) {\r\n setEtransferError('Error requesting e-transfer. Please try again later.');\r\n setIsEtransferLoading(false);\r\n }\r\n });\r\n };\r\n\r\n const updateDefaultValues = useCallback((email, name) => {\r\n setEmail(email);\r\n setEmailName(name);\r\n }, []);\r\n\r\n useEffect(() => {\r\n updateDefaultValues(defaultEmail, defaultName);\r\n }, [defaultEmail, defaultName, updateDefaultValues]);\r\n\r\n const closeEtransferModal = () => {\r\n setIsEtransferModalOpen(false);\r\n setEtransferError('');\r\n };\r\n\r\n return {\r\n isEtransferModalOpen,\r\n setIsEtransferModalOpen,\r\n closeEtransferModal,\r\n sendEtransferRequest,\r\n isEtransferLoading,\r\n etransferError,\r\n emailName: { value: emailName, setValue: setEmailName, label: 'Full Name' },\r\n email: { value: email, setValue: setEmail, label: 'E-mail' },\r\n isEtransferDisabled\r\n };\r\n}\r\n","import { useCallback, useEffect, useState } from 'react';\r\nimport { useCancelPromise } from 'services/hooks';\r\nimport { getPaymentInfo } from 'services/webApi';\r\n\r\nexport default function useInvoice(invoiceToken, setView) {\r\n const [invoice, setInvoice] = useState();\r\n const [isLoading, setIsLoading] = useState(true);\r\n const [error, setError] = useState('');\r\n const [invoicePaid, setInvoicePaid] = useState(false);\r\n const cancelPromise = useCancelPromise();\r\n\r\n const fetchInvoice = useCallback(async () => {\r\n let response;\r\n try {\r\n response = await getPaymentInfo(invoiceToken);\r\n } catch (error) {\r\n if (!cancelPromise.current) {\r\n // Temporary method of detecting if an invoice has been paid for already, ideally the response does not fail\r\n // and returns invoice information including the status\r\n if (error.response?.data === 'PaymentPaid') {\r\n setInvoicePaid(true);\r\n } else {\r\n setError('Error retrieving invoice. Please try again later.');\r\n }\r\n setIsLoading(false);\r\n return;\r\n }\r\n }\r\n\r\n if (!cancelPromise.current) {\r\n if (response.data?.response?.salesInvoiceDetail?.trnStatus === 'Rejected') {\r\n setView('invoiceRejected');\r\n }\r\n setInvoice(response.data?.response);\r\n setIsLoading(false);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n fetchInvoice();\r\n }, [fetchInvoice]);\r\n\r\n return {\r\n invoice,\r\n invoicePaid,\r\n isLoading,\r\n error\r\n };\r\n}\r\n","import Payment from './Payment';\r\n\r\nexport default Payment;\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./payment.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./payment.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./payment.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState } from 'react';\r\nimport Alert from 'components/common/Alert';\r\nimport { Divider } from '@mui/material';\r\nimport Users from './components/Users/Users';\r\nimport Teams from './components/Teams';\r\nimport './styles/people.scss';\r\n\r\nexport default function People() {\r\n const [alertOpen, setAlertOpen] = useState(false);\r\n const [alertMessage, setAlertMessage] = useState('');\r\n const tempOrgId = '0001'; // Temporary\r\n\r\n return (\r\n Business Pre-Authorized Debit (“PAD”) Plan Agreement
\r\n Recurring debit of variable amount at sporadic intervals
\r\nI/We authorize Fuse Financial and the financial institution designated (or any other financial institution I/we may authorize at\r\n any time) to begin deductions as per my/our instructions for payment of all amounts owing under my/our account(s)\r\n with Fuse Financial. A pre-authorized debit for the full amount of the services delivered will be debited from my/our specified\r\n account in accordance with authorization duly provided to Fuse Financial by me/us using my credentials on the Fuse Financial platform\r\n to be carried out on the dates that I similarly authorize through the Fuse Financial platform.
\r\nConfirmation & Pre-Notification:
\r\n1. I/We agree to reduce the Confirmation period under the Canadian Payment Association's Pre-Authorized\r\n Debits (“PAD”) Rule H1 (“PAD Rules”) to three (3) calendar days pending verification of my identity using a\r\n Commercially Reasonable method as outlined under the PAD Rules.\r\n 2. I/We agree to waive my/our right to receive pre-notification of the amount of the PAD and agree that I/We do\r\n not require advance notice of the amount of PADs before the debit is processed.
\r\nThis authority is to remain in effect until Fuse Financial has received written notification from me/us of its change or\r\n termination. This notification must be received at least ten (10) business days before the next debit is scheduled at the\r\n address provided below. I/We may obtain a sample cancellation form, or more information on my/our right to cancel a\r\n Business PAD Agreement at my/our financial institution or by visiting www.payments.ca.
\r\nFuse Financial may not assign this authorization, whether directly or indirectly, by operation of law, change of control or\r\n otherwise, without providing at least 10 days prior written notice to me/us.
\r\nI/we understand that this Business PAD Agreement only applies to the method of payment between the Fuse Financial and me/us and that\r\n this agreement and any termination of this agreement does not have any effect whatsoever with respect\r\n to any contract for goods or services between me/us and Fuse Financial. Fuse Financial intends to use a payment service provider, DC Bank, to administer the PAD.
\r\nI/We have certain recourse rights if any debit does not comply with this agreement. For example, I/we have the right to\r\n receive reimbursement for any PAD that is not authorized or is not consistent with this Business PAD Agreement. To\r\n obtain a form for a Reimbursement Claim, or for more information on my/our recourse rights, I/we may contact my/our financial institution or visit www.payments.ca.
\r\n\r\n setAlertOpen(false)}>{alertMessage.message} \r\n
\r\n );\r\n}\r\n","import { connect } from 'react-redux';\r\nimport People from './People';\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(People);\r\n","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Drawer from 'components/common/Drawer';\r\nimport Button from 'components/common/Button';\r\nimport { Divider } from '@mui/material';\r\nimport { parseErrorMessage } from 'services/webApi';\r\nimport TextField from 'components/common/TextField';\r\nimport AutoComplete from 'components/common/AutoComplete';\r\nimport useManageTeam from '../Teams/hooks/useManageTeam';\r\nimport './styles/createTeam.scss';\r\n\r\nexport default function CreateTeam({\r\n open,\r\n onClose,\r\n setAlertOpen,\r\n setAlertMessage\r\n}) {\r\n const {\r\n isLoading,\r\n error,\r\n teamName,\r\n teamManager,\r\n teamBranch,\r\n teamEmployees,\r\n setTeamName,\r\n setTeamManager,\r\n setTeamBranch,\r\n setTeamEmployees,\r\n managerSuggestions,\r\n branchSuggestions,\r\n employeeSuggestions,\r\n handleCreateTeam,\r\n isBranchLoading,\r\n isManagerLoading,\r\n isEmployeeLoading,\r\n handleManagerInputChange,\r\n handleBranchInputChange,\r\n handleEmployeeInputChange,\r\n isFormComplete\r\n } = useManageTeam(onClose, setAlertOpen, setAlertMessage, null);\r\n\r\n return (\r\n \r\n People\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Create Team\r\n
\r\n \r\n Assign one manager or admin and multiple employees to a team.\r\n
\r\n Details
\r\n \r\n setTeamName(val)} />\r\n setTeamManager(val)}\r\n loading={isManagerLoading}\r\n handleInputChange={handleManagerInputChange}\r\n />\r\n setTeamBranch(val)}\r\n loading={isBranchLoading}\r\n handleInputChange={handleBranchInputChange}\r\n />\r\n
\r\n Optional
\r\n Add Employees
\r\n Add employees who are not currently assigned to a team.
\r\n \r\n setTeamEmployees(val)}\r\n loading={isEmployeeLoading}\r\n handleInputChange={handleEmployeeInputChange}\r\n multiple\r\n />\r\n
\r\n\r\n \r\n {error && !isLoading &&
\r\n \r\n );\r\n}\r\n\r\nCreateTeam.propTypes = {\r\n open: PropTypes.bool,\r\n onClose: PropTypes.func,\r\n setAlertOpen: PropTypes.func,\r\n setAlertMessage: PropTypes.func\r\n};\r\n","\r\nconst companyTeamsData = [\r\n {\r\n id: '00001',\r\n name: 'Test Team 1',\r\n manager: 'Michael Scott',\r\n branch: { id: '00001', name: 'Scranton' },\r\n employees: ['Jim Halpert', 'Dwight Schrute', 'Stanley Hudson']\r\n },\r\n {\r\n id: '00002',\r\n name: 'Test Team 2',\r\n manager: 'David Wallace',\r\n branch: { id: '00002', name: 'New York' },\r\n employees: ['Jan Levinson', 'Charles Minor']\r\n },\r\n {\r\n id: '00003',\r\n name: 'Test Team 3',\r\n manager: 'Andy Bernard',\r\n branch: { id: '00003', name: 'Scranton' },\r\n employees: ['Pam Beesly', 'Ryan Howard']\r\n },\r\n {\r\n id: '00004',\r\n name: 'Test Team 4',\r\n manager: 'Angela Martin',\r\n branch: { id: '00004', name: 'Scranton' },\r\n employees: ['Oscar Martinez', 'Kevin Malone']\r\n },\r\n {\r\n id: '00005',\r\n name: 'Test Team 5',\r\n manager: 'Deangelo Vickers',\r\n branch: { id: '00005', name: 'Scranton' },\r\n employees: []\r\n }\r\n];\r\n\r\nexport default companyTeamsData;\r\n","import CreateTeam from './CreateTeam';\r\n\r\nexport default CreateTeam;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./createTeam.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./createTeam.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./createTeam.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Drawer from 'components/common/Drawer';\r\nimport Button from 'components/common/Button';\r\nimport { Divider } from '@mui/material';\r\nimport { parseErrorMessage } from 'services/webApi';\r\nimport TextField from 'components/common/TextField';\r\nimport AutoComplete from 'components/common/AutoComplete';\r\nimport useManageTeam from '../Teams/hooks/useManageTeam';\r\nimport './styles/editTeam.scss';\r\n\r\nexport default function EditTeam({\r\n open,\r\n onClose,\r\n selectedTeam,\r\n setAlertOpen,\r\n setAlertMessage\r\n}) {\r\n const {\r\n isLoading,\r\n error,\r\n teamName,\r\n teamManager,\r\n teamBranch,\r\n setTeamName,\r\n setTeamManager,\r\n setTeamBranch,\r\n managerSuggestions,\r\n branchSuggestions,\r\n handleUpdateTeam,\r\n handleDeleteTeam,\r\n isBranchLoading,\r\n isManagerLoading,\r\n handleManagerInputChange,\r\n handleBranchInputChange\r\n } = useManageTeam(onClose, setAlertOpen, setAlertMessage, selectedTeam);\r\n\r\n return (\r\n \r\n {parseErrorMessage(error, 'en-US')}\r\n
}\r\n \r\n \r\n \r\n Create Team\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Edit Team\r\n
\r\n \r\n Assign one manager or admin and multiple employees to a team.\r\n
\r\n Details
\r\n \r\n setTeamName(val)} />\r\n setTeamManager(val)}\r\n loading={isManagerLoading}\r\n handleInputChange={handleManagerInputChange}\r\n />\r\n setTeamBranch(val)}\r\n loading={isBranchLoading}\r\n handleInputChange={handleBranchInputChange}\r\n />\r\n
\r\n Optional
\r\n Delete Team
\r\n A team can only be deleted when there are no employees assigned.
\r\n \r\n 0}\r\n isLoading={isLoading}\r\n onClick={handleDeleteTeam}>\r\n Delete Team\r\n \r\n
\r\n\r\n \r\n {error && !isLoading &&
\r\n \r\n );\r\n}\r\n\r\nEditTeam.propTypes = {\r\n open: PropTypes.bool,\r\n onClose: PropTypes.func,\r\n selectedTeam: PropTypes.object,\r\n setAlertOpen: PropTypes.func,\r\n setAlertMessage: PropTypes.func\r\n};\r\n","import EditTeam from './EditTeam';\r\n\r\nexport default EditTeam;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./editTeam.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./editTeam.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./editTeam.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState } from 'react';\r\nimport Button from 'components/common/Button';\r\nimport PropTypes from 'prop-types';\r\nimport CreateTeam from 'components/People/components/CreateTeam';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport AddIcon from '@mui/icons-material/Add';\r\nimport EditTeam from 'components/People/components/EditTeam';\r\nimport Dropdown from 'components/common/Dropdown';\r\nimport useTeams from './hooks/useTeams';\r\nimport LoadingSpinner from 'components/common/LoadingSpinner';\r\nimport { parseErrorMessage } from 'services/webApi';\r\nimport './styles/teams.scss';\r\n\r\nexport default function Teams({ setAlertOpen, setAlertMessage }) {\r\n const [isCreateTeamPanelOpen, setIsCreateTeamPanelOpen] = useState(false);\r\n const [isEditTeamPanelOpen, setIsEditTeamPanelOpen] = useState(false);\r\n const [selectedTeam, setSelectedTeam] = useState({});\r\n const {\r\n isLoading,\r\n error,\r\n teams\r\n } = useTeams();\r\n const handleCreatePanelOpen = () => {\r\n setIsCreateTeamPanelOpen(true);\r\n };\r\n\r\n const handleCreatePanelClose = () => {\r\n setIsCreateTeamPanelOpen(false);\r\n };\r\n\r\n const handleEditPanelOpen = () => {\r\n setIsEditTeamPanelOpen(true);\r\n };\r\n\r\n const handleEditPanelClose = () => {\r\n setIsEditTeamPanelOpen(false);\r\n };\r\n\r\n return (\r\n \r\n {parseErrorMessage(error, 'en-US')}\r\n
}\r\n \r\n \r\n \r\n Save Changes\r\n \r\n
\r\n \r\n {error && !isLoading && \r\n }\r\n
\r\n );\r\n}\r\n\r\nTeams.propTypes = {\r\n setAlertOpen: PropTypes.func,\r\n setAlertMessage: PropTypes.func\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport { createTeam, updateTeam, deleteTeam, getCompanyBranchSuggestions, getCompanyEmployeeSuggestions, getCompanyManagerSuggestions } from 'services/webApi';\r\nimport { useApi } from 'services/hooks';\r\n\r\nexport default function useManageTeam (onClose, setAlertOpen, setAlertMessage, selectedTeam = null) {\r\n const [isLoading, error, callApi] = useApi();\r\n const [isBranchLoading, branchError, callBranchApi] = useApi();\r\n const [isManagerLoading, managerError, callManagerApi] = useApi();\r\n const [isEmployeeLoading, employeeError, callEmployeeApi] = useApi();\r\n\r\n const [teamName, setTeamName] = useState('');\r\n const [teamManager, setTeamManager] = useState('');\r\n const [teamBranch, setTeamBranch] = useState({ name: 'No Branch', id: null });\r\n const [teamEmployees, setTeamEmployees] = useState([]);\r\n const [managerSuggestions, setManagerSuggestions] = useState([]);\r\n const [branchSuggestions, setBranchSuggestions] = useState([]);\r\n const [employeeSuggestions, setEmployeeSuggestions] = useState([]);\r\n const companyId = 'tempcompanyid';\r\n\r\n useEffect(() => {\r\n handleManagerInputChange('');\r\n handleBranchInputChange('');\r\n handleEmployeeInputChange('');\r\n }, []);\r\n\r\n useEffect(() => {\r\n selectedTeam && setTeamName(selectedTeam.name);\r\n selectedTeam && setTeamManager(selectedTeam.manager);\r\n selectedTeam && setTeamBranch(selectedTeam.branch);\r\n selectedTeam && setTeamEmployees(selectedTeam.employees);\r\n }, [selectedTeam]);\r\n\r\n const resetFields = () => {\r\n setTeamName('');\r\n setTeamManager('');\r\n setTeamBranch({ name: 'No Branch', id: null });\r\n setTeamEmployees([]);\r\n };\r\n\r\n const handleCreateTeam = async () => {\r\n const newTeam = {\r\n name: teamName,\r\n manager: teamManager,\r\n branch: teamBranch.id || null,\r\n employees: teamEmployees\r\n };\r\n const response = await callApi(() => createTeam(companyId, newTeam));\r\n if (response) {\r\n onClose();\r\n resetFields();\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'successful', message: response.message });\r\n }\r\n };\r\n\r\n const handleUpdateTeam = async () => {\r\n const updatedTeam = {\r\n name: teamName,\r\n manager: teamManager,\r\n branch: teamBranch.id,\r\n employees: teamEmployees\r\n };\r\n const response = await callApi(() => updateTeam(selectedTeam.id, updatedTeam));\r\n if (response) {\r\n onClose();\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'successful', message: response.message });\r\n }\r\n };\r\n\r\n const handleDeleteTeam = async () => {\r\n const response = await callApi(() => deleteTeam(selectedTeam.id));\r\n if (response) {\r\n onClose();\r\n setAlertOpen(true);\r\n setAlertMessage({ type: 'successful', message: response.message });\r\n }\r\n };\r\n\r\n const handleManagerInputChange = async (value) => {\r\n const response = await callManagerApi(() => getCompanyManagerSuggestions(companyId, value));\r\n if (response) {\r\n setManagerSuggestions(response.data);\r\n }\r\n };\r\n\r\n const handleBranchInputChange = async (value) => {\r\n const response = await callBranchApi(() => getCompanyBranchSuggestions(companyId, value));\r\n if (response) {\r\n setBranchSuggestions(response.data);\r\n }\r\n };\r\n\r\n const handleEmployeeInputChange = async (value) => {\r\n const response = await callEmployeeApi(() => getCompanyEmployeeSuggestions(companyId, value));\r\n if (response) {\r\n setEmployeeSuggestions(response.data);\r\n }\r\n };\r\n\r\n const isFormComplete = () => {\r\n return teamName && teamManager && teamEmployees.length > 0;\r\n };\r\n\r\n return {\r\n isLoading,\r\n error,\r\n teamName,\r\n teamManager,\r\n teamBranch,\r\n teamEmployees,\r\n setTeamName,\r\n setTeamManager,\r\n setTeamBranch,\r\n setTeamEmployees,\r\n managerSuggestions,\r\n branchSuggestions,\r\n employeeSuggestions,\r\n handleCreateTeam,\r\n handleUpdateTeam,\r\n handleDeleteTeam,\r\n isBranchLoading,\r\n isManagerLoading,\r\n isEmployeeLoading,\r\n handleManagerInputChange,\r\n handleBranchInputChange,\r\n handleEmployeeInputChange,\r\n isFormComplete\r\n };\r\n}\r\n","import React, { useEffect, useState } from 'react';\r\nimport { getCompanyTeams } from 'services/webApi';\r\nimport { useApi } from 'services/hooks';\r\n\r\nexport default function useTeams () {\r\n const [isLoading, error, callApi] = useApi();\r\n const [teams, setTeams] = useState([]);\r\n\r\n const tempCompanyId = '00001';\r\n\r\n useEffect(() => {\r\n getTeams();\r\n }, []);\r\n\r\n const getTeams = async () => {\r\n const response = await callApi(() => getCompanyTeams(tempCompanyId));\r\n if (response) {\r\n setTeams(response.data.result);\r\n }\r\n };\r\n\r\n return {\r\n isLoading,\r\n error,\r\n teams\r\n };\r\n}\r\n","import Teams from './Teams';\r\n\r\nexport default Teams;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./teams.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./teams.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./teams.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState, useEffect } from 'react';\r\nimport Button from 'components/common/Button';\r\nimport Alert from 'components/common/Alert';\r\nimport LoadingSpinner from 'components/common/LoadingSpinner';\r\nimport NoResultsSection from 'components/NoResultsSection';\r\nimport TableHeader from 'components/common/TableHeader';\r\nimport UsersFilters from '../UsersFilters/UsersFilters';\r\nimport UserForm from '../UsersForm/UserForm';\r\nimport AddIcon from '@mui/icons-material/Add';\r\nimport './styles/users.scss';\r\nimport { Table, TableBody, TableCell, TableContainer, TablePagination, TableRow } from '@mui/material';\r\nimport useGetUsers from 'components/People/services/hooks/useGetUsers';\r\nimport { ROWS_PER_PAGE_OPTIONS, ROWS_PER_PAGE_DEFAULT } from 'services/constants';\r\n\r\nexport default function Users() {\r\n const [isLoading, error, fetchUsersInfo] = useGetUsers();\r\n const [users, setUsers] = useState();\r\n const [totalRows, setTotalRows] = useState(0);\r\n const [pageNumber, setPageNumber] = useState(0);\r\n const [rowsPerPage, setRowsPerPage] = useState(ROWS_PER_PAGE_DEFAULT);\r\n const [order, setOrder] = useState('asc');\r\n const [orderBy, setOrderBy] = useState('');\r\n\r\n const [isPanelOpen, setIsPanelOpen] = useState(false);\r\n const [selectedRow, setSelectedRow] = useState([]);\r\n const [selectedUser, setSelectedUser] = useState(null);\r\n\r\n // states for search filters\r\n const [searchTermFilter, setSearchTermFilter] = useState('');\r\n const [userRoleFilter, setUserRoleFilter] = useState('');\r\n const [userStatusFilter, setUserStatusFilter] = useState('');\r\n const [userTeamFilter, setUserTeamFilter] = useState([]);\r\n const [deactivatedUsersFilter, setDeactivatedUsersFilter] = useState(false);\r\n\r\n const capitalizeFirstLetter = str => str.charAt(0).toUpperCase() + str.slice(1);\r\n\r\n const fetchUsers = async (params, user = null) => {\r\n const response = await fetchUsersInfo(params);\r\n if (response) {\r\n let rows = response.numberOfRows;\r\n if (user) {\r\n response.data.unshift(user);\r\n rows = rows + 1;\r\n }\r\n setUsers(response.data);\r\n setTotalRows(rows);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n fetchUsers({ searchTermFilter, userRoleFilter, userStatusFilter, userTeamFilter, deactivatedUsersFilter, pageNumber, rowsPerPage, order, orderBy });\r\n }, []);\r\n\r\n const appendFilterParams = (filterParams) => {\r\n const { searchTermFilter, userRoleFilter, userStatusFilter, userTeamFilter, deactivatedUsersFilter } = filterParams;\r\n setSearchTermFilter(searchTermFilter);\r\n setUserRoleFilter(userRoleFilter);\r\n setUserStatusFilter(userStatusFilter);\r\n setUserTeamFilter(userTeamFilter);\r\n setDeactivatedUsersFilter(deactivatedUsersFilter);\r\n setPageNumber(0);\r\n fetchUsers({ ...filterParams, pageNumber: 0, rowsPerPage, order, orderBy });\r\n };\r\n\r\n const sortDataByColumn = (event, orderByParam) => {\r\n const orderParam = (orderBy === orderByParam && order === 'asc') ? 'desc' : 'asc';\r\n setOrder(orderParam);\r\n setOrderBy(orderByParam);\r\n fetchUsers({ searchTermFilter,\r\n userRoleFilter,\r\n userStatusFilter,\r\n userTeamFilter,\r\n deactivatedUsersFilter,\r\n pageNumber,\r\n rowsPerPage,\r\n order: orderParam,\r\n orderBy: orderByParam });\r\n };\r\n\r\n const loadPage = (event, newPage) => {\r\n setPageNumber(newPage);\r\n fetchUsers({ searchTermFilter,\r\n userRoleFilter,\r\n userStatusFilter,\r\n userTeamFilter,\r\n deactivatedUsersFilter,\r\n pageNumber: newPage,\r\n rowsPerPage,\r\n order,\r\n orderBy });\r\n };\r\n\r\n const loadUpdatedRowsPerPage = (event) => {\r\n const numOfRows = parseInt(event.target.value, 10);\r\n setRowsPerPage(numOfRows);\r\n setPageNumber(0);\r\n fetchUsers({ searchTermFilter,\r\n userRoleFilter,\r\n userStatusFilter,\r\n userTeamFilter,\r\n deactivatedUsersFilter,\r\n pageNumber: 0,\r\n rowsPerPage: numOfRows,\r\n order,\r\n orderBy });\r\n };\r\n\r\n const openPanelForUser = (event, user) => {\r\n setSelectedUser(user);\r\n setIsPanelOpen(true);\r\n };\r\n\r\n const handleRowKeypress = (event, row) => {\r\n if (event.charCode === 13) {\r\n openPanelForUser(event, row);\r\n }\r\n };\r\n\r\n const openCreateUserPanel = () => {\r\n setIsPanelOpen(true);\r\n };\r\n\r\n const closePanel = () => {\r\n setSelectedUser(null);\r\n setIsPanelOpen(false);\r\n };\r\n\r\n const addNewUser = user => {\r\n fetchUsers({ searchTermFilter,\r\n userRoleFilter,\r\n userStatusFilter,\r\n userTeamFilter,\r\n deactivatedUsersFilter,\r\n pageNumber,\r\n rowsPerPage,\r\n order,\r\n orderBy }, user);\r\n closePanel();\r\n };\r\n\r\n const updateSelectedUser = updatedUser => {\r\n const tempUsers = [...users];\r\n const tempUserIndex = users.findIndex(user => user.id === updatedUser.id);\r\n tempUsers[tempUserIndex] = updatedUser;\r\n setUsers(tempUsers);\r\n closePanel();\r\n };\r\n\r\n const deactivateUser = () => {\r\n const tempUsers = [...users];\r\n const tempUserIndex = users.findIndex(user => user.id === selectedUser.id);\r\n tempUsers[tempUserIndex].status = 'deactivated';\r\n setUsers(tempUsers);\r\n closePanel();\r\n };\r\n\r\n const lockUser = () => {\r\n closePanel();\r\n };\r\n\r\n const userHeaders = [\r\n { id: 'legalName', label: 'Name', width: '10rem' },\r\n { id: 'team', label: 'Team', width: '10rem' },\r\n { id: 'role', label: 'Role', width: '10rem' },\r\n { id: 'status', label: 'Status', width: '4rem' }\r\n ];\r\n\r\n return (\r\n {parseErrorMessage(error, 'en-US')}
}\r\n {isLoading && \r\n
\r\n \r\n Teams\r\n
\r\n \r\n } onClick={handleCreatePanelOpen}>Create Team\r\n
\r\n \r\n
\r\n {Object.keys(selectedTeam).length !== 0 && \r\n ({ label: team.teamName, value: team.teamId }))}\r\n onSelect={(e) => setSelectedTeam(e.target.value)}\r\n />\r\n
\r\n \r\n } onClick={handleEditPanelOpen}>Edit Team\r\n
\r\n \r\n
}\r\n \r\n
\r\n Name
\r\n {selectedTeam.name}
\r\n \r\n
\r\n Manager
\r\n {selectedTeam.manager}
\r\n \r\n
\r\n Branch
\r\n {selectedTeam.branch && selectedTeam.branch.name}
\r\n \r\n
\r\n Team Members
\r\n {selectedTeam.employees && selectedTeam.employees.length}
\r\n \r\n closePanel()}\r\n selectedUser={selectedUser}\r\n onCreateUser={addNewUser}\r\n onUpdateUser={updateSelectedUser}\r\n onDeactivateUser={deactivateUser}\r\n onLockUser={lockUser}\r\n />\r\n
\r\n );\r\n}\r\n","const usersInfo = [{\r\n id: '001',\r\n legalName: 'username 001',\r\n workEmail: 'email 001@gmail.com',\r\n team: 'sales',\r\n role: 'employee',\r\n status: 'active',\r\n canRequestCards: false\r\n}, {\r\n id: '002',\r\n legalName: 'username 002',\r\n workEmail: 'email 002@gmail.com',\r\n team: 'sales',\r\n role: 'manager',\r\n status: 'deactivated',\r\n canRequestCards: false\r\n}, {\r\n id: '003',\r\n legalName: 'username 003',\r\n workEmail: 'email 003@gmail.com',\r\n team: 'finance and administration',\r\n role: 'admin',\r\n status: 'active',\r\n canRequestCards: false\r\n}, {\r\n id: '004',\r\n legalName: 'username 004',\r\n workEmail: 'email 004@gmail.com',\r\n team: 'finance and administration',\r\n role: 'accountant',\r\n status: 'deactivated',\r\n canRequestCards: false\r\n}, {\r\n id: '005',\r\n legalName: 'username 005',\r\n workEmail: 'email 005@gmail.com',\r\n team: 'marketing',\r\n role: 'employee',\r\n status: 'active',\r\n canRequestCards: false\r\n}, {\r\n id: '006',\r\n legalName: 'username 006',\r\n workEmail: 'email 006@gmail.com',\r\n team: 'marketing',\r\n role: 'manager',\r\n status: 'deactivated',\r\n canRequestCards: false\r\n}, {\r\n id: '007',\r\n legalName: 'username 007',\r\n workEmail: 'email 007@gmail.com',\r\n team: 'operations',\r\n role: 'admin',\r\n status: 'active',\r\n canRequestCards: false\r\n}, {\r\n id: '008',\r\n legalName: 'username 008',\r\n workEmail: 'email 008@gmail.com',\r\n team: 'operations',\r\n role: 'accountant',\r\n status: 'deactivated',\r\n canRequestCards: false\r\n}, {\r\n id: '009',\r\n legalName: 'username 009',\r\n workEmail: 'email 009@gmail.com',\r\n team: 'product',\r\n role: 'employee',\r\n status: 'active',\r\n canRequestCards: false\r\n}, {\r\n id: '010',\r\n legalName: 'username 010',\r\n workEmail: 'email 010@gmail.com',\r\n team: 'product',\r\n role: 'manager',\r\n status: 'deactivated',\r\n canRequestCards: false\r\n}, {\r\n id: '011',\r\n legalName: 'username 011',\r\n workEmail: 'email 011@gmail.com',\r\n team: 'tech',\r\n role: 'admin',\r\n status: 'active',\r\n canRequestCards: false\r\n}, {\r\n id: '012',\r\n legalName: 'username 012',\r\n workEmail: 'email 012@gmail.com',\r\n team: 'tech',\r\n role: 'accountant',\r\n status: 'deactivated',\r\n canRequestCards: false\r\n}, {\r\n id: '013',\r\n legalName: 'username 013',\r\n workEmail: 'email 013@gmail.com',\r\n team: 'management',\r\n role: 'employee',\r\n status: 'active',\r\n canRequestCards: false\r\n}, {\r\n id: '014',\r\n legalName: 'username 014',\r\n workEmail: 'email 014@gmail.com',\r\n team: 'management',\r\n role: 'manager',\r\n status: 'deactivated',\r\n canRequestCards: false\r\n}, {\r\n id: '015',\r\n legalName: 'username 015',\r\n workEmail: 'email 015@gmail.com',\r\n team: 'other',\r\n role: 'admin',\r\n status: 'active',\r\n canRequestCards: false\r\n}, {\r\n id: '016',\r\n legalName: 'username 016',\r\n workEmail: 'email 016@gmail.com',\r\n team: 'other',\r\n role: 'accountant',\r\n status: 'deactivated',\r\n canRequestCards: false\r\n}];\r\n\r\nexport default usersInfo;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./users.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./users.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./users.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport './styles/usersExport.scss';\r\nimport ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';\r\nimport { ButtonBase } from '@mui/material';\r\nimport FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport MenuList from '@mui/material/MenuList';\r\nimport useUsersExport from '../../services/hooks/useUsersExport';\r\n\r\nexport default function UsersExport({ filters }) {\r\n const [\r\n exportUsersAsCsv,\r\n exportUsersAsPdf,\r\n targetElement,\r\n setTargetElement,\r\n closeExportDropdown] = useUsersExport(filters);\r\n\r\n const updateTargetElement = (event) => {\r\n setTargetElement(event.currentTarget);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n Users\r\n
\r\n \r\n } onClick={() => openCreateUserPanel()}>Create User\r\n
\r\n \r\n {error &&
\r\n \r\n \r\n \r\n
\r\n {users.length === 0 &&\r\n \r\n {users.length !== 0 &&
}\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\nUsersExport.propTypes = {\r\n filters: PropTypes.object\r\n};\r\n","import UsersExport from './UsersExport';\r\n\r\nexport default UsersExport;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./usersExport.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./usersExport.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./usersExport.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from 'components/common/Button';\r\nimport Switches from 'components/common/Switches/switches';\r\nimport ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';\r\nimport TextField from 'components/common/TextField/TextField';\r\nimport Dropdown from 'components/common/Dropdown/Dropdown';\r\nimport AutoComplete from 'components/common/AutoComplete';\r\nimport Chip from 'components/common/Chip';\r\nimport { ButtonBase } from '@mui/material';\r\nimport './styles/usersFilters.scss';\r\nimport UsersExport from '../UsersExport';\r\n\r\nexport default function UsersFilters({ onApplyFilters }) {\r\n const [searchTermFilter, setSearchTermFilter] = useState('');\r\n const [advancedOpen, setAdvancedOpen] = useState(false);\r\n const [userRoleFilter, setUserRoleFilter] = useState('');\r\n const [userStatusFilter, setUserStatusFilter] = useState('');\r\n const [userTeamFilter, setUserTeamFilter] = useState([]);\r\n\r\n const roles = [{\r\n value: 'employee',\r\n label: 'Employee'\r\n }, {\r\n value: 'manager',\r\n label: 'Manager'\r\n }, {\r\n value: 'admin',\r\n label: 'Admin'\r\n },\r\n {\r\n value: 'accountant',\r\n label: 'Accountant'\r\n }];\r\n\r\n const status = [{\r\n value: 'all',\r\n label: 'All'\r\n },\r\n {\r\n value: 'active',\r\n label: 'Active'\r\n },\r\n {\r\n value: 'locked',\r\n label: 'Locked'\r\n },\r\n {\r\n value: 'deactivated',\r\n label: 'Deactivated'\r\n }];\r\n\r\n const exampleUserTeams = ['sales', 'finance and administration', 'marketing', 'operations', 'product', 'tech', 'management', 'other'];\r\n\r\n const currentFilters = {\r\n searchTermFilter: searchTermFilter,\r\n userRoleFilter: userRoleFilter,\r\n userStatusFilter: userStatusFilter,\r\n userTeamFilter: userTeamFilter\r\n };\r\n\r\n const applyAdvancedSearchFilters = (e) => {\r\n e && e.preventDefault();\r\n setAdvancedOpen(false);\r\n onApplyFilters(currentFilters);\r\n };\r\n\r\n const updateUserRoleFilter = () => {\r\n setUserRoleFilter('');\r\n onApplyFilters({ ...currentFilters, userRoleFilter: '' });\r\n };\r\n\r\n const updateUserTeamFilter = (userTeam) => {\r\n const updatedUserTeamFilter = userTeamFilter.filter(team => team !== userTeam);\r\n setUserTeamFilter(updatedUserTeamFilter);\r\n onApplyFilters({ ...currentFilters, userTeamFilter: updatedUserTeamFilter });\r\n };\r\n\r\n const updateUserStatusFilter = () => {\r\n setUserStatusFilter('');\r\n onApplyFilters({ ...currentFilters, userStatusFilter: '' });\r\n };\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nUsersFilters.propTypes = {\r\n onApplyFilters: PropTypes.func.isRequired\r\n};\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./usersFilters.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./usersFilters.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./usersFilters.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from 'components/common/Button';\r\nimport { Divider } from '@mui/material';\r\nimport Switches from 'components/common/Switches/switches';\r\nimport Drawer from 'components/common/Drawer';\r\nimport TextField from 'components/common/TextField/TextField';\r\nimport './styles/userForm.scss';\r\nimport useUsers from '../../services/hooks/useUsers';\r\nimport Dropdown from 'components/common/Dropdown/Dropdown';\r\nimport RadioSelect from 'components/common/RadioSelect/RadioSelect';\r\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\r\n\r\nexport default function UserForm({ onClose, open, selectedUser, onCreateUser, onUpdateUser, onDeactivateUser, onLockUser }) {\r\n const [\r\n isLoading,\r\n error,\r\n editUser,\r\n setEditUser,\r\n userLegalName,\r\n setUserLegalName,\r\n userWorkEmail,\r\n setUserWorkEmail,\r\n userTeam,\r\n setUserTeam,\r\n userRole,\r\n setUserRole,\r\n canRequestCards,\r\n setCanRequestCards,\r\n submitUserForm,\r\n resetStates,\r\n deactivateSelectedUser,\r\n lockSelectedUser\r\n ] = useUsers(onCreateUser, onUpdateUser, onDeactivateUser, onLockUser, selectedUser);\r\n\r\n const userRoles = [\r\n { value: 'employee', label: 'Employee', description: 'Description of the role and the rights role has' },\r\n { value: 'manager', label: 'Manager', description: 'Description of the role and the rights role has' },\r\n { value: 'admin', label: 'Admin', description: 'Description of the role and the rights role has' },\r\n { value: 'accountant', label: 'Accountant', description: 'Description of the role and the rights role has' }\r\n ];\r\n\r\n const userTeams = [\r\n { value: 'sales', label: 'Sales' },\r\n { value: 'finance and administration', label: 'Finance and administration' },\r\n { value: 'marketing', label: 'Marketing' },\r\n { value: 'operations', label: 'Operations' },\r\n { value: 'product', label: 'Product' },\r\n { value: 'tech', label: 'Tech' },\r\n { value: 'management', label: 'Management' },\r\n { value: 'other', label: 'Other' }\r\n ];\r\n\r\n const capitalizeFirstLetter = str => str.charAt(0).toUpperCase() + str.slice(1);\r\n\r\n const closePanel = () => {\r\n resetStates();\r\n onClose();\r\n };\r\n\r\n const handleUserRoleSelect = val => setUserRole(val);\r\n\r\n const navigatePreviousPanel = () => {\r\n setEditUser(false);\r\n };\r\n\r\n return (\r\n \r\n \r\n setAdvancedOpen(!advancedOpen)}\r\n className=\"users-filters__search__advancedsearch\"\r\n >\r\n Advanced\r\n
\r\n {advancedOpen &&\r\n \r\n
\r\n \r\n
\r\n }\r\n {!advancedOpen &&\r\n \r\n
\r\n \r\n { setUserRoleFilter(e.target.value) }}\r\n inputProps={{\r\n 'data-testid': 'userRole-dropdown'\r\n }}\r\n />\r\n
\r\n \r\n setUserTeamFilter(val)}\r\n multiple\r\n />\r\n
\r\n \r\n { setUserStatusFilter(e.target.value) }}\r\n inputProps={{\r\n 'data-testid': 'userStatus-dropdown'\r\n }}\r\n />\r\n
\r\n \r\n {userRoleFilter && updateUserRoleFilter()}\r\n />\r\n }\r\n {userTeamFilter.map((userTeam) => (\r\n updateUserTeamFilter(userTeam)} />\r\n ))}\r\n {userStatusFilter && updateUserStatusFilter()}\r\n />\r\n }\r\n
\r\n }\r\n \r\n {!selectedUser &&\r\n \r\n \r\n }\r\n { selectedUser && !editUser &&\r\n \r\n \r\n }\r\n { selectedUser && editUser &&\r\n
\r\n \r\n Add user\r\n
\r\n Invite a user from your organization to join your Fuse account.
\r\n {selectedUser.legalName}
\r\n {capitalizeFirstLetter(selectedUser.status)}
\r\n Edit {selectedUser.legalName}
\r\n }\r\n \r\n {error && !isLoading &&
\r\n \r\n );\r\n}\r\n\r\nUserForm.propTypes = {\r\n onClose: PropTypes.func,\r\n open: PropTypes.bool,\r\n selectedUser: PropTypes.object,\r\n onCreateUser: PropTypes.func,\r\n onUpdateUser: PropTypes.func,\r\n onDeactivateUser: PropTypes.func,\r\n onLockUser: PropTypes.func\r\n};\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./userForm.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./userForm.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./userForm.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import PeopleContainer from './PeopleContainer';\r\n\r\nexport default PeopleContainer;\r\n","import { getUsers } from 'services/webApi';\r\nimport { useApi } from 'services/hooks';\r\n\r\nexport default function useGetUsers () {\r\n const [isLoading, error, callApi, setError] = useApi();\r\n\r\n const fetchUsersInfo = async (params) => {\r\n const response = await callApi(() => getUsers(params));\r\n return response;\r\n };\r\n\r\n return [\r\n isLoading,\r\n error,\r\n fetchUsersInfo\r\n ];\r\n}\r\n","import { useState, useEffect } from 'react';\r\nimport { createUser, updateUser, deactivateUser, lockUser } from 'services/webApi';\r\nimport { useApi } from 'services/hooks';\r\n\r\nexport default function useUsers (\r\n onCreateUser,\r\n onUpdateUser,\r\n onDeactivateUser,\r\n onLockUser,\r\n selectedUser\r\n) {\r\n const [isLoading, error, callApi, setError] = useApi();\r\n const [editUser, setEditUser] = useState(false);\r\n const [userRole, setUserRole] = useState('employee');\r\n const [userLegalName, setUserLegalName] = useState('');\r\n const [userWorkEmail, setUserWorkEmail] = useState('');\r\n const [userTeam, setUserTeam] = useState('');\r\n const [canRequestCards, setCanRequestCards] = useState(false);\r\n const [userStatus, setUserStatus] = useState('active');\r\n\r\n useEffect(() => {\r\n selectedUser && setUserLegalName(selectedUser.legalName);\r\n selectedUser && setUserWorkEmail(selectedUser.workEmail);\r\n selectedUser && setUserTeam(selectedUser.team);\r\n selectedUser && setUserRole(selectedUser.role);\r\n selectedUser && setCanRequestCards(selectedUser.canRequestCards);\r\n }, [selectedUser]);\r\n\r\n const addUser = async (params) => {\r\n const response = await callApi(() => createUser(params));\r\n if (response) {\r\n const createdUser = { ...response.createdUser };\r\n onCreateUser(createdUser);\r\n resetStates();\r\n }\r\n };\r\n\r\n const updateSelectedUser = async (params) => {\r\n const response = await callApi(() => updateUser(params));\r\n if (response) {\r\n const updatedUser = { ...response.updatedUser };\r\n onUpdateUser(updatedUser);\r\n resetStates();\r\n }\r\n };\r\n\r\n const deactivateSelectedUser = async (userId) => {\r\n const response = await callApi(() => deactivateUser(userId));\r\n if (response.success) {\r\n onDeactivateUser();\r\n resetStates();\r\n }\r\n };\r\n\r\n const lockSelectedUser = async (userId) => {\r\n const response = await callApi(() => lockUser(userId));\r\n if (response.success) {\r\n onLockUser();\r\n resetStates();\r\n }\r\n };\r\n\r\n const submitUserForm = async (e) => {\r\n e && e.preventDefault();\r\n const user = {\r\n id: selectedUser ? selectedUser.id : '0011',\r\n legalName: userLegalName,\r\n workEmail: userWorkEmail,\r\n team: userTeam,\r\n role: userRole,\r\n canRequestCards: canRequestCards,\r\n status: userStatus\r\n };\r\n if (selectedUser) {\r\n updateSelectedUser(user);\r\n } else {\r\n addUser(user);\r\n }\r\n };\r\n\r\n const resetStates = () => {\r\n setUserLegalName('');\r\n setUserWorkEmail('');\r\n setUserTeam('');\r\n setUserRole('employee');\r\n setCanRequestCards(false);\r\n setEditUser(false);\r\n setError(null);\r\n };\r\n\r\n return [\r\n isLoading,\r\n error,\r\n editUser,\r\n setEditUser,\r\n userLegalName,\r\n setUserLegalName,\r\n userWorkEmail,\r\n setUserWorkEmail,\r\n userTeam,\r\n setUserTeam,\r\n userRole,\r\n setUserRole,\r\n canRequestCards,\r\n setCanRequestCards,\r\n submitUserForm,\r\n resetStates,\r\n deactivateSelectedUser,\r\n lockSelectedUser\r\n ];\r\n}\r\n","import { useState } from 'react';\r\nimport { getUsersCsv, getUsersPdf } from 'services/webApi';\r\nimport { useApi } from 'services/hooks';\r\n\r\nexport default function useUsersExport (filters) {\r\n const [isLoading, error, callApi, setError] = useApi();\r\n const [targetElement, setTargetElement] = useState(null);\r\n\r\n const closeExportDropdown = () => {\r\n setTargetElement(null);\r\n };\r\n\r\n const exportUsersAsCsv = async () => {\r\n closeExportDropdown();\r\n const response = await callApi(() => getUsersCsv(filters));\r\n if (response) {\r\n // Code here to download the csv file\r\n // console.log(response);\r\n }\r\n if (error) {\r\n /* eslint-disable no-console */\r\n console.log(error);\r\n /* eslint-enable no-console */\r\n }\r\n };\r\n\r\n const exportUsersAsPdf = async () => {\r\n closeExportDropdown();\r\n const response = await callApi(() => getUsersPdf(filters));\r\n if (response) {\r\n // Code here to download the csv file\r\n // console.log(response);\r\n }\r\n if (error) {\r\n /* eslint-disable no-console */\r\n console.log(error);\r\n /* eslint-enable no-console */\r\n }\r\n };\r\n\r\n return [\r\n exportUsersAsCsv,\r\n exportUsersAsPdf,\r\n targetElement,\r\n setTargetElement,\r\n closeExportDropdown\r\n ];\r\n}\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./people.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./people.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./people.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport RailzConnect from '@railzai/railz-connect';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport { Modal } from '@mui/material';\r\nimport './styles/railzConnection.scss';\r\n\r\nexport default function RailzConnection({ isOpen, onClose, railzValidationInfo, redirectUrl }) {\r\n const scriptLoaded = () => {\r\n try {\r\n const widget = new window.RailzConnect();\r\n\r\n widget.mount({\r\n parentElement: document.getElementById('railz-connect'),\r\n widgetId: railzValidationInfo?.widgetId,\r\n // Should be bussinessName, but this is what is being returned and backend team asked to use it as is.\r\n businessName: railzValidationInfo?.bussinesName,\r\n redirectUrl: redirectUrl + '?railzConnection=success',\r\n headerEnabled: false,\r\n serviceFilterEnabled: true,\r\n brandColor: '1EBEC1',\r\n accentColor: '1EBEC1',\r\n removeRailzWatermark: true\r\n });\r\n } catch (error) {\r\n /* eslint-disable no-console */\r\n console.error(error);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n const script = document.createElement('script');\r\n script.type = 'text/javascript';\r\n script.src = 'https://connect.railz.ai/v1/railz-connect.js';\r\n script.onload = () => scriptLoaded();\r\n document.body.appendChild(script);\r\n return () => {\r\n document.body.removeChild(script);\r\n };\r\n }, [isOpen]);\r\n\r\n return (\r\n \r\n {parseErrorMessage(error)}\r\n
}\r\n \r\n {(!selectedUser || (selectedUser && !editUser)) &&\r\n \r\n }\r\n {!selectedUser &&\r\n \r\n }\r\n { selectedUser && editUser &&\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 Inbox\r\n
\r\n \r\n Uploaded documents unattached to a transaction. Unattached files will be deleted after 45 days in the inbox.\r\n
\r\n \r\n {error && !isLoading &&
\r\n \r\n );\r\n}\r\n\r\nReceiptsInbox.propTypes = {\r\n open: PropTypes.bool,\r\n onClose: PropTypes.func\r\n};\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./receiptsInbox.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./receiptsInbox.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./receiptsInbox.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from 'components/common/Button';\r\nimport { parseErrorMessage } from 'services/webApi';\r\nimport ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';\r\nimport { ButtonBase, Modal } from '@mui/material';\r\nimport Dropdown from 'components/common/Dropdown';\r\nimport { Box } from '@mui/system';\r\nimport ReceiptItem from './components';\r\nimport LoadingSpinner from 'components/common/LoadingSpinner';\r\nimport './styles/receiptsList.scss';\r\n\r\nexport default function ReceiptsList({\r\n selectedReceipt,\r\n setSelectedReceipt,\r\n sortOrder = 'asc',\r\n sortCategory = 'createdAt',\r\n onSortCategoryChange = () => {},\r\n onSortOrderChange = () => {},\r\n data,\r\n loading,\r\n error,\r\n onDelete\r\n}) {\r\n const [deleteReceiptId, setDeleteReceiptId] = useState('');\r\n\r\n const locale = 'en-US'; // Temporary locale setting\r\n\r\n const filterTypes = [\r\n { value: 'CreatedAt', label: 'Date' },\r\n { value: 'UserName', label: 'User' },\r\n { value: 'Name', label: 'Name' }\r\n ];\r\n\r\n const handleReceiptDelete = async (receiptId) => {\r\n setDeleteReceiptId('');\r\n onDelete(receiptId);\r\n };\r\n\r\n return (\r\n \r\n {parseErrorMessage(error, locale)}\r\n
}\r\n \r\n \r\n null}>\r\n
\r\n \r\n setDeleteReceiptId('')}>\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nReceiptsList.propTypes = {\r\n selectedReceipt: PropTypes.string,\r\n setSelectedReceipt: PropTypes.func,\r\n sortOrder: PropTypes.string,\r\n sortCategory: PropTypes.string,\r\n onSortCategoryChange: PropTypes.func,\r\n onSortOrderChange: PropTypes.func,\r\n data: PropTypes.array,\r\n loading: PropTypes.bool,\r\n error: PropTypes.string,\r\n onDelete: PropTypes.func\r\n};\r\n","import { connect } from 'react-redux';\r\nimport ReceiptsList from './ReceiptsList';\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ReceiptsList);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport DeleteIcon from '@mui/icons-material/Delete';\r\nimport tempImage from 'components/auth/AuthCardContainer/assets/fuse_auth.png';\r\nimport './styles/receiptItem.scss';\r\n\r\nexport default function ReceiptItem({\r\n receipt,\r\n selected = false,\r\n setSelectedReceipt = null,\r\n onDelete\r\n}) {\r\n const isObj = typeof receipt.attachment === 'object';\r\n const obj = isObj ? receipt.attachment : {};\r\n\r\n const getImage = () => {\r\n const attachment = isObj ? obj : receipt;\r\n const file = attachment?.file;\r\n if (file) {\r\n return `data:${attachment.attachmentMimeType};base64,${file}`;\r\n }\r\n return tempImage;\r\n };\r\n\r\n return (\r\n Delete File
\r\n \r\n Are you sure you want to delete this file? Deleted files cannot be\r\n recovered.\r\n
\r\n \r\n \r\n handleReceiptDelete(deleteReceiptId)}\r\n >\r\n Delete\r\n \r\n
\r\n \r\n onSortCategoryChange(e)}\r\n size='small'\r\n />\r\n onSortOrderChange()}\r\n >\r\n
\r\n {loading && (\r\n Sort By
\r\n \r\n
\r\n )}\r\n {error && !loading && (\r\n \r\n {parseErrorMessage(error, locale)}\r\n
\r\n )}\r\n {!loading && (\r\n \r\n {!loading &&\r\n data.map((receipt, index) => (\r\n setSelectedReceipt(receipt.receiptId)}\r\n onDelete={() => setDeleteReceiptId(receipt.receiptId)}\r\n />\r\n ))}\r\n
\r\n )}\r\n \r\n
\r\n \r\n {isObj ? obj.attachmentName : receipt.attachmentName}\r\n
\r\n \r\n {new Date(receipt.createdAt * 1000).toLocaleDateString('default', {\r\n month: 'short',\r\n day: 'numeric',\r\n year: 'numeric'\r\n })}{' '}\r\n - {receipt.userName}\r\n
\r\n \r\n handleTransactionPanelClose()}\r\n transactionInfo={selectedTransaction}\r\n transactions={transactions}\r\n setTransactions={setTransactions}\r\n glCodes={glCodes}\r\n showInboxOnly={showInbox}\r\n glCodesLoading={glCodesLoading}\r\n updateInboxCount={updateInboxCount}\r\n updateMissingsCount={updateMissingsCount}\r\n />\r\n closeStatementPanel()}\r\n />\r\n closeReceiptsInbox()}\r\n />\r\n setAlertOpen(false)}\r\n >\r\n {alertMessage.message}\r\n \r\n
\r\n );\r\n}\r\n\r\nTransactions.propTypes = {\r\n children: PropTypes.node\r\n};\r\n","import { connect } from 'react-redux';\r\nimport Transactions from './Transactions';\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Transactions);\r\n","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from 'components/common/Button';\r\nimport ArrowForwardIcon from '@mui/icons-material/ArrowForward';\r\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack';\r\nimport 'react-responsive-carousel/lib/styles/carousel.min.css';\r\nimport { Carousel } from 'react-responsive-carousel';\r\nimport './styles/cardsCardContainer.scss';\r\nimport CardsCard from 'components/CardsCard';\r\nimport { createNestedArray } from 'services/arrays';\r\n\r\nexport default function CardsCardContainer({\r\n cardsData,\r\n onSelectCard,\r\n selectedCard,\r\n setError\r\n}) {\r\n const cardArray = createNestedArray(cardsData, 3);\r\n return (\r\n Transactions
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Transactions\r\n
\r\n \r\n {totalRows}\r\n
\r\n \r\n
\r\n \r\n Missing Receipts\r\n
\r\n \r\n {missingsCount}\r\n
\r\n \r\n \r\n filterMissingRef.current && filterMissingRef.current()\r\n }\r\n >\r\n
\r\n \r\n
\r\n \r\n Inbox\r\n
\r\n \r\n {inboxCount}\r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n openStatementPanel();\r\n }}\r\n >\r\n Statements\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n hasPrev && (\r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n renderArrowNext={(onClickHandler, hasNext, label) =>\r\n hasNext && (\r\n \r\n \r\n
\r\n )\r\n }\r\n >\r\n {cardArray.slice(0).map((subArray) => {\r\n return (\r\n \r\n {subArray.map((cardsData, index) => {\r\n return (\r\n
\r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nTransactionExport.propTypes = {\r\n filters: PropTypes.object\r\n};\r\n","import TransactionExport from './TransactionExport';\r\n\r\nexport default TransactionExport;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./transactionExport.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./transactionExport.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./transactionExport.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';\r\nimport Button from 'components/common/Button';\r\nimport { ButtonBase } from '@mui/material';\r\nimport TextField from 'components/common/TextField/TextField';\r\nimport { DatePicker } from '@mui/lab';\r\nimport AutoComplete from 'components/common/AutoCompleteNew';\r\nimport Checkbox from 'components/common/Checkbox';\r\nimport Switches from 'components/common/Switches';\r\nimport Chip from 'components/common/Chip';\r\nimport TransactionExport from '../TransactionExport';\r\nimport { getGlCodes, getCompanyTeams } from '../../../../services/webApi';\r\nimport './styles/transactionFilters.scss';\r\n\r\nexport default function TransactionFilters({\r\n onApplyFilters,\r\n glCodes,\r\n glCodesLoading,\r\n filterRef\r\n}) {\r\n const currentDate = new Date(Date.now() + 60 * 60 * 1000);\r\n\r\n // state for search filters\r\n const [searchTermFilter, setSearchTermFilter] = useState('');\r\n\r\n // states for advanced filters\r\n const [advancedOpen, setAdvancedOpen] = useState(false);\r\n const [startDateFilter, setStartDateFilter] = useState(null);\r\n const [endDateFilter, setEndDateFilter] = useState(null);\r\n const [glCodeFilter, setGlCodeFilter] = useState([]);\r\n const [teamFilter, setTeamFilter] = useState([]);\r\n const [cardTypeFilter, setCardTypeFilter] = useState({\r\n physical: false,\r\n virtual: false\r\n });\r\n const [receiptStatusFilter, setReceiptStatusFilter] = useState({\r\n attached: false,\r\n missing: false\r\n });\r\n const [transactionStatusFilter, setTransactionStatusFilter] = useState(false);\r\n const [teamsLoading, setTeamsLoading] = useState(false);\r\n const [companyTeams, setCompanyTeams] = useState([]);\r\n\r\n const onTeamsOpen = async () => {\r\n if (!companyTeams.length) {\r\n setTeamsLoading(true);\r\n const res = await getCompanyTeams();\r\n setCompanyTeams(res?.data?.result || []);\r\n setTeamsLoading(false);\r\n }\r\n };\r\n\r\n const currentFilters = {\r\n searchTermFilter: searchTermFilter,\r\n startDateFilter: startDateFilter,\r\n endDateFilter: endDateFilter,\r\n glCodeFilter: glCodeFilter,\r\n teamFilter: teamFilter,\r\n cardTypeFilter: cardTypeFilter,\r\n receiptStatusFilter: receiptStatusFilter,\r\n transactionStatusFilter: transactionStatusFilter\r\n };\r\n\r\n const getCapitalizedString = (str) =>\r\n str.charAt(0).toUpperCase() + str.slice(1);\r\n\r\n const getFormattedDate = (date) => {\r\n let year = date.getFullYear();\r\n let month = (1 + date.getMonth()).toString().padStart(2, '0');\r\n let day = date.getDate().toString().padStart(2, '0');\r\n return month + '/' + day + '/' + year;\r\n };\r\n\r\n const addGlCodes = (e, value) => {\r\n setGlCodeFilter(value);\r\n };\r\n\r\n const addTeams = (e, value) => {\r\n setTeamFilter(value);\r\n };\r\n\r\n const addCardType = (e) => {\r\n setCardTypeFilter({\r\n ...cardTypeFilter,\r\n [e.target.name]: e.target.checked\r\n });\r\n };\r\n\r\n const addReceiptStatus = (name, checked) => {\r\n setReceiptStatusFilter({\r\n ...receiptStatusFilter,\r\n [name]: checked\r\n });\r\n };\r\n\r\n const updateTransactionStatus = (e) => {\r\n setTransactionStatusFilter(!!e.target.checked);\r\n };\r\n\r\n const applyAdvancedSearchFilters = (e) => {\r\n e && e.preventDefault();\r\n setAdvancedOpen(false);\r\n onApplyFilters(currentFilters);\r\n };\r\n\r\n const updateDateFilter = () => {\r\n setStartDateFilter(null);\r\n setEndDateFilter(null);\r\n onApplyFilters({\r\n ...currentFilters,\r\n startDateFilter: null,\r\n endDateFilter: null\r\n });\r\n };\r\n\r\n const updateglCodeFilter = (selectedGlCode) => {\r\n const updatedGlCodeFilter = glCodeFilter.filter(\r\n (glCode) => glCode !== selectedGlCode\r\n );\r\n setGlCodeFilter(updatedGlCodeFilter);\r\n onApplyFilters({ ...currentFilters, glCodeFilter: updatedGlCodeFilter });\r\n };\r\n\r\n const updateTeamFilter = (selectedTeam) => {\r\n const updatedTeamFilter = teamFilter.filter(\r\n (team) => team !== selectedTeam\r\n );\r\n setTeamFilter(updatedTeamFilter);\r\n onApplyFilters({ ...currentFilters, teamFilter: updatedTeamFilter });\r\n };\r\n\r\n const updateCardTypeFilter = (cardType) => {\r\n if (cardType === 'physical' || cardType === 'virtual') {\r\n setCardTypeFilter({ ...cardTypeFilter, [cardType]: false });\r\n onApplyFilters({\r\n ...currentFilters,\r\n cardTypeFilter: { ...cardTypeFilter, [cardType]: false }\r\n });\r\n } else {\r\n setCardTypeFilter({ ...cardTypeFilter });\r\n onApplyFilters(currentFilters);\r\n }\r\n };\r\n\r\n const updateReceiptStatusFilter = (receiptStatus) => {\r\n if (receiptStatus === 'attached') {\r\n setReceiptStatusFilter({ ...receiptStatusFilter, attached: false });\r\n onApplyFilters({\r\n ...currentFilters,\r\n receiptStatusFilter: { ...receiptStatusFilter, attached: false }\r\n });\r\n } else if (receiptStatus === 'missing') {\r\n setReceiptStatusFilter({ ...receiptStatusFilter, missing: false });\r\n onApplyFilters({\r\n ...currentFilters,\r\n receiptStatusFilter: { ...receiptStatusFilter, missing: false }\r\n });\r\n } else {\r\n setReceiptStatusFilter({ ...receiptStatusFilter });\r\n onApplyFilters(currentFilters);\r\n }\r\n };\r\n\r\n const updateTransactionStatusFilter = () => {\r\n setTransactionStatusFilter(false);\r\n onApplyFilters({ ...currentFilters, transactionStatusFilter: false });\r\n };\r\n\r\n const renderChip = (filterParam) => {\r\n return Object.keys(filterParam).map((key) => {\r\n return (\r\n filterParam[key] && (\r\n \r\n
\r\n );\r\n}\r\n\r\nTransactionFilters.propTypes = {\r\n onApplyFilters: PropTypes.func,\r\n glCodes: PropTypes.array,\r\n glCodesLoading: PropTypes.bool,\r\n filterRef: PropTypes.object\r\n};\r\n","import TransactionFilters from './TransactionFilters';\r\n\r\nexport default TransactionFilters;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./transactionFilters.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./transactionFilters.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./transactionFilters.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import TransactionsContainer from './TransactionsContainer';\r\n\r\nexport default TransactionsContainer;\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./transactions.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./transactions.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./transactions.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","const transactionsData = [\r\n {\r\n id: '00001',\r\n date: '2022-06-08',\r\n cardHolder: 'Jim Halpert',\r\n department: 'Sales',\r\n cardNickname: 'Test card 1',\r\n cardNumber: '1234 2345 3456 4567',\r\n transactionDescription: 'Dinner',\r\n transactionBankDetail: 'AMZN*123456789',\r\n transactionItemList: [{ glCode: '12345', amount: 93.45 }, { glCode: '1357', amount: 10 }, { glCode: '1357', amount: 20 }],\r\n glCode: { label:'12345', id:'1' },\r\n tags: ['Tag 1'],\r\n amount: 123.45,\r\n status: 'complete',\r\n receiptId: null\r\n },\r\n {\r\n id: '00002',\r\n date: '2022-06-09',\r\n cardHolder: 'Dwight Schrute',\r\n department: 'Sales',\r\n cardNickname: 'Test card 2',\r\n cardNumber: '1234 2345 3456 4567',\r\n transactionDescription: 'Amazon',\r\n transactionBankDetail: 'AMZN*123456789',\r\n transactionItemList: [{ glCode: '12345', amount: 100 }, { glCode: '1357', amount: 134.56 }],\r\n glCode: { label:'12345', id:'1' },\r\n tags: ['Tag 1', 'Tag 2', 'Tag 3'],\r\n amount: 234.56,\r\n status: 'declined',\r\n receiptId: '00002'\r\n },\r\n {\r\n id: '00003',\r\n date: '2022-06-10',\r\n cardHolder: 'Kevin Malone',\r\n department: 'Accounting',\r\n cardNickname: 'Test card 3',\r\n cardNumber: '1234 2345 3456 4567',\r\n transactionDescription: 'Amazon',\r\n transactionBankDetail: 'AMZN*123456789',\r\n transactionItemList: [{ glCode: '12345', amount: 887.56 }],\r\n glCode: { label:'12345', id:'1' },\r\n tags: ['Tag 1', 'Tag 2'],\r\n amount: 887.56,\r\n status: 'pending',\r\n receiptId: null\r\n },\r\n {\r\n id: '00004',\r\n date: '2022-06-08',\r\n cardHolder: 'Jim Halpert',\r\n department: 'Sales',\r\n cardNickname: 'Test card 1',\r\n cardNumber: '1234 2345 3456 4567',\r\n transactionDescription: 'Dinner',\r\n transactionBankDetail: 'AMZN*123456789',\r\n glCode: { label:'12345', id:'1' },\r\n tags: ['Tag 1', 'Tag 2', 'Tag 3'],\r\n amount: 444.45,\r\n status: 'complete',\r\n receiptId: null\r\n },\r\n {\r\n id: '00005',\r\n date: '2022-06-09',\r\n cardHolder: 'Dwight Schrute',\r\n department: 'Sales',\r\n cardNickname: 'Test card 2',\r\n cardNumber: '1234 2345 3456 4567',\r\n transactionDescription: 'Amazon',\r\n transactionBankDetail: 'AMZN*123456789',\r\n glCode: { label:'12345', id:'1' },\r\n tags: ['Tag 1'],\r\n amount: 555.56,\r\n status: 'declined',\r\n receiptId: null\r\n },\r\n {\r\n id: '00006',\r\n date: '2022-06-10',\r\n cardHolder: 'Kevin Malone',\r\n department: 'Accounting',\r\n cardNickname: 'Test card 3',\r\n cardNumber: '1234 2345 3456 4567',\r\n transactionDescription: 'Amazon',\r\n transactionBankDetail: 'AMZN*123456789',\r\n glCode: { label:'12345', id:'1' },\r\n tags: ['Tag 1', 'Tag 2'],\r\n amount: 967.56,\r\n status: 'pending',\r\n receiptId: null\r\n },\r\n {\r\n id: '00007',\r\n date: '2022-06-08',\r\n cardHolder: 'Jim Halpert',\r\n department: 'Sales',\r\n cardNickname: 'Test card 1',\r\n cardNumber: '1234 2345 3456 4567',\r\n transactionDescription: 'Dinner',\r\n transactionBankDetail: 'AMZN*123456789',\r\n glCode: { label:'12345', id:'1' },\r\n tags: ['Tag 3'],\r\n amount: 55.45,\r\n status: 'complete',\r\n receiptId: null\r\n },\r\n {\r\n id: '00008',\r\n date: '2022-06-09',\r\n cardHolder: 'Dwight Schrute',\r\n department: 'Sales',\r\n cardNickname: 'Test card 12',\r\n cardNumber: '1234 2345 3456 4567',\r\n transactionDescription: 'Amazon',\r\n transactionBankDetail: 'AMZN*123456789',\r\n glCode: { label:'12345', id:'1' },\r\n tags: ['Tag 2'],\r\n amount: 24.56,\r\n status: 'declined',\r\n receiptId: true\r\n },\r\n {\r\n id: '00009',\r\n date: '2022-06-10',\r\n cardHolder: 'Kevin Malone',\r\n department: 'Accounting',\r\n cardNickname: 'Test card 13',\r\n cardNumber: '1234 2345 3456 4567',\r\n transactionDescription: 'Amazon',\r\n transactionBankDetail: 'AMZN*123456789',\r\n glCode: { label:'12345', id:'1' },\r\n tags: ['Tag 1'],\r\n amount: 54.75,\r\n status: 'pending',\r\n receiptId: null\r\n },\r\n {\r\n id: '00010',\r\n date: '2022-06-08',\r\n cardHolder: 'Jim Halpert',\r\n department: 'Sales',\r\n cardNickname: 'Test card 1',\r\n cardNumber: '1234 2345 3456 4567',\r\n transactionDescription: 'Dinner',\r\n transactionBankDetail: 'AMZN*123456789',\r\n glCode: { label:'12345', id:'1' },\r\n tags: ['Tag 1', 'Tag 2', 'Tag 3'],\r\n amount: 444.32,\r\n status: 'complete',\r\n receiptId: null\r\n },\r\n {\r\n id: '00011',\r\n date: '2022-06-09',\r\n cardHolder: 'Dwight Schrute',\r\n department: 'Sales',\r\n cardNickname: 'Test card 22',\r\n cardNumber: '1234 2345 3456 4567',\r\n transactionDescription: 'Amazon',\r\n transactionBankDetail: 'AMZN*123456789',\r\n glCode: { label:'12345', id: '1' },\r\n tags: ['Tag 1', 'Tag 2'],\r\n amount: 234.56,\r\n status: 'declined',\r\n receiptId: null\r\n },\r\n {\r\n id: '00012',\r\n date: '2022-06-10',\r\n cardHolder: 'Kevin Malone',\r\n department: 'Accounting',\r\n cardNickname: 'Test card 33',\r\n cardNumber: '1234 2345 3456 4567',\r\n transactionDescription: 'Amazon',\r\n transactionBankDetail: 'AMZN*123456789',\r\n glCode: { label:'12345', id:'1' },\r\n tags: ['Tag 1', 'Tag 2'],\r\n amount: 654.32,\r\n status: 'pending',\r\n receiptId: null\r\n }\r\n];\r\n\r\nexport default transactionsData;\r\n","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Drawer from 'components/common/Drawer';\r\nimport Button from 'components/common/Button';\r\nimport { Divider } from '@mui/material';\r\nimport { getTags, getTaxCodes, parseErrorMessage } from 'services/webApi';\r\nimport TextField from 'components/common/TextField';\r\nimport AutoComplete from 'components/common/AutoCompleteNew';\r\nimport TaxCode from 'components/CardForm/components/TaxCode';\r\nimport GlCode from 'components/CardForm/components/GlCode';\r\nimport useTransactionsBulkEdit from './hooks/useTransactionsBulkEdit';\r\nimport './styles/transactionsBulkEdit.scss';\r\n\r\nexport default function TransactionsBulkEdit({\r\n open,\r\n onClose,\r\n transactionsSelection,\r\n setAlertOpen,\r\n setAlertMessage,\r\n glCodes,\r\n glCodesLoading,\r\n transactions,\r\n setTransactions\r\n}) {\r\n const [\r\n isLoading,\r\n error,\r\n saveTransactionChanges,\r\n changesActive,\r\n closePanel,\r\n description,\r\n setDescription,\r\n glCode,\r\n setGlCode,\r\n taxCode,\r\n setTaxCode,\r\n tags,\r\n setTags,\r\n tagsList,\r\n setTagsList,\r\n memo,\r\n setMemo\r\n ] = useTransactionsBulkEdit(\r\n transactionsSelection,\r\n setAlertOpen,\r\n setAlertMessage,\r\n onClose,\r\n transactions,\r\n setTransactions\r\n );\r\n const [loading, setLoading] = useState({\r\n taxcode: false,\r\n tagsList: false\r\n });\r\n\r\n const updateLoading = (action, name) => {\r\n setLoading((prev) => ({ ...prev, [name]: action }));\r\n };\r\n\r\n useEffect(() => {\r\n getTagsList();\r\n }, []);\r\n\r\n const getTagsList = async () => {\r\n try {\r\n updateLoading(true, 'tagsList');\r\n const response = await getTags();\r\n setTagsList(response.data.result);\r\n updateLoading(false, 'tagsList');\r\n } catch (error) {\r\n setTagsList([]);\r\n }\r\n };\r\n\r\n return (\r\n \r\n applyAdvancedSearchFilters(e)}\r\n id='searchForm'\r\n className='transaction-filters__search__form'\r\n >\r\n setAdvancedOpen(!advancedOpen)}\r\n className='transaction-filters__search__advancedsearch'\r\n >\r\n Advanced\r\n
\r\n {advancedOpen && (\r\n \r\n
\r\n \r\n
\r\n )}\r\n {!advancedOpen && (\r\n \r\n
\r\n \r\n setStartDateFilter(val)}\r\n inputFormat='MM/dd/yyyy'\r\n renderInput={(params) => setEndDateFilter(val)}\r\n inputFormat='MM/dd/yyyy'\r\n renderInput={(params) =>
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n Card Type\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n Receipts\r\n
\r\n \r\n \r\n addReceiptStatus('attached', e.target.checked)\r\n }\r\n />\r\n \r\n addReceiptStatus('missing', e.target.checked)\r\n }\r\n />\r\n
\r\n \r\n
\r\n \r\n Transaction Status\r\n
\r\n \r\n
\r\n \r\n Show Pending and Declined\r\n
\r\n \r\n
\r\n \r\n {startDateFilter && endDateFilter && (\r\n updateDateFilter()}\r\n />\r\n )}\r\n {glCodeFilter.map((glCode, i) => (\r\n updateglCodeFilter(glCode)}\r\n />\r\n ))}\r\n {teamFilter.map((team, i) => (\r\n updateTeamFilter(team)}\r\n />\r\n ))}\r\n {(cardTypeFilter.physical || cardTypeFilter.virtual) &&\r\n // !(cardTypeFilter.physical && cardTypeFilter.virtual) &&\r\n renderChip(cardTypeFilter)}\r\n {(receiptStatusFilter.attached || receiptStatusFilter.missing) &&\r\n // !(receiptStatusFilter.attached && receiptStatusFilter.missing) &&\r\n renderChip(receiptStatusFilter)}\r\n {transactionStatusFilter && (\r\n updateTransactionStatusFilter(false)}\r\n />\r\n )}\r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n Edit Transaction\r\n
\r\n \r\n Changes will be applied to all selected transactions.\r\n
\r\n Accounting
\r\n \r\n setDescription(val)}\r\n />\r\n setGlCode(value)}\r\n />\r\n setTaxCode(e.target.value)}\r\n />\r\n
\r\n\r\n Advanced
\r\n \r\n setTags(val)}\r\n multiple\r\n />\r\n setMemo(val)}\r\n />\r\n
\r\n \r\n {error && !isLoading && (\r\n
\r\n \r\n {parseErrorMessage(error, 'en-US')}\r\n
\r\n )}\r\n \r\n \r\n saveTransactionChanges()}\r\n >\r\n Save Changes\r\n \r\n
\r\n \r\n
\r\n \r\n Statements\r\n
\r\n \r\n Download official monthly statements\r\n
\r\n \r\n
\r\n \r\n Select a year\r\n
\r\n \r\n ({ value: item, label: item }))}\r\n onChange={(e) => updateStatementsList(e.target.value)} />\r\n
\r\n \r\n
\r\n \r\n Available PDFs\r\n
\r\n \r\n { isStatementListLoading &&
\r\n downloadTransactionStatement(month, year)} key={id}>\r\n
\r\n )}\r\n \r\n
\r\n \r\n {month} {date}, {year}\r\n
\r\n \r\n {statementListError && !isLoading && {successMessage} }\r\n
\r\n \r\n {parseErrorMessage(statementListError, locale)}\r\n
}\r\n {error && !isLoading && \r\n {parseErrorMessage(error, locale)}\r\n
}\r\n {successMessage && \r\n \r\n downloadTransactionStatement(null, statementYear)}>\r\n
\r\n \r\n {error && (\r\n setIsBulkUpdatePanelOpen(false)}\r\n setAlertOpen={setAlertOpen}\r\n setAlertMessage={setAlertMessage}\r\n transactionsSelection={transactionsSelection}\r\n glCodes={glCodes}\r\n glCodesLoading={glCodesLoading}\r\n transactions={transactions}\r\n setTransactions={setTransactions}\r\n />\r\n )}\r\n {transactions && !isLoading && !error && (\r\n \r\n {transactionsSelection.length > 0 && (\r\n \r\n \r\n
\r\n {transactions.length === 0 && (\r\n \r\n {transactions.length !== 0 && (\r\n \r\n )}\r\n
\r\n );\r\n}\r\n\r\nTransactionsTable.propTypes = {\r\n onApplyPagination: PropTypes.func,\r\n isLoading: PropTypes.bool,\r\n error: PropTypes.string,\r\n transactions: PropTypes.arrayOf(PropTypes.object),\r\n totalRows: PropTypes.number,\r\n pageNumber: PropTypes.number,\r\n setPageNumber: PropTypes.func,\r\n rowsPerPage: PropTypes.number,\r\n setRowsPerPage: PropTypes.func,\r\n rowsPerPageOptions: PropTypes.array,\r\n order: PropTypes.string,\r\n setOrder: PropTypes.func,\r\n orderBy: PropTypes.string,\r\n setOrderBy: PropTypes.func,\r\n setSelectedTransaction: PropTypes.func,\r\n setAlertOpen: PropTypes.func,\r\n setAlertMessage: PropTypes.func,\r\n setTransactions: PropTypes.func,\r\n glCodes: PropTypes.array,\r\n glCodesLoading: PropTypes.bool\r\n};\r\n","import { connect } from 'react-redux';\r\nimport TransactionsTable from './TransactionsTable';\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(TransactionsTable);\r\n","import TransactionsTableContainer from './TransactionsTableContainer';\r\n\r\nexport default TransactionsTableContainer;\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./transactionsTable.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./transactionsTable.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./transactionsTable.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","const userAccount = {\r\n type: 'owner',\r\n name: 'Bill Bilson',\r\n email: 'bilson@company.com',\r\n team: 'management',\r\n role: 'employee',\r\n phone: '+1 5198887777',\r\n dateOfBirth: 'January 01, 1994',\r\n address: {\r\n street1: '425 Albert Street',\r\n street2: '',\r\n city: 'Toronto',\r\n province: 'ON',\r\n country: 'Canada',\r\n postalCode: 'M1C N7X'\r\n },\r\n company: {\r\n name: 'Testing Co.',\r\n address: '123 Testing St',\r\n employeeSize: 10\r\n }\r\n};\r\n\r\nexport default userAccount;\r\n","import React from 'react';\r\nimport { Divider, InputAdornment } from '@mui/material';\r\nimport Button from 'components/common/Button';\r\nimport PropTypes from 'prop-types';\r\nimport './styles/userProfile.scss';\r\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\r\nimport TextField from 'components/common/TextField';\r\nimport useProfile from 'components/UserProfile/services/hooks/useProfile';\r\nimport UserPassword from './components/UserPassword/UserPassword';\r\nimport { defaultAutoCompleteOption } from '../../services/webApi/googleApi';\r\n\r\nexport default function UserProfile ({ loadAccount, updateAccount, account }) {\r\n const [isUserVerified, editUserInfo, setEditUserInfo, phoneNumber, address, setAddress, applyAddress, updatePhoneNumber, submitUserProfileForm, cancelUserProfileForm, error] = useProfile(loadAccount, updateAccount, account);\r\n\r\n return (\r\n \r\n setIsBulkUpdatePanelOpen(true)}\r\n >\r\n
\r\n )}\r\n \r\n
\r\n );\r\n}\r\n\r\nUserProfile.propTypes = {\r\n loadAccount: PropTypes.func,\r\n updateAccount: PropTypes.func,\r\n account: PropTypes.object\r\n};\r\n","import { connect } from 'react-redux';\r\nimport UserProfile from './UserProfile';\r\nimport { loadAccount, updateAccount } from 'reducers/account';\r\n\r\nconst mapDispatchToProps = {\r\n loadAccount,\r\n updateAccount\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n account: state.account\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(UserProfile);\r\n","import React, { useState } from 'react';\r\nimport Button from 'components/common/Button';\r\nimport Alert from 'components/common/Alert';\r\nimport './styles/userPassword.scss';\r\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\r\nimport TextField from 'components/common/TextField';\r\nimport usePassword from 'components/UserProfile/services/hooks/usePassword';\r\n\r\nexport default function UserPassword() {\r\n const [alertOpen, setAlertOpen] = useState(false);\r\n const [alertMessage, setAlertMessage] = useState('');\r\n const [editPassword, setEditPassword] = useState(false);\r\n const [\r\n isLoading,\r\n oldPassword,\r\n setOldPassword,\r\n newPassword,\r\n setNewPassword,\r\n newPasswordError,\r\n setNewPasswordError,\r\n confirmedNewPassword,\r\n setConfirmedNewPassword,\r\n confirmedNewPasswordError,\r\n setConfirmedNewPasswordError,\r\n hideChangePasswordForm,\r\n changeUserPassword\r\n ] = usePassword(setAlertOpen, setAlertMessage, setEditPassword);\r\n\r\n const openPasswordEditSection = () => {\r\n setEditPassword(true);\r\n };\r\n\r\n const validatePassword = (newPassword) => {\r\n var passwordRegex = /^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\\s).{10,}$/;\r\n return newPassword.match(passwordRegex);\r\n };\r\n\r\n const UpdateNewPassword = (enteredNewPassword) => {\r\n setNewPassword(enteredNewPassword);\r\n setNewPasswordError(!validatePassword(enteredNewPassword) ? 'Password does not meet one/all of the requirements' : null);\r\n };\r\n\r\n const UpdateConfirmedNewPassword = (enteredConfirmedPassword) => {\r\n setConfirmedNewPassword(enteredConfirmedPassword);\r\n setConfirmedNewPasswordError(newPassword !== enteredConfirmedPassword ? 'Password does not match' : null);\r\n };\r\n\r\n return (\r\n \r\n Profile\r\n
\r\n \r\n
\r\n \r\n
\r\n My Details
\r\n {isUserVerified && !editUserInfo &&\r\n } onClick={() => setEditUserInfo(true)}>Edit}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Legal Name
\r\n {account.fullName}
\r\n \r\n
\r\n Email
\r\n {account.email}
\r\n \r\n
\r\n {isUserVerified && !editUserInfo &&\r\n \r\n
\r\n {isUserVerified &&\r\n Position
\r\n \r\n
\r\n \r\n
\r\n Team
\r\n {account.team}
\r\n \r\n
\r\n Role
\r\n {account.role}
\r\n \r\n
\r\n }\r\n Date of Birth
\r\n {account.dateOfBirth}
\r\n \r\n
\r\n }\r\n {isUserVerified && editUserInfo &&\r\n \r\n
\r\n \r\n
\r\n Address
\r\n \r\n
\r\n {account.address}
\r\n {account.city}, {account.province}
\r\n {account.country}, {account.postalCode}
\r\n \r\n
\r\n Phone
\r\n {account.phone}
\r\n \r\n
\r\n }\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Two-Factor Authentication
\r\n }>Edit\r\n \r\n
\r\n \r\n
\r\n Notification Preferences
\r\n }>Edit\r\n \r\n setAlertOpen(false)}>{alertMessage.message} \r\n
\r\n );\r\n}\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./userPassword.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./userPassword.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./userPassword.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import UserProfileContainer from './UserProfileContainer';\r\n\r\nexport default UserProfileContainer;\r\n","import { useState } from 'react';\r\nimport { useApi } from 'services/hooks';\r\nimport { changePassword } from 'services/webApi';\r\nimport { useSelector } from 'react-redux';\r\n\r\nfunction usePassword(setAlertOpen, setAlertMessage, setEditPassword) {\r\n const [isLoading, error, callApi] = useApi();\r\n const [oldPassword, setOldPassword] = useState('');\r\n const [newPassword, setNewPassword] = useState('');\r\n const [newPasswordError, setNewPasswordError] = useState(null);\r\n const [confirmedNewPassword, setConfirmedNewPassword] = useState('');\r\n const [confirmedNewPasswordError, setConfirmedNewPasswordError] = useState(null);\r\n const { email } = useSelector(state => state.account);\r\n\r\n const resetPasswordStates = () => {\r\n setOldPassword('');\r\n setNewPassword('');\r\n setConfirmedNewPassword('');\r\n };\r\n\r\n const resetPasswordErrorStates = () => {\r\n setNewPasswordError(null);\r\n setConfirmedNewPasswordError(null);\r\n };\r\n\r\n const hideChangePasswordForm = () => {\r\n resetPasswordStates();\r\n resetPasswordErrorStates();\r\n setEditPassword(false);\r\n };\r\n\r\n const changeUserPassword = async (e) => {\r\n e && e.preventDefault();\r\n resetPasswordErrorStates();\r\n\r\n const response = await callApi(() => changePassword({ currentPassword: oldPassword, emailAddress: email, newPassword, newPasswordConfirmed: confirmedNewPassword }));\r\n if (!response || response.statusText !== 'OK') {\r\n setAlertMessage({ type: 'error', message: error });\r\n setAlertOpen(true);\r\n return;\r\n }\r\n setAlertMessage({ type: 'success', message: response.message });\r\n setAlertOpen(true);\r\n hideChangePasswordForm();\r\n };\r\n\r\n return [\r\n isLoading,\r\n oldPassword,\r\n setOldPassword,\r\n newPassword,\r\n setNewPassword,\r\n newPasswordError,\r\n setNewPasswordError,\r\n confirmedNewPassword,\r\n setConfirmedNewPassword,\r\n confirmedNewPasswordError,\r\n setConfirmedNewPasswordError,\r\n hideChangePasswordForm,\r\n changeUserPassword\r\n ];\r\n}\r\n\r\nexport default usePassword;\r\n","import { useState, useEffect } from 'react';\r\nimport { useApi } from '../../../../services/hooks';\r\nimport { extractAddressFromGoogleArray, validateGooglePlace } from '../../../../services/webApi/googleApi';\r\n\r\nfunction useProfile(loadAccount, updateAccount, account) {\r\n const [isLoading, error, apiCall] = useApi();\r\n const [isUserVerified, setIsUserVerified] = useState(true);\r\n const [editUserInfo, setEditUserInfo] = useState(false);\r\n const [phoneNumber, setPhoneNumber] = useState(account ? account.phone.substr(account.phone.length - 10) : null);\r\n const [address, setAddress] = useState(account ? {\r\n street1: account.address.street1,\r\n street2: account.address.street2,\r\n city: account.address.city,\r\n province: account.address.province,\r\n country: account.address.country,\r\n postalCode: account.address.postalCode\r\n } : null);\r\n\r\n useEffect(() => {\r\n loadAccount();\r\n }, []);\r\n\r\n const updatePhoneNumber = phoneNum => {\r\n setPhoneNumber(phoneNum.toString().replace(/[^0-9]/g, ''));\r\n };\r\n\r\n const resetForm = () => {\r\n setAddress({\r\n street1: account.address.street1,\r\n street2: account.address.street2,\r\n city: account.address.city,\r\n province: account.address.province,\r\n country: account.address.country,\r\n postalCode: account.address.postalCode\r\n });\r\n setPhoneNumber(account.phone.substr(account.phone.length - 10));\r\n };\r\n\r\n const applyAddress = async (googlePlace) => {\r\n if (googlePlace) {\r\n const response = await apiCall(() => validateGooglePlace(googlePlace));\r\n\r\n if (response) {\r\n const mappedAddress = extractAddressFromGoogleArray(googlePlace);\r\n\r\n const newAddress = {\r\n ...address,\r\n city: mappedAddress.city,\r\n province: mappedAddress.province.short_name,\r\n country: mappedAddress.country.long_name,\r\n countryCode: mappedAddress.country.short_name.toLowerCase(),\r\n street1: mappedAddress.addressOne,\r\n postalCode: mappedAddress.postalCode\r\n };\r\n\r\n setAddress(newAddress);\r\n }\r\n }\r\n };\r\n\r\n const submitUserProfileForm = (e) => {\r\n e && e.preventDefault();\r\n updateAccount(address, phoneNumber);\r\n setEditUserInfo(false);\r\n };\r\n\r\n const cancelUserProfileForm = () => {\r\n resetForm();\r\n setEditUserInfo(false);\r\n };\r\n\r\n return [isUserVerified, editUserInfo, setEditUserInfo, phoneNumber, address, setAddress, applyAddress, updatePhoneNumber, submitUserProfileForm, cancelUserProfileForm, error];\r\n}\r\n\r\nexport default useProfile;\r\n","var api = require(\"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./userProfile.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./userProfile.scss\",\n function () {\n content = require(\"!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./userProfile.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport './styles/authCardContainer.scss';\r\n\r\nexport default function AuthCardContainer({ children, title, subtitle }) {\r\n return (\r\n \r\n
\r\n {!editPassword &&\r\n Password
\r\n { !editPassword &&\r\n } onClick={() => openPasswordEditSection()}>Edit\r\n }\r\n \r\n
\r\n }\r\n { editPassword &&\r\n }\r\n Password
\r\n ***********
\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nAuthCardContainer.propTypes = {\r\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),\r\n title: PropTypes.string,\r\n subtitle: PropTypes.string\r\n};\r\n","export default __webpack_public_path__ + \"6b542313b840c7d503be60c2add300d3.png\";","import AuthCardContainer from './AuthCardContainer';\r\n\r\nexport default AuthCardContainer;\r\n","var api = require(\"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./authCardContainer.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./authCardContainer.scss\",\n function () {\n content = require(\"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./authCardContainer.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Link } from 'react-router';\r\nimport TextField from 'components/common/TextField';\r\nimport LoadingSpinner from 'components/common/LoadingSpinner';\r\nimport Button from 'components/common/Button';\r\nimport AuthCardContainer from '../AuthCardContainer';\r\nimport { forgotPassword, parseErrorMessage } from 'services/webApi';\r\nimport { useCancelPromise } from 'services/hooks';\r\nimport '../styles/auth.scss';\r\n\r\nexport default function Forgot(props) {\r\n const { params, locale } = props;\r\n\r\n const cancelPromise = useCancelPromise();\r\n const [email, setEmail] = useState('');\r\n const [message, setMessage] = useState('');\r\n const [error, setError] = useState('');\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n const handleSubmit = (event) => {\r\n event && event.preventDefault();\r\n setIsLoading(true);\r\n setError('');\r\n setMessage('');\r\n forgotPassword(email, locale)\r\n .then(({ data: { message } }) => {\r\n if (!cancelPromise.current) {\r\n setMessage(message);\r\n setIsLoading(false);\r\n }\r\n })\r\n .catch(err => {\r\n if (!cancelPromise.current) {\r\n setError(err);\r\n setIsLoading(false);\r\n }\r\n });\r\n };\r\n\r\n return (\r\n \r\n {children}\r\n
\r\n \r\n
\r\n Forgot your password?
\r\n \r\n\r\n
\r\n \r\n Have your password? \r\n \r\n Login here\r\n \r\n
\r\n {/* TODO Add Register Button Back in future releases */}\r\n {/*\r\n Don't have an account? \r\n \r\n Register here\r\n \r\n
*/}\r\n\r\n
\r\n Welcome to Fuse Financial
\r\nPlease log in or register to continue
\r\n \r\n {/* TODO Add Register Button Back in future releases */}\r\n {/*\r\n \r\n
*/}\r\n \r\n \r\n Forgot your password?\r\n \r\n
\r\n \r\n
\r\n Change my password
\r\n \r\n\r\n
\r\n \r\n Password reset successfully \r\n \r\n Login here\r\n \r\n
\r\n {/* TODO Add Register Button Back in future releases */}\r\n {/*\r\n Don't have an account? \r\n \r\n Register here\r\n \r\n
*/}\r\n\r\n
\r\n Welcome to finnovate.io
\r\nPlease register to create an account
\r\n \r\n\r\n \r\n
\r\n \r\n \r\n Forgot your password?\r\n \r\n
\r\n \r\n \r\n {previousPage &&\r\n }\r\n
\r\n {children}\r\n \r\n \r\n );\r\n}\r\n\r\nDrawer.propTypes = {\r\n anchor: PropTypes.string,\r\n className: PropTypes.string,\r\n children: PropTypes.node,\r\n previousPage: PropTypes.func,\r\n onClose: PropTypes.func\r\n};\r\n","import Drawer from './Drawer';\r\n\r\nexport default Drawer;\r\n","var api = require(\"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./drawer.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./drawer.scss\",\n function () {\n content = require(\"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./drawer.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport shortid from 'shortid';\r\nimport { FormControl, InputLabel, Select, MenuItem, FormHelperText, alpha, ListItemIcon } from '@mui/material';\r\nimport ErrorIcon from '@mui/icons-material/Error';\r\nimport { LocalizationContext } from 'services/localization';\r\nimport { primary40 } from 'styles/colors.scss';\r\nimport './styles/dropdown.scss';\r\nimport PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';\r\n\r\nexport default function Dropdown({\r\n items,\r\n label = '',\r\n id = '',\r\n onSelect,\r\n value,\r\n disabled,\r\n inputProps,\r\n className,\r\n menuIcon,\r\n error,\r\n size,\r\n ...props\r\n}) {\r\n const [fieldId, setFieldId] = useState(shortid.generate() || '');\r\n const localized = useContext(LocalizationContext);\r\n return (\r\n \r\n {value?.AccountName || value?.accountName}
\r\n )}\r\n MenuProps={{\r\n className: 'dropdown__menu'\r\n }}\r\n {...((error && {\r\n IconComponent: () => (\r\n \r\n \r\n \r\n \r\n {exportCsv && }\r\n {exportPdf && }\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nExportMenu.propTypes = {\r\n exportCsv: PropTypes.func,\r\n exportPdf: PropTypes.func\r\n};\r\n","import ExportMenu from './ExportMenu';\r\n\r\nexport default ExportMenu;\r\n","var api = require(\"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./ExportMenu.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./ExportMenu.scss\",\n function () {\n content = require(\"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./ExportMenu.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport default function FuseIcon(\r\n) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nFuseIcon.propTypes = {\r\n};\r\n","import FuseIcon from './FuseIcon';\r\n\r\nexport default FuseIcon;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Modal } from '@mui/material';\r\nimport Button from '../Button';\r\nimport Checkbox from '../Checkbox';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport logo from '../../../../public/branding/logo.svg';\r\nimport './styles/fuseModal.scss';\r\n\r\n// INFO: This assumes overflow is controlled by children\r\nexport default function FuseModal({\r\n children,\r\n isOpen,\r\n onClose,\r\n primaryLabel,\r\n onPrimaryClick,\r\n cancelLabel,\r\n isPrimaryDisabled,\r\n isPrimaryLoading,\r\n primaryVariant = 'filled',\r\n error,\r\n shouldShowHeader = false,\r\n isForTermsBlocking = false\r\n}) {\r\n const [isTermsChecked, setIsTermsChecked] = useState(false);\r\n const tocText = 'I have read and accept the terms and conditions.';\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n )}\r\n \r\n {children}\r\n
\r\n {error && {error}
}\r\n \r\n {isForTermsBlocking && (\r\n setIsTermsChecked(e.target.checked)} />\r\n )}\r\n
\r\n \r\n \r\n \r\n {primaryLabel || 'Continue'}\r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nLoadingSpinner.propTypes = {\r\n className: PropTypes.string\r\n};\r\n","import LoadingSpinner from './LoadingSpinner';\r\n\r\nexport default LoadingSpinner;\r\n","var api = require(\"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./loadingSpinner.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./loadingSpinner.scss\",\n function () {\n content = require(\"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./loadingSpinner.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Box, Modal as MuiModal } from '@mui/material';\r\nimport Button from '../Button';\r\nimport './styles/modal.scss';\r\n\r\nexport default function Modal({\r\n primaryLabel,\r\n onPrimaryClick,\r\n isOpen,\r\n onClose,\r\n headerText = '',\r\n headerIcon,\r\n flavourText = '',\r\n isPrimaryDelete = false,\r\n secondaryLabel = '',\r\n onSecondaryClick = '',\r\n cancelLabel = 'Cancel',\r\n children\r\n}) {\r\n return (\r\n {headerIcon}
}\r\n {headerText && {headerText}
}\r\n {flavourText && {flavourText}
}\r\n {children}\r\n \r\n \r\n {secondaryLabel && onSecondaryClick && }\r\n \r\n
\r\n \r\n {formatCurrency(moneyBalance)}\r\n
\r\n );\r\n}\r\n\r\nMoneyDisplay.propTypes = {\r\n className: PropTypes.string,\r\n moneyBalance: PropTypes.number\r\n};\r\n","import MoneyDisplay from './MoneyDisplay';\r\n\r\nexport default MoneyDisplay;\r\n","var api = require(\"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./moneyDisplay.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./moneyDisplay.scss\",\n function () {\n content = require(\"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./moneyDisplay.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React from 'react';\r\nimport { ArrowLeftSharp, ArrowRightSharp } from '@mui/icons-material';\r\nimport { usePagination } from '@mui/lab';\r\nimport Proptypes from 'prop-types';\r\nimport { IconButton } from '@mui/material';\r\nimport './styles/style.scss';\r\n\r\nconst Pagination = (props) => {\r\n const {\r\n showItemsPerPage = 10,\r\n totalCount = 0,\r\n onChange = () => {},\r\n page,\r\n data,\r\n loading = false\r\n } = props;\r\n const pageCount = Math.ceil(totalCount / showItemsPerPage);\r\n\r\n const { items } = usePagination({\r\n count: pageCount,\r\n onChange: function name(_, page) {\r\n onChange(page);\r\n }\r\n });\r\n\r\n const getShowingData = () => {\r\n const lastShow = showItemsPerPage * page;\r\n const startShow = lastShow - showItemsPerPage + (data.length ? 1 : 0);\r\n\r\n const visible = data.slice(0, lastShow).length;\r\n const unvisibleFromShowItems = showItemsPerPage - visible;\r\n\r\n const lastCount = lastShow - unvisibleFromShowItems;\r\n\r\n return `Results ${startShow}-${\r\n lastCount > totalCount ? totalCount : lastCount\r\n } of ${totalCount}`;\r\n };\r\n\r\n const renderItems = items.filter((item) => {\r\n return ['previous', 'next'].includes(item.type);\r\n });\r\n\r\n const prev = renderItems[0];\r\n const next = renderItems[1];\r\n\r\n return (\r\n !loading && (\r\n \r\n {/* Previous */}\r\n {prev && (\r\n \r\n \r\n )}\r\n {getShowingData()}\r\n {next && (\r\n \r\n \r\n )}\r\n
\r\n )\r\n );\r\n};\r\n\r\nexport default Pagination;\r\n\r\nPagination.propTypes = {\r\n showItemsPerPage: Proptypes.number,\r\n totalCount: Proptypes.number,\r\n onChange: Proptypes.func,\r\n page: Proptypes.number,\r\n data: Proptypes.array,\r\n loading: Proptypes.bool\r\n};\r\n","import Pagination from './Pagination';\r\nexport default Pagination;\r\n","var api = require(\"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./style.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./style.scss\",\n function () {\n content = require(\"!!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./style.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport shortid from 'shortid';\r\nimport { FormControl, FormControlLabel, RadioGroup, Radio, Box } from '@mui/material';\r\nimport './styles/radioSelect.scss';\r\n\r\nexport default function RadioSelect({\r\n items,\r\n name,\r\n onChange,\r\n disabled,\r\n error,\r\n showErrorMessage,\r\n ...otherProps\r\n}) {\r\n const [fieldId, setFieldId] = useState(shortid.generate() || '');\r\n\r\n return (\r\n \r\n {item.description} }\r\n
\r\n )}\r\n \r\n {error && showErrorMessage && {error}
}\r\n {headCell.label}
\r\n }\r\n \r\n ))}\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default OptionalTextField;\r\n","import OptionalTextField from './OptionalTextField';\r\n\r\nexport default OptionalTextField;\r\n","var api = require(\"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./optionalTextField.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\nif (module.hot) {\n if (!content.locals || module.hot.invalidate) {\n var isEqualLocals = function isEqualLocals(a, b) {\n if (!a && b || a && !b) {\n return false;\n }\n\n var p;\n\n for (p in a) {\n if (a[p] !== b[p]) {\n return false;\n }\n }\n\n for (p in b) {\n if (!a[p]) {\n return false;\n }\n }\n\n return true;\n};\n var oldLocals = content.locals;\n\n module.hot.accept(\n \"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./optionalTextField.scss\",\n function () {\n content = require(\"!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../../node_modules/postcss-loader/src/index.js??ref--5-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--5-3!./optionalTextField.scss\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\n if (!isEqualLocals(oldLocals, content.locals)) {\n module.hot.invalidate();\n\n return;\n }\n\n oldLocals = content.locals;\n\n update(content);\n }\n )\n }\n\n module.hot.dispose(function() {\n update();\n });\n}\n\nmodule.exports = content.locals || {};","import React, { useState, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport shortid from 'shortid';\r\nimport {\r\n TextField as MUITextField,\r\n InputAdornment\r\n} from '@mui/material';\r\nimport IconButton from 'components/common/IconButton';\r\nimport VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';\r\nimport VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';\r\nimport CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';\r\nimport SearchIcon from '@mui/icons-material/Search';\r\nimport ErrorIcon from '@mui/icons-material/Error';\r\nimport { LocalizationContext } from 'services/localization';\r\nimport './styles/textField.scss';\r\nimport { useGoogleAutoComplete } from '../../../services/hooks/useGoogleAutoComplete';\r\n\r\nexport default function TextField({\r\n id,\r\n type = 'text',\r\n variant = 'outlined',\r\n className = '',\r\n helperText = '',\r\n uppercase,\r\n placeholder,\r\n error,\r\n errorHelperText,\r\n search,\r\n clearField,\r\n InputProps,\r\n startIcon,\r\n value,\r\n onInputChange = () => {},\r\n onAutocomplete,\r\n disabled,\r\n clearButton = true,\r\n autocompleteOptions,\r\n ...otherProps\r\n}) {\r\n const [fieldId, setFieldId] = useState(shortid.generate() || '');\r\n const [showPassword, setShowPassword] = useState(false);\r\n const localized = useContext(LocalizationContext);\r\n\r\n let inputClassName = 'text-field ' + className;\r\n\r\n if (type === 'password' || error) {\r\n inputClassName += ' text-field--with-adornment';\r\n }\r\n\r\n const handleMouseDownPassword = (event) => {\r\n event.preventDefault();\r\n };\r\n\r\n const handleTogglePasswordView = () => {\r\n setShowPassword(!showPassword);\r\n };\r\n\r\n const { ref, error: googleError } = useGoogleAutoComplete(autocompleteOptions, onAutocomplete);\r\n\r\n return (\r\n \r\n\t\t\t\tOptional\r\n\t\t\t
\r\n