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

Chore desktop cleanup #6896

Merged
jessopb merged 8 commits from chore-desktopCleanup into master 2021-08-18 00:34:17 +02:00
Conversation 0 Commits 8 Files changed 15 +286 -249
11 changed files with 286 additions and 249 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 98c85fbc8e - Show all commits

2
.env.defaults
View file

@ -19,7 +19,7 @@ THUMBNAIL_CDN_URL=https://image-processor.vanwanet.com/optimize/
WELCOME_VERSION=1.0 WELCOME_VERSION=1.0
# STRIPE # STRIPE
STRIPE_PUBLIC_KEY='pk_test_NoL1JWL7i1ipfhVId5KfDZgo' # STRIPE_PUBLIC_KEY='pk_test_NoL1JWL7i1ipfhVId5KfDZgo'
# Analytics # Analytics
MATOMO_URL=https://analytics.lbry.com/ MATOMO_URL=https://analytics.lbry.com/

7
static/app-strings.json
View file

@ -2090,5 +2090,12 @@
"Expand Comments": "Expand Comments", "Expand Comments": "Expand Comments",
"Expand": "Expand", "Expand": "Expand",
"Load More": "Load More", "Load More": "Load More",
"You followed @Danheim!": "You followed @Danheim!",
"Collection": "Collection",
"%channelName% isn't live right now, but the chat is! Check back later to watch the stream.": "%channelName% isn't live right now, but the chat is! Check back later to watch the stream.",
"Show this channel your appreciation by sending a donation of Credits. ": "Show this channel your appreciation by sending a donation of Credits. ",
"Review": "Review",
"Add a Card ": "Add a Card ",
" Tip Creators": " Tip Creators",
"--end--": "--end--" "--end--": "--end--"
} }

25
ui/component/commentCreate/view.jsx
View file

@ -24,7 +24,7 @@ import { Lbryio } from 'lbryinc';
let stripeEnvironment = 'test'; let stripeEnvironment = 'test';
// if the key contains pk_live it's a live key // 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 // update the environment for the calls to the backend to indicate which environment to hit
if (STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) { if (STRIPE_PUBLIC_KEY && STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) {
stripeEnvironment = 'live'; stripeEnvironment = 'live';
} }
@ -245,10 +245,13 @@ export function CommentCreate(props: Props) {
}, 1500); }, 1500);
doToast({ doToast({
message: __("You sent %tipAmount% LBRY Credits as a tip to %tipChannelName%, I'm sure they appreciate it!", { message: __(
tipAmount: tipAmount, // force show decimal places "You sent %tipAmount% LBRY Credits as a tip to %tipChannelName%, I'm sure they appreciate it!",
tipChannelName, {
}), tipAmount: tipAmount, // force show decimal places
tipChannelName,
}
),
}); });
setSuccessTip({ txid, tipAmount }); setSuccessTip({ txid, tipAmount });
@ -265,7 +268,8 @@ export function CommentCreate(props: Props) {
Lbryio.call( Lbryio.call(
'customer', 'customer',
'tip', 'tip',
{ // round to deal with floating point precision {
// round to deal with floating point precision
amount: Math.round(100 * roundedAmount), // convert from dollars to cents amount: Math.round(100 * roundedAmount), // convert from dollars to cents
creator_channel_name: tipChannelName, // creator_channel_name creator_channel_name: tipChannelName, // creator_channel_name
creator_channel_claim_id: channelClaimId, creator_channel_claim_id: channelClaimId,
@ -387,12 +391,7 @@ export function CommentCreate(props: Props) {
} }
}} }}
> >
<FormField <FormField type="textarea" name={'comment_signup_prompt'} placeholder={__('Say something about this...')} />
type="textarea"
name={'comment_signup_prompt'}
placeholder={__('Say something about this...')}
label={isFetchingChannels ? __('Comment') : undefined}
/>
<div className="section__actions--no-margin"> <div className="section__actions--no-margin">
<Button disabled button="primary" label={__('Post --[button to submit something]--')} requiresAuth={IS_WEB} /> <Button disabled button="primary" label={__('Post --[button to submit something]--')} requiresAuth={IS_WEB} />
</div> </div>
@ -534,6 +533,7 @@ export function CommentCreate(props: Props) {
}} }}
/> />
)} )}
{/* @if TARGET='web' */}
{!claimIsMine && ( {!claimIsMine && (
<Button <Button
disabled={disabled} disabled={disabled}
@ -546,6 +546,7 @@ export function CommentCreate(props: Props) {
}} }}
/> />
)} )}
{/* @endif */}
{isReply && !minTip && ( {isReply && !minTip && (
<Button <Button
button="link" button="link"

168
ui/component/walletSendTip/view.jsx
View file

@ -15,14 +15,8 @@ import LbcSymbol from 'component/common/lbc-symbol';
import { parseURI } from 'lbry-redux'; import { parseURI } from 'lbry-redux';
import usePersistedState from 'effects/use-persisted-state'; import usePersistedState from 'effects/use-persisted-state';
import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp'; import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
import { STRIPE_PUBLIC_KEY } from 'config'; import { getStripeEnvironment } from 'util/stripe';
let stripeEnvironment = getStripeEnvironment();
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';
}
const DEFAULT_TIP_AMOUNTS = [1, 5, 25, 100]; const DEFAULT_TIP_AMOUNTS = [1, 5, 25, 100];
const MINIMUM_FIAT_TIP = 1; const MINIMUM_FIAT_TIP = 1;
@ -100,7 +94,7 @@ function WalletSendTip(props: Props) {
// check if creator has a payment method saved // check if creator has a payment method saved
React.useEffect(() => { React.useEffect(() => {
if (channelClaimId && isAuthenticated) { if (channelClaimId && isAuthenticated && stripeEnvironment) {
Lbryio.call( Lbryio.call(
'customer', 'customer',
'status', 'status',
@ -118,16 +112,18 @@ function WalletSendTip(props: Props) {
setHasSavedCard(Boolean(defaultPaymentMethodId)); setHasSavedCard(Boolean(defaultPaymentMethodId));
}); });
} }
}, [channelClaimId, isAuthenticated]); }, [channelClaimId, isAuthenticated, stripeEnvironment]);
// check if creator has an account saved // check if creator has an account saved
React.useEffect(() => { React.useEffect(() => {
const tipInputElement = document.getElementById('tip-input'); const tipInputElement = document.getElementById('tip-input');
if (tipInputElement) { tipInputElement.focus() } if (tipInputElement) {
tipInputElement.focus();
}
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
if (channelClaimId) { if (channelClaimId && stripeEnvironment) {
Lbryio.call( Lbryio.call(
'account', 'account',
'check', 'check',
@ -149,7 +145,7 @@ function WalletSendTip(props: Props) {
// console.log(error); // console.log(error);
}); });
} }
}, [channelClaimId]); }, [channelClaimId, stripeEnvironment]);
const noBalance = balance === 0; const noBalance = balance === 0;
const tipAmount = useCustomTip ? customTipAmount : presetTipAmount; const tipAmount = useCustomTip ? customTipAmount : presetTipAmount;
@ -175,7 +171,9 @@ function WalletSendTip(props: Props) {
let explainerText = ''; let explainerText = '';
if (activeTab === TAB_BOOST) { if (activeTab === TAB_BOOST) {
iconToUse = ICONS.LBC; iconToUse = ICONS.LBC;
explainerText = __('This refundable boost will improve the discoverability of this %claimTypeText% while active.', {claimTypeText}); explainerText = __('This refundable boost will improve the discoverability of this %claimTypeText% while active.', {
claimTypeText,
});
} else if (activeTab === TAB_FIAT) { } else if (activeTab === TAB_FIAT) {
iconToUse = ICONS.FINANCE; iconToUse = ICONS.FINANCE;
explainerText = __('Show this channel your appreciation by sending a donation in USD. '); explainerText = __('Show this channel your appreciation by sending a donation in USD. ');
@ -216,7 +214,7 @@ function WalletSendTip(props: Props) {
} else if (tipAmount < MINIMUM_PUBLISH_BID) { } else if (tipAmount < MINIMUM_PUBLISH_BID) {
tipError = __('Amount must be higher'); tipError = __('Amount must be higher');
} }
// if tip fiat tab // if tip fiat tab
} else { } else {
regexp = RegExp(/^(\d*([.]\d{0,2})?)$/); regexp = RegExp(/^(\d*([.]\d{0,2})?)$/);
const validTipInput = regexp.test(String(tipAmount)); const validTipInput = regexp.test(String(tipAmount));
@ -276,7 +274,8 @@ function WalletSendTip(props: Props) {
Lbryio.call( Lbryio.call(
'customer', 'customer',
'tip', 'tip',
{ // round to fix issues with floating point numbers {
// round to fix issues with floating point numbers
amount: Math.round(100 * tipAmount), // convert from dollars to cents amount: Math.round(100 * tipAmount), // convert from dollars to cents
creator_channel_name: tipChannelName, // creator_channel_name creator_channel_name: tipChannelName, // creator_channel_name
creator_channel_claim_id: channelClaimId, creator_channel_claim_id: channelClaimId,
@ -297,7 +296,7 @@ function WalletSendTip(props: Props) {
}), }),
}); });
}) })
.catch(function(error) { .catch(function (error) {
let displayError = 'Sorry, there was an error in processing your payment!'; let displayError = 'Sorry, there was an error in processing your payment!';
if (error.message !== 'payment intent failed to confirm') { if (error.message !== 'payment intent failed to confirm') {
@ -316,10 +315,10 @@ function WalletSendTip(props: Props) {
} }
} }
const countDecimals = function(value) { const countDecimals = function (value) {
const text = value.toString(); const text = value.toString();
const index = text.indexOf('.'); const index = text.indexOf('.');
return (text.length - index - 1); return text.length - index - 1;
}; };
function handleCustomPriceChange(event: SyntheticInputEvent<*>) { function handleCustomPriceChange(event: SyntheticInputEvent<*>) {
@ -387,7 +386,9 @@ function WalletSendTip(props: Props) {
const displayAmount = !isNan(tipAmount) ? amountToShow : ''; const displayAmount = !isNan(tipAmount) ? amountToShow : '';
if (activeTab === TAB_BOOST) { if (activeTab === TAB_BOOST) {
return (claimIsMine ? __('Boost Your %claimTypeText%', {claimTypeText}) : __('Boost This %claimTypeText%', {claimTypeText})); return claimIsMine
? __('Boost Your %claimTypeText%', { claimTypeText })
: __('Boost This %claimTypeText%', { claimTypeText });
} else if (activeTab === TAB_FIAT) { } else if (activeTab === TAB_FIAT) {
return __('Send a $%displayAmount% Tip', { displayAmount }); return __('Send a $%displayAmount% Tip', { displayAmount });
} else if (activeTab === TAB_LBC) { } else if (activeTab === TAB_LBC) {
@ -416,7 +417,16 @@ function WalletSendTip(props: Props) {
{/* if there is no LBC balance, show user frontend to get credits */} {/* if there is no LBC balance, show user frontend to get credits */}
{/* if there is lbc, the main tip/boost gui with the 3 tabs at the top */} {/* if there is lbc, the main tip/boost gui with the 3 tabs at the top */}
<Card <Card
title={<LbcSymbol postfix={claimIsMine ? __('Boost Your %claimTypeText%', {claimTypeText}) : __('Support This %claimTypeText%', {claimTypeText})} size={22} />} title={
<LbcSymbol
postfix={
claimIsMine
? __('Boost Your %claimTypeText%', { claimTypeText })
: __('Support This %claimTypeText%', { claimTypeText })
}
size={22}
/>
}
subtitle={ subtitle={
<React.Fragment> <React.Fragment>
{!claimIsMine && ( {!claimIsMine && (
@ -429,7 +439,9 @@ function WalletSendTip(props: Props) {
button="alt" button="alt"
onClick={() => { onClick={() => {
const tipInputElement = document.getElementById('tip-input'); const tipInputElement = document.getElementById('tip-input');
if (tipInputElement) { tipInputElement.focus() } if (tipInputElement) {
tipInputElement.focus();
}
if (!isConfirming) { if (!isConfirming) {
setActiveTab(TAB_LBC); setActiveTab(TAB_LBC);
} }
@ -438,20 +450,24 @@ function WalletSendTip(props: Props) {
/> />
{/* tip fiat tab button */} {/* tip fiat tab button */}
{/* @if TARGET='web' */} {/* @if TARGET='web' */}
<Button {stripeEnvironment && (
key="tip-fiat" <Button
icon={ICONS.FINANCE} key="tip-fiat"
label={__('Tip')} icon={ICONS.FINANCE}
button="alt" label={__('Tip')}
onClick={() => { button="alt"
const tipInputElement = document.getElementById('tip-input'); onClick={() => {
if (tipInputElement) { tipInputElement.focus() } const tipInputElement = document.getElementById('tip-input');
if (!isConfirming) { if (tipInputElement) {
setActiveTab(TAB_FIAT); tipInputElement.focus();
} }
}} if (!isConfirming) {
className={classnames('button-toggle', { 'button-toggle--active': activeTab === TAB_FIAT })} setActiveTab(TAB_FIAT);
/> }
}}
className={classnames('button-toggle', { 'button-toggle--active': activeTab === TAB_FIAT })}
/>
)}
{/* @endif */} {/* @endif */}
{/* tip LBC tab button */} {/* tip LBC tab button */}
<Button <Button
@ -461,7 +477,9 @@ function WalletSendTip(props: Props) {
button="alt" button="alt"
onClick={() => { onClick={() => {
const tipInputElement = document.getElementById('tip-input'); const tipInputElement = document.getElementById('tip-input');
if (tipInputElement) { tipInputElement.focus() } if (tipInputElement) {
tipInputElement.focus();
}
if (!isConfirming) { if (!isConfirming) {
setActiveTab(TAB_BOOST); setActiveTab(TAB_BOOST);
} }
@ -493,33 +511,29 @@ function WalletSendTip(props: Props) {
</div> </div>
<div className="confirm__label">{setConfirmLabel()}</div> <div className="confirm__label">{setConfirmLabel()}</div>
<div className="confirm__value"> <div className="confirm__value">
{activeTab === TAB_FIAT ? <p>$ {(Math.round(tipAmount * 100) / 100).toFixed(2)}</p> : <LbcSymbol postfix={tipAmount} size={22} />} {activeTab === TAB_FIAT ? (
<p>$ {(Math.round(tipAmount * 100) / 100).toFixed(2)}</p>
) : (
<LbcSymbol postfix={tipAmount} size={22} />
)}
</div> </div>
</div> </div>
</div> </div>
<div className="section__actions"> <div className="section__actions">
<Button <Button autoFocus onClick={handleSubmit} button="primary" disabled={isPending} label={__('Confirm')} />
autoFocus
onClick={handleSubmit}
button="primary"
disabled={isPending}
label={__('Confirm')}
/>
<Button button="link" label={__('Cancel')} onClick={() => setIsConfirming(false)} /> <Button button="link" label={__('Cancel')} onClick={() => setIsConfirming(false)} />
</div> </div>
</> </>
// only show the prompt to earn more if its lbc or boost tab and no balance ) : !((activeTab === TAB_LBC || activeTab === TAB_BOOST) && noBalance) ? (
// otherwise you can show the full prompt <>
) : (!((activeTab === TAB_LBC || activeTab === TAB_BOOST) && noBalance)
? <>
<div className="section"> <div className="section">
<ChannelSelector /> <ChannelSelector />
</div> </div>
{activeTab === TAB_FIAT && !hasCardSaved && ( {activeTab === TAB_FIAT && !hasCardSaved && (
<h3 className="add-card-prompt"> <h3 className="add-card-prompt">
<Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card')} button="link" /> <Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card')} button="link" />{' '}
{' '}{__('To Tip Creators')} {__('To Tip Creators')}
</h3> </h3>
)} )}
@ -625,28 +639,36 @@ function WalletSendTip(props: Props) {
<div className="help">{__('The payment will be made from your saved card')}</div> <div className="help">{__('The payment will be made from your saved card')}</div>
)} )}
</> </>
// if it's LBC and there is no balance, you can prompt to purchase LBC ) : (
: <Card // if it's LBC and there is no balance, you can prompt to purchase LBC
title={<I18nMessage tokens={{ lbc: <LbcSymbol size={22} /> }}>Supporting content requires %lbc%</I18nMessage>} <Card
subtitle={ title={
<I18nMessage tokens={{ lbc: <LbcSymbol /> }}> <I18nMessage tokens={{ lbc: <LbcSymbol size={22} /> }}>Supporting content requires %lbc%</I18nMessage>
With %lbc%, you can send tips to your favorite creators, or help boost their content for more people to }
see. subtitle={
</I18nMessage> <I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
} With %lbc%, you can send tips to your favorite creators, or help boost their content for more people
actions={ to see.
<div className="section__actions"> </I18nMessage>
<Button }
icon={ICONS.REWARDS} actions={
button="primary" <div className="section__actions">
label={__('Earn Rewards')} <Button
navigate={`/$/${PAGES.REWARDS}`} icon={ICONS.REWARDS}
/> button="primary"
<Button icon={ICONS.BUY} button="secondary" label={__('Buy/Swap Credits')} navigate={`/$/${PAGES.BUY}`} /> label={__('Earn Rewards')}
<Button button="link" label={__('Nevermind')} onClick={closeModal} /> navigate={`/$/${PAGES.REWARDS}`}
</div> />
} <Button
/> icon={ICONS.BUY}
button="secondary"
label={__('Buy/Swap Credits')}
navigate={`/$/${PAGES.BUY}`}
/>
<Button button="link" label={__('Nevermind')} onClick={closeModal} />
</div>
}
/>
) )
} }
/> />

84
ui/component/walletTipAmountSelector/view.jsx
View file

@ -11,14 +11,8 @@ import classnames from 'classnames';
import usePersistedState from 'effects/use-persisted-state'; import usePersistedState from 'effects/use-persisted-state';
import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp'; import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
import { Lbryio } from 'lbryinc'; import { Lbryio } from 'lbryinc';
import { STRIPE_PUBLIC_KEY } from 'config'; import { getStripeEnvironment } from 'util/stripe';
let stripeEnvironment = getStripeEnvironment();
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';
}
const DEFAULT_TIP_AMOUNTS = [1, 5, 25, 100]; const DEFAULT_TIP_AMOUNTS = [1, 5, 25, 100];
@ -76,45 +70,49 @@ function WalletTipAmountSelector(props: Props) {
// check if creator has a payment method saved // check if creator has a payment method saved
React.useEffect(() => { React.useEffect(() => {
Lbryio.call( if (stripeEnvironment) {
'customer', Lbryio.call(
'status', 'customer',
{ 'status',
environment: stripeEnvironment, {
}, environment: stripeEnvironment,
'post' },
).then((customerStatusResponse) => { 'post'
const defaultPaymentMethodId = ).then((customerStatusResponse) => {
customerStatusResponse.Customer && const defaultPaymentMethodId =
customerStatusResponse.Customer.invoice_settings && customerStatusResponse.Customer &&
customerStatusResponse.Customer.invoice_settings.default_payment_method && customerStatusResponse.Customer.invoice_settings &&
customerStatusResponse.Customer.invoice_settings.default_payment_method.id; customerStatusResponse.Customer.invoice_settings.default_payment_method &&
customerStatusResponse.Customer.invoice_settings.default_payment_method.id;
setHasSavedCard(Boolean(defaultPaymentMethodId)); setHasSavedCard(Boolean(defaultPaymentMethodId));
}); });
}, []); }
}, [stripeEnvironment]);
// //
React.useEffect(() => { React.useEffect(() => {
Lbryio.call( if (stripeEnvironment) {
'account', Lbryio.call(
'check', 'account',
{ 'check',
channel_claim_id: channelClaimId, {
channel_name: tipChannelName, channel_claim_id: channelClaimId,
environment: stripeEnvironment, channel_name: tipChannelName,
}, environment: stripeEnvironment,
'post' },
) 'post'
.then((accountCheckResponse) => { )
if (accountCheckResponse === true && canReceiveFiatTip !== true) { .then((accountCheckResponse) => {
setCanReceiveFiatTip(true); if (accountCheckResponse === true && canReceiveFiatTip !== true) {
} setCanReceiveFiatTip(true);
}) }
.catch(function (error) { })
// console.log(error); .catch(function (error) {
}); // console.log(error);
}, []); });
}
}, [stripeEnvironment]);
React.useEffect(() => { React.useEffect(() => {
// setHasSavedCard(false); // setHasSavedCard(false);

2
ui/constants/stripe.js Normal file
View file

@ -0,0 +1,2 @@
export const TEST = 'test';
export const LIVE = 'live';

5
ui/page/file/view.jsx
View file

@ -12,7 +12,6 @@ import FileRenderDownload from 'component/fileRenderDownload';
import RecommendedContent from 'component/recommendedContent'; import RecommendedContent from 'component/recommendedContent';
import CollectionContent from 'component/collectionContentSidebar'; import CollectionContent from 'component/collectionContentSidebar';
import CommentsList from 'component/commentsList'; import CommentsList from 'component/commentsList';
import { Redirect } from 'react-router';
import Button from 'component/button'; import Button from 'component/button';
import I18nMessage from 'component/i18nMessage'; import I18nMessage from 'component/i18nMessage';
import Empty from 'component/common/empty'; import Empty from 'component/common/empty';
@ -145,10 +144,6 @@ function FilePage(props: Props) {
); );
} }
if (!claimIsMine && isLivestream) {
return <Redirect to={`/$/${PAGES.LIVESTREAM}`} />;
}
if (obscureNsfw && isMature) { if (obscureNsfw && isMature) {
return ( return (
<Page className="file-page" filePage isMarkdown={isMarkdown}> <Page className="file-page" filePage isMarkdown={isMarkdown}>

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

@ -5,19 +5,14 @@ import React from 'react';
import Page from 'component/page'; import Page from 'component/page';
import Card from 'component/common/card'; import Card from 'component/common/card';
import { Lbryio } from 'lbryinc'; import { Lbryio } from 'lbryinc';
import { STRIPE_PUBLIC_KEY } from 'config';
import Plastic from 'react-plastic'; import Plastic from 'react-plastic';
import Button from 'component/button'; import Button from 'component/button';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
import * as MODALS from 'constants/modal_types'; import * as MODALS from 'constants/modal_types';
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
import { STRIPE_PUBLIC_KEY } from 'config';
let stripeEnvironment = 'test'; import { getStripeEnvironment } from 'util/stripe';
// if the key contains pk_live it's a live key let stripeEnvironment = getStripeEnvironment();
// 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';
}
const APIS_DOWN_ERROR_RESPONSE = __('There was an error from the server, please try again later'); const APIS_DOWN_ERROR_RESPONSE = __('There was an error from the server, please try again later');
const CARD_SETUP_ERROR_RESPONSE = __('There was an error getting your card setup, please try again later'); const CARD_SETUP_ERROR_RESPONSE = __('There was an error getting your card setup, please try again later');
@ -79,114 +74,116 @@ class SettingsStripeCard extends React.Component<Props, State> {
// TODO: fix this, should be a cleaner way // TODO: fix this, should be a cleaner way
setTimeout(function () { setTimeout(function () {
// check if customer has card setup already // check if customer has card setup already
Lbryio.call( if (stripeEnvironment) {
'customer', Lbryio.call(
'status', 'customer',
{ 'status',
environment: stripeEnvironment, {
}, environment: stripeEnvironment,
'post' },
) 'post'
.then((customerStatusResponse) => { )
// user has a card saved if their defaultPaymentMethod has an id .then((customerStatusResponse) => {
const defaultPaymentMethod = customerStatusResponse.Customer.invoice_settings.default_payment_method; // user has a card saved if their defaultPaymentMethod has an id
let userHasAlreadySetupPayment = Boolean(defaultPaymentMethod && defaultPaymentMethod.id); const defaultPaymentMethod = customerStatusResponse.Customer.invoice_settings.default_payment_method;
let userHasAlreadySetupPayment = Boolean(defaultPaymentMethod && defaultPaymentMethod.id);
// show different frontend if user already has card // show different frontend if user already has card
if (userHasAlreadySetupPayment) { if (userHasAlreadySetupPayment) {
let card = customerStatusResponse.PaymentMethods[0].card; let card = customerStatusResponse.PaymentMethods[0].card;
let customer = customerStatusResponse.Customer; let customer = customerStatusResponse.Customer;
let topOfDisplay = customer.email.split('@')[0]; let topOfDisplay = customer.email.split('@')[0];
let bottomOfDisplay = '@' + customer.email.split('@')[1]; let bottomOfDisplay = '@' + customer.email.split('@')[1];
let cardDetails = { let cardDetails = {
brand: card.brand, brand: card.brand,
expiryYear: card.exp_year, expiryYear: card.exp_year,
expiryMonth: card.exp_month, expiryMonth: card.exp_month,
lastFour: card.last4, lastFour: card.last4,
topOfDisplay: topOfDisplay, topOfDisplay: topOfDisplay,
bottomOfDisplay: bottomOfDisplay, bottomOfDisplay: bottomOfDisplay,
}; };
that.setState({ that.setState({
currentFlowStage: 'cardConfirmed', currentFlowStage: 'cardConfirmed',
pageTitle: 'Tip History', pageTitle: 'Tip History',
userCardDetails: cardDetails, userCardDetails: cardDetails,
paymentMethodId: customerStatusResponse.PaymentMethods[0].id, paymentMethodId: customerStatusResponse.PaymentMethods[0].id,
}); });
// otherwise, prompt them to save a card // otherwise, prompt them to save a card
} else { } else {
that.setState({ that.setState({
currentFlowStage: 'confirmingCard', currentFlowStage: 'confirmingCard',
}); });
// get a payment method secret for frontend // get a payment method secret for frontend
Lbryio.call(
'customer',
'setup',
{
environment: stripeEnvironment,
},
'post'
).then((customerSetupResponse) => {
clientSecret = customerSetupResponse.client_secret;
// instantiate stripe elements
setupStripe();
});
}
// get customer transactions
Lbryio.call( Lbryio.call(
'customer', 'customer',
'setup', 'list',
{ {
environment: stripeEnvironment, environment: stripeEnvironment,
}, },
'post' 'post'
).then((customerSetupResponse) => { ).then((customerTransactionsResponse) => {
clientSecret = customerSetupResponse.client_secret; that.setState({
customerTransactions: customerTransactionsResponse,
// instantiate stripe elements });
setupStripe();
}); });
} // if the status call fails, either an actual error or need to run setup first
})
.catch(function (error) {
// errorString passed from the API (with a 403 error)
const errorString = 'user as customer is not setup yet';
// get customer transactions // if it's beamer's error indicating the account is not linked yet
Lbryio.call( if (error.message && error.message.indexOf(errorString) > -1) {
'customer', // send them to save a card
'list', that.setState({
{ currentFlowStage: 'confirmingCard',
environment: stripeEnvironment, });
},
'post' // get a payment method secret for frontend
).then((customerTransactionsResponse) => { Lbryio.call(
that.setState({ 'customer',
customerTransactions: customerTransactionsResponse, 'setup',
}); {
environment: stripeEnvironment,
},
'post'
).then((customerSetupResponse) => {
clientSecret = customerSetupResponse.client_secret;
// instantiate stripe elements
setupStripe();
});
// 500 error from the backend being down
} else if (error === 'internal_apis_down') {
doToast({ message: APIS_DOWN_ERROR_RESPONSE, isError: true });
} else {
// probably an error from stripe
doToast({ message: CARD_SETUP_ERROR_RESPONSE, isError: true });
}
}); });
// if the status call fails, either an actual error or need to run setup first }
})
.catch(function (error) {
// errorString passed from the API (with a 403 error)
const errorString = 'user as customer is not setup yet';
// if it's beamer's error indicating the account is not linked yet
if (error.message && error.message.indexOf(errorString) > -1) {
// send them to save a card
that.setState({
currentFlowStage: 'confirmingCard',
});
// get a payment method secret for frontend
Lbryio.call(
'customer',
'setup',
{
environment: stripeEnvironment,
},
'post'
).then((customerSetupResponse) => {
clientSecret = customerSetupResponse.client_secret;
// instantiate stripe elements
setupStripe();
});
// 500 error from the backend being down
} else if (error === 'internal_apis_down') {
doToast({ message: APIS_DOWN_ERROR_RESPONSE, isError: true });
} else {
// probably an error from stripe
doToast({ message: CARD_SETUP_ERROR_RESPONSE, isError: true });
}
});
}, 250); }, 250);
function setupStripe() { function setupStripe() {

4
ui/page/show/view.jsx
View file

@ -1,5 +1,5 @@
// @flow // @flow
import { DOMAIN } from 'config'; import { DOMAIN, ENABLE_NO_SOURCE_CLAIMS } from 'config';
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { lazyImport } from 'util/lazyImport'; import { lazyImport } from 'util/lazyImport';
@ -199,7 +199,7 @@ function ShowPage(props: Props) {
/> />
</Page> </Page>
); );
} else if (isLivestream) { } else if (isLivestream && ENABLE_NO_SOURCE_CLAIMS) {
innerContent = <LivestreamPage uri={uri} />; innerContent = <LivestreamPage uri={uri} />;
} else { } else {
innerContent = <FilePage uri={uri} location={location} />; innerContent = <FilePage uri={uri} location={location} />;

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

@ -12,8 +12,8 @@ import * as PAGES from 'constants/pages';
import Spinner from 'component/spinner'; import Spinner from 'component/spinner';
import YrblWalletEmpty from 'component/yrblWalletEmpty'; import YrblWalletEmpty from 'component/yrblWalletEmpty';
import { Lbryio } from 'lbryinc'; import { Lbryio } from 'lbryinc';
import { STRIPE_PUBLIC_KEY } from 'config';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'component/common/tabs'; import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'component/common/tabs';
import { getStripeEnvironment } from 'util/stripe';
const TAB_QUERY = 'tab'; const TAB_QUERY = 'tab';
@ -23,12 +23,7 @@ const TABS = {
PAYMENT_HISTORY: 'fiat-payment-history', PAYMENT_HISTORY: 'fiat-payment-history',
}; };
let stripeEnvironment = 'test'; let stripeEnvironment = getStripeEnvironment();
// 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 = { type Props = {
history: { action: string, push: (string) => void, replace: (string) => void }, history: { action: string, push: (string) => void, replace: (string) => void },
@ -117,8 +112,11 @@ const WalletPage = (props: Props) => {
// calculate account transactions section // calculate account transactions section
React.useEffect(() => { React.useEffect(() => {
(async function() { (async function () {
try { try {
if (!stripeEnvironment) {
return;
}
const response = await getAccountStatus(); const response = await getAccountStatus();
setAccountStatusResponse(response); setAccountStatusResponse(response);
@ -131,23 +129,27 @@ const WalletPage = (props: Props) => {
console.log(err); console.log(err);
} }
})(); })();
}, []); }, [stripeEnvironment]);
// populate customer payment data // populate customer payment data
React.useEffect(() => { React.useEffect(() => {
(async function() { (async function () {
try { try {
// get card payments customer has made // get card payments customer has made
if (!stripeEnvironment) {
return;
}
let customerTransactionResponse = await getPaymentHistory(); let customerTransactionResponse = await getPaymentHistory();
if (customerTransactionResponse && customerTransactionResponse.length) {
customerTransactionResponse.reverse(); customerTransactionResponse.reverse();
}
setCustomerTransactions(customerTransactionResponse); setCustomerTransactions(customerTransactionResponse);
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
})(); })();
}, []); }, [stripeEnvironment]);
// @endif // @endif

13
ui/util/stripe.js Normal file
View file

@ -0,0 +1,13 @@
// @flow
import { STRIPE_PUBLIC_KEY } from 'config';
import * as STRIPE_CONSTS from 'constants/stripe';
export function getStripeEnvironment() {
if (STRIPE_PUBLIC_KEY) {
if (STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) {
return STRIPE_CONSTS.LIVE;
} else {
return STRIPE_CONSTS.TEST;
}
}
return null;
}