Skip to content
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

Jump to bottom

[View Payments] Upgrade web components to their V3 versions #28025

Merged
merged 2 commits into from
Feb 20, 2024
Merged

[View Payments] Upgrade web components to their V3 versions #28025

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
321a65b
Upgrading web components to their V3 versions
jerekshoe Feb 16, 2024
0ee1b7b
Missed one of the va-alerts
jerekshoe Feb 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/applications/disability-benefits/view-payments/components/IdentityNotVerified.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const IdentityNotVerified = () => {
);

return (
<va-alert status="warning" uswds="false">
<va-alert status="warning" uswds>
<h2 slot="headline" className="vads-u-fontsize--h3">
Verify your identity to view your VA payments
</h2>
Expand Down
16 changes: 12 additions & 4 deletions ...ns/disability-benefits/view-payments/components/view-payments-lists/ViewPaymentsLists.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import { isLOA3 as isLOA3Selector } from 'platform/user/selectors';

Check warning on line 6 in src/applications/disability-benefits/view-payments/components/view-payments-lists/ViewPaymentsLists.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/disability-benefits/view-payments/components/view-payments-lists/ViewPaymentsLists.jsx:6:1:Importing from platform via platform/user is deprecated. Import from @department-of-veterans-affairs/platform-user instead or check babel.config.json for an alias to the import.

import { getAllPayments } from '../../actions';
import {
Expand Down Expand Up @@ -48,7 +48,7 @@
);
} else {
paymentsReturnedTable = (
<va-alert status="info">
<va-alert status="info" uswds>
<h2 slot="headline" className="vads-u-font-size--h3">
We don’t have a record of returned payments
</h2>
Expand Down Expand Up @@ -81,7 +81,7 @@
);
} else {
paymentsReceivedTable = (
<va-alert status="info">
<va-alert status="info" uswds>
<h2 slot="headline" className="vads-u-font-size--h3">
We don’t have a record of VA payments made to you
</h2>
Expand Down Expand Up @@ -114,14 +114,22 @@
const alertContent = isClientError(this.props.error.code)
? NoPaymentsContent
: ServerErrorAlertContent;
content = <va-alert status={status}>{alertContent}</va-alert>;
content = (
<va-alert status={status} uswds>
{alertContent}
</va-alert>
);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jerekshoe Line 128 also has a va-alert so we should update that as well!

} else {
// Deconstruct payments props object
// If there are no payments AND no payments returned, render an Alertbox
// If there are either payments OR payments returned, run payment list builders
const { returnPayments, payments } = this.props.payments;
if (returnPayments.length === 0 && payments.length === 0) {
content = <va-alert status="info">{NoPaymentsContent}</va-alert>;
content = (
<va-alert status="info" uswds>
{NoPaymentsContent}
</va-alert>
);
} else {
// run payments returned list builder
paymentsReturnedTable = this.buildReturnedPaymentListContent(
Expand Down
10 changes: 5 additions & 5 deletions ...ns/disability-benefits/view-payments/components/view-payments-lists/payments/Payments.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
paginatedData.current = paginateData(data);
setCurrentData(paginatedData.current[currentPage - 1]);
totalPages.current = paginatedData.current.length;
}, []);

Check warning on line 33 in src/applications/disability-benefits/view-payments/components/view-payments-lists/payments/Payments.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/disability-benefits/view-payments/components/view-payments-lists/payments/Payments.jsx:33:6:React Hook useEffect has missing dependencies: 'currentPage' and 'data'. Either include them or remove the dependency array. You can also replace multiple useState variables with useReducer if 'setCurrentData' needs the current value of 'currentPage'.

const onPageChange = page => {
setCurrentData(paginatedData.current[page - 1]);
Expand All @@ -46,15 +46,15 @@
<p className="vads-u-font-size--lg vads-u-font-family--serif">
Displaying {fromToNums[0]} - {fromToNums[1]} of {data.length}
</p>
<va-table uswds="false">
<va-table-row slot="headers" uswds="false">
<va-table>
<va-table-row slot="headers">
{fields.map(field => (
<span key={field.value}>{field.label}</span>
))}
</va-table-row>
{currentData.map((row, index) => {
return (
<va-table-row key={`payments-${index}`} uswds="false">
<va-table-row key={`payments-${index}`}>
{fields.map(field => (
<span key={`${field.value}-${index}`}>
{row[field.value]}
Expand All @@ -70,14 +70,14 @@
pages={totalPages.current}
maxPageListLength={MAX_PAGE_LIST_LENGTH}
showLastPage
uswds="false"
uswds
/>
</>
);
}

return (
<va-alert status="info" uswds="false">
<va-alert status="info" uswds>
{clientServerErrorContent(tableVersion)}
</va-alert>
);
Expand Down
6 changes: 3 additions & 3 deletions src/applications/disability-benefits/view-payments/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ export const ServerErrorAlertContent = (
</p>
<p className="vads-u-font-size--base">
If you get this error again, please call the VA.gov help desk at{' '}
<va-telephone contact={CONTACTS.VA_311} uswds="false" /> (
<va-telephone contact={CONTACTS['711']} tty uswds="false" />
<va-telephone contact={CONTACTS.VA_311} /> (
<va-telephone contact={CONTACTS['711']} tty />
). We’re here Monday through Friday, 8:00 a.m. to 8:00 p.m. ET
</p>
</>
Expand All @@ -36,7 +36,7 @@ export const NoPaymentsContent = (
less than $1 for direct deposit, or $5 for mailed checks, will not show in
your online payment history. If you think this is an error, or if you have
questions about your payment history, please call{' '}
<va-telephone contact={CONTACTS.VA_BENEFITS} uswds="false" />
<va-telephone contact={CONTACTS.VA_BENEFITS} />
</p>
<p className="vads-u-font-size--base">
VA pays benefits on the first day of the month for the previous month.
Expand Down