LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Move transactions from Settings to Wallet (#6871)

Browse source 
* remove unused conditional

get stuff ready for merge

bugfix and cleanup

requested changes

fixing flow errors

fix last flow error and touchups

fiat and lbc tabs coming along

support setting currency as the default tab via query param

add wallet fiat balance

fixing naming

add fiat transactions

using es6 to populate data

should be fine but keeps crashing

transaction listing working

add no transactions thing

about to add a third tab

add third tab

add card last 4 to transaction history

some renaming

show payments successfully

show filler for subscriptions

display if no transactions or subs

working but in the wrong component

approaching something thats working

showing total tipped amount

about to add last couple features

cleanup

More touchups

adding last features

calculate the total amount of unique creators tipped

couple touchups

remove transaction listings from settings

add view transactions buttons

small optimization

add subscriptions section

fix lot of linting errors and make command more userful

* some copy changes

* about to add last couple changes

* update still require verification

* fix button spacing

* hide subscriptions sections and fix links

* cleanups before merging

* more cleanup

* cleanup with last four fix

* changing tab functionality

* bugfix and fix presentation of cards

* fix transactions bug

* change order and remove logs

* remove unused code in account

* more linter fixes

* update account balance presentation

* fix flow errors
This commit is contained in:
mayeaux 2021-08-13 19:59:43 +02:00 committed by GitHub
parent d36371fd88
commit 8ff3b753ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 757 additions and 287 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -38,7 +38,7 @@
"build:dir": "yarn build -- --dir -c.compression=store -c.mac.identity=null",
"crossenv": "./node_modules/cross-env/dist/bin/cross-env",
"lint": "eslint 'ui/**/*.{js,jsx}' && eslint 'web/**/*.{js,jsx}' && eslint 'electron/**/*.js' && flow",
"lint-fix": "eslint --fix 'ui/**/*.{js,jsx}' && eslint --fix 'web/**/*.{js,jsx}' && eslint --fix 'electron/**/*.js' && flow",
"lint-fix": "eslint --fix --quiet 'ui/**/*.{js,jsx}' && eslint --fix --quiet 'web/**/*.{js,jsx}' && eslint --fix --quiet 'electron/**/*.js'",
"format": "prettier 'src/**/*.{js,jsx,scss,json}' --write",
"flow-defs": "flow-typed install",
"precommit": "lint-staged",

2
ui/component/common/tabs.jsx
View file

@ -28,7 +28,7 @@ import { useRect } from '@reach/rect';
// </TabPanels>
// </Tabs>
//
// the base @reach/tabs components handle all the focus/accessibilty labels
// the base @reach/tabs components handle all the focus/accessibility labels
// We're just adding some styling
type TabsProps = {

3
ui/component/walletFiatAccountHistory/index.js Normal file
View file

@ -0,0 +1,3 @@
import FiatAccountHistory from './view';
export default FiatAccountHistory;

88
ui/component/walletFiatAccountHistory/view.jsx Normal file
View file

@ -0,0 +1,88 @@
// @flow
import React from 'react';
import Button from 'component/button';
import Card from 'component/common/card';
import moment from 'moment';
type Props = {
accountDetails: any,
transactions: any,
};
const WalletBalance = (props: Props) => {
// receive transactions from parent component
const { transactions } = props;
let accountTransactions;
// reverse so most recent payments come first
if (transactions && transactions.length) {
accountTransactions = transactions.reverse();
}
// if there are more than 10 transactions, limit it to 10 for the frontend
if (accountTransactions && accountTransactions.length > 10) {
accountTransactions.length = 10;
}
return (
<><Card
title={'Tip History'}
body={(
<>
<div className="table__wrapper">
<table className="table table--transactions">
<thead>
<tr>
<th className="date-header">{__('Date')}</th>
<th>{<>{__('Receiving Channel Name')}</>}</th>
<th>{__('Tip Location')}</th>
<th>{__('Amount (USD)')} </th>
<th>{__('Processing Fee')}</th>
<th>{__('Odysee Fee')}</th>
<th>{__('Received Amount')}</th>
</tr>
</thead>
<tbody>
{accountTransactions &&
accountTransactions.map((transaction) => (
<tr key={transaction.name + transaction.created_at}>
<td>{moment(transaction.created_at).format('LLL')}</td>
<td>
<Button
className=""
navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
label={transaction.channel_name}
button="link"
/>
</td>
<td>
<Button
className=""
navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
label={
transaction.channel_claim_id === transaction.source_claim_id
? 'Channel Page'
: 'Content Page'
}
button="link"
/>
</td>
<td>${transaction.tipped_amount / 100}</td>
<td>${transaction.transaction_fee / 100}</td>
<td>${transaction.application_fee / 100}</td>
<td>${transaction.received_amount / 100}</td>
</tr>
))}
</tbody>
</table>
{!accountTransactions && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
</div>
</>
)}
/>
</>
);
};
export default WalletBalance;

3
ui/component/walletFiatBalance/index.js Normal file
View file

@ -0,0 +1,3 @@
import WalletFiatBalance from './view';
export default WalletFiatBalance;

94
ui/component/walletFiatBalance/view.jsx Normal file
View file

@ -0,0 +1,94 @@
// @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';
import Icon from 'component/common/icon';
import I18nMessage from 'component/i18nMessage';
type Props = {
accountDetails: any,
};
const WalletBalance = (props: Props) => {
const {
accountDetails,
} = props;
return (
<>{<Card
title={<><Icon size={18} icon={ICONS.FINANCE} />{(accountDetails && ((accountDetails.total_received_unpaid - accountDetails.total_paid_out) / 100)) || 0} USD</>}
subtitle={accountDetails && accountDetails.total_received_unpaid > 0 &&
<I18nMessage>
This is your pending balance that will be automatically sent to your bank account
</I18nMessage>
}
actions={
<>
<h2 className="section__title--small">
${(accountDetails && (accountDetails.total_received_unpaid / 100)) || 0} Total Received Tips
</h2>
<h2 className="section__title--small">
${(accountDetails && (accountDetails.total_paid_out / 100)) || 0} Withdrawn
{/* <Button */}
{/* button="link" */}
{/* label={detailsExpanded ? __('View less') : __('View more')} */}
{/* iconRight={detailsExpanded ? ICONS.UP : ICONS.DOWN} */}
{/* onClick={() => setDetailsExpanded(!detailsExpanded)} */}
{/* /> */}
</h2>
{/* view more section */}
{/* commenting out because not implemented, but could be used in the future */}
{/* {detailsExpanded && ( */}
{/* <div className="section__subtitle"> */}
{/* <dl> */}
{/* <dt> */}
{/* <span className="dt__text">{__('Earned from uploads')}</span> */}
{/* /!* <span className="help--dt">({__('Earned from channel page')})</span> *!/ */}
{/* </dt> */}
{/* <dd> */}
{/* <span className="dd__text"> */}
{/* {Boolean(1) && ( */}
{/* <Button */}
{/* button="link" */}
{/* className="dd__button" */}
{/* icon={ICONS.UNLOCK} */}
{/* /> */}
{/* )} */}
{/* <CreditAmount amount={1} precision={4} /> */}
{/* </span> */}
{/* </dd> */}
{/* <dt> */}
{/* <span className="dt__text">{__('Earned from channel page')}</span> */}
{/* /!* <span className="help--dt">({__('Delete or edit past content to spend')})</span> *!/ */}
{/* </dt> */}
{/* <dd> */}
{/* <CreditAmount amount={1} precision={4} /> */}
{/* </dd> */}
{/* /!* <dt> *!/ */}
{/* /!* <span className="dt__text">{__('...supporting content')}</span> *!/ */}
{/* /!* <span className="help--dt">({__('Delete supports to spend')})</span> *!/ */}
{/* /!* </dt> *!/ */}
{/* /!* <dd> *!/ */}
{/* /!* <CreditAmount amount={1} precision={4} /> *!/ */}
{/* /!* </dd> *!/ */}
{/* </dl> */}
{/* </div> */}
{/* )} */}
<div className="section__actions">
{/* <Button button="primary" label={__('Receive Payout')} icon={ICONS.SEND} /> */}
<Button button="secondary" label={__('Account Configuration')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} />
</div>
</>
}
/>}</>
);
};
export default WalletBalance;

3
ui/component/walletFiatPaymentBalance/index.js Normal file
View file

@ -0,0 +1,3 @@
import WalletFiatPaymentBalance from './view';
export default WalletFiatPaymentBalance;

76
ui/component/walletFiatPaymentBalance/view.jsx Normal file
View file

@ -0,0 +1,76 @@
// @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;

3
ui/component/walletFiatPaymentHistory/index.js Normal file
View file

@ -0,0 +1,3 @@
import WalletFiatPaymentHistory from './view';
export default WalletFiatPaymentHistory;

118
ui/component/walletFiatPaymentHistory/view.jsx Normal file
View file

@ -0,0 +1,118 @@
// @flow
import React from 'react';
import Button from 'component/button';
import Card from 'component/common/card';
import { Lbryio } from 'lbryinc';
import moment from 'moment';
import { STRIPE_PUBLIC_KEY } from 'config';
let stripeEnvironment = 'test';
// if the key contains pk_live it's a live key
// update the environment for the calls to the backend to indicate which environment to hit
if (STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) {
stripeEnvironment = 'live';
}
type Props = {
accountDetails: any,
transactions: any,
};
const WalletBalance = (props: Props) => {
// receive transactions from parent component
const { transactions } = props;
let accountTransactions;
// reverse so most recent payments come first
if (transactions && transactions.length) {
accountTransactions = transactions.reverse();
}
// const [accountStatusResponse, setAccountStatusResponse] = React.useState();
// const [subscriptions, setSubscriptions] = React.useState();
const [lastFour, setLastFour] = React.useState();
function getCustomerStatus() {
return Lbryio.call(
'customer',
'status',
{
environment: stripeEnvironment,
},
'post'
);
}
// TODO: this is actually incorrect, last4 should be populated based on the transaction not the current customer details
React.useEffect(() => {
(async function() {
const customerStatusResponse = await getCustomerStatus();
const lastFour = customerStatusResponse.PaymentMethods && customerStatusResponse.PaymentMethods.length && customerStatusResponse.PaymentMethods[0].card.last4;
setLastFour(lastFour);
})();
}, []);
return (
<>
<Card
title={__('Payment History')}
body={
<>
<div className="table__wrapper">
<table className="table table--transactions">
<thead>
<tr>
<th className="date-header">{__('Date')}</th>
<th>{<>{__('Receiving Channel Name')}</>}</th>
<th>{__('Tip Location')}</th>
<th>{__('Amount (USD)')} </th>
<th>{__('Card Last 4')}</th>
<th>{__('Anonymous')}</th>
</tr>
</thead>
<tbody>
{accountTransactions &&
accountTransactions.map((transaction) => (
<tr key={transaction.name + transaction.created_at}>
<td>{moment(transaction.created_at).format('LLL')}</td>
<td>
<Button
className=""
navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
label={transaction.channel_name}
button="link"
/>
</td>
<td>
<Button
className=""
navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
label={
transaction.channel_claim_id === transaction.source_claim_id
? 'Channel Page'
: 'Content Page'
}
button="link"
/>
</td>
<td>${transaction.tipped_amount / 100}</td>
<td>{lastFour}</td>
<td>{transaction.private_tip ? 'Yes' : 'No'}</td>
</tr>
))}
</tbody>
</table>
{(!accountTransactions || accountTransactions.length === 0) && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
</div>
</>
}
/>
</>
);
};
export default WalletBalance;

76
ui/page/settings/view.jsx
View file

@ -208,44 +208,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
}}
className="card-stack"
>
{/* @if TARGET='web' */}
{user && user.fiat_enabled && (
<Card
title={__('Bank Accounts')}
subtitle={__('Connect a bank account to receive tips and compensation in your local currency')}
actions={
<div className="section__actions">
<Button
button="secondary"
label={__('Manage')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`}
/>
</div>
}
/>
)}
{/* @endif */}
{/* @if TARGET='web' */}
{isAuthenticated && (
<Card
title={__('Payment Methods')}
subtitle={__('Add a credit card to tip creators in their local currency')}
actions={
<div className="section__actions">
<Button
button="secondary"
label={__('Manage')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`}
/>
</div>
}
/>
)}
{/* @endif */}
<Card title={__('Language')} actions={<SettingLanguage />} />
{homepages && Object.keys(homepages).length > 1 && (
<Card title={__('Homepage')} actions={<HomepageSelector />} />
@ -488,6 +450,44 @@ class SettingsPage extends React.PureComponent<Props, State> {
/>
{/* @endif */}
{/* @if TARGET='web' */}
{user && (
<Card
title={__('Bank Accounts')}
subtitle={__('Connect a bank account to receive tips and compensation in your local currency')}
actions={
<div className="section__actions">
<Button
button="secondary"
label={__('Manage')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`}
/>
</div>
}
/>
)}
{/* @endif */}
{/* @if TARGET='web' */}
{isAuthenticated && (
<Card
title={__('Payment Methods')}
subtitle={__('Add a credit card to tip creators in their local currency')}
actions={
<div className="section__actions">
<Button
button="secondary"
label={__('Manage')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`}
/>
</div>
}
/>
)}
{/* @endif */}
{(isAuthenticated || !IS_WEB) && (
<>
<Card

5
ui/page/settingsStripeAccount/index.js
View file

@ -1,12 +1,9 @@
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import StripeAccountConnection from './view';
import { selectUser } from 'redux/selectors/user';
import { doToast } from 'redux/actions/notifications';
const select = (state) => ({
user: selectUser(state),
});
const select = (state) => ({});
const perform = (dispatch) => ({
doToast: (options) => dispatch(doToast(options)),

257
ui/page/settingsStripeAccount/view.jsx
View file

@ -1,12 +1,13 @@
// @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';
import Page from 'component/page';
import { Lbryio } from 'lbryinc';
import { URL, WEBPACK_WEB_PORT, STRIPE_PUBLIC_KEY } from 'config';
import moment from 'moment';
const isDev = process.env.NODE_ENV !== 'production';
@ -30,7 +31,6 @@ if (isDev) {
type Props = {
source: string,
user: User,
doOpenModal: (string, {}) => void,
doToast: ({ message: string }) => void,
};
@ -40,13 +40,13 @@ type State = {
loading: boolean,
content: ?string,
stripeConnectionUrl: string,
// alreadyUpdated: boolean,
accountConfirmed: boolean,
accountPendingConfirmation: boolean,
accountNotConfirmedButReceivedTips: boolean,
unpaidBalance: number,
pageTitle: string,
accountTransactions: any, // define this type
stillRequiringVerification: boolean,
accountTransactions: any
};
class StripeAccountConnection extends React.Component<Props, State> {
@ -62,19 +62,14 @@ class StripeAccountConnection extends React.Component<Props, State> {
unpaidBalance: 0,
stripeConnectionUrl: '',
pageTitle: 'Add Payout Method',
stillRequiringVerification: true,
accountTransactions: [],
// alreadyUpdated: false,
};
}
componentDidMount() {
const { user } = this.props;
let doToast = this.props.doToast;
// $FlowFixMe
this.experimentalUiEnabled = user && user.experimental_ui;
var that = this;
function getAndSetAccountLink(stillNeedToConfirmAccount) {
@ -140,9 +135,22 @@ class StripeAccountConnection extends React.Component<Props, State> {
if (accountStatusResponse.charges_enabled) {
// account has already been confirmed
that.setState({
const eventuallyDueInformation = accountStatusResponse.account_info.requirements.eventually_due;
const currentlyDueInformation = accountStatusResponse.account_info.requirements.currently_due;
let objectToUpdateState = {
accountConfirmed: true,
});
stillRequiringVerification: false,
};
if ((eventuallyDueInformation && eventuallyDueInformation.length) || (currentlyDueInformation && currentlyDueInformation)) {
objectToUpdateState.stillRequiringVerification = true;
getAndSetAccountLink(false);
}
that.setState(objectToUpdateState);
// user has not confirmed an account but have received payments
} else if (accountStatusResponse.total_received_unpaid > 0) {
that.setState({
@ -184,35 +192,72 @@ class StripeAccountConnection extends React.Component<Props, State> {
unpaidBalance,
accountNotConfirmedButReceivedTips,
pageTitle,
accountTransactions,
stillRequiringVerification,
} = this.state;
const { user } = this.props;
if (user.fiat_enabled) {
return (
<Page backout={{ title: pageTitle, backLabel: __('Done') }} noFooter noSideNavigation>
<Card
title={<div className="table__header-text">{__('Connect a bank account')}</div>}
isBodyList
body={
<div>
{/* show while waiting for account status */}
{!accountConfirmed && !accountPendingConfirmation && !accountNotConfirmedButReceivedTips && (
<div className="card__body-actions">
return (
<Page backout={{ title: pageTitle, backLabel: __('Done') }} noFooter noSideNavigation>
<Card
title={<div className="table__header-text">{__('Connect a bank account')}</div>}
isBodyList
body={
<div>
{/* show while waiting for account status */}
{!accountConfirmed && !accountPendingConfirmation && !accountNotConfirmedButReceivedTips && (
<div className="card__body-actions">
<div>
<div>
<div>
<h3>{__('Getting your bank account connection status...')}</h3>
</div>
<h3>{__('Getting your bank account connection status...')}</h3>
</div>
</div>
)}
{/* user has yet to complete their integration */}
{!accountConfirmed && accountPendingConfirmation && (
<div className="card__body-actions">
</div>
)}
{/* user has yet to complete their integration */}
{!accountConfirmed && accountPendingConfirmation && (
<div className="card__body-actions">
<div>
<div>
<h3>{__('Connect your bank account to Odysee to receive donations directly from users')}</h3>
</div>
<div className="section__actions">
<a href={stripeConnectionUrl}>
<Button button="secondary" label={__('Connect your bank account')} icon={ICONS.FINANCE} />
</a>
</div>
</div>
</div>
)}
{/* user has completed their integration */}
{accountConfirmed && (
<div className="card__body-actions">
<div>
<div>
<h3>{__('Congratulations! Your account has been connected with Odysee.')}</h3>
{stillRequiringVerification && <><h3 style={{marginTop: '10px'}}>Although your account is connected it still requires verification to begin receiving tips.</h3>
<h3 style={{marginTop: '10px'}}>Please use the button below to complete your verification process and enable tipping for your account.</h3></> }
</div>
</div>
</div>
)}
{/* TODO: hopefully we won't be using this anymore and can remove it */}
{accountNotConfirmedButReceivedTips && (
<div className="card__body-actions">
<div>
<div>
<h3>{__('Congratulations, you have already begun receiving tips on Odysee!')}</h3>
<div>
<h3>{__('Connect your bank account to Odysee to receive donations directly from users')}</h3>
<br />
<h3>
{__('Your pending account balance is $%balance% USD.', { balance: unpaidBalance / 100 })}
</h3>
</div>
<br />
<div>
<h3>
{__(
'Connect your bank account to be able to cash your pending balance out to your account.'
)}
</h3>
</div>
<div className="section__actions">
<a href={stripeConnectionUrl}>
@ -221,127 +266,29 @@ class StripeAccountConnection extends React.Component<Props, State> {
</div>
</div>
</div>
)}
{/* user has completed their integration */}
{accountConfirmed && (
<div className="card__body-actions">
<div>
<div>
<h3>{__('Congratulations! Your account has been connected with Odysee.')}</h3>
{unpaidBalance > 0 ? (
<div>
<br />
<h3>
{__('Your pending account balance is $%balance% USD.', { balance: unpaidBalance / 100 })}
</h3>
</div>
) : (
<div>
<br />
<h3>
{__('Your account balance is $0 USD. When you receive a tip you will see it here.')}
</h3>
</div>
)}
</div>
</div>
</div>
)}
{accountNotConfirmedButReceivedTips && (
<div className="card__body-actions">
<div>
<div>
<h3>{__('Congratulations, you have already begun receiving tips on Odysee!')}</h3>
<div>
<br />
<h3>
{__('Your pending account balance is $%balance% USD.', { balance: unpaidBalance / 100 })}
</h3>
</div>
<br />
<div>
<h3>
{__(
'Connect your bank account to be able to cash your pending balance out to your account.'
)}
</h3>
</div>
<div className="section__actions">
<a href={stripeConnectionUrl}>
<Button button="secondary" label={__('Connect your bank account')} icon={ICONS.FINANCE} />
</a>
</div>
</div>
</div>
</div>
)}
</div>
}
/>
<br />
{/* customer already has transactions */}
{accountTransactions && accountTransactions.length > 0 && (
<Card
title={__('Tip History')}
body={
<>
<div className="table__wrapper">
<table className="table table--transactions">
<thead>
<tr>
<th className="date-header">{__('Date')}</th>
<th>{<>{__('Receiving Channel Name')}</>}</th>
<th>{__('Tip Location')}</th>
<th>{__('Amount (USD)')} </th>
<th>{__('Processing Fee')}</th>
<th>{__('Odysee Fee')}</th>
<th>{__('Received Amount')}</th>
</tr>
</thead>
<tbody>
{accountTransactions &&
accountTransactions.map((transaction) => (
<tr key={transaction.name + transaction.created_at}>
<td>{moment(transaction.created_at).format('LLL')}</td>
<td>
<Button
className="stripe__card-link-text"
navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
label={transaction.channel_name}
button="link"
/>
</td>
<td>
<Button
className="stripe__card-link-text"
navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
label={
transaction.channel_claim_id === transaction.source_claim_id
? 'Channel Page'
: 'File Page'
}
button="link"
/>
</td>
<td>${transaction.tipped_amount / 100}</td>
<td>${transaction.transaction_fee / 100}</td>
<td>${transaction.application_fee / 100}</td>
<td>${transaction.received_amount / 100}</td>
</tr>
))}
</tbody>
</table>
</div>
</>
}
/>
)}
</Page>
);
} else {
return <></>; // probably null;
}
</div>
)}
</div>
}
actions={
<>{ stillRequiringVerification && <Button
button="primary"
label={__('Complete Verification')}
icon={ICONS.SETTINGS}
navigate={stripeConnectionUrl}
className="stripe__complete-verification-button"
/> }
<Button
button="secondary"
label={__('View Transactions')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.WALLET}?tab=account-history`}
/></>
}
/>
<br />
</Page>
);
}
}

76
ui/page/settingsStripeCard/view.jsx
View file

@ -6,11 +6,11 @@ import Page from 'component/page';
import Card from 'component/common/card';
import { Lbryio } from 'lbryinc';
import { STRIPE_PUBLIC_KEY } from 'config';
import moment from 'moment';
import Plastic from 'react-plastic';
import Button from 'component/button';
import * as ICONS from 'constants/icons';
import * as MODALS from 'constants/modal_types';
import * as PAGES from 'constants/pages';
let stripeEnvironment = 'test';
// if the key contains pk_live it's a live key
@ -354,13 +354,13 @@ class SettingsStripeCard extends React.Component<Props, State> {
const { scriptFailedToLoad, openModal } = this.props;
const { currentFlowStage, customerTransactions, pageTitle, userCardDetails, paymentMethodId } = this.state;
const { currentFlowStage, pageTitle, userCardDetails, paymentMethodId } = this.state;
return (
<Page backout={{ title: pageTitle, backLabel: __('Done') }} noFooter noSideNavigation>
<div>
{scriptFailedToLoad && (
<div className="error__text">There was an error connecting to Stripe. Please try again later.</div>
<div className="error__text">{__('There was an error connecting to Stripe. Please try again later.')}</div>
)}
</div>
@ -418,72 +418,18 @@ class SettingsStripeCard extends React.Component<Props, State> {
/>
</>
}
actions={
<Button
button="primary"
label={__('View Transactions')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.WALLET}?tab=payment-history`}
/>
}
/>
<br />
{/* if a user has no transactions yet */}
{(!customerTransactions || customerTransactions.length === 0) && (
<Card
title={__('Tip History')}
subtitle={__('You have not sent any tips yet. When you do they will appear here. ')}
/>
)}
</div>
)}
{/* customer already has transactions */}
{customerTransactions && customerTransactions.length > 0 && (
<Card
title={__('Tip History')}
body={
<>
<div className="table__wrapper">
<table className="table table--transactions">
<thead>
<tr>
<th className="date-header">{__('Date')}</th>
<th>{<>{__('Receiving Channel Name')}</>}</th>
<th>{__('Tip Location')}</th>
<th>{__('Amount (USD)')} </th>
<th>{__('Anonymous')}</th>
</tr>
</thead>
<tbody>
{customerTransactions &&
customerTransactions.reverse().map((transaction) => (
<tr key={transaction.name + transaction.created_at}>
<td>{moment(transaction.created_at).format('LLL')}</td>
<td>
<Button
className="stripe__card-link-text"
navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
label={transaction.channel_name}
button="link"
/>
</td>
<td>
<Button
className="stripe__card-link-text"
navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
label={
transaction.channel_claim_id === transaction.source_claim_id
? 'Channel Page'
: 'File Page'
}
button="link"
/>
</td>
<td>${transaction.tipped_amount / 100}</td>
<td>{transaction.private_tip ? 'Yes' : 'No'}</td>
</tr>
))}
</tbody>
</table>
</div>
</>
}
/>
)}
</Page>
);
}

234
ui/page/wallet/view.jsx
View file

@ -1,11 +1,34 @@
// @flow
import React from 'react';
import { withRouter } from 'react-router';
import { useHistory } from 'react-router';
import WalletBalance from 'component/walletBalance';
import WalletFiatBalance from 'component/walletFiatBalance';
import WalletFiatPaymentBalance from 'component/walletFiatPaymentBalance';
import WalletFiatAccountHistory from 'component/walletFiatAccountHistory';
import WalletFiatPaymentHistory from 'component/walletFiatPaymentHistory';
import TxoList from 'component/txoList';
import Page from 'component/page';
import * as PAGES from 'constants/pages';
import Spinner from 'component/spinner';
import YrblWalletEmpty from 'component/yrblWalletEmpty';
import { Lbryio } from 'lbryinc';
import { STRIPE_PUBLIC_KEY } from 'config';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'component/common/tabs';
const TAB_QUERY = 'tab';
const TABS = {
LBRY_CREDITS_TAB: 'credits',
ACCOUNT_HISTORY: 'fiat-account-history',
PAYMENT_HISTORY: 'fiat-payment-history',
};
let stripeEnvironment = 'test';
// if the key contains pk_live it's a live key
// update the environment for the calls to the backend to indicate which environment to hit
if (STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) {
stripeEnvironment = 'live';
}
type Props = {
history: { action: string, push: (string) => void, replace: (string) => void },
@ -14,32 +37,197 @@ type Props = {
};
const WalletPage = (props: Props) => {
const { location, totalBalance } = props;
const { search } = location;
const {
location: { search },
push,
} = useHistory();
// @if TARGET='web'
const urlParams = new URLSearchParams(search);
const currentView = urlParams.get(TAB_QUERY) || TABS.LBRY_CREDITS_TAB;
let tabIndex;
switch (currentView) {
case TABS.LBRY_CREDITS_TAB:
tabIndex = 0;
break;
case TABS.PAYMENT_HISTORY:
tabIndex = 1;
break;
case TABS.ACCOUNT_HISTORY:
tabIndex = 2;
break;
default:
tabIndex = 0;
break;
}
function onTabChange(newTabIndex) {
let url = `/$/${PAGES.WALLET}?`;
if (newTabIndex === 0) {
url += `${TAB_QUERY}=${TABS.LBRY_CREDITS_TAB}`;
} else if (newTabIndex === 1) {
url += `${TAB_QUERY}=${TABS.PAYMENT_HISTORY}`;
} else if (newTabIndex === 2) {
url += `${TAB_QUERY}=${TABS.ACCOUNT_HISTORY}`;
} else {
url += `${TAB_QUERY}=${TABS.LBRY_CREDITS_TAB}`;
}
push(url);
}
const [accountStatusResponse, setAccountStatusResponse] = React.useState();
const [accountTransactionResponse, setAccountTransactionResponse] = React.useState([]);
const [customerTransactions, setCustomerTransactions] = React.useState([]);
function getPaymentHistory() {
return Lbryio.call(
'customer',
'list',
{
environment: stripeEnvironment,
},
'post'
);
}
function getAccountStatus() {
return Lbryio.call(
'account',
'status',
{
environment: stripeEnvironment,
},
'post'
);
}
function getAccountTransactionsa() {
return Lbryio.call(
'account',
'list',
{
environment: stripeEnvironment,
},
'post'
);
}
// calculate account transactions section
React.useEffect(() => {
(async function() {
try {
const response = await getAccountStatus();
setAccountStatusResponse(response);
// TODO: some weird naming clash hence getAccountTransactionsa
const getAccountTransactions = await getAccountTransactionsa();
setAccountTransactionResponse(getAccountTransactions);
} catch (err) {
console.log(err);
}
})();
}, []);
// populate customer payment data
React.useEffect(() => {
(async function() {
try {
// get card payments customer has made
const customerTransactionResponse = await getPaymentHistory();
setCustomerTransactions(customerTransactionResponse);
} catch (err) {
console.log(err);
}
})();
}, []);
// @endif
const { totalBalance } = props;
const showIntro = totalBalance === 0;
const loading = totalBalance === undefined;
return (
<Page>
{loading && (
<div className="main--empty">
<Spinner delayed />
</div>
)}
{!loading && (
<>
{showIntro ? (
<YrblWalletEmpty includeWalletLink />
) : (
<div className="card-stack">
<WalletBalance />
<TxoList search={search} />
</div>
)}
</>
)}
</Page>
<>
{/* @if TARGET='web' */}
<Page>
<Tabs onChange={onTabChange} index={tabIndex}>
<TabList className="tabs__list--collection-edit-page">
<Tab>{__('LBRY Credits')}</Tab>
<Tab>{__('Account History')}</Tab>
<Tab>{__('Payment History')}</Tab>
</TabList>
<TabPanels>
<TabPanel>
<div className="section card-stack">
<div className="lbc-transactions">
{/* if the transactions are loading */}
{loading && (
<div className="main--empty">
<Spinner delayed />
</div>
)}
{/* when the transactions are finished loading */}
{!loading && (
<>
{showIntro ? (
<YrblWalletEmpty includeWalletLink />
) : (
<div className="card-stack">
<WalletBalance />
<TxoList search={search} />
</div>
)}
</>
)}
</div>
</div>
</TabPanel>
<TabPanel>
<div className="section card-stack">
<WalletFiatBalance accountDetails={accountStatusResponse} />
<WalletFiatAccountHistory transactions={accountTransactionResponse} />
</div>
</TabPanel>
<TabPanel>
<div className="section card-stack">
<WalletFiatPaymentBalance transactions={customerTransactions} accountDetails={accountStatusResponse} />
<WalletFiatPaymentHistory transactions={customerTransactions} />
</div>
</TabPanel>
</TabPanels>
</Tabs>
</Page>
{/* @endif */}
{/* @if TARGET='app' */}
<Page>
{loading && (
<div className="main--empty">
<Spinner delayed />
</div>
)}
{!loading && (
<>
{showIntro ? (
<YrblWalletEmpty includeWalletLink />
) : (
<div className="card-stack">
<WalletBalance />
<TxoList search={search} />
</div>
)}
</>
)}
</Page>
{/* @endif */}
</>
);
};
export default withRouter(WalletPage);
export default WalletPage;

4
ui/scss/component/_stripe-card.scss
View file

@ -340,3 +340,7 @@ pre {
//.successCard, .toConfirmCard {
// max-width: 94%
//}
.stripe__complete-verification-button {
margin-right: 10px !important;
}