Skip to content

Commit

Permalink
Improve semantics
Browse files Browse the repository at this point in the history
  • Loading branch information
Bill Robbins committed Jan 24, 2025
1 parent f36e737 commit 614600d
Show file tree
Hide file tree
Showing 6 changed files with 286 additions and 289 deletions.
46 changes: 26 additions & 20 deletions client/me/purchases/billing-history/modern-receipt/content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,48 +15,54 @@ export function ReceiptContent( { transaction }: ReceiptContentProps ) {
const translate = useTranslate();
const [ billingDetails, setBillingDetails ] = useState( '' );
const isEmpty = ! billingDetails.trim();
const date = new Date( transaction.date );

return (
<Card className="receipt__content">
<div className="receipt__header">
<div className="receipt__branding">
<img src={ transaction.icon } alt={ transaction.service } className="receipt__logo" />
<div className="receipt__company">
<Card className="content">
<div className="header">
<div className="branding">
<img src={ transaction.icon } alt={ transaction.service } className="logo" />
<div className="company">
<h2>{ transaction.service }</h2>
<span className="receipt__org">{ transaction.org }</span>
<span className="receipt__address">{ transaction.address }</span>
<span className="org">{ transaction.org }</span>
<address className="address">{ transaction.address }</address>
</div>
</div>
<div className="receipt__meta">
<div className="receipt__date">{ formatDisplayDate( new Date( transaction.date ) ) }</div>
<div className="meta">
<time className="date" dateTime={ date.toISOString() }>
{ formatDisplayDate( date ) }
</time>
</div>
</div>

<div className="receipt__body">
<div className="receipt__details-section">
<div className="receipt__label">{ translate( 'Receipt id' ) }</div>
<div className="receipt__receipt-id-value">{ transaction.id }</div>
<div className="body">
<div className="details-section">
<div className="label">{ translate( 'Receipt id' ) }</div>
<div className="receipt-id-value">{ transaction.id }</div>

<PaymentDetails transaction={ transaction } />

<div className="receipt__billing-details" data-is-empty={ isEmpty }>
<div className="receipt__label">{ translate( 'Billing details' ) }</div>
<div className="billing-details" data-is-empty={ isEmpty }>
<label className="label" htmlFor="billing-details">
{ translate( 'Billing details' ) }
</label>
<textarea
className="receipt__billing-details-input"
id="billing-details"
className="billing-details-input"
value={ billingDetails }
onChange={ ( e ) => setBillingDetails( e.target.value ) }
placeholder={ translate(
'Use this field to add your billing information (e.g. business address) before printing.'
) }
value={ billingDetails }
onChange={ ( e ) => setBillingDetails( e.target.value ) }
/>
</div>
</div>

<table className="receipt__items">
<table className="items">
<thead>
<tr>
<th>{ translate( 'Description' ) }</th>
<th className="receipt__amount">{ translate( 'Amount' ) }</th>
<th className="amount">{ translate( 'Amount' ) }</th>
</tr>
</thead>
<tbody>
Expand Down
14 changes: 7 additions & 7 deletions client/me/purchases/billing-history/modern-receipt/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export default function ModernReceipt( { transactionId }: ReceiptProps ) {
{ isLoading && <ReceiptPlaceholder /> }

{ transactionError && (
<Card className="receipt__error">
<Card className="error">
<p>{ translate( "Sorry, we couldn't load this receipt. Please try again later." ) }</p>
<Button href={ billingHistory } variant="primary">
{ translate( 'Return to Billing History' ) }
Expand All @@ -71,17 +71,17 @@ export default function ModernReceipt( { transactionId }: ReceiptProps ) {

{ ! isLoading && ! transactionError && transaction && (
<>
<div className="receipt__page-header">
<div className="receipt__breadcrumbs">
<a href={ billingHistory } className="receipt__back-link">
<div className="page-header">
<div className="breadcrumbs">
<a href={ billingHistory } className="back-link">
{ translate( 'Receipts' ) }
</a>
</div>
<div className="receipt__title-bar">
<h1 className="receipt__title">
<div className="title-bar">
<h1 className="title">
{ translate( 'Receipt %(id)s', { args: { id: transactionId } } ) }
</h1>
<div className="receipt__actions">
<div className="actions">
<Button variant="primary" onClick={ handlePrint }>
{ translate( 'Print Receipt' ) }
</Button>
Expand Down
28 changes: 13 additions & 15 deletions client/me/purchases/billing-history/modern-receipt/line-items.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,47 +22,45 @@ export function ReceiptLineItems( { transaction }: ReceiptLineItemsProps ) {
return (
<>
{ items.map( ( item ) => (
<tr key={ item.id } className="receipt__item">
<td className="receipt__item-details">
<div className="receipt__item-name">{ item.variation }</div>
<div className="receipt__item-type">({ item.type_localized })</div>
<tr key={ item.id } className="item">
<td className="item-details">
<div className="item-name">{ item.variation }</div>
<div className="item-type">({ item.type_localized })</div>
{ getTransactionTermLabel( item, translate ) && (
<div className="receipt__item-term">
{ getTransactionTermLabel( item, translate ) }
</div>
<div className="item-term">{ getTransactionTermLabel( item, translate ) }</div>
) }
{ item.domain && <div className="receipt__item-domain">{ item.domain }</div> }
{ item.domain && <div className="item-domain">{ item.domain }</div> }
{ item.licensed_quantity && (
<div className="receipt__item-quantity">
<div className="item-quantity">
{ renderTransactionQuantitySummary( item, translate ) }
</div>
) }
{ isTransactionJetpackSearch10kTier( item ) && (
<div className="receipt__item-tier">
<div className="item-tier">
{ renderJetpackSearch10kTierBreakdown( item, item.subtotal_integer, translate ) }
</div>
) }
{ item.volume && (
<div className="receipt__item-volume">
<div className="item-volume">
{ renderDomainTransactionVolumeSummary( item, translate ) }
</div>
) }
</td>
<td className="receipt__amount">
<td className="amount">
{ formatCurrency( item.amount_integer, item.currency, {
isSmallestUnit: true,
stripZeros: true,
} ) }
{ transaction.credit && (
<span className="receipt__refund-badge">{ translate( 'Refund' ) }</span>
<span className="credit-badge">{ translate( 'Refund' ) }</span>
) }
</td>
</tr>
) ) }
{ transactionIncludesTax( transaction ) && (
<tr className="receipt__tax">
<tr className="tax">
<td>{ translate( 'Tax' ) }</td>
<td className="receipt__amount">
<td className="amount">
{ formatCurrency( transaction.tax_integer, transaction.currency, {
isSmallestUnit: true,
stripZeros: true,
Expand Down
10 changes: 5 additions & 5 deletions client/me/purchases/billing-history/modern-receipt/payment-details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ export function PaymentDetails( { transaction }: PaymentDetailsProps ) {
}

return (
<div className="receipt__payment-details">
<div className="receipt__label">{ translate( 'Payment method' ) }</div>
<div className="receipt__payment-details-content">
<div className="payment-details">
<div className="label">{ translate( 'Payment method' ) }</div>
<div className="payment-details-content">
{ transaction.cc_display_brand !== 'Not Stored' && transaction.cc_num !== 'XXXX' && (
<div className="receipt__payment-brand">
<div className="payment-brand">
{ translate( '%(cardType)s ending in %(cardNum)s', {
args: {
cardType: transaction.cc_display_brand ?? transaction.cc_type,
Expand All @@ -28,7 +28,7 @@ export function PaymentDetails( { transaction }: PaymentDetailsProps ) {
</div>
) }
{ transaction.cc_name !== 'Not Stored' && (
<div className="receipt__payment-name">{ transaction.cc_name }</div>
<div className="payment-name">{ transaction.cc_name }</div>
) }
</div>
</div>
Expand Down
13 changes: 5 additions & 8 deletions client/me/purchases/billing-history/modern-receipt/placeholder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,12 @@ export function ReceiptPlaceholder() {

return (
<Main wideLayout className="receipt">
<Card className="receipt__content is-placeholder">
<div className="receipt__header">
<div
className="receipt__placeholder-title"
aria-label={ translate( 'Loading receipt' ) }
/>
<Card className="content is-placeholder">
<div className="header">
<div className="placeholder-title" aria-label={ translate( 'Loading receipt' ) } />
</div>
<div className="receipt__body">
<div className="receipt__placeholder-content" />
<div className="body">
<div className="placeholder-content" />
</div>
</Card>
</Main>
Expand Down
Loading

0 comments on commit 614600d

Please sign in to comment.