\n
\n \n \n Dispute 232323 raised by Ramesh with category Dispute Category on\n IN 2323232\n \n 20 min ago \n
\n \n {logData.current?.givenName?.concat(\n \" \",\n logData.current.familyName\n )}\n
\n{logData.current.email}
\n\n If you’ve lost your password or wish to reset it use the link below\n to get started\n
\n\n 
\n
\n */}\n\n \n
\n \n );\n};\nconst Navbar = ({ name }) => {\n let tokenData = sessionStorage.getItem(\"userToken\");\n let history = useHistory();\n let decodedData = jwt_decode(tokenData);\n const userContext = useContext(UserContext);\n\n let userId = decodedData.username;\n const { data: cardData, isLoading: iscardloading } = LoginCustomerData({\n userId,\n });\n\n return (\n \n\n \n \n
\n Add Discount Programs For : {currentSelectedSupplier?.supplier_name}
\n\n
\n \n \n Dispute 232323 raised by Ramesh with category Dispute Category on\n IN 2323232\n \n 20 min ago \n
\n \n \n \n
\n \n
\n \n Prediction In Progress\n
\n This might take upto 15 minutes. Results will be available on\n actuals screen.\n
\n setShowPopup(false)}\n >\n {\" \"}\n Close\n \n
\n \n {\" \"}\n 401- You are not Authorized !\n
\n );\n};\n","import React, { useContext, useEffect, useState } from \"react\";\nimport { useLocation, Redirect } from \"react-router-dom\";\nimport PrimaryPrivateNavbar from \"./PrimaryPrivateNavbar\";\nimport Sidebar from \"../Sidebar\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport styled from \"styled-components\";\nimport { UIContext } from \"context/UIContext\";\nimport { UserContext } from \"context/UserContext\";\nimport Bus from \"utils/Bus\";\nimport Flash from \"ui/flash-message\";\nimport { QuickBookConnectionContext } from \"context/QuickBookConnectionContext\";\n\nimport { Authenticate } from \"helpers/Authentication\";\n\nconst PageStyles = styled.div``;\n\nconst PageContainer = styled.div`\n padding: 0;\n width: 100%;\n display: flex;\n flex-direction: row;\n .scroll-div {\n position: sticky;\n top: 0;\n z-index: 100;\n width: 100%;\n height: auto;\n background-color: #232631;\n }\n`;\n\nconst ContentContainer = styled(Container)`\n /* overflow: auto; */\n max-width: 100%;\n flex: 1;\n`;\nconst StickyDiv = styled.div`\n position: relative;\n`;\n\nconst SidebarContainer = styled.div`\n position: relative;\n height: 100%;\n /* width: auto;\n overflow: auto; */\n display: block;\n /* border: 5px solid green; */\n z-index: 50000;\n`;\n\nconst PrivateLayout = (props) => {\n const [scroll, setScroll] = useState(false);\n const location = useLocation();\n const page = location.pathname.split(\"/\")[1];\n const { user } = useContext(UserContext);\n const QuickbookConnectionContext = useContext(QuickBookConnectionContext);\n\n window.flash = (\n operation = \"close\",\n type = \"success\",\n message,\n closeable,\n duration\n ) => Bus.emit(\"flash\", { operation, type, message, closeable, duration });\n\n useEffect(() => {\n if (QuickbookConnectionContext.quickbookImportInProgress) {\n window.flash(\n \"open\",\n \"progress\",\n \"SimpliCapital is retrieving your data\",\n false\n );\n } else {\n window.flash(\"close\", \"progress\");\n }\n\n if (\n QuickbookConnectionContext?.alerts &&\n QuickbookConnectionContext?.alerts != \"\"\n ) {\n window.flash(\n \"open\",\n \"warning\",\n `${QuickbookConnectionContext?.alerts}`,\n false\n );\n } else {\n window.flash(\"close\", \"warning\");\n }\n }, [\n QuickbookConnectionContext.alerts,\n QuickbookConnectionContext.quickbookImportInProgress,\n ]);\n\n useEffect(() => {\n window.addEventListener(\"scroll\", () => {\n setScroll(window.scrollY > 0);\n });\n }, []);\n\n // if (!user) {\n // return\n {\" \"}\n \n
\n );\n}\n\nexport function CommentIcon(props) {\n return (\n e.stopPropagation()}>\n e.stopPropagation()}\n />\n
\n ),\n },\n ...columns,\n ]);\n }\n );\n\n const Pagecount = Math.ceil(Math.abs(totalCount / 10));\n return (\n <>\n Setup a connection with stripe
\n\n
\n Settings
\n\n
\n {\" \"}\n {cell.value}\n \n
\n {\" \"}\n {cell.value}\n \n {props.row.values.discountPrograms && {props.row.values.discountPrograms}}\n\n \n {\n apicallandopen(props.row.original);\n setCurrentSelectSupplier(props.row.original);\n let temploader = {};\n temploader[props.row.original.supplierId] = true;\n loader.current = temploader;\n }}\n font-size=\"14px\"\n />\n \n
\n \n {loader?.current !== null &&\n Object.keys(loader.current).length > 0 &&\n loader?.current[props.row.original.supplierId] === true && (\n \n
\n )}\n \n ),\n },\n {\n id: \"action\",\n Header: \"Action\",\n show:forFutureRelease,\n width: 300,\n disableSortBy: true,\n Cell: (props) => (\n <>\n \n \n
\n \n Here are your Suppliers. In this section, you can choose to add\n approvers for outgoing payments. If you know your Supplier bank\n details, you can also set them up to receive digital payments\n
\n \nSupplier Payment Approvals
\n\n Let’s configure SimpliCapital for you!\n
\n\n
\n \n ) : (\n <>\n \n Connection to{\" \"}\n {capitalizeFirstLetter(connectionDetails.name)}{\" \"}\n has been successfully established.\n
\n {connectionDetails &&\n connectionDetails?.name == \"qbd\" ? (\n\n Download your app connection file from here{\" \"}\n
Hi!
\nSelect your integration
\n\n \n
\n \n \n
\n \n \n
\n {/* \n \n
*/}\n \n {connection ? (\n <>\n \n You can get these details inside your{\" \"}\n \n {connection} Integration\n {\" \"}\n
\n \n ) : null}\nGeneral Settings
\n\n \n
\n\n \n \n \n \n - Why and when we collect this data\n \n \n \n \n - You'll need to reconfirm your consent\n every 90 days\n \n \n \n \n - You can withdraw your consent at any\n time\n \n \n \n \n - We never sell or share your data unless\n you specify otherwise.\n \n \n \n \n \n \n \n \n \n Data we'll collect\n \n \n - Contact and party details\n \n \n The full legal name of account holder\n \n \n {\" \"}\n Address\n \n \n {\" \"}\n Telephone number\n \n \n {\" \"}\n Email address\n \n
\n\n - Your account details\n \n \n Account names\n \n \n Currency\n \n \n Types\n \n \n Numbers\n \n \n Sort codes\n \n \n Balances\n \n \n Credit limits\n \n
\n\n - Your account transactions\n \n \n Historical and current transactions\n \n \n Transaction types\n \n \n Amounts\n \n \n Dates and descriptions\n \n
\n\n - Your statements\n \n \n Periodic account statements\n \n
\n \n \n \n setLetsGo(!letsGo)}\n className=\"card-button-grey\"\n style={{ background: \"#3a3b48\" }}\n >\n Back\n \n setUserConsent(!userConsent)}\n className=\"card-button-blue\"\n >\n Agree\n \n
\n \n \n {!letsGo && (\n <>\n \n \n \n \n \n setShowPopover(false)}\n className=\"card-button-grey\"\n style={{ background: \"#3a3b48\" }}\n >\n Back\n \n setLetsGo(!letsGo)}\n className=\"card-button-blue\"\n >\n Let's Go\n \n
\n \n 
\n \n 3 quick steps to connect to your account\n \n
\n \n We need your consent to keep bringing in\n your bank data.\n
\n\n - We'll ask for your consent to share your\n bank transactions.\n
\n\n - You'll sign in to your bank account to\n authorize the connection.\n
\n\n
\n \n \n Consent to share your data\n \n
\n \n Important things to know\n
\n\n You won't need to give consent through your\n bank every 90 days for SimpliCapital to\n access your account data, instead you'll\n need to provide this consent direct to\n SimpliCapital every 90 days.\n
\n\n Collecting this data allows\n SimpliCapital to generate your financial\n reports and other consolidated\n information in your SimpliCapital\n products. This collection will occur on\n an ongoing basis only while we have your\n active consent.\n
\n\n Consent starts:{\" \"}\n
\n Reconfirm by:{\" \"}\n
\n You own your data, and can withdraw\n consent to let us collect it at any\n time. You may remove your bank account\n from bank connections.\n
\n\n To learn more about SimpliCapital\n handles your data, see our SimpliCapital{\" \"}\n
\n Allow SimpliCapital to collect and use data\n from your bank\n
\n\n SimpliCapital requires your consent to\n access the following from your bank account\n for the next 90 days.\n
\n\n
\n
\n
\n
\n How we'll use the data we collect\n
\n\n Your deposits, account details, and\n transactions will be automatically imported\n into QuickBooks.\n
\n\n
\n \n \n Log into your bank\n \n
\n \n
\n \n getDomainName(value) === sessionStorage.getItem(\"tenantName\")\n ),\n })}\n onSubmit={(values, { setSubmitting, resetForm }) => {\n setSubmitting(true);\n onSuccess(values).then(() => {\n setSubmitting(false);\n });\n resetForm();\n }}\n on\n >\n {({\n values,\n errors,\n touched,\n handleSubmit,\n isSubmitting,\n setFieldValue,\n dirty,\n isValid,\n }) => (\n \n )}\n \n
\n );\n}\n","import styled from \"styled-components\";\nimport { Modal } from \"ui/Modal\";\nimport UserForm from \"./_UserForm\";\nimport { useUpdateUser } from \"mutations/updateUser\";\nimport { ErrorMessage } from \"formik\";\nimport { useState } from \"react\";\nimport { useUser } from \"queries/user\";\n\nconst StyledModal = styled.div`\n .modal-header {\n padding: 1rem 1rem;\n border-bottom: 1px solid #707070;\n margin: 10px;\n h1 {\n font-family: Montserrat Alternates-Bold;\n text-align: left;\n font-size: 18px;\n line-height: 22px;\n color: #ffffff;\n }\n }\n`;\n\nexport default function EditUserModal({\n show,\n user,\n onHide,\n refetch,\n userRolesData,\n}) {\n const userUpdate = useUpdateUser();\n const [errorMessage, setErrorMessage] = useState(\"\");\n const { data: permissions, isLoading } = useUser(user._id);\n\n const onSuccess = (values) => {\n const userId = user._id;\n\n let serverUser = {\n givenName: values.firstName,\n familyName: values.lastName,\n phoneNumber: values.mobile,\n email: values.email,\n role: values.access,\n status: values.status,\n permissions:\n values.access === \"admin\" || values.access === \"read-only\"\n ? []\n : values.permissions,\n isMfaEnabled: values?.isMfaEnabled === true ? true : false,\n };\n\n userUpdate\n .mutateAsync({ userId, values: serverUser })\n .then(() => {\n refetch();\n onHide();\n setErrorMessage(null);\n })\n .catch(function (error) {\n if (error.response) {\n setErrorMessage(error.response.data.message);\n }\n });\n };\n\n return (\n Edit User
\n\n 
\n
\n \n \n Choose how you want to verify your identity\n \n
\n\n \n {errors}\n
\n\n \n
\n \n handleClick({ method: \"sms\" })}>\n
\n\n \n \n \n \n \n \n Text a code\n \n \n {phone}\n \n \n
\n\n\n\n handleClick({ method: \"email\" })}\n >\n
\n \n \n \n \n \n \n \n \n Email a code\n \n \n {email}\n \n \n
\n\n\n\n \n \n \n
\n Add User
\n\n \n {props.row.original.givenName +\n \" \" +\n props.row.original.familyName}\n \n
\n );\n },\n },\n {\n Header: \"Mobile\",\n accessor: \"phoneNumber\",\n id: \"phoneNumber\",\n },\n {\n Header: \"Email\",\n accessor: \"email\",\n id: \"email\",\n maxWidth: 150,\n },\n {\n Header: \"User Permission\",\n accessor: \"role\",\n id: \"role\",\n Cell: (props) => (\n <>\n \n {department.name}\n \n \n {department.fullyQualifiedName.split(\":\").length - 1 > 0\n ? `+${\n department.fullyQualifiedName.split(\":\").length - 1\n }`\n : department.fullyQualifiedName.split(\":\").length}\n \n \n
\n \n {props.row.original.isMfaEnabled === true ? (\n \n \n
\n );\n },\n },\n {\n Header: \"Status\",\n accessor: \"status\",\n id: \"status\",\n Cell: (props) =>\n props.row.values.status === \"active\" ? (\n Add Users and assign Roles to them
\n \nImport File\n \n \n\n
User Management
\n e.stopPropagation()}>\n e.stopPropagation()}\n />\n
\n ),\n },\n ...columns,\n ]);\n }\n );\n\n function getDaysOptions(frequency) {\n if (frequency === 'monthly') {\n // Generate options for month days\n const options = [];\n for (let i = 1; i <= 29; i++) {\n options.push();\n }\n const currentDate = new Date();\n const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();\n options.push()\n return options;\n } else if (frequency === 'weekly') {\n // Generate options for weekdays as numeric starting from 0\n const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\n return weekdays.map((day, index) => (\n \n ));\n } else if (frequency === 'bi-weekly') {\n // Generate options for 14 days\n const options = [];\n for (let i = 1; i <= 14; i++) {\n options.push();\n }\n return options;\n } else {\n return null;\n }\n }\n\n\n const [Pagecount, setPagecount] = useState();\n useEffect(() => {\n let temp = Math.ceil(Math.abs(totalCount / 10));\n setPagecount(temp > 1 ? temp : 1);\n // handlePageChange(0);\n // if (totalCount % 10 === 0) {\n // const lastPageIndex = temp === 0 ? 0 : temp - 1;\n // handlePageChange(lastPageIndex);\n // }\n }, [totalCount]);\n\n return (\n <>\n \n {\n (cell.column.id === 'frequency' && cell.row.original.recurring) ?\n updateAccount(e, cell.row.original.Id)}\n value={cell.row.original.frequency}\n name=\"frequency\"\n className=\"frequency-selector\"\n style={{ cursor: 'pointer', textAlign: \"center\", height: \"30px\" }}\n >\n \n \n \n \n \n :\n (cell.column.id === 'amount' && cell.row.original.recurring) ?\n {\n const inputValue = e.target.value;\n if (/^\\d*\\.?\\d*$/.test(inputValue)) {\n updateAccount(e, cell.row.original.Id)\n }\n }}\n id=\"accounts-incomes-expense-inputs\"\n type=\"text\"\n placeholder=\"Amount\"\n value={cell.row.original.amount}\n name=\"amount\"\n />\n :\n (cell.column.id === 'week1' && cell.row.original.recurring && cell.row.original.changeAmount) ?\n {\n const inputValue = e.target.value;\n if (/^\\d*\\.?\\d*$/.test(inputValue)) {\n updateAccount(e, cell.row.original.Id)\n }\n }}\n id=\"accounts-incomes-expense-inputs\"\n type=\"text\"\n placeholder=\"Week1\"\n value={cell.row.original.week1}\n name=\"week1\"\n />\n :\n (cell.column.id === 'week2' && cell.row.original.recurring && cell.row.original?.changeAmount) ?\n {\n const inputValue = e.target.value;\n if (/^\\d*\\.?\\d*$/.test(inputValue)) {\n updateAccount(e, cell.row.original.Id)\n }\n }}\n id=\"accounts-incomes-expense-inputs\"\n type=\"text\"\n placeholder=\"Week2\"\n value={cell.row.original.week2}\n name=\"week2\"\n />\n :\n (cell.column.id === 'week3' && cell.row.original.recurring && cell.row.original?.changeAmount) ?\n {\n const inputValue = e.target.value;\n if (/^\\d*\\.?\\d*$/.test(inputValue)) {\n updateAccount(e, cell.row.original.Id)\n }\n }}\n id=\"accounts-incomes-expense-inputs\"\n type=\"text\"\n placeholder=\"Week3\"\n value={cell.row.original.week3}\n name=\"week3\"\n />\n :\n (cell.column.id === 'week4' && cell.row.original.recurring && cell.row.original?.changeAmount) ?\n {\n const inputValue = e.target.value;\n if (/^\\d*\\.?\\d*$/.test(inputValue)) {\n updateAccount(e, cell.row.original.Id)\n }\n }}\n id=\"accounts-incomes-expense-inputs\"\n type=\"text\"\n placeholder=\"Week4\"\n value={cell.row.original.week4}\n name=\"week4\"\n />\n :\n (cell.column.id === 'week5' && cell.row.original.recurring && cell.row.original?.changeAmount) ?\n {\n const inputValue = e.target.value;\n if (/^\\d*\\.?\\d*$/.test(inputValue)) {\n updateAccount(e, cell.row.original.Id)\n }\n }}\n id=\"accounts-incomes-expense-inputs\"\n type=\"text\"\n placeholder=\"week5\"\n value={cell.row.original.week5}\n name=\"week5\"\n />\n :\n (cell.column.id === 'day' && cell.row.original.recurring) ?\n updateAccount(e, cell.row.original.Id)}\n name=\"days\"\n className=\"frequency-selector\"\n style={{ textAlign: \"center\", height: \"30px\", cursor: cell.row.original.frequency === 'daily' ? 'not-allowed' : 'pointer' }}\n disabled={cell.row.original.frequency === 'daily' ? true : false}\n >\n {getDaysOptions(cell.row.original.frequency)}\n \n :\n cell.render(\"Cell\") === \"\" ? \"-\" : cell.render(\"Cell\")\n }\n
\n \n );\n })\n }\n \n \n );\n })}\n\n \n ) : (\n \n \n
\n {\" \"}\n {cell.value}\n \n
\n {\" \"}\n {cell.value}\n Cash Classification
\n\n
\n ) : customer?.preferences?.emailTemplateId ? (\n Customer type is missing.
\n\n
\n ) : (\n Actions :
\n\n \n Assign to all {customer.customerType.toLowerCase()} types?\n \n {\n if (e.target.checked === true) {\n setAssignToAll(true);\n handleButtonClick(\n \"assign\",\n customer.customerType,\n customer?.preferences.emailTemplateId\n );\n } else {\n setAssignToAll(false);\n handleButtonClick(\n \"remove\",\n customer.customerType,\n customer?.preferences.emailTemplateId,\n customer.Id\n );\n }\n }}\n />\n
\n \n
\n )}\n Select a template first
\n\n
\n \n closeModal()}\n overlay={AssignPopover(\n customers,\n cell.row.original,\n childFunc,\n handleButtonClick,\n closeModal,\n advancedAssign\n )}\n >\n \n More\n \n \n ) : (\n \n Loading ...\n \n )}\n
\n \n \n cell.row.original?.preferences\n ?.emailTemplateId === elem.id && elem.val\n )\n : null\n }\n options={ddOptions}\n onChange={(selectedOption, actionMeta) => {\n if (actionMeta.action !== \"clear\") {\n selectedEmailTemplate(\n selectedOption.id,\n cell.row.original.Id\n );\n } else {\n selectedEmailTemplate(\"\", cell.row.original.Id);\n }\n }}\n isClearable\n styles={customStyles}\n />\n
\n {advancedAssign ? (\n \n Customer Notifications and Reminders\n
\n\n Here are your Customers. Out here, you can setup\n payment reminders that will be automatically sent\n out by us. Just make sure your Customer contact\n details are accurate and up-to-date!\n
\n {generalSettingsData?.sourceEmailAddress && (\n\n Emails will be sent from{\" \"}\n {generalSettingsData?.sourceEmailAddress}. If you\n need to change this email address, please contact\n the SimpliCapital team.\n
\n )}\n \nManage defaults
\n\n \n CS Payments Due Today\n
\n \n \n CS Upcoming Payments Due\n
\n \n {props.options.length != props.selectProps.value?.length ?\n
\n );\n};\nconst styles = {\n placeholder(base, state) {\n return {\n ...base,\n display: state.isFocused && 'none',\n };\n }\n}\nconst StyledSelect = styled.div`\n .react-select-container .react-select__control {\n background: #3a3b48 0% 0% no-repeat padding-box;\n box-shadow: 0px 3px 26px #00000017;\n border: 1px solid #FFFFFF;\n border-radius: 0px;\n color: #909091;\n height: 29px;\n padding: 1px;\n width: 100%;\n }\n .react-select-container .react-select__menu-list {\n background: #3a3b48 0% 0% no-repeat padding-box;\n }\n .react-select-container .react-select__option {\n color: #b5b5b5;\n background: #3a3b48 0% 0% no-repeat padding-box;\n &:hover {\n background: #484A58 0% 0% no-repeat padding-box;\n }\n }\n .react-select-container .react-select__multi-value {\n background: #484A58 0% 0% no-repeat padding-box; \n border-radius: 10px;\n width: 69px;\n height: 19px;\n }\n .react-select-container .react-select__multi-value__label {\n color: #B5B5B5;\n text-align: center;\n font-family: Montserrat Alternates;\n font-size: 11px;\n line-height: 25px;\n align-items: center;\n border-radius: 8px;\n display: flex;\n padding-left: 8px;\n padding-right: 4px;\n }\n .react-select-container .react-select__input-container {\n color: #B5B5B5;\n }\n .react-select-container .react-select__multi-value__remove {\n background: #484A58 0% 0% no-repeat padding-box;\n &:hover {\n background: #484A58 0% 0% no-repeat padding-box;\n color: #B5B5B5;\n }\n }\n .react-select-container .react-select__indicators {\n display: none;\n }\n .react-select-container .react-select__placeholder {\n display: none;\n }\n`;\n\nconst Options = [\n { value: \"User1\", label: \"User1\" },\n { value: \"User2\", label: \"User2\" },\n { value: \"User3\", label: \"User3\" },\n { value: \"User4\", label: \"User4\" },\n\n];\n\n\nexport default function Tags({options,placeholder,onchange,value, defaultValue}) {\n return (\n <>\n \n \n \n
\n\n Manage defaults
\n\n 0 ? assigntoUsers : []\n }\n onChange={(e) => onChange(e)}\n />\n
\n\n \n {disputUsers?.users?.map((v) => (\n <>\n userDelete(v)}\n className=\"chipcls\"\n >\n {v.user_name}\n \n x\n \n
\n \n ))}\n \n \n {props?.row?.original?.dispute_approvers?.length > 0 && (\n
\n )}\n \n {props?.row?.original?.dispute_approvers?.map(\n (user) => (\n <>\n userDelete(user)}\n className=\"chipcls\"\n >\n {user.user_name}\n \n x\n \n
\n \n )\n )}\n \n
\n \n \n onChange(e)}\n />\n
\n \n {props?.row?.original?.users?.length > 0 && (\n
\n )}\n \n {props?.row?.original?.users?.map((user) => (\n <>\n userDelete(user)}\n className=\"chipcls\"\n >\n {user.user_name}\n \n x\n \n
\n \n ))}\n \n
\n \n \n onChange(e)}\n />\n
\n \n {props?.row?.original?.disput_approvers?.length > 0 && (\n
\n )}\n \n {props?.row?.original?.disput_approvers?.map(\n (approverdata) => (\n <>\n userDelete(approverdata)}\n className=\"chipcls\"\n >\n {approverdata.user_name}\n \n x\n \n
\n \n )\n )}\n \n
\n \n \n onChange(e)}\n />\n
\n Dispute Management
\nAnalytics Dashboard
\n \n\n {\" \"}\n \n \n \n Track tenant activities\n \n \n
\n \n
\n \n \n \n {}}\n handlePageChange={() => {}}\n initialPage={1}\n onHeaderClick={() => {}}\n />\n \n \n
\n
\n \n \n \n \n {data?.date}\n
\n {data?.value?.toFixed(2)}\n \n \n \n {data?.value === data?.value2 && data?.value2 === data?.value3\n ? \"No change\"\n : \"Change detected\"}\n
\n \n {data?.value ? data?.value : 0}\n
\n )}\n e.stopPropagation()}>\n e.stopPropagation()}\n />\n
\n ),\n },\n ...columns,\n ]);\n }\n );\n\n const Pagecount = Math.ceil(Math.abs(totalCount / 10));\n return (\n <>\n \n {props.row.original.isMfaEnabled === true ? (\n \n \n
\n );\n },\n },\n {\n Header: \"Last Activity\",\n accessor: \"lastActivity\",\n id: \"lastActivity\",\n disableSortBy: true,\n maxWidth: 100,\n Cell: (props) => (\n \n {key} : {data?.trainerLastRun[key]}\n
\n ))}\n \n \n {key} : {data?.predictorLastRun[key]}\n
\n ))}\n \n Analytics
\n \nDigital Payments
\n\n
\n \n New Account for Charge Cards and ACH\n
\n If this is a new application and you’re applying for\n ACH processing also, download, fill and sign this\n document. This should then be uploaded as a\n supporting document in your online application form\n by clicking the link below.\n\n \n \n window.open(\n \"https://webapp.nuvei.com/app/Xm4qjelVFg\",\n \"_blank\"\n )\n }\n >\n Apply\n \n
\n \n \n Add ACH to an existing Charge Card Account\n
\n If you have an existing account with us and want to\n add ACH processing, download, fill and sign this\n document. Once completed, please email this document\n to ACHApplications@Nuvei.com\n \n\n \n
\n \n New ACH Account Only
\n If this is a new application and you want to enable\n ACH processing ONLY, download, fill and sign this\n document. Once completed, please email this document\n to ACHApplications@Nuvei.com\n \n\n \n
\n \n \n \n\n\n \n\n Enable a {generalSettingsData?.surchargeRate}% surcharge on credit card transactions?\n \n \n \n \n await handleToggle(e)\n \n }\n \n />\n \n \n \n \n\n
\n \n \n
\n );\n}\n\nexport default BillingAddress;\n\n","import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { OverlayTrigger, Row, Col } from \"react-bootstrap\";\nimport { ArrowDownIcon } from \"assets/icons.js\";\nimport { ClearButton, Label, Popover, StyledButton } from \"filters/Style\";\nimport Button from \"react-bootstrap/Button\";\nimport ButtonGroup from \"react-bootstrap/ButtonGroup\";\nimport DateRangePickerUI from \"ui/DateRangePicker\";\n\nconst StyleButtonGroup = styled(ButtonGroup)`\n padding: 0;\n width: 53%;\n //height: 25px;\n`;\nconst StyleButton = styled(Button)`\n padding: 0;\n height: 25px;\n border: 1px solid #707070;\n opacity: 1;\n background-color: #232631;\n border-radius: 0;\n &:hover {\n background-color: black !important;\n border: 0;\n }\n`;\n\nconst ButtonLabel = styled.div`\n text-align: left;\n font-family: Montserrat Alternates;\n font-size: 10px;\n line-height: 13px;\n -webkit-letter-spacing: 0px;\n -moz-letter-spacing: 0px;\n -ms-letter-spacing: 0px;\n letter-spacing: 0px;\n color: #ffffff69;\n opacity: 1;\n padding-left: 10px;\n`;\nexport default function TransactionFilter({ handleFilterData }) {\n const [invoiceno, setInvoiceno] = useState(\"\");\n const [type, setType] = useState(\"\");\n\n const [greaterno, setGreaterno] = useState(\"\");\n const [lessno, setLessno] = useState(\"\");\n const [value, setValue] = useState(\"\");\n const [startDate, setStartDate] = useState(null);\n const [endDate, setEndDate] = useState(null);\n const [focusedInputDue, setFocusedInputDue] = useState(null);\n const [transactionStatus, setTransactionStatus] = useState(\"\");\n\n const handleResetFilter = () => {\n setInvoiceno(\"\");\n setType(\"\");\n setGreaterno(\"\");\n setLessno(\"\");\n setValue(\"\");\n setStartDate(null);\n setEndDate(null);\n setTransactionStatus(\"\")\n const FilterData = {\n invoiceNumber: \"\",\n transactionId: \"\",\n maxAmount: \"\",\n minAmount: \"\",\n TransactionDate: \"\",\n Type: \"\",\n TransactionStatus: \"\"\n };\n handleFilterData(FilterData);\n };\n\n\n const searchInvoice = (val) => {\n setInvoiceno(val)\n const FilterData = { invoiceNumber: val, pageNumber: 0 };\n handleFilterData(FilterData);\n };\n const searchType = (val) => {\n setType(val)\n const FilterData = { Type: val, pageNumber: 0 };\n handleFilterData(FilterData);\n }\n\n const searchTransactionStatus = (val) => {\n setTransactionStatus(val)\n const FilterData = { TransactionStatus: val, pageNumber: 0 };\n handleFilterData(FilterData);\n };\n\n\n const searchBygreaterthan = (val) => {\n setGreaterno(val)\n const FilterData = { minAmount: val, pageNumber: 0 };\n handleFilterData(FilterData);\n };\n\n\n const searchByLessthan = (val) => {\n setLessno(val)\n const FilterData = { maxAmount: val, pageNumber: 0 };\n handleFilterData(FilterData);\n };\n\n const handleDue = (startDate, endDate) => {\n if (startDate && endDate === \"Invalid Date\") {\n handleFilterData({ TransactionDate: \"\" });\n } else {\n handleFilterData({ TransactionDate: [startDate, endDate] });\n }\n };\n\n\n\n const popover = (\n \n \n\n \n \n {errors.givenName} }\n \n \n\n \n {errors.familyName} }\n \n \n
\n\n \n \n {errors.city} }\n \n \n\n \n {errors.address} }\n \n \n
\n\n \n \n {errors.phone} }\n \n \n\n \n {errors.zip} }\n \n \n
\n\n \n \n \n \n {state.data.map((stateObj) => (\n \n ))}\n \n {errors.state && {errors.state} }\n \n \n
\n\n \n \n
\n Billing Address
\n\n {\n \n handlePaymentReceiptDownload(props.row.original.transactionId, props.row.original.CustomerId);\n \n }}\n >\n {props.row.original.TransactionStatus === \"APPROVED\" ||\n props.row.original.TransactionStatus === \"PENDING\" ||\n props.row.original.TransactionStatus === \"SUCCESS\" ||\n props.row.original.TransactionStatus === \"UPDATE\" ? \n (\n <>\n \n
\n \n \n ),\n },\n {\n Header: \"Invoice Id / Reference No.\",\n accessor: (d) => {\n console.log(\"value--->\", d);\n return d; // Return the data object for proper rendering\n },\n id: \"invoiceArray\",\n width: 100,\n minWidth: 80,\n Cell: ({ value }) => {\n // Check if invoiceArray is present and has items\n if (value?.invoiceArray && value?.invoiceArray?.length > 0) {\n return (\n \n {value.invoiceArray.map((id, index) => (\n
\n );\n } else {\n // If invoiceArray is not present, show referenceNumber\n return {id}
\n ))}\n {value?.referenceNumber}
;\n }\n },\n disableSortBy: true,\n },\n {\n Header: \"Payment Method\",\n accessor: \"Type\",\n id: \"Type\",\n width: 110,\n minWidth: 80,\n },\n\n {\n Header: \"Date\",\n accessor: \"TransactionTimeStamp\", \n id: \"TransactionTimeStamp\",\n width: 100,\n minWidth: 80,\n accessor: (d) => {\n return moment(d.TransactionTimeStamp).format(\"MM/DD/YYYY\")\n },\n },\n {\n Header: \"Amount\",\n id: \"totalOriginalAmount\",\n width: 150,\n minWidth: 100,\n \n Cell:(props)=>{\n // transactiondata.map((value)=>{\n let invoiceAmount = 0\n if(props?.row?.original?.partialPay ){\n props?.row?.original?.partialPaymentDetails.map((amount)=>invoiceAmount+=amount.originalAmount )\n // props?.row?.original?.[\"totalOriginalAmount\"] = invoiceAmount\n }\n // })\n \n let amount = props?.row?.original?.invoiceAmount ?props?.row?.original?.partialPay?invoiceAmount: props.row.original.invoiceAmount : props.row.original.TotalAmount\n return (\n \n \n
\n );\n \n }\n },\n {\n Header: \"Amount Paid\",\n id: \"TotalAmount\",\n width: 150,\n minWidth: 100,\n \n Cell:(props)=>{\n \n let amount = props?.row?.original?.invoiceAmount ? props.row.original.invoiceAmount : props.row.original.TotalAmount\n return (\n \n \n
\n );\n \n }\n },\n {\n Header: \"Processing Fees\",\n accessor: \"surcharge\",\n id: \"surcharge\",\n width: 100,\n minWidth: 80,\n disableSortBy: true,\n Cell:(props)=>{\n // let amount = props?.row?.original?.invoiceAmount ? props.row.original.invoiceAmount : props.row.original.TotalAmount\n return(\n \n \n \n \n \n \n \n
\n \n \n \n\n\n \n
\n \n \n \n
\n \n \n
\n )\n}\n\n","import React from \"react\";\nimport { useEffect } from \"react\";\nimport moment from \"moment\";\n\nimport { BasicButton } from \"ui/Buttons\";\nimport customersServices from \"services/customers.services\";\nimport { useState } from \"react\";\nimport Spinner from \"react-bootstrap/Spinner\";\nimport { useHistory } from \"react-router-dom\";\nimport { Route_URLs } from \"routesURLs\";\nimport { GeneratePaymentPageReceipt } from \"mutations/updateCustomers\";\nimport NumberFormat from \"react-number-format\";\nimport PaymentReceipt from \"utils/pdftemplates/paymentReceipt\";\nimport { pdf } from \"@react-pdf/renderer\";\nimport styled from \"styled-components\";\nimport successImg from '../../assets/images/Paymen_Success_Icon.png'\nimport processingImg from '../../assets/images/Processing_Icon.png'\nimport simpliLogo from '../../assets/SimpliCapital-logo.png'\n\nconst SuccessPage = styled.div`\n display: flex;\n text-align: center;\n align-items: center;\n min-height: 100vh;\n justify-content: center;\n margin: 20px;`\n \n\nconst SuccessPageContainer = styled.div`\nbackground:rgb(31, 31, 33);\n padding: 60px 30px;\n border-radius: 10px;\n `\nconst PaymentSections = styled.div`\n \n background: #303440;\n padding: 20px;\n border-radius: 8px;\n margin-bottom:20px\n `\n\nconst DiscoverySections = styled.div`\nmargin-top: 20px\n`\nconst TextSections = styled.p`\ncolor: #DEEAF3;\nfont-weight:600;\nmargin-bottom: 20px;\nfont-size: 14px\n`\nconst LogoSections = styled.div`\nmargin-bottom:20px`\n\nconst SuccessPaymentPage = () => {\n const transactionId = sessionStorage.getItem(\"transactionId\");\n const email = sessionStorage.getItem(\"email\");\n const name = sessionStorage.getItem(\"name\");\n const amount = sessionStorage.getItem(\"amount\");\n let timestamp = sessionStorage.getItem(\"timestamp\");\n const status = sessionStorage.getItem(\"status\");\n const transactionType = sessionStorage.getItem(\"transactionType\");\n const customerId = sessionStorage.getItem(\"customerId\");\n const tenant = sessionStorage.getItem('tenant')\n const [loading, setLoading] = useState(true);\n let type;\n timestamp = parseInt(timestamp);\n const history = useHistory();\n\n\n let dataSet = {\n transactionId: transactionId,\n tenant: tenant\n }\n const receptData = GeneratePaymentPageReceipt(dataSet)\n useEffect(()=>{\n \n },[receptData])\n if (transactionType == \"ach\") {\n type = \"ACH\";\n } else if (transactionType == \"Credit\") {\n type = \"Credit Card\";\n } else if (transactionType == \"Debit\") {\n type = \"Debit Card\";\n } else if (transactionType == \"classic_ach\") {\n type = \"Classic ACH\";\n }\n const handleDownload = async () => {\n // const url = await customersServices.downloadPdf(transactionId, customerId);\n\n // console.log('transaction data ', res);\n const doc = Transactions
\n\n\n\n\n \n Payment Success!\n \n
\n ) : (\n \n \n 
\n
\n \n \n Processing!\n \n
\n \n // \n 
\n
\n | \n Payment Method\n | \n|
| \n TransactionId\n | \n|
| \n Transaction Date\n | \n|
| \n Balance Due\n | \n\n | \n
| \n Amount Paid\n | :\n\n Amount\n | }\n
| \n Processing Fees ({receptData?.data?.surcharge_rate}%) \n | \n|
| \n Total \n | \n|
| \n Total \n | \n|
\n Copyright ©{new Date().getFullYear()} SimpliCapital. All rights Reserved{\" \"}\n
\n \n\n
\n To learn how SimpliCapital can streamline
\n payments for your customers, click below:\n
\n \n
\n \n );\n};\n\nexport default RedirectPage;\n","import { Route_URLs } from \"routesURLs\";\nimport CollapsedLogo from \"assets/logo.png\";\nimport styled from \"styled-components\";\nimport achBankTransfer from \"../../../assets/images/ach_img.png\";\nimport credit from \"../../../assets/images/creditCrad.png\";\nimport debit from \"../../../assets/images/debitCard.png\";\nimport { useState } from \"react\";\nimport { useEffect } from \"react\";\nimport moment from \"moment\";\nimport { useLocation } from \"react-router-dom/cjs/react-router-dom.min\";\nimport jwtDecode from \"jwt-decode\";\nimport {\n Button, Col, Form, Row, Spinner, ModalFooter,\n} from \"react-bootstrap\";\nimport state from \"assets/state.json\"\nimport { useHistory } from \"react-router-dom\";\nimport { GetCustomerInvoiceData } from \"queries/customers\";\nimport Modal from \"react-bootstrap/Modal\";\nimport { BasicButton } from \"ui/Buttons\";\nimport Logo from \"assets/SimpliCapital-logo.png\";\nimport { StyledModal } from \"ui/Modal\";\nimport { CardTokenPaymentPage, GenerateCheckSum, GenerateSessionToken, GetCustomerInvoice, SaveCardTokenPaymentPage, SaveTransactionPayment } from \"mutations/updateCustomers\";\nimport {verify} from \"jsonwebtoken\"\nimport NumberFormat from \"react-number-format\";\nimport { EditIcon } from \"assets/icons\";\nimport { useRef } from \"react\";\nimport { EventLogs, GetIpInfo } from \"utils/EventLog\";\nimport { v4 as uuidv4 } from 'uuid';\n// import { jwtVerify } from \"jose\";\n\n\n\nconst StyledCollapsedLogo = styled.div`\n img {\n width: auto;\n }\n`;\nconst BackStyledButton = styled.button`\n background: transparent linear-gradient(270deg, #33c2df 0%, #0081c5 100%);\n box-shadow: 0px 3px 26px #00000017;\n border: 1px solid #707070;\n border-radius: 20px;\n text-align: left;\n font-family: Montserrat Alternates-semiBold;\n font-size: 13px;\n line-height: 15px;\n letter-spacing: 0px;\n color: #ffffff;\n padding: 12px;\n`;\n\nconst eventLogs = async (event) => {\n\n let logData = {\n eventType: \"customer-email-pay-link\",\n eventId: event.id,\n tenant: event.tenant,\n events: event?.events,\n customerEmail: event.email\n }\n await EventLogs(logData)\n}\n\nexport default function PaymentPage() {\n const [payment, setPayment] = useState(\"\");\n const [currency, setCurrency] = useState(\"USD\");\n const [userTokenId, setUserTokenId] = useState(\"\");\n const [customer, setCustomer] = useState(null);\n const [edit, setEdit] = useState(false);\n const [isPaid, setIsPaid] = useState(false)\n const [closeWindow, setCloseWindow] = useState(false)\n const [classicAch, setClassicAch] = useState(false)\n const [showModal, setShowModal] = useState(true);\n const [success, setSuccess] = useState(false)\n const [paymentPermission, setPaymentPermission] = useState(\"\")\n const [customerEmail,setCustomerEmail] = useState(\"\")\n\n const [editingRow, setEditingRow] = useState(null); \n const [editedAmount, setEditedAmount] = useState(\"\");\n const [actualAmt,setActualAmt] = useState(0)\n const [loaderForPaymentChange,setLoaderForPaymentChange] = useState(false)\n const [changes,setChanges]=useState()\n const debounceTimeout = useRef(null);\n\n\n const getInvoiceDetails= GetCustomerInvoice()\n const saveTransaction= SaveTransactionPayment()\n const {\n data: cardTokenPaymentPage,\n isLoading: isloading,\n refetch: refetchData,\n } = CardTokenPaymentPage({tenant:customer?.tenant})\n const saveCardToken = SaveCardTokenPaymentPage()\n const generateSessionToken = GenerateSessionToken()\n const generateCheckSum = GenerateCheckSum()\n\n const location = useLocation();\n const searchParams = new URLSearchParams(location.search);\n let history = useHistory();\n let token = searchParams.get(\"token\")\n let invoiceId = searchParams.get(\"invoiceId\")\n let dataSet = {\n token,\n invoiceId\n }\n\n\n\n\n useEffect(() => {\n const script = document.createElement('script');\n script.src = process.env.REACT_APP_NUVEI_CHECKOUT_JS; // Replace with your script URL\n script.async = true;\n\n document.body.appendChild(script);\n\n return () => {\n document.body.removeChild(script); // Cleanup on unmount\n };\n }, []);\n\n useEffect(() => {\n // Early exit if the elements are already hidden\n // if (isHidden) {\n // return;\n // }\n \n const checkAndHideLineContainers = () => {\n const elements = document.getElementsByClassName('line-container');\n const elementUpm = document.getElementsByClassName('upm-list')\n if (elements.length > 0) {\n Array.from(elements).forEach((element) => {\n if(payment === 'credit_card' && customer?.creditToken && elementUpm.length > 0){\n \n element.style.display = 'block'\n }else if(payment === 'card' && customer?.debitToken && elementUpm.length > 0){\n element.style.display = 'block'\n }\n else{\n \n element.style.display = 'none'\n } \n });\n \n \n \n }\n };\n \n \n const observer = new MutationObserver((mutationsList) => {\n mutationsList.forEach((mutation) => {\n \n if (mutation.type === 'childList') {\n checkAndHideLineContainers();\n }\n });\n });\n \n \n observer.observe(document.body, {\n childList: true, \n subtree: true, \n });\n \n \n checkAndHideLineContainers();\n \n \n const intervalId = setInterval(checkAndHideLineContainers, 500); \n return () => {\n observer.disconnect();\n clearInterval(intervalId);\n };\n }, [changes]);\n\n \n useEffect(async () => {\n\n \n\n let customerAndInvoiceData = await getInvoiceDetails.mutateAsync(dataSet)\n\n if (customerAndInvoiceData?.response) {\n if (!customerAndInvoiceData?.response?.isPaid) {\n \n let decrypt = verify(customerAndInvoiceData?.response,process.env.REACT_APP_DPI_TOKEN) \n decrypt[\"originalAmount\"] = decrypt.amount\n setCustomerEmail(decrypt.email)\n setCustomer(decrypt)\n setPaymentPermission(decrypt.paymentOption)\n\n if (!sessionStorage.getItem('ipInfo')) {\n GetIpInfo()\n }\n if (!sessionStorage.getItem(\"logId\")) {\n\n let uid = uuidv4();\n sessionStorage.setItem('logId', uid)\n\n }\n await eventLogs({ id: \"SC13\", tenant: decrypt.tenant, email: decrypt.email })\n } else {\n setIsPaid(customerAndInvoiceData?.response?.isPaid)\n }\n\n }\n\n\n\n }, [])\n \n\n let amount\n let newAmount\n let surchargeRate = 0\n if (customer?.amount) {\n amount = customer?.amount\n if(customer.surcharge){\n surchargeRate = customer.surcharge_rate\n }\n var Surcharge = amount * (surchargeRate / 100);\n Surcharge = Surcharge.toFixed(2);\n\n var updatedAmount = parseFloat(amount) + parseFloat(Surcharge);\n // var updatedAmount =parseFloat(amount)\n\n newAmount = amount\n\n }\n\n // useEffect(() => {\n // if (amount > 5000 && paymentPermission?.includes('classic_ach')) {\n // setClassicAch(true)\n // setPayment(\"classic_ach\")\n // } else {\n // if(paymentPermission?.includes('ach')){\n // setClassicAch(false)\n // setPayment(\"ach\")\n // }\n \n // }\n\n // }, [amount,customer])\n \n\n\n\n\n const handleClose = () => setShowModal(false);\n\n const handleClassicAch = () => {\n\n setPayment(\"classic_ach\")\n setShowModal(false)\n setClassicAch(true)\n }\n\n const handleEdit = () => {\n const hasErrors = Object.values(errors).some(error => error !== '');\n\n if (edit) {\n if (hasErrors) {\n setEdit(true);\n\n } else {\n setEdit(false);\n }\n } else\n setEdit(true)\n }\n\n const [formData, setFormData] = useState({\n givenName: \"\",\n familyName: \"\",\n email: \"\",\n phone: \"\",\n address: \"\",\n city: \"\",\n zip: \"\",\n state: \"\",\n });\n\n const [billingAddr, setBillingAddr] = useState({\n givenName: \"\",\n familyName: \"\",\n email: \"\",\n phone: \"\",\n address: \"\",\n city: \"\",\n zip: \"\",\n state: \"\",\n });\n\n let isMissingData\n\n useEffect(() => {\n if (customer) {\n \n setBillingAddr({\n givenName: customer.givenName || \"\",\n familyName: customer.familyName || \"\",\n email: customer.email || \"\",\n phone: customer.phoneNumber || \"\",\n address: customer.address || \"\",\n city: customer.city || \"\",\n state: customer.state || \"\",\n zip: customer.zip || \"\",\n });\n\n setFormData({\n givenName: customer.givenName || \"\",\n familyName: customer.familyName || \"\",\n email: customer.email || \"\",\n phone: customer.phoneNumber || \"\",\n address: customer.address || \"\",\n city: customer.city || \"\",\n state: customer.state || \"\",\n zip: customer.zip || \"\",\n });\n \n const initialErrors = {\n email: validateEmail(customer.email || \"\").message,\n givenName: validateGivenName(customer.givenName || \"\").message,\n familyName: validateFamilyName(customer.familyName || \"\").message,\n address: validateAddress(customer.address || \"\").message,\n city: validateCity(customer.city || \"\").message,\n state: validateState(customer.state || \"\").message,\n zip: validateZip(customer.zip || \"\").message,\n phone: validatePhone(customer.phoneNumber || \"\").message\n };\n\n // setErrors(initialErrors);\n \n \n isMissingData = Object.values(initialErrors).some(error => error !== \"\");\n \n\n\n if (isMissingData) {\n setEdit(true);\n }\n }\n\n\n\n }, [customer]);\n\n\n\n\n\n\n\n const [validated, setValidated] = useState(false);\n\n const [zipError, setZipError] = useState('');\n \n const [errors, setErrors] = useState({\n email: '',\n givenName: '',\n familyName: '',\n address: '',\n city: '',\n state: '',\n zip: '',\n phone: ''\n });\n\n\n\n\n\n const handleChange = (e) => {\n const { id, value } = e.target;\n\n\n\n setBillingAddr({\n ...billingAddr,\n [id]: value\n });\n\n\n\n // Perform validation for the field\n switch (id) {\n case 'email':\n setErrors({\n ...errors,\n email: validateEmail(value).message\n });\n break;\n case 'givenName':\n setErrors({\n ...errors,\n givenName: validateGivenName(value).message\n });\n break;\n case 'familyName':\n setErrors({\n ...errors,\n familyName: validateFamilyName(value).message\n });\n break;\n case 'address':\n setErrors({\n ...errors,\n address: validateAddress(value).message\n });\n break;\n case 'city':\n setErrors({\n ...errors,\n city: validateCity(value).message\n });\n break;\n case 'state':\n setErrors({\n ...errors,\n state: validateState(value).message\n });\n break;\n case 'zip':\n setErrors({\n ...errors,\n zip: validateZip(value).message\n });\n break;\n case 'phone':\n setErrors({\n ...errors,\n phone: validatePhone(value).message\n });\n break;\n default:\n break;\n }\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n\n // Validate all fields before submission\n const {\n email,\n givenName,\n familyName,\n address,\n city,\n state,\n zip,\n phone\n } = billingAddr;\n\n const emailValidationResult = validateEmail(email);\n const givenNameValidationResult = validateGivenName(givenName);\n const familyNameValidationResult = validateFamilyName(familyName);\n const addressValidationResult = validateAddress(address);\n const cityValidationResult = validateCity(city);\n const stateValidationResult = validateState(state);\n const zipValidationResult = validateZip(zip);\n const phoneValidationResult = validatePhone(phone);\n\n setErrors({\n email: emailValidationResult.message,\n givenName: givenNameValidationResult.message,\n familyName: familyNameValidationResult.message,\n address: addressValidationResult.message,\n city: cityValidationResult.message,\n state: stateValidationResult.message,\n zip: zipValidationResult.message,\n phone: phoneValidationResult.message\n });\n\n // Check overall form validity\n const isValid =\n emailValidationResult.valid &&\n givenNameValidationResult.valid &&\n familyNameValidationResult.valid &&\n addressValidationResult.valid &&\n cityValidationResult.valid &&\n stateValidationResult.valid &&\n zipValidationResult.valid &&\n phoneValidationResult.valid;\n\n setValidated(isValid);\n\n\n\n if (isValid) {\n setFormData({\n givenName: givenName,\n familyName: familyName,\n address: address,\n city: city,\n email: email,\n state: state,\n zip: zip,\n phone: phone\n\n })\n // handleNuvei()\n let dataSet = {...customer,givenName: givenName,\n\n familyName: familyName,\n\n address: address,\n\n city: city,\n\n email: email,\n\n state: state,\n\n zip: zip,\n\n phoneNumber: phone}\n\n setCustomer(dataSet)\n\n setEdit(false)\n\n } else {\n setEdit(true)\n\n\n }\n };\n\n\n // Validation functions (example implementations)\n const validateEmail = (email) => {\n\n if (!email) {\n return {\n valid: false,\n message: 'Email is required'\n };\n }\n\n const regex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n return {\n valid: regex.test(email),\n message: regex.test(email) ? '' : 'Invalid email address'\n };\n };\n\n const validateGivenName = (name) => {\n return {\n valid: name.trim().length > 0,\n message: name.trim().length > 0 ? '' : 'Given name is required'\n };\n };\n\n const validateFamilyName = (name) => {\n return {\n valid: name.trim().length > 0,\n message: name.trim().length > 0 ? '' : 'Family name is required'\n };\n };\n\n const validateAddress = (address) => {\n const trimmedAddress = address.trim();\n \n if (trimmedAddress.length === 0) {\n return {\n valid: false,\n message: \"Address is required\",\n };\n }\n else if (trimmedAddress.length > 50) {\n return {\n valid: false,\n message: `Address must be less than ${50} characters`,\n };\n }\n \n return {\n valid: true,\n message: \"\",\n };\n };\n \n\n const validateCity = (city) => {\n return {\n valid: city.trim().length > 0,\n message: city.trim().length > 0 ? '' : 'City is required'\n };\n };\n\n const validateState = (state) => {\n return {\n valid: state.trim().length > 0,\n message: state.trim().length > 0 ? '' : 'State is required'\n };\n };\n\n const validateZip = (zip) => {\n if (!zip) {\n return {\n valid: false,\n message: 'Zip code is required'\n };\n }\n\n const regex = /^\\d*-?\\d*$/;\n return {\n valid: regex.test(zip),\n message: regex.test(zip) ? '' : 'Invalid ZIP code'\n };\n };\n\n const validatePhone = (phone) => {\n\n if (!phone) {\n return {\n valid: false,\n message: 'Phone is required'\n };\n }\n const regex = /^[0-9]{10}$/;\n return {\n valid: regex.test(phone),\n message: regex.test(phone) ? '' : 'Invalid phone number'\n };\n };\n\n useEffect(() => {\n\n if(paymentPermission){\n if (paymentPermission?.includes('classic_ach') && !paymentPermission?.includes('ach')) {\n setPayment(\"classic_ach\");\n setClassicAch(true)\n } else if (paymentPermission?.includes('ach')) {\n setPayment(\"ach\")\n }else if(!paymentPermission?.includes('classic_ach') && !paymentPermission?.includes('ach')){\n setPayment(\"credit_card\")\n }\n if (amount > 5000 && paymentPermission?.includes('classic_ach')) {\n setClassicAch(true)\n setPayment(\"classic_ach\")\n } else {\n if(paymentPermission?.includes('ach')){\n setClassicAch(false)\n setPayment(\"ach\")\n }\n \n }\n }\n \n \n }, [paymentPermission,amount])\n\n\n\n\n\n\n // --------------------nuvei implementation-----------\n function getCurrentDateTime() {\n let now = new Date();\n let year = now.getFullYear();\n let month = padZero(now.getMonth() + 1);\n let day = padZero(now.getDate());\n let hours = padZero(now.getHours());\n let minutes = padZero(now.getMinutes());\n let seconds = padZero(now.getSeconds());\n\n return `${year}${month}${day}${hours}${minutes}${seconds}`;\n }\n\n function padZero(number) {\n return number < 10 ? \"0\" + number : number;\n }\n let partialAmountTotal = customer?.amount\n useEffect(()=>{\n clearTimeout(debounceTimeout.current);\n debounceTimeout.current = setTimeout(() => {\n setChanges(`${payment}-${formData}-${amount}-${edit}`);\n }, 200);\n },[payment,formData,amount,edit])\n useEffect(() => {\n \n setTimeout(() => {\n \n handleNuvei()\n }, 100);\n }, [changes])\n // useEffect(() => {\n\n // // handleNuvei()\n // setTimeout(() => {\n // if(payment)\n // handleNuvei()\n // }, 500);\n // }, [payment, formData])\n\n const handleEditClick = (index, currentAmount) => {\n setEditingRow(index); // Set the current row as editable\n setEditedAmount(currentAmount); // Set the initial value of the amount in input\n };\n const [errorMessage,setErrorMessage] = useState(\"\")\n\n\n const handleSaveClick = (index) => {\n \n // Validation: Check if the editedAmount is valid\n if (isNaN(editedAmount) || parseFloat(editedAmount) <= 0) {\n setErrorMessage(\"Please enter a valid amount greater than 0\");\n return; // Stop execution if validation fails\n }\n // console.log(\"index---->\",invoiceDetails[index].orginalAmount ,editedAmount)\n if (parseFloat(editedAmount) > customer.orginalAmount) {\n setErrorMessage(\"Amount should be equal to or less than the balance due.\");\n return; // Stop execution if validation fails\n }\n \n // Clear error message if the validation passes\n setErrorMessage(\"\");\n \n // Update the amount for the specific invoice\n const updatedInvoiceDetails = editedAmount !== \"\"\n ? { ...customer, amount: editedAmount }\n : customer\n \n \n // Update the invoice details state\n setCustomer(updatedInvoiceDetails);\n \n // Clear the editing state\n setEditingRow(null);\n };\n \n\n const handleNuvei = async (event) => {\n if (customer != null) {\n event?.preventDefault();\n const clientRequestId = Date.now().toString();\n const timeStamp = getCurrentDateTime();\n let upo \n let decryptToken = verify(cardTokenPaymentPage?.token,process.env.REACT_APP_DPI_TOKEN) \n if(customer?.creditToken && payment === \"credit_card\"){\n upo = customer?.creditToken\n }else if (!customer?.creditToken && payment === \"credit_card\") {\n upo = decryptToken\n }else if(customer?.debitToken && payment === \"card\"){\n upo = customer?.debitToken\n }else if(!customer?.debitToken && payment === \"card\"){\n upo = decryptToken}\n try {\n \n if (!edit) {\n\n setLoaderForPaymentChange(true)\n \n\n const checksumResponse = await generateCheckSum.mutateAsync({\n clientRequestId,\n amount:\n payment === \"credit_card\"\n ? (parseFloat(amount) + parseFloat(Surcharge)).toFixed(2)\n : parseFloat(amount).toFixed(2),\n currency,\n timeStamp,\n email: customer.email,\n tenant: customer.tenant\n })\n \n const { checksum } = checksumResponse;\n \n\n\n\n const sessionTokenResponse = await generateSessionToken.mutateAsync({\n clientRequestId,\n amount:\n payment === \"credit_card\"\n ? (parseFloat(amount) + parseFloat(Surcharge)).toFixed(2)\n : parseFloat(amount).toFixed(2),\n currency,\n timeStamp,\n checksum,\n email: customer.email,\n tenant: customer.tenant,\n upo\n })\n\n\n const { sessionToken } = sessionTokenResponse;\n\n let cardType;\n var billingDetails;\n if (payment === \"credit_card\") {\n cardType = \"Credit\";\n } else if (payment === \"card\") {\n cardType = \"Debit\";\n } else if (payment === \"ach\") {\n cardType = \"ach\";\n } else if (payment === \"classic_ach\") {\n cardType = \"classic_ach\";\n }\n if (formData) {\n if (payment === \"ach\") {\n billingDetails = {\n firstName: formData?.givenName,\n lastName: formData?.familyName,\n\n email: formData.email,\n phone: formData.phone,\n address: formData.address?.slice(0,50),\n city: formData.city,\n zip: formData.zip,\n state: formData.state,\n country: \"US\",\n };\n } else {\n\n billingDetails = {\n firstName: formData.givenName,\n lastName: formData.familyName,\n email: formData.email,\n phone: formData.phone,\n address: formData.address?.slice(0,50),\n city: formData.city,\n zip: formData.zip,\n state: formData.state,\n country: \"US\",\n };\n }\n }\n\n async function getInvoiceStatus(result) {\n \n\n \n let customerAndInvoiceData = await getInvoiceDetails.mutateAsync(dataSet)\n if (customerAndInvoiceData?.response) {\n return new Promise((resolve, reject) => {\n if (customerAndInvoiceData?.response?.isPaid) {\n\n reject(\"Invoice is already paid\")\n } else {\n\n\n resolve()\n }\n })\n\n\n }\n }\n\n async function transactionStatus(result) {\n let partialPay = false\n let dataSet = {\n InvoiceArray: customer.invoiceId,\n Type: cardType,\n TransactionTimeStamp: moment().valueOf(),\n TotalAmount: payment === \"credit_card\"\n ? parseFloat(amount) + parseFloat(Surcharge)\n : amount,\n transactionDetails: [result],\n transactionId: result?.transactionId,\n email: customerEmail,\n billingAddress: billingDetails,\n token:token,\n invoiceAmount: amount,\n\n };\n if(customer.originalAmount !== customer.amount){\n \n partialPay = true\n dataSet[\"partialPay\"]= true\n }\n if(partialPay == true){\n let dateSet = {\n invoiceNumber: customer.invoiceId,\n originalAmount: customer.originalAmount,\n paidAmount: parseFloat(customer.amount)\n }\n if(customer.orginalAmount !== customer.amount){\n dateSet[\"partialPaid\"]= true\n }\n dataSet[\"partialPaymentDetails\"] = [dateSet]\n }\n if(customer.surcharge && payment === \"credit_card\"){\n dataSet[\"surcharge\"] = Surcharge\n dataSet[\"surcharge_rate\"] = customer.surcharge_rate\n }\n if(result.userPaymentOptionId !== \"\"&& cardType=== \"Credit\" && result.result === \"APPROVED\" && !customer?.creditToken){\n \n await saveCardToken.mutateAsync({customer_id: customer.customerId,creditToken: upo,tenant:customer.tenant,accessToken:cardTokenPaymentPage.token})\n \n }\n if(result.userPaymentOptionId !== \"\"&& cardType=== \"Debit\" && result.result === \"APPROVED\" && !customer?.debitToken){\n \n await saveCardToken.mutateAsync({customer_id: customer.customerId,debitToken: upo,tenant:customer.tenant,accessToken:cardTokenPaymentPage.token})\n \n }\n \n\n await saveTransaction.mutateAsync(dataSet)\n \n return new Promise(async (resolve, reject) => {\n \n \n if (result.result === \"APPROVED\" || result.result === \"PENDING\") {\n\n sessionStorage.setItem(\"transactionId\", result?.transactionId)\n sessionStorage.setItem(\"email\", billingDetails.email)\n sessionStorage.setItem(\"name\", billingDetails.firstName + \" \" + billingDetails.lastName)\n sessionStorage.setItem(\"amount\", dataSet.TotalAmount)\n\n sessionStorage.setItem('status', result.result)\n sessionStorage.setItem('timestamp', moment().valueOf())\n sessionStorage.setItem('transactionType', cardType)\n sessionStorage.setItem('customerId', customer.customerId)\n history.push(Route_URLs.paymentProcessing);\n sessionStorage.setItem('tenant',customer.tenant)\n\n const eventData = {\n // eventName: \"Payment-successfull\",\n id: \"SC15\",\n email: customerEmail,\n tenant: customer.tenant,\n events: {\n transactionInfo: {\n transacionId: result?.transactionId,\n ...billingDetails\n },\n\n }\n\n }\n await eventLogs(eventData)\n } else {\n const eventData = {\n \n id: \"SC16\",\n email: customerEmail,\n tenant: customer.tenant,\n events: {\n transactionInfo: {\n ...result,\n ...billingDetails\n },\n\n }\n }\n await eventLogs(eventData)\n }\n\n resolve();\n });\n\n\n }\n setLoaderForPaymentChange(false)\n\n if (billingDetails) {\n await window.checkout({\n env: process.env.REACT_APP_NUVEI_STAGE,\n merchantId: customer.merchantId,\n merchantSiteId: customer.merchantSiteId,\n clientRequestId,\n timeStamp,\n checksum,\n currency,\n amount: \n payment === \"credit_card\"\n ? parseFloat(amount) + parseFloat(Surcharge)\n : amount,\n\n sessionToken,\n userTokenId,\n cssUrl: \"styles.css\",\n showResponseMessage: true,\n\n renderTo: \"#nuveiCheckout\",\n country: \"US\",\n transactionType: \"SALE\",\n pmWhitelist: [\n payment === \"card\" || payment === \"credit_card\"\n ? \"cc_card\"\n : payment === \"ach\"\n ? \"apmgw_Secure_Bank_Transfer\"\n : payment === \"classic_ach\" ? \"apmgw_ACH\" : \"\"\n ],\n savePM: payment === \"ach\"|| payment === \"classic_ach\" ?false: true,\n\n billingAddress: billingDetails,\n urlDetails: {\n successUrl:\n `${process.env.REACT_APP_SIMPLI_WEB_URL}customer/successPage`,\n pendingUrl:\n `${process.env.REACT_APP_SIMPLI_WEB_URL}customer/successPage`,\n },\n apmWindowType: \"popup\",\n prePayment: async (paymentDetails) => {\n\n await getInvoiceStatus()\n return new Promise(async (resolve, reject) => {\n if (paymentDetails?.paymentOption?.card) {\n if (paymentDetails.paymentOption.card.cardType === cardType || (paymentDetails.paymentOption.card.brand === \"AMEX\" && cardType !== \"Debit\")) {\n resolve();\n } else {\n reject(`Please enter ${cardType} card details only.`);\n }\n } else {\n resolve();\n }\n });\n },\n onResult: async (res) => {\n\n if (res.result === \"APPROVED\" || res.result === \"PENDING\") {\n setSuccess(true)\n\n }\n if (res.transactionStatus == \"DECLINED\") {\n setTimeout(() => {\n let diclinedMsg = \"system error\";\n if (res.errorDescription) {\n diclinedMsg = res.errorDescription;\n }\n if (res.gwErrorReason) {\n diclinedMsg = res.gwErrorReason;\n }\n\n if (document.getElementsByClassName(\"sfc-dialog-message\")) {\n \n\n document.querySelector(\".sfc-dialog-message\").innerText =\n document.querySelector(\".sfc-dialog-message\").innerText +\n \" Because of \" +\n diclinedMsg;\n }\n }, 100);\n }\n if(res.error!='no payment options to display'){\n\n await transactionStatus(res);\n }\n },\n\n onPaymentEvent: async (paymentDetails) => {\n\n if (paymentDetails.eventType === \"paymentStarted\") {\n await eventLogs({\n id: \"SC14\", email: customerEmail, tenant: customer.tenant\n })\n\n }\n if (paymentDetails.eventType === \"redirectionEnded\"&& paymentPermission.includes(\"classic_ach\")) {\n setTimeout(() => {\n setCloseWindow(true)\n }, 1000)\n\n\n\n }\n },\n preventACHNewWindow: true,\n\n\n });\n }\n }\n\n } catch (error) {\n\n }\n }\n };\n\n return (\n\n <>\n {closeWindow && !success ?\n \n \n Redirecting
\n \n Didn't find your bank?
\n Let's enter your bank details manually.\n
\n \n Let's enter your bank details manually.\n
\n {customer !== null && paymentPermission.length > 0\n // && expire == false\n ? \n \n \n
\n \n \n \n Selected Invoices\n \n
*/}\n
\n \n \n \n
\n\n
\n\n | # | \nInvoice Number | \nBalance Due | \nAmount to Pay | \n\n
|---|---|---|---|
| 1 | \n\n{customer.invoiceId} | \n\n | \n \n {editingRow === 1 ? (\n <>\n \n {setEditingRow(null); setEditedAmount('')}}>❌ \n\n {errorMessage} }\n \n ) : (\n | \n
Total
\n {/* */}\n
\n \n \n 
\n\n \n \n
\n \n \n Secure Payment\n \n \n Choose Your Preferred Payment method\n \n
\n \n \n\n\n {(paymentPermission?.includes('ach') || paymentPermission?.includes('classic_ach') ) && (\n
\n\n { loaderForPaymentChange && \n {\n classicAch ? setPayment(\"classic_ach\") :\n setPayment(\"ach\");\n }}\n className={\n payment === \"ach\" || payment === \"classic_ach\" ? \"active_Bankcards\" : \"Bankcards\"\n }\n >\n \n ACH\n \n : \n Bank Transfer\n\n }\n\n
\n )}\n {paymentPermission?.includes('credit_card') ? (\n \n {\n setPayment(\"credit_card\");\n }}\n className={\n payment === \"credit_card\"\n ? \"active_Bankcards\"\n : \"Bankcards\"\n }\n >\n 
\n \n \n Credit\n \n
\n ) : \"\"}\n {paymentPermission?.includes('debit_card') ? (\n \n {\n setPayment(\"card\");\n }}\n className={\n payment === \"card\" ? \"active_Bankcards\" : \"Bankcards\"\n }\n >\n 
\n \n \n Debit\n \n
\n ) : \"\"}\n\n\n\n \n
}\n \n \n\n\n \n Payment Amount\n \n\n \n \n
\n
\n : \"\"}\n\n | \n Invoice Amount :\n | \n | \n
| \n $\n {updatedAmount\n .toFixed(2)\n .toString()\n .replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")}\n | \n ) : (\n
\n
\n {(customer.surcharge && !edit) && \n
\n {\n (edit === false) ? Billing Address
\n \n\n\n\n
\n :\n \n\n {billingAddr.address}{billingAddr.city} {billingAddr.address || billingAddr.city ? \",\" : \"\"} {billingAddr.state} {billingAddr.state ? \",\" : \"\"} {billingAddr.zip}\n\n
\n\n\n \n \n \n FirstName \n\n {errors.givenName} }\n\n \n \n\n
\n \n \n LastName \n\n {errors.familyName} }\n\n \n \n
\n\n \n \n Email \n\n {errors.email} }\n\n \n \n\n
\n \n \n Phone \n\n {errors.phone} }\n\n \n \n
\n\n \n \n Address \n\n {errors.address} }\n\n \n \n\n
\n \n \n City \n\n {errors.city} }\n\n \n \n
\n\n \n \n Zip \n\n 0}\n\n />\n\n {errors.zip && {errors.zip} }\n\n \n \n\n
\n \n \n State \n\n \n \n\n {state.data.map((stateObj) => (\n \n ))}\n \n\n {errors.state && {errors.state} }\n\n \n \n
\n\n \n\n\n\n \n
\n\n }\n\n\n\n \n We add a {surchargeRate}% Processing Fee on all credit card payments. There is no Processing Fee for ACH or debit card payments.\n
}\n\n \n \n : isPaid ?\n\n\n \n \n \n This Invoice Is Already Paid.\n\n \n
\n // : expire == true? \n // This token has expired. Please return to your email and click the 'Pay Now' button again to proceed.\n // \n : \n \n \n
\n \n
\n \n Session Expire Alert!\n
\n This token will expire soon. Please close this tab, return to your email, and click the 'Pay Now' button again to proceed.\n
\n {\n setBeforeExpire(false);\n \n }}\n >\n {\" \"}\n OK\n \n
\n \n {\n handlePaymentReceiptDownload(\n props.row.original.transactionId,\n );\n }}\n >\n {props.row.original.TransactionStatus === \"APPROVED\" ||\n props.row.original.TransactionStatus === \"PENDING\" ||\n props.row.original.TransactionStatus === \"SUCCESS\" ||\n props.row.original.TransactionStatus === \"UPDATE\" ? (\n <>\n \n
\n \n \n ),\n },\n {\n Header: \"Invoice No. / Reference No.\",\n accessor: (d) => {\n return d;\n },\n id: \"invoiceArray\",\n width: 100,\n minWidth: 80,\n Cell: ({ value }) => {\n if (value?.invoiceArray && value?.invoiceArray?.length > 0) {\n return (\n \n {value.invoiceArray.map((id, index) => (\n
\n );\n } else {\n return {id}
\n ))}\n {value?.referenceNumber}
;\n }\n },\n disableSortBy: true,\n },\n {\n Header: \"Payment Method\",\n accessor: \"Type\",\n id: \"Type\",\n width: 110,\n minWidth: 80,\n },\n\n {\n Header: \"Date\",\n accessor: \"TransactionTimeStamp\",\n id: \"TransactionTimeStamp\",\n width: 100,\n minWidth: 80,\n accessor: (d) => {\n return moment(d.TransactionTimeStamp).format(\"MM/DD/YYYY\");\n },\n },\n {\n Header: \"Amount\",\n id: \"totalOriginalAmount\",\n width: 150,\n minWidth: 100,\n disableSortBy: true,\n\n\n Cell:(props)=>{\n\n let amount = props?.row?.original?.invoiceAmount ?props?.row?.original?.partialPay?props?.row?.original?.totalOriginalAmount: props.row.original.invoiceAmount : props.row.original.TotalAmount\n return (\n \n \n
\n );\n \n }\n },\n {\n Header: \"Amount Paid\",\n id: \"TotalAmount\",\n width: 150,\n minWidth: 100,\n Cell:(props)=>{\n \n let amount = props?.row?.original?.invoiceAmount ? props.row.original.invoiceAmount : props.row.original.TotalAmount\n return (\n \n \n
\n );\n \n }\n },\n {\n Header: \"Processing Fees\",\n accessor: \"surcharge\",\n id: \"surcharge\",\n width: 100,\n minWidth: 80,\n disableSortBy: true,\n Cell:(props)=>{\n // let amount = props?.row?.original?.invoiceAmount ? props.row.original.invoiceAmount : props.row.original.TotalAmount\n return(\n \n {\n let link = await customersServices.getallcustomersDetails(\n filterData\n );\n window.open(link, \"_blank\");\n }}\n >\n
*/}\n \n \n \n \n
\n \n
\n \n Inactive Session Alert!\n
\n You have been inactive for 15 minutes. You will be\n automatically logged out.\n
\n setshowPopup(false)}\n >\n {\" \"}\n I'm back\n \n
\n \n {meta.error} \n ) : null}\n
\n );\n};\nexport const InputwithLabel = ({ label, ...props }) => {\n const [field, meta] = useField(props);\n return (\n <>\n \n \n {props.infoIcon}\n {meta.error} \n ) : null}\n
\n \n \n {props.infoIcon}\n {meta.error} \n ) : null}\n
\n \n \n\n \n {/* {name === \"sector\" && (\n \n )}\n */}\n \n\n {options.map((option) => {\n return (\n <>\n \n \n );\n })}\n \n
\n );\n};\n\nexport const DatePickerField = ({ ...props }) => {\n const { setFieldValue } = useFormikContext();\n const [field] = useField(props);\n const CustomInput = React.forwardRef((props, ref) => {\n return (\n \n \n
\n );\n};\nexport const StyledTimePicker = styled.div`\n span {\n display: inline;\n }\n input:not([type=\"checkbox\"]):not([type=\"radio\"]) {\n padding-left: 28px;\n }\n .date-picker-icon {\n float: left;\n margin-top: -25px;\n margin-left: 13px;\n position: relative;\n }\n`;\n\nexport const TimePickerField = ({ ...props }) => {\n const { setFieldValue } = useFormikContext();\n const [field, meta] = useField(props);\n\n return (\n \n \n {/* {\n // setFieldValue(field.name, val);\n // }}\n // value={field.value}\n /> */}\n \n }\n inputIcon={\n props.icon ? {meta.error} \n ) : null}\n \n
\n );\n};\nexport const StyleRadio = styled.div`\n input,\n label {\n cursor: pointer;\n }\n\n fieldset {\n display: inline-flex;\n margin-right: 20px;\n }\n label {\n text-align: left;\n font-family: Montserrat Alternates;\n font-size: 11px;\n line-height: 20px;\n letter-spacing: 0px;\n color: #909090;\n margin-left: 8px;\n }\n input[type=\"radio\"] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: inline-block;\n border-radius: 50%;\n width: 16px;\n height: 16px;\n background-color: transparent;\n background-clip: content-box;\n padding: 4px;\n border: 2px solid #ffffff;\n &:checked {\n background-color: white;\n &:after {\n background-color: white;\n }\n }\n }\n`;\nexport const Radio = (props) => {\n const { label, name, options, ...rest } = props;\n const [field, meta] = useField(props);\n return (\n \n \n \n {({ field }) => {\n return options.map((option) => {\n return (\n \n );\n });\n }}\n \n \n {meta.error && meta.touched ? (\n {meta.error} \n ) : null}\n
\n );\n};\nexport const StyleRadioBlue = styled.div`\n input,\n label {\n cursor: pointer;\n }\n\n fieldset {\n display: inline-flex;\n margin-right: 20px;\n }\n label {\n text-align: left;\n font-family: Montserrat Alternates;\n font-size: 11px;\n line-height: 20px;\n letter-spacing: 0px;\n color: #909090;\n margin-left: 8px;\n }\n input[type=\"radio\"] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: inline-block;\n border-radius: 50%;\n width: 16px;\n height: 16px;\n background-color: transparent;\n background-clip: content-box;\n padding: 4px;\n border: 2px solid #ffffff;\n &:checked {\n border: 4px solid #4edaf7;\n background-color: white;\n padding: 0px;\n\n &:after {\n background-color: white;\n }\n }\n }\n`;\nexport const RadioBlue = (props) => {\n const { label, name, options, ...rest } = props;\n const [field, meta] = useField(props);\n return (\n \n \n \n {({ field }) => {\n return options.map((option) => {\n return (\n \n );\n });\n }}\n \n \n {meta.error && meta.touched ? (\n {meta.error} \n ) : null}\n
\n );\n};\n\nconst StyledCheckbox = styled.div`\n display: flex;\n align-items: center;\n\n input[type=\"checkbox\"] {\n position: relative;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: #3a3b48;\n border: 1px solid #707070;\n border-radius: 3px;\n display: inline-block;\n width: 14px;\n height: 14px;\n cursor: pointer;\n\n background-repeat: no-repeat;\n &:after {\n content: \"✔\";\n color: #3a3b48;\n position: absolute;\n top: -60%;\n font-size: 11px;\n padding: 2px;\n z-index: 4;\n }\n &:checked {\n &:after {\n content: \"✔\";\n color: #33c2df;\n position: absolute;\n top: -60%;\n font-size: 11px;\n padding: 2px;\n z-index: 4;\n }\n }\n }\n label {\n font-family: Montserrat Alternates-semiBold;\n font-size: 11px;\n line-height: 25px;\n color: #808186;\n margin-left: 10px;\n cursor: pointer;\n }\n`;\n\nexport const Checkbox = ({ children, ...props }) => {\n const [field, meta] = useField({ ...props, type: \"checkbox\" });\n\n return (\n \n \n \n {\n setFieldValue(field.name, val);\n }}\n />\n \n {meta.error && meta.touched ? (\n {meta.error} \n ) : null}\n
\n );\n};\nexport { Formik, useField, Field };\n","import { useQuery } from \"react-query\";\nimport operationsService from \"services/operations.service\";\n\nexport const useGetTenantsForLogin = (filterData) => {\n return useQuery(\n [\"loginTenants\"],\n () => operationsService.getTenantsForLogin(),\n {\n keepPreviousData: true,\n staleTime: 60 * 60 * 1000,\n }\n );\n};\n\nexport const useEndCustomers = () => {\n return useQuery(\n [\"EndCustomer\"],\n () => operationsService.getCustomersForLogin(),\n {\n keepPreviousData: true,\n staleTime: 60 * 60 * 1000,\n }\n );\n};\n\nexport const useGetTenantCustomers = (tenantName) => {\n return useQuery(\n [\"tenantCustomer\"],\n () => operationsService.getTenantUsers(tenantName),\n {\n keepPreviousData: true,\n staleTime: 60 * 60 * 1000,\n }\n );\n};\n\nexport const useGetInsights = (tenantName) => {\n return useQuery(\n [\"tenantInsights\"],\n () => operationsService.getInsights(tenantName),\n {\n keepPreviousData: true,\n staleTime: 60 * 60 * 1000,\n }\n );\n};\n\nexport const useGetDaily = (tenantName) => {\n return useQuery(\n [\"tenantDaily\"],\n () => operationsService.getDailys(tenantName),\n {\n keepPreviousData: true,\n staleTime: 60 * 60 * 1000,\n }\n );\n};\n\nexport const useGetMetrics = (tenantName) => {\n return useQuery(\n [\"tenantMetrics\"],\n () => operationsService.getMetrics(tenantName),\n {\n keepPreviousData: true,\n staleTime: 60 * 60 * 1000,\n }\n );\n};\n\nexport const useGetReportData = (tenantName) => {\n return useQuery(\n [\"tenantReport\"],\n () => operationsService.getReportData(tenantName),\n {\n keepPreviousData: true,\n staleTime: 60 * 60 * 1000,\n }\n );\n};\n\nexport const useGetUsers = () => {\n return useQuery([\"superUsers\"], () => operationsService.getUsers(), {\n keepPreviousData: true,\n staleTime: 60 * 60 * 1000,\n });\n};\n","import styled from \"styled-components\";\nimport { UpIcon, DownIcon,InfoIcon } from \"assets/icons\";\nimport Tooltip from \"./Tooltip\";\n\nconst Up = styled.span`\n color: #07ba00;\n font-weight: bold;\n\n svg {\n font-size: 10px;\n margin-bottom: 2px;\n margin-left: 3px;\n }\n`;\n\nconst Down = styled.span`\n color: #ff0505;\n font-weight: bold;\n svg {\n font-size: 10px;\n margin-bottom: 2px;\n margin-left: 3px;\n }\n`;\nfunction Change(props) {\n const {place} = props\n if (props.value > 0) {\n return <>{header}
\n {body}
\n {footer.length > 0 && {footer}
}\n \n {\" \"}\n 401 - You are not Authorized !\n
\n );\n};\n","import styled from \"styled-components\";\nimport React from \"react\";\n\nconst StyledPage = styled.div`\n position: relative;\n width: 100%;\n margin-top:-20px;\n\n margin-top:-41px;\n\n .page-header {\n margin: 41px 0;\n /* margin: 37px 0; */\n }\n\n .page-title {\n font-family: Montserrat Alternates-Bold;\n color: #909090;\n font-size: 24px;\n line-height: 29px;\n font-style: normal;\n margin-bottom: 0;\n display: inline-block;\n }\n .page-body{\n margin-top:-29px;\n }\n .page-footer{\n margin-left: -15px;\n }\n`;\n\nconst Page = ({ children }) => {\n const header = React.Children.map(children, (child) =>\n child.type.displayName === \"Header\" ? child : null\n );\n const body = React.Children.map(children, (child) =>\n child.type.displayName === \"Body\" ? child : null\n );\n const footer = React.Children.map(children, (child) =>\n child.type.displayName === \"Footer\" ? child : null\n );\n return (\n{header}
\n {body}
\n {footer}
\n SDF microchips
\n//\n//
\n// \n// \n//
\n//
\n// Customer since
\n// 1990\n// \n//Total Orders
\n// $30,890,000\n// \n// \n//Paid on Time
\n// 10%\n// \n// \n//