Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 43x 43x 43x 43x 43x 43x 43x 43x 43x 19x 19x 19x 19x 1x 18x 36x 43x 36x 36x 36x 36x 36x 36x 5x 36x 43x | import { CardInstrument } from '@bigcommerce/checkout-sdk';
import { expirationDate } from 'card-validator';
import classNames from 'classnames';
import creditCardType from 'credit-card-type';
import React, { memo, useCallback, FunctionComponent } from 'react';
import { TranslatedString } from '../../locale';
import { LoadingOverlay } from '../../ui/loading';
import { CreditCardIcon } from '../creditCard';
import mapFromInstrumentCardType from './mapFromInstrumentCardType';
export interface ManageCardInstrumentsTableProps {
instruments: CardInstrument[];
isDeletingInstrument: boolean;
onDeleteInstrument(id: string): void;
}
const ManageCardInstrumentsTable: FunctionComponent<ManageCardInstrumentsTableProps> = ({
instruments,
isDeletingInstrument,
onDeleteInstrument,
}) => {
if (instruments.length === 0) {
return (
<p><TranslatedString id="payment.instrument_manage_modal_empty_text" /></p>
);
}
return (
<LoadingOverlay isLoading={ isDeletingInstrument }>
<table className="table">
<thead className="table-thead">
<tr>
<th><TranslatedString id="payment.instrument_manage_table_header_payment_method_text" /></th>
<th><TranslatedString id="payment.instrument_manage_table_header_ending_in_text" /></th>
<th><TranslatedString id="payment.instrument_manage_table_header_expiry_date_text" /></th>
<th />
</tr>
</thead>
<tbody className="table-tbody">
{ instruments.map(instrument => (
<ManageInstrumentsRow
instrument={ instrument }
key={ instrument.bigpayToken }
onDeleteInstrument={ onDeleteInstrument }
/>
)) }
</tbody>
</table>
</LoadingOverlay>
);
};
interface ManageInstrumentsRowProps {
instrument: CardInstrument;
onDeleteInstrument(id: string): void;
}
const ManageInstrumentsRow: FunctionComponent<ManageInstrumentsRowProps> = ({
instrument,
onDeleteInstrument,
}) => {
const cardType = mapFromInstrumentCardType(instrument.brand);
const cardInfo = creditCardType.getTypeInfo(cardType);
const isExpired = expirationDate({
month: instrument.expiryMonth,
year: instrument.expiryYear,
}).isValid === false;
const handleDelete = useCallback(() => {
onDeleteInstrument(instrument.bigpayToken);
}, [
instrument,
onDeleteInstrument,
]);
return (
<tr>
<td data-test="manage-instrument-cardType">
<CreditCardIcon cardType={ cardType } />
{ cardInfo && <span className="instrumentModal-instrumentCardType">
{ cardInfo.niceType }
</span> }
</td>
<td data-test="manage-instrument-last4">
{ instrument.last4 }
</td>
<td
className={ classNames({ 'instrumentModal-instrumentExpiry--expired': isExpired }) }
data-test="manage-instrument-expiry"
>
{ `${instrument.expiryMonth}/${instrument.expiryYear}` }
</td>
<td>
<button
className="button button--tiny table-actionButton optimizedCheckout-buttonSecondary"
data-test="manage-instrument-delete-button"
onClick={ handleDelete }
type="button"
>
<TranslatedString id="common.delete_action" />
</button>
</td>
</tr>
);
};
export default memo(ManageCardInstrumentsTable);
|