77 lines
2.2 KiB
React
77 lines
2.2 KiB
React
|
// @flow
|
||
|
|
import * as ICONS from 'constants/icons';
|
||
|
|
import * as PAGES from 'constants/pages';
|
||
|
|
import React from 'react';
|
||
|
|
import Button from 'component/button';
|
||
|
|
import Card from 'component/common/card';
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
totalTippedAmount: number,
|
||
|
|
accountDetails: any,
|
||
|
|
transactions: any,
|
||
|
|
};
|
||
|
|
|
||
|
|
const WalletBalance = (props: Props) => {
|
||
|
|
const {
|
||
|
|
// accountDetails,
|
||
|
|
transactions,
|
||
|
|
} = props;
|
||
|
|
|
||
|
|
// let cardDetails = {
|
||
|
|
// brand: card.brand,
|
||
|
|
// expiryYear: card.exp_year,
|
||
|
|
// expiryMonth: card.exp_month,
|
||
|
|
// lastFour: card.last4,
|
||
|
|
// topOfDisplay: topOfDisplay,
|
||
|
|
// bottomOfDisplay: bottomOfDisplay,
|
||
|
|
// };
|
||
|
|
|
||
|
|
// const [detailsExpanded, setDetailsExpanded] = React.useState(false);
|
||
|
|
const [totalCreatorsSupported, setTotalCreatorsSupported] = React.useState(false);
|
||
|
|
|
||
|
|
// calculate how many unique users tipped
|
||
|
|
React.useEffect(() => {
|
||
|
|
if (transactions) {
|
||
|
|
let channelNames = [];
|
||
|
|
|
||
|
|
for (const transaction of transactions) {
|
||
|
|
channelNames.push(transaction.channel_name);
|
||
|
|
}
|
||
|
|
|
||
|
|
let unique = [...new Set(channelNames)];
|
||
|
|
setTotalCreatorsSupported(unique.length);
|
||
|
|
}
|
||
|
|
}, [transactions]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>{<Card
|
||
|
|
// TODO: implement hasActiveCard and show the current card the user would charge to
|
||
|
|
// subtitle={hasActiveCard && <h2>Hello</h2>
|
||
|
|
// // <Plastic
|
||
|
|
// // type={userCardDetails.brand}
|
||
|
|
// // name={userCardDetails.topOfDisplay + ' ' + userCardDetails.bottomOfDisplay}
|
||
|
|
// // expiry={userCardDetails.expiryMonth + '/' + userCardDetails.expiryYear}
|
||
|
|
// // number={'____________' + userCardDetails.lastFour}
|
||
|
|
// // />
|
||
|
|
// }
|
||
|
|
actions={
|
||
|
|
<>
|
||
|
|
<h2 className="section__title--small">
|
||
|
|
{(transactions && transactions.length) || 0} Total Tips
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<h2 className="section__title--small">
|
||
|
|
{totalCreatorsSupported || 0} Creators Supported
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<div className="section__actions">
|
||
|
|
<Button button="secondary" label={__('Manage Cards')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} />
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
}
|
||
|
|
/>}</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default WalletBalance;
|