From 7bb5df97fd5776f1908d6022b121ec712683239e Mon Sep 17 00:00:00 2001 From: Anthony Date: Tue, 6 Jul 2021 22:28:29 +0200 Subject: [PATCH] Stripe 2 show visible card and add remove card button show your transactions even if you dont have a card fix presentational issues show your transactions even if you dont have a card fix presentational issues add link to channel section update yarn show donation location add remove card modal still needs completion and also changed how stripe is used on settings stripe card page add confirm remove card modal to router move bank account stuff to settings page move account functionality to settings page continuing to move account transactions to settings list transactions for creator updating copy touchup tip error do a better job autofocusing bugfix show an error on the card page if api returns 500 building out frontend for comment tip display dollar sign if its a fiat tip more frontend work more frontend work more frontend bug fixes working with hardcoded payment intent id working but with one bug bugfixed add toast if payment fails add add card button cant get claim id but otherwise done more frontend work call is working show fiat for livestream comments add is fiat on comments round and show values properly dont allow review if tiperror copy displaying properly disable buttons conditionally properly remove card button working remove card working with a workaround by refreshing page bugfix send toast when tip on comment jeremy frontend changes only show cart on lbc --- package.json | 1 + static/app-strings.json | 2 +- ui/component/comment/view.jsx | 4 +- ui/component/commentCreate/index.js | 6 +- ui/component/commentCreate/view.jsx | 161 ++++++-- ui/component/commentsList/view.jsx | 1 + ui/component/common/credit-amount.jsx | 6 +- ui/component/livestreamComment/view.jsx | 5 +- ui/component/livestreamComments/view.jsx | 3 + ui/component/router/view.jsx | 2 + ui/component/walletSendTip/view.jsx | 73 ++-- ui/component/walletTipAmountSelector/index.js | 6 +- ui/component/walletTipAmountSelector/view.jsx | 216 +++++++++-- ui/constants/modal_types.js | 1 + ui/constants/pages.js | 1 + ui/modal/modalRemoveCard/index.js | 19 + ui/modal/modalRemoveCard/view.jsx | 92 +++++ ui/modal/modalRouter/view.jsx | 3 + ui/page/settings/index.js | 3 +- ui/page/settings/view.jsx | 28 +- ui/page/settingsStripeAccount/index.js | 13 + ui/page/settingsStripeAccount/view.jsx | 344 ++++++++++++++++++ ui/page/settingsStripeCard/index.js | 5 + ui/page/settingsStripeCard/view.jsx | 280 +++++++------- ui/page/wallet/view.jsx | 3 - ui/redux/actions/comments.js | 27 +- ui/scss/component/_stripe-card.scss | 16 +- 27 files changed, 1112 insertions(+), 209 deletions(-) create mode 100644 ui/modal/modalRemoveCard/index.js create mode 100644 ui/modal/modalRemoveCard/view.jsx create mode 100644 ui/page/settingsStripeAccount/index.js create mode 100644 ui/page/settingsStripeAccount/view.jsx diff --git a/package.json b/package.json index c563073eb..9d550579f 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "feed": "^4.2.2", "if-env": "^1.0.4", "react-datetime-picker": "^3.2.1", + "react-plastic": "^1.1.1", "react-top-loading-bar": "^2.0.1", "remove-markdown": "^0.3.0", "source-map-explorer": "^2.5.2", diff --git a/static/app-strings.json b/static/app-strings.json index a116cfebd..d2a6511d2 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -2026,7 +2026,7 @@ "Supporting content requires %lbc%": "Supporting content requires %lbc%", "With %lbc%, you can send tips to your favorite creators, or help boost their content for more people to see.": "With %lbc%, you can send tips to your favorite creators, or help boost their content for more people to see.", "This refundable boost will improve the discoverability of this content while active.": "This refundable boost will improve the discoverability of this content while active.", - "Show this channel your appreciation by sending a donation of cash in USD.": "Show this channel your appreciation by sending a donation of cash in USD.", + "Show this channel your appreciation by sending a donation in USD.": "Show this channel your appreciation by sending a donation in USD.", "Show this channel your appreciation by sending a donation of Credits.": "Show this channel your appreciation by sending a donation of Credits.", "Add card to tip creators in USD": "Add card to tip creators in USD", "Connect a bank account": "Connect a bank account", diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx index 19afc945d..0b9fd71bc 100644 --- a/ui/component/comment/view.jsx +++ b/ui/component/comment/view.jsx @@ -59,6 +59,7 @@ type Props = { stakedLevel: number, supportAmount: number, numDirectReplies: number, + isFiat: boolean }; const LENGTH_TO_COLLAPSE = 300; @@ -91,6 +92,7 @@ function Comment(props: Props) { stakedLevel, supportAmount, numDirectReplies, + isFiat, } = props; const { @@ -240,7 +242,7 @@ function Comment(props: Props) { label={} /> - {supportAmount > 0 && } + {supportAmount > 0 && } {isPinned && ( diff --git a/ui/component/commentCreate/index.js b/ui/component/commentCreate/index.js index adcf4e2f9..a02de664f 100644 --- a/ui/component/commentCreate/index.js +++ b/ui/component/commentCreate/index.js @@ -12,6 +12,7 @@ import { selectUserVerifiedEmail } from 'redux/selectors/user'; import { selectActiveChannelClaim } from 'redux/selectors/app'; import { makeSelectCommentsDisabledForUri } from 'redux/selectors/comments'; import { CommentCreate } from './view'; +import { doToast } from 'redux/actions/notifications'; const select = (state, props) => ({ commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true, @@ -24,11 +25,12 @@ const select = (state, props) => ({ }); const perform = (dispatch, ownProps) => ({ - createComment: (comment, claimId, parentId, txid) => - dispatch(doCommentCreate(comment, claimId, parentId, ownProps.uri, ownProps.livestream, txid)), + createComment: (comment, claimId, parentId, txid, payment_intent_id, environment) => + dispatch(doCommentCreate(comment, claimId, parentId, ownProps.uri, ownProps.livestream, txid, payment_intent_id, environment)), openModal: (modal, props) => dispatch(doOpenModal(modal, props)), setActiveChannel: (claimId) => dispatch(doSetActiveChannel(claimId)), sendTip: (params, callback, errorCallback) => dispatch(doSendTip(params, false, callback, errorCallback, false)), + doToast: (options) => dispatch(doToast(options)), }); export default connect(select, perform)(CommentCreate); diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx index 4c32eca47..42094eae5 100644 --- a/ui/component/commentCreate/view.jsx +++ b/ui/component/commentCreate/view.jsx @@ -16,11 +16,23 @@ import CreditAmount from 'component/common/credit-amount'; import ChannelThumbnail from 'component/channelThumbnail'; import UriIndicator from 'component/uriIndicator'; import Empty from 'component/common/empty'; +import { STRIPE_PUBLIC_KEY } from 'config'; +import { Lbryio } from 'lbryinc'; + +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 TAB_FIAT = 'TabFiat'; +const TAB_LBC = 'TabLBC'; type Props = { uri: string, claim: StreamClaim, - createComment: (string, string, string, ?string) => Promise, + createComment: (string, string, string, ?string, ?string, ?string) => Promise, commentsDisabledBySettings: boolean, channels: ?Array, onDoneReplying?: () => void, @@ -35,6 +47,8 @@ type Props = { toast: (string) => void, claimIsMine: boolean, sendTip: ({}, (any) => void, (any) => void) => void, + doToast: ({ message: string }) => void, + disabled: boolean, }; export function CommentCreate(props: Props) { @@ -53,8 +67,10 @@ export function CommentCreate(props: Props) { livestream, claimIsMine, sendTip, + doToast, } = props; const buttonref: ElementRef = React.useRef(); + const { push, location: { pathname }, @@ -72,6 +88,14 @@ export function CommentCreate(props: Props) { const disabled = isSubmitting || !activeChannelClaim || !commentValue.length; const charCount = commentValue.length; + const [activeTab, setActiveTab] = React.useState(''); + + const [tipError, setTipError] = React.useState(); + + // React.useEffect(() => { + // setTipError('yes'); + // }, []); + function handleCommentChange(event) { let commentValue; if (isReply) { @@ -123,26 +147,109 @@ export function CommentCreate(props: Props) { channel_id: activeChannelClaim.claim_id, }; + const activeChannelName = activeChannelClaim && activeChannelClaim.name; + const activeChannelId = activeChannelClaim && activeChannelClaim.claim_id; + + console.log(activeChannelClaim); + setIsSubmitting(true); - sendTip( - params, - (response) => { - const { txid } = response; - setTimeout(() => { - handleCreateComment(txid); - }, 1500); - setSuccessTip({ txid, tipAmount }); - }, - () => { - setIsSubmitting(false); + 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 + if (claim.signing_channel) { + channelClaimId = claim.signing_channel.claim_id; + tipChannelName = claim.signing_channel.name; + + // otherwise it's on the channel page + } else { + channelClaimId = claim.claim_id; + tipChannelName = claim.name; } - ); + + const sourceClaimId = claim.claim_id; + + var roundedAmount = Math.round(tipAmount * 100) / 100; + + Lbryio.call( + 'customer', + 'tip', + { + amount: 100 * roundedAmount, // convert from dollars to cents + creator_channel_name: tipChannelName, // creator_channel_name + creator_channel_claim_id: channelClaimId, + tipper_channel_name: activeChannelName, + tipper_channel_claim_id: activeChannelId, + currency: 'USD', + anonymous: false, + source_claim_id: sourceClaimId, + environment: stripeEnvironment, + }, + 'post' + ) + .then((customerTipResponse) => { + console.log(customerTipResponse); + + const paymentIntendId = customerTipResponse.payment_intent_id; + + handleCreateComment(null, paymentIntendId, stripeEnvironment); + + setCommentValue(''); + setIsReviewingSupportComment(false); + setIsSupportComment(false); + setCommentFailure(false); + setIsSubmitting(false); + + doToast({ + message: __("You sent $%formattedAmount% as a tip to %tipChannelName%, I'm sure they appreciate it!", { + formattedAmount: roundedAmount.toFixed(2), // force show decimal places + tipChannelName, + }), + }); + + // handleCreateComment(null); + }) + .catch(function(error) { + var displayError = 'Sorry, there was an error in processing your payment!'; + + if (error.message !== 'payment intent failed to confirm') { + displayError = error.message; + } + + doToast({ message: displayError, isError: true }); + }); + } } - function handleCreateComment(txid) { + /** + * + * @param {string} [txid] Optional transaction id generated by + * @param {string} [payment_intent_id] Optional payment_intent_id from Stripe payment + * @param {string} [environment] Optional environment for Stripe (test|live) + */ + function handleCreateComment(txid, payment_intent_id, environment) { setIsSubmitting(true); - createComment(commentValue, claimId, parentId, txid) + + createComment(commentValue, claimId, parentId, txid, payment_intent_id, environment) .then((res) => { setIsSubmitting(false); @@ -157,7 +264,7 @@ export function CommentCreate(props: Props) { } } }) - .catch(() => { + .catch((e) => { setIsSubmitting(false); setCommentFailure(true); }); @@ -198,10 +305,11 @@ export function CommentCreate(props: Props) { } if (isReviewingSupportComment && activeChannelClaim) { + return (
- +
@@ -262,15 +370,17 @@ export function CommentCreate(props: Props) { autoFocus={isReply} textAreaMaxLength={livestream ? FF_MAX_CHARS_IN_LIVESTREAM_COMMENT : FF_MAX_CHARS_IN_COMMENT} /> - {isSupportComment && setTipAmount(amount)} />} + {/* TODO: the tip validation is done in selector */} + {isSupportComment && setTipAmount(amount)} />}
{isSupportComment ? ( <>
@@ -193,6 +195,7 @@ export default function LivestreamComments(props: Props) { commentId={comment.comment_id} message={comment.comment} supportAmount={comment.support_amount} + isFiat={comment.is_fiat} commentIsMine={comment.channel_id && isMyComment(comment.channel_id)} /> ))} diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx index 94d5251e0..1e2631970 100644 --- a/ui/component/router/view.jsx +++ b/ui/component/router/view.jsx @@ -69,6 +69,7 @@ const RewardsVerifyPage = lazyImport(() => import('page/rewardsVerify' /* webpac const SearchPage = lazyImport(() => import('page/search' /* webpackChunkName: "secondary" */)); const SettingsAdvancedPage = lazyImport(() => import('page/settingsAdvanced' /* webpackChunkName: "secondary" */)); const SettingsStripeCard = lazyImport(() => import('page/settingsStripeCard' /* webpackChunkName: "secondary" */)); +const SettingsStripeAccount = lazyImport(() => import('page/settingsStripeAccount' /* webpackChunkName: "secondary" */)); const SettingsCreatorPage = lazyImport(() => import('page/settingsCreator' /* webpackChunkName: "secondary" */)); const SettingsNotificationsPage = lazyImport(() => import('page/settingsNotifications' /* webpackChunkName: "secondary" */) @@ -292,6 +293,7 @@ function AppRouter(props: Props) { /> + { if (channelClaimId && isAuthenticated) { Lbryio.call( @@ -121,6 +118,12 @@ function WalletSendTip(props: Props) { } }, [channelClaimId, isAuthenticated]); + // check if creator has an account saved + React.useEffect(() => { + var tipInputElement = document.getElementById('tip-input'); + if (tipInputElement) { tipInputElement.focus() } + }, []); + React.useEffect(() => { if (channelClaimId) { Lbryio.call( @@ -139,7 +142,7 @@ function WalletSendTip(props: Props) { } }) .catch(function (error) { - console.log(error); + // console.log(error); }); } }, [channelClaimId]); @@ -170,13 +173,13 @@ function WalletSendTip(props: Props) { explainerText = __('This refundable boost will improve the discoverability of this %claimTypeText% while active.', {claimTypeText}); } else if (activeTab === TAB_FIAT) { iconToUse = ICONS.FINANCE; - explainerText = __('Show this channel your appreciation by sending a donation of cash in USD.'); + explainerText = __('Show this channel your appreciation by sending a donation in USD. '); // if (!hasCardSaved) { // explainerText += __('You must add a card to use this functionality.'); // } } else if (activeTab === TAB_LBC) { iconToUse = ICONS.LBC; - explainerText = __('Show this channel your appreciation by sending a donation of Credits.'); + explainerText = __('Show this channel your appreciation by sending a donation of Credits. '); } const isSupport = claimIsMine || activeTab === TAB_BOOST; @@ -187,22 +190,34 @@ function WalletSendTip(props: Props) { const validTipInput = regexp.test(String(tipAmount)); let tipError; - if (!tipAmount) { - tipError = __('Amount must be a number'); - } else if (tipAmount <= 0) { + if (tipAmount === 0) { tipError = __('Amount must be a positive number'); - } else if (tipAmount < MINIMUM_PUBLISH_BID) { - tipError = __('Amount must be higher'); - } else if (!validTipInput) { - tipError = __('Amount must have no more than 8 decimal places'); - } else if (tipAmount === balance) { - tipError = __('Please decrease the amount to account for transaction fees'); - } else if (tipAmount > balance) { - tipError = __('Not enough Credits'); + } else if (!tipAmount || typeof tipAmount !== 'number') { + tipError = __('Amount must be a number'); + } + + // if it's not fiat, aka it's boost or lbc tip + else if (activeTab !== TAB_FIAT) { + if (!validTipInput) { + tipError = __('Amount must have no more than 8 decimal places'); + } else if (tipAmount === balance) { + tipError = __('Please decrease the amount to account for transaction fees'); + } else if (tipAmount > balance) { + tipError = __('Not enough Credits'); + } else if (tipAmount < MINIMUM_PUBLISH_BID) { + tipError = __('Amount must be higher'); + } + // if tip fiat tab + } else { + if (tipAmount < 1) { + tipError = __('Amount must be at least one dollar'); + } else if (tipAmount > 1000) { + tipError = __('Amount cannot be over 1000 dollars'); + } } setTipError(tipError); - }, [tipAmount, balance, setTipError]); + }, [tipAmount, balance, setTipError, activeTab]); // function sendSupportOrConfirm(instantTipMaxAmount = null) { @@ -267,11 +282,15 @@ function WalletSendTip(props: Props) { tipChannelName, }), }); - console.log(customerTipResponse); }) - .catch(function (error) { - console.log(error); - doToast({ message: error.message, isError: true }); + .catch(function(error) { + var displayError = 'Sorry, there was an error in processing your payment!'; + + if (error.message !== 'payment intent failed to confirm') { + displayError = error.message; + } + + doToast({ message: displayError, isError: true }); }); closeModal(); @@ -285,6 +304,7 @@ function WalletSendTip(props: Props) { function handleCustomPriceChange(event: SyntheticInputEvent<*>) { const tipAmount = parseFloat(event.target.value); + setCustomTipAmount(tipAmount); } @@ -368,6 +388,8 @@ function WalletSendTip(props: Props) { label={__('Tip')} button="alt" onClick={() => { + var tipInputElement = document.getElementById('tip-input'); + if (tipInputElement) { tipInputElement.focus() } if (!isConfirming) { setActiveTab(TAB_LBC); } @@ -382,6 +404,8 @@ function WalletSendTip(props: Props) { label={__('Tip')} button="alt" onClick={() => { + var tipInputElement = document.getElementById('tip-input'); + if (tipInputElement) { tipInputElement.focus() } if (!isConfirming) { setActiveTab(TAB_FIAT); } @@ -396,6 +420,8 @@ function WalletSendTip(props: Props) { label={__('Boost')} button="alt" onClick={() => { + var tipInputElement = document.getElementById('tip-input'); + if (tipInputElement) { tipInputElement.focus() } if (!isConfirming) { setActiveTab(TAB_BOOST); } @@ -483,6 +509,7 @@ function WalletSendTip(props: Props) { icon={iconToUse} label={__('Custom')} onClick={() => setUseCustomTip(true)} + // disabled if it's receive fiat and there is no card or creator can't receive tips disabled={activeTab === TAB_FIAT && (!hasCardSaved || !canReceiveFiatTip)} /> diff --git a/ui/component/walletTipAmountSelector/index.js b/ui/component/walletTipAmountSelector/index.js index cf9010f6e..8f285f91e 100644 --- a/ui/component/walletTipAmountSelector/index.js +++ b/ui/component/walletTipAmountSelector/index.js @@ -1,9 +1,13 @@ import { connect } from 'react-redux'; -import { selectBalance } from 'lbry-redux'; +import { makeSelectClaimForUri, selectBalance } from 'lbry-redux'; import WalletTipAmountSelector from './view'; +import { selectUserVerifiedEmail } from 'redux/selectors/user'; const select = (state, props) => ({ balance: selectBalance(state), + isAuthenticated: Boolean(selectUserVerifiedEmail(state)), + // claim: makeSelectClaimForUri(props.uri)(state), + // claim: makeSelectClaimForUri(props.uri, false)(state), }); export default connect(select)(WalletTipAmountSelector); diff --git a/ui/component/walletTipAmountSelector/view.jsx b/ui/component/walletTipAmountSelector/view.jsx index 128252af5..5e2843364 100644 --- a/ui/component/walletTipAmountSelector/view.jsx +++ b/ui/component/walletTipAmountSelector/view.jsx @@ -10,40 +10,145 @@ import I18nMessage from 'component/i18nMessage'; import classnames from 'classnames'; import usePersistedState from 'effects/use-persisted-state'; import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp'; +import { Lbryio } from 'lbryinc'; +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'; +} const DEFAULT_TIP_AMOUNTS = [1, 5, 25, 100]; +const TAB_FIAT = 'TabFiat'; +const TAB_LBC = 'TabLBC'; + type Props = { balance: number, amount: number, onChange: (number) => void, + isAuthenticated: boolean, + claim: StreamClaim, + uri: string, + onTipErrorChange: (string) => void, }; function WalletTipAmountSelector(props: Props) { - const { balance, amount, onChange } = props; + const { balance, amount, onChange, activeTab, isAuthenticated, claim, uri, onTipErrorChange } = props; const [useCustomTip, setUseCustomTip] = usePersistedState('comment-support:useCustomTip', false); const [tipError, setTipError] = React.useState(); + const [canReceiveFiatTip, setCanReceiveFiatTip] = React.useState(); // dont persist because it needs to be calc'd per creator + const [hasCardSaved, setHasSavedCard] = usePersistedState('comment-support:hasCardSaved', false); + + function shouldDisableAmountSelector(amount) { + return ( + (amount > balance && activeTab !== TAB_FIAT) || (activeTab === TAB_FIAT && (!hasCardSaved || !canReceiveFiatTip)) + ); + } + + console.log(activeTab); + + console.log(claim); + + // setup variables for tip API + let channelClaimId, tipChannelName; + // if there is a signing channel it's on a file + if (claim.signing_channel) { + channelClaimId = claim.signing_channel.claim_id; + tipChannelName = claim.signing_channel.name; + + // otherwise it's on the channel page + } else { + channelClaimId = claim.claim_id; + tipChannelName = claim.name; + } + + // check if creator has a payment method saved React.useEffect(() => { + Lbryio.call( + 'customer', + 'status', + { + environment: stripeEnvironment, + }, + 'post' + ).then((customerStatusResponse) => { + const defaultPaymentMethodId = + customerStatusResponse.Customer && + customerStatusResponse.Customer.invoice_settings && + customerStatusResponse.Customer.invoice_settings.default_payment_method && + customerStatusResponse.Customer.invoice_settings.default_payment_method.id; + + console.log('here'); + console.log(defaultPaymentMethodId); + + setHasSavedCard(Boolean(defaultPaymentMethodId)); + }); + }, []); + + // + React.useEffect(() => { + Lbryio.call( + 'account', + 'check', + { + channel_claim_id: channelClaimId, + channel_name: tipChannelName, + environment: stripeEnvironment, + }, + 'post' + ) + .then((accountCheckResponse) => { + if (accountCheckResponse === true && canReceiveFiatTip !== true) { + setCanReceiveFiatTip(true); + } + }) + .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; - if (!amount) { - tipError = __('Amount must be a number'); - } else if (amount <= 0) { + if (amount === 0) { tipError = __('Amount must be a positive number'); - } else if (amount < MINIMUM_PUBLISH_BID) { - tipError = __('Amount must be higher'); - } else if (!validTipInput) { - tipError = __('Amount must have no more than 8 decimal places'); - } else if (amount === balance) { - tipError = __('Please decrease the amount to account for transaction fees'); - } else if (amount > balance) { - tipError = __('Not enough Credits'); + } else if (!amount || typeof amount !== 'number') { + tipError = __('Amount must be a number'); } + + // if it's not fiat, aka it's boost or lbc tip + else if (activeTab !== TAB_FIAT) { + if (!validTipInput) { + tipError = __('Amount must have no more than 8 decimal places'); + } else if (amount === balance) { + tipError = __('Please decrease the amount to account for transaction fees'); + } else if (amount > balance) { + tipError = __('Not enough Credits'); + } else if (amount < MINIMUM_PUBLISH_BID) { + tipError = __('Amount must be higher'); + } + // if tip fiat tab + } else { + if (amount < 1) { + tipError = __('Amount must be at least one dollar'); + } else if (amount > 1000) { + tipError = __('Amount cannot be over 1000 dollars'); + } + } + setTipError(tipError); - }, [amount, balance, setTipError]); + onTipErrorChange(tipError); + }, [amount, balance, setTipError, activeTab]); function handleCustomPriceChange(amount: number) { const tipAmount = parseFloat(amount); @@ -56,14 +161,14 @@ function WalletTipAmountSelector(props: Props) { {DEFAULT_TIP_AMOUNTS.map((defaultAmount) => (
+ + } + + {/* has card saved but cant creator cant receive tips */} + {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 && (
{__('Custom support amount')}{' '} }}> (%lbc_balance% available) + // TODO: add conditional based on hasSavedCard + : <> + + + // <> + //
+ // Send a tip directly from your attached card + //
+ // } className="form-field--price-amount" error={tipError} @@ -115,7 +258,38 @@ function WalletTipAmountSelector(props: Props) {
)} - {!useCustomTip && } + {/*// TODO: add conditional based on hasSavedCard*/} + {/* lbc tab */} + {activeTab === TAB_LBC && } + {/* fiat button but no card saved */} + {!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 +
+ + } + + {/* has card saved but cant creator cant receive tips */} + {!useCustomTip && activeTab === TAB_FIAT && hasCardSaved && canReceiveFiatTip && + <> +
+ Send a tip directly from your attached card +
+ + } + ); } diff --git a/ui/constants/modal_types.js b/ui/constants/modal_types.js index 4c9989da9..c9972ec4c 100644 --- a/ui/constants/modal_types.js +++ b/ui/constants/modal_types.js @@ -45,3 +45,4 @@ export const VIEW_IMAGE = 'view_image'; export const CONFIRM_REMOVE_BTC_SWAP_ADDRESS = 'confirm_remove_btc_swap_address'; export const COLLECTION_ADD = 'collection_add'; export const COLLECTION_DELETE = 'collection_delete'; +export const CONFIRM_REMOVE_CARD = 'CONFIRM_REMOVE_CARD'; diff --git a/ui/constants/pages.js b/ui/constants/pages.js index 8b99b58db..7a2bf87f7 100644 --- a/ui/constants/pages.js +++ b/ui/constants/pages.js @@ -39,6 +39,7 @@ exports.REPOST_NEW = 'repost'; exports.SEND = 'send'; exports.SETTINGS = 'settings'; exports.SETTINGS_STRIPE_CARD = 'settings/card'; +exports.SETTINGS_STRIPE_ACCOUNT = 'settings/tip_account'; exports.SETTINGS_NOTIFICATIONS = 'settings/notifications'; exports.SETTINGS_ADVANCED = 'settings/advanced'; exports.SETTINGS_BLOCKED_MUTED = 'settings/block_and_mute'; diff --git a/ui/modal/modalRemoveCard/index.js b/ui/modal/modalRemoveCard/index.js new file mode 100644 index 000000000..f54d477ec --- /dev/null +++ b/ui/modal/modalRemoveCard/index.js @@ -0,0 +1,19 @@ +import { connect } from 'react-redux'; +import { doHideModal } from 'redux/actions/app'; +import { doAbandonTxo, doAbandonClaim, selectTransactionItems, doResolveUri } from 'lbry-redux'; +import { doToast } from 'redux/actions/notifications'; +import ModalRevokeClaim from './view'; + +const select = state => ({ + transactionItems: selectTransactionItems(state), +}); + +const perform = dispatch => ({ + toast: (message, isError) => dispatch(doToast({ message, isError })), + closeModal: () => dispatch(doHideModal()), + abandonTxo: (txo, cb) => dispatch(doAbandonTxo(txo, cb)), + abandonClaim: (txid, nout, cb) => dispatch(doAbandonClaim(txid, nout, cb)), + doResolveUri: (uri) => dispatch(doResolveUri(uri)), +}); + +export default connect(select, perform)(ModalRevokeClaim); diff --git a/ui/modal/modalRemoveCard/view.jsx b/ui/modal/modalRemoveCard/view.jsx new file mode 100644 index 000000000..95c49d724 --- /dev/null +++ b/ui/modal/modalRemoveCard/view.jsx @@ -0,0 +1,92 @@ +// @flow +import React, { useState } from 'react'; +import { Modal } from 'modal/modal'; +import { FormField } from 'component/common/form'; +import * as txnTypes from 'constants/transaction_types'; +import Card from 'component/common/card'; +import Button from 'component/button'; +import I18nMessage from 'component/i18nMessage'; +import LbcSymbol from 'component/common/lbc-symbol'; +import * as ICONS from 'constants/icons'; +import { Lbryio } from 'lbryinc'; +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 = { + closeModal: () => void, + abandonTxo: (Txo, () => void) => void, + abandonClaim: (string, number, ?() => void) => void, + tx: Txo, + claim: GenericClaim, + cb: () => void, + doResolveUri: (string) => void, + uri: string, + paymentMethodId: string, + setAsConfirmingCard: () => void, +}; + +export default function ModalRevokeClaim(props: Props) { + + var that = this; + console.log(that); + + console.log(props); + + const { closeModal, uri, paymentMethodId, setAsConfirmingCard } = props; + + console.log(uri); + + console.log(setAsConfirmingCard) + + function removeCard(){ + console.log(paymentMethodId); + + Lbryio.call( + 'customer', + 'detach', + { + environment: stripeEnvironment, + payment_method_id: paymentMethodId + }, + 'post' + ).then((removeCardResponse) => { + console.log(removeCardResponse) + + //TODO: add toast here + // closeModal(); + + location.reload(); + + }); + + } + + return ( + + +
+ } + /> + + ); +} diff --git a/ui/modal/modalRouter/view.jsx b/ui/modal/modalRouter/view.jsx index 5092a16f3..0d6ab4e08 100644 --- a/ui/modal/modalRouter/view.jsx +++ b/ui/modal/modalRouter/view.jsx @@ -29,6 +29,7 @@ const ModalPhoneCollection = lazyImport(() => import('modal/modalPhoneCollection const ModalPublish = lazyImport(() => import('modal/modalPublish' /* webpackChunkName: "modalPublish" */)); const ModalPublishPreview = lazyImport(() => import('modal/modalPublishPreview' /* webpackChunkName: "modalPublishPreview" */)); const ModalRemoveBtcSwapAddress = lazyImport(() => import('modal/modalRemoveBtcSwapAddress' /* webpackChunkName: "modalRemoveBtcSwapAddress" */)); +const ModalRemoveCard = lazyImport(() => import('modal/modalRemoveCard' /* webpackChunkName: "modalRemoveCard" */)); const ModalRemoveFile = lazyImport(() => import('modal/modalRemoveFile' /* webpackChunkName: "modalRemoveFile" */)); const ModalRevokeClaim = lazyImport(() => import('modal/modalRevokeClaim' /* webpackChunkName: "modalRevokeClaim" */)); const ModalRewardCode = lazyImport(() => import('modal/modalRewardCode' /* webpackChunkName: "modalRewardCode" */)); @@ -151,6 +152,8 @@ function ModalRouter(props: Props) { return ModalClaimCollectionAdd; case MODALS.COLLECTION_DELETE: return ModalDeleteCollection; + case MODALS.CONFIRM_REMOVE_CARD: + return ModalRemoveCard; default: return null; } diff --git a/ui/page/settings/index.js b/ui/page/settings/index.js index c30d53f35..c9292b3cf 100644 --- a/ui/page/settings/index.js +++ b/ui/page/settings/index.js @@ -18,7 +18,7 @@ import { } from 'redux/selectors/settings'; import { doWalletStatus, selectMyChannelUrls, selectWalletIsEncrypted, SETTINGS } from 'lbry-redux'; import SettingsPage from './view'; -import { selectUserVerifiedEmail } from 'redux/selectors/user'; +import { selectUserVerifiedEmail, selectUser } from 'redux/selectors/user'; const select = (state) => ({ daemonSettings: selectDaemonSettings(state), @@ -38,6 +38,7 @@ const select = (state) => ({ darkModeTimes: makeSelectClientSetting(SETTINGS.DARK_MODE_TIMES)(state), language: selectLanguage(state), myChannelUrls: selectMyChannelUrls(state), + user: selectUser(state), }); const perform = (dispatch) => ({ diff --git a/ui/page/settings/view.jsx b/ui/page/settings/view.jsx index b3e0ca75b..f0cf63325 100644 --- a/ui/page/settings/view.jsx +++ b/ui/page/settings/view.jsx @@ -72,6 +72,7 @@ type Props = { enterSettings: () => void, exitSettings: () => void, myChannelUrls: ?Array, + user: User, }; type State = { @@ -189,6 +190,7 @@ class SettingsPage extends React.PureComponent { clearCache, openModal, myChannelUrls, + user, } = this.props; const { storedPassword } = this.state; const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0; @@ -206,14 +208,32 @@ class SettingsPage extends React.PureComponent { className="card-stack" > {/* @if TARGET='web' */} -
+ } + />} + {/* @endif */} + + {/* @if TARGET='web' */} + +