Skip to content

Jcs/20260312 #529

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jSylvestre wants to merge 2 commits into
base: master
Choose a base branch
from
+169 −130
Open

Jcs/20260312 #529

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a133875
Don't do this, but maybe the new component is cleaner
jSylvestre Mar 12, 2026
32f1aad
just the one payment action, but a nicer refactor
jSylvestre Mar 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 107 additions & 0 deletions src/Payments.Mvc/ClientApp/src/components/payInvoiceAction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import * as React from 'react';
import { formatCurrencyLocale } from '../utils/currency';

interface IProps {
dueDate: string | null;
errorMessage: string;
isSaving: boolean;
isValid: boolean;
isValidating: boolean;
onSubmit: () => void;
total: number;
}

export default class PayInvoiceAction extends React.Component<IProps> {
public render() {
const {
dueDate,
errorMessage,
isSaving,
isValid,
isValidating,
onSubmit,
total
} = this.props;

return (
<div className='pay-action'>
<span className='pay-action-total'>{formatCurrencyLocale(total)}</span>

{dueDate && (
<span className='pay-action-date secondary-font'>
Due{' '}
{new Date(dueDate).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
})}
</span>
)}

{errorMessage && (
<div className='alert alert-danger mt-3' role='alert'>
{errorMessage}
</div>
)}

{isValidating && (
<div className='alert alert-info mt-3' role='alert'>
<i className='fas fa-spinner fa-spin me-2'></i>
Validating form...
</div>
)}

{!isValidating && !isValid && !isSaving && (
<div className='alert alert-warning mt-3' role='alert'>
<i className='fas fa-exclamation-triangle me-2'></i>
Please complete all required fields before submitting:
<ul className='mb-0 mt-2'>
<li>At least one valid debit chart string is required</li>
<li>All chart strings must be validated successfully</li>
<li>
Total debit amounts must equal the invoice total (
{formatCurrencyLocale(total)})
</li>
<li>All amounts must be greater than zero</li>
</ul>
</div>
)}

{!isValidating && isValid && !isSaving && (
<div className='alert alert-success mt-3' role='alert'>
<i className='fas fa-check-circle me-2'></i>
Form is valid and ready to submit
</div>
)}

<div style={{ alignContent: 'center' }}>
<button
type='button'
className='btn btn-primary btn-lg'
onClick={onSubmit}
disabled={!isValid || isSaving || isValidating}
title={
isValidating
? 'Validating form...'
: !isValid
? 'Please complete all required fields'
: ''
}
>
{isSaving ? (
<>
<i className='fas fa-spinner fa-spin me-3' />
Processing...
</>
) : (
<>
<i className='fas fa-check' aria-hidden='true' />
Submit for Approval
</>
)}
</button>
</div>
</div>
);
}
}
192 changes: 62 additions & 130 deletions src/Payments.Mvc/ClientApp/src/containers/PayInvoiceContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import PayInvoiceAction from '../components/payInvoiceAction';
import RechargeAccountsControl from '../components/rechargeAccountsControl';
import { InvoiceRechargeItem } from '../models/InvoiceRechargeItem';
import { formatCurrencyLocale } from '../utils/currency';
Expand Down Expand Up @@ -132,139 +133,70 @@ export default class PayInvoiceContainer extends React.Component<
)}

{/* Payment Action Area */}
<div className='pay-action'>
{canEdit && (
<>
<span className='pay-action-total'>
{formatCurrencyLocale(invoice.total)}
</span>

{invoice.dueDate && (
<span className='pay-action-date secondary-font'>
Due{' '}
{new Date(invoice.dueDate).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
})}
</span>
)}

{errorMessage && (
<div className='alert alert-danger mt-3' role='alert'>
{errorMessage}
</div>
)}

{isValidating && (
<div className='alert alert-info mt-3' role='alert'>
<i className='fas fa-spinner fa-spin me-2'></i>
Validating form...
</div>
)}

{!isValidating && !isValid && !isSaving && (
<div className='alert alert-warning mt-3' role='alert'>
<i className='fas fa-exclamation-triangle me-2'></i>
Please complete all required fields before submitting:
<ul className='mb-0 mt-2'>
<li>At least one valid debit chart string is required</li>
<li>All chart strings must be validated successfully</li>
<li>
Total debit amounts must equal the invoice total (
{formatCurrencyLocale(invoice.total)})
</li>
<li>All amounts must be greater than zero</li>
</ul>
</div>
)}

{!isValidating && isValid && !isSaving && (
<div className='alert alert-success mt-3' role='alert'>
<i className='fas fa-check-circle me-2'></i>
Form is valid and ready to submit
</div>
)}

<div style={{ alignContent: 'center' }}>
<button
type='button'
className='btn btn-primary btn-lg'
onClick={this.handleSubmit}
disabled={!isValid || isSaving || isValidating}
title={
isValidating
? 'Validating form...'
: !isValid
? 'Please complete all required fields'
: ''
}
>
{isSaving ? (
<>
<i className='fas fa-spinner fa-spin me-3' />
Processing...
</>
) : (
<>
<i className='fas fa-check' aria-hidden='true' />
Submit for Approval
</>
)}
</button>
</div>
</>
)}
{canEdit && (
<PayInvoiceAction
dueDate={invoice.dueDate}
errorMessage={errorMessage}
isSaving={isSaving}
isValid={isValid}
isValidating={isValidating}
onSubmit={this.handleSubmit}
total={invoice.total}
/>
)}

{!canEdit && (
<>
<span className='pay-action-total'>
{formatCurrencyLocale(invoice.total)}
</span>

{invoice.dueDate && (
<span className='pay-action-date secondary-font'>
Due{' '}
{new Date(invoice.dueDate).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
})}
{(!canEdit || invoice.paid) && (
<div className='pay-action'>
{!canEdit && (
<>
<span className='pay-action-total'>
{formatCurrencyLocale(invoice.total)}
</span>
)}

{invoice.status === 'PendingApproval' && (
<div className='alert alert-info mt-3' role='alert'>
<i className='fas fa-clock me-2'></i>
This is Pending Financial Approver Actions.
</div>
)}

{invoice.status !== 'PendingApproval' && (
<div className='alert alert-secondary mt-3' role='alert'>
<i className='fas fa-info-circle me-2'></i>
Status: {invoice.status}
</div>
)}
</>
)}

{invoice.paid && (
<>
<h1>Invoice Paid</h1>
{invoice.paidDate && (
<h2>
{formatCurrencyLocale(invoice.total)} USD paid{' '}
{new Date(invoice.paidDate).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
})}
</h2>
)}
</>
)}
</div>
{invoice.dueDate && (
<span className='pay-action-date secondary-font'>
Due{' '}
{new Date(invoice.dueDate).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
})}
</span>
)}

{invoice.status === 'PendingApproval' && (
<div className='alert alert-info mt-3' role='alert'>
<i className='fas fa-clock me-2'></i>
This is Pending Financial Approver Actions.
</div>
)}

{invoice.status !== 'PendingApproval' && (
<div className='alert alert-secondary mt-3' role='alert'>
<i className='fas fa-info-circle me-2'></i>
Status: {invoice.status}
</div>
)}
</>
)}

{invoice.paid && (
<>
<h1>Invoice Paid</h1>
{invoice.paidDate && (
<h2>
{formatCurrencyLocale(invoice.total)} USD paid{' '}
{new Date(invoice.paidDate).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
})}
</h2>
)}
</>
)}
</div>
)}

{/* Summary Section */}
<div className='pay-description'>
Expand Down