Stripe integration fix (#6850)
* fix frontend bug * show superchats in order properly * scroll properly when switching tabs * calculate fiat tips properly * sum up lbc amounts * refactor code a bit remove why isnt this working bit * bugfix cant tip fiat if no lbc balance * add toast when someone does a tip for a comment * add error toast for card page * show error on account connection page * automatically truncate to two decimals * close to working perfectly * show decimals value better * increase size of input value * one bug left but almost working perfectly * reverse so newest transactions come first * fixing bug caused by floating point precision * eslint fixes * remove unused conditional * get stuff ready for merge * bugfix and cleanup * requested changes * fixing flow errors * fix last flow error and touchups * fix i18n and remove logs Co-authored-by: Anthony <contact@anthonymayfield.com>
This commit is contained in:
jessopb
GitHub
parent
445566c915
commit
cd4c1efd70
7 changed files with 414 additions and 296 deletions
|
|
@ -131,6 +131,7 @@ export function CommentCreate(props: Props) {
|
|||
return;
|
||||
}
|
||||
|
||||
// if comment post didn't work, but tip was already made, try again to create comment
|
||||
if (commentFailure && tipAmount === successTip.tipAmount) {
|
||||
handleCreateComment(successTip.txid);
|
||||
return;
|
||||
|
|
@ -147,27 +148,6 @@ export function CommentCreate(props: Props) {
|
|||
const activeChannelName = activeChannelClaim && activeChannelClaim.name;
|
||||
const activeChannelId = activeChannelClaim && activeChannelClaim.claim_id;
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
if (activeTab === TAB_LBC) {
|
||||
// call sendTip and then run the callback from the response
|
||||
// second parameter is callback
|
||||
sendTip(
|
||||
params,
|
||||
(response) => {
|
||||
const { txid } = response;
|
||||
// todo: why the setTimeout?
|
||||
setTimeout(() => {
|
||||
handleCreateComment(txid);
|
||||
}, 1500);
|
||||
setSuccessTip({ txid, tipAmount });
|
||||
},
|
||||
() => {
|
||||
// reset the frontend so people can send a new comment
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
);
|
||||
} else {
|
||||
// setup variables for tip API
|
||||
let channelClaimId, tipChannelName;
|
||||
// if there is a signing channel it's on a file
|
||||
|
|
@ -181,14 +161,43 @@ export function CommentCreate(props: Props) {
|
|||
tipChannelName = claim.name;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
if (activeTab === TAB_LBC) {
|
||||
// call sendTip and then run the callback from the response
|
||||
// second parameter is callback
|
||||
sendTip(
|
||||
params,
|
||||
(response) => {
|
||||
const { txid } = response;
|
||||
// todo: why the setTimeout?
|
||||
setTimeout(() => {
|
||||
handleCreateComment(txid);
|
||||
}, 1500);
|
||||
|
||||
doToast({
|
||||
message: __("You sent %tipAmount% LBRY Credits as a tip to %tipChannelName%, I'm sure they appreciate it!", {
|
||||
tipAmount: tipAmount, // force show decimal places
|
||||
tipChannelName,
|
||||
}),
|
||||
});
|
||||
|
||||
setSuccessTip({ txid, tipAmount });
|
||||
},
|
||||
() => {
|
||||
// reset the frontend so people can send a new comment
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
);
|
||||
} else {
|
||||
const sourceClaimId = claim.claim_id;
|
||||
const roundedAmount = Math.round(tipAmount * 100) / 100;
|
||||
|
||||
Lbryio.call(
|
||||
'customer',
|
||||
'tip',
|
||||
{
|
||||
amount: 100 * roundedAmount, // convert from dollars to cents
|
||||
{ // round to deal with floating point precision
|
||||
amount: Math.round(100 * roundedAmount), // convert from dollars to cents
|
||||
creator_channel_name: tipChannelName, // creator_channel_name
|
||||
creator_channel_claim_id: channelClaimId,
|
||||
tipper_channel_name: activeChannelName,
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@ type Props = {
|
|||
fetchingComments: boolean,
|
||||
doSuperChatList: (string) => void,
|
||||
superChats: Array<Comment>,
|
||||
superChatsTotalAmount: number,
|
||||
myChannels: ?Array<ChannelClaim>,
|
||||
};
|
||||
|
||||
|
|
@ -38,38 +37,27 @@ export default function LivestreamComments(props: Props) {
|
|||
embed,
|
||||
doCommentSocketConnect,
|
||||
doCommentSocketDisconnect,
|
||||
comments,
|
||||
comments: commentsByChronologicalOrder,
|
||||
doCommentList,
|
||||
fetchingComments,
|
||||
doSuperChatList,
|
||||
superChats,
|
||||
superChatsTotalAmount,
|
||||
myChannels,
|
||||
superChats: superChatsByTipAmount,
|
||||
} = props;
|
||||
|
||||
let superChatsFiatAmount, superChatsTotalAmount;
|
||||
|
||||
const commentsRef = React.createRef();
|
||||
const [scrollBottom, setScrollBottom] = React.useState(true);
|
||||
const [viewMode, setViewMode] = React.useState(VIEW_MODE_CHAT);
|
||||
const [performedInitialScroll, setPerformedInitialScroll] = React.useState(false);
|
||||
const claimId = claim && claim.claim_id;
|
||||
const commentsLength = comments && comments.length;
|
||||
const commentsToDisplay = viewMode === VIEW_MODE_CHAT ? comments : superChats;
|
||||
const commentsLength = commentsByChronologicalOrder && commentsByChronologicalOrder.length;
|
||||
const commentsToDisplay = viewMode === VIEW_MODE_CHAT ? commentsByChronologicalOrder : superChatsByTipAmount;
|
||||
|
||||
const discussionElement = document.querySelector('.livestream__comments');
|
||||
const commentElement = document.querySelector('.livestream-comment');
|
||||
|
||||
// todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine
|
||||
function isMyComment(channelId: string) {
|
||||
if (myChannels != null && channelId != null) {
|
||||
for (let i = 0; i < myChannels.length; i++) {
|
||||
if (myChannels[i].claim_id === channelId) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if (claimId) {
|
||||
doCommentList(uri, '', 1, 75);
|
||||
|
|
@ -115,6 +103,51 @@ export default function LivestreamComments(props: Props) {
|
|||
}
|
||||
}, [commentsLength, discussionElement, handleScroll, performedInitialScroll, setPerformedInitialScroll]);
|
||||
|
||||
// sum total amounts for fiat tips and lbc tips
|
||||
if (superChatsByTipAmount) {
|
||||
let fiatAmount = 0;
|
||||
let LBCAmount = 0;
|
||||
for (const superChat of superChatsByTipAmount) {
|
||||
if (superChat.is_fiat) {
|
||||
fiatAmount = fiatAmount + superChat.support_amount;
|
||||
} else {
|
||||
LBCAmount = LBCAmount + superChat.support_amount;
|
||||
}
|
||||
}
|
||||
|
||||
superChatsFiatAmount = fiatAmount;
|
||||
superChatsTotalAmount = LBCAmount;
|
||||
}
|
||||
|
||||
let superChatsReversed;
|
||||
// array of superchats organized by fiat or not first, then support amount
|
||||
if (superChatsByTipAmount) {
|
||||
const clonedSuperchats = JSON.parse(JSON.stringify(superChatsByTipAmount));
|
||||
|
||||
// sort by fiat first then by support amount
|
||||
superChatsReversed = clonedSuperchats.sort(function(a, b) {
|
||||
// if both are fiat, organize by support
|
||||
if (a.is_fiat === b.is_fiat) {
|
||||
return b.support_amount - a.support_amount;
|
||||
// otherwise, if they are not both fiat, put the fiat transaction first
|
||||
} else {
|
||||
return (a.is_fiat === b.is_fiat) ? 0 : a.is_fiat ? -1 : 1;
|
||||
}
|
||||
}).reverse();
|
||||
}
|
||||
|
||||
// todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine
|
||||
function isMyComment(channelId: string) {
|
||||
if (myChannels != null && channelId != null) {
|
||||
for (let i = 0; i < myChannels.length; i++) {
|
||||
if (myChannels[i].claim_id === channelId) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!claim) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -130,41 +163,55 @@ export default function LivestreamComments(props: Props) {
|
|||
<div className="card livestream__discussion">
|
||||
<div className="card__header--between livestream-discussion__header">
|
||||
<div className="livestream-discussion__title">{__('Live discussion')}</div>
|
||||
{superChatsTotalAmount > 0 && (
|
||||
{(superChatsTotalAmount || 0) > 0 && (
|
||||
<div className="recommended-content__toggles">
|
||||
|
||||
{/* the superchats in chronological order button */}
|
||||
<Button
|
||||
className={classnames('button-toggle', {
|
||||
'button-toggle--active': viewMode === VIEW_MODE_CHAT,
|
||||
})}
|
||||
label={__('Chat')}
|
||||
onClick={() => setViewMode(VIEW_MODE_CHAT)}
|
||||
onClick={function() {
|
||||
setViewMode(VIEW_MODE_CHAT);
|
||||
const livestreamCommentsDiv = document.getElementsByClassName('livestream__comments')[0];
|
||||
const divHeight = livestreamCommentsDiv.scrollHeight;
|
||||
livestreamCommentsDiv.scrollTop = divHeight;
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* the button to show superchats listed by most to least support amount */}
|
||||
<Button
|
||||
className={classnames('button-toggle', {
|
||||
'button-toggle--active': viewMode === VIEW_MODE_SUPER_CHAT,
|
||||
})}
|
||||
label={
|
||||
<>
|
||||
<CreditAmount amount={superChatsTotalAmount} size={8} /> {__('Tipped')}
|
||||
<CreditAmount amount={superChatsTotalAmount || 0} size={8} /> /
|
||||
<CreditAmount amount={superChatsFiatAmount || 0} size={8} isFiat /> {' '}{__('Tipped')}
|
||||
</>
|
||||
}
|
||||
onClick={() => setViewMode(VIEW_MODE_SUPER_CHAT)}
|
||||
onClick={function() {
|
||||
setViewMode(VIEW_MODE_SUPER_CHAT);
|
||||
const livestreamCommentsDiv = document.getElementsByClassName('livestream__comments')[0];
|
||||
const divHeight = livestreamCommentsDiv.scrollHeight;
|
||||
livestreamCommentsDiv.scrollTop = divHeight * -1;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<>
|
||||
{fetchingComments && !comments && (
|
||||
{fetchingComments && !commentsByChronologicalOrder && (
|
||||
<div className="main--empty">
|
||||
<Spinner />
|
||||
</div>
|
||||
)}
|
||||
<div ref={commentsRef} className="livestream__comments-wrapper">
|
||||
{viewMode === VIEW_MODE_CHAT && superChatsTotalAmount > 0 && superChats && (
|
||||
{viewMode === VIEW_MODE_CHAT && superChatsByTipAmount && (superChatsTotalAmount || 0) > 0 && (
|
||||
<div className="livestream-superchats__wrapper">
|
||||
<div className="livestream-superchats__inner">
|
||||
{superChats.map((superChat: Comment) => (
|
||||
{superChatsByTipAmount.map((superChat: Comment) => (
|
||||
<Tooltip key={superChat.comment_id} label={superChat.comment}>
|
||||
<div className="livestream-superchat">
|
||||
<div className="livestream-superchat__thumbnail">
|
||||
|
|
@ -187,9 +234,23 @@ export default function LivestreamComments(props: Props) {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{!fetchingComments && comments.length > 0 ? (
|
||||
{/* top to bottom comment display */}
|
||||
{!fetchingComments && commentsByChronologicalOrder.length > 0 ? (
|
||||
<div className="livestream__comments">
|
||||
{commentsToDisplay.map((comment) => (
|
||||
{viewMode === VIEW_MODE_CHAT && commentsToDisplay.map((comment) => (
|
||||
<LivestreamComment
|
||||
key={comment.comment_id}
|
||||
uri={uri}
|
||||
authorUri={comment.channel_url}
|
||||
commentId={comment.comment_id}
|
||||
message={comment.comment}
|
||||
supportAmount={comment.support_amount}
|
||||
isFiat={comment.is_fiat}
|
||||
commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
|
||||
/>
|
||||
))}
|
||||
|
||||
{viewMode === VIEW_MODE_SUPER_CHAT && superChatsReversed && superChatsReversed.map((comment) => (
|
||||
<LivestreamComment
|
||||
key={comment.comment_id}
|
||||
uri={uri}
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ function WalletSendTip(props: Props) {
|
|||
|
||||
// check if creator has an account saved
|
||||
React.useEffect(() => {
|
||||
var tipInputElement = document.getElementById('tip-input');
|
||||
const tipInputElement = document.getElementById('tip-input');
|
||||
if (tipInputElement) { tipInputElement.focus() }
|
||||
}, []);
|
||||
|
||||
|
|
@ -141,6 +141,8 @@ function WalletSendTip(props: Props) {
|
|||
.then((accountCheckResponse) => {
|
||||
if (accountCheckResponse === true && canReceiveFiatTip !== true) {
|
||||
setCanReceiveFiatTip(true);
|
||||
} else {
|
||||
setCanReceiveFiatTip(false);
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
|
|
@ -169,7 +171,8 @@ function WalletSendTip(props: Props) {
|
|||
}
|
||||
const claimTypeText = setClaimTypeText();
|
||||
|
||||
let iconToUse, explainerText;
|
||||
let iconToUse;
|
||||
let explainerText = '';
|
||||
if (activeTab === TAB_BOOST) {
|
||||
iconToUse = ICONS.LBC;
|
||||
explainerText = __('This refundable boost will improve the discoverability of this %claimTypeText% while active.', {claimTypeText});
|
||||
|
|
@ -273,8 +276,8 @@ function WalletSendTip(props: Props) {
|
|||
Lbryio.call(
|
||||
'customer',
|
||||
'tip',
|
||||
{
|
||||
amount: 100 * tipAmount, // convert from dollars to cents
|
||||
{ // round to fix issues with floating point numbers
|
||||
amount: Math.round(100 * tipAmount), // convert from dollars to cents
|
||||
creator_channel_name: tipChannelName, // creator_channel_name
|
||||
creator_channel_claim_id: channelClaimId,
|
||||
tipper_channel_name: sendAnonymously ? '' : activeChannelName,
|
||||
|
|
@ -295,7 +298,7 @@ function WalletSendTip(props: Props) {
|
|||
});
|
||||
})
|
||||
.catch(function(error) {
|
||||
var 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') {
|
||||
displayError = error.message;
|
||||
|
|
@ -313,10 +316,53 @@ function WalletSendTip(props: Props) {
|
|||
}
|
||||
}
|
||||
|
||||
function handleCustomPriceChange(event: SyntheticInputEvent<*>) {
|
||||
const tipAmount = parseFloat(event.target.value);
|
||||
const countDecimals = function(value) {
|
||||
const text = value.toString();
|
||||
const index = text.indexOf('.');
|
||||
return (text.length - index - 1);
|
||||
};
|
||||
|
||||
function handleCustomPriceChange(event: SyntheticInputEvent<*>) {
|
||||
let tipAmountAsString = event.target.value;
|
||||
|
||||
let tipAmount = parseFloat(tipAmountAsString);
|
||||
|
||||
const howManyDecimals = countDecimals(tipAmountAsString);
|
||||
|
||||
// fiat tip input
|
||||
if (activeTab === TAB_FIAT) {
|
||||
if (Number.isNaN(tipAmount)) {
|
||||
setCustomTipAmount('');
|
||||
}
|
||||
|
||||
// allow maximum of two decimal places
|
||||
if (howManyDecimals > 2) {
|
||||
tipAmount = Math.floor(tipAmount * 100) / 100;
|
||||
}
|
||||
|
||||
// remove decimals, and then get number of digits
|
||||
const howManyDigits = Math.trunc(tipAmount).toString().length;
|
||||
|
||||
if (howManyDigits > 4 && tipAmount !== 1000) {
|
||||
setTipError('Amount cannot be over 1000 dollars');
|
||||
setCustomTipAmount(tipAmount);
|
||||
} else if (tipAmount > 1000) {
|
||||
setTipError('Amount cannot be over 1000 dollars');
|
||||
setCustomTipAmount(tipAmount);
|
||||
} else {
|
||||
setCustomTipAmount(tipAmount);
|
||||
}
|
||||
// LBC tip input
|
||||
} else {
|
||||
// TODO: this is a bit buggy, needs a touchup
|
||||
// if (howManyDecimals > 9) {
|
||||
// // only allows up to 8 decimal places
|
||||
// tipAmount = Number(tipAmount.toString().match(/^-?\d+(?:\.\d{0,8})?/)[0]);
|
||||
//
|
||||
// setTipError('Please only use up to 8 decimals');
|
||||
// }
|
||||
setCustomTipAmount(tipAmount);
|
||||
}
|
||||
}
|
||||
|
||||
function buildButtonText() {
|
||||
|
|
@ -331,8 +377,14 @@ function WalletSendTip(props: Props) {
|
|||
return false;
|
||||
}
|
||||
|
||||
function convertToTwoDecimals(number) {
|
||||
return (Math.round(number * 100) / 100).toFixed(2);
|
||||
}
|
||||
|
||||
const amountToShow = activeTab === TAB_FIAT ? convertToTwoDecimals(tipAmount) : tipAmount;
|
||||
|
||||
// if it's a valid number display it, otherwise do an empty string
|
||||
const displayAmount = !isNan(tipAmount) ? tipAmount : '';
|
||||
const displayAmount = !isNan(tipAmount) ? amountToShow : '';
|
||||
|
||||
if (activeTab === TAB_BOOST) {
|
||||
return (claimIsMine ? __('Boost Your %claimTypeText%', {claimTypeText}) : __('Boost This %claimTypeText%', {claimTypeText}));
|
||||
|
|
@ -362,30 +414,7 @@ function WalletSendTip(props: Props) {
|
|||
return (
|
||||
<Form onSubmit={handleSubmit}>
|
||||
{/* if there is no LBC balance, show user frontend to get credits */}
|
||||
{noBalance ? (
|
||||
<Card
|
||||
title={<I18nMessage tokens={{ lbc: <LbcSymbol size={22} /> }}>Supporting content requires %lbc%</I18nMessage>}
|
||||
subtitle={
|
||||
<I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
|
||||
With %lbc%, you can send tips to your favorite creators, or help boost their content for more people to
|
||||
see.
|
||||
</I18nMessage>
|
||||
}
|
||||
actions={
|
||||
<div className="section__actions">
|
||||
<Button
|
||||
icon={ICONS.REWARDS}
|
||||
button="primary"
|
||||
label={__('Earn Rewards')}
|
||||
navigate={`/$/${PAGES.REWARDS}`}
|
||||
/>
|
||||
<Button icon={ICONS.BUY} button="secondary" label={__('Buy/Swap Credits')} navigate={`/$/${PAGES.BUY}`} />
|
||||
<Button button="link" label={__('Nevermind')} onClick={closeModal} />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
// 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
|
||||
title={<LbcSymbol postfix={claimIsMine ? __('Boost Your %claimTypeText%', {claimTypeText}) : __('Support This %claimTypeText%', {claimTypeText})} size={22} />}
|
||||
subtitle={
|
||||
|
|
@ -399,7 +428,7 @@ function WalletSendTip(props: Props) {
|
|||
label={__('Tip')}
|
||||
button="alt"
|
||||
onClick={() => {
|
||||
var tipInputElement = document.getElementById('tip-input');
|
||||
const tipInputElement = document.getElementById('tip-input');
|
||||
if (tipInputElement) { tipInputElement.focus() }
|
||||
if (!isConfirming) {
|
||||
setActiveTab(TAB_LBC);
|
||||
|
|
@ -415,7 +444,7 @@ function WalletSendTip(props: Props) {
|
|||
label={__('Tip')}
|
||||
button="alt"
|
||||
onClick={() => {
|
||||
var tipInputElement = document.getElementById('tip-input');
|
||||
const tipInputElement = document.getElementById('tip-input');
|
||||
if (tipInputElement) { tipInputElement.focus() }
|
||||
if (!isConfirming) {
|
||||
setActiveTab(TAB_FIAT);
|
||||
|
|
@ -431,7 +460,7 @@ function WalletSendTip(props: Props) {
|
|||
label={__('Boost')}
|
||||
button="alt"
|
||||
onClick={() => {
|
||||
var tipInputElement = document.getElementById('tip-input');
|
||||
const tipInputElement = document.getElementById('tip-input');
|
||||
if (tipInputElement) { tipInputElement.focus() }
|
||||
if (!isConfirming) {
|
||||
setActiveTab(TAB_BOOST);
|
||||
|
|
@ -444,7 +473,7 @@ function WalletSendTip(props: Props) {
|
|||
|
||||
{/* short explainer under the button */}
|
||||
<div className="section__subtitle">
|
||||
{explainerText}
|
||||
{explainerText + ' '}
|
||||
{/* {activeTab === TAB_FIAT && !hasCardSaved && <Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add A Card')} button="link" />} */}
|
||||
{<Button label={__('Learn more')} button="link" href="https://lbry.com/faq/tipping" />}
|
||||
</div>
|
||||
|
|
@ -464,7 +493,7 @@ function WalletSendTip(props: Props) {
|
|||
</div>
|
||||
<div className="confirm__label">{setConfirmLabel()}</div>
|
||||
<div className="confirm__value">
|
||||
{activeTab === TAB_FIAT ? <p>$ {tipAmount}</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>
|
||||
|
|
@ -479,8 +508,10 @@ function WalletSendTip(props: Props) {
|
|||
<Button button="link" label={__('Cancel')} onClick={() => setIsConfirming(false)} />
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
// only show the prompt to earn more if its lbc or boost tab and no balance
|
||||
// otherwise you can show the full prompt
|
||||
) : (!((activeTab === TAB_LBC || activeTab === TAB_BOOST) && noBalance)
|
||||
? <>
|
||||
<div className="section">
|
||||
<ChannelSelector />
|
||||
</div>
|
||||
|
|
@ -554,11 +585,13 @@ function WalletSendTip(props: Props) {
|
|||
)}
|
||||
</React.Fragment>
|
||||
}
|
||||
className="form-field--price-amount"
|
||||
error={tipError}
|
||||
min="0"
|
||||
step="any"
|
||||
type="number"
|
||||
style={{
|
||||
width: activeTab === TAB_FIAT ? '99px' : '160px',
|
||||
}}
|
||||
placeholder="1.23"
|
||||
value={customTipAmount}
|
||||
onChange={(event) => handleCustomPriceChange(event)}
|
||||
|
|
@ -592,10 +625,31 @@ function WalletSendTip(props: Props) {
|
|||
<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
|
||||
title={<I18nMessage tokens={{ lbc: <LbcSymbol size={22} /> }}>Supporting content requires %lbc%</I18nMessage>}
|
||||
subtitle={
|
||||
<I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
|
||||
With %lbc%, you can send tips to your favorite creators, or help boost their content for more people to
|
||||
see.
|
||||
</I18nMessage>
|
||||
}
|
||||
actions={
|
||||
<div className="section__actions">
|
||||
<Button
|
||||
icon={ICONS.REWARDS}
|
||||
button="primary"
|
||||
label={__('Earn Rewards')}
|
||||
navigate={`/$/${PAGES.REWARDS}`}
|
||||
/>
|
||||
<Button icon={ICONS.BUY} button="secondary" label={__('Buy/Swap Credits')} navigate={`/$/${PAGES.BUY}`} />
|
||||
<Button button="link" label={__('Nevermind')} onClick={closeModal} />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -263,7 +263,6 @@ function WalletTipAmountSelector(props: Props) {
|
|||
// </div>
|
||||
// </>
|
||||
}
|
||||
className="form-field--price-amount"
|
||||
error={tipError}
|
||||
min="0"
|
||||
step="any"
|
||||
|
|
|
|||
|
|
@ -2,12 +2,14 @@ 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';
|
||||
|
||||
// function that receives state parameter and returns object of functions that accept state
|
||||
const select = (state) => ({
|
||||
user: selectUser(state),
|
||||
});
|
||||
|
||||
// const perform = (dispatch) => ({});
|
||||
const perform = (dispatch) => ({
|
||||
doToast: (options) => dispatch(doToast(options)),
|
||||
});
|
||||
|
||||
export default withRouter(connect(select)(StripeAccountConnection));
|
||||
export default withRouter(connect(select, perform)(StripeAccountConnection));
|
||||
|
|
|
|||
|
|
@ -31,6 +31,8 @@ if (isDev) {
|
|||
type Props = {
|
||||
source: string,
|
||||
user: User,
|
||||
doOpenModal: (string, {}) => void,
|
||||
doToast: ({ message: string }) => void,
|
||||
};
|
||||
|
||||
type State = {
|
||||
|
|
@ -68,6 +70,8 @@ class StripeAccountConnection extends React.Component<Props, State> {
|
|||
componentDidMount() {
|
||||
const { user } = this.props;
|
||||
|
||||
let doToast = this.props.doToast;
|
||||
|
||||
// $FlowFixMe
|
||||
this.experimentalUiEnabled = user && user.experimental_ui;
|
||||
|
||||
|
|
@ -127,10 +131,8 @@ class StripeAccountConnection extends React.Component<Props, State> {
|
|||
).then((accountListResponse: any) => {
|
||||
// TODO type this
|
||||
that.setState({
|
||||
accountTransactions: accountListResponse,
|
||||
accountTransactions: accountListResponse.reverse(),
|
||||
});
|
||||
|
||||
console.log(accountListResponse);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -165,6 +167,9 @@ class StripeAccountConnection extends React.Component<Props, State> {
|
|||
// get stripe link and set it on the frontend
|
||||
getAndSetAccountLink(true);
|
||||
} else {
|
||||
// probably an error from stripe
|
||||
const displayString = __('There was an error getting your account setup, please try again later');
|
||||
doToast({ message: displayString, isError: true });
|
||||
// not an error from Beamer, throw it
|
||||
throw new Error(error);
|
||||
}
|
||||
|
|
@ -296,7 +301,7 @@ class StripeAccountConnection extends React.Component<Props, State> {
|
|||
</thead>
|
||||
<tbody>
|
||||
{accountTransactions &&
|
||||
accountTransactions.reverse().map((transaction) => (
|
||||
accountTransactions.map((transaction) => (
|
||||
<tr key={transaction.name + transaction.created_at}>
|
||||
<td>{moment(transaction.created_at).format('LLL')}</td>
|
||||
<td>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,9 @@ 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 CARD_SETUP_ERROR_RESPONSE = __('There was an error getting your card setup, please try again later');
|
||||
|
||||
// eslint-disable-next-line flowtype/no-types-missing-file-annotation
|
||||
type Props = {
|
||||
disabled: boolean,
|
||||
|
|
@ -57,8 +60,6 @@ class SettingsStripeCard extends React.Component<Props, State> {
|
|||
componentDidMount() {
|
||||
let that = this;
|
||||
|
||||
console.log(this.props);
|
||||
|
||||
let doToast = this.props.doToast;
|
||||
|
||||
const script = document.createElement('script');
|
||||
|
|
@ -100,8 +101,6 @@ class SettingsStripeCard extends React.Component<Props, State> {
|
|||
let topOfDisplay = customer.email.split('@')[0];
|
||||
let bottomOfDisplay = '@' + customer.email.split('@')[1];
|
||||
|
||||
console.log(customerStatusResponse.Customer);
|
||||
|
||||
let cardDetails = {
|
||||
brand: card.brand,
|
||||
expiryYear: card.exp_year,
|
||||
|
|
@ -133,8 +132,6 @@ class SettingsStripeCard extends React.Component<Props, State> {
|
|||
},
|
||||
'post'
|
||||
).then((customerSetupResponse) => {
|
||||
console.log(customerSetupResponse);
|
||||
|
||||
clientSecret = customerSetupResponse.client_secret;
|
||||
|
||||
// instantiate stripe elements
|
||||
|
|
@ -154,14 +151,10 @@ class SettingsStripeCard extends React.Component<Props, State> {
|
|||
that.setState({
|
||||
customerTransactions: customerTransactionsResponse,
|
||||
});
|
||||
|
||||
console.log(customerTransactionsResponse);
|
||||
});
|
||||
// if the status call fails, either an actual error or need to run setup first
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
|
||||
// errorString passed from the API (with a 403 error)
|
||||
const errorString = 'user as customer is not setup yet';
|
||||
|
||||
|
|
@ -181,18 +174,17 @@ class SettingsStripeCard extends React.Component<Props, State> {
|
|||
},
|
||||
'post'
|
||||
).then((customerSetupResponse) => {
|
||||
console.log(customerSetupResponse);
|
||||
|
||||
clientSecret = customerSetupResponse.client_secret;
|
||||
|
||||
// instantiate stripe elements
|
||||
setupStripe();
|
||||
});
|
||||
// 500 error from the backend being down
|
||||
} else if (error === 'internal_apis_down') {
|
||||
var displayString = 'There was an error from the server, please let support know';
|
||||
doToast({ message: displayString, isError: true });
|
||||
doToast({ message: APIS_DOWN_ERROR_RESPONSE, isError: true });
|
||||
} else {
|
||||
console.log('Unseen before error');
|
||||
// probably an error from stripe
|
||||
doToast({ message: CARD_SETUP_ERROR_RESPONSE, isError: true });
|
||||
}
|
||||
});
|
||||
}, 250);
|
||||
|
|
@ -261,8 +253,6 @@ class SettingsStripeCard extends React.Component<Props, State> {
|
|||
})
|
||||
.then(function (result) {
|
||||
if (result.error) {
|
||||
console.log(result);
|
||||
|
||||
changeLoadingState(false);
|
||||
var displayError = document.getElementById('card-errors');
|
||||
displayError.textContent = result.error.message;
|
||||
|
|
@ -346,8 +336,6 @@ class SettingsStripeCard extends React.Component<Props, State> {
|
|||
});
|
||||
});
|
||||
|
||||
console.log(result);
|
||||
|
||||
changeLoadingState(false);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue