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 | 44x 44x 44x 44x 44x 44x 9x 9x 9x 9x 1x 8x 16x 44x 16x 16x 16x 1x 16x 44x | import { AccountInstrument, BankInstrument } from '@bigcommerce/checkout-sdk';
import React, { memo, useCallback, FunctionComponent } from 'react';
import { TranslatedString } from '../../locale';
import { IconPaypal, IconSize } from '../../ui/icon';
import { LoadingOverlay } from '../../ui/loading';
import isBankAccountInstrument from './isBankAccountInstrument';
export interface ManageAccountInstrumentsTableProps {
instruments: Array<AccountInstrument | BankInstrument>;
isDeletingInstrument: boolean;
onDeleteInstrument(id: string): void;
}
const ManageInstrumentsTable: FunctionComponent<ManageAccountInstrumentsTableProps> = ({
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 />
</tr>
</thead>
<tbody className="table-tbody">
{ instruments.map(instrument => (
<ManageInstrumentsRow
instrument={ instrument }
key={ instrument.bigpayToken }
onDeleteInstrument={ onDeleteInstrument }
/>
)) }
</tbody>
</table>
</LoadingOverlay>
);
};
interface ManageInstrumentsRowProps {
instrument: AccountInstrument;
onDeleteInstrument(id: string): void;
}
const ManageInstrumentsRow: FunctionComponent<ManageInstrumentsRowProps> = ({
instrument,
onDeleteInstrument,
}) => {
const handleDelete = useCallback(() => {
onDeleteInstrument(instrument.bigpayToken);
}, [
instrument,
onDeleteInstrument,
]);
return (
<tr>
<td data-test="manage-instrument-accountExternalId">
{ isBankAccountInstrument(instrument) ? (
<span className="instrumentModal-instrumentAccountNumber">
<TranslatedString id="payment.instrument_manage_table_header_ending_in_text" />
<span>
{ ` ${instrument.accountNumber}` }
</span>
</span>
) : (
<>
<IconPaypal
additionalClassName="accountIcon-icon"
size={ IconSize.Medium }
/>
<span className="instrumentModal-instrumentAccountExternalId">
{ instrument.externalId }
</span>
</>
) }
</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(ManageInstrumentsTable);
|