credits only on tx page

This commit is contained in:
zeppi 2021-10-19 09:35:45 -04:00 committed by jessopb
parent 32dd7ef952
commit b6bb5f05ec

View file

@ -12,20 +12,6 @@ import { toCapitalCase } from 'util/string';
import classnames from 'classnames';
import HelpLink from 'component/common/help-link';
import FileExporter from 'component/common/file-exporter';
import WalletFiatPaymentHistory from 'component/walletFiatPaymentHistory';
import WalletFiatAccountHistory from 'component/walletFiatAccountHistory';
import { Lbryio } from 'lbryinc';
import { getStripeEnvironment } from 'util/stripe';
let stripeEnvironment = getStripeEnvironment();
// constants to be used in query params
const QUERY_NAME_CURRENCY = 'currency';
const QUERY_NAME_TAB = 'tab';
const QUERY_NAME_FIAT_TYPE = 'fiatType';
// TODO: this tab will be renamed
const DEFAULT_CURRENCY_PARAM = 'credits';
const DEFAULT_TAB_PARAM = 'fiat-payment-history';
const DEFAULT_FIAT_TYPE_PARAM = 'incoming';
type Props = {
search: string,
@ -59,95 +45,12 @@ function TxoList(props: Props) {
transactionsFile,
} = props;
const [accountTransactionResponse, setAccountTransactionResponse] = React.useState([]);
const [customerTransactions, setCustomerTransactions] = React.useState([]);
function getPaymentHistory() {
return Lbryio.call(
'customer',
'list',
{
environment: stripeEnvironment,
},
'post'
);
}
function getAccountTransactions() {
return Lbryio.call(
'account',
'list',
{
environment: stripeEnvironment,
},
'post'
);
}
// calculate account transactions section
React.useEffect(() => {
(async function () {
try {
const accountTransactionResponse = await getAccountTransactions();
// reverse so order is from most recent to latest
if (accountTransactionResponse && accountTransactionResponse.length) {
accountTransactionResponse.reverse();
}
// TODO: remove this once pagination is implemented
if (accountTransactionResponse && accountTransactionResponse.length && accountTransactionResponse.length > 25) {
accountTransactionResponse.length = 25;
}
setAccountTransactionResponse(accountTransactionResponse);
} catch (err) {
console.log(err);
}
})();
}, []);
// populate customer payment data
React.useEffect(() => {
(async function () {
try {
// get card payments customer has made
let customerTransactionResponse = await getPaymentHistory();
// console.log('amount of transactions');
// console.log(customerTransactionResponse.length);
// reverse so order is from most recent to latest
if (customerTransactionResponse && customerTransactionResponse.length) {
customerTransactionResponse.reverse();
}
// TODO: remove this once pagination is implemented
if (
customerTransactionResponse &&
customerTransactionResponse.length &&
customerTransactionResponse.length > 25
) {
customerTransactionResponse.length = 25;
}
setCustomerTransactions(customerTransactionResponse);
} catch (err) {
console.log(err);
}
})();
}, []);
const urlParams = new URLSearchParams(search);
const page = urlParams.get(TXO.PAGE) || String(1);
const pageSize = urlParams.get(TXO.PAGE_SIZE) || String(TXO.PAGE_SIZE_DEFAULT);
const type = urlParams.get(TXO.TYPE) || TXO.ALL;
const subtype = urlParams.get(TXO.SUB_TYPE);
const active = urlParams.get(TXO.ACTIVE) || TXO.ALL;
const currency = urlParams.get(QUERY_NAME_CURRENCY) || DEFAULT_CURRENCY_PARAM;
const fiatType = urlParams.get(QUERY_NAME_FIAT_TYPE) || DEFAULT_FIAT_TYPE_PARAM;
// tab used in the wallet section
// TODO: need to change this eventually
const tab = urlParams.get(QUERY_NAME_TAB) || DEFAULT_TAB_PARAM;
const currentUrlParams = {
page,
@ -155,9 +58,6 @@ function TxoList(props: Props) {
active,
type,
subtype,
currency,
fiatType,
tab,
};
const hideStatus =
@ -165,6 +65,7 @@ function TxoList(props: Props) {
// this is for sdk params
const params = {};
if (currentUrlParams.type) {
if (currentUrlParams.type === TXO.ALL) {
params[TXO.EXCLUDE_INTERNAL_TRANSFERS] = true;
@ -235,8 +136,6 @@ function TxoList(props: Props) {
newUrlParams.set(TXO.ACTIVE, currentUrlParams.active);
}
newUrlParams.set(TXO.PAGE, delta.value);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
break;
case TXO.TYPE:
newUrlParams.set(TXO.TYPE, delta.value);
@ -255,8 +154,6 @@ function TxoList(props: Props) {
}
newUrlParams.set(TXO.PAGE, String(1));
newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
break;
case TXO.SUB_TYPE:
if (currentUrlParams.type) {
@ -266,8 +163,6 @@ function TxoList(props: Props) {
newUrlParams.set(TXO.SUB_TYPE, delta.value);
newUrlParams.set(TXO.PAGE, String(1));
newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
break;
case TXO.ACTIVE:
if (currentUrlParams.type) {
@ -279,25 +174,6 @@ function TxoList(props: Props) {
newUrlParams.set(TXO.ACTIVE, delta.value);
newUrlParams.set(TXO.PAGE, String(1));
newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
break;
// toggling the currency type (lbc/fiat)
case QUERY_NAME_CURRENCY:
newUrlParams.set(QUERY_NAME_CURRENCY, delta.value);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
// only set fiat type (incoming|outgoing) if fiat is being used
if (delta.value === 'credits') {
newUrlParams.delete(QUERY_NAME_FIAT_TYPE);
} else {
newUrlParams.set(QUERY_NAME_FIAT_TYPE, currentUrlParams.fiatType);
}
break;
// toggling the fiat type (incoming/outgoing)
case QUERY_NAME_FIAT_TYPE:
newUrlParams.set(QUERY_NAME_FIAT_TYPE, delta.value);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
break;
}
@ -318,36 +194,10 @@ function TxoList(props: Props) {
title={
<>
<div className="table__header-text txo__table_header">{__(`Transactions`)}</div>
<div className="txo__radios_container">
<fieldset-section style={{ display: 'inline' }} className="txo__radios_fieldset">
{/* toggle between LBC and fiat buttons */}
<div className={'txo__radios'}>
{/* toggle to LBC */}
<Button
button="alt"
onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_CURRENCY, value: 'credits' })}
className={classnames(`button-toggle`, {
'button-toggle--active': currency === 'credits',
})}
label={__('Credits --[transactions tab]--')}
/>
{/* toggle to fiat */}
<Button
button="alt"
onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_CURRENCY, value: 'fiat' })}
className={classnames(`button-toggle`, {
'button-toggle--active': currency === 'fiat',
})}
label={__('USD --[transactions tab]--')}
/>
</div>
</fieldset-section>
</div>
</>
}
isBodyList
body={
currency === 'credits' ? (
<div>
{/* LBC transactions section */}
<div className="card__body-actions">
@ -365,7 +215,7 @@ function TxoList(props: Props) {
</>
}
value={type || 'all'}
onChange={(e) => handleChange({ changedParameterKey: TXO.TYPE, value: e.target.value, tab })}
onChange={(e) => handleChange({ changedParameterKey: TXO.TYPE, value: e.target.value })}
>
{Object.values(TXO.DROPDOWN_TYPES).map((v) => {
const stringV = String(v);
@ -384,9 +234,7 @@ function TxoList(props: Props) {
name="subtype"
label={__('Payment Type')}
value={subtype || 'all'}
onChange={(e) =>
handleChange({ changedParameterKey: TXO.SUB_TYPE, value: e.target.value, tab })
}
onChange={(e) => handleChange({ changedParameterKey: TXO.SUB_TYPE, value: e.target.value })}
>
{Object.values(TXO.DROPDOWN_SUBTYPES).map((v) => {
const stringV = String(v);
@ -459,51 +307,6 @@ function TxoList(props: Props) {
<TransactionListTable txos={txoPage} />
<Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
</div>
) : (
<div>
{/* FIAT SECTION ( toggle buttons and transactions) */}
<div className="section card-stack">
<div className="card__body-actions">
<div className="card__actions">
<div>
<fieldset-section>
<label>{__('Type')}</label>
<div className={'txo__radios'}>
{/* incoming transactions button */}
<Button
button="alt"
onClick={(e) =>
handleChange({ changedParameterKey: QUERY_NAME_FIAT_TYPE, value: 'incoming' })
}
className={classnames(`button-toggle`, {
'button-toggle--active': fiatType === 'incoming',
})}
label={__('Incoming')}
/>
{/* incoming transactions button */}
<Button
button="alt"
onClick={(e) =>
handleChange({ changedParameterKey: QUERY_NAME_FIAT_TYPE, value: 'outgoing' })
}
className={classnames(`button-toggle`, {
'button-toggle--active': fiatType === 'outgoing',
})}
label={__('Outgoing')}
/>
</div>
</fieldset-section>
</div>
</div>
</div>
{/* listing of the transactions */}
{fiatType === 'incoming' && <WalletFiatAccountHistory transactions={accountTransactionResponse} />}
{fiatType === 'outgoing' && <WalletFiatPaymentHistory transactions={customerTransactions} />}
{/* TODO: have to finish pagination */}
{/* <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} /> */}
</div>
</div>
)
}
/>
);