{props.children}
)}\n {props.icon && props.alignIcon === \"right\" ? props.icon : null}\n\n
\n \n \n {showBackButton && (\n
\n \n ) : (\n <>\n Let's get started.
\n\n In order to show you the best insights about your accounts receivable team, we will need to connect to your team's accounting system.\n Please select one of the options below to get started.\n
\n\n {erpList.map((option) => {\n const isOther = option.name === \"Other\";\n return (\n ) => {\n if (isOther) {\n setOnboardStep(OnboardStep.OtherERP);\n setSelectedERP(null);\n } else {\n handleOpenPopup(e, option);\n }\n }}\n data-testid={`SelectERP${option.name}Button`}\n >\n {isOther ? <>{option.name} : 
}\n
\n );\n })}\n Connecting...
\n\n Please wait while we establish a connection with {selectedERP.name}. In a few moments you will see a pop-up window open\n requesting you to enter your {selectedERP.name} information. This process is totally secure and will link your accounts with Lockstep\n quickly and easily.\n
\n\n
\n {props?.label &&\n (typeof props?.label === \"string\" ? (\n \n \n \n ) : isLabelObject(props?.label) ? (\n \n \n \n ) : (\n <>\n ))}\n\n ) => (props.onChange ? props.onChange(e.target.value) : null)}\n onKeyDown={props.onKeyDown}\n defaultValue={props.defaultValue ?? undefined}\n ref={props.inputRef ?? undefined}\n autoComplete={props.autocomplete ?? undefined}\n type={props.type ?? undefined}\n required={props.required}\n disabled={props.disabled}\n value={props.value ?? undefined}\n maxLength={props.maxLength}\n style={props.errorMessage ? { border: \"1px solid #e54646\" } : {}}\n />\n {props?.errorMessage && (\n \n \n \n )}\n
\n );\n}\n\nexport function InputWithIcon(props: SearchBarProps): React.ReactElement {\n const inputId = typeof props?.label === \"string\" ? props?.label : props?.label?.regularText;\n\n return (\n \n {props?.label ? (\n \n ) : (\n <>\n )}\n\n
\n );\n}\n","import React from \"react\";\nimport { AutocompleteProps as MuiAutocompleteProps } from \"@mui/material\";\nimport { UseAutocompleteProps as MuiUseAutocompleteProps } from \"@mui/core\";\nimport { Autocomplete as MUIAutocomplete } from \"@mui/material\";\nimport { DropdownArrow } from \"../Icons/Icons\";\nimport \"./Autocomplete.scss\";\n\ntype AutocompleteProps\n ) => (props.onChange ? props.onChange(e.target.value) : null)}\n onKeyDown={props.onKeyDown}\n defaultValue={props.defaultValue ?? undefined}\n required={props.required}\n value={props.value ?? undefined}\n maxLength={props.maxLength}\n />\n {props.icon ||
\n Enter your personal information.
\n \n \n );\n}\n\nexport default EditPersonalInfo;\n","import React, { useState } from \"react\";\nimport Button from \"../../library/Button/Button\";\nimport { Edit } from \"../../library/Icons/Icons\";\nimport { OnboardContext } from \"../../../contexts/OnboardContext\";\nimport { AppContext } from \"../../../contexts/AppContext\";\nimport { DataMode, OnboardStep } from \"../../../types/enums\";\nimport { provisioningClient } from \"../../../db/accessor\";\nimport { useHistory } from \"react-router-dom\";\n\ntype ViewPersonalInfoProps = {\n setShowCancel: (prev: boolean) => void;\n supportedCurrencies: { id: string; label: string }[];\n};\n\nfunction ViewPersonalInfo(props: ViewPersonalInfoProps): React.ReactElement {\n const history = useHistory();\n const { setOnboardStep, setDataMode, isInvited, bearerToken } = React.useContext(OnboardContext) as OnboardType;\n const { onboardData } = React.useContext(AppContext) as AppType;\n const [isLoading, setLoading] = useStateLooking good!
\n\nTake a moment to make sure your personal information is correct.
\n\n\n\n
\n
\n\n \n
\n\n \n
\n\n Your Name
\n \n {onboardData.fullName}\n
\n \n
\n Email Address
\n \n {onboardData.email}\n
\n \n
\n \n
\n Primary Currency
\n \n {props.supportedCurrencies.find((val: { id: string; label: string }) => val.id === onboardData.defaultCurrency)?.label ?? \"\"}\n
\n \n \n\n } variant=\"secondary\" onClick={handleEdit} alignIcon=\"right\" loading={isLoading}>\n I need to make an edit.\n \n
\n \n );\n}\n\nexport default ViewPersonalInfo;\n","import React, { useState, useEffect } from \"react\";\nimport { OnboardContext } from \"../../../contexts/OnboardContext\";\nimport { DataMode } from \"../../../types/enums\";\nimport { default as Edit } from \"./EditPersonalInfo\";\nimport { default as View } from \"./ViewPersonalInfo\";\nimport { definitionsClient } from \"../../../db/accessor\";\nimport \"./PersonalInfo.scss\";\n\n// TODO: The currency API currently includes certain values that aren't likely to be selected as a default currency, so we won't show them. See\n// TODO: work item 8199 for modifying the API to exclude these values if possible.\nconst filteredValues: { [key: string]: string } = {\n XBA: \"Bond Markets Unit European Composite Unit (EURCO)\",\n XBB: \"Bond Markets Unit European Monetary Unit (E.M.U.-6)\",\n XBC: \"Bond Markets Unit European Unit of Account 9 (E.U.A.-9)\",\n XBD: \"Bond Markets Unit European Unit of Account 17 (E.U.A.-17)\",\n XTS: \"Codes specifically reserved for testing purposes\",\n XXX: \"The codes assigned for transactions where no currency is involved\",\n};\n\nfunction PersonalInfo(): React.ReactElement {\n const { dataMode } = React.useContext(OnboardContext) as OnboardType;\n const [supportedCurrencies, setSupportedCurrencies] = useState<{ id: string; label: string }[]>([]);\n const [showCancel, setShowCancel] = useState\n {supportedCurrencies.length ? (\n <>\n {dataMode === DataMode.Edit &&
\n );\n}\n\nexport default PersonalInfo;\n","//TODO: Remove this file when the country/state APIs are hooked up\nexport const countries = [\n {label: \"Afghanistan\", id: \"AF\"},\n {label: \"Ã…land Islands\", id: \"AX\"},\n {label: \"Albania\", id: \"AL\"},\n {label: \"Algeria\", id: \"DZ\"},\n {label: \"American Samoa\", id: \"AS\"},\n {label: \"Andorra\", id: \"AD\"},\n {label: \"Angola\", id: \"AO\"},\n {label: \"Anguilla\", id: \"AI\"},\n {label: \"Antarctica\", id: \"AQ\"},\n {label: \"Antigua and Barbuda\", id: \"AG\"},\n {label: \"Argentina\", id: \"AR\"},\n {label: \"Armenia\", id: \"AM\"},\n {label: \"Aruba\", id: \"AW\"},\n {label: \"Australia\", id: \"AU\"},\n {label: \"Austria\", id: \"AT\"},\n {label: \"Azerbaijan\", id: \"AZ\"},\n {label: \"Bahamas\", id: \"BS\"},\n {label: \"Bahrain\", id: \"BH\"},\n {label: \"Bangladesh\", id: \"BD\"},\n {label: \"Barbados\", id: \"BB\"},\n {label: \"Belarus\", id: \"BY\"},\n {label: \"Belgium\", id: \"BE\"},\n {label: \"Belize\", id: \"BZ\"},\n {label: \"Benin\", id: \"BJ\"},\n {label: \"Bermuda\", id: \"BM\"},\n {label: \"Bhutan\", id: \"BT\"},\n {label: \"Bolivia\", id: \"BO\"},\n {label: \"Bosnia and Herzegovina\", id: \"BA\"},\n {label: \"Botswana\", id: \"BW\"},\n {label: \"Bouvet Island\", id: \"BV\"},\n {label: \"Brazil\", id: \"BR\"},\n {label: \"British Indian Ocean Territory\", id: \"IO\"},\n {label: \"Brunei Darussalam\", id: \"BN\"},\n {label: \"Bulgaria\", id: \"BG\"},\n {label: \"Burkina Faso\", id: \"BF\"},\n {label: \"Burundi\", id: \"BI\"},\n {label: \"Cambodia\", id: \"KH\"},\n {label: \"Cameroon\", id: \"CM\"},\n {label: \"Canada\", id: \"CA\"},\n {label: \"Cape Verde\", id: \"CV\"},\n {label: \"Cayman Islands\", id: \"KY\"},\n {label: \"Central African Republic\", id: \"CF\"},\n {label: \"Chad\", id: \"TD\"},\n {label: \"Chile\", id: \"CL\"},\n {label: \"China\", id: \"CN\"},\n {label: \"Christmas Island\", id: \"CX\"},\n {label: \"Cocos (Keeling) Islands\", id: \"CC\"},\n {label: \"Colombia\", id: \"CO\"},\n {label: \"Comoros\", id: \"KM\"},\n {label: \"Congo\", id: \"CG\"},\n {label: \"Congo, The Democratic Republic of the\", id: \"CD\"},\n {label: \"Cook Islands\", id: \"CK\"},\n {label: \"Costa Rica\", id: \"CR\"},\n {label: \"Cote D'Ivoire\", id: \"CI\"},\n {label: \"Croatia\", id: \"HR\"},\n {label: \"Cuba\", id: \"CU\"},\n {label: \"Cyprus\", id: \"CY\"},\n {label: \"Czech Republic\", id: \"CZ\"},\n {label: \"Denmark\", id: \"DK\"},\n {label: \"Djibouti\", id: \"DJ\"},\n {label: \"Dominica\", id: \"DM\"},\n {label: \"Dominican Republic\", id: \"DO\"},\n {label: \"Ecuador\", id: \"EC\"},\n {label: \"Egypt\", id: \"EG\"},\n {label: \"El Salvador\", id: \"SV\"},\n {label: \"Equatorial Guinea\", id: \"GQ\"},\n {label: \"Eritrea\", id: \"ER\"},\n {label: \"Estonia\", id: \"EE\"},\n {label: \"Ethiopia\", id: \"ET\"},\n {label: \"Falkland Islands (Malvinas)\", id: \"FK\"},\n {label: \"Faroe Islands\", id: \"FO\"},\n {label: \"Fiji\", id: \"FJ\"},\n {label: \"Finland\", id: \"FI\"},\n {label: \"France\", id: \"FR\"},\n {label: \"French Guiana\", id: \"GF\"},\n {label: \"French Polynesia\", id: \"PF\"},\n {label: \"French Southern Territories\", id: \"TF\"},\n {label: \"Gabon\", id: \"GA\"},\n {label: \"Gambia\", id: \"GM\"},\n {label: \"Georgia\", id: \"GE\"},\n {label: \"Germany\", id: \"DE\"},\n {label: \"Ghana\", id: \"GH\"},\n {label: \"Gibraltar\", id: \"GI\"},\n {label: \"Greece\", id: \"GR\"},\n {label: \"Greenland\", id: \"GL\"},\n {label: \"Grenada\", id: \"GD\"},\n {label: \"Guadeloupe\", id: \"GP\"},\n {label: \"Guam\", id: \"GU\"},\n {label: \"Guatemala\", id: \"GT\"},\n {label: \"Guernsey\", id: \"GG\"},\n {label: \"Guinea\", id: \"GN\"},\n {label: \"Guinea-Bissau\", id: \"GW\"},\n {label: \"Guyana\", id: \"GY\"},\n {label: \"Haiti\", id: \"HT\"},\n {label: \"Heard Island and Mcdonald Islands\", id: \"HM\"},\n {label: \"Holy See (Vatican City State)\", id: \"VA\"},\n {label: \"Honduras\", id: \"HN\"},\n {label: \"Hong Kong\", id: \"HK\"},\n {label: \"Hungary\", id: \"HU\"},\n {label: \"Iceland\", id: \"IS\"},\n {label: \"India\", id: \"IN\"},\n {label: \"Indonesia\", id: \"ID\"},\n {label: \"Iran, Islamic Republic Of\", id: \"IR\"},\n {label: \"Iraq\", id: \"IQ\"},\n {label: \"Ireland\", id: \"IE\"},\n {label: \"Isle of Man\", id: \"IM\"},\n {label: \"Israel\", id: \"IL\"},\n {label: \"Italy\", id: \"IT\"},\n {label: \"Jamaica\", id: \"JM\"},\n {label: \"Japan\", id: \"JP\"},\n {label: \"Jersey\", id: \"JE\"},\n {label: \"Jordan\", id: \"JO\"},\n {label: \"Kazakhstan\", id: \"KZ\"},\n {label: \"Kenya\", id: \"KE\"},\n {label: \"Kiribati\", id: \"KI\"},\n {label: \"Korea, Democratic People's Republic of\", id: \"KP\"},\n {label: \"Korea, Republic of\", id: \"KR\"},\n {label: \"Kuwait\", id: \"KW\"},\n {label: \"Kyrgyzstan\", id: \"KG\"},\n {label: \"Lao People's Democratic Republic\", id: \"LA\"},\n {label: \"Latvia\", id: \"LV\"},\n {label: \"Lebanon\", id: \"LB\"},\n {label: \"Lesotho\", id: \"LS\"},\n {label: \"Liberia\", id: \"LR\"},\n {label: \"Libyan Arab Jamahiriya\", id: \"LY\"},\n {label: \"Liechtenstein\", id: \"LI\"},\n {label: \"Lithuania\", id: \"LT\"},\n {label: \"Luxembourg\", id: \"LU\"},\n {label: \"Macao\", id: \"MO\"},\n {label: \"Macedonia, The Former Yugoslav Republic of\", id: \"MK\"},\n {label: \"Madagascar\", id: \"MG\"},\n {label: \"Malawi\", id: \"MW\"},\n {label: \"Malaysia\", id: \"MY\"},\n {label: \"Maldives\", id: \"MV\"},\n {label: \"Mali\", id: \"ML\"},\n {label: \"Malta\", id: \"MT\"},\n {label: \"Marshall Islands\", id: \"MH\"},\n {label: \"Martinique\", id: \"MQ\"},\n {label: \"Mauritania\", id: \"MR\"},\n {label: \"Mauritius\", id: \"MU\"},\n {label: \"Mayotte\", id: \"YT\"},\n {label: \"Mexico\", id: \"MX\"},\n {label: \"Micronesia, Federated States of\", id: \"FM\"},\n {label: \"Moldova, Republic of\", id: \"MD\"},\n {label: \"Monaco\", id: \"MC\"},\n {label: \"Mongolia\", id: \"MN\"},\n {label: \"Montserrat\", id: \"MS\"},\n {label: \"Morocco\", id: \"MA\"},\n {label: \"Mozambique\", id: \"MZ\"},\n {label: \"Myanmar\", id: \"MM\"},\n {label: \"Namibia\", id: \"NA\"},\n {label: \"Nauru\", id: \"NR\"},\n {label: \"Nepal\", id: \"NP\"},\n {label: \"Netherlands\", id: \"NL\"},\n {label: \"Netherlands Antilles\", id: \"AN\"},\n {label: \"New Caledonia\", id: \"NC\"},\n {label: \"New Zealand\", id: \"NZ\"},\n {label: \"Nicaragua\", id: \"NI\"},\n {label: \"Niger\", id: \"NE\"},\n {label: \"Nigeria\", id: \"NG\"},\n {label: \"Niue\", id: \"NU\"},\n {label: \"Norfolk Island\", id: \"NF\"},\n {label: \"Northern Mariana Islands\", id: \"MP\"},\n {label: \"Norway\", id: \"NO\"},\n {label: \"Oman\", id: \"OM\"},\n {label: \"Pakistan\", id: \"PK\"},\n {label: \"Palau\", id: \"PW\"},\n {label: \"Palestinian Territory, Occupied\", id: \"PS\"},\n {label: \"Panama\", id: \"PA\"},\n {label: \"Papua New Guinea\", id: \"PG\"},\n {label: \"Paraguay\", id: \"PY\"},\n {label: \"Peru\", id: \"PE\"},\n {label: \"Philippines\", id: \"PH\"},\n {label: \"Pitcairn\", id: \"PN\"},\n {label: \"Poland\", id: \"PL\"},\n {label: \"Portugal\", id: \"PT\"},\n {label: \"Puerto Rico\", id: \"PR\"},\n {label: \"Qatar\", id: \"QA\"},\n {label: \"Reunion\", id: \"RE\"},\n {label: \"Romania\", id: \"RO\"},\n {label: \"Russian Federation\", id: \"RU\"},\n {label: \"RWANDA\", id: \"RW\"},\n {label: \"Saint Helena\", id: \"SH\"},\n {label: \"Saint Kitts and Nevis\", id: \"KN\"},\n {label: \"Saint Lucia\", id: \"LC\"},\n {label: \"Saint Pierre and Miquelon\", id: \"PM\"},\n {label: \"Saint Vincent and the Grenadines\", id: \"VC\"},\n {label: \"Samoa\", id: \"WS\"},\n {label: \"San Marino\", id: \"SM\"},\n {label: \"Sao Tome and Principe\", id: \"ST\"},\n {label: \"Saudi Arabia\", id: \"SA\"},\n {label: \"Senegal\", id: \"SN\"},\n {label: \"Serbia and Montenegro\", id: \"CS\"},\n {label: \"Seychelles\", id: \"SC\"},\n {label: \"Sierra Leone\", id: \"SL\"},\n {label: \"Singapore\", id: \"SG\"},\n {label: \"Slovakia\", id: \"SK\"},\n {label: \"Slovenia\", id: \"SI\"},\n {label: \"Solomon Islands\", id: \"SB\"},\n {label: \"Somalia\", id: \"SO\"},\n {label: \"South Africa\", id: \"ZA\"},\n {label: \"South Georgia and the South Sandwich Islands\", id: \"GS\"},\n {label: \"Spain\", id: \"ES\"},\n {label: \"Sri Lanka\", id: \"LK\"},\n {label: \"Sudan\", id: \"SD\"},\n {label: \"Suriname\", id: \"SR\"},\n {label: \"Svalbard and Jan Mayen\", id: \"SJ\"},\n {label: \"Swaziland\", id: \"SZ\"},\n {label: \"Sweden\", id: \"SE\"},\n {label: \"Switzerland\", id: \"CH\"},\n {label: \"Syrian Arab Republic\", id: \"SY\"},\n {label: \"Taiwan, Province of China\", id: \"TW\"},\n {label: \"Tajikistan\", id: \"TJ\"},\n {label: \"Tanzania, United Republic of\", id: \"TZ\"},\n {label: \"Thailand\", id: \"TH\"},\n {label: \"Timor-Leste\", id: \"TL\"},\n {label: \"Togo\", id: \"TG\"},\n {label: \"Tokelau\", id: \"TK\"},\n {label: \"Tonga\", id: \"TO\"},\n {label: \"Trinidad and Tobago\", id: \"TT\"},\n {label: \"Tunisia\", id: \"TN\"},\n {label: \"Turkey\", id: \"TR\"},\n {label: \"Turkmenistan\", id: \"TM\"},\n {label: \"Turks and Caicos Islands\", id: \"TC\"},\n {label: \"Tuvalu\", id: \"TV\"},\n {label: \"Uganda\", id: \"UG\"},\n {label: \"Ukraine\", id: \"UA\"},\n {label: \"United Arab Emirates\", id: \"AE\"},\n {label: \"United Kingdom\", id: \"GB\"},\n {label: \"United States\", id: \"US\"},\n {label: \"United States Minor Outlying Islands\", id: \"UM\"},\n {label: \"Uruguay\", id: \"UY\"},\n {label: \"Uzbekistan\", id: \"UZ\"},\n {label: \"Vanuatu\", id: \"VU\"},\n {label: \"Venezuela\", id: \"VE\"},\n {label: \"Vietnam\", id: \"VN\"},\n {label: \"Virgin Islands, British\", id: \"VG\"},\n {label: \"Virgin Islands, U.S.\", id: \"VI\"},\n {label: \"Wallis and Futuna\", id: \"WF\"},\n {label: \"Western Sahara\", id: \"EH\"},\n {label: \"Yemen\", id: \"YE\"},\n {label: \"Zambia\", id: \"ZM\"},\n {label: \"Zimbabwe\", id: \"ZW\"}\n] ","import React, { useEffect, useRef, useState } from \"react\";\nimport { TextField } from \"@mui/material\";\n\nimport Button from \"../../library/Button/Button\";\nimport { Input } from \"../../library/Input/Input\";\nimport { BackArrow } from \"../../library/Icons/Icons\";\nimport { OnboardContext } from \"../../../contexts/OnboardContext\";\nimport { AppContext } from \"../../../contexts/AppContext\";\nimport { DataMode, OnboardStep } from \"../../../types/enums\";\nimport { countries } from \"../../../Countries\";\nimport Autocomplete from \"../../library/Autocomplete/Autocomplete\";\n\ntype EditCompanyInfoProps = {\n showCancel: boolean;\n};\n\nfunction EditCompanyInfo(props: EditCompanyInfoProps): React.ReactElement {\n const { setOnboardStep, setDataMode } = React.useContext(OnboardContext) as OnboardType;\n const { setOnboardData, onboardData } = React.useContext(AppContext) as AppType;\n const [countryList] = useStateEnter your company's information.
\n\n \n \n );\n}\n\nexport default EditCompanyInfo;\n","import React from \"react\";\nimport Button from \"../../library/Button/Button\";\nimport { RightArrowWhite, Edit, BackArrow, Company } from \"../../library/Icons/Icons\";\nimport { OnboardContext } from \"../../../contexts/OnboardContext\";\nimport { AppContext } from \"../../../contexts/AppContext\";\nimport Utils from \"../../../utils/utils\";\nimport { DataMode, OnboardStep } from \"../../../types/enums\";\n\ntype ViewCompanyInfoProps = {\n setShowCancel: (prev: boolean) => void;\n};\n\nfunction ViewCompanyInfo(props: ViewCompanyInfoProps): React.ReactElement {\n const { setOnboardStep, setDataMode } = React.useContext(OnboardContext) as OnboardType;\n const { onboardData } = React.useContext(AppContext) as AppType;\n\n const handleSubmit = () => {\n setDataMode(DataMode.Edit);\n setOnboardStep(OnboardStep.ConnectEmail);\n };\n\n const handleEdit = () => {\n setDataMode(DataMode.Edit);\n props.setShowCancel(true);\n };\n\n return (\n <>\nAlmost Done.
\nPlease confirm your company's information is correct.
\n\n\n
\n\n \n
\n\n \n \n
\n\n \n
\n\n Company Name
\n \n {onboardData?.company?.companyName}\n
\n \n
\n Company Phone Number
\n \n {onboardData?.company?.phoneNumber ? Utils.formatPhoneNumber(onboardData.company.phoneNumber) : \"\"}\n
\n \n \n\n
\n \n
\n\n Company Address
\n\n \n
\n \n {onboardData.company.address1}\n
\n \n {onboardData.company.address2}\n
\n \n {onboardData?.company?.city}, {onboardData?.company?.stateRegion}\n
\n \n {onboardData?.company?.postalCode}\n
\n \n {onboardData?.company?.country}\n
\n \n {onboardData?.company?.faxNumber && (\n <>\n
\n Company Fax Number
\n \n {Utils.formatPhoneNumber(onboardData?.company?.faxNumber)}\n
\n \n )}\n \n } data-testid=\"ReadonlyCompanyInfoLooksGreatButton\" onClick={handleSubmit}>\n Looks Great\n \n\n } data-testid=\"ReadonlyCompanyInfoMakeEditButton\" variant=\"secondary\" onClick={handleEdit} alignIcon={\"right\"}>\n I Need to Make an Edit\n \n
\n \n );\n}\n\nexport default ViewCompanyInfo;\n","import React, { useState } from \"react\";\nimport { DataMode } from \"../../../types/enums\";\nimport { default as Edit } from \"./EditCompanyInfo\";\nimport { default as View } from \"./ViewCompanyInfo\";\nimport { OnboardContext } from \"../../../contexts/OnboardContext\";\nimport \"./CompanyInfo.scss\";\n\nfunction CompanyInfo(): React.ReactElement {\n const { dataMode } = React.useContext(OnboardContext) as OnboardType;\n const [showCancel, setShowCancel] = useState\n {dataMode === DataMode.Edit &&
\n );\n}\n\nexport default CompanyInfo;\n","import React from \"react\";\nimport { useIntercom } from \"react-use-intercom\";\n\nimport Button from \"../../library/Button/Button\";\nimport \"./OnboardError.scss\";\n\ninterface OnboardErrorProps {\n onTryAgain: () => void;\n}\n\nexport default function OnboardError(props: OnboardErrorProps): React.ReactElement {\n const { show } = useIntercom();\n\n return (\n \n
\n );\n}\n","import React, { useState } from \"react\";\nimport { log } from \"react-fullstory\";\nimport { OnboardContext } from \"../../../contexts/OnboardContext\";\nimport { AppContext } from \"../../../contexts/AppContext\";\nimport { OnboardStep } from \"../../../types/enums\";\nimport OnboardError from \"../OnboardError/OnboardError\";\nimport { provisioningClient } from \"../../../db/accessor\";\nimport \"./CreateAccount.scss\";\n\nfunction CreateAccount(): React.ReactElement {\n const { setOnboardStep, bearerToken, setBearerToken } = React.useContext(OnboardContext) as OnboardType;\n const { onboardData, setOnboardData } = React.useContext(AppContext) as AppType;\n\n const [apiError, setAPIError] = useStateSomething Went Wrong.
\n\n {\"We had a problem finalizing your account. This issue has been recorded and our engineering team is on it.\"}\n
\n\n\n {\"In the meantime, you can chat with our support team, or you can \"}\n
\n \n {\n props.onTryAgain();\n }}\n >\n Try Again\n \n
\n \n {!apiError && (\n
\n );\n}\n\nexport default CreateAccount;\n","import React from \"react\";\nimport { useHistory } from \"react-router-dom\";\nimport { useMsal } from \"@azure/msal-react\";\n\nimport Button from \"../../library/Button/Button\";\nimport { forgotPasswordRedirectRequest } from \"../../../auth/authConfig\";\nimport \"./ExisitingAccount.scss\";\n\nfunction ExistingAccount(): React.ReactElement {\n const history = useHistory();\n const { instance } = useMsal();\n\n return (\n \n handleTryAgain()} />\n
\n )}\n \n
\n );\n}\n\nexport default ExistingAccount;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { TextField } from \"@mui/material\";\nimport { log } from \"react-fullstory\";\nimport { Input } from \"../../library/Input/Input\";\nimport Button from \"../../library/Button/Button\";\nimport Autocomplete from \"../../library/Autocomplete/Autocomplete\";\nimport { BackArrow, Search } from \"../../library/Icons/Icons\";\nimport { AppContext } from \"../../../contexts/AppContext\";\nimport { definitionsClient } from \"../../../db/accessor\";\nimport Utils from \"../../../utils/utils\";\nimport { OnboardStep } from \"../../../types/enums\";\nimport { OnboardContext } from \"../../../contexts/OnboardContext\";\nimport \"./OtherERP.scss\";\n\nfunction OtherERP(): React.ReactElement {\n const { setOnboardStep } = React.useContext(OnboardContext) as OnboardType;\n const { setSelectedERP, setOnboardData, createLead } = React.useContext(AppContext) as AppType;\n const [email, setEmail] = useState(\"\");\n const [emailError, setEmailError] = useStateWe found your account!
\nGreat news, you’re already a member of Lockstep. All you need to do is sign in and you’re ready to go.
\n\n\n \n \n
\n \n {showBackButton && (\n
\n );\n}\n\nexport default OtherERP;\n","export default __webpack_public_path__ + \"static/media/ConnectOutlookLogo.55ab867b.svg\";","export default __webpack_public_path__ + \"static/media/ConnectGmailLogo.abbd9522.svg\";","/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React, { MouseEvent, useEffect, useState } from \"react\";\nimport OutlookLogo from \"../../../assets/ConnectOutlookLogo.svg\";\nimport GmailLogo from \"../../../assets/ConnectGmailLogo.svg\";\nimport Button from \"../../library/Button/Button\";\nimport { provisioningClient, syncClient } from \"../../../db/accessor\";\nimport { OnboardContext } from \"../../../contexts/OnboardContext\";\nimport { AppContext } from \"../../../contexts/AppContext\";\nimport { useHistory } from \"react-router-dom\";\nimport \"./ConnectEmail.scss\";\nimport { log } from \"react-fullstory\";\nimport OnboardError from \"../OnboardError/OnboardError\";\n\nconst emailList: ERPModel[] = [\n {\n name: \"Outlook 365\",\n appId: \"00000000-0000-0000-0000-000000000001\",\n iconUrl: OutlookLogo,\n width: \"150px\",\n },\n {\n name: \"Gmail\",\n appId: \"00000000-0000-0000-0000-000000000002\",\n iconUrl: GmailLogo,\n width: \"150px\",\n },\n];\n\nfunction ConnectEmail(): React.ReactElement {\n const history = useHistory();\n const { bearerToken } = React.useContext(OnboardContext) as OnboardType;\n const { onboardData } = React.useContext(AppContext) as AppType;\n const [loading, setLoading] = useStateWe're still working on supporting your accounting system.
\n\n In the meantime, let us know which accounting system your team uses and we'll let you know as soon as it's available.\n
\n\n \n \n ) : (\n <>\nThank you for your interest!
\nWe've added you to our waitlist and will email you as soon as we support your accounting system.
\n\n While you wait, take a look around at some of our other product offerings, or get in touch with us about when we might have support for{\" \"}\n {otherERP}.\n
\n\n window.location.assign(\"https://lockstep.io/product\")}\n data-testid=\"WaitlistOtherProductsButton\"\n >\n Show Me Other Products\n \n
\n \n )}\n \n
\n Connect Your Email
\n\n To get all of the Lockstep Inbox features, including automatic activity management, team communication, and customer communication we will\n need to connect to your email system.\n
\n\n {emailList.map((option) => {\n return (\n ) => handleConnect(e, option)}\n data-testid={`SelectERP${option.name}Button`}\n >\n \n
\n );\n })}\n \n \n
\n \n ) : !apiRetry ? (\n \n handleTryAgain()} />\n
\n ) : (\n <>\n );\n}\n\nexport default ConnectEmail;\n","import React from \"react\";\nimport { AppContext } from \"../../../contexts/AppContext\";\nimport { OnboardContext } from \"../../../contexts/OnboardContext\";\nimport { OnboardStep } from \"../../../types/enums\";\n\nfunction CreateInvitedAccount(): React.ReactElement {\n const { onboardData } = React.useContext(AppContext) as AppType;\n const { setOnboardStep, setBearerToken } = React.useContext(OnboardContext) as OnboardType;\n\n // Callbacks from B2C IFrame\n window.onmessage = async function (event) {\n // B2C Account Creation callback\n if (event?.data?.type === \"id_token\") {\n setBearerToken(event?.data?.code);\n setOnboardStep(OnboardStep.PersonalInfo);\n }\n };\n\n return (\n \n
\n );\n}\n\nexport default CreateInvitedAccount;\n","import React, { useEffect, useState } from \"react\";\nimport { useIntercom } from \"react-use-intercom\";\nimport LockstepLogo from \"../../assets/Lockstep_Icon_With_Text_Color_RGB.svg\";\nimport ERPSelect from \"../../components/Onboard/ERPSelect/ERPSelect\";\nimport PersonalInfo from \"../../components/Onboard/PersonalInfo/PersonalInfo\";\nimport CompanyInfo from \"../../components/Onboard/CompanyInfo/CompanyInfo\";\nimport CreateAccount from \"../../components/Onboard/CreateAccount/CreateAccount\";\nimport ExistingAccount from \"../../components/Onboard/ExistingAccount/ExistingAccount\";\nimport { OnboardContext } from \"../../contexts/OnboardContext\";\nimport { OnboardStep } from \"../../types/enums\";\nimport OtherERP from \"../../components/Onboard/OtherERP/OtherERP\";\nimport ConnectEmail from \"../../components/Onboard/ConnectEmail/ConnectEmail\";\nimport { userAccountsClient } from \"../../db/accessor\";\nimport { AppContext } from \"../../contexts/AppContext\";\nimport CreateInvitedAccount from \"../../components/Onboard/CreateInvitedAccount/CreateInvitedAccount\";\nimport \"./Onboard.scss\";\nimport { Snackbar, Alert, AlertColor } from \"@mui/material\";\n\nconst Onboard: React.FC = () => {\n const { setOnboardData } = React.useContext(AppContext) as AppType;\n const { setOnboardStep, onboardStep, isInvited, setIsInvited } = React.useContext(OnboardContext) as OnboardType;\n const { boot, shutdown, update } = useIntercom();\n const [isLoading, setIsLoading] = useState\n
\n\n \n \n {!isLoading && (\n <>\n {onboardStep === OnboardStep.SelectERP ?
\n \n 
\n {isLoading ? (\n <>\n ) : isInvited ? (\n
\n - \n
- \n Create Your Account\n \n
- \n Update Your Personal Info\n \n
- \n
- \n Update Your Personal Info\n \n
- \n Update Your Company Info\n \n
- \n Connect Your Email\n \n
setShowToast(false)}>\n CLOSE\n
\n }\n >\n {toastMsg}\n \n{props.children}\n \n {props.children}\n \n );\n}\n","import React from \"react\";\n\nimport { reportsClient, companiesClient } from \"../db/accessor\";\n\nexport const DashboardContext = React.createContext\n {props?.children ? (\n
\n {props.children}
\n ) : (\n // TODO: Add this back once you've confirmed with Gibby the text\n //\n // Sorry, we could not find your data. We've notified our team about\n // the issue, but if you'd like to speak with us please contact our\n // support team at{\" \"}\n // support@lockstep.io\n //
\nNo Data Found
\n )}\n\n {props?.children ? (\n
\n );\n}\n","export const shortenCurrency = (amount: number, decimal?: boolean): string => {\n const stringifiedAmount = String(Math.abs(Math.floor(amount)));\n if (decimal) {\n if (stringifiedAmount.length <= 6) {\n return (amount / 1000).toPrecision(4);\n } else if (stringifiedAmount.length <= 9) {\n return (amount / 1000000).toPrecision(4);\n } else if (stringifiedAmount.length <= 12) {\n return (amount / 1000000000).toPrecision(4);\n } else {\n return (amount / 1000000000000).toPrecision(4);\n }\n } else {\n if (stringifiedAmount.length <= 3) {\n return String(Math.round(amount));\n } else if (stringifiedAmount.length <= 6) {\n return String(Math.round(amount / 1000));\n } else if (stringifiedAmount.length <= 9) {\n return String(Math.round(amount / 1000000));\n } else if (stringifiedAmount.length <= 12) {\n return String(Math.round(amount / 1000000000));\n } else {\n return String(Math.round(amount / 1000000000000));\n }\n }\n};\n\nexport const getCurrencySuffix = (amount: number): string => {\n const stringifiedAmountLength = String(Math.abs(Math.floor(amount))).length;\n if (stringifiedAmountLength <= 3) {\n return \"\";\n } else if (stringifiedAmountLength <= 6) {\n return \"k\";\n } else if (stringifiedAmountLength <= 9) {\n return \"m\";\n } else if (stringifiedAmountLength <= 12) {\n return \"b\";\n } else {\n return \"t\";\n }\n};\n","import React, { useState, useEffect, MouseEvent } from \"react\";\nimport Loading from \"../../../library/Loading/Loading\";\nimport Error from \"../../../library/Error/Error\";\n// Imports from react-router-dom\nimport { useHistory, useRouteMatch } from \"react-router-dom\";\n// Import contxt\nimport { DashboardContext } from \"../../../../contexts/DashboardContext\";\n// Import assets\nimport \"./TopCustomers.scss\";\nimport NoData from \"../../../library/NoData/NoData\";\nimport { getCurrencySuffix, shortenCurrency } from \"../../../../db/utils/currency\";\nimport { Tooltip, IconButton } from \"@mui/material\";\nimport { TooltipIcon } from \"../../../library/Icons/Icons\";\n\n/**\n * * Defines the Top 5 Customers with Invoices Past Due Widget\n */\nexport default function TopCustomers(): React.ReactElement {\n const { getTopRisksData } = React.useContext(DashboardContext) as DashboardType;\n const { path } = useRouteMatch();\n const history = useHistory();\n const [isLoading, setLoading] = useState{props.children}
\n ) : (\n // TODO: Add this back once you've confirmed with Gibby the text\n //\n // Sorry, we could not find your data. We've notified our team about the\n // issue, but if you'd like to speak with us please contact our support\n // team at support@lockstep.io\n //
\nNo Data Found
\n )}\n\n
\n ) : errorMessage ? (\n \n {errorMessage} \n
\n ) : (\n \n
\n );\n}\n","import React, { useEffect, forwardRef } from \"react\";\nimport \"./Checkbox.scss\";\n\n// Define Checkbox's Table Props\ninterface Props {\n indeterminate?: boolean;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst useCombinedRefs = (...refs: any[]): React.MutableRefObject\n ) => handleOnClick(e)}>\n Top 5 Customers with Invoices Past Due\n \n \n \n \n \n
\n {data && data.length !== 0 ? (\n // TODO: Talk with API team about why pageSize doesn't where here. This is a hot-fix until the issue with the endpoint is resolved\n data.slice(0, 5).map((val: CustomerSummaryModel, idx: number) => {\n return (\n ) => handleRowClick(e, val.companyId)}>\n
\n );\n })\n ) : (\n \n
\n {val?.companyName ?? \"N/A\"}
\n{val?.totalInvoicesPastDue}
\nPast Due Invoices
\n\n {(val?.amountPastDue ?? 0) < 0 ? \"-\" : \"\"}${Math.abs(parseInt(shortenCurrency(val?.amountPastDue ?? 0, false), 10))}\n {getCurrencySuffix(val?.amountPastDue ?? 0)}\n
\nPast Due Balance
\n\n {props?.header &&
\n )}\n \n\n {props?.errorMessage && {props.header}
}\n\n\n setShowTooltip(true)}\n onMouseLeave={() => setShowTooltip(false)}\n >\n {\n e.stopPropagation();\n if (!props.className?.includes(\"disabled\")) {\n setMenuOpen((prev: boolean) => !prev);\n }\n }}\n >\n {props.showEllipses ? (\n
\n \n {isMenuOpen && (\n \n {props.options.map((obj) => {\n return (\n {\n setMenuOpen(false);\n setValue(obj.value);\n if (props.onClick) {\n props.onClick(obj.onClickValue);\n }\n if (props.onSelect) {\n props.onSelect(obj.value);\n }\n }}\n >\n {obj.altDisplay ? obj.altDisplay : obj.value}\n
\n );\n })}\n {props.errorMessage}
}\n \n );\n}\n\nDropdown.defaultProps = {\n iconAlign: \"right\",\n};\n","import React, { useState } from \"react\";\n\nimport { invoicesClient } from \"../db/accessor\";\n\nexport const InvoiceContext = React.createContext\n setIsPopup((prev) => !prev)}\n onMouseEnter={() => setIsHover(true)}\n onMouseLeave={() => setIsHover(false)}\n >\n
\n {isPopup && (\n \n {\n setIsPopup(false);\n setIsHover(false);\n }}\n >\n 
\n \n ) => handleKeyDown(e)}\n />\n ) : (\n setDropStatusText(onSelectValue)}\n defaultValue={input}\n displayValue={altDisplayText}\n iconAlign=\"right\"\n icon={
\n )}\n \n ) : (\n <>\n );\n}\n","import React, { useState } from \"react\";\nimport { ButtonProps } from \"../../Button/Button\";\nimport { useHistory } from \"react-router-dom\";\nimport { Ascending, Descending } from \"../../Icons/Icons\";\nimport \"./SortButton.scss\";\n\n// Defines Sort Button Props\ninterface SortButtonProps extends ButtonProps {\n // TODO: Find type for headerProps\n\n //@typescript-eslint/ban-ts-comment\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n headerProps: any;\n label: React.ReactNode;\n isDefault?: boolean;\n}\n\n/**\n * * Defines the Sort Button on a Table\n */\nexport function SortButton(props: SortButtonProps): React.ReactElement {\n // Get History handler from react-router-dom\n const history = useHistory();\n // Represents whether the Sort is Active on a column of the Table\n const [isActive, setIsActive] = useStateFilter By {props.headerProps.Header}
\n {!props.headerProps.dropdownOptions ? (\n\n handleClearFilter()}\n >\n Clear Filters\n \n \n
\n {props.label}
\n {/*// eslint-disable-next-line @typescript-eslint/no-explicit-unknown\n */}\n\n {props.headerProps?.showSort &&\n (isDescending ? (\n\n
\n )\n}","import React from \"react\";\nimport { RequestApproval, AssignTo, MarkAsUnread, MoveTo, Snoozed, Closed, Spam } from \"../../../library/Icons/Icons\";\nimport Button from \"../../../library/Button/Button\";\n// import Tooltip from \"../../../library/Tooltip/Tooltip\";\nimport \"./Hoverbar.scss\"\n// import { Tooltip } from \"@mui/material\";\n\ntype hoverBarProps = {\n barriers?: boolean\n}\n\nexport default function HoverBar(props: hoverBarProps): React.ReactElement {\n const handleClick = (type: string) => {\n switch(type) {\n case \"Request Approval\":\n return console.info(type);\n case \"Assign To\":\n return console.info(type);\n case \"Mark as Unread\": \n return console.info(type);\n case \"Move To\": \n return console.info(type);\n case \"Snoozed\": \n return console.info(type);\n case \"Closed\": \n return console.info(type);\n case \"Spam\": \n return console.info(type);\n default:\n console.log(\"Handle default behavior\") \n }\n }\n\n return (\n {props.alertMessage}
\n\n \n
\n \n } variant=\"transparent\" alignIcon=\"left\" onClick={ () => handleClick(\"Request Approval\")} className=\"btn-icon-only\"/>\n } variant=\"transparent\" alignIcon=\"left\" onClick={ () => handleClick(\"Assign To\")} className=\"btn-icon-only\"/> \n {props.barriers ?
\n )\n}","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { HeaderProps, Row, TableToggleAllRowsSelectedProps } from \"react-table\";\n\ninterface GetConditionalAllRowsSelectedProps {\n headerProps: React.PropsWithChildren|
: null }\n } variant=\"transparent\" alignIcon=\"left\" onClick={ () => handleClick(\"Mark as Unread\")} className=\"btn-icon-only\"/> \n } variant=\"transparent\" alignIcon=\"left\" onClick={ () => handleClick(\"Move To\")} className=\"btn-icon-only\"/> \n } variant=\"transparent\" alignIcon=\"left\" onClick={ () => handleClick(\"Snoozed\")} className=\"btn-icon-only\"/> \n {props.barriers ? |
: null }\n } variant=\"transparent\" alignIcon=\"left\" onClick={ () => handleClick(\"Closed\")} className=\"btn-icon-only\"/> \n } variant=\"transparent\" alignIcon=\"left\" onClick={ () => handleClick(\"Spam\")} className=\"btn-icon-only\"/> \n \n
\n );\n },\n // eslint-disable-next-line react/display-name\n Cell: (props: TableInstance) => {\n return (\n \n {/*\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore */}\n
\n );\n },\n },\n ...columns,\n ])\n : null;\n }\n );\n\n function handleOnChangeDataSetIndex(index: number) {\n params.forEach((_, key: string) => {\n if (key !== \"dataSetIndex\") {\n params.delete(key);\n }\n });\n params.set(\"dataSetIndex\", String(index));\n history.push({ search: params.toString().replace(/[?&]$/, \"\") });\n }\n\n const handleDropdownSelect = (value: string) => {\n const size = parseInt(value);\n if (props.pagination.totalCount < size * ((props.pagination.pageNumber ?? 0) + 1) - (size - 1) && props.pagination.setPageNumber) {\n props.pagination.setPageNumber(0);\n }\n setPageSize(size);\n };\n\n const handleRowRead = (row: any) => {\n return row.isUnread ? \"\" : \" read\";\n };\n\n /**\n * * Exposes useful functions to parent components via refs\n */\n useImperativeHandle(ref, () => ({\n hardRefresh() {\n fetchTableData();\n dispatch({ type: \"clearRowSelection\" });\n },\n softRefresh() {\n fetchTableData(true);\n dispatch({ type: \"clearRowSelection\" });\n },\n getCurrentSelectedRows() {\n const selectedRows = Object.keys(currentSelectedRows) as Array\n {props.title && handleExport()}\n exportFileName={props.dataSets[dataSetIndex].export?.exportFileName ?? \"\"}\n alignIcon=\"left\"\n disabled={props.states.isLoading || props.states.isError || props.dataSets[dataSetIndex].data.tableData.length <= 0}\n />\n )}\n {props.headerBtns &&\n props.headerBtns.map((headerBtn: HeaderButton) => {\n return <>{(Object.keys(currentSelectedRows).length === 0 || !headerBtn.hideOnRowSelect) && headerBtn.component};\n })}\n {props.rowSelectBtns &&\n Object.keys(currentSelectedRows).length !== 0 &&\n props.rowSelectBtns.map((elem, index: number) => {\n if (elem === \"divider\") {\n return elem.callback(Object.keys(currentSelectedRows) as Array)}\n />\n );\n }\n })}\n
\n )}\n {props.title}
}\n {props.toggles?.showExportBtn && (\n|
;\n } else {\n return (\n \n {props.dataSets.length > 1 && (\n null} /> : null}\n
\n \n {headerGroups.map((headerGroup, index) => (\n
\n ))}\n {showSelectAll ? (\n \n {headerGroup.headers.map((column, index) => {\n return (\n \n
\n );\n })}\n \n {/* Column Content */}\n {index == 0 && props.toggles?.showRowSelect ? (\n column.render(\"Header\")\n ) : (\n <>\n \n \n \n \n )}\n \n )}\n
\n \n
\n ) : (\n <>\n )}\n \n\n {/* Table Body */}\n \n {allRowsSelected ? (\n
\n \n All {Object.keys(currentSelectedRows).length} items have been selected.\n
\n ) : (\n\n All {Object.keys(currentSelectedRows).length} items on this page have been selected.\n
\n )}\n\n {allRowsSelected ? \"Clear Selection\" : `Select all ${props.pagination.totalCount} items`}\n
\n\n {props.states.isLoading ? (\n removeBadFilter()}\n buttonText={\"Clear Filter\"}\n badParam={lastFilterItem}\n >\n ) : page?.length ? (\n page.map((row, index) => {\n prepareRow(row);\n\n return (\n ) => props.dataSets[dataSetIndex].handleRowClick(e, row)}\n >\n {row.cells.map((cell, index) => {\n const sortIsActive = (visibleColumns[index] as any)?.sortField\n ? params.get(\"sort\") === (visibleColumns[index] as any)?.sortField ||\n params.get(\"sort\") ===\n (visibleColumns[index] as any)?.sortField\n .split(\", \")\n .map((field: string) => field + \" DESC\")\n .join(\", \")\n : params.get(\"sort\")?.includes((visibleColumns[index] as any)?.searchlightField);\n return (\n \n {cell.render(\"Cell\")}\n {index !== 0 && sortIsActive && }\n {index !== 0 && (visibleColumns[index] as any)?.showFilter && }\n
\n );\n })}\n {props.hoverBar && \n handleDropdownSelect(onClickValue)}\n options={DROPDOWNOPTIONS}\n displayValue={`${pageSize * (props.pagination.pageNumber ?? 0) + 1}-${Math.min(\n pageSize * ((props.pagination.pageNumber ?? 0) + 1),\n props.pagination.totalCount\n )}`}\n />\n
\n )}\n \n );\n});\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nTable.defaultProps = defaultProps;\n\nexport default Table;\n","import React from \"react\";\nimport \"./Chip.scss\";\n\n// Chip variant colors\nexport type ChipVariant =\n | \"open\"\n | \"late1\"\n | \"late31\"\n | \"late61\"\n | \"late91\"\n | \"closed\"\n | \"grey\"\n | \"connected\"\n | \"disconnected\"\n | \"active\"\n | \"not-started\"\n | \"activity-closed\";\n\n// Define Chip Props\ninterface ChipProps {\n variant: ChipVariant;\n iconVariant?: \"caution\" | \"danger\";\n text: string;\n size?: \"sm\" | \"lg\";\n className?: string;\n}\n\n// Define Chip ReactElement\n\n/**\n * Chip icon element for displaying invoice status indicators.\n *\n * @param { ChipVariant } variant Type of status indicator, added to chip css class.\n * @param { ChipProps.size } size Options \"sm\", \"lg\". Default is \"lg\"\n * @param { ChipProps.text } text Custom text parameter for \"grey\" indicators. Will not\n * be applied to other variants.\n *\n * @returns Chip ReactElement in div with styles applied.\n */\nexport default function Chip(props: ChipProps): React.ReactElement {\n return (\n of {props.pagination.totalCount}
\n\n \n props.pagination.setPageNumber && props.pagination.setPageNumber((currPage: number) => (currPage === 0 ? 0 : currPage - 1))\n }\n disabled={props.states.isLoading || props.pagination.totalCount <= 25}\n >\n \n props.pagination.setPageNumber &&\n props.pagination.setPageNumber((currPage: number) =>\n (currPage + 1) * pageSize >= props.pagination.totalCount ? currPage : currPage + 1\n )\n }\n disabled={props.states.isLoading || props.pagination.totalCount <= 25}\n >\n
\n \n \n
\n );\n}\n","import { DateTime } from \"luxon\";\n\n/**\n * * Returns the number of days between @param date and current date. If @param date is before\n * * current date, return a positive integer. If @param date is after current date, return a\n * * negative integer. Otherwise, return 0.\n * @param date - YYYY-MM-DD date string\n * @returns number or null\n */\nexport const calcDaysBetween = (date: string | null): number | null => {\n if (!date) {\n return null;\n }\n const parsedDate = DateTime.fromFormat(date, \"yyyy-MM-dd\");\n if (!parsedDate.isValid) {\n return null;\n } else {\n return Math.floor(-parsedDate.diffNow(\"days\").days);\n }\n};\n\n/**\n * * Converts Javascript Date Object to {props.text}
\n\n {child}\n
\n {child}
;\n }\n\n public static formatString(str: string | null, isLight?: boolean, style?: string): React.ReactElement {\n return this.withFormattedCellString(str || \"N/A\", isLight, style);\n }\n\n public static formatContactString(value: string | null) {\n return {value}
;\n }\n\n public static formatNumber(num: number | null, isLight?: boolean): React.ReactElement {\n return this.withFormattedCellString(num !== null ? num.toString() : \"N/A\", isLight);\n }\n\n public static formatId(id: string | null, isLight?: boolean): React.ReactElement {\n return this.withFormattedCellString(id ? `#${id}` : \"N/A\", isLight);\n }\n\n public static formatPhoneNumber(value: string | null, style?: string): React.ReactElement {\n return {Utils.formatPhoneNumber(value ?? \"N/A\")}
;\n }\n\n public static formatStringWithIcon(value: string | null): React.ReactElement {\n return (\n \n
\n );\n }\n\n public static formatIcon(value: string | null): React.ReactElement {\n let tooltipText;\n if (value === \"primary\") {\n tooltipText = \"Primary\";\n }\n return (\n \n
\n {value}
\n \n \n \n
\n );\n }\n\n public static formatActivity(value: string | { subject: string | null; body: string | null } | null, isUnread: boolean): React.ReactElement {\n if (value) {\n if (value instanceof Object) {\n return (\n {value === \"primary\" ?
\n \n {value.subject && value.body ? (\n
\n );\n } else {\n return (\n \n {value.subject}\n - {value.body}\n
\n ) : value.subject ? (\n{value.subject}
\n ) : value.body ? (\n{value.body}
\n ) : (\n this.withFormattedCellString(\"N/A\", false)\n )}\n\n
\n );\n }\n } else {\n return this.withFormattedCellString(\"N/A\", false);\n }\n }\n\n public static formatCurrency(num: number | null, isLight?: boolean): React.ReactElement {\n const currency =\n num !== null\n ? new Intl.NumberFormat(\"en-US\", {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n style: \"currency\",\n currency: \"USD\",\n }).format(num)\n : \"N/A\";\n return this.withFormattedCellString(currency, isLight);\n }\n\n public static formatAttachmentIcon(hasAttachment?: boolean): React.ReactElement {\n if (!hasAttachment) return <>;\n return this.withFormattedCellElement({value}
\n\n {content[0]} - {content[1]}\n
\n \n );\n } else {\n return (\n <>\n \n {content[0]} - {content[1]}\n
\n \n );\n }\n } else {\n return this.withFormattedCellString(\"N/A\", false);\n }\n }\n\n public static formatActivitySimple(value: string | null, isUnread?: boolean): React.ReactElement {\n if (!value) return this.withFormattedCellString(\"N/A\", false);\n return (\n \n
\n );\n }\n\n public static formatActivitySentDate(date: string | null, isUnread?: boolean): React.ReactElement {\n if (date) {\n const diffDays = calcDaysBetween(date.split(\"T\")[0]);\n if (diffDays == 0) {\n return this.formatActivitySimple(formatTime(date), isUnread);\n }\n if (diffDays == 1) {\n return this.formatActivitySimple(\"Yesterday\", isUnread);\n }\n return this.formatActivitySimple(formatDate(date), isUnread);\n } else {\n return this.withFormattedCellString(\"N/A\");\n }\n }\n\n public static formatDate(date: string | null, isLight?: boolean, style?: string): React.ReactElement {\n return this.withFormattedCellString(formatDate(date), isLight, style);\n }\n\n public static formatLastActivity(date: string | null, isLight?: boolean): React.ReactElement {\n const diffDays = calcDaysBetween(date);\n const lastActivity =\n diffDays === null\n ? \"N/A\"\n : diffDays === 0\n ? \"Today\"\n : diffDays === 1\n ? \"Yesterday\"\n : diffDays >= 2 && diffDays <= 7\n ? `${diffDays} days ago`\n : formatDate(date);\n return this.withFormattedCellString(lastActivity, isLight);\n }\n\n public static formatDaysLate(num: number | null, isLight?: boolean): React.ReactElement {\n const daysLate = num !== null ? (num <= 0 ? \"N/A\" : num === 1 ? \"1 day\" : `${num} days`) : \"N/A\";\n return this.withFormattedCellString(daysLate, isLight);\n }\n\n public static formatActivityStatus(status: string | null): React.ReactElement {\n if (status) {\n if (status === \"active\") {\n return this.withFormattedCellElement({value}
\n\n {list.map((elem: string, index: number) => {\n return (\n <>\n {elem}\n {index !== list.length - 1 &&
}\n \n );\n })}\n
\n );\n }\n } else {\n invoiceText = invoiceTooltip = \"N/A\";\n }\n\n const wrapperRef = useRef}\n \n );\n })}\n
\n {invoiceText}\n
\n {props.children}
\n \n );\n}\n","import React, { useRef, useEffect, useState } from \"react\";\nimport NavLinkWrapper from \"../NavLink/index\";\nimport ContentNavLink from \"../ContentNavLink/ContentNavLink\";\nimport { BackArrowNav } from \"../Icons/Icons\";\nimport Dropdown from \"../Dropdown/Dropdown\";\nimport { useHistory, useLocation } from \"react-router-dom\";\nimport { DropdownArrow } from \"../Icons/Icons\";\nimport \"./Navbar.scss\";\nimport { Skeleton } from \"@mui/material\";\n\ntype Tab = {\n displayName: string;\n routeName: string;\n};\n\ninterface NavbarProps {\n tabs: Tab[];\n dropdown?: Tab[];\n dropdownDefault?: string;\n backDisplayName?: string;\n backRoute?: string;\n rootPath: string;\n dropdownRootPath?: string;\n hideDropdown?: boolean;\n persistQueryParams?: boolean;\n tooltip?: string;\n}\n\nexport default function Navbar(props: NavbarProps): React.ReactElement {\n const location = useLocation();\n const tabWrapperRef = useRef\n