From 27aa4e4a22ae745f3e501927f1ca7d07b466510f Mon Sep 17 00:00:00 2001 From: zeppi Date: Sat, 17 Jul 2021 12:08:53 -0400 Subject: [PATCH] lint --- flow-typed/Comment.js | 1 + ui/component/common/credit-amount.jsx | 4 +- ui/component/stripeAccountConnection/index.js | 4 +- .../walletSpendableBalanceHelp/index.js | 2 +- ui/component/walletTipAmountSelector/index.js | 2 +- ui/component/walletTipAmountSelector/view.jsx | 126 ++++++++-------- ui/page/settingsStripeAccount/index.js | 4 +- ui/page/settingsStripeAccount/view.jsx | 111 +++++++------- ui/page/settingsStripeCard/view.jsx | 137 +++++++++--------- 9 files changed, 196 insertions(+), 195 deletions(-) diff --git a/flow-typed/Comment.js b/flow-typed/Comment.js index fb30d4c5e..fdfa7880b 100644 --- a/flow-typed/Comment.js +++ b/flow-typed/Comment.js @@ -14,6 +14,7 @@ declare type Comment = { is_pinned: boolean, support_amount: number, replies: number, // number of direct replies (i.e. excluding nested replies). + is_fiat?: boolean, }; declare type PerChannelSettings = { diff --git a/ui/component/common/credit-amount.jsx b/ui/component/common/credit-amount.jsx index b2216193b..98bf4aa33 100644 --- a/ui/component/common/credit-amount.jsx +++ b/ui/component/common/credit-amount.jsx @@ -18,7 +18,7 @@ type Props = { size?: number, superChat?: boolean, superChatLight?: boolean, - isFiat?: boolean + isFiat?: boolean, }; class CreditAmount extends React.PureComponent { @@ -75,7 +75,7 @@ class CreditAmount extends React.PureComponent { if (showLBC && !isFiat) { amountText = ; } else if (showLBC && isFiat) { - amountText =

${(Math.round(amountText * 100) / 100).toFixed(2)}

; + amountText =

${(Math.round(Number(amountText) * 100) / 100).toFixed(2)}

; } if (fee) { diff --git a/ui/component/stripeAccountConnection/index.js b/ui/component/stripeAccountConnection/index.js index 13c136fe0..633726701 100644 --- a/ui/component/stripeAccountConnection/index.js +++ b/ui/component/stripeAccountConnection/index.js @@ -8,6 +8,6 @@ const select = (state) => ({ user: selectUser(state), }); -const perform = (dispatch) => ({}); +// const perform = (dispatch) => ({}); -export default withRouter(connect(select, perform)(StripeAccountConnection)); +export default withRouter(connect(select)(StripeAccountConnection)); diff --git a/ui/component/walletSpendableBalanceHelp/index.js b/ui/component/walletSpendableBalanceHelp/index.js index 809673ce9..b68d99ab5 100644 --- a/ui/component/walletSpendableBalanceHelp/index.js +++ b/ui/component/walletSpendableBalanceHelp/index.js @@ -2,7 +2,7 @@ import { connect } from 'react-redux'; import { selectBalance } from 'lbry-redux'; import WalletSpendableBalanceHelp from './view'; -const select = (state, props) => ({ +const select = (state) => ({ balance: selectBalance(state), }); diff --git a/ui/component/walletTipAmountSelector/index.js b/ui/component/walletTipAmountSelector/index.js index 8f285f91e..f811d9502 100644 --- a/ui/component/walletTipAmountSelector/index.js +++ b/ui/component/walletTipAmountSelector/index.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import { makeSelectClaimForUri, selectBalance } from 'lbry-redux'; +import { selectBalance } from 'lbry-redux'; import WalletTipAmountSelector from './view'; import { selectUserVerifiedEmail } from 'redux/selectors/user'; diff --git a/ui/component/walletTipAmountSelector/view.jsx b/ui/component/walletTipAmountSelector/view.jsx index 5e2843364..711782cda 100644 --- a/ui/component/walletTipAmountSelector/view.jsx +++ b/ui/component/walletTipAmountSelector/view.jsx @@ -33,10 +33,11 @@ type Props = { claim: StreamClaim, uri: string, onTipErrorChange: (string) => void, + activeTab: string, }; function WalletTipAmountSelector(props: Props) { - const { balance, amount, onChange, activeTab, isAuthenticated, claim, uri, onTipErrorChange } = props; + const { balance, amount, onChange, activeTab, claim, onTipErrorChange } = props; const [useCustomTip, setUseCustomTip] = usePersistedState('comment-support:useCustomTip', false); const [tipError, setTipError] = React.useState(); @@ -106,19 +107,18 @@ function WalletTipAmountSelector(props: Props) { setCanReceiveFiatTip(true); } }) - .catch(function(error) { + .catch(function (error) { // console.log(error); }); }, []); React.useEffect(() => { - // setHasSavedCard(false); // setCanReceiveFiatTip(true); const regexp = RegExp(/^(\d*([.]\d{0,8})?)$/); const validTipInput = regexp.test(String(amount)); - let tipError; + let tipError = ''; if (amount === 0) { tipError = __('Amount must be a positive number'); @@ -196,49 +196,52 @@ function WalletTipAmountSelector(props: Props) { )} - {useCustomTip && activeTab === TAB_FIAT && !hasCardSaved && - <> -
- -
- - } + {useCustomTip && activeTab === TAB_FIAT && !hasCardSaved && ( + <> +
+ +
+ + )} {/* has card saved but cant creator cant receive tips */} - {useCustomTip && activeTab === TAB_FIAT && hasCardSaved && !canReceiveFiatTip && - <> -
- Only select creators can receive tips at this time -
- - } + {useCustomTip && activeTab === TAB_FIAT && hasCardSaved && !canReceiveFiatTip && ( + <> +
+ Only select creators can receive tips at this time +
+ + )} {/* has card saved but cant creator cant receive tips */} - {useCustomTip && activeTab === TAB_FIAT && hasCardSaved && canReceiveFiatTip && - <> -
- Send a tip directly from your attached card -
- - } + {useCustomTip && activeTab === TAB_FIAT && hasCardSaved && canReceiveFiatTip && ( + <> +
+ Send a tip directly from your attached card +
+ + )} {useCustomTip && (
- {__('Custom support amount')}{' '} - }}> - (%lbc_balance% available) - - - // TODO: add conditional based on hasSavedCard - : <> - + label={ + activeTab === TAB_LBC ? ( + + {__('Custom support amount')}{' '} + }}> + (%lbc_balance% available) + + + ) : ( + // TODO: add conditional based on hasSavedCard + <> + ) // <> //
@@ -258,38 +261,37 @@ function WalletTipAmountSelector(props: Props) {
)} - {/*// TODO: add conditional based on hasSavedCard*/} {/* lbc tab */} {activeTab === TAB_LBC && } {/* fiat button but no card saved */} - {!useCustomTip && activeTab === TAB_FIAT && !hasCardSaved && - <> -
- -
- - } + {!useCustomTip && activeTab === TAB_FIAT && !hasCardSaved && ( + <> +
+ +
+ + )} {/* has card saved but cant creator cant receive tips */} - {!useCustomTip && activeTab === TAB_FIAT && hasCardSaved && !canReceiveFiatTip && - <> -
- Only select creators can receive tips at this time -
- - } + {!useCustomTip && activeTab === TAB_FIAT && hasCardSaved && !canReceiveFiatTip && ( + <> +
+ Only select creators can receive tips at this time +
+ + )} {/* has card saved but cant creator cant receive tips */} - {!useCustomTip && activeTab === TAB_FIAT && hasCardSaved && canReceiveFiatTip && - <> -
- Send a tip directly from your attached card -
- - } - + {!useCustomTip && activeTab === TAB_FIAT && hasCardSaved && canReceiveFiatTip && ( + <> +
+ Send a tip directly from your attached card +
+ + )} ); } diff --git a/ui/page/settingsStripeAccount/index.js b/ui/page/settingsStripeAccount/index.js index 13c136fe0..633726701 100644 --- a/ui/page/settingsStripeAccount/index.js +++ b/ui/page/settingsStripeAccount/index.js @@ -8,6 +8,6 @@ const select = (state) => ({ user: selectUser(state), }); -const perform = (dispatch) => ({}); +// const perform = (dispatch) => ({}); -export default withRouter(connect(select, perform)(StripeAccountConnection)); +export default withRouter(connect(select)(StripeAccountConnection)); diff --git a/ui/page/settingsStripeAccount/view.jsx b/ui/page/settingsStripeAccount/view.jsx index 1915bd5f4..7c0b6d8d2 100644 --- a/ui/page/settingsStripeAccount/view.jsx +++ b/ui/page/settingsStripeAccount/view.jsx @@ -44,6 +44,7 @@ type State = { accountNotConfirmedButReceivedTips: boolean, unpaidBalance: number, pageTitle: string, + accountTransactions: any, // define this type }; class StripeAccountConnection extends React.Component { @@ -123,15 +124,14 @@ class StripeAccountConnection extends React.Component { environment: stripeEnvironment, }, 'post' - ) - .then((accountListResponse) => { - - that.setState({ - accountTransactions: accountListResponse, - }); - - console.log(accountListResponse); + ).then((accountListResponse: any) => { + // TODO type this + that.setState({ + accountTransactions: accountListResponse, }); + + console.log(accountListResponse); + }); } // if charges already enabled, no need to generate an account link @@ -227,16 +227,15 @@ class StripeAccountConnection extends React.Component {

- {__( - 'Your pending account balance is $%balance% USD.', - { balance: unpaidBalance / 100 } - )} + {__('Your pending account balance is $%balance% USD.', { balance: unpaidBalance / 100 })}

) : (

-

{__('Your account balance is $0 USD. When you receive a tip you will see it here.')}

+

+ {__('Your account balance is $0 USD. When you receive a tip you will see it here.')} +

)}
@@ -251,16 +250,15 @@ class StripeAccountConnection extends React.Component {

- {__( - 'Your pending account balance is $%balance% USD.', - { balance: unpaidBalance / 100 } - )} + {__('Your pending account balance is $%balance% USD.', { balance: unpaidBalance / 100 })}


- {__('Connect your bank account to be able to cash your pending balance out to your account.')} + {__( + 'Connect your bank account to be able to cash your pending balance out to your account.' + )}

@@ -277,10 +275,8 @@ class StripeAccountConnection extends React.Component { />
- {/* customer already has transactions */} {accountTransactions && accountTransactions.length > 0 && ( - {
- - - - - - - - - + + + + + + + + + - {accountTransactions && - accountTransactions.reverse().map((transaction) => ( - - - - - - - - - - ))} + {accountTransactions && + accountTransactions.reverse().map((transaction) => ( + + + + + + + + + + ))}
{__('Date')}{<>{__('Receiving Channel Name')}}{__('Tip Location')}{__('Amount (USD)')} {__('Processing Fee')}{__('Odysee Fee')}{__('Received Amount')}
{__('Date')}{<>{__('Receiving Channel Name')}}{__('Tip Location')}{__('Amount (USD)')} {__('Processing Fee')}{__('Odysee Fee')}{__('Received Amount')}
{moment(transaction.created_at).format('LLL')} - - ${transaction.tipped_amount / 100}${transaction.transaction_fee / 100}${transaction.application_fee / 100}${transaction.received_amount / 100}
{moment(transaction.created_at).format('LLL')} + + ${transaction.tipped_amount / 100}${transaction.transaction_fee / 100}${transaction.application_fee / 100}${transaction.received_amount / 100}
diff --git a/ui/page/settingsStripeCard/view.jsx b/ui/page/settingsStripeCard/view.jsx index 657425985..e99ef2719 100644 --- a/ui/page/settingsStripeCard/view.jsx +++ b/ui/page/settingsStripeCard/view.jsx @@ -55,11 +55,11 @@ class SettingsStripeCard extends React.Component { } componentDidMount() { - var that = this; + let that = this; console.log(this.props); - var doToast = this.props.doToast; + let doToast = this.props.doToast; const script = document.createElement('script'); script.src = 'https://js.stripe.com/v3/'; @@ -69,14 +69,14 @@ class SettingsStripeCard extends React.Component { document.body.appendChild(script); // public key of the stripe account - var publicKey = STRIPE_PUBLIC_KEY; + let publicKey = STRIPE_PUBLIC_KEY; // client secret of the SetupIntent (don't share with anyone but customer) - var clientSecret = ''; + let clientSecret = ''; // setting a timeout to let the client secret populate // TODO: fix this, should be a cleaner way - setTimeout(function() { + setTimeout(function () { // check if customer has card setup already Lbryio.call( 'customer', @@ -89,20 +89,20 @@ class SettingsStripeCard extends React.Component { .then((customerStatusResponse) => { // user has a card saved if their defaultPaymentMethod has an id const defaultPaymentMethod = customerStatusResponse.Customer.invoice_settings.default_payment_method; - var userHasAlreadySetupPayment = Boolean(defaultPaymentMethod && defaultPaymentMethod.id); + let userHasAlreadySetupPayment = Boolean(defaultPaymentMethod && defaultPaymentMethod.id); // show different frontend if user already has card if (userHasAlreadySetupPayment) { - var card = customerStatusResponse.PaymentMethods[0].card; + let card = customerStatusResponse.PaymentMethods[0].card; - var customer = customerStatusResponse.Customer; + let customer = customerStatusResponse.Customer; - var topOfDisplay = customer.email.split('@')[0]; - var bottomOfDisplay = '@' + customer.email.split('@')[1]; + let topOfDisplay = customer.email.split('@')[0]; + let bottomOfDisplay = '@' + customer.email.split('@')[1]; console.log(customerStatusResponse.Customer); - var cardDetails = { + let cardDetails = { brand: card.brand, expiryYear: card.exp_year, expiryMonth: card.exp_month, @@ -159,7 +159,7 @@ class SettingsStripeCard extends React.Component { }); // if the status call fails, either an actual error or need to run setup first }) - .catch(function(error) { + .catch(function (error) { console.log(error); // errorString passed from the API (with a 403 error) @@ -189,7 +189,7 @@ class SettingsStripeCard extends React.Component { setupStripe(); }); } else if (error === 'internal_apis_down') { - var displayString = 'There was an error from the server, please let support know' + var displayString = 'There was an error from the server, please let support know'; doToast({ message: displayString, isError: true }); } else { console.log('Unseen before error'); @@ -197,11 +197,10 @@ class SettingsStripeCard extends React.Component { }); }, 250); - function setupStripe() { // TODO: have to fix this, using so that the script is available - setTimeout(function() { - var stripeElements = function(publicKey, setupIntent) { + setTimeout(function () { + var stripeElements = function (publicKey, setupIntent) { var stripe = Stripe(publicKey); var elements = stripe.elements(); @@ -223,17 +222,17 @@ class SettingsStripeCard extends React.Component { card.mount('#card-element'); // Element focus ring - card.on('focus', function() { + card.on('focus', function () { var el = document.getElementById('card-element'); el.classList.add('focused'); }); - card.on('blur', function() { + card.on('blur', function () { var el = document.getElementById('card-element'); el.classList.remove('focused'); }); - card.on('ready', function() { + card.on('ready', function () { card.focus(); }); @@ -260,7 +259,7 @@ class SettingsStripeCard extends React.Component { billing_details: { email: email }, }, }) - .then(function(result) { + .then(function (result) { if (result.error) { console.log(result); @@ -277,7 +276,7 @@ class SettingsStripeCard extends React.Component { // Handle payment submission when user clicks the pay button. var button = document.getElementById('submit'); - button.addEventListener('click', function(event) { + button.addEventListener('click', function (event) { submitForm(event); }); @@ -294,7 +293,7 @@ class SettingsStripeCard extends React.Component { stripeElements(publicKey, clientSecret); // Show a spinner on payment submission - var changeLoadingState = function(isLoading) { + var changeLoadingState = function (isLoading) { if (isLoading) { // $FlowFixMe document.querySelector('button').disabled = true; @@ -313,8 +312,8 @@ class SettingsStripeCard extends React.Component { }; // shows a success / error message when the payment is complete - var orderComplete = function(stripe, clientSecret) { - stripe.retrieveSetupIntent(clientSecret).then(function(result) { + var orderComplete = function (stripe, clientSecret) { + stripe.retrieveSetupIntent(clientSecret).then(function (result) { Lbryio.call( 'customer', 'status', @@ -323,14 +322,14 @@ class SettingsStripeCard extends React.Component { }, 'post' ).then((customerStatusResponse) => { - var card = customerStatusResponse.PaymentMethods[0].card; + let card = customerStatusResponse.PaymentMethods[0].card; - var customer = customerStatusResponse.Customer; + let customer = customerStatusResponse.Customer; - var topOfDisplay = customer.email.split('@')[0]; - var bottomOfDisplay = '@' + customer.email.split('@')[1]; + let topOfDisplay = customer.email.split('@')[0]; + let bottomOfDisplay = '@' + customer.email.split('@')[1]; - var cardDetails = { + let cardDetails = { brand: card.brand, expiryYear: card.exp_year, expiryMonth: card.exp_month, @@ -356,17 +355,16 @@ class SettingsStripeCard extends React.Component { } } - render() { - var that = this; + let that = this; - function setAsConfirmingCard(){ + function setAsConfirmingCard() { that.setState({ currentFlowStage: 'confirmingCard', - }) + }); } - const { scriptFailedToLoad, doOpenModal, openModal } = this.props; + const { scriptFailedToLoad, openModal } = this.props; const { currentFlowStage, customerTransactions, pageTitle, userCardDetails, paymentMethodId } = this.state; @@ -429,7 +427,7 @@ class SettingsStripeCard extends React.Component { setAsConfirmingCard: setAsConfirmingCard, }); }} - /> + /> } /> @@ -442,7 +440,6 @@ class SettingsStripeCard extends React.Component { subtitle={__('You have not sent any tips yet. When you do they will appear here. ')} /> )} -
)} @@ -455,40 +452,43 @@ class SettingsStripeCard extends React.Component {
- - - - - - - + + + + + + + - {customerTransactions && - customerTransactions.reverse().map((transaction) => ( - - - - - - - - ))} + {customerTransactions && + customerTransactions.reverse().map((transaction) => ( + + + + + + + + ))}
{__('Date')}{<>{__('Receiving Channel Name')}}{__('Tip Location')}{__('Amount (USD)')} {__('Anonymous')}
{__('Date')}{<>{__('Receiving Channel Name')}}{__('Tip Location')}{__('Amount (USD)')} {__('Anonymous')}
{moment(transaction.created_at).format('LLL')} - - ${transaction.tipped_amount / 100}{transaction.private_tip ? 'Yes' : 'No'}
{moment(transaction.created_at).format('LLL')} + + ${transaction.tipped_amount / 100}{transaction.private_tip ? 'Yes' : 'No'}
@@ -496,7 +496,6 @@ class SettingsStripeCard extends React.Component { } /> )} - ); }