\n If you didn't sign out intentionally, we signed you out after 10 minutes of\n inactivity to keep your account safe. Thank you for banking with us.\n
\n )}\n \n \n );\n\n return\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n
\n \n \n );\n};\n\nexport default LandingPage;\n","import React from 'react';\n\nimport { useNavigate, useSearchParams } from 'react-router-dom';\n\nimport { users as usersApi } from '@helpers/api';\n\nimport { Formik, Form } from 'formik';\nimport * as Yup from 'yup';\n\nimport imagesLogin from '@components/CarouselSlider/Images/imagesLogin.jsx';\nimport MainTemplate from '@components/MainTemplate';\nimport SubmitButton from '@components/SubmitButton';\nimport ValidatedInput from '@components/ValidatedInput';\nimport Swal from 'sweetalert2';\nimport withReactContent from 'sweetalert2-react-content';\nimport { swalConfirmCloseConfig, swalErrorConfig } from '@constants/sweetAlert';\n\nconst PasswordReset = () => {\n const [searchParams] = useSearchParams();\n\n const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z\\d\\w\\W]{8,128}$/;\n const matchesErrorMessage =\n 'Password must contain uppercase letters, lowercase letters, and numbers.';\n\n const validationSchema = Yup.object({\n password: Yup.string()\n .required()\n .min(8, 'Password Too Short')\n .max(128, 'Password Too Long')\n .matches(passwordRegex, matchesErrorMessage),\n password_confirmation: Yup.string()\n .required()\n .oneOf([Yup.ref('password'), null], 'Passwords must match')\n });\n\n const navigate = useNavigate();\n const swalPopUp = withReactContent(Swal);\n\n const handleSubmit = (values) => {\n usersApi\n .updatePassword({\n data: {\n user: {\n reset_password_token: searchParams.get('reset_password_token'),\n password: values.password,\n password_confirmation: values.password_confirmation\n }\n }\n })\n .then(() => {\n swalPopUp\n .fire({\n ...swalConfirmCloseConfig,\n title:\n 'Your password has been successfully updated. You will now be redirected to login'\n })\n .then(() => {\n navigate('/');\n });\n })\n .catch(() => {\n swalPopUp.fire({\n ...swalErrorConfig,\n title: 'There was an error while resetting your password. Please try again.'\n });\n });\n };\n\n const formValues = {\n password: '',\n password_confirmation: ''\n };\n\n const FormComponent = (\n <>\n \n \n
\n\n \n \n \n
\n \n
\n \n \n
\n \n Password Reset\n
\n\n Please enter and confirm your new password. Remember, passwords need to be a minimum of 8\n characters, and have at least one lowercase letter, one uppercase letter, and one number.\n
\n\n Recover your password\n
\n\n Please enter the email address associated with your account and a password reset link will\n be sent to you.\n
\n \n \n );\n\n return\n {!!errors &&
\n );\n};\n\nexport default Dashboard;\n","import React, { useState } from 'react';\nimport Footer from '@components/Footer';\nimport { FundingRoutes } from '@components/Funding';\nimport Loader from '@components/Loader';\nimport { EnrollmentContext } from '@contexts';\nimport { YourSuccessLogoImg, FundingBackgroundImg } from '@constants/images';\n\nconst styles = {\n backgroundImage: `url(${FundingBackgroundImg})`\n};\n\nconst EnrollmentFunding = () => {\n const [loading, setLoading] = useState(false);\n\n if (loading) {\n return {errors}
}\n\n
\n );\n};\n\nexport default Closed;","import React, { useState, useEffect } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { eventAuthDenials as eventAuthDenialsApi } from '@helpers/api';\nimport Loader from '@components/Loader';\nimport VerifyTransactionForm from '@components/VerifyTransactionForm';\n\nconst FraudAlerts = () => {\n const [eventAuthDenial, setEventAuthDenial] = useState(null);\n const [verificationResponse, setVerificationResponse] = useState(null);\n const [loading, setLoading] = useState(true);\n const { authDenialId } = useParams();\n\n useEffect(() => {\n eventAuthDenialsApi\n .getById(authDenialId)\n .then((response) => {\n setEventAuthDenial(response.data);\n })\n .catch((error) => {\n // eslint-disable-next-line no-console\n console.error({ error });\n })\n .finally(() => setLoading(false));\n }, [authDenialId]);\n\n if (loading) {\n return \n {user.closed_account_reason === 'lack_of_funding' && (\n
\n \n \n
\n )}\n \n Your account was closed due to lack of funding. If you would like to reopen the\n account you must initiate funding of the account.\n
\n\n {user.closed_account_reason !== 'lack_of_funding' &&
\n Your account was closed
}\n\n Your card has been unblocked. Please try the transaction again.\n
\n )}\n {verificationResponse === 'denied' && (\n \n Your card has been deactivated. Your new card will arrive soon!\n
\n )}\n {!verificationResponse && (\n \n {children}\n
\n );\n};\n\nexport default FormTitle;\n","import PatriotActCopy from '@components/PatriotActCopy';\nimport PhoneNumberInput from '@components/PhoneNumberInput';\nimport SelectWithOptions from '@components/SelectWithOptions';\nimport SignOutButton from '@components/SignOutButton';\nimport ValidatedInput from '@components/ValidatedInput';\nimport { useOccupations } from '@hooks';\nimport { Form, Formik } from 'formik';\nimport { DateTime } from 'luxon';\nimport React, { useEffect } from 'react';\nimport * as Yup from 'yup';\nimport FieldDatePicker from '../../components/DatePickerInput';\nimport FormTitle from './FormTitle';\n\nconst OccupationOptions = ({ occupations }) => (\n <>\n \n {occupations.map(({ code, definition }) => {\n return (\n \n );\n })}\n \n);\n\nconst DepositAmountOptions = () => (\n <>\n \n \n \n \n \n \n);\n\nconst eighteenYearsAgo = DateTime.now().minus({ years: 18 });\nconst oneHundredTwentyFiveYearsAgo = DateTime.now().minus({ years: 125 });\nconst validationSchema = Yup.object({\n primary_phone: Yup.string()\n .required('Required')\n .nullable()\n .length(10, 'Please enter a complete phone number'),\n date_of_birth: Yup.date()\n .max(eighteenYearsAgo, 'You must be at least 18 years old')\n .min(oneHundredTwentyFiveYearsAgo, 'You must be younger than 125')\n .required('Required')\n .nullable(),\n income_source: Yup.string()\n .test('is-selected', 'Expected Monthly Deposit Amount', (value) => value !== null)\n .required('Required'),\n occupation: Yup.string()\n .test('is-selected', 'Occupation', (value) => value !== null)\n .required('Required')\n});\n\nconst PersonalInformationForm = ({ accountApplication, handleSubmit, setCurrentStep }) => {\n const { occupations } = useOccupations();\n\n useEffect(() => {\n setCurrentStep('personal_information');\n }, []);\n\n const formatDateOfBirth = (values) => {\n if (typeof(values.date_of_birth) === \"string\") {\n return values\n };\n\n return ({\n ...values,\n date_of_birth: values.date_of_birth.toISODate()\n })\n }\n\n return (\n <>\n\n Identification \n {\n setAccountApplication({ ...values, ...accountApplication });\n navigate('/account-application/review');\n setSubmitting(false);\n }}>\n {({ isSubmitting, values, errors }) => (\n \n )}\n \n
\n );\n};\n\nexport default IdentificationForm;\n","import React, { useState } from 'react';\nimport { Link } from 'react-router-dom';\n\nimport { Form, Formik, Field } from 'formik';\nimport Swal from 'sweetalert2';\nimport withReactContent from 'sweetalert2-react-content';\n\nimport SignOutButton from '@components/SignOutButton';\nimport ValidatedInput from '@components/ValidatedInput';\nimport { phoneVerification as phoneVerificationApi } from '@helpers/api';\n\nconst PhoneVerificationForm = ({\n accountApplication,\n setHasPhoneVerification,\n handleSuccess,\n backPath\n}) => {\n const swalPopUp = withReactContent(Swal);\n const defaultSelectedPhone = accountApplication.phone_verification_attributes.phone1;\n const defaultVerificationType = 'sms';\n const [sentPhoneVerification, setSentPhoneVerification] = useState(accountApplication.sent_phone_verification);\n const phoneValues = {\n phone1: accountApplication.phone_verification_attributes.phone1,\n phone2: accountApplication.phone_verification_attributes.phone2,\n phone3: accountApplication.phone_verification_attributes.phone3\n };\n const [formValues, setFormValues] = useState({\n selected_phone: defaultSelectedPhone,\n verification_type: defaultVerificationType,\n ...phoneValues\n });\n\n const handleSubmit = (values, { setSubmitting }) => {\n phoneVerificationApi\n .sendVerification(values)\n .then(() => {\n swalPopUp.fire({\n position: 'center',\n icon: 'success',\n title: 'We have sent a verification code to your phone',\n showConfirmButton: true,\n allowOutsideClick: false,\n preConfirm: () => {\n setSentPhoneVerification(true);\n }\n });\n })\n .catch((error) => {\n const title = error.response.data ? error.response.data.errors : 'There was an error sending the verification code';\n swalPopUp.fire({\n position: 'center',\n icon: 'error',\n title: title,\n showConfirmButton: false,\n timer: 3000\n });\n })\n .finally(() => {\n setSubmitting(false);\n });\n };\n\n const handleVerificationSubmit = (values, { setSubmitting }) => {\n phoneVerificationApi\n .verifyPhone(values)\n .then(() => {\n swalPopUp.fire({\n position: 'center',\n icon: 'success',\n title: 'Phone number successfully verified!',\n showConfirmButton: true,\n allowOutsideClick: false,\n preConfirm: () => {\n setHasPhoneVerification(false);\n }\n });\n })\n .then(() => {\n handleSuccess();\n })\n .catch((error) => {\n const title = error.response.data ? error.response.data.errors : 'An Error Occurred';\n swalPopUp.fire({\n position: 'center',\n icon: 'error',\n title: title,\n showConfirmButton: true,\n });\n })\n .finally(() => {\n setSubmitting(false);\n });\n };\n\n const handleBackButton = () => {\n setSentPhoneVerification(false);\n setFormValues({\n selected_phone: defaultSelectedPhone,\n verification_type: defaultVerificationType,\n ...phoneValues\n });\n };\n\n const handleResendClick = (values) => {\n phoneVerificationApi\n .sendVerification(values)\n .then(() => {\n swalPopUp.fire({\n position: 'center',\n icon: 'success',\n title: 'We have sent a verification code to your phone',\n showConfirmButton: true,\n allowOutsideClick: false\n });\n })\n .catch((error) => {\n const title = error.response.data ? error.response.data.errors : 'There was an error sending the verification code';\n swalPopUp.fire({\n position: 'center',\n icon: 'error',\n title: title,\n showConfirmButton: false,\n timer: 3000\n });\n })\n };\n\n return (\n <>\n \n \n {({ errors, values, handleChange, setFieldValue, isSubmitting }) => (\n \n )}\n \n ) : (\n \n {({ errors, values, handleChange, setFieldValue, isSubmitting }) => (\n \n )}\n \n )}\n
\n\n \n \n
\n {sentPhoneVerification ? (\n Verify and Submit
\n\n One last step! We need to verify your phone number before you can submit your application.\n
\n\n {`<`} Back\n
\n \n \n
\n\n { hasPhoneVerification && allAgreementsChecked ? (\n \n
\n \n First Name\n
\n \n {first_name}\n \n \n
\n \n Middle Name\n
\n \n {middle_name}\n \n \n
\n \n Last Name\n
\n \n {last_name}\n \n \n
\n \n Phone Number\n
\n \n {primary_phone}\n \n \n
\n \n Date of Birth\n
\n \n {date_of_birth}\n \n \n
\n \n Expected Monthly Deposit Amount\n
\n \n {income_source ? DepositAmountOptions.find((amount) => amount.value === income_source)?.description : 'No income source selected'}\n \n \n
\n \n Occupation\n
\n \n {occupations.find(({ code }) => code === Number(occupation))?.definition}\n \n \n
\n \n Address\n
\n \n {primaryAddress.address_1}\n \n \n
\n \n Address 2\n
\n \n {primaryAddress.address_2}\n \n \n
\n \n City\n
\n \n {primaryAddress.city}\n \n \n
\n\n {shipping_address_different && (\n <>\n \n Zip Code\n
\n \n {primaryAddress.postal_code}\n \n \n
\n \n Shipping Address\n
\n \n {shippingAddress.address_1}\n \n \n
\n \n Shipping Address 2\n
\n \n {shippingAddress.address_2}\n \n \n
\n \n Shipping Address City\n
\n \n {shippingAddress.city}\n \n \n
\n \n Shipping Address State\n
\n \n {shippingAddress.state}\n \n \n
\n \n )}\n\n \n Shipping Address Zip Code\n
\n \n {shippingAddress.postal_code}\n \n \n
\n \n Please click and open each agreement separately to activate the submit button\n
\n\n {electronicCommunicationsAgreement && (\n \n )}\n {!electronicCommunicationsAgreement && (\n \n )}\n handleCheckBox(e, 'electronic_communications_agreement')}>\n Electronic Communications Agreement\n \n
\n \n {depositAccountAgreement && (\n \n )}\n {!depositAccountAgreement && }\n handleCheckBox(e, 'deposit_account_agreement')}>\n Deposit Account Agreement\n \n
\n \n {privacyPolice && }\n {!privacyPolice && }\n handleCheckBox(e, 'privacy_policy')}>\n Pathward Privacy Policy\n \n
\n \n
\n );\n};\n\nexport default ReferralPage;\n","import React from 'react';\n\nconst RejectionPage = () => {\n return \n Almost there! We need a little more information from you before we can get started.\n
\n\n
\n \n Please provide the following to allow us to fully verify your account:\n
\n- \n
- \n Copy of Social Security Card\n \n
- \n {' '}\n Copy of valid/unexpired drivers license or state ID\n \n
- \n {' '}\n \n Copy of a utility bill within the last 60 days to verify the address on file\n \n \n
\n Please provide clear images of the complete documents, not just small sections.\n
\n\n You may either Fax or Mail the documents to the following locations:\n
\n- \n
- \n {' '}\n Fax number: 801-298-6404\n \n
- \n {' '}\n \n Mailing address: PO Box 71402, Salt Lake City, UT 84171 ATTN: ID Verification (TFS)\n \n \n
Account submission rejected. An account can not be created for this ID
;\n};\n\nexport default RejectionPage;\n","import React from 'react';\nimport _ from 'lodash';\n\nimport ProgressBar from '@components/ProgressBar';\n\nconst EnrollmentProgressBar = ({ currentStep, steps }) => {\n return\n
\n );\n\n return Loading...
;\n }\n\n return (\n \n
\n )}\n {isMobileOnly && isPortrait && For a better experience, please rotate your device
\n\n
\n );\n };\n\n const showBackupCodes = useCallback(() => {\n return usersApi\n .generateBackupCodes()\n .then((data) => {\n setUser({\n ...user,\n has_backup_codes: true,\n mfa_active: true\n });\n swalPopUp.fire({\n position: 'center',\n icon: 'success',\n title: 'Backup Codes',\n html: backupCodesHtml(data.data),\n showConfirmButton: true\n });\n })\n .catch(() => {\n swalPopUp.fire({\n position: 'center',\n icon: 'error',\n title: 'There was an error generating your backup codes',\n showConfirmButton: true\n });\n });\n }, []);\n\n return (\n \n Please store these backup codes in a secure location. They can be used as one-time\n passcodes if you every lose access to your authenticator app\n
\n- \n {codes.map((code) => {\n return
- {code} ;\n })}\n
\n {user.mfa_active && (\n showBackupCodes()}\n className=\"backup-codes px-4 py-5 bg-teal rounded-full h-10 text-descriptionSlide text-white font-bold cursor-pointer flex justify-center items-center gap-1\">\n \n \n {user.has_backup_codes ? 'Regenerate Backup Codes' : 'Generate Backup Codes'}\n \n \n )}\n
\n );\n};\n\nexport default BackupCodesButton;\n","import BackupCodesButton from './BackupCodesButton';\n\nexport default BackupCodesButton;\n","import React, { useEffect, useRef } from 'react';\nimport Swal from 'sweetalert2';\nimport withReactContent from 'sweetalert2-react-content';\nimport { billPayments as billPaymentsApi } from '@helpers/api';\nimport ModalBillerList from './ModalBillerList';\n\nconst EditReportButton = ({ selectedDateRange, billers }) => {\n const selectedBillersRef = useRef([]);\n const swalPopUp = withReactContent(Swal);\n\n const config = {\n show_filter: false,\n show_length_menu: false,\n pagination: false,\n show_info: false,\n key_column: 'id'\n };\n\n const showPopup = () => {\n swalPopUp.fire({\n html: (\n \n \n \n Create Billpay Report\n \n
\n );\n};\n\nexport default EditReportButton;\n","import React, { useEffect, useState } from 'react';\nimport DataTable from 'react-data-table-component';\n\nconst ModalBillerList = ({ config, billers, selectedBillersRef }) => {\n const [selectedBillers, setSelectedBillers] = useState(selectedBillersRef.current);\n\n const handleCheckboxChange = (e) => {\n const { id, checked } = e.target;\n if (checked) {\n setSelectedBillers((prev) => [...prev, Number(id)]);\n } else {\n setSelectedBillers((prev) => prev.filter((item) => item != id));\n }\n };\n\n const columnsBillers = [\n {\n id: 'id',\n name: '',\n cell: (record) => {\n return (\n \n
\n );\n }\n },\n {\n id: 'biller_name',\n name: 'Merchant Name',\n selector: (row) => row.biller_name\n },\n {\n id: 'biller_account_number',\n name: 'Account Number',\n selector: (row) => row.biller_account_number\n }\n ];\n\n useEffect(() => {\n selectedBillersRef.current = selectedBillers;\n }, [selectedBillers]);\n\n return (\n \n
\n );\n};\n\nexport default ModalBillerList;\n","import React, { useEffect, useRef, useState } from 'react';\nimport { DateRangePicker } from 'react-date-range';\nimport EditReportButton from './EditReportButton';\n\nconst formatDate = (date) => {\n return date.toLocaleDateString();\n};\n\nconst currentDate = new Date();\nconst startDate = new Date();\nstartDate.setMonth(currentDate.getMonth() - 6);\nconst endDate = new Date();\n\nconst ReportDateRangeForm = ({ billers }) => {\n const datePickerRef = useRef(null);\n const [showCalendar, setShowCalendar] = useState(false);\n const [disableDownload, setDisableDownload] = useState(false);\n const [selectedDateRange, setSelectedDateRange] = useState([\n {\n startDate: startDate,\n endDate: endDate,\n key: 'selection'\n }\n ]);\n\n const [inputValue, setInputValue] = useState(\n `${formatDate(startDate)} - ${formatDate(endDate)}`\n );\n\n const handleDocumentClick = (event) => {\n if (datePickerRef.current && !datePickerRef.current.contains(event.target)) {\n setShowCalendar(false);\n }\n };\n\n const handleDateRangeChange = (ranges) => {\n setDisableDownload(false);\n setSelectedDateRange([ranges.selection]);\n setInputValue(\n `${formatDate(ranges.selection.startDate)} - ${formatDate(ranges.selection.endDate)}`\n );\n };\n\n const toggleCalendar = () => {\n setShowCalendar(!showCalendar);\n };\n\n const handleInputChange = (e) => {\n setInputValue(e.target.value);\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n const [start, end] = inputValue.split(' - ');\n setSelectedDateRange([\n {\n startDate: new Date(start),\n endDate: new Date(end),\n key: 'selection'\n }\n ]);\n setShowCalendar(false);\n };\n\n useEffect(() => {\n document.addEventListener('click', handleDocumentClick);\n\n return () => {\n document.removeEventListener('click', handleDocumentClick);\n };\n }, []);\n\n return (\n \n
\n \n \n \n
\n \n \n
\n \n \n
\n \n \n \n \n {`<`} Back\n \n \n onClick()}\n disabled={!isValid}\n />\n \n
\n \n \n Go Back\n
\n \n \n \n \n {`<`} Back\n \n \n
\n \n \n Go Back\n
\n \n \n
\n );\n};\n\nconst CarouselSlider = ({ images }) => {\n const [firstImgLoaded, setFirstImgLoaded] = useState(false);\n\n return (\n \n 
\n
\n \n * This optional Cash Back Rewards program is not a Pathward product or service, nor is\n it endorsed or supported by Pathward in any way.\n
\n )}\n \n setFirstImgLoaded(true)}\n style={{ display: 'none' }}\n />\n {firstImgLoaded && (\n \n {images.map((item, i) => (\n \n )}\n
\n );\n};\n\nexport default CarouselSlider;\n","import { Banner1Img, Banner2Img, Banner3Img } from '@constants/images';\n\nconst imagesLogin = [\n {\n id: 1,\n src: Banner1Img,\n alt: '',\n showDisclaimer: true,\n title: 'Earn cash back rewards* for everyday spending',\n description: `With the YourSuccess Bank Account, Provided by Pathward, N.A. you can earn cash back rewards* when you use your debit card at many of the places where you probably already shop.
\n `\n },\n {\n id: 2,\n src: Banner2Img,\n alt: '',\n showDisclaimer: true,\n title:\n 'Your new fresh start begins with your bank account. Register for the YourSuccess Bank Account, Provided by Pathward, N.A.',\n description: `- \n
- Get early access to funds deposited to your account \n
- Earn cash-back rewards* when using your debit card to shop at many well-known merchants \n
- Organize and pay your bills with the Billpay feature \n
\n setCheckBoxInput(!checkBoxInput)}\n defaultChecked={checkBoxInput}\n />\n \n
\n );\n};\n\nexport default CheckBox;\n","import CheckBox from './CheckBox';\n\nexport default CheckBox;\n","import React from 'react';\nimport { Field, ErrorMessage } from 'formik';\nimport { v4 as uuid } from 'uuid';\n\nconst CheckBoxForm = ({ id: domId, name, label, onChange }) => {\n const id = domId || `check-box-form-${uuid()}`;\n\n return (\n <>\n \n \n {label}\n \n
\n \n
\n );\n};\n\nexport default CurrencyInput;\n","import React from 'react';\nimport CurrencyInput from 'react-currency-input-field';\n\nconst CustomCurrencyInput = ({ inputName, inputValue, onChange, className, placeholder }) => {\n return (\n \n \n {placeholder}\n \n
\n \n {errors[name]}\n
\n \n {errors[name]}\n
\n \n
\n \n handleClick()}\n className={`${\n balance < 0 ? 'bg-seafoam' : 'bg-teal'\n } rounded-xl px-3 py-2 text-white font-bold text-link`}>\n Fund your account\n \n
\n \n \n Your Total Balance {textBalance()}\n
\n \n \n \n
\n {balance < 0 && (\n \n * Negative balances can incur on fees in your account.\n
\n )}\n \n
\n
\n \n );\n};\n\nexport default Balance;\n","const balanceLow = 10; // this variable is just temporary\nexport default balanceLow;\n","import React, { useContext } from 'react';\nimport { YourSuccessLogoWhiteImg } from '@constants/images';\nimport { AccountContext } from '../../../contexts';\nimport BannerOption from './BannerOption';\n\nconst Banner = ({ userFeatures }) => {\n const { account } = useContext(AccountContext);\n\n return (\n \n
\n \n {' '}\n Total Saved\n
\n \n
\n
\n \n {' '}\n Total Spend\n
\n \n
\n );\n};\n\nexport default Banner;\n","import React, { useCallback } from 'react';\nimport { Link, useNavigate } from 'react-router-dom';\n\nimport Swal from 'sweetalert2';\nimport withReactContent from 'sweetalert2-react-content';\n\nconst BannerOption = ({ link, label, isCardActivation = false }) => {\n const swalPopUp = withReactContent(Swal);\n const navigate = useNavigate();\n\n const onCardActivateClick = useCallback(\n (event) => {\n event.preventDefault();\n swalPopUp\n .fire({\n title: 'Activate Card',\n html: `\n \n
\n \n
\n \n {account.current_card?.pin_set_at\n ? 'Quick Actions'\n : 'Complete These Steps To Set Up Your Account'}\n
\n- \n {account.current_card?.shipped && !account.current_card?.pin_set_at && (\n
\n 
\n
\n \n
\n `,\n showCancelButton: true,\n cancelButtonText: 'No',\n confirmButtonText: 'Yes'\n })\n .then((result) => {\n if (result.isConfirmed) {\n navigate(link, { replace: true });\n }\n });\n },\n [navigate]\n );\n\n return (\n Do not activate your card until you have your Physical Card in hand.
\nDo you have your Physical card and want to activate it?
\n\n {label}{' '}\n
\n \n ) : (\n \n \n Here{' '}\n \n
\n \n {label}{' '}\n
\n \n )}\n \n Here{' '}\n \n
\n \n
\n \n );\n};\n\nexport default Notifications;\n","import React, { useEffect, useState } from 'react';\nimport { transactions as transactionsApi, authorizations as authorizationsApi, achTransactions as achTransactionsApi } from '@helpers/api';\nimport TransactionsTable from '@components/TransactionsTable';\nimport _ from 'lodash';\n\nconst defaultSelection = [\n {\n startDate: null,\n endDate: null,\n key: 'selection'\n }\n];\n\nconst TransactionList = () => {\n const [account, setAccount] = useState({\n transactions: []\n });\n const [auths, setAuths] = useState([]);\n const [pendingAchTransactions, setPendingAchTransactions] = useState([]);\n const [page, setPage] = useState(1);\n const [lastPage, setLastPage] = useState(false);\n const [errors, setErrors] = useState(null);\n const [loading, setLoading] = useState(true);\n const [filters, setFilters] = useState({\n start_date: '',\n end_date: ''\n });\n\n const [selection, setSelection] = useState(defaultSelection);\n\n const applyFilter = () => {\n const { startDate, endDate } = selection[0];\n if (_.isNil(startDate) || _.isNil(endDate)) {\n return;\n }\n setFilters({ ...filters, ...{ start_date: startDate, end_date: endDate } });\n };\n\n const clearFilter = () => {\n setFilters({ ...filters, ...{ start_date: null, end_date: null, key: 'selection' } });\n setSelection(defaultSelection);\n };\n\n useEffect(() => {\n setAccount({\n transactions: []\n });\n setPage(1);\n }, [filters]);\n\n useEffect(() => {\n setLoading(true);\n transactionsApi\n .getIndex({\n options: {\n params: {\n page,\n filters\n }\n }\n })\n .then((response) => {\n setLastPage(response.data.last_page);\n authorizationsApi\n .getIndex()\n .then((authResponse) => {\n setAuths(authResponse.data.authorizations);\n achTransactionsApi\n .getPending()\n .then((pendingAchTransactionsResponse) => {\n setPendingAchTransactions(pendingAchTransactionsResponse.data);\n })\n .catch((errorsResponse) => {\n setErrors(errorsResponse);\n });\n })\n .catch((errorsResponse) => {\n setErrors(errorsResponse);\n });\n\n setAccount((prev) => {\n return {\n transactions: [...prev.transactions, ...response.data.transactions]\n };\n });\n })\n .catch((errorsTransaction) => {\n setErrors(errorsTransaction);\n })\n .finally(() => {\n setLoading(false);\n });\n }, [page, filters]);\n\n const incrementPage = () => {\n setPage(page + 1);\n };\n\n const body = () => {\n return !_.isEmpty(auths) || !_.isEmpty(account.transactions) || !_.isEmpty(pendingAchTransactions) ? (\n \n
\n ))}\n \n handleClose()}\n />\n
\n\n {loading && Notifications
\nAn error occurred
}\n {notifications.length === 0 && You have no notifications
}\n\n {notficationsGroup.map((group) => (\n \n handleClick(notification)}>\n \n {!notification.read && } {notification.title}\n \n \n {DateTime.fromISO(notification.timestamp).toLocaleString(DateTime.DATETIME_MED)}\n \n
\n
\n ))}\n \n {dateShow(group.date)}\n
\n\n {group.notificationGroup.map((notification) => (\n \n
No Transactions
\n );\n };\n\n return (\n\n {!!errors &&
\n );\n};\n\nexport default TransactionList;\n","import React from 'react';\nimport { Balance, Banner, TransactionList } from '@components/Dashboard';\nimport ToolsBannerComponent from '../shared/ToolsBannerComponent';\n\nconst DashboardMain = ({ balance, userFeatures }) => {\n return (\n {errors.message}
}\n {body()}\n {loading && (\n\n \n
\n )}\n \n
\n );\n};\n\nexport default ActivateCard;\n","import SetPin from './SetPin';\n\nexport default SetPin;\n","/* eslint-disable camelcase */\nimport React, { useEffect, useState } from 'react';\nimport BeatLoader from 'react-spinners/BeatLoader';\nimport { DateTime } from 'luxon';\nimport { statements as statementsApi } from '@helpers/api';\nimport Paginate from '@components/Paginate';\nimport FormTitle from '@components/FormTitle';\nimport StatementTable from '../components/StatementTable';\n\nconst Statements = () => {\n const [statements, setStatements] = useState([]);\n const [paginateControls, setPaginateControls] = useState({});\n const [loading, setLoading] = useState(true);\n const [errors, setErrors] = useState(null);\n const [page, setPage] = useState(1);\n const [perPage, setPerPage] = useState(5);\n const [dateRange, setDateRange] = useState({ startDate: null, endDate: null });\n\n const minDate = DateTime.local().minus({ years: 7 });\n\n useEffect(() => {\n setLoading(true);\n statementsApi\n .getPerPage(page, perPage, dateRange.startDate, dateRange.endDate)\n .then((response) => {\n const statementsWithName = response.data.statements.map((statement) => ({\n ...statement,\n name: `Ending on ${statement.end_date}`,\n downloadId: `download_${statement.id}`\n }));\n setPaginateControls(response.data);\n setStatements(statementsWithName);\n })\n .catch((error) => {\n setPaginateControls({});\n setStatements({});\n setErrors(error.response.data.errors);\n })\n .finally(() => setLoading(false));\n }, [page, perPage, dateRange]);\n\n const downloadFile = (fileUrl) => {\n const a = document.createElement('A');\n a.href = fileUrl;\n a.download = fileUrl.substr(fileUrl.lastIndexOf('/') + 1);\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n };\n\n const openStatement = (statement, download = false) => {\n setLoading(true);\n statementsApi\n .getById(statement.id, { responseType: 'blob' })\n .then((response) => {\n const file = new Blob([response.data], { type: 'application/pdf' });\n const fileUrl = URL.createObjectURL(file);\n\n if (download) {\n downloadFile(fileUrl);\n } else {\n window.open(fileUrl);\n }\n })\n .catch((error) => {\n setErrors(error);\n })\n .finally(() => setLoading(false));\n };\n\n if (loading) {\n return (\n Pin must be 4 digit number
\n \n\n
\n );\n }\n\n return (\n \n Statements \n {!!errors && \n
\n );\n};\n\nexport default Statements;\n","import React from 'react';\nimport { CreditCard, PersonalInformationForm, AccountFeatures } from '@components/Settings';\n\nconst Settings = () => {\n return (\n {errors}
}\n {!!statements && (\n\n Account Settings\n
\n\n \n Lost/Stolen\n \n \n Damaged\n \n
\n );\n};\n\nexport default SuccessModalRequesCard;\n","import React, { useState, useContext } from 'react';\nimport Swal from 'sweetalert2';\nimport { useNavigate } from 'react-router-dom';\nimport withReactContent from 'sweetalert2-react-content';\nimport { accounts as accountApi, cards as cardsApi } from '@helpers/api';\nimport CurrencyFormat from 'react-currency-format';\nimport { swalRequestNewCard } from '@constants/sweetAlert';\nimport { AccountContext } from '../../contexts';\nimport SuccessModalRequesCard from './SuccessModalRequesCard';\n\nconst RequestNewCard = () => {\n const navigation = useNavigate();\n const [reason, setReason] = useState('default');\n const [approvedFee, setApprovedFee] = useState(false);\n const [feeAmount, setFeeAmount] = useState(0.0);\n const swalPopUp = withReactContent(Swal);\n const { account } = useContext(AccountContext);\n\n const hasRequestedNewCard = account.current_card?.has_requested_new_card;\n const hasVirtualCard = account.current_card?.virtual;\n\n const handleRequestCard = () => {\n if (hasVirtualCard) {\n swalPopUp\n .fire({\n position: 'center',\n icon: 'warning',\n title: 'You will not receive a physical card until you fund at least $5 to your account',\n showConfirmButton: true,\n showCancelButton: true,\n cancelButtonText: 'Cancel',\n confirmButtonText: 'Accept'\n })\n .then((result) => {\n if (result.isConfirmed) {\n requestNewCard();\n }});\n } else {\n requestNewCard();\n }\n };\n\n const requestNewCard = () => {\n cardsApi\n .requestReplacement({ reason })\n .then(() => {\n swalPopUp\n .fire({\n html: Expect to receive your new card by mail in 7 to 10 business days
\n\n Remember that you will be receiving a new debit card number, so be sure to adjust your\n information on any recurring payments you may have set up with your previous debit card\n number.\n
\n\n For your own security, be sure to properly dispose of your damaged card by cutting it up or\n shredding it before throwing it away.\n
\n\n
\n ) : (\n \n
\n \n \n
\n \n
\n \n Card is cancelled and a replacement has been ordered\n
\n\n
\n )}\n \n
\n \n Request a new card\n
\n\n\n \n \n \n \n \n \n \n\n \n Request new card\n \n
\n Why I want a new card?
\n\n
\n\n \n
\n \n \n {label}\n \n
\n \n
\n \n This optional Cash Back Rewards program is not a Pathward product or service, nor is it endorsed or supported by Pathward in any way.\n
\n `\n })\n .then((result) => {\n if (result.isConfirmed) {\n window.open(response.data.sso_link);\n }\n navigate(`/dashboard`);\n });\n })\n .catch(() => {\n swalPopUp\n .fire({\n title: 'Oh no! Something went wrong. Please try again later.',\n ...swalConfirmCloseConfig\n })\n .then(() => navigate(`/dashboard`));\n });\n };\n\n useEffect(() => {\n getSsoLink(deeplink);\n }, [deeplink]);\n\n return \n
\n );\n};\n\nexport default PayBillsPage;\n","import React from 'react';\nimport { Route, Routes } from 'react-router-dom';\nimport SetPin from '@pages/SetPin';\nimport Statements from '@pages/Statements.jsx';\nimport { Settings, RequestNewCard } from '@pages/Settings';\nimport Funding from '@pages/Funding.jsx';\nimport Rewards from '@pages/Rewards';\nimport PrivateRoute from '../../routes/PrivateRoute';\nimport DashboardMain from './DashboardMain';\nimport PayBillsPage from '../../pages/PayBillsPage';\nimport EarlyAchDeposits from '../EarlyAchDeposits';\nimport { PaymentTracking } from '../Tracker';\nimport {\n PaymentAssistantLearnMore,\n TFSRewardsLearnMore,\n SuccessTrackerLearnMore\n} from '../LearnMore';\n\nconst DashboardRoutes = ({ balance, userFeatures }) => {\n return (\n Pay Bills
\n\n
\n \n \n
\n \n handleClickNotification(e)}\n className=\"relative flex items-center justify-center w-[30px] h-[30px] text-[#333] bg-greyblueHover border-0 outline-none rounded-[50%] cursor-pointer active:bg-[#cccccc]\">\n 0 ? 'fas' : 'far'} fa-bell text-white`} />\n {unreadNotificationsCount > 0 && (\n \n {unreadNotificationsCount}\n \n )}\n \n handleClick()} />\n
\n \n Welcome, {firstName} {lastName}\n
\n ) : (\n\n \n
\n )}\n \n Balance{' '}\n \n
\n \n \n \n \n handleClickNotification(e)}\n className=\"relative flex items-center justify-center w-[40px] h-[40px] text-[#333] bg-whiteLighter border-0 outline-none rounded-[50%] cursor-pointer active:bg-[#cccccc]\">\n 0 ? 'fas' : 'far'} fa-bell`}\n />\n {unreadNotificationsCount > 0 && (\n \n {unreadNotificationsCount}\n \n )}\n \n\n
\n \n \n {firstName} {lastName}\n \n
\n\n \n
\n setMenuActive((prev) => !prev)}>\n \n
\n \n
\n - \n
- \n \n Account settings\n \n \n
- \n logOut()}>\n Log out\n \n \n
\n Welcome, {firstName} {lastName}\n
\n ) : (\n\n \n
\n )}\n \n Balance{' '}\n \n
\n \n
\n )}\n \n );\n};\n\nexport default Header;\n","import React from 'react';\n\nconst ModalSignOut = () => {\n return (\n \n
\n );\n};\n\nexport default ModalSignOut;\n","import React, { useState, useEffect } from 'react';\nimport { DateTime } from 'luxon';\nimport { YourSuccessLogoWhiteImg } from '@constants/images';\nimport { useLocation } from 'react-router-dom';\nimport { NavigationLink, NavigationLinkTablet } from './NavigationLink';\n\nconst Navigation = ({\n firstName,\n lastName,\n city,\n activeElement,\n activeIcons,\n handleCloseMenu,\n handleCloseMenuTablet,\n logOut,\n setActiveActiveIcons,\n setActiveElement,\n userFeatures\n}) => {\n const { pathname } = useLocation();\n\n const [otherTools, setOtherTools] = useState(false);\n const [trackerTools, setTrackerTools] = useState(false);\n const [paymentTools, setPaymentTools] = useState(false);\n const [rewardsTools, setRewardsTools] = useState(false);\n const [activeMenu, setActiveMenu] = useState(pathname);\n\n useEffect(() => {\n setActiveActiveIcons(false);\n setActiveElement(false);\n setOtherTools(false);\n setTrackerTools(false);\n setPaymentTools(false);\n setRewardsTools(false);\n setActiveMenu(pathname);\n }, [pathname]);\n\n return (\n \n Are you sure you want to sign out?\n
\n \n You can login again any time\n \n\n
\n \n \n {firstName} {lastName}\n \n
\n \n {' '}\n Active now\n
\n \n {DateTime.now().toFormat('MMM dd, yyyy')}\n
\n \n
\n \n \n
\n {city}
\n - \n
- \n logOut()} className=\"text-link\">\n Log out\n \n \n
\n {' '}\n Other features and services\n
\n \n
\n \n \n - \n
\n \n setRewardsTools((prev) => !prev)}\n onMouseLeave={() => setRewardsTools(false)}\n className=\"flex !flex-col !justify-start !items-start\">\n
\n \n {userFeatures.billPay && (\n Success Tools
\n\n \n YourSuccess Rewards\n
\n \n
\n - \n
\n Payment Assistant\n
\n \n
\n \n \n )}\n {userFeatures.paymentTracker && (\n - \n
\n \n Success Tracker\n
\n \n
\n \n \n )}\n \n - \n
- \n
- \n \n \n
\n
\n );\n};\n\nexport default FieldDatePicker;\n","import { ErrorMessage, useFormikContext, useField } from 'formik';\nimport React from 'react';\nimport { createTheme, ThemeProvider } from '@mui/material/styles';\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\nimport { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { MobileDatePicker } from '@mui/x-date-pickers';\nimport { getClass } from '@helpers/formik';\nimport { DateTime } from 'luxon';\n\nconst FieldDatePickerCustom = ({ name, placeholder, errors, openTo = \"day\", month }) => {\n const { setFieldValue } = useFormikContext();\n const [field] = useField(name);\n const monthToShow = month? DateTime.fromISO(month).startOf(\"month\") : DateTime.now().startOf(\"month\");\n const lastDayofMonth = monthToShow.endOf(\"month\");\n\n const theme = createTheme({\n components: {\n MuiInputLabel: {\n styleOverrides: {\n root: {\n color: '#0A1307',\n fontFamily: 'Montserrat',\n fontWeight: 'normal',\n backgroundColor: '#F5F7F9',\n left: '5px',\n paddingLeft: '0.5rem',\n paddingRight: '0.5rem',\n borderTopLeftRadius: '0.5rem',\n borderTopRightRadius: '0.5rem',\n transform: 'translate(14px, -15px) scale(0.75);'\n }\n }\n },\n MuiOutlinedInput: {\n styleOverrides: {\n root: {\n borderRadius: '6px',\n fontFamily: 'Montserrat',\n fontWeight: 'normal',\n input: {\n borderRadius: '6px 0 0 6px',\n padding: '0.75rem 1.25rem'\n },\n fieldset: {\n borderWidth: '0px'\n }\n }\n }\n }\n }\n });\n\n return (\n \n \n \n \n \n
\n \n setFieldValue(field.name, val)}\n disableMaskedInput\n format=\"yyyy-MM-dd\"\n openTo={openTo}\n maxDate={DateTime.now().minus({ years: 18 })}\n />\n
\n \n setFieldValue(field.name, val)}\n disableMaskedInput\n format=\"yyyy-MM-dd\"\n openTo={openTo}\n />\n
\n \n
\n );\n};\n\nexport default FieldDatePickerCustom;\n","import FieldDatePicker from './FieldDatePicker';\n\nexport default FieldDatePicker;\n","import React, { useState } from 'react';\nimport { Popover } from '@headlessui/react';\nimport { usePopper } from 'react-popper';\nimport { DateRange } from 'react-date-range';\nimport { DateTime } from 'luxon';\n\nconst DateRangeFilterPopover = ({ selection, setSelection, applyFilter, clearFilter }) => {\n const [referenceElement, setReferenceElement] = useState();\n const [popperElement, setPopperElement] = useState();\n const [arrowElement, setArrowElement] = useState(null);\n const { styles, attributes } = usePopper(referenceElement, popperElement, {\n placement: 'bottom-start',\n modifiers: [\n {\n name: 'arrow',\n options: { element: arrowElement }\n }\n ]\n });\n\n const minDate = DateTime.local().minus({ years: 7 });\n const maxDate = DateTime.local().toJSDate();\n\n return (\n \n \n \n \n \n
\n \n setFieldValue(field.name, val)}\n disableMaskedInput\n format=\"yyyy-MM-dd\"\n minDate={monthToShow}\n maxDate={lastDayofMonth}\n />\n
\n \n setFieldValue(field.name, val)}\n disableMaskedInput\n format=\"yyyy-MM-dd\"\n minDate={monthToShow}\n maxDate={lastDayofMonth}\n />\n
\n \n setSelection([item.selection])}\n editableDateInputs={false}\n moveRangeOnFirstSelection={false}\n ranges={selection}\n minDate={minDate.toJSDate()}\n maxDate={maxDate}\n startDatePlaceholder=\"Start Date\"\n endDatePlaceholder=\"End Date\"\n />\n
\n \n \n \n applyFilter()}\n className=\"bg-seafoam hover:bg-teal rounded-xl h-14 text-descriptionSlide text-white font-bold cursor-pointer w-full\"\n />\n clearFilter()}\n className=\"bg-greyblue hover:bg-greyblueHover rounded-xl h-14 text-descriptionSlide text-white font-bold cursor-pointer w-full\"\n />\n
\n \n setOnToggle(true)}\n />\n\n {onToggle && (\n \n setSelection([item.selection])}\n moveRangeOnFirstSelection={false}\n ranges={selection}\n className=\"border\"\n minDate={minDate.toJSDate()}\n maxDate={maxDate}\n startDatePlaceholder=\"Start Date\"\n endDatePlaceholder=\"End Date\"\n />\n
\n )}\n \n );\n};\n\nexport default DateRangeInput;\n","import DateRangeInput from './DateRangeInput';\n\nexport default DateRangeInput;\n","import React from 'react';\nimport AchToggle from '@components/AchToggle';\n\nconst EarlyAchDeposits = () => {\n return (\n \n handleSearch()}\n className=\"bg-seafoam hover:bg-teal rounded-xl h-14 text-descriptionSlide text-white font-bold cursor-pointer w-full\"\n />\n handleClear()}\n className=\"bg-greyblue hover:bg-greyblueHover rounded-xl h-14 text-descriptionSlide text-white font-bold cursor-pointer w-full\"\n />\n
\n \n
\n );\n};\n\nexport default EarlyAchDeposits;\n","import EarlyAchDeposits from './EarlyAchDeposits';\n\nexport default EarlyAchDeposits;\n","import React from 'react';\n\nconst ErrorsTemplate = (props) => {\n const { errors } = props;\n\n const errorsList = Object.keys(errors).map((error) => (\n \n
\n \n \n
\n \n {error.split('_').join(' ').charAt(0).toUpperCase() + error.split('_').join(' ').slice(1)}\n : {errors[error]}\n \n \n
\n );\n};\n\nexport default ErrorsTemplate;\n","import ErrorsTemplate from './ErrorsTemplate';\n\nexport default ErrorsTemplate;\n","import React from 'react';\nimport { Link } from 'react-router-dom';\nimport {\n DDAAgreementLink,\n PathwardPrivacyPolicy,\n TFSBankAccountESignDisclosure\n} from '@constants/pdfs';\n\nconst Footer = ({ text = '', textLink = '', link = '', isNotMain = false }) => {\n const additionalText = (\n \n {text}{' '}\n \n {textLink}\n \n \n );\n\n return (\n \n
\n - {errorsList}
\n {text !== '' ? additionalText : ''}\n \n YourSuccess Bank Account is a demand deposit account established by, and the YourSuccess\n Debit Card is issued by, Pathward®, N.A., Member FDIC. Mastercard® and the circles design\n are registered trademarks of Mastercard International Incorporated. Card is only valid for\n use in the U.S.\n
\n
\n Funds are FDIC insured, subject to applicable limitations and restrictions, when we receive\n the funds deposited to your account.\n \n\n TFS {new Date().getFullYear()} © All Rights Reserved\n \n
\n );\n};\n\nexport default Footer;\n","import Footer from './Footer';\n\nexport default Footer;\n","import React from 'react';\n\nconst FormSubtitle = ({ children }) => {\n return \n \n Customer Service: 866-357-6095\n \n \n Electronic Communications Agreement\n \n \n Pathward Privacy Policy\n \n \n Deposit Account Agreement\n \n
\n \n
\n Funds are FDIC insured, subject to applicable limitations and restrictions, when we receive\n the funds deposited to your account.\n \n
{children}
;\n};\n\nexport default FormSubtitle;\n","import FormSubtitle from './FormSubtitle';\n\nexport default FormSubtitle;\n","import React from 'react';\n\nconst FormTitle = ({ children }) => {\n return (\n\n {children}\n
\n );\n};\n\nexport default FormTitle;\n","import FormTitle from './FormTitle';\n\nexport default FormTitle;\n","import React, { useCallback, useContext } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport AchAccountVerificationStatus from './AchAccountVerificationStatus';\nimport { achAccounts as achAccountsApi } from '@helpers/api';\nimport Swal from 'sweetalert2';\nimport withReactContent from 'sweetalert2-react-content';\nimport { SessionContext } from '@contexts';\n\nconst AchAccountItem = ({ handleClickListAccounts, achAccount, currentAchAccount }) => {\n const { pathname } = useLocation();\n const isCurrentAchAccount = achAccount.id === currentAchAccount?.id;\n const swalPopUp = withReactContent(Swal);\n const { user } = useContext(SessionContext);\n\n const onDeleteAchAccount = useCallback((achAccountId) => {\n swalPopUp\n .fire({\n title: 'Are you sure you want to remove this account?',\n showCancelButton: true,\n cancelButtonText: 'No',\n confirmButtonText: 'Yes'\n })\n .then((result) => {\n if (result.isConfirmed) {\n achAccountsApi\n .deleteById(achAccountId)\n .then(() => {\n window.location.reload();\n });\n }\n })\n });\n\n const DeleteButton = ({ onClick }) => {\n if (isCurrentAchAccount) return null;\n\n return (\n \n );\n };\n\n return (\n{achAccount.humanized_verification_status}
\n \n );\n};\n\nexport default AchAccountVerificationStatus;\n","import React, { useContext } from 'react';\nimport { useNavigate } from 'react-router-dom';\n\nimport { EnrollmentContext } from '@contexts';\n\nconst AchSuccess = () => {\n const { enrollment } = useContext(EnrollmentContext);\n\n const basePath = () => {\n if (enrollment) {\n return '/enrollment-funding';\n }\n return '/dashboard/funding';\n };\n\n const navigate = useNavigate();\n const handleClick = () => {\n navigate(`${basePath()}/ach/transactions-list`);\n };\n\n return (\n \n
\n );\n};\n\nexport default AchSuccess;\n","/* eslint-disable react/no-unescaped-entities */\nimport React, { useState, useEffect, useContext, useRef } from 'react';\nimport { Formik, Form } from 'formik';\nimport { Link, useNavigate, useParams, useLocation } from 'react-router-dom';\nimport Swal from 'sweetalert2';\nimport withReactContent from 'sweetalert2-react-content';\nimport * as Yup from 'yup';\nimport FormTitle from '@components/FormTitle';\nimport FormSubtitle from '@components/FormSubtitle';\nimport LinkButton from '@components/LinkButton';\n\nimport { EnrollmentContext } from '@contexts';\n\nimport { achAccounts as achAccountsApi, achTransactions as achTransactionsApi } from '@helpers/api';\n\nimport ErrorsTemplate from '@components/ErrorsTemplate';\nimport Loader from '@components/Loader';\nimport ButtonsFormMiddleSteps from '@components/ButtonsFormMiddleSteps';\nimport CurrencyInput from '@components/CurrencyInput';\nimport CurrencyFormat from 'react-currency-format';\nimport AchAccountItem from './AchAccountItem';\n\nexport const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop);\n\nexport const getWindowSize = () => {\n const { innerWidth, innerHeight } = window;\n return { innerWidth, innerHeight };\n};\n\nconst AchTransactionForm = () => {\n const navigate = useNavigate();\n const { pathname } = useLocation();\n const lastIndex = pathname.lastIndexOf('/ach/create-transaction');\n const baseRoute = pathname.slice(0, lastIndex);\n const ref = useRef(null);\n\n const { achAccountId } = useParams();\n const [isLoading, setLoading] = useState(false);\n const [errorsState, setErrors] = useState(null);\n const [currentAchAccount, setCurrentAchAccount] = useState(null);\n const [achAccounts, setAchAccounts] = useState(null);\n const [windowSize, setWindowSize] = useState(getWindowSize());\n\n const { enrollment } = useContext(EnrollmentContext);\n const swalPopUp = withReactContent(Swal);\n\n useEffect(() => {\n setLoading(true);\n if (achAccountId) {\n achAccountsApi\n .getById(achAccountId)\n .then((response) => {\n setCurrentAchAccount(response.data);\n })\n .catch((errorApi) => {\n setErrors(errorApi.response);\n })\n .finally(() => setLoading(false));\n } else {\n achAccountsApi\n .getShow()\n .then((response) => {\n if (response.data.length > 0) {\n setAchAccounts(response.data);\n } else {\n navigate(\n !enrollment ? '/dashboard/funding/plaid/link' : '/enrollment-funding/plaid/link'\n );\n }\n })\n .catch((errorApi) => {\n setErrors(errorApi.response);\n })\n .finally(() => setLoading(false));\n }\n }, []);\n\n useEffect(() => {\n if (currentAchAccount && !achAccountId && windowSize.innerWidth < 414) {\n scrollToRef(ref);\n }\n }, [currentAchAccount]);\n\n useEffect(() => {\n function handleWindowResize() {\n setWindowSize(getWindowSize());\n }\n window.addEventListener('resize', handleWindowResize);\n return () => {\n window.removeEventListener('resize', handleWindowResize);\n };\n }, []);\n\n const handleSubmit = (values) => {\n setLoading(true);\n achTransactionsApi\n .post({\n data: {\n ach_transaction: {\n ...values,\n achAccountId: currentAchAccount.galileo_ach_account_id,\n ach_account_id: currentAchAccount.id\n }\n }\n })\n .then(() => {\n navigate(`${baseRoute}/ach/create-transaction/confirmation`);\n })\n .catch((errorsApi) => {\n if (errorsApi.response.status === 500) {\n if (errorsApi.response.data.errors) {\n setErrors(errorsApi.response.data.errors);\n } else {\n setErrors({ Error: errorsApi.response.statusText });\n }\n } else if (errorsApi.response.status === 429) {\n swalPopUp.fire({\n position: 'center',\n icon: 'warning',\n title: 'You have exceeded your transaction velocity limit. Please try again later.',\n showConfirmButton: true\n });\n }\n setLoading(false);\n });\n };\n\n const formActionButtons = (isSubmitting) => (\n <>\n {enrollment && (\n \n \n handleClick()}\n className=\"tablet:w-[315px] desktop:w-[244px] bg-greyblue hover:bg-greyblueHover rounded-xl h-14 text-descriptionSlide text-white font-bold cursor-pointer mt-7\">\n View all transactions\n \n
\n \n Your transaction has been successfully created.\n
\n\n It will be reflected in your account within the next 5 business days after we receive the deposit.\n
\n\n /^\\d+(\\.\\d{1,2})?$/.test(number)\n )\n .max(10000, 'Amount must be less than or equal to $10.000,00'),\n amountConfirmation: Yup.number()\n .oneOf([Yup.ref('amount'), null], \"Amount Confirmation doesn't match\")\n .test(\n 'maxDigitsAfterDecimal',\n 'amount can only have up to two digits after the decimal',\n (number) => /^\\d+(\\.\\d{1,2})?$/.test(number)\n )\n .max(10000, 'Amount confirmation must be less than or equal to $10.000,00')\n })}\n onSubmit={handleSubmit}>\n {({ isSubmitting, values, errors, setFieldValue }) => (\n \n )}\n \n
\n \n );\n\n return (\n \n {!achAccountId && (\n <>\n \n \n )}\n \n Create a transaction \n {currentAchAccount && (\n \n You are creating a transaction to pull from your external bank account named{' '}\n {currentAchAccount.name}\n \n )}\n {body}\n
\n \n );\n};\n\nexport default AchTransactionForm;\n","import React, { useContext, useState, useEffect, useMemo } from 'react';\nimport CurrencyFormat from 'react-currency-format';\n\nimport { achTransactions as achTransactionsApi } from '@helpers/api';\nimport DataTable from 'react-data-table-component';\n\nimport { EnrollmentContext } from '@contexts';\nimport ErrorsTemplate from '@components/ErrorsTemplate';\nimport LinkButton from '@components/LinkButton';\nimport FormTitle from '../FormTitle/FormTitle';\n\nconst customStyle = {\n headCells: {\n style: {\n fontSize: '22px',\n fontWeight: 'bold',\n textAlign: 'center'\n }\n }\n};\n\nconst AchTransactionsList = () => {\n const [achTransactions, setAchTransactions] = useState([]);\n const [errorsState, setErrors] = useState(null);\n const { enrollment } = useContext(EnrollmentContext);\n\n const basePath = () => {\n if (enrollment) {\n return '/enrollment-funding';\n }\n return '/dashboard/funding';\n };\n\n const columns = useMemo(() => [\n {\n id: 'amount',\n name: 'Amount',\n className: 'amount',\n align: 'center',\n sortable: true,\n cell: (record) => {\n return (\n \n Your ACH Accounts \n
\n \n \n View all transactions\n \n \n navigate(`${baseRoute}/plaid/link`)}\n />\n\n {achAccounts.map((achAccount) => (\n
\n \n You don't have accounts to show, please link a Bank Account\n
\n )}\n \n\n \n Back to funding options\n
\n \n \n \n {record.status}\n
\n );\n case 'pending':\n return (\n \n \n {record.status}\n
\n );\n case 'failed':\n return (\n \n \n {record.status}\n
\n );\n default:\n return (\n \n \n {record.status}\n
\n );\n }\n }\n }\n ]);\n\n useEffect(() => {\n achTransactionsApi\n .getIndex()\n .then((response) => {\n if (response.data.length > 0) {\n setAchTransactions(response.data);\n } else {\n setAchTransactions([]);\n }\n })\n .catch((errorApi) => {\n setAchTransactions([]);\n setErrors(errorApi.response);\n });\n }, []);\n\n return (\n <>\n {!!errorsState && \n
\n \n );\n};\n\nexport default AchTransactionsList;\n","import React, { useState, useEffect, useContext } from 'react';\nimport { Link, useLocation } from 'react-router-dom';\nimport { ROUTING_NUMBER } from '@utilities/constants';\nimport { accounts as accountsApi } from '@helpers/api';\nimport ErrorsTemplate from '@components/ErrorsTemplate';\nimport { EnrollmentContext } from '@contexts';\nimport FormTitle from '@components/FormTitle';\nimport AchToggle from '@components/AchToggle';\n\nconst BankAccount = () => {\n const [hideAccNumber, setHideAccNumber] = useState(true);\n const [account, setAccount] = useState({\n first_name: '',\n last_name: '',\n address: { address_1: '', city: '', state: '', postal_code: '' },\n galileo_payment_reference_number: ''\n });\n const [errors, setErrors] = useState(null);\n\n const { pathname } = useLocation();\n const lastIndex = pathname.lastIndexOf('/');\n const before = pathname.slice(0, lastIndex);\n\n const { enrollment } = useContext(EnrollmentContext);\n\n useEffect(() => {\n accountsApi\n .getShow()\n .then((response) => {\n setAccount({ ...response.data });\n })\n .catch((errorsApi) => {\n setErrors(errorsApi);\n });\n }, []);\n\n return (\n <>\n {!!errors && \n ACH Transactions \n \n \n Linked accounts\n \n
\n \n {achTransactions.length === 0 &&
\n No records found
}\n {achTransactions.length > 0 && (\n \n
\n \n \n Bank Account \n
\n \n Enter the routing and bank account numbers below into your existing banking application\n to transfer funds to YourSuccess Bank Account.\n
\n\n
\n \n
\n \n
\n {!enrollment && \n \n \n setHideAccNumber(!hideAccNumber)}\n className=\"w-14 inline-flex text-center px-2.5 py-1.5 text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200 ml-4\">\n {hideAccNumber ? 'Show' : 'Hide'}\n \n
\n \n Routing Number: {ROUTING_NUMBER}\n
\n \n \n Back to funding options\n
\n \n \n );\n};\n\nexport default BankAccount;\n","import React from 'react';\nimport { useLocation } from 'react-router-dom';\n\nconst Breadcrumbs = () => {\n const { pathname } = useLocation();\n const path = pathname.replace('/dashboard', '');\n\n const breadcrumbs = path.split('/').map((crumb, index, row) => {\n const crumbName = crumb.replace(/-/g, ' ');\n if (crumbName !== '' && row.length > 2) {\n return (\n \n
\n );\n};\n\nexport default Breadcrumbs;\n","import React, { useContext, useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport Swal from 'sweetalert2';\nimport withReactContent from 'sweetalert2-react-content';\nimport OptionsFunding from '@components/OptionsFunding';\nimport SignOutButton from '@components/SignOutButton';\nimport FormTitle from '@components/FormTitle';\nimport { accounts as accountApi } from '@helpers/api';\nimport { EnrollmentContext } from '@contexts';\nimport { SessionContext } from '@contexts';\n\nconst FundingNav = ({ title, description }) => {\n const { enrollment } = useContext(EnrollmentContext);\n const { user, setUser } = useContext(SessionContext);\n const navigate = useNavigate();\n const swalPopUp = withReactContent(Swal);\n\n const reactivateOnClick = useCallback((event) => {\n const pathname = event.currentTarget.pathname;\n event.preventDefault();\n if (user.has_closed_account && user.closed_account_reason === 'lack_of_funding') {\n accountApi\n .reactivate()\n .then(() => {\n swalPopUp\n .fire({\n position: 'center',\n icon: 'success',\n title: 'Your account has been reactivated',\n showConfirmButton: true,\n timer: 1500\n })\n .then(() => {\n setUser({\n ...user,\n has_closed_account: false\n });\n navigate(pathname);\n });\n })\n .catch(() => {\n swalPopUp.fire({\n position: 'center',\n icon: 'failure',\n title: 'There was an error reactivating your account',\n showConfirmButton: true,\n timer: 1500\n });\n });\n } else {\n navigate(pathname);\n }\n });\n\n const body = (\n <>\n - {breadcrumbs}
\n Choose funding method\n
\n- \n
\n
\n );\n\n return (\n <>\n Why Fund?
\n- \n
- \n ✔\n Stay up to date with your payments with Success Tracker\n \n
- \n ✔\n Receive cash back with YourSuccess Rewards\n \n
- \n ✔\n Pay the trustee up to 60% faster\n \n
{description}
\n ) : (\n\n
\n )}\n {enrollment ? (\n \n You're almost there!\n
\n The next step is to make a deposit of at least{' '}\n $5.
\n Once complete, we will ship you a physical YourSuccess card.\n
\n
\n ) : (\n {body}
\n \n {whyFund}\n
\n \n
\n )}\n {enrollment && {body}
\n \n \n {({ handleChange, values, setFieldValue, errors: yupErrors }) => (\n \n )}\n \n
\n );\n\n return (\n <>\n {!!errors ? \n
\n \n \n Direct Deposit \n {body}\n
\n \n \n Back to funding options\n
\n \n \n );\n};\n\nexport default PayrollForm;\n","import React, { memo } from 'react';\nimport { Page, Text, View, Document, StyleSheet, Image } from '@react-pdf/renderer';\nimport { VoidImg, YourSuccessLogoImg } from '@constants/images';\nimport { Header, Body, Footer } from './PdfSections/Check';\nimport { Details } from './PdfSections/Details';\nimport { Authorization } from './PdfSections/Authorization';\n\nconst PayrollPdf = ({ payrollOptions, account }) => {\n const styles = StyleSheet.create({\n page: {\n paddingTop: 35,\n paddingBottom: 35,\n paddingHorizontal: 30,\n color: '#0A1307',\n backgroundColor: '#FFF'\n },\n logo: {\n width: 120,\n position: 'absolute',\n top: 20,\n right: 20\n },\n title: {\n textAlign: 'center',\n fontFamily: 'Montserrat',\n fontWeight: 'bold',\n fontSize: '20px',\n marginTop: 50\n },\n text: {\n margin: '10px 92px 0 92px',\n fontFamily: 'Montserrat',\n fontWeight: 'medium',\n fontSize: '12px',\n textAlign: 'center',\n\n inner: {\n fontFamily: 'Montserrat',\n fontWeight: 'bold',\n color: '#FF8372'\n }\n },\n secondText: {\n margin: '10px 0px 0 0px',\n fontFamily: 'Montserrat',\n fontWeight: 'medium',\n fontSize: '12px',\n textAlign: 'center'\n },\n box: {\n border: '3px solid #7693A8',\n width: '492px',\n margin: '20px auto 0 auto',\n backgroundColor: '#F4F1E9'\n },\n\n boxBackground: {\n position: 'absolute',\n minWidth: '100%',\n minHeight: '100%',\n display: 'block',\n height: '100%',\n width: '100%',\n opacity: 0.5\n },\n\n tableContainer: {\n flexDirection: 'row',\n flexWrap: 'wrap'\n },\n\n containerNumbers: {\n flexDirection: 'row',\n alignItems: 'center',\n textAlign: 'center',\n flexGrow: 1,\n padding: '5px 30px'\n },\n information: {\n width: '50%',\n textAlign: 'left'\n },\n information2: {\n width: '50%',\n textAlign: 'right'\n },\n numbers: {\n fontFamily: 'Montserrat',\n fontSize: '12px',\n fontWeight: 'light'\n },\n containerAuthorization: {\n border: '1px solid #000000',\n width: '500px',\n margin: '0px auto 0 auto'\n },\n disclaimer: {\n marginTop: '10px',\n marginLeft: '10px',\n fontFamily: 'Montserrat',\n fontSize: '8px',\n fontWeight: 'light'\n }\n });\n\n return (\n \n
\n
\n Funds are FDIC insured, subject to applicable limitations and restrictions, when we\n receive the funds deposited to your account.\n
\n ORDER OF\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n );\n};\n\nexport default InputFieldWithPopUp;\n","import InputFieldWithPopUp from './InputFieldWithPopUp';\n\nexport default InputFieldWithPopUp;\n","import React from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { YourSuccessLogoImg, BannerPersonImg } from '@constants/images';\nimport LoginForm from './LoginForm';\n\nconst Banner = () => {\n\n const [searchParams] = useSearchParams();\n const timedOut = searchParams.get('timedOut');\n\n return (\n \n hangleChange(val)}\n />\n \n {placeholder}\n \n )}\n
\n \n
\n );\n};\n\nexport default Banner;\n","import React, { useRef } from 'react';\nimport { WorkingAtDeskImg, GraphImg } from '@constants/images';\nimport IconWrapper from '@components/IconWrapper/IconWrapper';\nimport BookmarkIcon from './Icons/bookmark.json';\nimport ChartIcon from './Icons/chart.json';\nimport PenIcon from './Icons/pen.json';\n\nconst BillTracking = () => {\n const BookmarkIconRef = useRef(null);\n const ChartIconRef = useRef(null);\n const PenIconRef = useRef(null);\n\n return (\n \n
\n {/* Right Side (Image on Desktop) */}\n \n
\n \n Let your bank account help you in your Chapter 13 bankruptcy\n
\n {timedOut === 'true' && (\n\n If you didn't sign out intentionally, we signed you out after 10 minutes of\n inactivity to keep your account safe. Thank you for banking with us.\n
\n )}\n\n
\n \n
\n \n {timedOut === 'true' ? (\n 
\n )}\n
\n \n
\n \n );\n};\n\nexport default BillTracking;\n","import React, { useRef } from 'react';\nimport { TFSRewardsLearnMoreImg } from '@constants/images';\nimport IconWrapper from '@components/IconWrapper/IconWrapper';\nimport PiggyBankIcon from './Icons/piggybank.json';\n\nconst CashBack = () => {\n const PiggyBankIconRef = useRef(null);\n return (\n \n
\n \n Track Your Important Bills\n
\n\n TFS and your Chapter 13 trustee keep track of your plan payments. But what about other\n critical bills?\n
\n\n
\n \n
\n \n It is your responsibility to make those ongoing payments like mortgage, car, or child\n support. Consistent and on-time payments, and records to show that, are requirements\n of receiving a discharge. Failure to do both could lead to issues.\n
\n\n When you need it, the YourSuccess Bank Account bill tracking feature will create a\n payment report that spans years. This report can be shared with your trustee, the\n courts or an aggressive creditor.\n
\n\n The YourSuccess Bank Account is designed with the needs of Chapter 13 Debtors in mind.\n Ease your journey by taking advantage of payment reminders and reporting developed for\n Chapter 13.\n
\n\n
\n \n
\n \n
\n \n
\n \n Set up reminders for your critical monthly bills like your house or car.\n
\n\n
\n \n
\n \n Use the tracking and reporting feature to demonstrate to the trustee and the court\n that you are current with these bills.\n
\n\n
\n \n
\n \n An easy-to-create report that will demonstrate your consistency in paying bills and\n set you up for success after bankruptcy.\n
\n\n
\n \n );\n};\n\nexport default CashBack;\n","import React from 'react';\nimport { DebitExplainCollageImg, MastercardBlackImg } from '@constants/images';\n\nconst DebitExplain = ({ cashBackRef, billTrackingRef, debitFeaturesRef }) => {\n const scrollToSection = (ref) => {\n ref.current.scrollIntoView({ behavior: 'smooth' });\n };\n\n return (\n \n
\n \n \n
\n \n Get Rewarded for Everyday Shopping\n
\n\n Maximize your existing spending needs by turning everyday shopping into cash-back*\n contributions toward your Chapter 13.\n
\n\n As a TFS user, we are excited to offer an exclusive benefit that aligns perfectly with\n your Chapter 13 goals. Purchases at over 10,000 merchants will bring you one step\n closer to completing your plan payments by depositing cash-back into your YourSuccess\n Bank Account.\n
\n\n You made the wise financial choice to file Chapter 13. Now decide that every dollar\n counts. Start spending smart and reaping the benefits of this exclusive cash-back reward.\n
\n\n
\n \n *This optional Cash-Back Rewards program is not a Pathward product or service, nor is it\n endorsed or supported by Pathward in any way.\n
\n \n
\n \n );\n};\n\nexport default DebitExplain;\n","import React from 'react';\nimport { CardAndAppImg, WomenShoppingImg } from '@constants/images';\n\nconst Features = () => {\n return (\n \n
\n \n
\n \n
\n \n \n
\n \n Unlock financial support and empowerment\n
\n\n- \n
- \n \n \n \n Earn cash-back rewards* when using your YourSuccess Debit Mastercard®. Your\n everyday spending results in extra money that you can use to help make your trustee payment.\n \n\n
\n \n - \n \n \n Pay your most important bills like your mortgage or car payment and let your\n YourSuccess Bank Account automate a payment history you can access on demand.\n
\n \n - \n \n \n Take control of your payment plan with early access to your hard-earned pay.\n
\n \n
\n *This optional Cash-Back Rewards program is not a Pathward product or service, nor is it\n endorsed or supported by Pathward in any way.\n
\n \n
\n \n );\n};\n\nexport default Features;\n","import React, { useState, useContext, useEffect } from 'react';\nimport { Link } from 'react-router-dom';\nimport { ToastContainer, toast } from 'react-toastify';\nimport { users as usersApi } from '@helpers/api';\nimport { SessionContext } from '@contexts';\nimport ValidatedInput from '@components/ValidatedInput';\n\nconst LoginForm = ({topBarShown = false}) => {\n const [email, setEmail] = useState('');\n const [password, setPassword] = useState('');\n const [oneTimePasscode, setOneTimePasscode] = useState('');\n const [promptOtp, setPromptOtp] = useState(false);\n const [disableSubmit, setDisableSubmit] = useState(false);\n const { setToken } = useContext(SessionContext);\n\n const toastConfig = {\n position: 'top-center',\n autoClose: 6000,\n hideProgressBar: false,\n closeOnClick: true,\n pauseOnHover: true,\n draggable: true,\n progress: undefined\n };\n\n const handleSubmit = (event) => {\n event.preventDefault();\n setDisableSubmit(true);\n\n usersApi\n .login({\n data: {\n user: {\n email,\n password,\n one_time_passcode: oneTimePasscode\n }\n }\n })\n .then((response) => {\n if (response.data.prompt_otp) {\n setPromptOtp(true);\n } else {\n toast.success('Login success!', toastConfig);\n setToken(response.headers.authorization);\n }\n setDisableSubmit(false);\n })\n .catch((error) => {\n if (error.response) {\n const { errors } = error.response.data;\n if (error.response.data.prompt_otp) {\n setPromptOtp(true);\n toast.error('MFA Failed', toastConfig);\n } else {\n toast.error(errors ? errors[0] : error.response.data.error, toastConfig);\n }\n } else if (error.request) {\n toast.error(\"Can't Login\", toastConfig);\n console.error(error.request);\n } else {\n toast.error(\"Can't Login\", toastConfig);\n console.error('Error', error.message);\n }\n setDisableSubmit(false);\n });\n };\n\n useEffect(() => {\n sessionStorage.removeItem('lastTimeStamp');\n }, []);\n\n return (\n <>\n \n 
\n
\n \n
\n About the YourSuccess Bank Account
\n- \n
- \n ✔\n
There is no credit report pulled as part of the registration process.
\n \n - \n ✔\n
\n The YourSuccess Bank Account is an exclusive benefit available only to TFS users.\n
\n \n - \n ✔\n
\n The YourSuccess Bank Account provided by Pathward, N.A., is a digital deposit\n account. You can direct funds to the account just like any deposit account.\n
\n \n
\n Your journey to a Chapter 13 bankruptcy discharge is a path toward renewed financial\n well-being. TFS is committed to help you along this journey.\n
\n \n\n
\n \n );\n};\n\nexport default SuccessTracker;\n","import React from 'react';\nimport { Link } from 'react-router-dom';\nimport { YourSuccessLogoImg } from '@constants/images';\nimport LoginForm from './LoginForm';\n\nconst TopBar = () => {\n return (\n \n
\n \n
\n \n Take Control of Your Financial Journey with Success Tracker\n
\n\n The Success Tracker is an innovative financial tool designed to help\n you navigate the complexities of Chapter 13 bankruptcy with confidence. It provides a\n clear overview of your spending habits, helping you avoid missed payments and stay\n within your budget. This all-in-one tool empowers you to take control of your financial\n future, offering peace of mind and a clearer path toward discharge.\n
\n- \n
- \n ✔\n
\n Goal Settings: Allows users to set monthly financial goals,\n encouraging discipline and regular progress monitoring.\n
\n \n - \n ✔\n
\n Real-time Tracking: Monitors both plan payments and everyday\n expenses, offering a holistic view of a user’s financial health.\n
\n \n - \n ✔\n
\n Recognition: Rewards users for achieving their set goals, providing\n motivation to stay on track.\n
\n \n - \n ✔\n
\n Financial Progress Insights: Provides regular updates and reports\n on how users are progressing in managing their financial obligations.\n
\n \n - \n ✔\n
\n Stay On Track: The Success Tracker helps ensure you're staying\n compliant with your Chapter 13 repayment plan while managing your daily living\n expenses.\n
\n \n
\n \n
\n \n
\n \n
\n );\n}\n","import React from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { Button } from '@mui/material';\nimport { TrackerLearnMoreImg } from '../../constants/images';\n\nexport default function SuccessTrackerLearnMore() {\n const navigate = useNavigate();\n\n return (\n \n \n Let the YourSuccess Bank Account Help\n
\n
\n \n Let the YourSuccess Bank Account Help\n
Keep Track Your Important Bills\n
\n \n
\n \n
\n \n TFS and your Chapter 13 trustee keep track of your plan payments. But what about other\n critical bills?\n
\n\n It is your responsibility to make those ongoing payments like mortgage, car, or child\n support?. Consistent and on-time payments, and records to show that, are requirements\n of receiving a discharge. Failure to do both could lead to issues.\n
\n\n When you need it, the YourSuccess Payment Assist feature allows you to create a\n payment report that can span years. This report can be shared with your trustee, the\n courts or an aggressive creditor.\n
\n\n The YourSuccess Bank Account is designed with the needs of Chapter 13 debtors in mind.\n Ease your journey by taking advantage of payment reminders and reporting developed for\n Chapter 13.\n
\n\n
\n \n navigate('/dashboard/paybills')}\n className=\"w-96\">\n Get Started\n \n
\n \n
\n \n \n
\n \n Set up reminders for your critical monthly bills like your house or car.\n
\n\n \n
\n \n Use thePayment Assist feature to demonstrate to the trustee and the court that you\n are current with these bills.\n
\n\n \n
\n \n An easy-to-create report that will demonstrate your consistency in paying bills and\n set you up for success after bankruptcy.\n
\n\n
\n );\n}\n","import React from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { Button } from '@mui/material';\nimport { TFSRewardsLearnMoreImg } from '../../constants/images';\n\nexport default function TFSRewardsLearnMore() {\n const navigate = useNavigate();\n return (\n \n
\n \n Success Tracker - Your Path to Financial Success\n
\n\n
\n \n
\n What is Success Tracker?
\n\n Success Tracker is a comprehensive financial management tool designed to help you:\n
\n- \n
- \n Manage Chapter 13 Payments: Keep track of your trustee payments, ensuring you stay\n on track for a successful discharge.\n \n
- Monitor Spending: Track your spending on your YourSuccess Debit card. \n
- \n Include Activity on Other Accounts: Input transactions from other accounts to get a\n complete view of your income and expenses\n \n
Key Features
\n\n
\n \n
\n Trustee Payments:
\n- \n
- \n Set and track your monthly Chapter 13 payments, ensuring you never miss a due\n date.\n \n
- \n Making your most important monthly payment a top priority is key to achieving a\n successful discharge.\n \n
\n
\n Spending Management
\n- \n
- \n Automatic Alerts: Receive notifications if you are close to going over your\n planned monthly expenditures.\n \n
- \n Card Transactions: Monitor all your spending on the YourSuccess Bank Account\n card in real-time.\n \n
- \n Budgeting Tools: Set budgets for different categories and track your spending to\n stay within limits.\n \n
\n 
\n
\n \n navigate('/dashboard/tracker/get-started')}>\n Get Started\n \n
\n \n
\n );\n}\n","import React from 'react';\nimport { Link } from 'react-router-dom';\n\nconst LinkButton = ({ path, color, children }) => {\n return (\n \n \n \n Get Rewarded for Everyday Online Shopping\n
\n
\n \n Get Rewarded for Everyday Online Shopping\n
\n and Get Cash Back to YourSuccess Account.\n
\n Use that to Help Make Your Trustee Payment.\n
\n \n
\n \n
\n \n As a YourSuccess account holder, you have access to an exclusive benefit that helps\n you achieve your Chapter 13 goals. Purchases at thousands of online merchants will\n bring you one step closer to completing your plan payments by depositing cash back\n into YourSuccess Bank Account.\n
\n\n You made the responsible financial decision to file Chapter 13. Now decide that every\n dollar counts. Start spending smart and reaping the benefits of this exclusive cash\n reward.\n
\n\n 
\n
\n \n navigate('/dashboard/rewards')}>\n Get Started\n \n
\n \n {children}\n
\n \n );\n};\n\nexport default LinkButton;\n","import LinkButton from './LinkButton';\n\nexport default LinkButton;\n","import React from 'react';\nimport BeatLoader from 'react-spinners/BeatLoader';\nimport Box from '@mui/material/Box';\n\nconst Loader = () => {\n return (\n \n\n //
\n );\n};\n\nexport default Loader;\n","import Loader from './Loader';\n\nexport default Loader;\n","import React from 'react';\nimport QRCode from 'react-qr-code';\n\nconst MFAModal = ({ user, enableMfa }) => {\n if (enableMfa) {\n return (\n \n
\n );\n }\n\n return (\n \n Enable Multi-Factor Authentication to add a second layer of security to your account.\n
\n\n Download an authenticator app from your devices app store to receive one time passcodes\n whenever you login.\n
\n\n
\n );\n};\n\nexport default MFAModal;\n","import React, { useState, useContext, useCallback } from 'react';\nimport Swal from 'sweetalert2';\nimport withReactContent from 'sweetalert2-react-content';\nimport { users as usersApi } from '@helpers/api';\nimport { swalMFA } from '@constants/sweetAlert';\nimport { SessionContext } from '../../contexts';\nimport MFAModal from './MFAModal';\n\nconst useMFA = (setUser, user) => {\n const [loading, setLoading] = useState(false);\n const swalPopUp = withReactContent(Swal);\n\n const enable = useCallback(() => {\n swalPopUp\n .fire({\n ...swalMFA,\n confirmButtonText: 'Confirm',\n html: \n Please follow the steps below to start using multi-factor authentication\n
\n- \n
- \n Download an authenticator app from your devices app store, if you don't have one\n installed already\n \n
- \n Open the authenticator app and use it to scan the QR code shown below\n \n
- \n Use the authenticator app whenever you login to receive one time passcodes\n \n
\n \n Secure your account with multi factor authentication\n\n
\n );\n};\n\nexport default MFAToggle;\n","import MFAToggle from './MFAToggle';\n\nexport default MFAToggle;\n","import React, { useState, useEffect } from 'react';\nimport { YourSuccessLogoImg } from '@constants/images';\nimport Footer from '@components/Footer';\nimport CarouselSlider from '@components/CarouselSlider';\n\nconst MainTemplate = ({ body, images, textFooter, textLinkFooter, linkFooter, logo = true }) => {\n const [mobile, setMobile] = useState(false);\n\n useEffect(() => {\n setMobile(window.innerWidth <= 450);\n }, [window.innerWidth]);\n\n return (\n \n \n
\n \n \n
\n );\n};\n\nexport default MainTemplate;\n","import MainTemplate from './MainTemplate';\n\nexport default MainTemplate;\n","import React from 'react';\nimport { Link } from 'react-router-dom';\n\nconst OptionsFunding = ({ icon = '', text = '', title, description, link, id, onClick }) => {\n return (\n \n
\n \n {!mobile &&
\n \n
}\n \n
\n {mobile && \n
\n \n {logo && (\n
\n \n \n
\n \n
\n \n \n
\n \n {icon === '' && {text}}\n {icon !== '' && }\n
\n \n
\n {title}
\n {description}\n\n \n
\n \n
\n );\n};\n\nexport default Paginate;\n","import Paginate from './Paginate';\n\nexport default Paginate;\n","import React, { useContext } from 'react';\nimport { AccountContext } from '../../contexts';\nimport { useFormikContext } from 'formik';\n\nimport { DateTime } from 'luxon';\nimport AttachMoneyIcon from '@mui/icons-material/AttachMoney';\nimport HistoryEduIcon from '@mui/icons-material/HistoryEdu';\n\nconst CheckPreview = () => {\n const { account } = useContext(AccountContext);\n const { values } = useFormikContext();\n\n return (\n \n
\n {children}\n {per_page > -1 && count > per_page && (\n \n \n handleChange(e)}\n className=\"border px-5 py-3 border-solid border-whiteGray bg-whiteLighter rounded-md block mt-0 focus:outline-none focus:ring-0 focus:border-black placeholder-darkGray selectOptions\">\n \n \n \n \n \n
\n\n {dateRange.startDate && dateRange.endDate && (\n \n Filter between{' '}\n {dateRange?.startDate?.toLocaleDateString('en-US', {\n day: '2-digit',\n month: '2-digit',\n year: 'numeric'\n })}{' '}\n and{' '}\n {dateRange?.endDate?.toLocaleDateString('en-US', {\n day: '2-digit',\n month: '2-digit',\n year: 'numeric'\n })}\n
\n )}\n\n \n
\n \n \"\n marginPagesDisplayed={2}\n pageRangeDisplayed={5}\n forcePage={current_page - 1}\n pageCount={Math.ceil(count / per_page)}\n onPageChange={(data) => setPage(data.selected + 1)}\n containerClassName=\"pagination\"\n subContainerClassName=\"pages pagination\"\n activeClassName=\"active\"\n onClick={(e) => handleNextPrevButtons(e)}\n renderOnZeroPageCount={null}\n />\n
\n )}\n \n
\n );\n};\n\nexport default CheckPreview;\n","import React, { useEffect } from 'react';\nimport { Formik, Form } from 'formik';\nimport { useNavigate, Link } from 'react-router-dom';\nimport RegionSelect from '@components/RegionSelect';\nimport * as Yup from 'yup';\nimport { billers as billersApi } from '@helpers/api';\nimport Swal from 'sweetalert2';\nimport withReactContent from 'sweetalert2-react-content';\nimport ValidatedInput from '../ValidatedInput/ValidatedInput';\nimport CheckPreview from './CheckPreview';\n\nconst requiredMessage = 'Required';\nconst maxErrorMessage = 'Too long';\nconst minErrorMessage = 'Needs more characters';\nconst matchesErrorMessage = 'Invalid';\n\nconst alphaRegex = /^[A-Za-z\\s\\-.]*$/;\nconst alphaWithExtrasRegex = /^[A-Za-z\\s\\-']*$/;\nconst alphaNumericRegex = /^[A-Za-z\\s\\d#\\-.]*$/;\nconst postalCodeRegex = /(^\\d{5}$|^\\d{5}-\\d{4}$)/;\n\nconst validationSchema = Yup.object({\n biller_address_1: Yup.string()\n .matches(alphaNumericRegex, matchesErrorMessage)\n .min(4, minErrorMessage)\n .max(80, maxErrorMessage)\n .nullable(),\n biller_address_2: Yup.string().matches(alphaNumericRegex, matchesErrorMessage).max(30).nullable(),\n biller_city: Yup.string()\n .matches(alphaRegex, matchesErrorMessage)\n .max(30, maxErrorMessage)\n .required(requiredMessage)\n .nullable(),\n biller_state: Yup.string().length(2).required(requiredMessage).nullable(),\n biller_zip: Yup.string()\n .matches(postalCodeRegex, matchesErrorMessage)\n .required(requiredMessage)\n .nullable(),\n biller_account_number: Yup.string().required(requiredMessage),\n biller_name: Yup.string()\n .max(50, maxErrorMessage)\n .matches(alphaWithExtrasRegex, matchesErrorMessage)\n .required(requiredMessage),\n biller_phone: Yup.string().length(10, 'Please enter a complete phone number').nullable()\n});\n\nconst PaperBillerForm = () => {\n const swalPopUp = withReactContent(Swal);\n const navigate = useNavigate();\n\n const formValues = {\n biller_name: '',\n biller_city: '',\n biller_state: '',\n biller_zip: '',\n biller_account_number: '',\n biller_address_1: '',\n biller_address_2: '',\n biller_phone: ''\n };\n\n const handleBillerSubmit = (values) => {\n billersApi\n .addPaperBiller({ biller: values })\n .then(() => {\n navigate('/dashboard/paybills');\n })\n .catch((error) => {\n swalPopUp.fire({\n icon: 'error',\n title: 'Unable to Add a new bill.'\n });\n });\n };\n\n useEffect(() => {\n swalPopUp.fire({\n title: 'Billpay Paper Check',\n html: `\n Check Preview
\n\n
\n \n
\n
\n \n
\n \n Account: {values.biller_account_number}\n
\n 001234567
\n \n
\n
\n \n
\n \n \n
\n \n \n {DateTime.now().toLocaleString(DateTime.DATE_FULL)}\n \n
\n \n \n XXXXXXXXXXXXXXXXXXXXXXXXXX AND XX/100\n \n \n
\n \n
\n \n PAY TO THE ORDER OF\n
\n \n {values.biller_name.toUpperCase()}\n \n {values.biller_address_1.toUpperCase()}{' '}\n {values.biller_address_2 ? `, ${values.biller_address_2.toUpperCase()}` : ''}\n \n {values.biller_city && (\n \n {values.biller_city.toUpperCase()}, {values.biller_state.toUpperCase()}{' '}\n {values.biller_zip}\n \n )}\n
\n \n
\n \n {account.galileo_payment_reference_number || 1231321231321}\n 273070278\n
\n \n
`\n });\n }, []);\n\n return (\n In order to ensure that the Paper Check you are creating reaches the intended recipient,\n please be sure to correctly enter the information requested in the following fields.
\nIf you are sending a check to a payee or merchant that has issued an invoice,\n please use the billing information from that invoice to provide the requested information.
\n\n
\n );\n};\n\nexport default PaperBillerForm;\n","import PaperBillerForm from './PaperBillerForm';\n\nexport default PaperBillerForm;\n","import React from 'react';\n\nconst PatriotActCopy = () => {\n return (\n \n
\n \n \n {({ errors, values, handleChange, isSubmitting }) => (\n <>\n \n
\n Add Paper Biller
\n\n Important information for opening an Account: To help the federal government fight the funding\n of terrorism and money laundering activities, the USA PATRIOT Act requires all financial\n institutions and their third parties to obtain, verify, and record information that identifies\n each person who opens an Account. What this means for you: When you open an account, we will\n ask for your name, address, date of birth, and other information that will allow us to\n identify you. We may also ask to see a copy of your driver's license or other identifying\n documents.\n
\n );\n};\n\nexport default PatriotActCopy;\n","import PatriotActCopy from './PatriotActCopy';\n\nexport default PatriotActCopy;\n","import React from 'react';\nimport { Field, ErrorMessage } from 'formik';\n\nimport { masks, getClass } from '@helpers/formik';\n\nconst PhoneNumberInput = ({ name, placeholder, type, icon = null, value = '', errors }) => {\n const classInput = `border px-5 py-3 border-solid border-whiteGray bg-whiteLighter rounded-md block w-full mt-0 appearance-none focus:outline-none focus:ring-0 focus:border-black placeholder-darkGray ${getClass(\n errors,\n name\n )}`;\n\n return (\n\n
\n );\n};\n\nexport default PhoneNumberInput;\n","import PhoneNumberInput from './PhoneNumberInput';\n\nexport default PhoneNumberInput;\n","import React, { useEffect, useState, useContext } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { plaid as plaidApi } from '@helpers/api';\nimport { usePlaidLink } from 'react-plaid-link';\nimport { EnrollmentContext } from '@contexts';\n\nconst PlaidLink = ({ selectAccount }) => {\n const [linkToken, setLinkToken] = useState(null);\n const { enrollment } = useContext(EnrollmentContext);\n const { achAccountId } = useParams();\n\n const fetchLinkToken = () => {\n plaidApi\n .createLinkToken({ data: { enrollment, ach_account_id: achAccountId } })\n .then((response) => {\n const linkTokenResponse = response.data.link_token;\n setLinkToken(linkTokenResponse);\n localStorage.setItem('linkToken', linkTokenResponse);\n })\n .catch((error) => {\n // eslint-disable-next-line no-console\n console.error(error);\n });\n };\n\n const config = {\n onSuccess: (plaidPublicToken, metadata) => {\n selectAccount(plaidPublicToken, metadata.account);\n localStorage.removeItem('linkToken');\n },\n onExit: (err) => {\n if (err?.error_code === 'INVALID_LINK_TOKEN') {\n localStorage.removeItem('linkToken');\n }\n },\n onEvent: () => {},\n token: linkToken\n };\n\n const { open, ready } = usePlaidLink(config);\n\n useEffect(() => {\n fetchLinkToken();\n }, []);\n\n useEffect(() => {\n if (ready) {\n open();\n }\n }, [ready, open]);\n\n return ;\n};\n\nexport default PlaidLink;\n","import PlaidLink from './PlaidLink';\n\nexport default PlaidLink;\n","import React, { useEffect } from 'react';\nimport { usePlaidLink } from 'react-plaid-link';\nimport { useNavigate } from 'react-router-dom';\n\nconst PlaidLinkOauth = ({ selectAccount }) => {\n const navigate = useNavigate();\n const baseLinkPath = 'plaid/link';\n const linkToken = localStorage.getItem('linkToken');\n\n const config = {\n onSuccess: (plaidPublicToken, metadata) => {\n selectAccount(plaidPublicToken, metadata.account);\n localStorage.removeItem('linkToken');\n },\n onExit: () => {\n navigate(baseLinkPath);\n },\n onEvent: () => {},\n token: linkToken,\n receivedRedirectUri: window.location.href\n };\n\n const { open, ready } = usePlaidLink(config);\n\n useEffect(() => {\n if (!linkToken) {\n navigate(baseLinkPath);\n }\n\n if (ready) {\n open();\n }\n }, [ready, open]);\n\n return ;\n};\n\nexport default PlaidLinkOauth;\n","import PlaidLinkOauth from './PlaidLinkOauth';\n\nexport default PlaidLinkOauth;\n","import React from 'react';\n\nconst ProgressBar = ({ steps, currentStep }) => {\n const lengthSteps = steps.length;\n const stepFind = steps.find(({ step }) => step === currentStep)?.id;\n\n const stepsList = steps.map(({ title, id }) => {\n return (\n \n \n {masks.numeric({\n name: 'primary_phone',\n placeholder: 'Primary Phone',\n mask: '(999) 999-9999',\n classes: classInput\n })}\n \n {icon && (\n \n \n \n )}\n {type !== 'date' && (\n \n {placeholder}\n \n )}\n
\n \n
\n \n
\n {id}
\n {title}
\n- \n {stepsList}\n
\n
\n );\n};\n\nexport default RegionSelect;\n","import RegionSelect from './RegionSelect';\n\nexport default RegionSelect;\n","import React from 'react';\nimport Swal from 'sweetalert2';\nimport withReactContent from 'sweetalert2-react-content';\n\nconst RequestSupportBtn = () => {\n const swalPopUp = withReactContent(Swal);\n\n const showPopup = () => {\n swalPopUp.fire({\n position: 'center',\n title: 'Customer Support: 866-357-6095',\n confirmButtonText: 'OK'\n });\n }\n return (\n \n
\n \n handleChange(val)}\n defaultOptionLabel={label}\n valueType=\"short\"\n classes={`${getClass(errors, name)}`}\n />\n
\n \n {!confirm && (\n <>\n
\n );\n};\n\nexport default AddPaymentModal;\n","/* eslint-disable camelcase */\nimport React, { useEffect, useState, useMemo, useRef } from 'react';\nimport { Link } from 'react-router-dom';\nimport Swal from 'sweetalert2';\nimport withReactContent from 'sweetalert2-react-content';\nimport CurrencyFormat from 'react-currency-format';\nimport { billPayments as billPaymentsApi, billers as billersApi } from '@helpers/api';\nimport AddPaymentModal from './AddPaymentModal';\n\nimport DataTable from 'react-data-table-component';\nimport { BillerInformation } from './Billers/BillerInformation';\nimport BillerActions from './Billers/BillerActions';\nimport ModalComponent from '../shared/ModalComponent';\nimport ReportDateRangeForm from '../BillerReportList/ReportDateRangeForm';\n\nimport {\n TableContainer,\n Table,\n TableHead,\n TableCell,\n TableBody,\n TableRow,\n IconButton,\n Collapse,\n Paper\n} from '@mui/material';\n\nimport { KeyboardArrowUp, KeyboardArrowDown } from '@mui/icons-material';\n\nconst customStyle = {\n headCells: {\n style: {\n fontSize: '22px',\n fontWeight: 'bold',\n textAlign: 'center'\n }\n }\n};\n\nconst Row = ({ row, onClickAddPayment, deleteBiller, userFeatures, getBillers }) => {\n const [open, setOpen] = useState(false);\n return (\n <>\n \n
\n \n {\n const { value } = values;\n setValueAmount(value);\n }}\n placeholder=\"Amount\"\n className=\"border text-black px-5 py-3 border-solid border-whiteGray bg-whiteLighter rounded-md block w-full mt-0 focus:outline-none focus:ring-0 focus:border-black placeholder-darkGray\"\n />\n \n Amount\n \n
\n \n setConfirm(true)}\n className={`${\n !valueAmount || valueAmount === 0 ? 'secondary-button' : 'primary-button'\n } font-bold`}\n disabled={!valueAmount || valueAmount === 0}>\n Add\n \n \n
\n \n )}\n {confirm && (\n \n
\n )}\n \n
\n \n
\n \n Name: \n
\n {biller.biller_name}\n\n
\n \n Address: \n
\n {biller.biller_address_1}\n\n
\n \n Account Number: \n
\n {biller.biller_account_number}\n\n
\n \n Phone: \n
\n {biller.biller_phone}\n\n
\n \n Amount: \n
\n {valueAmount}\n\n
\n \n Fee: \n
\n $1.00\n\n
\n \n Total: \n
\n\n \n \n handleSubmit(false)}>\n Cancel\n \n
\n \n {row.biller_name} - {row.id}\n
\n{row.biller_account_number}
\n\n
\n \n {' '}\n {new Date(record.updated_at).toLocaleDateString()}\n
\n );\n }\n },\n {\n id: 'status',\n name: 'Status',\n className: 'status',\n sortable: true,\n align: 'center',\n cell: (record) => {\n return (\n (record.status === 'created' && (\n \n Created\n
\n )) ||\n (record.status === 'pending' && (\n \n Pending\n
\n )) ||\n (record.status === 'mailed' && (\n \n Mailed\n
\n )) ||\n (record.status === 'cleared' && (\n \n Cleared\n
\n )) ||\n (record.status === 'failed' && (\n \n Failed\n
\n )) ||\n (record.status === 'returned' && (\n \n Returned\n
\n ))\n );\n }\n }\n ]);\n\n const deleteBiller = (id) => {\n swalPopUp\n .fire({\n title: 'Delete Biller',\n text: 'Are you sure to delete this biller?',\n icon: 'question',\n showCloseButton: true,\n showConfirmButton: true,\n showCancelButton: true,\n allowEscapeKey: false,\n allowOutsideClick: false\n })\n .then(async (result) => {\n if (result.isConfirmed) {\n await billersApi.deleteById(id);\n swalPopUp\n .fire({\n title: 'Delete Biller',\n text: 'Biller was successfully removed',\n icon: 'success',\n showConfirmButton: true,\n showCancelButton: false\n })\n .then(() => {\n getBillers();\n });\n }\n });\n };\n\n return (\n <>\n {userFeatures.trackedBills && (\n \n
\n )}\n Reporting
\n\n
\n \n \n \n Add a new bill\n \n \n {}}\n title={'Add Payment'}\n showFooter={false}>\n
\n \n );\n};\n\nexport default BillerList;\n","import React from 'react';\nimport { Route, Routes } from 'react-router-dom';\nimport RppsBillerForm from '@components/RppsBillerForm';\nimport PaperBillerForm from '@components/PaperBillerForm';\nimport PrivateRoute from '../../routes/PrivateRoute';\nimport BillerList from './BillerList';\n\nconst BillerRoutes = ({ userFeatures }) => {\n return (\n Your Bills
\n \n\n {billers.length === 0 && \n \n
\n \n )}\n
\n No records found
}\n {billers.length > 0 && (\nBill Payment History
\n\n {billerList.length > 0 && (\n
\n No records found
}\n\n onClickAddPayment(biller)}\n className=\"tablet:w-[315px] desktop:w-[244px] mobile:w-[185px] bg-greyblue hover:bg-greyblueHover rounded h-10 text-descriptionSlide text-white font-bold cursor-pointer flex justify-center items-center gap-4\">\n Make a Payment\n \n deleteBiller(biller.id)}\n className=\"tablet:w-[315px] desktop:w-[244px] mobile:w-[185px] bg-redDarker hover:bg-red rounded h-10 text-descriptionSlide text-white font-bold cursor-pointer flex justify-center items-center gap-4\">\n Delete Biller\n \n
\n {userFeatures.billerReminder && (\n \n
\n )}\n \n
\n );\n};\n","import React, { useState, useRef } from 'react';\nimport { DatePicker } from '@mui/x-date-pickers';\nimport { createTheme, ThemeProvider } from '@mui/material/styles';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';\nimport { DateTime } from 'luxon';\nimport { billers as billersApi } from '@helpers/api';\nimport Swal from 'sweetalert2';\nimport withReactContent from 'sweetalert2-react-content';\n\nconst Reminder = ({ getBillers, biller }) => {\n const [reminder, setReminder] = useState(\n DateTime.fromISO(biller.reminder?.next_reminder || DateTime.now(), { setZone: true })\n );\n const ref = useRef(null);\n\n const swalPopUp = withReactContent(Swal);\n\n const datePickerTheme = createTheme({\n components: {\n MuiInputLabel: {\n styleOverrides: {\n root: {\n color: '#0A1307',\n fontFamily: 'Montserrat',\n fontWeight: 'normal',\n backgroundColor: '#F5F7F9',\n left: '5px',\n paddingLeft: '0.5rem',\n paddingRight: '0.5rem',\n borderTopLeftRadius: '0.5rem',\n borderTopRightRadius: '0.5rem',\n transform: 'translate(14px, -15px) scale(0.75);'\n }\n }\n },\n MuiOutlinedInput: {\n styleOverrides: {\n root: {\n borderRadius: '6px',\n fontFamily: 'Montserrat',\n fontWeight: 'normal',\n input: {\n borderRadius: '6px 0 0 6px',\n padding: '0.75rem 1.25rem'\n },\n fieldset: {\n borderWidth: '0px'\n }\n }\n }\n }\n }\n });\n\n const DatePickerComponent = () => {\n return (\n \n
\n \n Account Number: {biller.biller_account_number}\n
\n\n Name: {biller.biller_name}\n
\n\n Address 1: {biller.biller_address_1}\n
\n\n Address 2: {biller.biller_address_2}\n
\n\n City: {biller.biller_city}\n
\n\n
\n \n Zip: {biller.biller_zip}\n
\n\n Phone: {biller.biller_phone}\n
\n\n Category: {biller.biller_category}\n
\n\n onClickReminder(biller)}\n className=\"mobile:w-[190px] tablet:w-[315px] desktop:w-[244px] bg-teal hover:bg-seafoam rounded h-10 text-descriptionSlide text-white font-bold cursor-pointer flex justify-center items-center gap-4\">\n {biller.reminder ? 'Edit Reminder' : 'Set Reminder'}\n \n
\n );\n};\n\nexport default Reminder;\n","/* eslint-disable no-console */\nimport React, { useState, useRef } from 'react';\nimport { Formik, Form } from 'formik';\nimport { Link, useNavigate } from 'react-router-dom';\nimport ValidatedInput from '@components/ValidatedInput';\nimport RegionSelect from '@components/RegionSelect';\nimport ScaleLoader from '@components/ScaleLoader';\nimport Swal from 'sweetalert2';\nimport withReactContent from 'sweetalert2-react-content';\nimport { searchBillers as searchBillersApi, billers as billersApi } from '@helpers/api';\n\nimport TextField from '@mui/material/TextField';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport Box from '@mui/material/Box';\nimport { debounce } from 'lodash';\n\nconst NO_RESULTS_STRING = 'No results found';\n\nconst RppsBillerForm = ({ userFeatures }) => {\n const [searchParam, setSearchParam] = useState('');\n const [searchState, setSearchState] = useState('');\n const [loading, setLoading] = useState(false);\n const [billers, setBillers] = useState([]);\n const [billerAccountPattern, setBillerAccountPattern] = useState([]);\n const [selectedCategory, setSelectedCategory] = useState('');\n const [customCategory, setCustomCategory] = useState('');\n const [noBillerFound, setNoBillerFound] = useState(false);\n\n const navigate = useNavigate();\n const swalPopUp = withReactContent(Swal);\n\n const fetchData = debounce((query) => {\n if (!query || query === '') {\n setBillers([]);\n setSearchParam('');\n return;\n }\n\n setLoading(true);\n\n searchBillersApi\n .post({ data: { search_params: { state: searchState, search_text: query } } })\n .then(({ data }) => {\n if (\n data.response_data?.table?.billers[0].biller_name === NO_RESULTS_STRING &&\n userFeatures.paperBillPay\n ) {\n setNoBillerFound(true);\n } else {\n setNoBillerFound(false);\n setBillers(data.response_data?.table?.billers || []);\n }\n })\n .catch(async (error) => {\n await swalPopUp.fire({ icon: 'error', title: 'Unable to load list of billers' });\n });\n }, 500);\n\n const handleBillerSubmit = (values) => {\n if (selectedCategory === 'other') {\n values.biller_category = customCategory;\n } else {\n values.biller_category = selectedCategory;\n }\n\n setLoading(true);\n billersApi\n .addRppsBiller({ biller: values })\n .then(() => {\n navigate('/dashboard/paybills');\n })\n .catch(async () => {\n const accountNoPatterns = billerAccountPattern.join(' or ');\n await swalPopUp.fire({\n icon: 'error',\n title: 'Unable to Add a new bill.',\n html: `Make sure the account number entered follows the following format \n \n {biller.reminder?.next_reminder\n ? DateTime.fromISO(biller.reminder.next_reminder, { setZone: true }).toFormat(\n 'yyyy-LL-dd'\n )\n : 'Not Set'}\n \n {biller.reminder?.next_reminder && (\n <>\n deleteReminder(biller)}\n className=\"fas fa-circle-xmark fa-2x text-redDarker cursor-pointer\"\n title=\"Delete Reminder\"\n />\n \n )}\n
\n ${accountNoPatterns}`\n });\n })\n .finally(() => setLoading(false));\n };\n\n const searchResultClickHandler = (event, billerResult, setFieldValue) => {\n event.preventDefault();\n\n if (billerResult.biller_name === NO_RESULTS_STRING) {\n return;\n }\n\n setSearchParam(billerResult.biller_name);\n setBillerAccountPattern(billerResult.biller_account_no_patterns);\n setBillers([]);\n setFieldValue('rpps_biller_id', billerResult.rpps_biller_id);\n };\n\n const billerLabel = (biller) => {\n if (biller.biller_address1) {\n return `${biller.biller_name} ${biller.biller_address1}, ${biller.biller_city}`;\n } else {\n return biller.biller_name;\n }\n };\n\n const handleCategoryOptionChange = (e) => {\n const selectedValue = e.target.value;\n setSelectedCategory(selectedValue);\n\n if (selectedValue !== 'other') {\n setCustomCategory('');\n }\n };\n\n const handleCustomCategoryChange = (e) => {\n setCustomCategory(e.target.value);\n };\n\n const categoryOptions = [\n { label: 'Utilities', value: 'Utilities' },\n { label: 'Housing', value: 'Housing' },\n { label: 'Communication', value: 'Communication' },\n { label: 'Transportation', value: 'Transportation' },\n { label: 'Personal finance', value: 'Personal finance' },\n { label: 'Insurance', value: 'Insurance' },\n { label: 'Subscriptions', value: 'Subscriptions' },\n { label: 'Education', value: 'Education' },\n { label: 'Health and wellness', value: 'Health and wellness' },\n { label: 'Miscellaneous', value: 'Miscellaneous' },\n { label: 'Other', value: 'other' }\n ];\n\n const onInputChange = (event, value, reason) => {\n if (value) {\n fetchData(value);\n } else {\n setBillers([]);\n }\n };\n\n return (\n <>\n
Add a new bill
\n\n \n
\n \n );\n};\n\nexport default RppsBillerForm;\n","import RppsBillerForm from './RppsBillerForm';\n\nexport default RppsBillerForm;\n","import React from 'react';\nimport { Accordion, AccordionSummary, AccordionDetails, Card, CardContent } from '@mui/material';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\n\nconst AccordionComponent = ({ title, children, biller_id }) => {\n return (\n \n
\n \n
\n \n {\n fetchData(values);\n }}\n initialValues={{ state: '', search_text: searchParam }}\n enableReinitialize={true}>\n {({ errors }) => (\n \n )}\n \n\n {\n handleBillerSubmit(values);\n setSubmitting(false);\n }}>\n {({ errors, values, handleChange, setFieldValue }) => (\n
\n \n \n
\n )}\n \n \n \n {children}\n \n
\n \n
\n );\n};\n\nexport default SelectWithOptions;\n","import SelectWithOptions from './SelectWithOptions';\n\nexport default SelectWithOptions;\n","import React, { useEffect, useState } from 'react';\n\nconst SessionModal = ({ handleClose, getRemainingTime }) => {\n const [countdown, setCountdown] = useState(null);\n\n useEffect(() => {\n setInterval(() => {\n setCountdown(getRemainingTime() / 1000);\n }, 1000);\n }, [])\n\n return (\n <>\n \n hangleChange(val)}>\n {options}\n \n
\n handleClose()} />\n \n Reset Pin\n \n );\n};\n\nconst FreezeButton = ({ onClick, loading }) => {\n return (\n \n \n Freeze Card\n \n );\n};\n\nconst UnfreezeButton = ({ onClick, loading }) => {\n return (\n \n \n Unfreeze Card\n \n );\n};\n\nconst useFreezeCard = () => {\n const [loading, setLoading] = useState(false);\n const swalPopUp = withReactContent(Swal);\n\n const freezeCard = useCallback(() => {\n return cardsApi\n .freeze()\n .then(() => {\n swalPopUp.fire({\n position: 'center',\n icon: 'success',\n title: 'Your card has been frozen',\n showConfirmButton: false,\n timer: 1500\n });\n })\n .catch(() => {\n swalPopUp.fire({\n position: 'center',\n icon: 'error',\n title: 'There was an error freezing your card',\n showConfirmButton: false,\n timer: 1500\n });\n })\n .finally(() => {\n setLoading(false);\n });\n }, []);\n\n const unfreezeCard = useCallback(() => {\n return cardsApi\n .unfreeze()\n .then(() => {\n swalPopUp.fire({\n position: 'center',\n icon: 'success',\n title: 'Your card has been unfrozen',\n showConfirmButton: false,\n timer: 1500\n });\n })\n .catch(() => {\n swalPopUp.fire({\n position: 'center',\n icon: 'error',\n title: 'There was an error unfreezing your card',\n showConfirmButton: false,\n timer: 1500\n });\n })\n .finally(() => {\n setLoading(false);\n });\n }, []);\n\n return {\n loading,\n freezeCard,\n unfreezeCard\n };\n};\n\nconst CreditCard = () => {\n const { account } = useContext(AccountContext);\n const navigate = useNavigate();\n const [frozenCard, setFrozenCard] = useState(account.current_card?.frozen);\n const { loading, freezeCard, unfreezeCard } = useFreezeCard();\n const { url: cardImgUrl } = account.show_virtual_card\n ? useCardImage()\n : { url: { cardImgUrl: '' } };\n\n const [hideAccNumber, setHideAccNumber] = useState(true);\n const onFreeze = () => freezeCard().then(() => setFrozenCard(true));\n const onUnFreeze = () => unfreezeCard().then(() => setFrozenCard(false));\n\n const currentCard = account.current_card || {};\n const hasRequestedNewCard = currentCard.has_requested_new_card;\n const pinPreviouslySet = currentCard.pin_set_at;\n const swalPopUp = withReactContent(Swal);\n\n const onResetPinClick = useCallback(\n () => {\n swalPopUp\n .fire({\n title: 'Reset PIN',\n html: `\n returnDashboard()}>\n openStatement(record)}\n className=\"flex justify-center items-center gap-4 hover:underline hover:text-seafoam\">\n \n {record.name}\n \n );\n }\n },\n {\n id: 'end_date',\n title: 'End Date',\n name: 'End Date',\n className: 'end_date',\n sortable: true,\n align: 'center',\n selector: row => row.end_date\n },\n {\n id: 'download',\n title: 'Download',\n name: 'Download',\n className: 'download',\n align: 'center',\n sortable: false,\n cell: (record) => {\n return (\n openStatement(record, true)}>\n Download {/* Only show \"Download\" on screens sm and up */}\n {/* Adjusted icon size for mobile */}\n \n );\n } \n }\n ];\n\n const customStyle = {\n headCells: {\n style: {\n fontSize: window.innerWidth <= 450 ? '14px' : '18px', // 14px for mobile, 18px for larger screens\n fontWeight: 'bold',\n textAlign: 'center'\n }\n }\n }; \n\n return (\n \n \n \n {children}\n \n );\n};\n\nconst EquationComponent = () => {\n const { incomeGoals, trusteePayment, expenseItems, month } = useContext(TrackSuccessContext);\n const montSelected = month ? DateTime.fromISO(month) : DateTime.now();\n const [data, setData] = useState();\n\n const navigate = useNavigate();\n\n const totalIncomeGoalsForMonth = incomeGoals.reduce(\n (acc, cur) => Number(acc) + Number(cur.amount),\n 0\n );\n\n const formatNumber = (value) => {\n return numericFormatter(value + '', {\n prefix: '$',\n decimalScale: 2,\n fixedDecimalScale: true,\n isNumericString: true,\n thousandSeparator: ','\n });\n };\n\n const totalExpenseItemsForMonth = useMemo(() => {\n return expenseItems.reduce((acc, cur) => {\n return Number(acc) + Number(cur.amount);\n }, 0);\n }, [expenseItems, trusteePayment]);\n\n const paidToTrustee = useMemo(() => {\n return expenseItems.reduce((acc, cur) => {\n if (cur.category === 'trustee_payment') {\n return Number(acc) + Number(cur.amount);\n }\n return acc;\n }, 0);\n }, [expenseItems, trusteePayment]);\n\n const toPayOrPaidToTrustee = useMemo(() => {\n if (trusteePayment?.amount) {\n return paidToTrustee > trusteePayment.amount\n ? paidToTrustee\n : Number(trusteePayment.amount || 0);\n }\n return paidToTrustee;\n }, [paidToTrustee, trusteePayment]);\n\n const leftToPayTrustee = useMemo(() => {\n return Number(trusteePayment?.amount) - Number(paidToTrustee);\n }, [trusteePayment, paidToTrustee]);\n\n const expenseGoal = useMemo(() => {\n return totalIncomeGoalsForMonth - (totalExpenseItemsForMonth + toPayOrPaidToTrustee);\n }, [totalIncomeGoalsForMonth, totalExpenseItemsForMonth, toPayOrPaidToTrustee]);\n\n useEffect(() => {\n setData(getData);\n }, [expenseGoal, trusteePayment, incomeGoals]);\n\n const getData = useMemo(() => {\n const data = [];\n\n data.push({\n value: Number(paidToTrustee),\n label: 'Paid To Trustee',\n color: '#3CB371'\n });\n data.push({\n value: Number(leftToPayTrustee),\n label: 'To Pay Trustee',\n color: '#FFC772'\n });\n data.push({\n value: Number(totalExpenseItemsForMonth),\n label: 'Current Spend',\n color: '#371F76'\n });\n data.push({ value: Number(expenseGoal), label: 'Remaining', color: '#bfbfbf' });\n return data;\n }, [expenseGoal, trusteePayment, incomeGoals]);\n\n return (\n \n \n );\n};\n\nexport default ExpectedIncomeByCategory;\n","import React, { useContext } from 'react';\nimport { TrackSuccessContext } from '@contexts';\nimport { Box, Paper, Alert } from '@mui/material';\nimport TableExpenses from '../Shared/TableExpenses';\nimport { deleteExpenseGoal } from '@helpers/api/tracker';\nimport BreadCrumbComponent from '../Shared/BreadCrumbComponent';\n\nconst headCells = [\n {\n id: 'category',\n label: 'Category'\n },\n {\n id: 'amount',\n label: 'Amount'\n },\n {\n id: '',\n label: 'Actions'\n }\n];\n\nconst ExpenseGoals = () => {\n const { expenseGoals } = useContext(TrackSuccessContext);\n\n return (\n <>\n \n \n Make sure goals are up to date for what you plan to spend this month.\n \n \n \n \n \n );\n};\n\nexport default ExpenseGoals;\n","import React, { useContext, useEffect, useMemo, useState } from 'react';\nimport { Box, Radio, Paper, TableRow, TableCell, Typography, Modal } from '@mui/material';\nimport * as Yup from 'yup';\nimport { TableComponent, getComparator, stableSort } from './GenerateTable';\nimport ExpenseItemsForm from '../Shared/ExpenseItemsForm';\nimport { DateTime } from 'luxon';\nimport {\n deleteExpenseItem,\n getIndexExpenseItems,\n postExpenseItem,\n putExpenseItem\n} from '@helpers/api/tracker';\nimport { TrackSuccessContext } from '@contexts';\nimport ModalChildrenExpenseItem from '../Shared/ModalChildrenExpenseItem';\nimport { useNavigate } from 'react-router-dom';\nimport CurrencyFormat from 'react-currency-format';\n\nexport const validationSchema = Yup.object({\n amount: Yup.string()\n .test(\n 'maxDigitsAfterDecimal',\n 'The trust payment must be a valid number with a maximum of 2 decimal.',\n (number) => /^\\d+(\\.\\d{1,2})?$/.test(number)\n )\n .required('This field is required'),\n day: Yup.string().required('This field is required'),\n description: Yup.string().nullable()\n});\n\nconst headCells = [\n {\n id: 'amount',\n label: 'Amount'\n },\n {\n id: 'date',\n label: 'Date'\n },\n {\n id: 'description',\n label: 'Description'\n }\n];\n\nconst style = {\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: 500,\n bgcolor: 'background.paper',\n border: '2px solid #000',\n boxShadow: 24,\n p: 4\n};\n\nconst ExpenseItems = ({ category }) => {\n const navigate = useNavigate();\n const [open, setOpen] = useState(false);\n\n const [order, setOrder] = useState('asc');\n const [orderBy, setOrderBy] = useState('');\n\n const [orderExternal, setOrderExternal] = useState('asc');\n const [orderByExternal, setOrderByExternal] = useState('');\n\n const [page, setPage] = useState(0);\n const [pageExternal, setPageExternal] = useState(0);\n\n const [rowsPerPage, setRowsPerPage] = useState(5);\n const [rowsPerPageExternal, setRowsPerPageExternal] = useState(5);\n\n const [selected, setSelected] = useState([]);\n const [formValues, setFormValues] = useState({\n amount: '',\n expenseType: '',\n day: '',\n id: '',\n external: true,\n description: ''\n });\n const [dateRange, setDateRange] = useState({ startDate: null, endDate: null });\n const [openModal, setOpenModal] = useState({ open: false, breakDownItem: null });\n\n const { setExpenseItems, expenseItems, month } = useContext(TrackSuccessContext);\n\n const handleClickOpen = (values) => {\n setOpenModal({ open: true, breakDownItem: values });\n };\n\n const handleCloseModal = (values) => {\n setOpenModal({ open: false, breakDownItem: null });\n if (values) {\n setExpenseItems(values);\n }\n };\n\n const handleOpen = () => setOpen(true);\n const handleClose = () => setOpen(false);\n\n useEffect(() => {\n if (dateRange.startDate !== null && dateRange.endDate !== null) {\n const fetchData = async () => {\n const result = await getIndexExpenseItems({\n params: {\n end_date: dateRange.endDate,\n start_date: dateRange.startDate\n }\n });\n setExpenseItems(result.data.expense_items);\n };\n if (dateRange.startDate !== null && dateRange.endDate !== null) {\n fetchData().catch((error) => {\n console.error(error);\n });\n }\n }\n }, [dateRange]);\n\n const minDate = DateTime.local().minus({ years: 7 });\n\n const visibleRowsExternal = useMemo(\n () =>\n stableSort(\n expenseItems?.filter((val) => val.external === true && val.category === category),\n getComparator(orderExternal, orderByExternal)\n ).slice(\n pageExternal * rowsPerPageExternal,\n pageExternal * rowsPerPageExternal + rowsPerPageExternal\n ),\n [orderExternal, orderByExternal, pageExternal, rowsPerPageExternal, expenseItems]\n );\n\n const visibleRows = useMemo(\n () =>\n stableSort(\n expenseItems?.filter((val) => val.external === false && val.category === category),\n getComparator(order, orderBy)\n ).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),\n [order, orderBy, page, rowsPerPage, expenseItems]\n );\n\n const handleRowClick = (row) => {\n setSelected([row.id]);\n\n setFormValues({\n amount: row.amount,\n expenseType: row.category,\n day: row.effective_date,\n id: row.id,\n external: true,\n description: row.description || '',\n expense_item_id: row.expense_item_id\n });\n handleOpen();\n };\n\n const handleFormSubmit = async (values, actions) => {\n if (selected.length > 0) {\n const result = await putExpenseItem(values.id)({\n data: {\n month: month ? DateTime.fromISO(month).toJSDate() : null,\n expense_item: {\n amount: values.amount,\n category: category,\n effective_date: values.day,\n external: values.external,\n description: values.description\n }\n }\n }).catch((error) => {\n console.error(error);\n return;\n });\n setExpenseItems(result.data);\n } else {\n const result = await postExpenseItem({\n data: {\n month: month ? DateTime.fromISO(month).toJSDate() : null,\n expense_item: {\n amount: values.amount,\n category: category,\n effective_date: values.day,\n external: values.external,\n description: values.description\n }\n }\n }).catch((error) => {\n console.error(error);\n return;\n });\n setExpenseItems(result.data);\n }\n actions.resetForm();\n resetForm();\n handleClose();\n };\n\n const handleDelete = async (id) => {\n const result = await deleteExpenseItem(id)({\n params: {\n month: month ? DateTime.fromISO(month).toJSDate() : null\n }\n }).catch((error) => {\n console.error(error);\n return;\n });\n resetForm();\n setExpenseItems(result.data);\n handleClose();\n };\n\n const isSelected = (id) => selected.indexOf(id) !== -1;\n\n const resetForm = () => {\n setSelected([]);\n setFormValues({\n amount: '',\n expenseType: '',\n day: '',\n description: ''\n });\n handleClose();\n };\n\n const hanldeBack = () => {\n navigate(-1);\n };\n\n const actionButtons = () => {\n return (\n <>\n \n {selected.length > 0 && (\n handleDelete(formValues.id)}>\n Delete\n \n )}\n resetForm()}>\n Cancel\n \n \n );\n };\n\n return (\n \n \n expense.external === false && expense.category === category\n )}\n setDateRange={setDateRange}\n minDate={minDate}\n dateRange={dateRange}\n filter={true}\n title=\"Your reported expenses generated this month\">\n <>\n {visibleRows.map((row, index) => {\n const isItemSelected = isSelected(row.id);\n return (\n \n \n {row.id && (\n handleClickOpen(row)}>\n Breakdown Transaction\n \n )}\n \n \n \n {row.effective_date} \n {row.description} \n \n );\n })}\n {visibleRows.length === 0 && (\n \n \n No data available \n \n \n )}\n \n \n \n \n expense.external === true && expense.category === category\n )}\n setDateRange={setDateRange}\n minDate={minDate}\n dateRange={dateRange}\n filter={false}\n title=\"Your reported external expenses this month\">\n <>\n {visibleRowsExternal.map((row, index) => {\n const isItemSelected = isSelected(row.id);\n return (\n handleRowClick(row)}\n tabIndex={-1}\n key={index}\n selected={isItemSelected}\n sx={{ cursor: 'pointer' }}>\n \n \n {row.effective_date} \n {row.description} \n \n );\n })}\n {visibleRowsExternal.length === 0 && (\n \n \n No data available \n \n \n )}\n \n \n \n \n \n \n \n \n \n {openModal.open && \n );\n};\n\nexport default ExpenseItems;\n","import React from 'react';\nimport { useParams } from 'react-router-dom';\nimport ExpenseItems from './ExpenseItems';\nimport BreadCrumbComponent from '../Shared/BreadCrumbComponent';\nimport { MonthSelector } from '../Shared/MonthSelector';\n\nconst ExpenseItemsByCategory = () => {\n const { category } = useParams();\n\n return (\n <>\n \n \n \n \n \n \n \n {uncategorizedItems.length > 0 && (\n \n \n )}\n \n \n \n );\n};\n\nexport default Expenses;\n","import React, { useEffect, useState, useContext } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { styled, ThemeProvider, createTheme } from '@mui/material/styles';\nimport { Paper, Box, Typography, Modal, LinearProgress, IconButton, Tooltip } from '@mui/material';\nimport InfoIcon from '@mui/icons-material/Info';\nimport DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';\nimport * as Yup from 'yup';\nimport { Form, Formik } from 'formik';\nimport { DateTime } from 'luxon';\nimport Swal from 'sweetalert2';\nimport { TrackSuccessContext } from '@contexts';\nimport { EXPENSE_TYPE } from '@utilities/constants';\nimport { postExpenseGoal, deleteExpenseGoal } from '@helpers/api/tracker';\nimport CustomInput from '../Inputs/CustomInput';\nimport CustomSelect from '../Inputs/CustomSelect';\nimport CurrencyFormat from 'react-currency-format';\nimport BudgetingBuddyComponent from '../../shared/BudgetingBuddy'\n\nconst theme = createTheme({\n palette: {\n green: { main: '#4caf50' },\n yellow: { main: '#FFC772' },\n red: { main: '#FF8372' }\n }\n});\n\nconst style = {\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: 500,\n bgcolor: 'background.paper',\n border: '2px solid #000',\n boxShadow: 24,\n p: 4\n};\n\nconst BorderLinearProgress = styled(LinearProgress)(() => ({\n height: 20,\n borderRadius: 5\n}));\n\nconst groupByCategory = (rows) => {\n const groupedByCategory = rows.reduce((acc, item) => {\n const category = item.category;\n if (!acc[category]) {\n acc[category] = {\n ...item\n };\n } else {\n acc[category].amount = parseFloat(acc[category]?.amount) + parseFloat(item.amount);\n }\n return acc;\n }, {});\n const resultArray = Object.values(groupedByCategory);\n return resultArray;\n};\n\nconst colorGauge = (value) => {\n let color = 'green';\n if (value >= 100 || value === 0) {\n value = 100;\n color = 'red';\n }\n if (value >= 80 && value < 100) {\n color = 'yellow';\n }\n return { color, value };\n};\n\nexport const validationSchema = Yup.object({\n amount: Yup.string()\n .test(\n 'maxDigitsAfterDecimal',\n 'The trust payment must be a valid number with a maximum of 2 decimal.',\n (number) => /^\\d+(\\.\\d{1,2})?$/.test(number)\n )\n .required('This field is required'),\n category: Yup.string().required('This field is required'),\n description: Yup.string().nullable()\n});\n\nconst GaugeChart = ({ items, goals, categories, uncategorizedItems, incomeGoals }) => {\n const { setExpenseGoals, month } = useContext(TrackSuccessContext);\n const [chartData, setChartData] = useState([]);\n const [open, setOpen] = useState(false);\n const [formValues, setFormValues] = useState({\n amount: '',\n category: '',\n id: '',\n description: ''\n });\n\n const itemsByCategory = groupByCategory(items);\n const goalsByCategory = groupByCategory(goals);\n\n const navigate = useNavigate();\n\n const uncategorizedItemsByCategory = groupByCategory(uncategorizedItems);\n\n const handleOpen = () => setOpen(true);\n const handleClose = () => setOpen(false);\n\n const resetForm = () => {\n setFormValues({\n amount: '',\n category: '',\n id: '',\n description: ''\n });\n handleClose();\n };\n\n const handleDelete = async (id) => {\n const resultSwal = await Swal.fire({\n title: 'Remove Goal?',\n text: 'Removing this goal will means you no longer expect to spend in this category this month.',\n icon: 'success',\n iconColor: '#6D31EDFF',\n reverseButtons: true,\n showCancelButton: true,\n confirmButtonColor: '#3B6483',\n cancelButtonColor: '#CDCDC9',\n confirmButtonText: 'Confirm',\n cancelButtonText: 'Cancel'\n });\n if (resultSwal.isConfirmed) {\n const result = await deleteExpenseGoal(id)({\n params: {\n month: month ? DateTime.fromISO(month).toJSDate() : null\n }\n });\n if (result.status === 200) {\n Swal.fire({\n title: 'Deleted!',\n text: 'Your expense goal has been deleted.',\n icon: 'success'\n });\n setExpenseGoals(result.data.expense_goals);\n }\n }\n };\n\n const handleFormSubmit = async (values) => {\n const totalIncomeGoals = incomeGoals.reduce((acc, item) => {\n acc += parseFloat(item.amount);\n return acc;\n }, 0);\n const totalExpenseGoals = goals.reduce((acc, item) => {\n acc += parseFloat(item.amount);\n return acc;\n }, 0);\n\n const budget = totalIncomeGoals - totalExpenseGoals;\n\n const formatCurrency = (value) => {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n maximumFractionDigits: 2\n }).format(value);\n };\n\n if (budget < Number(values.amount)) {\n Swal.fire({\n title: 'Over Budget',\n text: `This would add ${formatCurrency(Number(values.amount) - budget)} over your budget.`,\n icon: 'error'\n });\n return;\n } else {\n const result = await postExpenseGoal({\n data: {\n month: month ? DateTime.fromISO(month).toJSDate() : DateTime.now().toJSDate(),\n expense_goal: {\n amount: values.amount,\n category: values.category,\n description: values.description,\n effective_date: month ? DateTime.fromISO(month).toJSDate() : DateTime.now().toJSDate()\n }\n }\n }).catch((error) => {\n return;\n });\n setExpenseGoals(result.data.expense_goals);\n resetForm();\n handleClose();\n }\n };\n\n useEffect(() => {\n const chartArray = itemsByCategory.map((item) => {\n let expenseGoal = goalsByCategory.find((goal) => goal.category === item.category)\n let percentage =\n (item?.amount * 100) /\n expenseGoal?.amount || 0;\n const { color, value } = colorGauge(percentage);\n percentage = value;\n return {\n id: expenseGoal?.id,\n category:\n categories.find((itemCategory) => itemCategory.value === item.category)?.label || 'Other',\n current: item?.amount,\n goal: expenseGoal?.amount || 0,\n currentPercentage: percentage,\n color: color,\n categoryId: item.category\n };\n });\n\n const chartArrayUncategorized = uncategorizedItemsByCategory.map((item) => {\n let percentage =\n (item?.amount * 100) /\n goalsByCategory.find((goal) => goal.category === item.category)?.amount || 0;\n const { value } = colorGauge(percentage);\n percentage = value;\n return {\n id: item.id,\n category: 'Uncategorized Spendings',\n current: item?.amount,\n goal: 0,\n currentPercentage: percentage,\n color: 'red',\n categoryId: 'uncategorized'\n };\n });\n\n const goalsWithoutItems = goalsByCategory.reduce((acc, goal) => {\n if (!itemsByCategory.find((item) => item.category === goal.category)) {\n acc.push({\n category:\n categories.find((category) => category.value === goal.category)?.label || 'Other',\n current: 0,\n goal: goal.amount,\n currentPercentage: 0,\n color: 'green',\n categoryId: goal.category,\n id: goal.id\n });\n }\n return acc;\n }, []);\n\n chartArray.sort((a, b) => (a.category > b.category ? 1 : -1));\n setChartData([...chartArray, ...chartArrayUncategorized, ...goalsWithoutItems]);\n }, [items, goals, uncategorizedItems]);\n\n return (\n \n \n \n \n Current Spending By Category\n \n \n {' '}\n {/* Adjust margin for mobile */}\n \n \n\n {chartData.map((data, index) => (\n \n \n \n {data.category}\n {data.category !== 'Trustee Payment' && data.goal !== 0 && (\n handleDelete(data.id)}\n titleAccess=\"Delete\"\n />\n )}\n {data.goal === 0 && (\n No expense goal set
\n }\n placement=\"right\">\n \n
\n \n );\n};\n\nexport default SessionModal;\n","import React, { useState, useEffect, useRef } from 'react';\nimport { useIdleTimer } from 'react-idle-timer';\nimport { DateTime } from 'luxon';\nimport jwt_decode from 'jwt-decode';\nimport { users as usersApi } from '@helpers/api';\nimport { SignOut } from '@helpers/SignOut';\nimport SessionModal from './SessionModal';\n\nconst SessionTimeout = ({ token, setToken }) => {\n if (!token) return null;\n\n const [showPrompt, setShowPrompt] = useState(false);\n const lastActionAt = useRef(DateTime.now());\n\n const promptTimeout = 60000; // Show the prompt 1 minute before the session timeout\n\n const timeoutMilliseconds = (tokenMilliseconds) => {\n const decodedJwt = jwt_decode(tokenMilliseconds.split(' ')[1]);\n let seconds = decodedJwt.exp;\n if(decodedJwt.exp >= 2147483647){\n seconds = 2147483647;\n }\n const expirationDate = DateTime.fromSeconds(seconds);\n const timeout = expirationDate?.minus(promptTimeout, 'milliseconds').diffNow('milliseconds').values\n .milliseconds;\n\n if (timeout > 60000) {\n return timeout;\n } else {\n return 60000;\n }\n };\n\n const handleOnIdle = () => {\n SignOut({ timedOut: true });\n };\n\n const handleOnPrompt = () => {\n if (timeoutMilliseconds(token) <= promptTimeout) {\n setShowPrompt(true);\n } else {\n reset();\n }\n };\n\n const getRefreshToken = () => {\n usersApi.refreshToken({ data: { last_active: lastActionAt.current } }).then(({ data }) => {\n const formattedToken = `Bearer ${data.token}`;\n setToken(formattedToken);\n });\n };\n\n const autoRefreshToken = () => {\n if (showPrompt) {\n return;\n }\n getRefreshToken();\n };\n\n const handleReset = () => {\n getRefreshToken();\n };\n\n const onAction = () => {\n lastActionAt.current = DateTime.now();\n };\n\n const { getRemainingTime, reset } = useIdleTimer({\n timeout: timeoutMilliseconds(token),\n promptTimeout: promptTimeout,\n onPrompt: handleOnPrompt,\n onIdle: handleOnIdle,\n onAction\n });\n\n useEffect(() => {\n const timeoutValue = timeoutMilliseconds(token);\n reset();\n setShowPrompt(false);\n\n if (timeoutValue > 10000) {\n setTimeout(() => {\n autoRefreshToken();\n }, timeoutValue - 5000);\n }\n }, [token]);\n\n if (!showPrompt) {\n return null;\n }\n\n return \n
\n \n
\n \n Your session is about to be closed due to inactivity
\n\n
\n \n Time remaining to close the session: {countdown ? Math.trunc(countdown) : null}\n
\n\n
\n \n \n
\n \n
\n );\n};\n\nexport default AccountFeatures;\n","import React, { useCallback, useContext, useState } from 'react';\nimport { Link, useNavigate } from 'react-router-dom';\nimport Swal from 'sweetalert2';\nimport withReactContent from 'sweetalert2-react-content';\nimport { ROUTING_NUMBER } from '@utilities/constants';\nimport { AccountContext } from '../../contexts';\nimport { cards as cardsApi } from '../../helpers/api';\nimport { useCardImage } from '../../hooks';\nimport { RequestSupportBtn } from '../RequestSupportBtn';\n\nconst ResetPinButton = ({ onClick, loading }) => {\n return (\n \n
\n Account Features
\n\n
\n \n
\n \n
\n `,\n showCancelButton: true,\n cancelButtonText: 'No',\n confirmButtonText: 'Yes'\n })\n .then((result) => {\n if (result.isConfirmed) {\n navigate('/dashboard/set-pin');\n }\n });\n },\n [navigate]\n );\n\n return (\n Are you sure you would like to reset your PIN?
\n\n
\n );\n};\n\nexport default CreditCard;\n","import React, { useContext } from 'react';\nimport { Formik, Form } from 'formik';\nimport RegionSelect from '@components/RegionSelect';\nimport * as Yup from 'yup';\nimport { accounts as accountsApi, users as usersApi } from '@helpers/api';\nimport Swal from 'sweetalert2';\nimport withReactContent from 'sweetalert2-react-content';\nimport CheckBoxForm from '@components/CheckBoxForm';\nimport { AccountContext, SessionContext } from '@contexts';\nimport ValidatedInput from '../ValidatedInput/ValidatedInput';\n\nconst requiredMessage = 'Required';\nconst maxErrorMessage = 'Too long';\nconst minErrorMessage = 'Needs more characters';\nconst matchesErrorMessage = 'Invalid';\n\nconst alphaRegex = /^[A-Za-z\\s\\-.]*$/;\nconst alphaWithExtrasRegex = /^[A-Za-z\\s\\-']*$/;\nconst alphaNumericRegex = /^[A-Za-z\\s\\d#\\-.]*$/;\nconst postalCodeRegex = /(^\\d{5}$|^\\d{5}-\\d{4}$)/;\n\nconst addressSchema = {\n address_1: Yup.string()\n .matches(alphaNumericRegex, matchesErrorMessage)\n .min(4, minErrorMessage)\n .max(40, maxErrorMessage)\n .required(requiredMessage)\n .nullable(),\n address_2: Yup.string().matches(alphaNumericRegex, matchesErrorMessage).max(30).nullable(),\n city: Yup.string()\n .matches(alphaRegex, matchesErrorMessage)\n .max(30, maxErrorMessage)\n .required(requiredMessage)\n .nullable(),\n state: Yup.string().length(2).required(requiredMessage).nullable(),\n postal_code: Yup.string()\n .matches(postalCodeRegex, matchesErrorMessage)\n .required(requiredMessage)\n .nullable()\n};\n\nconst validationSchema = Yup.object({\n first_name: Yup.string()\n .max(40, maxErrorMessage)\n .matches(alphaWithExtrasRegex, matchesErrorMessage)\n .required(requiredMessage),\n last_name: Yup.string()\n .max(40, maxErrorMessage)\n .matches(alphaWithExtrasRegex, matchesErrorMessage)\n .required(requiredMessage),\n primary_phone: Yup.string()\n .required(requiredMessage)\n .length(10, 'Please enter a complete phone number'),\n email: Yup.string().required(requiredMessage).email('is not an email address'),\n shipping_address_different: Yup.boolean(),\n address_attributes: Yup.object(addressSchema),\n shipping_address_attributes: Yup.object().when('shipping_address_different', (value) => {\n if (value[0]) return Yup.object(addressSchema);\n return Yup.object().nullable();\n })\n});\n\nconst PersonalInformationForm = () => {\n const { account, setAccount } = useContext(AccountContext);\n const { user, setUser } = useContext(SessionContext);\n const swalPopUp = withReactContent(Swal);\n\n const clearShippingAddressAttributes = (setFieldValue) => {\n ['address_1', 'address_2', 'city', 'state', 'postal_code'].forEach((attr) => {\n setFieldValue(`shipping_address_attributes.${attr}`, null);\n });\n };\n\n const handleSubmit = (values, { setSubmitting }) => {\n accountsApi\n .updatePersonalInfo(values)\n .then(() => {\n swalPopUp.fire({\n position: 'center',\n icon: 'success',\n title: 'Your personal info has been updated.',\n html: `${\n values.email !== account.email\n ? 'Changing your email requires you to reset Multi-Factor Authentication. It has been disabled on your account and you will need to re-enable it to use it when you login.'\n : ''\n }`,\n showConfirmButton: true\n });\n })\n .catch(() => {\n swalPopUp.fire({\n position: 'center',\n icon: 'error',\n title: 'There was an error updating your personal info',\n showConfirmButton: false,\n timer: 1500\n });\n })\n .finally(() => {\n accountsApi.getShow().then((response) => {\n setAccount(response.data);\n });\n setSubmitting(false);\n if (values.email !== account.email && user.mfa_active) {\n usersApi\n .disableMFA()\n .then(() => {\n setUser({\n ...user,\n mfa_active: false\n });\n })\n .catch(() => {\n swalPopUp.fire({\n position: 'center',\n icon: 'error',\n title: 'There was an error disabling MFA.',\n showConfirmButton: false,\n timer: 1500\n });\n });\n }\n });\n };\n\n const formValues = {\n first_name: account.first_name,\n last_name: account.last_name,\n primary_phone: account.primary_phone,\n address_attributes: {\n address_1: account.address.address_1,\n address_2: account.address.address_2,\n city: account.address.city,\n postal_code: account.address.postal_code,\n state: account.address.state\n },\n shipping_address_different:\n account.shipping_address.hasOwnProperty('address_1') &&\n !!account.shipping_address.address_1.length,\n shipping_address_attributes: {\n address_1: account.shipping_address.address_1,\n address_2: account.shipping_address.address_2,\n city: account.shipping_address.city,\n postal_code: account.shipping_address.postal_code,\n state: account.shipping_address.state\n },\n email: account.email\n };\n\n return (\n \n
\n \n
\n YourSuccess Card
\n\n {hasRequestedNewCard ? (\n \n Request New Card\n \n )}\n
\n \n
\n ) : (\n \n
\n \n \n
\n \n
\n \n Card is cancelled and a replacement has been ordered\n
\n\n {account.show_virtual_card && cardImgUrl && (\n
\n \n
\n \n
\n \n \n Active\n
\n \n {account.first_name} {account.last_name}\n
\n \n \n \n setHideAccNumber(!hideAccNumber)}\n className=\"w-14 inline-flex text-center px-2.5 py-1.5 text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200 ml-4\">\n {hideAccNumber ? 'Show' : 'Hide'}\n \n
\n \n Routing Number: {ROUTING_NUMBER}\n
\n \n {pinPreviouslySet && ( onResetPinClick()} loading={loading} />)}\n {frozenCard ? (\n
\n \n
\n );\n};\n\nexport default PersonalInformationForm;\n","import React from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { SignOut } from '../../helpers/SignOut';\n\nconst SignOutButton = ({ isFunding = false }) => {\n const navigate = useNavigate();\n\n const returnDashboard = () => {\n navigate('/dashboard');\n };\n\n return (\n <>\n \n {isFunding && (\n \n \n {({ errors, values, handleChange, setFieldValue, isSubmitting }) => (\n \n )}\n \n
\n Personal information
\n\n \n Take Me to My Dashboard\n
\n \n )}\n \n );\n};\n\nexport default SignOutButton;\n","import SignOutButton from './SignOutButton';\n\nexport default SignOutButton;\n","import React from 'react';\nimport { Field, ErrorMessage } from 'formik';\nimport { masks, getClass } from '@helpers/formik';\n\nconst SocialSecurityNumberInput = ({ name, type, icon = null, errors, value = '' }) => {\n const classInput = `border px-5 py-3 border-solid border-whiteGray bg-whiteLighter rounded-md block w-full mt-0 appearance-none focus:outline-none focus:ring-0 focus:border-black placeholder-darkGray ${getClass(\n errors,\n name\n )}`;\n return (\n \n
\n );\n};\n\nexport default SocialSecurityNumberInput;\n","import SocialSecurityNumberInput from './SocialSecurityNumberInput';\n\nexport default SocialSecurityNumberInput;\n","import React from 'react';\nimport DataTable from 'react-data-table-component';\n\nconst StatementTable = ({ statements, openStatement }) => {\n const columns = [\n {\n id: 'name',\n title: 'Name',\n name: 'Name',\n className: 'name',\n align: 'center',\n sortable: true,\n cell: (record) => {\n return (\n \n \n {masks.numeric({\n name,\n mask: '999-99-9999',\n placeholder: 'Social Security Number',\n classes: classInput\n })}\n \n {icon && (\n \n \n \n )}\n {type !== 'date' && (\n \n Social Security Number\n \n )}\n
\n \n {statements.length > 0 && (\n
\n );\n};\n\nexport default StatementTable;\n","import StatementTable from './StatementTable';\n\nexport default StatementTable;\n","import React from 'react';\n\nconst SubmitButton = ({ value, disabled = false }) => {\n return (\n \n \n
\n );\n};\n\nexport default Tooltip;\n","import Tooltip from './Tooltip';\n\nexport default Tooltip;\n","import React from 'react';\nimport EquationComponent from './EquationComponent';\nimport BreadCrumbComponent from '../Shared/BreadCrumbComponent';\nimport { MonthSelector } from '../Shared/MonthSelector';\n\nconst Dashboard = () => {\n return (\n <>\n {description}
\n \n Track Your Success\n
\n\n \n \n Remaining\n \n \n {formatNumber(expenseGoal.toFixed(2))}\n \n \n of {formatNumber(totalIncomeGoalsForMonth.toFixed(2))}\n \n \n
\n \n \n
\n
\n \n )}\n \n );\n};\n\nexport default EquationComponent;\n","import React, { useContext, useMemo } from 'react';\nimport Card from '../Shared/Card';\nimport { TrackSuccessContext } from '@contexts';\nimport { INCOME_TYPE } from '@utilities/constants';\nimport { PieChart, pieArcLabelClasses } from '@mui/x-charts/PieChart';\nimport { numericFormatter } from 'react-number-format';\n\nconst data = [];\n\nconst size = {\n height: 400\n};\n\nconst formatNumber = (value) => {\n return numericFormatter(value + '', {\n prefix: '$',\n decimalScale: 2,\n fixedDecimalScale: true,\n allowNegative: false,\n isNumericString: true,\n thousandSeparator: ','\n });\n};\n\nconst ExpectedIncomeByCategory = () => {\n const { incomeGoals } = useContext(TrackSuccessContext);\n\n const dataChart = useMemo(() => {\n incomeGoals?.map((item) => {\n data.push({\n label: INCOME_TYPE.find((cat) => cat.value === item.category).label,\n value: Number(item.amount)\n });\n });\n return data;\n }, [incomeGoals]);\n\n return (\n \n {data && (\n `${formatNumber(item.value)}`,\n arcLabelMinAngle: 45,\n data: dataChart,\n highlightScope: { faded: 'global', highlighted: 'item' },\n faded: { innerRadius: 30, additionalRadius: -30, color: 'gray' }\n }\n ]}\n sx={{\n [`& .${pieArcLabelClasses.root}`]: {\n fill: 'white',\n fontWeight: 'bold'\n }\n }}\n slotProps={{\n legend: {\n position: {\n horizontal: 'middle',\n vertical: 'bottom'\n },\n direction: 'row'\n }\n }}\n margin={{ bottom: 80 }}\n {...size}\n />\n )}\n
\n \n Expense Goals\n
\n\n handleOpen()}>\n + Add External Transaction\n \n hanldeBack()}>\n Back\n \n
\n \n {selected.length > 0\n ? 'Update Expense Transaction'\n : 'Additional Expense Transaction'}\n
\n\n Expenses\n
\n\n Expenses\n
\n\n handleOpen()}>\n + Add additional expense goal\n \n
\n \n Additional Expense Transaction
\n\n
\n )}\n \n
\n );\n};\n\nexport default GetStarted;\n","import React, { useContext } from 'react';\nimport { Box, Paper } from '@mui/material';\nimport { TrackSuccessContext } from '@contexts';\nimport { MonthSelector } from '../Shared/MonthSelector';\nimport BreadCrumbComponent from '../Shared/BreadCrumbComponent';\nimport IncomeGoalsComponent from '../GetStartedSteps/IncomeGoalsComponent';\n\nconst IncomeGoals = () => {\n const { incomeGoals, setIncomeGoals, trusteePayment, month } = useContext(TrackSuccessContext);\n return (\n \n
\n \n Success Tracker\n
\n\n Income Goals\n
\n\n {daysUntilNextMonth > 15 ? (\n {currentMonthsName}'s Expense Tracker\n ) : (\n \n Set {nextMonthName}'s Goals\n \n )}\n
\n );\n};\n\nexport default SetNextMonthsGoalsButton;\n","import React, { useEffect, useState } from 'react';\nimport { TrackSuccessContext } from '@contexts';\nimport { paymentTracking, getTotalExpenseGoal } from '@helpers/api/tracker';\nimport TrackSuccessRoutes from '../TrackSuccessRoutes';\nimport { DateTime } from 'luxon';\n\nconst TrackSuccess = () => {\n const [incomeGoals, setIncomeGoals] = useState([]);\n const [expenseGoals, setExpenseGoals] = useState([]);\n const [expenseItems, setExpenseItems] = useState([]);\n const [trusteePayment, setTrusteePayment] = useState({});\n const [expenseGoal, setExpenseGoal] = useState(0);\n const [months, setMonths] = useState([]);\n const [month, setMonth] = useState();\n const [reloadPaymentTracking, setReloadPaymentTracking] = useState(false);\n\n const fetchData = async () => {\n const paymentTrackingData = await paymentTracking({\n params: {\n month: month\n }\n });\n setIncomeGoals(paymentTrackingData.data.income_goals);\n setExpenseGoals(paymentTrackingData.data.expense_goals);\n setExpenseItems(paymentTrackingData.data.expense_items);\n setTrusteePayment(paymentTrackingData.data.trustee_payment);\n setExpenseGoal(paymentTrackingData.data.expense_goal);\n setMonths(paymentTrackingData.data.months_in_payment_tracking);\n };\n\n const fetchTotalExpenseGoal = async () => {\n const totalExpenseGoal = await getTotalExpenseGoal();\n setExpenseGoal(totalExpenseGoal.data.expense_goal);\n };\n\n useEffect(() => {\n fetchData();\n }, []);\n\n useEffect(() => {\n if (month) {\n const monthJS = DateTime.fromISO(month).startOf('month');\n if(monthJS === DateTime.now().startOf('month')) {\n setMonth(null);\n }\n fetchData();\n }\n }, [month]);\n\n useEffect(() => {\n if (reloadPaymentTracking) {\n fetchData();\n setReloadPaymentTracking(false);\n }\n }, [reloadPaymentTracking]);\n\n useEffect(() => {\n fetchTotalExpenseGoal();\n }, [expenseItems]);\n\n return (\n \n
\n \n );\n};\n\nexport default TrackSuccess;\n","import React, { useContext, useState } from 'react';\nimport { Alert, Box, Button, Paper, Typography } from '@mui/material';\nimport CheckIcon from '@mui/icons-material/Check';\nimport { Form, Formik } from 'formik';\nimport * as Yup from 'yup';\nimport CurrencyFormat from 'react-currency-format';\nimport { TrackerAvatarImg } from '@constants/images';\nimport { TrackSuccessContext } from '@contexts';\nimport BreadCrumbComponent from '../Shared/BreadCrumbComponent';\nimport CustomInput from '../Inputs/CustomInput';\nimport { postCreateUpdateExpenseGoals } from '@helpers/api/tracker';\nimport { DateTime } from 'luxon';\nimport { MonthSelector } from '../Shared/MonthSelector';\n\nconst TrusteePayment = () => {\n const { trusteePayment, setExpenseGoals, setTrusteePayment, expenseGoals, incomeGoals, month } =\n useContext(TrackSuccessContext);\n\n const monthSelected = month\n ? DateTime.fromISO(month).toJSDate()\n : DateTime.now().startOf('month').toJSDate();\n\n const [alert, setAlert] = useState(false);\n const [valueEnough, setValueEnough] = useState(0);\n const [formAlert, setFormAlert] = useState(false);\n const [alertText, setAlertText] = useState({\n severity: 'success',\n msg: 'Trustee payment successfully updated.'\n });\n\n const validationSchema = Yup.object({\n amount: Yup.string()\n .test(\n 'maxDigitsAfterDecimal',\n 'Must be a valid number with a maximum of 2 decimals.',\n (number) => /^\\d+(\\.\\d{1,2})?$/.test(number)\n )\n .required('This field is required')\n });\n\n const getIncome = () => {\n return incomeGoals.reduce((acc, cur) => Number(acc) + Number(cur.amount), 0);\n };\n\n const handleFormAlert = (show) => {\n setFormAlert(show);\n setTimeout(() => {\n setFormAlert(false);\n }, 3000);\n };\n\n const handleEnoughIncome = (values) => {\n const updatedExpenses = [...expenseGoals, values];\n const totalExpenses = updatedExpenses.reduce((acc, cur) => Number(acc) + Number(cur.amount), 0);\n const totalIncomes = incomeGoals.reduce((acc, cur) => Number(acc) + Number(cur.amount), 0);\n setValueEnough(totalExpenses - totalIncomes);\n setAlert(totalExpenses > totalIncomes);\n return totalExpenses > totalIncomes;\n };\n\n const handleSubmit = async (values) => {\n if (handleEnoughIncome(values)) {\n return false;\n }\n try {\n const response = await postCreateUpdateExpenseGoals({\n data: {\n month: monthSelected,\n expense_goal: {\n items: [values]\n }\n }\n });\n\n if (response.status === 200) {\n setExpenseGoals(response.data.expense_goals);\n setTrusteePayment(response.data.trustee_payment);\n handleFormAlert(true);\n }\n } catch (error) {\n setAlertText({\n severity: 'error',\n msg: 'Error processing trustee payment. Please try again.'\n });\n handleFormAlert(true);\n }\n };\n\n return (\n \n
\n \n Trustee Payment\n
\n\n \n Dollar Bill: “We want to make sure you never miss a trustee payment. How much is you\n month trustee plan payment?\n \n \n If you do not know the amount you can find this information on your chapter 13 plan or\n by calling your attorney’s office.\n \n \n The plan payment is the most critical aspect of the chapter 13 process so be sure you\n use www.tfsbillpay.com to create a payment schedule.”\n \n
\n \n
\n )}\n \n You have entered too many expenses for the month to be able to make your trustee\n payment. Please review your expenses and adjust where necessary to be able to cover\n your trustee payment for the month.\n
\n\n Income:{' '}\n
\n Excess in expenses:{' '}\n
\n \n Update Your Trustee Payment Amount\n \n {formAlert && (\n \n {({ isSubmitting }) => (\n \n )}\n \n
\n \n
\n );\n};\n\nexport default EditExpenses;\n","import React from 'react';\nimport { Typography, Box, Paper } from '@mui/material';\nimport * as Yup from 'yup';\nimport { DateTime } from 'luxon';\nimport Swal from 'sweetalert2';\nimport { TrackerAvatarImg } from '@constants/images';\nimport { postExpenseItem } from '@helpers/api/tracker';\nimport BudgetingBuddyComponent from '../../shared/BudgetingBuddy';\nimport ExpenseItemsForm from '../Shared/ExpenseItemsForm';\n\nconst ExternalExpenses = ({ setExpenseItems, month }) => {\n const buddyCopy = \"Dollar Bill: 'It's great to keep all of your payments in one place but we understand you may have spending you want to track outside of the YourSuccess Bank Account. You can add those transactions here and we will keep track of them for you!'\";\n const validationSchema = Yup.object({\n amount: Yup.string()\n .test(\n 'maxDigitsAfterDecimal',\n 'The trust payment must be a valid number with a maximum of 2 decimal.',\n (number) => /^\\d+(\\.\\d{1,2})?$/.test(number)\n )\n .required('This field is required'),\n day: Yup.string().required('This field is required'),\n description: Yup.string().nullable(),\n category: Yup.string().required('This field is required')\n });\n\n const formValues = {\n amount: '',\n day: '',\n external: true,\n description: '',\n category: ''\n };\n\n const handleFormAlert = (success) => {\n const successMessage = 'Your operation was completed successfully.';\n const errorMessage = 'Something went wrong. Please try again.';\n Swal.fire({\n title: success ? 'Success!' : 'Error!',\n text: success ? successMessage : errorMessage,\n icon: success ? 'success' : 'error',\n showConfirmButton: false,\n timer: 3000,\n timerProgressBar: true\n });\n };\n\n const handleFormSubmit = async (values, { resetForm }) => {\n try {\n const result = await postExpenseItem({\n data: {\n month: month ? DateTime.fromISO(month).toJSDate() : null,\n expense_item: {\n amount: values.amount,\n category: values.category,\n effective_date: values.day,\n external: values.external,\n description: values.description\n }\n }\n });\n setExpenseItems(result.data);\n handleFormAlert(true);\n resetForm();\n } catch (error) {\n handleFormAlert(false);\n }\n };\n\n const actionButtons = () => {\n return (\n <>\n \n
\n \n Payment Tracking\n
\n{headerText}
\n {alert && (\n\n
\n )}\n \n You have entered too many expenses for the month to be able to make your trustee\n payment. Please review your expenses and adjust where necessary to be able to cover your\n trustee payment for the month.\n
\n\n Income:{' '}\n
\n Excess in expenses:{' '}\n
\n
\n are goals. Dollar Bill will warn you if you plan on spending too much.\n
\n
\n \n {({ values, setValues, isSubmitting }) => (\n
\n ));\n }}\n \n \n \n Continue\n \n\n \n
\n \n )}\n \n \n \n );\n};\n\nexport default ExpenseGoalsComponent;\n","import React, { useState, useEffect } from 'react';\nimport { DeleteForever, Info } from '@mui/icons-material';\nimport { Form, Formik, FieldArray } from 'formik';\nimport * as Yup from 'yup';\nimport CustomInput from '../Inputs/CustomInput';\nimport CustomSelect from '../Inputs/CustomSelect';\nimport { Button, Typography } from '@mui/material';\nimport { INCOME_TYPE, INCOME_GOALS_INITIAL_VALUES } from '../../../utilities/constants';\nimport {\n postCreateUpdateIncomeGoals,\n deleteIncomeGoal,\n} from '@helpers/api/tracker';\nimport CurrencyFormat from 'react-currency-format';\nimport { DateTime } from 'luxon';\nimport Swal from 'sweetalert2';\nimport BudgetingBuddyComponent from '../../shared/BudgetingBuddy';\n\nconst validationSchema = Yup.object({\n income_goals: Yup.array().of(\n Yup.object().shape({\n amount: Yup.string()\n .test(\n 'maxDigitsAfterDecimal',\n 'Monthly amount must be a valid number with a maximum of 2 decimal.',\n (number) => /^\\d+(\\.\\d{1,2})?$/.test(number)\n )\n .required('This field is required'),\n category: Yup.string().required('This field is required')\n })\n )\n});\n\nconst IncomeGoalsBase = ({\n handleNext = null,\n incomeGoals,\n handleBack = null,\n setIncomeGoals,\n headingText,\n trusteePayment,\n date = null\n}) => {\n const [alert, setAlert] = useState(false);\n const [valueEnough, setValueEnough] = useState(0);\n const [incomeGoalsList, setIncomeGoalsList] = useState({\n income_goals: INCOME_GOALS_INITIAL_VALUES\n });\n\n useEffect(() => {\n if (incomeGoals.length > 0) {\n setIncomeGoalsList({ income_goals: incomeGoals });\n } else {\n setIncomeGoalsList({ income_goals: INCOME_GOALS_INITIAL_VALUES });\n }\n }, [incomeGoals]);\n\n const removeFromList = async (i, values, setValues) => {\n const income_goals_data = [...values.income_goals];\n let result;\n if (income_goals_data[i].id) {\n result = await deleteIncomeGoal(income_goals_data[i].id)({ params: { month: date }}).catch((e) =>\n console.error(e)\n );\n setIncomeGoals(result.data.income_goals);\n }\n income_goals_data.splice(i, 1);\n handleEnoughIncome({ income_goals: income_goals_data });\n setValues({\n income_goals: income_goals_data\n });\n };\n\n const updateForm = (values, setValues) => {\n const income_goals = [...values.income_goals];\n income_goals.push({\n amount: '',\n category: '',\n effective_date: date\n });\n setValues({ income_goals });\n };\n\n const handleSubmit = async (values) => {\n if (handleEnoughIncome(values)) {\n return false;\n }\n if (values.income_goals?.length > 0) {\n try {\n const response = await postCreateUpdateIncomeGoals({\n data: {\n month: date,\n income_goal: {\n items: values.income_goals\n }\n }\n });\n if (response.status === 200) {\n setIncomeGoals(response.data.income_goals);\n setIncomeGoalsList({ income_goals: response.data.income_goals });\n !handleNext && Swal.fire({\n title: 'Success!',\n text: 'Your income goals have been updated.',\n icon: 'success'\n });\n handleNext && handleNext();\n }\n } catch (error) {\n console.error(error.message);\n }\n } else {\n handleNext && handleNext();\n }\n };\n\n const handleEnoughIncome = (values) => {\n const incomeAmount =\n values.income_goals?.reduce((acc, cur) => Number(acc) + Number(cur.amount), 0) || 0;\n\n setValueEnough(Number(trusteePayment.amount) - incomeAmount);\n setAlert(Number(trusteePayment.amount) > incomeAmount);\n return Number(trusteePayment.amount) > incomeAmount;\n };\n\n return (\n <>\n \n
\n )}\n \n You have not entered enough income to cover your monthly trustee payment. Please verify\n your income and trustee payment amounts.\n
\n\n Remaining amount to cover:{' '}\n
\n
\n \n {({ values, setValues, isSubmitting }) => (\n
\n ))\n }\n \n \n \n {handleNext ? 'Continue' : 'Update'}\n \n\n {handleBack && (\n \n )}\n
\n \n )}\n \n \n \n );\n};\n\nexport default IncomeGoalsBase;\n","import React, { useContext } from 'react';\nimport { Info } from '@mui/icons-material';\nimport Button from '@mui/material/Button';\nimport { numericFormatter } from 'react-number-format';\nimport { postSuccessTrackerInfo, updateSuccessTrackerInfo } from '@helpers/api/tracker';\nimport { DateTime } from 'luxon';\nimport { TrackSuccessContext } from '@contexts';\nimport BudgetingBuddyComponent from '../../shared/BudgetingBuddy';\nimport CurrencyFormat from 'react-currency-format';\n\nconst ReviewComponent = ({\n expenseGoals,\n incomeGoals,\n trusteePayment,\n headingText,\n handleBack,\n setGetStarted,\n month = null\n}) => {\n const { setReloadPaymentTracking } = useContext(TrackSuccessContext);\n const formatNumber = (value) => {\n return numericFormatter(value + '', {\n prefix: '$',\n decimalScale: 2,\n fixedDecimalScale: true,\n isNumericString: true,\n thousandSeparator: ','\n });\n };\n const totalIncomeGoalsForMonth = incomeGoals.reduce(\n (acc, cur) => Number(acc) + Number(cur.amount),\n 0\n );\n const totalExpenseItemsForMonth = expenseGoals.reduce((acc, cur) => {\n if (cur.category !== 'trustee_payment') {\n return Number(acc) + Number(cur.amount);\n }\n return acc;\n }, 0);\n const totalExpenses = totalExpenseItemsForMonth + Number(trusteePayment.amount);\n const remainingBalance = totalIncomeGoalsForMonth - totalExpenses;\n\n const handleSubmit = async () => {\n try {\n let response;\n if (!month) {\n response = await postSuccessTrackerInfo({\n data: {\n success_tracker_info: {\n get_started_completed_at: new Date().toISOString(),\n budget_last_approved_at: new Date().toISOString()\n }\n }\n });\n } else {\n response = await updateSuccessTrackerInfo({\n data: {\n success_tracker_info: {\n budget_last_approved_at: DateTime.fromJSDate(month).toFormat('yyyy-LL-dd')\n }\n }\n });\n }\n if (response.status === 201 || response.status === 200) {\n setGetStarted(false);\n setReloadPaymentTracking(true);\n }\n } catch (error) {\n console.error(error.message);\n }\n };\n\n return (\n <>\n {headingText}
\n\n
\n \n
\n
\n \n \n \n \n Total Income\n \n
\n \n \n \n \n \n Trustee Payment\n \n \n
\n \n \n \n {' '}\n \n Expected Expenses\n \n \n
\n \n \n \n \n Remaining\n \n
\n \n \n \n
\n \n );\n};\n\nexport default ReviewComponent;\n","import React, { useState } from 'react';\nimport { Form, Formik } from 'formik';\nimport * as Yup from 'yup';\nimport Button from '@mui/material/Button';\nimport { Info } from '@mui/icons-material';\nimport CustomInput from '../Inputs/CustomInput';\nimport { postCreateUpdateExpenseGoals } from '../../../helpers/api/tracker';\nimport { DateTime } from 'luxon';\nimport BudgetingBuddyComponent from '../../shared/BudgetingBuddy';\n\nconst validationSchema = Yup.object({\n amount: Yup.string()\n .test(\n 'maxDigitsAfterDecimal',\n 'Must be a valid number with a maximum of 2 decimals.',\n (number) => /^\\d+(\\.\\d{1,2})?$/.test(number)\n )\n .required('This field is required')\n});\n\nconst TrusteePaymentComponent = ({\n handleNext,\n handleBack,\n trusteePayment,\n setTrusteePayment,\n date = new Date()\n}) => {\n\n const [trusteePaymentState, setTrusteePaymentState] = useState(trusteePayment || {\n amount: '',\n category: 'trustee_payment',\n fixed: true\n });\n\n const handleSubmit = async (values) => {\n try {\n const response = await postCreateUpdateExpenseGoals({\n data: {\n month: date || DateTime.now().startOf('month').toJSDate(),\n expense_goal: {\n items: [values]\n }\n }\n });\n\n if (response.status === 200) {\n setTrusteePayment(response.data.trustee_payment);\n setTrusteePaymentState(response.data.trustee_payment);\n handleNext();\n }\n } catch (error) {\n console.error(error);\n }\n };\n\n return (\n <>\n \n Get started by entering your current monthly trustee payment\n
\n\n
\n on your chapter 13 plan or by calling your attorney’s office.\n
\n
\n process so be sure you use www.tfsbillpay.com to create a payment
\n schedule.\n
\n
\n \n );\n};\n\nexport default CustomInput;\n","import React from 'react';\nimport { ErrorMessage, useField, useFormikContext } from 'formik';\nimport { getClass } from '@helpers/formik';\n\nconst CustomSelect = ({ label, ...props }, ref) => {\n const [field] = useField(props);\n const { errors } = useFormikContext();\n\n return (\n \n \n {props.placeholder}\n \n
\n \n
\n );\n};\n\nexport default CustomSelect;\n","import React, { useState, useEffect } from 'react';\nimport { getSuccessTrackerInfo } from '@helpers/api/tracker';\nimport TrackSuccess from './Cards/TrackSuccess';\nimport { useNavigate } from 'react-router-dom';\nimport { DateTime } from 'luxon';\n\nconst PaymentTracking = () => {\n const navigate = useNavigate();\n const [successTrackerInfo, setSuccessTrackerInfo] = useState();\n const fetchSuccessTrackerInfo = async () => {\n try {\n const successTrackerInfoResponse = await getSuccessTrackerInfo();\n const response = successTrackerInfoResponse.data;\n setSuccessTrackerInfo(response);\n } catch (error) {\n console.error(error);\n }\n };\n\n useEffect(() => {\n fetchSuccessTrackerInfo().catch(console.error);\n }, []);\n\n useEffect(() => {\n if (successTrackerInfo?.status === 'not_started') {\n navigate('/dashboard/tracker/get-started');\n }\n if (successTrackerInfo?.status === 'needs_approval') {\n navigate('/dashboard/tracker/monthly-goals', {\n state: {\n month: DateTime.now().startOf('month').toJSDate()\n }\n });\n }\n }, [successTrackerInfo]);\n\n return (\n \n
\n \n \n \n {props.options.map((option) => (\n \n ))}\n \n
\n \n
\n );\n};\n\nexport default PaymentTracking;\n","import React from 'react';\nimport { NavLink, useParams } from 'react-router-dom';\nimport useBreadcrumbs from 'use-react-router-breadcrumbs';\nimport { routerTracker } from '../types/breadcrumbs';\nimport { EXPENSE_TYPE } from '@utilities/constants';\n\nconst BreadCrumbComponent = () => {\n const breadcrumbs = useBreadcrumbs(routerTracker);\n const params = useParams();\n\n return (\n \n \n \n Expense Overview\n
\n \n {params.category && (\n \n \n \n Tracker Dashboard\n
\n \n {children}
\n \n {children}\n \n Select Month to Track \n \n {months?.map((month, index) => (\n \n ))}\n \n \n
\n );\n};\n","import React, { useEffect, useState } from 'react';\nimport { useLocation, useNavigate } from 'react-router-dom';\nimport { paymentTracking } from '@helpers/api/tracker';\nimport WelcomeComponent from '../GetStartedSteps/WelcomeComponent';\nimport TrusteePaymentComponent from '../GetStartedSteps/TrusteePaymentComponent';\nimport IncomeGoalsComponent from '../GetStartedSteps/IncomeGoalsComponent';\nimport ExpenseGoalsComponent from '../GetStartedSteps/ExpenseGoalsComponent';\nimport ReviewComponent from '../GetStartedSteps/ReviewComponent';\nimport ProgressBar from '../../ProgressBar/ProgressBar';\nimport steps from '@constants/trackerApplication';\n\nconst MonthlyGoalSettingFlow = () => {\n const location = useLocation();\n const navigation = useNavigate();\n const month = location.state?.month;\n\n if (!location.state?.month) {\n navigation('/dashboard/tracker/track-success');\n }\n\n const [currentStep, setCurrentStep] = useState('Welcome');\n const [activeStep, setActiveStep] = useState(1);\n const [expenseGoals, setExpenseGoals] = useState([]);\n const [incomeGoals, setIncomeGoals] = useState([]);\n const [trusteePayment, setTrusteePayment] = useState({});\n const [getStarted, setGetStarted] = useState(true);\n\n const monthJsDate = month;\n\n const fetchDataMonthlyFlow = async () => {\n const result = await paymentTracking({\n params: {\n month: month,\n prefil: true\n }\n }).catch((err) => {\n console.error(err);\n });\n setIncomeGoals(result.data.income_goals);\n setTrusteePayment(result.data.trustee_payment);\n setExpenseGoals(result.data.expense_goals);\n };\n\n useEffect(() => {\n if (month) {\n fetchDataMonthlyFlow().catch((error) => {\n console.error(error);\n });\n }\n }, [month]);\n\n const handleNext = () => {\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n setCurrentStep(steps.find(({ id }) => id === activeStep + 1)?.step);\n };\n\n const handleBack = () => {\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\n setCurrentStep(steps.find(({ id }) => id === activeStep - 1)?.step);\n };\n useEffect(() => {\n if (!getStarted) {\n navigation('/dashboard/tracker/track-success');\n }\n }, [getStarted]);\n\n return (\n \n
\n );\n};\n\nexport default MonthlyGoalSettingFlow;\n","import React, { useState } from 'react';\nimport WelcomeComponent from '../GetStartedSteps/WelcomeComponent';\nimport TrusteePaymentComponent from '../GetStartedSteps/TrusteePaymentComponent';\nimport IncomeGoalsComponent from '../GetStartedSteps/IncomeGoalsComponent';\nimport ExpenseGoalsComponent from '../GetStartedSteps/ExpenseGoalsComponent';\nimport ReviewComponent from '../GetStartedSteps/ReviewComponent';\nimport ProgressBar from '../../ProgressBar/ProgressBar';\nimport steps from '@constants/trackerApplication';\n\nexport default function StepperGetStarted({\n expenseGoals,\n incomeGoals,\n setExpenseGoals,\n setIncomeGoals,\n trusteePayment,\n setTrusteePayment,\n setGetStarted\n}) {\n const [currentStep, setCurrentStep] = useState('Welcome');\n const [activeStep, setActiveStep] = useState(1);\n\n const handleNext = () => {\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n setCurrentStep(steps.find(({ id }) => id === activeStep + 1)?.step);\n };\n\n const handleBack = () => {\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\n setCurrentStep(steps.find(({ id }) => id === activeStep - 1)?.step);\n };\n\n return (\n \n
\n );\n}\n","import React, { useState, useMemo, useEffect, useContext } from 'react';\nimport { TableRow, TableCell, Typography, Modal, Box, Paper } from '@mui/material';\nimport Swal from 'sweetalert2';\nimport * as Yup from 'yup';\nimport { Form, Formik } from 'formik';\nimport { TrackSuccessContext } from '@contexts';\nimport { TableComponent, getComparator, stableSort } from '../Cards/GenerateTable';\nimport { DateTime } from 'luxon';\nimport { EXPENSE_TYPE } from '@utilities/constants';\nimport { Delete } from '@mui/icons-material';\nimport { useNavigate } from 'react-router-dom';\nimport CustomSelect from '../Inputs/CustomSelect';\nimport { postExpenseGoal } from '../../../helpers/api/tracker';\nimport CustomInput from '../Inputs/CustomInput';\n\nconst style = {\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: 500,\n bgcolor: 'background.paper',\n border: '2px solid #000',\n boxShadow: 24,\n p: 4\n};\n\nexport const validationSchema = Yup.object({\n amount: Yup.string()\n .test(\n 'maxDigitsAfterDecimal',\n 'The trust payment must be a valid number with a maximum of 2 decimal.',\n (number) => /^\\d+(\\.\\d{1,2})?$/.test(number)\n )\n .required('This field is required'),\n category: Yup.string().required('This field is required'),\n description: Yup.string().nullable()\n});\n\nconst TableExpenses = ({ rows, actions, headCells, title, deleteApi, back }) => {\n const { setExpenseGoals } = useContext(TrackSuccessContext);\n const navigate = useNavigate();\n\n const [order, setOrder] = useState('asc');\n const [orderBy, setOrderBy] = useState('');\n\n const [dateRange, setDateRange] = useState({ startDate: null, endDate: null });\n\n const isSelected = (id) => selected.indexOf(id) !== -1;\n\n const [page, setPage] = useState(0);\n const [rowsPerPage, setRowsPerPage] = useState(5);\n\n const minDate = DateTime.local().minus({ years: 7 });\n\n const [selected, setSelected] = useState([]);\n\n const [open, setOpen] = useState(false);\n\n const [formValues, setFormValues] = useState({\n amount: '',\n category: '',\n id: '',\n description: '',\n });\n\n const handleOpen = () => setOpen(true);\n const handleClose = () => setOpen(false);\n\n const visibleRows = useMemo(\n () =>\n stableSort(rows, getComparator(order, orderBy)).slice(\n page * rowsPerPage,\n page * rowsPerPage + rowsPerPage\n ),\n [order, orderBy, page, rowsPerPage, rows]\n );\n\n const tableComponentParams = {\n order,\n setOrder,\n orderBy,\n setOrderBy,\n page,\n setPage,\n rowsPerPage,\n setRowsPerPage,\n headCells,\n rows,\n setDateRange,\n minDate,\n dateRange,\n filter: false,\n title\n };\n\n const tableRowParams = {\n hover: true,\n role: 'checkbox',\n tabIndex: -1,\n sx: { cursor: 'pointer' }\n };\n\n const handleDelete = async (id) => {\n const resultSwal = await Swal.fire({\n title: 'Are you sure?',\n text: \"You won't be able to revert this!\",\n icon: 'warning',\n showCancelButton: true,\n confirmButtonColor: '#3085d6',\n cancelButtonColor: '#d33',\n confirmButtonText: 'Yes, delete it!'\n });\n if (resultSwal.isConfirmed) {\n const result = await deleteApi(id)();\n if (result.status === 200) {\n Swal.fire({\n title: 'Deleted!',\n text: 'Your expense goal has been deleted.',\n icon: 'success'\n });\n setExpenseGoals(result.data.expense_goals);\n }\n }\n setSelected([]);\n };\n\n const handleSpendingBreakDown = (category) => {\n navigate(`/dashboard/tracker/expense-item-by-category/${category}`);\n };\n\n const hanldeBack = () => {\n navigate(-1);\n };\n\n const handleFormSubmit = async (values, actions) => {\n const result = await postExpenseGoal({\n data: {\n month: DateTime.now().startOf('month').toJSDate(),\n expense_goal: {\n amount: values.amount,\n category: values.category,\n description: values.description,\n }\n }\n }).catch((error) => {\n return;\n });\n setExpenseGoals(result.data.expense_goals);\n actions.resetForm();\n resetForm();\n handleClose();\n };\n\n const resetForm = () => {\n setSelected([]);\n setFormValues({\n amount: '',\n category: '',\n id: '',\n description: '',\n });\n handleClose();\n };\n\n return (\n <>\n {rows && (\n \n handleOpen()}>\n + Add additional expense goal\n \n {back && (\n hanldeBack()}>\n Back\n \n )}\n
\n\n \n {selected.length > 0 ? 'Update Expense Transaction' : 'Additional Expense Transaction'}\n
\n\n \n \n
\n \n
\n \n
\n \n {formatDate(timestamp)}\n
\n \n {details}\n
\n \n
\n \n {type === ACH_TRANSACTION && }\n {type === AUTHORIZED && }\n {type === POSTED && }\n
\n \n {type === ACH_TRANSACTION && (\n
\n \n );\n};\n\nexport default Transaction;\n","// This file is not being used until we have the data to populate these fields\n\nimport React from 'react';\n\nconst TransactionDropdown = ({ timestamp, formatDate, amount }) => {\n return (\n \n \n ACH TRANSACTION\n
\n )}\n {type === AUTHORIZED && (\n \n \n AUTHORIZED\n
\n )}\n {type === POSTED && (\n \n \n POSTED\n
\n )}\n \n
\n );\n};\n\nexport default TransactionDropdown;\n","import React from 'react';\nimport { AUTHORIZED, POSTED, ACH_TRANSACTION } from '@utilities/constants';\nimport Transaction from './Transaction';\nimport DateRangeFilterPopover from '../DateRangeFilterPopover/DateRangeFilterPopover';\n\nconst TransactionsTable = (props) => {\n const {\n authorizedTransactions,\n settledTransactions,\n pendingAchTransactions,\n incrementPage,\n lastPage,\n selection,\n setSelection,\n clearFilter,\n applyFilter\n } = props;\n\n return (\n <>\n {pendingAchTransactions.length > 0 && \n \n
\n \n \n Merchant name\n
\n \n \n Category\n
\n \n
\n \n \n ATM Withdrawal\n
\n \n
\n \n \n
\n\n \n \n \n {formatDate(timestamp)}\n \n
\n \n
}\n \n Pending Transfers
\n {pendingAchTransactions.map((pendingAchTransaction, index) => (\n\n
\n Posted Transactions
\n\n
\n {settledTransactions.length > 0 &&\n settledTransactions.map((settledTransaction, index) => (\n \n {!lastPage && (\n incrementPage()}>\n Load More...\n \n )}\n
\n \n );\n};\n\nexport default TransactionsTable;\n","import TransactionsTable from './TransactionsTable';\n\nexport default TransactionsTable;\n","import React, { useState } from 'react';\nimport { Field, ErrorMessage } from 'formik';\n\nimport { getClass } from '@helpers/formik';\n\nconst ValidatedInput = ({\n id,\n name,\n placeholder,\n type,\n icon = null,\n errors,\n value = '',\n onChange = () => {\n // empty funciton\n },\n onKeyUp = () => {\n // empty function\n },\n disabled = false,\n withFormik = true,\n classes = '',\n}) => {\n const valueUse = value === null ? '' : value;\n const [inputText, setInputText] = useState(value === null ? '' : value);\n\n const handleChange = (val) => {\n setInputText(val.target.value);\n onChange(val);\n };\n\n return (\n \n
\n );\n};\n\nexport default ValidatedInput;\n","import ValidatedInput from './ValidatedInput';\n\nexport default ValidatedInput;\n","const replacementReasons = {\n lost: 'lost',\n damaged: 'damaged',\n stolen: 'stolen'\n};\n\nexport default replacementReasons;\n","import React from 'react';\nimport { cards as cardsApi, accounts as accountsApi } from '@helpers/api';\nimport replacementReasons from '@constants/card';\nimport Swal from 'sweetalert2';\nimport withReactContent from 'sweetalert2-react-content';\nimport FormTitle from '@components/FormTitle';\nimport { YourSuccessLogoImg, FundingBackgroundImg } from '@constants/images';\n\nconst styles = {\n backgroundImage: `url(${FundingBackgroundImg})`\n};\n\nconst VerifyTransactionForm = ({ eventAuthDenial, setVerificationResponse, setLoading }) => {\n const swalPopUp = withReactContent(Swal);\n const frozen = eventAuthDenial?.fraud_result === 'FREEZE';\n\n const fireSwalErrorPopup = () => {\n swalPopUp.fire({\n position: 'center',\n icon: 'error',\n title: 'An error occurred, please try again.',\n showConfirmButton: true\n });\n };\n\n const unfreezeCard = async () => {\n await cardsApi.unfreeze();\n };\n\n const disableFraudRule = async () => {\n await accountsApi.disableFraudRule();\n };\n\n const disableRuleAndUnfreeze = async () => {\n await disableFraudRule().then(async () => {\n if (frozen) {\n await unfreezeCard();\n }\n });\n };\n\n const confirmTransaction = () => {\n setLoading(true);\n disableRuleAndUnfreeze()\n .then(() => {\n setVerificationResponse('confirmed');\n })\n .catch(() => {\n fireSwalErrorPopup();\n })\n .finally(() => setLoading(false));\n };\n\n const denyTransaction = () => {\n setLoading(true);\n cardsApi\n .requestReplacement({ reason: replacementReasons.stolen })\n .then(() => {\n setVerificationResponse('denied');\n })\n .catch(() => {\n fireSwalErrorPopup();\n })\n .finally(() => setLoading(false));\n };\n\n return (\n \n {withFormik && (\n \n {({ field }) => (\n handleChange(val)}\n onKeyUp={(val) => onKeyUp(val)}\n disabled={disabled}\n />\n )}\n \n ) : (\n onChange(e.target.value)}\n onKeyUp={() => onKeyUp()}\n placeholder={placeholder}\n className=\"border px-5 py-3 border-solid border-whiteGray bg-whiteLighter rounded-md block w-full mt-0 focus:outline-none focus:ring-0 focus:border-black placeholder-darkGray\"\n required\n disabled={disabled}\n />\n )}\n {icon && (\n \n \n \n )}\n\n {type !== 'date' && (\n \n {placeholder}\n \n )}\n\n {withFormik && (\n
\n \n 
\n Did you authorize this transaction? \n
\n \n );\n};\n\nexport default VerifyTransactionForm;\n","import VerifyTransactionForm from './VerifyTransactionForm';\n\nexport default VerifyTransactionForm;\n","import React from 'react';\nimport { Box } from '@mui/material';\nimport { TrackerAvatarImg } from '@constants/images';\nimport VideoModal from './VideoModal';\n\nconst BudgetingBuddyComponent = ({ copy = 'Stuck on a step?', videoId = null, imageWidth = 125 }) => {\n return (\n \n
\n - \n
- \n Merchant Name: {eventAuthDenial.merchant_name}\n \n
- \n Amount: {eventAuthDenial.amount}\n \n
- \n Timestamp: {eventAuthDenial.timestamp}\n \n
\n confirmTransaction()}>\n Yes\n \n denyTransaction()}>\n No\n \n
\n\n {frozen && (\n \n Your card is frozen right\n now...\n
\n )}\n\n
\n \n );\n};\n\nexport default ModalComponent;\n","import React from 'react';\nimport { SuccessTrackerImg } from '@constants/images';\nimport { useNavigate } from 'react-router-dom';\n\nconst ToolsBannerComponent = () => {\n const navigate = useNavigate();\n\n return (\n \n
\n {title}
\n \n \n x\n \n
\n {children}
\n {showFooter && (\n \n \n \n
\n )}\n \n
\n );\n};\n\nexport default ToolsBannerComponent;\n","import React, { useState } from 'react';\nimport { Box, Chip, Paper, Typography } from '@mui/material';\nimport { PlayArrow } from '@mui/icons-material';\nimport ModalVideo from 'react-modal-video';\n\nconst VideoModal = ({ copy, videoId = null }) => {\n const [isOpen, setOpen] = useState(false);\n\n return (\n <>\n \n
\n \n
\n \n Success Tracker |NEW|\n
\n\n navigate('/dashboard/tracker/track-success')}\n className=\"mobile:w-[300px] tablet:w-full desktop:w-[250px] bg-greyblue hover:bg-greyblueHover rounded-xl h-14 text-descriptionSlide text-white font-bold cursor-pointer\">\n Get Started\n \n
\n \n
\n - \n
- Set and track goals monthly \n
- Help guarantee you never miss a trustee payment \n
- Plan for a successful discharge \n
\n 
\n
\n \n 404: Page not found\n
\n );\n};\n\nexport default NotFound;\n","import React, { useContext, useEffect } from 'react';\nimport { Navigate, useLocation } from 'react-router-dom';\nimport { SessionContext } from '@contexts';\n\nconst PrivateRoute = ({ children }) => {\n const { user, setSessionLocation } = useContext(SessionContext);\n const { pathname, search } = useLocation();\n\n useEffect(() => {\n setSessionLocation(pathname + search);\n }, [pathname, search]);\n\n if (user) {\n if (user.has_approved_account_application) {\n if (user.has_closed_account && pathname !== '/closed' && pathname !== '/dashboard/funding') {\n return