\n {unit.location === 'before' && {unit.value}}\n setValue(e.target.value)}\n placeholder={placeholder}\n />\n {unit.location === 'after' && {unit.value}}\n
\n );\n };\n\n const displayValue = currentValue \n ? `${formatValue(currentValue.min)} - ${formatValue(currentValue.max)}`\n : name;\n\n return (\n \n \n \n {isOpen && (\n
\n );\n};\n\nconst EnumFilter = ({ name, values, currentValue=[], onChange, onRemove, filterKey }) => {\n const [isOpen, setIsOpen] = React.useState(false);\n const dropdownRef = React.useRef(null);\n const [localSelections, setLocalSelections] = React.useState(currentValue);\n\n React.useEffect(() => {\n const handleClickOutside = (event) => {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {\n setIsOpen(false);\n setLocalSelections(currentValue);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [currentValue]);\n\n const handleToggle = (val) => {\n setLocalSelections(prev => \n prev.includes(val) \n ? prev.filter(v => v !== val)\n : [...prev, val]\n );\n };\n\n const handleSave = () => {\n onChange(filterKey, localSelections);\n setIsOpen(false);\n };\n\n const handleClear = () => {\n setLocalSelections([]);\n onRemove(filterKey);\n setIsOpen(false);\n };\n\n const displayValue = currentValue.length > 0 ? `${name} (${currentValue.length})` : name;\n\n return (\n \n
\n )}\n \n \n {renderInput(\n localMin,\n setLocalMin,\n values?.min ? \n unit.value === 'DATE' ? \n new Date(values.min).toISOString().split('T')[0] : \n values.min.toLocaleString() \n : 'Min'\n )}\n
\n \n \n {renderInput(\n localMax,\n setLocalMax,\n values?.max ? \n unit.value === 'DATE' ? \n new Date(values.max).toISOString().split('T')[0] : \n values.max.toLocaleString() \n : 'Max'\n )}\n
\n \n \n \n
\n \n \n \n
\n );\n};\n\nconst TextFilter = ({ name, currentValue='', onChange, onRemove, filterKey }) => {\n const [localValue, setLocalValue] = React.useState(currentValue);\n const debounceTimeout = React.useRef(null);\n\n React.useEffect(() => {\n return () => {\n if (debounceTimeout.current) {\n clearTimeout(debounceTimeout.current);\n }\n };\n }, []);\n\n const handleInputChange = (value) => {\n setLocalValue(value);\n \n if (debounceTimeout.current) {\n clearTimeout(debounceTimeout.current);\n }\n\n debounceTimeout.current = setTimeout(() => {\n if (value === '') {\n onRemove(filterKey);\n } else {\n onChange(filterKey, value);\n }\n }, 250);\n };\n\n const handleClear = () => {\n setLocalValue('');\n onRemove(filterKey);\n };\n\n return (\n \n
\n \n
\n \n
\n - \n {values?.map((val) => (\n
- \n handleToggle(val)}\n role=\"button\"\n >\n\n\n\n {val}\n \n ))}\n
\n \n \n
\n \n handleInputChange(e.target.value)}\n placeholder={name}\n />\n {localValue && (\n \n ×\n \n )}\n
\n );\n};\n\n/**\n * \n * @param {*} filters: example: [{ name: 'State', key: 'state', type: 'enum', values: ['CA', 'NY', 'TX'] }]\n * @param {*} setFilter: setFilter(key, newValue)\n * @returns \n */\nconst Filters = ({ filters=[], filterValues={}, setFilter, removeFilter, clearAll }) => {\n const hasActiveFilters = Object.keys(filterValues).length > 0;\n\n return (\n <>\n \n {filters.map((filter) => {\n if (!filter.visible_in_ui) return null;\n switch (filter.type) {\n case 'enum':\n return (\n
\n {hasActiveFilters && (\n \n \n
\n )}\n \n );\n};\n\nexport default Filters;\n","import React from 'react';\n\nconst ArrowIcon = () => (\n \n);\n\nexport default ArrowIcon; ","import React from 'react';\n\nconst SparkleIcon = ({ width = 44, height = 44, style = {} }) => {\n // Create default styles that can be overridden\n const defaultStyle = {\n marginRight: '5px',\n marginBottom: '3px'\n };\n \n // Merge default styles with custom styles (custom styles take precedence)\n const mergedStyles = {...defaultStyle, ...style};\n \n return (\n \n );\n};\n\nexport default SparkleIcon; ","import React from 'react';\n\nconst CheckMarkIcon = () => (\n \n);\n\nexport default CheckMarkIcon; ","import React from 'react';\nimport { formatDollars } from '../../../other/money';\nimport ArrowIcon from '../../../components/shared/icons/ArrowIcon';\nimport SparkleIcon from '../../../components/shared/icons/SparkleIcon';\nimport CheckMarkIcon from '../../../components/shared/icons/CheckMarkIcon';\n\n// Safe wrapper around formatDollars that handles nullable values and various money object formats\nconst formatMoneyValue = (value) => {\n if (value === null || value === undefined) {\n return '$0.00';\n }\n \n // Handle string values (formatted currency like \"$3.90\")\n if (typeof value === 'string') {\n if (value.includes('$')) {\n return value;\n }\n // If it's a string with no dollar sign, try to format it\n return `$${parseFloat(value).toFixed(2)}`;\n }\n \n // Handle different money object formats\n if (typeof value === 'object') {\n // First priority: use formatted value if available\n if (value.formatted) return value.formatted;\n \n // Second priority: use dollars if available\n if (value.dollars !== undefined) return formatDollars(value.dollars * 100);\n \n // Third priority: use cents if available\n if (value.cents !== undefined) return formatDollars(value.cents);\n }\n \n // Default to $0.00 for any other case\n return '$0.00';\n};\n\n// Helper function to display money values\nconst displayValue = (value) => {formatMoneyValue(value)};\n\n// Check if any hardship data exists\nconst hasHardshipData = (info) => \n info.hardship_statement || \n (info.hardship && Object.values(info.hardship).some(value => value !== \"0\" && value));\n\n// Check if there is any cash flow data\nconst hasCashFlowData = (info) => {\n // First try to check if we have a string value (either legacy or detailed data)\n if (typeof info.monthly_income_total === 'string' || typeof info.monthly_expenses_total === 'string') {\n // Check if either income or expense is not $0.00\n return (info.monthly_income_total && info.monthly_income_total !== '$0.00') || \n (info.monthly_expenses_total && info.monthly_expenses_total !== '$0.00');\n }\n \n // Then check if we might have a money object (legacy data format)\n if (typeof info.monthly_income_total === 'object' || typeof info.monthly_expenses_total === 'object') {\n return (info.monthly_income_total?.cents > 0) || \n (info.monthly_expenses_total?.cents > 0);\n }\n \n // If we don't have either format, there's no cash flow data\n return false;\n};\n\n// Helper to render financial details section - only called when has_detailed_data is true\nconst renderFinancialDetails = (financialDetails) => {\n if (!financialDetails) {\n console.log(\"No financial details to render\");\n return null;\n }\n \n console.log(\"Rendering financial details:\", financialDetails);\n \n const incomeFields = [\n { key: 'net_employment_income', label: 'Employment income' },\n { key: 'unemployment_income', label: 'Unemployment income' },\n { key: 'retirement_income', label: 'Retirement income' },\n { key: 'other_income', label: 'Other income' }\n ];\n \n const expenseFields = [\n // Column 1\n { key: 'mortgage_payments', label: 'Mortgage payments' },\n { key: 'rent', label: 'Rent payments' },\n { key: 'auto_payments', label: 'Auto payments' },\n // Column 2\n { key: 'student_loan_payment', label: 'Student loan payments' },\n { key: 'credit_card_payments', label: 'Credit card payments' },\n { key: 'personal_loan_payments', label: 'Personal loan payments' },\n { key: 'other_loan_payments', label: 'Other loan payments' },\n { key: 'insurance', label: 'Insurance' },\n { key: 'utilities', label: 'Utilities' },\n { key: 'telephone', label: 'Telephone' },\n // Column 3\n { key: 'general_expenses', label: 'General expenses' },\n { key: 'food', label: 'Food' },\n { key: 'transportation', label: 'Transportation' },\n { key: 'medical_expenses', label: 'Medical expenses' },\n { key: 'child_care', label: 'Child care' },\n { key: 'charitable_giving', label: 'Charitable giving' },\n { key: 'other_expenses', label: 'Other expenses' }\n ];\n \n // Function to render a financial item\n const renderItem = (item) => {\n const value = financialDetails[item.key];\n const displayedValue = displayValue(value);\n \n // Skip items with zero values to reduce clutter\n if (displayedValue === '$0.00') {\n return null;\n }\n \n return (\n \n {item.label}: {displayedValue}\n
\n );\n };\n \n // Check if we have any non-zero income items\n const hasIncomeItems = incomeFields.some(\n field => financialDetails[field.key] && formatMoneyValue(financialDetails[field.key]) !== '$0.00'\n );\n \n // Check if we have any non-zero expense items\n const hasExpenseItems = expenseFields.some(\n field => financialDetails[field.key] && formatMoneyValue(financialDetails[field.key]) !== '$0.00'\n );\n \n console.log(\"Has income items:\", hasIncomeItems);\n console.log(\"Has expense items:\", hasExpenseItems);\n \n if (!hasIncomeItems && !hasExpenseItems) {\n console.log(\"No non-zero items to display\");\n return null;\n }\n \n return (\n\n
\n );\n};\n\nconst AccountDetails = ({ account: info }) => {\n console.log('Account Info:', info);\n console.log('Financial Details:', info.financial_details);\n console.log('Has Detailed Data:', info.has_detailed_data);\n const downloadAuthorizationLetter = async (event, documentId) => {\n event.preventDefault();\n const linkElement = event.target;\n const statusElement = document.getElementById(`download-status-${documentId}`);\n const errorElement = document.getElementById(`download-error-${documentId}`);\n \n errorElement.querySelector('span').textContent = '';\n errorElement.classList.add('d-none');\n \n linkElement.classList.add('d-none');\n statusElement.classList.remove('d-none');\n \n try {\n const response = await fetch('/collectors/api/render_document', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': document.querySelector('[name=\"csrf-token\"]').content\n },\n body: JSON.stringify({ customer_document_id: documentId })\n });\n \n if (!response.ok) {\n throw new Error('Failed to download file');\n }\n\n // Get the blob from the response\n const blob = await response.blob();\n \n // Create a URL for the blob\n const url = window.URL.createObjectURL(blob);\n \n // Create a sanitized customer name for the filename\n const sanitizedName = info.civil_number\n ? info.civil_number.replace(/[^a-z0-9]/gi, '_').toLowerCase()\n : 'authorization_letter';\n \n // Create and trigger download\n const downloadLink = document.createElement('a');\n downloadLink.href = url;\n downloadLink.download = `authorization_letter__${sanitizedName}.pdf`;\n document.body.appendChild(downloadLink);\n downloadLink.click();\n \n // Cleanup\n document.body.removeChild(downloadLink);\n window.URL.revokeObjectURL(url);\n \n } catch (error) {\n console.error('Error:', error);\n errorElement.querySelector('span').textContent = error.message;\n errorElement.classList.remove('d-none');\n } finally {\n statusElement.classList.add('d-none');\n linkElement.classList.remove('d-none');\n }\n };\n\n const downloadHistoryCSV = (documentId, referenceNumber, events) => {\n const sanitizeForCSV = (str) => {\n if (!str) return '';\n return `\"${str.toString().replace(/\"/g, '\"\"').replace(/[\\n\\r]+/g, ' ')}\"`;\n };\n\n // Updated header row order\n const csvRows = [\n ['Account Information', '', '', '', ''].join(','),\n ['Plaintiff Name', sanitizeForCSV(info.plaintiff_name || 'n/a'), '', '', ''].join(','),\n ['Lawsuit State', sanitizeForCSV(info.lawsuit_state || 'n/a'), '', '', ''].join(','),\n ['Consumer Name', sanitizeForCSV(info.customer_name || 'n/a'), '', '', ''].join(','),\n ['Reference Number', sanitizeForCSV(info.civil_number || 'n/a'), '', '', ''].join(','),\n ['', '', '', '', ''].join(','),\n ['Activity Log', '', '', '', ''].join(','),\n ['Date', 'Time', 'Party', 'Reference', 'Action'].join(',') // Reordered columns\n ];\n \n events.forEach(event => {\n const date = new Date(event.created_at);\n let actionText = info.event_id_to_english_text[event.id];\n \n if (event.disclosures?.length > 0) {\n actionText += ' The collector made the following disclosures: ';\n actionText += event.disclosures.map(disclosure => disclosure.text).join(' ');\n }\n\n // Reordered row data to match new column order\n const row = [\n sanitizeForCSV(date.toLocaleDateString('en-US', { month: 'numeric', day: 'numeric', year: 'numeric' })),\n sanitizeForCSV(date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })),\n sanitizeForCSV(event.party === 'customer' ? 'Consumer' : event.party.charAt(0).toUpperCase() + event.party.slice(1)),\n sanitizeForCSV(referenceNumber),\n sanitizeForCSV(actionText)\n ];\n csvRows.push(row.join(','));\n });\n\n // Create and trigger download\n const csvContent = csvRows.join('\\n');\n const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });\n const url = window.URL.createObjectURL(blob);\n const link = document.createElement('a');\n link.href = url;\n link.download = `activity_log_${documentId}.csv`;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n window.URL.revokeObjectURL(url);\n };\n\n return (\n \n {/* Income items - only shown if there's at least one non-zero item */}\n {hasIncomeItems && (\n <>\n {incomeFields.map(field => renderItem(field))}\n \n )}\n \n {/* First column of expense items */}\n {hasExpenseItems && (\n <>\n {expenseFields.slice(0, 3).map(field => renderItem(field))}\n \n )}\n
\n \n \n {/* Second column of expense items */}\n {hasExpenseItems && expenseFields.slice(3, 10).map(field => renderItem(field))}\n
\n \n \n {/* Third column of expense items */}\n {hasExpenseItems && expenseFields.slice(10).map(field => renderItem(field))}\n
\n \n \n Cash flow statement\n {info.plaid_verified && (\n \n
\n
\n\n
\n \n
\n );\n };\n\nexport default AccountDetails;\n","import React from 'react';\nimport Tooltip from './Tooltip';\n\nconst CurrencyInput = ({ label, value, onChange, className = '', style = {}, ...props }) => {\n const [isFocused, setIsFocused] = React.useState(false);\n\n const formatCurrency = (value) => {\n if (!value) return '';\n const numberValue = parseFloat(value);\n if (isNaN(numberValue)) return '';\n\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n maximumFractionDigits: 2\n }).format(numberValue);\n };\n\n const handleChange = (e) => {\n let inputValue = e.target.value;\n // Remove everything except digits and decimal point\n const rawValue = inputValue.replace(/[^0-9.]/g, '');\n \n onChange({\n target: {\n name: e.target.name,\n value: rawValue\n }\n });\n };\n\n return (\n Account Information
\nPlaintiff Name: {info.plaintiff_name || 'n/a'}
\nLawsuit State: {info.lawsuit_state || 'n/a'}
\nConsumer Name: {info.customer_name || 'n/a'}
\nReference Number: {info.civil_number || 'n/a'}
\nSocial Security Number: {info?.social_security_number?.social_security_number || (info?.social_security_number?.social_security_number_last_four ? `XXX-XX-${info.social_security_number.social_security_number_last_four}` : 'n/a')}
\nDate of Birth: {info.birthdate}
\n\n Address:{' '}\n {info.customer_mailing_address ? (\n `${info.customer_mailing_address.customer_street}, ${info.customer_mailing_address.customer_city}, ${info.customer_mailing_address.customer_state} ${info.customer_mailing_address.customer_zip_code}`\n ) : (\n 'n/a'\n )}\n
\nSoloSettle Email: {info.email || 'n/a'}
\n{info.lawsuit_exists ? 'Litigation Account' : 'Pre-litigation Account'}
\n \n {info.settlement_negotiation_events?.length > 0 && (\n\n downloadAuthorizationLetter(e, info.customer_document.id)}\n >\n Download authorization letter\n \n
\n )}\n \n {/* Hardship information section */}\n {hasHardshipData(info) && (\n <>\n \n \n Downloading... \n \n
\n \n \n
\n Hardship information
\n \n {info.hardship_statement ? (\n\n
\n ) : info.hardship && (\n \n \n
{info.hardship_statement}
\n\n {Object.entries(info.hardship)\n .filter(([_, value]) => value !== \"0\" && value)\n .map(([key, value]) => (\n
\n )}\n \n )}\n \n {/* Cash flow statement section */}\n {hasCashFlowData(info) && (\n <>\n {value}
\n ))}\n\n Cash flow statement\n {info.plaid_verified && (\n \n
\n \n
\n \n )}\n\n Summary
\n \n {/* Income and expense values will be either formatted strings or money objects */}\nMonthly income: {displayValue(info.monthly_income_total)}
\nMonthly expenses: {displayValue(info.monthly_expenses_total)}
\n \n {/* Show detailed breakdown only when user has completed the detailed form and has financial details */}\n {info.has_detailed_data && info.financial_details && renderFinancialDetails(info.financial_details)}\n\n\n
Payment tiers
\n\n {info.latest_historical_offer?.phases && info.latest_historical_offer?.phases.length > 1 && (\n \n \n
\n )}\n {!info.latest_historical_offer?.phases || info.latest_historical_offer?.phases.length === 0 && (\n \n \n
\n )}\n
\n\n | Tier | \n# Pays | \nAmount | \n
|---|---|---|
| {index + 1} | \n{phase.iterations} | \n{formatDollars(phase.payment_amount_cents)} | \n
| Tier | \n# Pays | \nAmount | \n
|---|---|---|
| 1 | \n{info.latest_historical_offer.payments} | \n{formatDollars(info.latest_historical_offer.total_amount_cents)} | \n
\n \n
History
\n\n \n \n
\n
\n \n {\n e.preventDefault();\n downloadHistoryCSV(info.customer_document.id, info.civil_number, info.settlement_negotiation_events || []);\n }}\n >\n
\n | DATE | \nTIME | \nPARTY | \nACTION | \n
|---|---|---|---|
| {new Date(event.created_at).toLocaleDateString('en-US', { month: 'numeric', day: 'numeric', year: 'numeric' })} | \n{new Date(event.created_at).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })} | \n{event.party === 'customer' ? 'Consumer' : event.party.charAt(0).toUpperCase() + event.party.slice(1)} | \n\n {info.event_id_to_english_text[event.id]}\n \n {disclosures.length > 0 && (\n The collector made the following disclosures: \n )}\n {disclosures.map(disclosureText => (\n {disclosureText} \n ))}\n | \n
\n \n {label}\n \n setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n className={`form-control form-control-sm ${className}`}\n style={{ \n paddingTop: '18px',\n paddingBottom: '4px',\n ...style\n }}\n {...props}\n />\n
\n );\n};\n\nexport default CurrencyInput;","import React from 'react';\n\nconst FloatingLabelInput = ({ \n label,\n value,\n onChange,\n type = 'text',\n required = false,\n className = '',\n style = {},\n component: Component = 'input',\n isTextarea = false,\n onFocus,\n ...props \n}) => {\n const InputComponent = isTextarea ? 'textarea' : Component;\n \n return (\n \n \n {label}\n \n {\n onChange(e);\n if (isTextarea && e.target) {\n e.target.style.height = 'auto';\n e.target.style.height = `${e.target.scrollHeight}px`;\n }\n }}\n onFocus={(e) => {\n if (isTextarea && e.target) {\n e.target.style.height = 'auto';\n e.target.style.height = `${e.target.scrollHeight}px`;\n }\n onFocus?.(e);\n }}\n required={required}\n className={`form-control form-control-sm ${className}`}\n style={{ \n paddingTop: '18px',\n paddingBottom: '4px',\n height: isTextarea ? 'auto' : undefined,\n resize: isTextarea ? 'none' : undefined,\n overflow: isTextarea ? 'hidden' : undefined,\n ...style\n }}\n {...props}\n />\n
\n );\n};\n\nexport default FloatingLabelInput;","import React from 'react';\n\nconst Calculator = ({ className = '', style = {}, onClick }) => (\n \n);\n\nexport default Calculator; ","import React, { useState, useEffect } from 'react';\nimport CurrencyInput from '../../../shared/CurrencyInput';\nimport Tooltip from '../../../shared/Tooltip';\nimport FloatingLabelInput from '../../../shared/FloatingLabelInput';\nimport Calculator from '../../../shared/icons/Calculator';\n\nconst DEFAULT_ACCEPTANCE_DISCLOSURE = 'This acceptance is a communication from a debt collector';\nconst DEFAULT_COUNTEROFFER_DISCLOSURE = 'This counteroffer is a communication from a debt collector';\n\nconst WAIT_TIME_FOR_AUTO_ACTION = 500;\n\n// Custom debounce hook\nconst useDebounce = (value, delay) => {\n const [debouncedValue, setDebouncedValue] = useState(value);\n\n useEffect(() => {\n const handler = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n return () => {\n clearTimeout(handler);\n };\n }, [value, delay]);\n\n return debouncedValue;\n};\n\n// Add constant at the top with other constants\nconst MAX_COUNTEROFFERS = 5;\n\nconst AcceptOrCounteroffer = ({ account, validFirstPaymentDate, onSuccess, autoAction }) => {\n const [selectedAction, setSelectedAction] = useState(\n account.latest_historical_offer?.first_payment_date >= validFirstPaymentDate \n ? 'accept' \n : 'counteroffer'\n );\n \n const [activeDropdown, setActiveDropdown] = useState(null);\n const [isDisabled, setIsDisabled] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n const [activeCounterofferId, setActiveCounterofferId] = useState(1);\n const [counteroffers, setCounteroffers] = useState({\n 1: {\n total_amount: '',\n payments: '',\n first_payment_date: '',\n tiers: [],\n disclosures: [DEFAULT_COUNTEROFFER_DISCLOSURE, '']\n }\n });\n\n const [lastPaymentAmountCents, setLastPaymentAmountCents] = useState(null);\n\n // Keep disclosures in their own state since they're shared\n const [disclosures, setDisclosures] = useState([\n selectedAction === 'accept' ? DEFAULT_ACCEPTANCE_DISCLOSURE : DEFAULT_COUNTEROFFER_DISCLOSURE,\n ''\n ]);\n\n // Update disclosure default when action changes\n useEffect(() => {\n setDisclosures(prev => {\n const newDisclosures = [...prev];\n newDisclosures[0] = selectedAction === 'accept' ? \n DEFAULT_ACCEPTANCE_DISCLOSURE :\n DEFAULT_COUNTEROFFER_DISCLOSURE;\n return newDisclosures;\n });\n }, [selectedAction]);\n\n const debouncedTiers = useDebounce(JSON.stringify(counteroffers[activeCounterofferId]), 500);\n\n // Add a unique row identifier\n const rowId = `action-row-${account.customer_document.id}`;\n\n // Modify useEffect to run once on mount\n useEffect(() => {\n // Adjust textareas\n setTimeout(() => {\n document.querySelectorAll('textarea').forEach(adjustTextareaHeight);\n }, 0);\n }, []); // Empty dependency array - runs once on mount\n\n // Add useEffect for click outside handler\n useEffect(() => {\n const handleClickOutside = (event) => {\n const dropdowns = document.querySelectorAll(`#${rowId} .action-dropdown`);\n const buttons = document.querySelectorAll(`#${rowId} .action-button`);\n \n // Don't close if clicking on any button in this row\n if (Array.from(buttons).some(button => button.contains(event.target))) {\n return;\n }\n \n // Close if clicking outside dropdowns\n if (!Array.from(dropdowns).some(dropdown => dropdown.contains(event.target))) {\n setTimeout(() => {\n setActiveDropdown(null);\n }, 0);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [rowId]);\n\n const handleAcceptOffer = async (event) => {\n event.preventDefault();\n setIsLoading(true);\n setIsDisabled(true);\n \n if (!confirm(\"Are you sure you want to accept this offer?\")) {\n setIsLoading(false);\n setIsDisabled(false);\n return;\n }\n\n const response = await fetch('/collectors/api/accept_offer', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': document.querySelector('[name=\"csrf-token\"]').content\n },\n body: JSON.stringify({ \n customer_document_id: account.customer_document.id,\n disclosures: disclosures.filter(d => d.trim() !== '')\n })\n });\n const data = await response.json();\n if (data.success) {\n onSuccess?.(data);\n return data;\n } else {\n alert(data.error || 'Error processing request');\n setIsLoading(false);\n setIsDisabled(false);\n }\n };\n\n function constructRequestBodyForCounteroffer() {\n const phases = counteroffers[activeCounterofferId].tiers.map((tier, index) => ({\n index,\n // when parsing to determine the amount in cents, there might be a rounding error.\n // so we round to the nearest cent. (these errors are always a tiny tiny fraction of a cent)\n payment_amount_cents: Math.round(parseFloat(tier.total) * 100).toString(),\n iterations: parseInt(tier.payments),\n }));\n\n const body = {\n customer_document_id: account.customer_document.id,\n total_amount: counteroffers[activeCounterofferId].total_amount,\n first_payment_date: counteroffers[activeCounterofferId].first_payment_date,\n disclosures: counteroffers[activeCounterofferId].disclosures.filter(d => d.trim() !== ''),\n phases: phases\n };\n if (phases.length === 0) {\n body.payments = counteroffers[activeCounterofferId].payments;\n }\n return body;\n }\n\n const handleCounterOffer = async (event) => {\n event.preventDefault();\n setIsLoading(true);\n setIsDisabled(true);\n\n if (!confirm(\"Are you sure you want to submit these counteroffers?\")) {\n setIsLoading(false);\n setIsDisabled(false);\n return;\n }\n\n // Convert counteroffers to array format\n const offers = Object.values(counteroffers).map(offer => ({\n customer_document_id: account.customer_document.id,\n total_amount: offer.total_amount,\n first_payment_date: offer.first_payment_date,\n phases: offer.tiers.map((tier, index) => ({\n index,\n payment_amount_cents: Math.round(parseFloat(tier.total) * 100).toString(),\n iterations: parseInt(tier.payments),\n })),\n payments: offer.tiers.length === 0 ? offer.payments : undefined\n }));\n\n const response = await fetch('/collectors/api/create_counteroffer', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': document.querySelector('[name=\"csrf-token\"]').content\n },\n body: JSON.stringify({ \n offers,\n customer_document_id: account.customer_document.id,\n disclosures: disclosures.filter(d => d.trim() !== '') // Use shared disclosures\n })\n });\n\n const data = await response.json();\n if (data.success) {\n onSuccess?.(data);\n return data;\n } else {\n if (data.offer_index) {\n const errorMessage = `Offer ${data.offer_index} is invalid: ${data.errors.join(', ')}`;\n alert(errorMessage);\n setIsLoading(false);\n setIsDisabled(false);\n }\n }\n };\n \n // Add form change handler\n const handleFormChange = (e) => {\n const { name, value } = e.target;\n if (activeDropdown === 'counteroffer') {\n setCounteroffers(prev => ({\n ...prev,\n [activeCounterofferId]: {\n ...prev[activeCounterofferId],\n [name]: value\n }\n }));\n }\n };\n\n // Add this new function to handle dropdown visibility\n const ensureDropdownVisible = () => {\n const tableContainer = document.getElementById('table-container');\n const dropdown = document.querySelector(`#${rowId} .action-dropdown`);\n \n if (tableContainer && dropdown) {\n const dropdownRect = dropdown.getBoundingClientRect();\n const containerRect = tableContainer.getBoundingClientRect();\n \n // Calculate if dropdown extends beyond visible area\n const overflowAmount = (dropdownRect.bottom - containerRect.bottom) + 20; // 20px buffer\n \n if (overflowAmount > 0) {\n const scrollOptions = {\n top: tableContainer.scrollTop + overflowAmount,\n behavior: 'smooth'\n };\n tableContainer.scroll(scrollOptions);\n }\n }\n };\n\n // Update handleDisclosureChange\n const handleDisclosureChange = (index, value) => {\n if (index === 0) return;\n \n setDisclosures(prev => {\n const newDisclosures = [...prev];\n newDisclosures[index] = value;\n \n if (index === newDisclosures.length - 1 && value.trim() !== '') {\n newDisclosures.push('');\n }\n \n return newDisclosures;\n });\n\n setTimeout(ensureDropdownVisible, 0);\n };\n\n // Update adjustTextareaHeight to include scrolling\n const adjustTextareaHeight = (textarea) => {\n if (!textarea) return;\n const originalHeight = textarea.style.height;\n textarea.style.height = 'auto';\n textarea.style.height = `${textarea.scrollHeight}px`;\n \n // Only trigger scroll if height actually changed\n if (originalHeight !== textarea.style.height) {\n setTimeout(ensureDropdownVisible, 0);\n }\n };\n\n // Update click handler for buttons\n const handleButtonClick = (action) => {\n // If clicking the same button that's already active, close it\n if (activeDropdown === action) {\n setActiveDropdown(null);\n } else {\n // If clicking a different button, switch to it immediately\n setActiveDropdown(action);\n \n // Scroll to make dropdown visible\n setTimeout(() => {\n document.querySelectorAll('textarea').forEach(adjustTextareaHeight);\n ensureDropdownVisible();\n }, 0);\n }\n setSelectedAction(action);\n };\n\n // Update handleDeleteDisclosure\n const handleDeleteDisclosure = (index) => {\n if (index === 0) return; // Don't allow deletion of the first disclosure\n \n setDisclosures(prev => prev.filter((_, i) => i !== index));\n setTimeout(ensureDropdownVisible, 0);\n };\n\n const showAcceptButton = account.latest_historical_offer?.first_payment_date >= validFirstPaymentDate;\n\n // Add this helper function near the top of the component\n const calculateBalanceRemaining = (totalAmount, tiers) => {\n if (!totalAmount || !tiers?.length) return '$0.00';\n \n const total = parseFloat(totalAmount.replace(/[^0-9.-]+/g, ''));\n const tiersTotal = tiers.reduce((sum, tier) => {\n const tierTotal = parseFloat(tier.total.replace(/[^0-9.-]+/g, '') || 0);\n const payments = parseInt(tier.payments || 0);\n return sum + (tierTotal * payments);\n }, 0);\n \n const difference = total - tiersTotal;\n if (Math.abs(difference) < 0.01) return '$0.00';\n \n return difference.toLocaleString('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n maximumFractionDigits: 2\n });\n };\n\n // Add this helper function to check if a tier is fully filled\n const isTierComplete = (tier) => {\n return tier.total?.trim() !== '' && tier.payments?.trim() !== '';\n };\n\n // Update calculateMissingField to use the current tier data directly\n const calculateMissingField = (tier, index) => {\n const activeOffer = counteroffers[activeCounterofferId];\n if (!activeOffer?.total_amount) return;\n\n const totalAmount = parseFloat(activeOffer.total_amount.replace(/[^0-9.-]+/g, ''));\n \n // Calculate total of all tiers except current one\n const otherTiersTotal = activeOffer.tiers.reduce((sum, currentTier, currentIndex) => {\n if (currentIndex === index) return sum;\n const tierTotal = parseFloat(currentTier.total?.replace(/[^0-9.-]+/g, '') || 0);\n const payments = parseInt(currentTier.payments || 0);\n return sum + (tierTotal * payments);\n }, 0);\n\n // Calculate remaining amount for this tier\n const remainingForTier = totalAmount - otherTiersTotal;\n if (remainingForTier <= 0) return;\n\n const newTiers = [...activeOffer.tiers];\n \n if (tier.payments && !tier.total) {\n const payments = parseInt(tier.payments);\n const totalPerPayment = remainingForTier / payments;\n newTiers[index].total = totalPerPayment.toFixed(2);\n }\n else if (tier.total && !tier.payments) {\n const tierTotal = parseFloat(tier.total.replace(/[^0-9.-]+/g, ''));\n const payments = Math.ceil(remainingForTier / tierTotal);\n newTiers[index].payments = payments.toString();\n }\n\n setCounteroffers(prev => ({\n ...prev,\n [activeCounterofferId]: {\n ...prev[activeCounterofferId],\n tiers: newTiers\n }\n }));\n };\n\n // Update isCalculatorEnabled to handle tab changes\n const isCalculatorEnabled = (tier, index) => {\n const activeOffer = counteroffers[activeCounterofferId];\n if (!activeOffer?.total_amount) return false;\n\n // Calculate total of all tiers except current one\n const otherTiersTotal = activeOffer.tiers.reduce((sum, currentTier, currentIndex) => {\n if (currentIndex === index) return sum;\n const tierTotal = parseFloat(currentTier.total?.replace(/[^0-9.-]+/g, '') || 0);\n const payments = parseInt(currentTier.payments || 0);\n return sum + (tierTotal * payments);\n }, 0);\n\n const totalAmount = parseFloat(activeOffer.total_amount.replace(/[^0-9.-]+/g, ''));\n const remainingForTier = totalAmount - otherTiersTotal;\n \n if (remainingForTier <= 0) return false;\n if ((!tier.total && !tier.payments) || (tier.total && tier.payments)) return false;\n \n return (tier.total && !tier.payments) || (!tier.total && tier.payments);\n };\n\n useEffect(() => {\n const fetchLastPayment = async () => {\n if (!debouncedTiers) return;\n \n const activeOffer = JSON.parse(debouncedTiers);\n \n // Don't fetch if conditions aren't met\n if (!activeOffer.total_amount || \n (activeOffer.total_amount && !activeOffer.payments && activeOffer.tiers.length === 0) ||\n (activeOffer.tiers.length > 0 && !activeOffer.tiers.every(tier => \n tier.total?.trim() !== '' && tier.payments?.trim() !== ''\n ))) {\n setLastPaymentAmountCents(null);\n return;\n }\n \n try {\n const body = {\n customer_document_id: account.customer_document.id,\n total_amount: activeOffer.total_amount,\n first_payment_date: activeOffer.first_payment_date,\n phases: activeOffer.tiers.map((tier, index) => ({\n index,\n payment_amount_cents: Math.round(parseFloat(tier.total) * 100).toString(),\n iterations: parseInt(tier.payments),\n })),\n payments: activeOffer.tiers.length === 0 ? activeOffer.payments : undefined\n };\n\n const response = await fetch('/collectors/api/determine_offer_last_payment', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': document.querySelector('[name=\"csrf-token\"]')?.content,\n },\n body: JSON.stringify(body)\n });\n\n if (!response.ok) throw new Error('Network response was not ok');\n \n const data = await response.json();\n \n setLastPaymentAmountCents(\n data.success && data.has_extra_tier ? data.last_payment_amount_cents : null\n );\n } catch (error) {\n setLastPaymentAmountCents(null);\n }\n };\n\n fetchLastPayment();\n }, [debouncedTiers, activeCounterofferId, account.customer_document.id]);\n\n // Add useEffect for auto-action\n useEffect(() => {\n if (!autoAction) return;\n\n // Check if customer_document_id exists in URL params\n const urlParams = new URLSearchParams(window.location.search);\n const hasCustomerDocumentId = urlParams.has('filters[customer_document_id]');\n if (!hasCustomerDocumentId) return;\n\n const timer = setTimeout(() => {\n if (autoAction === 'accept' && showAcceptButton) {\n handleButtonClick('accept');\n // Use another timeout to ensure the dropdown is rendered before submitting\n setTimeout(() => {\n const form = document.querySelector(`#${rowId} form`);\n if (form) {\n handleAcceptOffer({ preventDefault: () => {} });\n }\n }, WAIT_TIME_FOR_AUTO_ACTION);\n } else if (autoAction === 'counteroffer') {\n handleButtonClick('counteroffer');\n }\n }, WAIT_TIME_FOR_AUTO_ACTION);\n \n return () => clearTimeout(timer);\n }, [autoAction, showAcceptButton]); // Only run when autoAction or showAcceptButton changes\n\n // Update addNewCounteroffer to use next available index\n const addNewCounteroffer = () => {\n if (Object.keys(counteroffers).length >= MAX_COUNTEROFFERS) return;\n \n // Get sorted list of current offer IDs\n const currentIds = Object.keys(counteroffers).map(Number).sort((a, b) => a - b);\n \n // Find first gap in sequence or use next number\n let newId = 1;\n for (const id of currentIds) {\n if (id !== newId) break;\n newId++;\n }\n \n setCounteroffers(prev => ({\n ...prev,\n [newId]: {\n total_amount: '',\n payments: '',\n first_payment_date: '',\n tiers: [],\n disclosures: [DEFAULT_COUNTEROFFER_DISCLOSURE, '']\n }\n }));\n setActiveCounterofferId(newId);\n };\n\n const deleteCounteroffer = (id) => {\n if (Object.keys(counteroffers).length <= 1) return; // Maintain minimum of 1\n \n setCounteroffers(prev => {\n const newOffers = { ...prev };\n delete newOffers[id];\n \n // Renumber remaining offers\n const sortedIds = Object.keys(newOffers).map(Number).sort((a, b) => a - b);\n const renumberedOffers = {};\n sortedIds.forEach((oldId, index) => {\n renumberedOffers[index + 1] = newOffers[oldId];\n });\n \n return renumberedOffers;\n });\n \n // Update active ID after renumbering\n setActiveCounterofferId(prev => {\n if (id === prev) {\n // If deleting active tab, switch to first available\n return 1;\n } else if (id < prev) {\n // If deleting tab before active, decrement active\n return prev - 1;\n }\n return prev;\n });\n };\n\n // Update the JSX for disclosures section (same for both accept and counteroffer forms)\n const renderDisclosures = () => (\n \n \n \n {disclosures.map((disclosure, index) => (\n
\n );\n\n return (\n Disclosures
\n\n {\n handleDisclosureChange(index, e.target.value);\n }}\n isTextarea\n rows={1}\n readOnly={index === 0}\n style={{ flex: 1 }}\n />\n handleDeleteDisclosure(index)}\n style={{ \n minWidth: '24px',\n visibility: disclosures.length > 1 && disclosure.trim() !== '' && index !== 0\n ? 'visible' \n : 'hidden'\n }}\n >\n ×\n \n
\n ))}\n \n
\n );\n};\n\nexport default AcceptOrCounteroffer;","import React, { useState, useEffect } from 'react';\nimport Tooltip from '../../../shared/Tooltip';\n\nconst SendPaymentDetails = ({ account, onSuccess }) => {\n const [formData, setFormData] = useState({\n file_number: '',\n payee: '',\n recipient: '',\n mailing_address: ''\n });\n const [formState, setFormState] = useState({\n isSubmitting: false,\n isSubmitted: false,\n error: null\n });\n const [activeDropdown, setActiveDropdown] = useState(false);\n \n // Add a unique row identifier\n const rowId = `payment-details-row-${account.customer_document.id}`;\n\n useEffect(() => {\n const handleClickOutside = (event) => {\n const dropdown = document.querySelector(`#${rowId} .action-dropdown`);\n const button = document.querySelector(`#${rowId} .action-button`);\n \n // Don't close if clicking on the button\n if (button?.contains(event.target)) {\n return;\n }\n \n // Close if clicking outside dropdown\n if (!dropdown?.contains(event.target)) {\n setActiveDropdown(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [rowId]);\n\n // Add this new function to handle dropdown visibility\n const ensureDropdownVisible = () => {\n const tableContainer = document.getElementById('table-container');\n const dropdown = document.querySelector(`#${rowId} .action-dropdown`);\n \n if (tableContainer && dropdown) {\n const dropdownRect = dropdown.getBoundingClientRect();\n const containerRect = tableContainer.getBoundingClientRect();\n \n // Calculate if dropdown extends beyond visible area\n const overflowAmount = (dropdownRect.bottom - containerRect.bottom) + 20; // 20px buffer\n \n if (overflowAmount > 0) {\n const scrollOptions = {\n top: tableContainer.scrollTop + overflowAmount,\n behavior: 'smooth'\n };\n tableContainer.scroll(scrollOptions);\n }\n }\n };\n\n const handleButtonClick = () => {\n setActiveDropdown(!activeDropdown);\n \n // Scroll when opening dropdown\n if (!activeDropdown) {\n const tableContainer = document.getElementById('table-container');\n if (tableContainer) {\n const scrollOptions = {\n left: tableContainer.scrollWidth,\n behavior: 'smooth'\n };\n setTimeout(() => {\n tableContainer.scroll(scrollOptions);\n ensureDropdownVisible();\n }, 0);\n }\n }\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setFormState({ ...formState, isSubmitting: true, error: null });\n\n if (!confirm(\"Are you sure you want to submit?\")) {\n setFormState({ ...formState, isSubmitting: false, isSubmitted: false });\n return;\n }\n \n try {\n const response = await fetch('/collectors/api/update_payment_details', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': document.querySelector('[name=\"csrf-token\"]').content\n },\n body: JSON.stringify({\n customer_document_id: account.customer_document.id,\n ...formData\n })\n });\n\n if (response.ok) {\n setFormState({ isSubmitting: false, isSubmitted: true, error: null });\n onSuccess();\n } else {\n const data = await response.json();\n alert(data.error);\n setFormState({ isSubmitting: false, isSubmitted: false });\n }\n } catch (e) {\n alert(e.message);\n setFormState({ isSubmitting: false, isSubmitted: false });\n }\n };\n\n const handleChange = (e) => {\n setFormData(prev => ({\n ...prev,\n [e.target.name]: e.target.value\n }));\n };\n\n return (\n \n \n {showAcceptButton && (\n \n handleButtonClick('accept')}\n >\n Accept\n \n \n )}\n\n {/* Accept dropdown */}\n {activeDropdown === 'accept' && (\n \n handleButtonClick('counteroffer')}\n >\n Counteroffer\n \n \n\n {/* Counteroffer dropdown */}\n {activeDropdown === 'counteroffer' && (\n
\n \n \n
\n )}\n \n\n {showAcceptButton && (\n \n )}\n\n \n \n {/* Updated tabs styling */}\n
\n )}\n \n \n {Object.keys(counteroffers).map(id => (\n setActiveCounterofferId(Number(id))}\n >\n Offer {id}\n {\n e.stopPropagation();\n deleteCounteroffer(Number(id));\n }}\n style={{\n fontSize: '20px',\n fontWeight: '300',\n cursor: Object.keys(counteroffers).length > 1 ? 'pointer' : 'default',\n position: 'relative',\n top: '-1px',\n visibility: Object.keys(counteroffers).length > 1 ? 'visible' : 'hidden'\n }}\n >\n ×\n \n \n ))}\n \n +\n \n
\n\n \n \n
\n \n
\n );\n};\n\nexport default SendPaymentDetails;","import React, { useState, useEffect } from 'react';\nimport Tooltip from '../../../shared/Tooltip';\n\nconst UploadSettlementAgreement = ({ account, onSuccess }) => {\n const [file, setFile] = useState(null);\n const [isUploaded, setIsUploaded] = useState(false);\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [activeDropdown, setActiveDropdown] = useState(false);\n const [disclosures, setDisclosures] = useState(['This document is a communication from a debt collector.', '']);\n \n // Add unique row identifier\n const rowId = `upload-settlement-row-${account.customer_document.id}`;\n\n useEffect(() => {\n const handleClickOutside = (event) => {\n const dropdown = document.querySelector(`#${rowId} .action-dropdown`);\n const button = document.querySelector(`#${rowId} .action-button`);\n \n if (button?.contains(event.target)) {\n return;\n }\n \n if (!dropdown?.contains(event.target)) {\n setActiveDropdown(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [rowId]);\n\n // Add this new function to handle dropdown visibility\n const ensureDropdownVisible = () => {\n const tableContainer = document.getElementById('table-container');\n const dropdown = document.querySelector(`#${rowId} .action-dropdown`);\n \n if (tableContainer && dropdown) {\n const dropdownRect = dropdown.getBoundingClientRect();\n const containerRect = tableContainer.getBoundingClientRect();\n \n // Calculate if dropdown extends beyond visible area\n const overflowAmount = (dropdownRect.bottom - containerRect.bottom) + 20; // 20px buffer\n \n if (overflowAmount > 0) {\n const scrollOptions = {\n top: tableContainer.scrollTop + overflowAmount,\n behavior: 'smooth'\n };\n tableContainer.scroll(scrollOptions);\n }\n }\n };\n\n const handleButtonClick = () => {\n setActiveDropdown(!activeDropdown);\n \n if (!activeDropdown) {\n const tableContainer = document.getElementById('table-container');\n if (tableContainer) {\n const scrollOptions = {\n left: tableContainer.scrollWidth,\n behavior: 'smooth'\n };\n setTimeout(() => {\n tableContainer.scroll(scrollOptions);\n ensureDropdownVisible();\n }, 0);\n }\n }\n };\n\n const handleFileChange = (e) => {\n setFile(e.target.files[0]);\n };\n\n // Update adjustTextareaHeight to include scrolling\n const adjustTextareaHeight = (textarea) => {\n if (!textarea) return;\n const originalHeight = textarea.style.height;\n textarea.style.height = 'auto';\n textarea.style.height = `${textarea.scrollHeight}px`;\n \n // Only trigger scroll if height actually changed\n if (originalHeight !== textarea.style.height) {\n setTimeout(ensureDropdownVisible, 0);\n }\n };\n\n // Update handleDisclosureChange to include scrolling\n const handleDisclosureChange = (index, value) => {\n const newDisclosures = [...disclosures];\n newDisclosures[index] = value;\n \n // Add new empty disclosure if typing in last field\n if (index === newDisclosures.length - 1 && value.trim() !== '') {\n newDisclosures.push('');\n }\n \n setDisclosures(newDisclosures);\n \n // Add setTimeout to ensure the DOM has updated\n setTimeout(ensureDropdownVisible, 0);\n };\n\n // Update handleDeleteDisclosure to include scrolling\n const handleDeleteDisclosure = (index) => {\n const disclosure = disclosures[index];\n if (!disclosure || disclosure.trim() === '') {\n return;\n }\n setDisclosures(disclosures.filter((_, i) => i !== index));\n \n // Ensure dropdown remains visible after deletion\n setTimeout(ensureDropdownVisible, 0);\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!confirm(\"Are you sure you want to submit?\")) {\n return;\n }\n \n setIsSubmitting(true);\n\n const formData = new FormData();\n formData.append('file', file);\n formData.append('customer_document_id', account.customer_document.id);\n \n // Fix: Append each disclosure separately\n const filteredDisclosures = disclosures.filter(d => d.trim() !== '');\n filteredDisclosures.forEach(disclosure => {\n formData.append('disclosures[]', disclosure);\n });\n\n try {\n const response = await fetch('/collectors/api/upload_settlement_agreement', {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': document.querySelector('[name=\"csrf-token\"]').content,\n },\n body: formData,\n });\n\n if (!response.ok) {\n throw new Error('Network response was not ok');\n }\n \n setIsUploaded(true);\n onSuccess();\n } catch (error) {\n console.error('Error uploading settlement agreement:', error);\n } finally {\n setIsSubmitting(false);\n }\n };\n\n if (isUploaded) {\n return (\n \n \n \n \n Enter Payment Details\n \n \n\n {activeDropdown && (\n
\n \n \n
\n )}\n \n \n \n
\n );\n }\n\n return (\n \n
\n );\n};\n\nexport default UploadSettlementAgreement;","import React, { useState, useEffect } from 'react';\nimport { formatDollars, extractCentsFromDollarString } from '../../../other/money';\nimport AccountDetails from './AccountDetails';\n\nimport AcceptOrCounteroffer from './actions/AcceptOrCounteroffer';\nimport SendPaymentDetails from './actions/SendPaymentDetails';\nimport UploadSettlementAgreement from './actions/UploadSettlementAgreement';\n\nconst AccountRow = ({ validFirstPaymentDate, account, columnsToShow, autoAction, lawFirm }) => {\n const [isExpanded, setIsExpanded] = useState(false);\n const [isLoading, setIsLoading] = useState(true);\n const [currentAction, setCurrentAction] = useState(null);\n const [isArchived, setIsArchived] = useState(!!account.customer_document.archived_by_law_firm_on);\n\n useEffect(() => {\n setCurrentAction(account.current_action);\n setIsLoading(false);\n }, [account.current_action]);\n\n useEffect(() => {\n setIsExpanded(false);\n }, [account.current_action]);\n\n function handleRefreshCurrentAction() {\n setIsLoading(true);\n fetch(`/collectors/api/get_current_action?customer_document_id=${account.customer_document.id}`)\n .then(response => response.json())\n .then(data => {\n setCurrentAction(data);\n })\n .finally(() => {\n setIsLoading(false);\n });\n }\n\n const handleArchiveAction = () => {\n const action = isArchived ? 'unarchive' : 'archive';\n const confirmMessage = `Are you sure you want to ${action} this account?`;\n \n if (window.confirm(confirmMessage)) {\n setIsLoading(true);\n fetch(`/collectors/api/${action}_document`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content')\n },\n body: JSON.stringify({\n customer_document_id: account.customer_document.id\n })\n })\n .then(response => {\n if (!response.ok) throw new Error(`${action} failed`);\n setIsArchived(!isArchived);\n return response.json();\n })\n .catch(error => {\n alert(`Failed to ${action} document`);\n })\n .finally(() => {\n setIsLoading(false);\n });\n }\n };\n\n return (\n <>\n \n \n \n \n Upload Settlement Agreement\n \n \n\n {activeDropdown && (\n
\n \n \n
\n )}\n \n \n {account.latest_historical_offer?.first_payment_date < validFirstPaymentDate && [\"offer\", \"counteroffer\", \"sent_confusing_response_to_offer\"].includes(account.latest_event?.action) && (\n
\n \n
\n )}\n \n {account.latest_historical_offer?.first_payment_date && \n new Date(account.latest_historical_offer.first_payment_date + 'T00:00:00').toLocaleDateString('en-US', {\n month: 'numeric',\n day: 'numeric',\n year: 'numeric'\n })\n }\n \n !
\n \n First payment date must be on or after {account.latest_historical_offer?.first_payment_date}. You'll need to counteroffer with a new payment date.\n
\n \n \n
\n - \n
- \n \n \n
e.stopPropagation()}>
}\n {currentAction.type == \"waiting_for_customer\" && Waiting on customer response to counteroffer.
}\n \n {currentAction.type == \"request_payment_details\" && e.stopPropagation()}>
}\n {currentAction.type == \"request_settlement_agreement\" && e.stopPropagation()}>
}\n\n {currentAction.type == \"waiting_for_signed_settlement_agreement\" && Waiting for signed settlement agreement.
}\n {currentAction.type == \"waiting_for_payment\" && Waiting for first payment.
}\n \n {/* Payment status */}\n {currentAction.type == \"payment_setup_complete\" && Consumer set up auto-pay but hasn't made a payment yet.
}\n {currentAction.type == \"first_payment_made\" && Consumer made their first payment{currentAction.params.latest_payment_intent ? ` on ${new Date(currentAction.params.latest_payment_intent.created_at).toLocaleDateString()}` : ''}.
}\n \n \n \n
\n\n {hasMorePages && (\n
\n \n );\n};\n\nexport default AccountsTable;\n","import React, { useEffect, useState } from 'react';\nimport Layout from './Layout';\nimport Tooltip from '../shared/Tooltip';\nimport Alert from '../shared/Alert';\n\nimport { formatDollars } from '../../other/money';\n\nimport Filters from './accounts/Filters';\nimport AccountsTable from './accounts/AccountsTable';\n\nconst FILTERS_NOT_IN_URL_BAR = ['columns'];\nconst DEFAULT_SHOWN_COLUMNS = ['Name', 'Reference', 'Amount', 'Status', 'Status Date', 'Offer Amount', '# Pays', '# Tiers', '%', 'First Payment']\n\nconst Accounts = () => {\n const [basicStats, setBasicStats] = useState(null);\n const [accountsData, setAccountsData] = useState(null);\n const [scope, setScope] = useState(null);\n const [numPages, setNumPages] = useState(() => {\n const urlParams = new URLSearchParams(window.location.search);\n return parseInt(urlParams.get('num_pages')) || 1;\n });\n const [autoAction, setAutoAction] = useState(() => {\n const urlParams = new URLSearchParams(window.location.search);\n return urlParams.get('auto_action') || null;\n });\n const [collectorMetrics, setCollectorMetrics] = useState(null);\n\n const [selectedFilterValues, setSelectedFilterValues] = useState(() => {\n const urlParams = new URLSearchParams(window.location.search);\n const initialValues = {\n columns: DEFAULT_SHOWN_COLUMNS // Set default columns\n };\n \n // First check for search parameter specifically\n const searchValue = urlParams.get('filters[search]');\n if (searchValue) {\n initialValues.search = searchValue;\n }\n\n // Check for customer_document_id specifically\n const customerDocumentId = urlParams.get('filters[customer_document_id]');\n if (customerDocumentId) {\n initialValues.customer_document_id = customerDocumentId;\n }\n \n // Extract all other filter parameters from URL\n for (const [key, value] of urlParams.entries()) {\n if (key.startsWith('filters[') && key.endsWith(']')) {\n const matches = key.match(/filters\\[([^\\]]+)\\]\\[([^\\]]+)\\]/);\n if (!matches) {\n // Handle simple filter parameters that don't have nested structure\n const simpleMatch = key.match(/filters\\[([^\\]]+)\\]/);\n if (simpleMatch && !['search', 'customer_document_id'].includes(simpleMatch[1])) {\n initialValues[simpleMatch[1]] = value;\n }\n continue;\n }\n \n const [, filterName, arrayIndexOrKey] = matches;\n \n if (['search', 'customer_document_id'].includes(filterName)) continue;\n \n if (!initialValues[filterName]) {\n initialValues[filterName] = Number.isInteger(parseInt(arrayIndexOrKey)) ? [] : {};\n }\n \n if (Number.isInteger(parseInt(arrayIndexOrKey))) {\n if (Array.isArray(initialValues[filterName])) {\n initialValues[filterName].push(value);\n }\n } else {\n if (!Array.isArray(initialValues[filterName])) {\n initialValues[filterName][arrayIndexOrKey] = value;\n }\n }\n }\n }\n \n return initialValues;\n });\n\n useEffect(() => {\n const fetchCollectorMetrics = async () => {\n const collectorMetricsResponse = await fetch(`/collectors/api/calculate_collector_metrics`, {\n headers: {\n 'Accept': 'application/json',\n },\n });\n const collectorMetricsJson = await collectorMetricsResponse.json();\n setCollectorMetrics(collectorMetricsJson);\n };\n fetchCollectorMetrics();\n }, []);\n \n\n const [filters, setFilters] = useState([]);\n\n useEffect(() => {\n const urlParams = new URLSearchParams();\n urlParams.set('num_pages', numPages);\n \n Object.entries(selectedFilterValues)\n .filter(([key]) => key !== 'columns') // Exclude columns from URL parameters\n .forEach(([key, value]) => {\n if (typeof value === 'object') {\n // Handle range filters\n Object.entries(value).forEach(([rangeKey, rangeValue]) => {\n urlParams.set(`filters[${key}][${rangeKey}]`, rangeValue);\n });\n } else {\n // Handle regular filters\n urlParams.set(`filters[${key}]`, value);\n }\n });\n \n const newUrl = `${window.location.pathname}${urlParams.toString() ? '?' + urlParams.toString() : ''}`;\n window.history.pushState({}, '', newUrl);\n }, [selectedFilterValues, numPages]);\n\n const fetchAccountData = async () => {\n const urlParams = new URLSearchParams();\n urlParams.set('num_pages', numPages);\n \n const filtersString = Object.entries(selectedFilterValues)\n .filter(([key]) => !FILTERS_NOT_IN_URL_BAR.includes(key))\n .map(([key, value]) => {\n if (typeof value === 'object') {\n // Handle range filters\n return Object.entries(value)\n .map(([rangeKey, rangeValue]) => `filters[${key}][${rangeKey}]=${rangeValue}`)\n .join('&');\n }\n // Handle regular filters\n return `filters[${key}]=${value}`;\n }).join('&');\n \n const accountsDataResponse = await fetch(`/collectors/api/apply_filters?${urlParams.toString()}&${filtersString}`, {\n headers: {\n 'Accept': 'application/json'\n }\n });\n const accountsDataJson = await accountsDataResponse.json();\n setAccountsData(accountsDataJson);\n };\n\n const fetchFilterValues = async () => {\n const filterValuesResponse = await fetch(`/collectors/api/filter_values`, {\n headers: {\n 'Accept': 'application/json'\n }\n });\n const filterValuesJson = await filterValuesResponse.json();\n setFilters(filterValuesJson.filters);\n };\n\n const fetchBasicStats = async () => {\n const basicStatsResponse = await fetch(`/collectors/api/basic_stats`, {\n headers: {\n 'Accept': 'application/json'\n }\n });\n const basicStatsJson = await basicStatsResponse.json();\n setBasicStats(basicStatsJson);\n };\n\n useEffect(() => {\n setAccountsData(null);\n fetchAccountData();\n }, [numPages, selectedFilterValues]);\n\n useEffect(() => {\n fetchBasicStats();\n fetchFilterValues();\n }, []);\n\n const handleFilterChange = (key, value, rangeKey = null) => {\n const clonedFilterValues = JSON.parse(JSON.stringify(selectedFilterValues));\n if (rangeKey) {\n // Handle range filters\n clonedFilterValues[key] = clonedFilterValues[key] || {};\n clonedFilterValues[key][rangeKey] = value;\n } else {\n // Handle regular filters\n clonedFilterValues[key] = value;\n }\n setSelectedFilterValues(clonedFilterValues);\n };\n\n const handleFilterRemove = (key) => {\n const clonedFilterValues = { ...selectedFilterValues };\n delete clonedFilterValues[key];\n setSelectedFilterValues(clonedFilterValues);\n };\n\n const handleClearAll = () => {\n window.location.href = '/collectors/accounts';\n };\n\n return (\n | handleSort('id')} style={{ cursor: 'pointer' }}>\n \n Solo ID \n | \n )}\n {columnsToShow.includes('Name') && (\n handleSort('name')} \n style={{ \n cursor: 'pointer',\n position: 'sticky',\n left: 0,\n backgroundColor: 'white',\n zIndex: 2 // Higher than the cells to ensure it stays on top\n }}\n >\n \n Name \n | \n )}\n {columnsToShow.includes('Law Firm') && (\n handleSort('lawFirm')} style={{ cursor: 'pointer' }}>\n \n Law Firm \n | \n )}\n {columnsToShow.includes('Birthdate') && (\n handleSort('birthdate')} style={{ cursor: 'pointer' }}>\n \n Birthdate \n | \n )}\n {columnsToShow.includes('Reference') && (\n handleSort('reference')} style={{ cursor: 'pointer' }}>\n \n Reference \n | \n )}\n {columnsToShow.includes('Lawsuit State') && (\n handleSort('lawsuitState')} style={{ cursor: 'pointer' }}>\n \n Lawsuit State \n | \n )}\n {columnsToShow.includes('Plaintiff') && (\n handleSort('plaintiff')} style={{ cursor: 'pointer' }}>\n \n Plaintiff \n | \n )}\n {columnsToShow.includes('Amount') && (\n handleSort('amount')} style={{ cursor: 'pointer' }}>\n \n Amount \n | \n )}\n {columnsToShow.includes('Status') && (\n handleSort('status')} style={{ cursor: 'pointer' }}>\n \n Status \n | \n )}\n {columnsToShow.includes('Status Date') && (\n handleSort('statusDate')} style={{ cursor: 'pointer' }}>\n \n Status Date \n | \n )}\n {columnsToShow.includes('Offer Amount') && (\n handleSort('offerAmount')} style={{ cursor: 'pointer' }}>\n \n Offer Amount \n | \n )}\n {columnsToShow.includes('# Pays') && (\n handleSort('numberOfPayments')} style={{ cursor: 'pointer' }}>\n \n # Pays \n | \n )}\n {columnsToShow.includes('# Tiers') && (\n handleSort('numberOfTiers')} style={{ cursor: 'pointer' }}>\n \n # Tiers \n | \n )}\n {columnsToShow.includes('%') && (\n handleSort('percentage')} style={{ cursor: 'pointer' }}>\n \n % \n | \n )}\n {columnsToShow.includes('First Payment') && (\n handleSort('firstPayment')} style={{ cursor: 'pointer' }}>\n \n First Payment \n | \n )}\n \n | handleSort('status')} style={{ cursor: 'pointer' }}>\n \n Action \n | \n
|---|
\n \n
\n )}\n \n {basicStats && (\n <>\n {basicStats?.is_on_call_admin && (\n \n Viewing user accounts as administrator.\n \n )}\n\n {basicStats?.law_firm && (\n <>\n
\n\n {collectorMetrics === null ? (\n\n Currently viewing a single account. Click handleFilterRemove('customer_document_id')}>here to view all of them.\n \n )}\n\n {basicStats && accountsData && (\n <>\n {\n const clonedAccounts = JSON.parse(JSON.stringify(accountsData));\n clonedAccounts.customer_info = accounts;\n setAccountsData(clonedAccounts);\n }}\n hasPaymentDetails={accountsData.has_payment_details}\n validFirstPaymentDate={accountsData.valid_first_payment_date}\n />\n\n {accountsData.more_pages && (\n
\n Hello, {basicStats.law_firm.name}
\n\n\n Consumers are notified that each communication is from a debt collector.\n
\n\n\n\n {collectorMetrics === null ? (\n
\n \n
\n ) : (\n \n
\n )}\n \n )}\n\n \n
\n \n
\n \n \n \n
\n Collected
\n{formatDollars(collectorMetrics.collected_amount || 0, false)}
\n\n
\n \n
\n \n \n \n
\n Uncollected
\n{formatDollars(collectorMetrics.uncollected_amount || 0, false)}
\n\n
\n \n
\n \n \n \n
\n Waiting on consumer
\n{formatDollars(collectorMetrics.waiting_on_consumer_amount || 0, false)}
\n\n
\n \n
\n \n \n \n
\n Waiting on you
\n{formatDollars(collectorMetrics.waiting_on_collector_amount || 0, false)}
\n\n
\n \n
\n \n \n \n
\n Your response rate
\n= 90 ? 'text-success' : 'text-warning'}`}>\n {collectorMetrics.response_rate || 0}%\n
\n\n
\n \n
\n \n \n \n
\n Recent offers
\n+{collectorMetrics.offers_count || 0}
\nAccounts
\n\n {filters.length === 0 ? (\n\n \n
\n ) : (\n \n {/* Table header placeholder */}\n
\n )}\n\n\n {selectedFilterValues.customer_document_id && (\n \n \n \n \n \n \n
\n {/* Table rows placeholders */}\n {[...Array(6)].map((_, i) => (\n \n \n \n \n \n \n
\n ))}\n \n \n
\n )}\n\n \n Showing {accountsData.customer_info.length} out of {accountsData.total_count} matching accounts\n
\n \n )}\n Direct Deposit
\n Enter an email address to receive direct deposit instructions.
\n\n We'll email a digital check with the option to deposit it directly to your bank account.
\n Most people use an email address for their accounting department.\n
Payment Details
\n\n
\n Enter your firms payment details here.
\n\n
\n\n \n \n
\n \n If you're being paid by check, each check will be sent in accord with these payment details. Note that you may not enter a PO Box.\n
\n For faster payment, set up direct deposit.\n
Loading...
;\n if (error) return Error: {error}
;\n\n return (\n \n
\n );\n};\n\nexport default Users; ","import React, { useEffect, useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport { useNavigate, useLocation } from 'react-router-dom';\nimport Alert from '../shared/Alert';\n\nconst Login = () => {\n const navigate = useNavigate();\n const location = useLocation();\n const [errorMessage, setErrorMessage] = useState('');\n const [isEmailLogin, setIsEmailLogin] = useState(true);\n\n\n const handleLogin = async (credentials, queryString) => {\n try {\n const response = await fetch('/collectors/api/login', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': document.querySelector('[name=\"csrf-token\"]').content\n },\n body: JSON.stringify(credentials)\n });\n\n const data = await response.json();\n \n if (!response.ok || data.error) {\n setErrorMessage(data.error || 'An unexpected error occurred');\n return;\n }\n\n const authCheckResponse = await fetch('/collectors/api/check_auth', {\n headers: {\n 'Accept': 'application/json'\n }\n });\n\n if (authCheckResponse.ok) {\n navigate(`/collectors/accounts${queryString}`);\n } else {\n setErrorMessage('Login succeeded but session initialization failed. Please try again.');\n }\n \n } catch (error) {\n console.error('Error during login:', error);\n setErrorMessage('A network error occurred. Please check your connection and try again.');\n }\n };\n\n useEffect(() => {\n const checkAuthAndToken = async () => {\n try {\n // Get URL params first\n const params = new URLSearchParams(location.search);\n \n // Create query string without auth_token\n const nonAuthParams = new URLSearchParams();\n params.forEach((value, key) => {\n if (key !== 'auth_token') {\n nonAuthParams.set(key, value);\n }\n });\n const queryString = nonAuthParams.toString() ? `?${nonAuthParams}` : '';\n \n // Check if already authenticated\n const response = await fetch('/collectors/api/check_auth', {\n headers: {\n 'Accept': 'application/json'\n }\n });\n \n if (response.ok) {\n navigate(`/collectors/accounts${queryString}`);\n return;\n }\n\n // If not authenticated, check for auth token\n const authToken = params.get('auth_token');\n if (authToken) {\n await handleLogin({ auth_token: authToken }, queryString);\n }\n } catch (error) {\n console.error('Error in authentication flow:', error);\n setErrorMessage('Error during authentication. Please try again.');\n }\n };\n\n checkAuthAndToken();\n }, [navigate, location]);\n\n const handleSubmit = (e) => {\n e.preventDefault();\n const params = new URLSearchParams(location.search);\n const remainingParams = new URLSearchParams();\n params.forEach((value, key) => {\n if (key !== 'auth_token') {\n remainingParams.set(key, value);\n }\n });\n\n if (isEmailLogin) {\n const email = e.target.email.value;\n const password = e.target.password.value;\n handleLogin({ email, password }, remainingParams.toString());\n } else {\n const authToken = e.target.auth_token.value;\n handleLogin({ auth_token: authToken }, remainingParams.toString());\n }\n };\n\n return (\n \n
\n \n
\n\n
\n \n
\n \n Users
\n\n
\n
\n\n Authentication Code
\n
People in your organization can use this code to access your dashboard.
\n e.target.select()}\n />\n\n\n
\n {successMessage && (\n \n {successMessage}\n \n )}\n {formError && (\n \n \n \n {formError}\n \n \n \n )}\n \n \n \n
\n
\n | Role | \n\n | |
|---|---|---|
| {user.email} | \n{user.law_firm_scope} | \n\n {user.email !== currentUserEmail && hoveredRowId === user.id && (\n | \n
| \n | \n \n | \n \n \n | \n
\n
\n );\n};\n\nexport default Login;","import React, { useState, useEffect } from 'react';\nimport { useNavigate, useSearchParams } from 'react-router-dom';\nimport Alert from '../shared/Alert';\n\nconst InviteAccept = () => {\n const [searchParams] = useSearchParams();\n const navigate = useNavigate();\n const [password, setPassword] = useState('');\n const [confirmPassword, setConfirmPassword] = useState('');\n const [error, setError] = useState(null);\n const [loading, setLoading] = useState(false);\n const token = searchParams.get('token');\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setError(null);\n setLoading(true);\n\n if (password !== confirmPassword) {\n setError(\"Passwords don't match\");\n setLoading(false);\n return;\n }\n\n try {\n const response = await fetch('/collectors/api/accept_invite', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': document.querySelector('[name=\"csrf-token\"]').content\n },\n body: JSON.stringify({\n token,\n password\n })\n });\n\n const data = await response.json();\n\n if (!response.ok) {\n throw new Error(data.message || 'Failed to set password');\n }\n\n // Redirect to login page\n navigate('/collectors');\n } catch (err) {\n setError(err.message);\n } finally {\n setLoading(false);\n }\n };\n\n return (\n \n
\n \n \n {errorMessage}\n \n )}\n \n \n\n {\n e.preventDefault();\n setIsEmailLogin(!isEmailLogin);\n }}\n >\n {isEmailLogin ? 'Have a login token?' : 'Back to email login'}\n \n
\n\n Forgot your password?\n \n
\n \n {isEmailLogin \n ? 'Sign In' \n : 'Enter Authentication Code'}\n
\n\nYou can sign in with your email and password or use a login token.
\n \n {errorMessage && (\n\n
\n
\n );\n};\n\nexport default InviteAccept; ","import React, { useState, useEffect, useRef } from 'react';\nimport Sidebar from './Sidebar';\n\nconst actionLookupTable = {\n make_offer: 'Offer or counteroffer made',\n request_payment_details: 'Payment details requested',\n request_settlement_agreement: 'Settlement agreement requested'\n};\n\nconst stateAbbreviations = {\n 'Alabama': 'AL',\n 'Alaska': 'AK',\n 'Arizona': 'AZ',\n 'Arkansas': 'AR',\n 'California': 'CA',\n 'Colorado': 'CO',\n 'Connecticut': 'CT',\n 'Delaware': 'DE',\n 'Florida': 'FL',\n 'Georgia': 'GA',\n 'Hawaii': 'HI',\n 'Idaho': 'ID',\n 'Illinois': 'IL',\n 'Indiana': 'IN',\n 'Iowa': 'IA',\n 'Kansas': 'KS',\n 'Kentucky': 'KY',\n 'Louisiana': 'LA',\n 'Maine': 'ME',\n 'Maryland': 'MD',\n 'Massachusetts': 'MA',\n 'Michigan': 'MI',\n 'Minnesota': 'MN',\n 'Mississippi': 'MS',\n 'Missouri': 'MO',\n 'Montana': 'MT',\n 'Nebraska': 'NE',\n 'Nevada': 'NV',\n 'New Hampshire': 'NH',\n 'New Jersey': 'NJ',\n 'New Mexico': 'NM',\n 'New York': 'NY',\n 'North Carolina': 'NC',\n 'North Dakota': 'ND',\n 'Ohio': 'OH',\n 'Oklahoma': 'OK',\n 'Oregon': 'OR',\n 'Pennsylvania': 'PA',\n 'Rhode Island': 'RI',\n 'South Carolina': 'SC',\n 'South Dakota': 'SD',\n 'Tennessee': 'TN',\n 'Texas': 'TX',\n 'Utah': 'UT',\n 'Vermont': 'VT',\n 'Virginia': 'VA',\n 'Washington': 'WA',\n 'West Virginia': 'WV',\n 'Wisconsin': 'WI',\n 'Wyoming': 'WY',\n 'District of Columbia': 'DC'\n};\n\nconst Notifications = () => {\n const [policies, setPolicies] = useState([]);\n const [actions, setActions] = useState([]);\n const [states, setStates] = useState([]);\n const [newPolicy, setNewPolicy] = useState({\n email_type: '',\n state: [],\n emails: ['', '']\n });\n const [isActionOpen, setIsActionOpen] = useState(false);\n const [isStateOpen, setIsStateOpen] = useState(false);\n const actionDropdownRef = useRef(null);\n const stateDropdownRef = useRef(null);\n\n useEffect(() => {\n const fetchData = async () => {\n try {\n const [actionsResponse, statesResponse, policiesResponse] = await Promise.all([\n fetch('/collectors/api/get_notification_policy_actions'),\n fetch('/collectors/api/get_notification_policy_states'),\n fetch('/collectors/api/get_notification_policies')\n ]);\n\n if (actionsResponse.ok && statesResponse.ok && policiesResponse.ok) {\n const actionsData = await actionsResponse.json();\n const statesData = await statesResponse.json();\n const policiesData = await policiesResponse.json();\n \n setActions(actionsData);\n setStates(statesData);\n setPolicies(policiesData.map(policy => ({\n ...policy,\n emails: policy.addresses.split(';')\n })));\n } else {\n console.error('Error fetching data');\n }\n } catch (error) {\n console.error('Error fetching data:', error);\n }\n };\n\n fetchData();\n }, []);\n\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (actionDropdownRef.current && !actionDropdownRef.current.contains(event.target)) {\n setIsActionOpen(false);\n }\n if (stateDropdownRef.current && !stateDropdownRef.current.contains(event.target)) {\n setIsStateOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n const formatActionText = (action) => {\n if (action === '*') return 'All';\n return actionLookupTable[action];\n };\n\n const formatStateText = (state) => {\n if (Array.isArray(state)) {\n if (state.length === 0) return 'Select States';\n if (state.includes('*')) return 'All';\n if (state.length > 0) {\n return state\n .map(s => stateAbbreviations[s] || s)\n .join(', ');\n }\n }\n // Handle semi-colon separated string\n if (typeof state === 'string' && state.includes(';')) {\n return state\n .split(';')\n .map(s => s.trim())\n .map(s => stateAbbreviations[s] || s)\n .join(', ');\n }\n return state === '*' ? 'All' : (stateAbbreviations[state] || state);\n };\n\n const handleAddEmail = () => {\n setNewPolicy({\n ...newPolicy,\n emails: [...newPolicy.emails, '']\n });\n };\n\n const handleEmailChange = (index, value) => {\n const updatedEmails = [...newPolicy.emails];\n updatedEmails[index] = value;\n \n // Add new empty field if all existing fields are non-empty\n if (updatedEmails.every(email => email.trim() !== '')) {\n updatedEmails.push('');\n }\n \n setNewPolicy({\n ...newPolicy,\n emails: updatedEmails\n });\n };\n\n const handleRemoveEmail = (index) => {\n const updatedEmails = newPolicy.emails.filter((_, i) => i !== index);\n // Ensure we maintain minimum 2 email fields\n while (updatedEmails.length < 2) {\n updatedEmails.push('');\n }\n setNewPolicy({\n ...newPolicy,\n emails: updatedEmails\n });\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n \n const filteredEmails = newPolicy.emails\n .map(email => email.trim())\n .filter(email => email !== '');\n \n if (filteredEmails.length === 0) {\n alert('Please enter at least one email address');\n return;\n }\n\n try {\n const csrfToken = document.querySelector('[name=\"csrf-token\"]').content;\n const response = await fetch('/collectors/api/add_notification_policy', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': csrfToken\n },\n body: JSON.stringify({\n ...newPolicy,\n email_type: newPolicy.email_type === 'All' ? '*' : newPolicy.email_type,\n state: newPolicy.state.length > 0 ? newPolicy.state.map(s => s === '*' ? '*' : s) : null,\n emails: filteredEmails\n })\n });\n \n if (response.ok) {\n const newPolicyData = await response.json(); // Get the response with the new policy ID\n const newPolicy = newPolicyData.policy;\n setPolicies([...policies, {\n ...newPolicy,\n id: newPolicy.id, // Use the ID from the server\n emails: filteredEmails\n }]);\n setNewPolicy({ email_type: '', state: [], emails: ['', ''] });\n } else {\n alert('Failed to add policy. Please try again.');\n }\n } catch (error) {\n console.error('Error adding notification policy:', error);\n alert('Failed to add policy. Please try again.');\n }\n };\n\n const handleDelete = async (policyId) => {\n if (!confirm('Are you sure you want to delete this notification policy?')) {\n return;\n }\n\n try {\n const csrfToken = document.querySelector('[name=\"csrf-token\"]').content;\n const response = await fetch(`/collectors/api/notification_policies/${policyId}`, {\n method: 'DELETE',\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': csrfToken\n }\n });\n\n if (response.ok) {\n // Remove the deleted policy from the state\n setPolicies(policies.filter(policy => policy.id !== policyId));\n } else {\n console.error('Error deleting policy');\n alert('Failed to delete policy. Please try again.');\n }\n } catch (error) {\n console.error('Error deleting policy:', error);\n alert('Failed to delete policy. Please try again.');\n }\n };\n\n const Chevron = () => (\n \n );\n\n return (\n \n
\n \n
\n \n
\n \n \n {error}\n \n )}\n\n \n
\n Set Your Password
\n \n {error && (\n\n
\n );\n};\n\nexport default Notifications;","import React from 'react';\nimport { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';\nimport PrivateRoute from './collectors_dashboard/PrivateRoute';\nimport Accounts from './collectors_dashboard/Accounts';\nimport DirectDeposit from './collectors_dashboard/DirectDeposit';\nimport PaymentDetails from './collectors_dashboard/PaymentDetails';\nimport Users from './collectors_dashboard/Users';\nimport Login from './collectors_dashboard/Login';\nimport InviteAccept from './collectors_dashboard/InviteAccept';\nimport Notifications from './collectors_dashboard/Notifications';\nconst CollectorsDashboardRoot = () => {\n return (\n \n
\n \n
\n \n
\n\n Manage Notifications
\nWe recommend setting at least 2 recipients per event.
\n\n {/* Display existing policies or empty state */}\n\n {policies.length > 0 ? (\n <>\n
\n\n \n
\n {policies.map((policy, index) => (\n \n Event\n
\n \n State / Territory\n
\n \n Recipient Emails\n
\n \n
\n \n
\n ))}\n \n ) : (\n \n
\n \n {formatActionText(policy.email_type)}\n
\n \n
\n \n {formatStateText(policy.state)}\n
\n \n
\n \n {policy.emails.join(', ')}\n
\n \n handleDelete(policy.id)}\n style={{ \n cursor: 'pointer',\n fontSize: '1.5rem',\n lineHeight: 1,\n height: '46px'\n }}\n aria-label=\"Delete policy\"\n >\n ×\n \n
\n \n No recipients added yet\n
\n )}\n Add new recipients
\n\n {/* Form for adding new policy */}\n\n \n
\n \n {!hiddenCards.soloSettle && (\n
\n );\n};\n\nexport default CallToActionCards; ","import React from 'react';\nimport { Card, CardContent, CardTitle, CardDescription } from '../ui/Card';\n\nconst CreditFactor = ({ label, value, statusTier, impact }) => {\n const statusTierInfo = {\n 1: { class: 'bg-success', text: 'Excellent' },\n 2: { class: 'bg-primary', text: 'Good' },\n 3: { class: 'bg-warning', text: 'Fair' },\n 4: { class: 'bg-danger', text: 'Needs some love' },\n 5: { class: 'bg-danger', text: 'Needs extra love' }\n }\n\n return (\n \n \n \n \n Are you ready to resolve your debt once and for all? SoloSettle makes it easy to settle with your collector.\n \n \n Learn More\n \n \n \n
\n )}\n {!hiddenCards.debtAnswer && (\n \n
\n Try SoloSettle
\n \n \n \n You made an offer to settle but you haven't filed an Answer yet on your lawsuit. Filing an Answer is crucial for settling.\n \n \n File an Answer\n \n \n \n
\n )}\n \n
\n File an Answer on your Lawsuit
\n
\n)};\n\nconst CreditReportCard = ({ creditReport }) => {\n const factors = [\n { key: 'payment_history', label: 'Payment History' },\n { key: 'credit_utilization', label: 'Credit Card Usage' },\n { key: 'derogatory_marks', label: 'Derogatory Marks' },\n { key: 'credit_age', label: 'Credit Age' },\n { key: 'total_accounts', label: 'Total Accounts' },\n { key: 'hard_inquiries', label: 'Hard Inquiries' },\n { key: 'available_credit', label: 'Available Credit' }\n ];\n\n return (\n \n {label}:\n \n {typeof value === 'object' ? `${value.years} yrs, ${value.months} mos` : value}\n {typeof value === 'number' && !label.includes('Accounts') && !label.includes('Marks') && !label.includes('Inquiries') ? '%' : ''}\n \n
\n \n \n {statusTierInfo[statusTier].text}\n \n |\n {impact} Impact\n
\n Credit Report
\n{creditReport.improvement_message}
\nCredit Factors
\n {factors.map(({ key, label }) => (\nSorry, there was an error fetching your credit report.
\nPlease double-check your profile information and try again.
\n \n \n Go to profile\n \nFind hidden debt in collections.
\nMost people being sued for a debt have 4 other accounts in collections. We can help you settle every one.
\n \n \n \n\n This won't affect your credit score. By clicking continue, you agree to a soft-credit pull as stated in our Terms of Service.\n
\n{title}
\n{message}
\n \n \n {buttonText}\n \nFind hidden debt in collections.
\nMost people being sued for a debt have 4 other accounts in collections. We can help you settle every one.
\n \n \n See my credit report\n \n \n\n This won't affect your credit score. By clicking continue, you agree to a soft-credit pull as stated in our Terms of Service.\n
\n\n {account.logo ? (\n 
\n ) : (\n
\n );\n};\n\nconst IncomeSourceItem = ({ source }) => {\n if (!source) return null;\n \n return (\n \n {account.name.charAt(0)}\n
\n )}\n \n
\n {account.name}
\n\n {account.institution_name} • {accountType} • {account.mask}\n
\n \n {formatCurrency(account.total_balance)}\n
\n\n
\n );\n};\n\nconst FinancialMetric = ({ label, value }) => (\n \n
\n {source.employer_name}
\n {source.type && (\n \n {source.type}\n \n )}\nAverage monthly income: {formatCurrency(source.average_monthly_income)}
\nFrequency: {formatPayFrequency(source.pay_frequency)}
\n {source.next_payment_date && (\nNext payment: {formatDate(source.next_payment_date)}
\n )}\n\n
\n);\n\nconst FinancialSnapshotCard = ({ financialReport }) => {\n if (!financialReport) {\n return (\n {label}
\n {value}
\nFinancial Snapshot
\nNo financial data available.
\nFinancial Snapshot
\n \nBank Accounts
\n \n {bank_accounts && bank_accounts.length > 0 ? (\n bank_accounts.map((account, index) => (\nNo bank accounts found.
\n )}\n \n {income_sources && income_sources.length > 0 && (\n <>\n\n Income\n \n {income_sources.length} {income_sources.length === 1 ? 'source' : 'sources'}\n \n
\n \n {income_sources.map((source, index) => (\n
\n \n )}\n \n
\n ))}\n Income {index + 1}
\n Get a snapshot of your finances.
\nWe can help you understand your financial situation to better manage your debts.
\n \n \n Connect my bank account\n \n \n\n By connecting your account, you authorize us to access your financial information as stated in our Terms of Service.\n
\nReconnect your bank account
\nYour bank account connection expired. Please reconnect your bank account to view your financial report.
\n\n \n Reconnect my bank account\n \n\n\n By reconnecting your account, you authorize us to access your financial information as stated in our Terms of Service.\n
\n\n
\n );\n};\n\nexport default ProgressChecklist; ","import React from 'react';\nimport ProgressChecklist from './ProgressChecklist';\n\nconst DocumentCard = ({ document }) => {\n const formatDate = (dateString) => {\n const date = new Date(dateString);\n return date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });\n };\n\n return (\n \n \n
\n {\n if (!el) return;\n \n el.addEventListener('show.bs.collapse', () => {\n const accordionItem = window.document.getElementById(`accordion-item-${sectionIndex}-${document.id}`);\n const shouldBeMuted = !allSectionStepsCompleted(section);\n accordionItem.classList[shouldBeMuted ? 'add' : 'remove']('muted');\n });\n\n el.addEventListener('hide.bs.collapse', () => {\n const accordionItem = window.document.getElementById(`accordion-item-${sectionIndex}-${document.id}`);\n const shouldBeMuted = !hasSectionStarted(section);\n accordionItem.classList[shouldBeMuted ? 'add' : 'remove']('muted');\n });\n }}\n >\n {section.steps.map((step, stepIndex) => (\n step.current && document.resume_url ? (\n
\n \n \n \n {step.title}\n {canShowLink(stepIndex) ? (\n step.value ? (\n <>: \n {step.value}\n \n ) : (\n <>: \n <edit>\n \n )\n ) : (\n step.value ? `: ${step.value}` : ''\n )}\n \n \n
\n ) : (\n \n {step.title}\n {canShowLink(stepIndex) ? (\n step.value ? (\n <>: \n {step.value}\n \n ) : (\n <>: \n <edit>\n \n )\n ) : (\n step.value ? `: ${step.value}` : ''\n )}\n
\n )\n ))}\n \n
\n );\n};\n\nexport default DocumentCard; ","import React from 'react';\n\nfunction useAnimateValue(value, duration) {\n const [current, setCurrent] = React.useState(value);\n\n React.useLayoutEffect(() => {\n const stepDuration = 1/50;\n const totalSteps = duration / stepDuration;\n const stepSize = (value - current) / totalSteps;\n let currentStep = 0;\n\n const interval = setInterval(() => setCurrent(current => {\n currentStep++;\n if (currentStep >= totalSteps) {\n clearInterval(interval);\n return value;\n }\n return current + stepSize;\n }), stepDuration * 1000);\n\n return () => clearInterval(interval);\n }, [value, duration]);\n\n return current;\n}\n\nconst AnimatePercentage = React.memo(({ value, duration }) => {\n const v = useAnimateValue(value, duration);\n return Math.round(v * 100) / 100;\n});\n\nconst ProgressCircle = ({ \n percentage = 0,\n strokeWidth = 35,\n ballStrokeWidth = 0,\n reduction = 0,\n transitionDuration = 0.5,\n background = '#6A97F0',\n hideBall = true,\n gradient = [\n { stop: 0.6, color: '#0058F0' },\n { stop: 1, color: '#001100' }\n ],\n titleText = null\n}) => {\n const width = 200;\n const center = width / 2;\n const height = center + center * Math.cos(reduction * Math.PI);\n const [unique] = React.useState(() => Math.random().toString());\n const rotate = -90 + (180 * reduction);\n const r = center - strokeWidth / 2 - (ballStrokeWidth / 2);\n const circumference = Math.PI * r * 2;\n const offset = circumference * (100 - percentage * (1 - reduction)) / 100;\n\n return (\n \n \n
\n {document.title}
\n \n\n Started on {formatDate(document.created_at)}\n
\n\n
\n Status
\n \n\n
\n Progress Checklist
\n\n {document.sectioned_steps?.map((section, sectionIndex) => (\n
\n \n \n
\n );\n};\n\nexport default React.memo(ProgressCircle); ","import React from 'react';\nimport ProgressCircle from '../shared/ProgressCircle';\n\nconst PaymentPlanSummary = ({ paymentPlan }) => {\n if (!paymentPlan) return null;\n\n const {\n total_amount_customer_pays,\n balance_remaining,\n total_savings,\n previous_payment_date,\n next_payment_amount,\n next_payment_date,\n payment_history,\n progress_percentage,\n last_payment_date,\n total_payments_count,\n payments_remaining,\n is_subscription_active,\n is_subscription_upcoming,\n subscription_needs_attention,\n subscription_latest_invoice_url\n } = paymentPlan;\n\n return (\n \n
\n\n {payment_history && payment_history.length > 0 && (\n
\n );\n};\n\nexport default PaymentPlanSummary; \n","export const nullifyEmptyFormValues = (obj: any) => {\n if (!obj || typeof obj !== 'object') {\n return obj && obj.length > 0 ? obj : null;\n }\n\n return Object.fromEntries(\n Object.entries(obj).map(([key, value]) => [\n key,\n nullifyEmptyFormValues(value)\n ])\n );\n};\n\nexport const setNestedFormValue = (obj: any, path: string, value: any) => {\n const keys = path.split('.');\n const lastKey = keys.pop();\n const target = keys.reduce((acc, key) => (acc[key] = acc[key] || {}), obj);\n target[lastKey] = value;\n return { ...obj };\n};","import React, { useEffect, useRef } from 'react';\nimport FloatingLabel from 'react-bootstrap/FloatingLabel';\nimport Form from 'react-bootstrap/Form';\n\nconst GooglePlacesAutocomplete = ({ \n value,\n onChange,\n onPlaceSelected,\n isInvalid,\n error,\n disabled = false\n}) => {\n const inputRef = useRef(null);\n const autocompleteRef = useRef(null);\n const scriptRef = useRef(null);\n\n useEffect(() => {\n const loadGoogleMapsScript = () => {\n const apiKey = document.body.getAttribute('data-google-maps-api-key');\n scriptRef.current = document.createElement('script');\n scriptRef.current.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&loading=async&callback=initGooglePlaces`;\n scriptRef.current.async = true;\n scriptRef.current.defer = true;\n \n window.initGooglePlaces = () => {\n initAutocomplete();\n delete window.initGooglePlaces;\n };\n\n document.head.appendChild(scriptRef.current);\n };\n\n if (!window.google) {\n loadGoogleMapsScript();\n } else {\n initAutocomplete();\n }\n\n return () => {\n if (autocompleteRef.current) {\n window.google.maps.event.clearInstanceListeners(autocompleteRef.current);\n }\n if (scriptRef.current) {\n document.head.removeChild(scriptRef.current);\n }\n if (window.initGooglePlaces) {\n delete window.initGooglePlaces;\n }\n };\n }, []);\n\n const initAutocomplete = () => {\n if (!inputRef.current || !window.google) return;\n\n autocompleteRef.current = new window.google.maps.places.Autocomplete(inputRef.current, {\n componentRestrictions: { country: [\"us\", \"as\", \"gu\", \"mp\", \"pr\", \"um\", \"vi\"] },\n fields: [\"address_components\"],\n types: [\"address\"]\n });\n\n // Prevent form submission on enter\n inputRef.current.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n }\n });\n\n autocompleteRef.current.addListener('place_changed', () => {\n const place = autocompleteRef.current.getPlace();\n let address = {\n address_line1: '',\n city: '',\n state: '',\n zip_code: ''\n };\n\n for (const component of place.address_components) {\n const componentType = component.types[0];\n\n switch (componentType) {\n case \"street_number\":\n address.address_line1 = `${component.long_name} ${address.address_line1}`;\n break;\n case \"route\":\n address.address_line1 += component.short_name;\n break;\n case \"postal_code\":\n address.zip_code = component.long_name;\n break;\n case \"locality\":\n address.city = component.long_name;\n break;\n case \"administrative_area_level_1\":\n address.state = component.short_name;\n break;\n }\n }\n\n onPlaceSelected(address);\n });\n };\n\n return (\n Payment Plan
\n\n {(is_subscription_active || is_subscription_upcoming) && next_payment_amount && next_payment_date && (\n <>\n\n \n
\n\n \n {next_payment_amount} auto-pay scheduled for {next_payment_date}.\n
\n \n
\n \n )}\n\n {subscription_needs_attention && next_payment_amount && previous_payment_date && (\n \n Upcoming payment: {next_payment_amount}\n
\n \n Due {next_payment_date}\n
\n \n \n
\n )}\n\n \n Failed autopay of {next_payment_amount} on {previous_payment_date}. If you fail to make this payment, you will be in default. Click here to update your payment method.\n
\n \n\n {payment_history && payment_history.length > 0 && (\n
\n
\n
\n )}\n \n Transactions
\n {payment_history.map((payment) => (\n\n {payment.amount} paid on {payment.date}\n
\n ))}\n \n
\n
\n Payment Plan Summary
\n\n\n
\n \n
\n \n \n Total payment amount:\n {total_amount_customer_pays}\n
\n \n Balance remaining:\n {balance_remaining}\n
\n {total_savings && (\n \n Total savings:\n {total_savings}\n
\n )}\n \n Payments:\n {total_payments_count}\n
\n \n Payments remaining:\n {payments_remaining}\n
\n {is_subscription_active && (\n \n Last payment:\n {last_payment_date}\n
\n )}\n \n
\n \n {showFullSSN ? (\n \n \n {errors.ssn?.join(', ')}\n \n \n ) : (\n \n \n {errors.ssn_last_four?.join(', ')}\n \n \n )}\n \n {showFullSSN ? \"I only want to enter the last four digits.\" : \"I want to enter the full SSN.\"}\n \n
\n );\n};\n\nexport default SSNInput; ","import React, { useState, useEffect } from 'react';\nimport { FetchRequest } from '@rails/request.js';\nimport FloatingLabel from 'react-bootstrap/FloatingLabel';\nimport Form from 'react-bootstrap/Form';\nimport { Card, CardContent } from '../ui/Card';\nimport { nullifyEmptyFormValues, setNestedFormValue } from '../../utils/form';\nimport GooglePlacesAutocomplete from '../shared/GooglePlacesAutocomplete';\nimport SSNInput from '../shared/SSNInput';\nimport Alert from '../shared/Alert';\n\nconst PROFILE_EDIT_PATH = \"/users\"\n\nconst ProfileEdit = ({ initialData, onProfileUpdate }) => {\n const [formData, setFormData] = useState({\n first_name: '',\n last_name: '',\n email: '',\n current_password: '',\n password: '',\n password_confirmation: '',\n metadata: {\n address_line1: '',\n city: '',\n state: '',\n zip_code: '',\n birthdate: '',\n ssn_last_four: '',\n ssn: ''\n }\n });\n const [errors, setErrors] = useState({});\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [successMessage, setSuccessMessage] = useState('');\n const [redirectUrl, setRedirectUrl] = useState(null);\n const isOAuthUser = initialData?.is_oauth_user;\n\n useEffect(() => {\n if (initialData) {\n setFormData(prevData => ({\n ...prevData,\n first_name: initialData.first_name || '',\n last_name: initialData.last_name || '',\n email: initialData.email || '',\n metadata: {\n ...prevData.metadata,\n ...initialData.metadata\n }\n }));\n }\n }, [initialData]);\n\n useEffect(() => {\n const urlParams = new URLSearchParams(window.location.search);\n const redirectUrl = urlParams.get('redirect_url');\n if (redirectUrl) {\n setRedirectUrl(redirectUrl);\n }\n }, []);\n\n const allFieldsFilled = () => {\n return formData.first_name && formData.last_name && formData.metadata.address_line1 && formData.metadata.city && formData.metadata.state && formData.metadata.zip_code && formData.metadata.birthdate && (formData.metadata.ssn || formData.metadata.ssn_last_four);\n }\n\n const handleChange = (e) => {\n const { name, value } = e.target;\n\n setFormData(prev => setNestedFormValue(prev, name, value));\n\n // Clear any existing error for this field\n if (name.split('.').reduce((acc, key) => acc?.[key], errors)) {\n setErrors(prev => setNestedFormValue(prev, name, null));\n }\n\n // Clear success message if exists\n if (successMessage) {\n setSuccessMessage('');\n }\n };\n\n const handlePlaceSelected = (address) => {\n setFormData(prev => ({\n ...prev,\n metadata: { ...prev.metadata, ...address }\n }));\n \n // Clear any existing errors for address fields\n if (errors.metadata) {\n const ADDRESS_FIELDS = ['address_line1', 'city', 'state', 'zip_code'];\n\n setErrors(prev => ({\n ...prev,\n metadata: {\n ...prev.metadata,\n ...Object.fromEntries(ADDRESS_FIELDS.map(field => [field, null]))\n }\n }));\n }\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setIsSubmitting(true);\n setErrors({});\n setSuccessMessage('');\n\n const userData = nullifyEmptyFormValues({\n first_name: formData.first_name,\n last_name: formData.last_name,\n metadata: formData.metadata\n });\n\n // Only include password fields for non-OAuth users\n if (!isOAuthUser) {\n userData.current_password = formData.current_password;\n \n // Only include new password fields if a new password is being set\n if (formData.password) {\n userData.password = formData.password;\n userData.password_confirmation = formData.password_confirmation;\n }\n }\n\n // Validate SSN\n if (formData.metadata.ssn) {\n const ssn = formData.metadata.ssn.replace(/\\D/g, '');\n if (ssn.length !== 9) {\n setErrors(prev => ({ ...prev, metadata: { ...prev.metadata, ssn: ['Full SSN must be 9 digits'] } }));\n setIsSubmitting(false);\n return;\n }\n }\n if (formData.metadata.ssn_last_four) {\n const ssnLastFour = formData.metadata.ssn_last_four.replace(/\\D/g, '');\n if (ssnLastFour.length !== 4) {\n setErrors(prev => ({ ...prev, metadata: { ...prev.metadata, ssn_last_four: ['Last 4 of SSN must be 4 digits'] } }));\n setIsSubmitting(false);\n return;\n }\n }\n\n try {\n const request = new FetchRequest(\"PUT\", PROFILE_EDIT_PATH, {\n body: { user: userData },\n responseKind: \"json\"\n });\n \n const response = await request.perform();\n const data = await response.json;\n \n if (response.ok) {\n setFormData(prev => ({\n ...prev,\n current_password: '',\n password: '',\n password_confirmation: ''\n }));\n setSuccessMessage('Profile updated successfully');\n \n if (onProfileUpdate) {\n onProfileUpdate(data.user);\n }\n\n if (redirectUrl) {\n window.location.href = redirectUrl;\n }\n } else {\n setErrors(data.errors || {});\n if (data.error === \"Current password can't be blank\") {\n setErrors(prev => ({\n ...prev,\n current_password: [\"Current password is required to make changes\"]\n }));\n }\n }\n } catch (error) {\n setErrors({ base: ['An error occurred while updating your profile.'] });\n } finally {\n setIsSubmitting(false);\n }\n };\n\n return (\n \n
\n\n {successMessage && (\n Basic Information
\n \n We use AES 256-bit block-level asymmetric non-deterministic encryption to protect your data.\n \n\n \n {successMessage}\n \n
\n )}\n\n {errors.base && (\n \n \n {errors.base.join(', ')}\n \n
\n )}\n\n {redirectUrl && redirectUrl.includes('credit_report') && !allFieldsFilled() && (\n \n \n Please fill out the basic information below to view your credit report.\n \n
\n )}\n\n \n \n
\n\n Account Actions
\n\n
\n \n \n Sign Out\n \n
\n \n
\n );\n } else if (info.civil_number) {\n return {info.plaintiff_name}
\n{formatMoney(info.lawsuit_amount)}
\nCase {info.civil_number}
;\n } else {\n returnCase #{info.id}
;\n }\n };\n\n const handleProfileUpdate = (updatedProfile) => {\n setUserProfile(prev => ({\n ...prev,\n ...updatedProfile\n }));\n };\n\n const handleTabChange = (tab) => {\n const newTab = activeTab === tab ? 'all' : tab;\n setActiveTab(newTab);\n const url = new URL(window.location);\n url.searchParams.set('activeTab', newTab);\n window.history.pushState({}, '', url);\n };\n\n return (\n\n
\n );\n};\n\nexport default Dashboard; ","import React from 'react';\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Dashboard from './consumer_dashboard/Dashboard';\n\nconst ConsumerDashboardRoot = () => {\n return (\n \n
\n\n {activeTab === 'all' && \n
\n Dashboard
\n {flashNotice && (\n{flashNotice}
\n )}\n \n handleTabChange('all')}\n >\n \n \n {cases.length > 0 && (\n handleTabChange('cases')}\n >\n Cases\n \n )}\n handleTabChange('profile')}\n >\n Profile\n \n {creditReport && (\n handleTabChange('credit_report')}\n >\n Credit Report\n \n )}\n {financialReport && financialReport.status == 'available' && (\n handleTabChange('financial_report')}\n >\n Financial Snapshot\n \n )}\n {unorganizedDocuments.length > 0 && (\n handleTabChange('documents')}\n >\n Unassigned\n \n )}\n
\n \n {loading ? (\n
\n\n \n \n \n \n \n
\n ) : (\n \n
\n \n \n
\n \n \n \n
\n \n {['all', 'cases'].includes(activeTab) && cases.map((consumer_case) => (\n
}\n {unorganizedDocuments.map((document) => (\n\n \n \n \n ))}\n \n )}\n\n {['all', 'profile'].includes(activeTab) && (\n <>\n {(unorganizedDocuments.length > 0 || cases.length > 0) && activeTab == 'all' &&
}\n
}\n
}\n
\n )}\n \n
\n ))}\n\n {['all', 'documents'].includes(activeTab) && unorganizedDocuments.length > 0 && (\n <>\n {cases.length > 0 && activeTab == 'all' && \n
\n \n \n
\n \n
\n \n {consumer_case.has_payment_plan && (\n \n \n {consumer_case.documents.map(doc => \n doc.payment_plan && \n \n )}\n {consumer_case.documents.map((document) => (\n \n \n \n \n ))}\n
\n }\n {unorganizedDocuments.map((document) => (\n
}\n
}\n
}\n
\n
\n \n \n \n \n \n \n Debt Answer\n \n \n \n \n
\n Create a New Document
Use this document to respond to a debt collection lawsuit.
\n \n\n \n \n SoloSettle\n \nUse this to settle a debt.
\n \n\n \n \n Document Generation\n \nGenerate documents with AI.
\n \n\n
\n\n \n
\n );\n};\n\nexport default ExtractContinueRoot;","import React, { useState, useEffect } from 'react';\nimport { get } from '@rails/request.js';\nimport { useNavigate } from 'react-router-dom';\n\nconst Dashboard = () => {\n const [userData, setUserData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [viewEmail, setViewEmail] = useState('');\n const [viewCustomerDocumentId, setViewCustomerDocumentId] = useState('');\n const navigate = useNavigate();\n\n useEffect(() => {\n const fetchData = async () => {\n try {\n const response = await get('/on_call/dashboard?format=json', {\n responseKind: 'json'\n });\n const data = await response.json;\n if (!response.ok) {\n throw new Error(data.error);\n }\n setUserData(data.user);\n } catch (error) {\n setError(error.message);\n } finally {\n setLoading(false);\n }\n };\n\n fetchData();\n }, []);\n\n const handleUserView = (e) => {\n e.preventDefault();\n const trimmedEmail = viewEmail.trim();\n if (trimmedEmail) {\n navigate(`/on_call/users/${encodeURIComponent(trimmedEmail)}`);\n }\n };\n\n const handleCustomerDocumentView = (e) => {\n e.preventDefault();\n const trimmedCustomerDocumentId = viewCustomerDocumentId.trim();\n if (trimmedCustomerDocumentId) {\n navigate(`/on_call/customer_documents/${encodeURIComponent(trimmedCustomerDocumentId)}`);\n }\n };\n\n if (loading) {\n return (\n Extracted Data
\n \n\n You can click on any blue link to fix the data, or click Continue to jump to the first incomplete step.\n
\n\n {document?.sectioned_steps.length > 0 && document?.sectioned_steps[0].steps.some(step => step.value) ? (\n\n
\n ) : (\n \n
\n \n No data could be automatically extracted from your document. Click Continue to add information manually.\n
\n )}\n\n\n\n \n
\n
\n );\n }\n\n if (error) {\n return (\n \n
\n \n
\n Loading...
\n\n
\n );\n }\n\n return (\n \n
\n \n
\n Error
\nThere was an error loading the dashboard: {error}
\n\n
\n );\n};\n\nexport default Dashboard; ","import React, { useState, useEffect } from 'react';\nimport { get } from '@rails/request.js';\nimport { useNavigate, useParams } from 'react-router-dom';\n\nconst User = () => {\n const { email: emailFromUrl } = useParams();\n const navigate = useNavigate();\n const initialEmail = emailFromUrl || '';\n\n const [email, setEmail] = useState(initialEmail);\n const [userData, setUserData] = useState(null);\n const [loading, setLoading] = useState(initialEmail ? true : false);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n if (initialEmail) {\n fetchUserData(initialEmail);\n }\n }, []);\n\n const fetchUserData = async (emailToView) => {\n if (!emailToView) return;\n\n setLoading(true);\n setError(null);\n \n try {\n const response = await get(`/on_call/users/${encodeURIComponent(emailToView)}?format=json`, {\n responseKind: 'json'\n });\n const data = await response.json;\n\n if (!response.ok) {\n throw new Error(data.error);\n }\n setUserData(data.user);\n } catch (error) {\n setError(error.message || 'Error viewing user');\n } finally {\n setLoading(false);\n }\n };\n\n const handleUserView = async (e) => {\n if (e) {\n e.preventDefault();\n }\n \n if (!email.trim()) return;\n\n navigate(`/on_call/users/${encodeURIComponent(email)}`, { replace: true });\n await fetchUserData(email);\n };\n\n const formatDate = (dateString) => {\n if (!dateString) return 'N/A';\n return new Date(dateString).toLocaleString();\n };\n\n return (\n \n
\n\n \n
\n On-Call Dashboard
\n\n
\n \n
\n View
\n\n\n
\n \n \n
\n \n
\n User
\nView user information including metadata and documents.
\n \n \n\n
\n\n \n
\n \n
\n Customer Document
\nView customer document information.
\n \n \n\n
\n );\n};\n\nexport default User; ","import React, { useState, useEffect } from 'react';\nimport { get, destroy } from '@rails/request.js';\nimport { useNavigate, useParams } from 'react-router-dom';\n\nconst CustomerDocument = () => {\n const { id: idFromUrl } = useParams();\n const navigate = useNavigate();\n const initialCustomerDocumentId = idFromUrl || '';\n\n const [customerDocumentId, setCustomerDocumentId] = useState(initialCustomerDocumentId);\n const [customerDocumentData, setCustomerDocumentData] = useState(null);\n const [loading, setLoading] = useState(initialCustomerDocumentId ? true : false);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n if (initialCustomerDocumentId) {\n fetchCustomerDocumentData(initialCustomerDocumentId);\n }\n }, []);\n\n const fetchCustomerDocumentData = async (customerDocumentIdToView) => {\n if (!customerDocumentIdToView) return;\n\n setLoading(true);\n setError(null);\n \n try {\n const response = await get(`/on_call/customer_documents/${encodeURIComponent(customerDocumentIdToView)}?format=json`, {\n responseKind: 'json'\n });\n const data = await response.json;\n if (!response.ok) {\n throw new Error(data.error);\n }\n setCustomerDocumentData(data.customer_document);\n } catch (error) {\n setError(error.message || 'Error viewing customer document');\n } finally {\n setLoading(false);\n }\n };\n\n const handleCustomerDocumentView = async (e) => {\n if (e) {\n e.preventDefault();\n }\n \n if (!customerDocumentId.trim()) return;\n\n navigate(`/on_call/customer_documents/${encodeURIComponent(customerDocumentId)}`, { replace: true });\n await fetchCustomerDocumentData(customerDocumentId);\n };\n\n const handleRescindAcceptance = async () => {\n if (!customerDocumentId.trim()) return;\n \n const confirmed = window.confirm(\"Are you sure you want to rescind this acceptance? This action cannot be undone.\");\n if (!confirmed) return;\n \n const response = await destroy(`/on_call/customer_documents/${encodeURIComponent(customerDocumentId)}/rescind_acceptance?format=json`, {\n responseKind: 'json'\n });\n if (!response.ok) {\n throw new Error(response.error);\n }\n const data = await response.json;\n if (data.success) {\n await fetchCustomerDocumentData(customerDocumentId);\n }\n };\n\n const formatDate = (dateString) => {\n if (!dateString) return 'N/A';\n return new Date(dateString).toLocaleString();\n };\n\n return (\n \n
\n\n \n \n
\n User
\n\n
\n\n {error && (\n \n
\n \n
\n \n \n
\n \n
\n )}\n\n {loading && !userData && (\n \n
\n \n {error}\n
\n \n
\n )}\n\n {userData && (\n \n
\n \n
\n \n Loading...\n
\n \n
\n )}\n \n
\n \n \n
\n \n
\n \n
\n Basic Information
\n\n
\n ID: {userData.id}
\nEmail: {userData.email}
\nName: {userData.first_name} {userData.last_name}
\nCreated: {formatDate(userData.created_at)}
\nLast Updated: {formatDate(userData.updated_at)}
\nGoogle OAuth User: {userData.is_oauth_user ? 'Yes' : 'No'}
\n\n
\n\n {userData.law_firm.id && (\n \n
\n \n
\n \n
\n User Metadata
\n\n
\n \n \n \n
\n
\n | Field | \nValue | \n
|---|---|
| {key.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase())} | \n{value || 'N/A'} | \n
\n
\n )}\n\n {userData.customer_documents.length > 0 && (\n \n
\n \n
\n \n
\n Law Firm
\n\n
\n ID: {userData.law_firm.id}
\nScope: {userData.law_firm.law_firm_scope}
\n\n
\n )}\n\n {userData.posthog_variants && (\n \n
\n \n
\n \n
\n Customer Documents
\n\n
\n - \n {userData.customer_documents.map(document => (\n
- \n {document.id}\n \n ))}\n
\n
\n )}\n \n
\n \n
\n \n
\n PostHog Variants
\n\n
\n - \n {Object.entries(userData.posthog_variants).map(([key, value]) => (\n
- {key.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}: {value ? 'Test' : 'Control'} \n ))}\n
\n
\n );\n};\n\nexport default CustomerDocument; ","import React from 'react';\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport Dashboard from './on_call_dashboard/Dashboard';\nimport User from './on_call_dashboard/User';\nimport CustomerDocument from './on_call_dashboard/CustomerDocument';\n\nconst OnCallDashboardRoot = () => {\n return (\n \n
\n\n \n \n
\n Customer Document
\n\n
\n\n {error && (\n \n
\n \n
\n \n \n
\n \n
\n )}\n\n {loading && !customerDocumentData && (\n \n
\n \n {error}\n
\n \n
\n )}\n\n {customerDocumentData && (\n \n
\n \n
\n \n Loading...\n
\n \n
\n )}\n \n
\n {customerDocumentData.confirm_law_firm && (\n \n
\n \n
\n \n
\n Basic Information
\n\n
\n ID: {customerDocumentData.id}
\nCreated: {formatDate(customerDocumentData.created_at)}
\nLast Updated: {formatDate(customerDocumentData.updated_at)}
\nUser: {customerDocumentData.user.email}
\nDocument Name: {customerDocumentData.document_name}
\nResume Step: {customerDocumentData.resume_step || 'N/A'}
\nSource: {customerDocumentData.source || 'N/A'}
\nActive: {customerDocumentData.active ? 'Yes' : 'No'}
\nCase ID: {customerDocumentData.case_id || 'N/A'}
\nArchived by Law Firm On: {customerDocumentData.archived_by_law_firm_on ? formatDate(customerDocumentData.archived_by_law_firm_on) : 'N/A'}
\n\n
\n )}\n {customerDocumentData?.settlement_negotiation_events?.length > 0 && (\n \n
\n \n
\n \n
\n Confirm Law Firm
\n\n
\n ID: {customerDocumentData.confirm_law_firm.id}
\nName: {customerDocumentData.confirm_law_firm.name}
\n\n
\n )}\n \n
\n \n
\n \n
\n Settlement Negotiation Events
\n\n
\n \n
\n {customerDocumentData.can_rescind_acceptance && (\n \n \n \n
\n
\n | ID | \nParty | \nAction | \nCreated At | \nParty Email From | \n
|---|---|---|---|---|
| {event.id} | \n{event.party} | \n{event.action} | \n{formatDate(event.created_at)} | \n{event.party_email_from} | \n
\n
\n )}\n \n \n
\n