Chore desktop cleanup #6896
4 changed files with 101 additions and 122 deletions
|
@ -1,6 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
import type { ElementRef } from 'react';
|
import type { ElementRef } from 'react';
|
||||||
import { SIMPLE_SITE, STRIPE_PUBLIC_KEY } from 'config';
|
import { SIMPLE_SITE } from 'config';
|
||||||
import * as PAGES from 'constants/pages';
|
import * as PAGES from 'constants/pages';
|
||||||
import * as ICONS from 'constants/icons';
|
import * as ICONS from 'constants/icons';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
@ -21,12 +21,8 @@ import Empty from 'component/common/empty';
|
||||||
import { getChannelIdFromClaim } from 'util/claim';
|
import { getChannelIdFromClaim } from 'util/claim';
|
||||||
import { Lbryio } from 'lbryinc';
|
import { Lbryio } from 'lbryinc';
|
||||||
|
|
||||||
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 && STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) {
|
|
||||||
stripeEnvironment = 'live';
|
|
||||||
}
|
|
||||||
|
|
||||||
const TAB_FIAT = 'TabFiat';
|
const TAB_FIAT = 'TabFiat';
|
||||||
const TAB_LBC = 'TabLBC';
|
const TAB_LBC = 'TabLBC';
|
||||||
|
@ -534,7 +530,7 @@ export function CommentCreate(props: Props) {
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{/* @if TARGET='web' */}
|
{/* @if TARGET='web' */}
|
||||||
{!claimIsMine && (
|
{!claimIsMine && stripeEnvironment && (
|
||||||
<Button
|
<Button
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
button="alt"
|
button="alt"
|
||||||
|
|
|
@ -4,14 +4,8 @@ import Button from 'component/button';
|
||||||
import Card from 'component/common/card';
|
import Card from 'component/common/card';
|
||||||
import { Lbryio } from 'lbryinc';
|
import { Lbryio } from 'lbryinc';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
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';
|
|
||||||
}
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
accountDetails: any,
|
accountDetails: any,
|
||||||
|
@ -41,12 +35,15 @@ const WalletBalance = (props: Props) => {
|
||||||
|
|
||||||
// TODO: this is actually incorrect, last4 should be populated based on the transaction not the current customer details
|
// TODO: this is actually incorrect, last4 should be populated based on the transaction not the current customer details
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
(async function() {
|
(async function () {
|
||||||
const customerStatusResponse = await getCustomerStatus();
|
const customerStatusResponse = await getCustomerStatus();
|
||||||
|
|
||||||
const lastFour = customerStatusResponse.PaymentMethods && customerStatusResponse.PaymentMethods.length && customerStatusResponse.PaymentMethods[0].card.last4;
|
const lastFour =
|
||||||
|
customerStatusResponse.PaymentMethods &&
|
||||||
|
customerStatusResponse.PaymentMethods.length &&
|
||||||
|
customerStatusResponse.PaymentMethods[0].card.last4;
|
||||||
|
|
||||||
setLastFour(lastFour);
|
setLastFour(lastFour);
|
||||||
})();
|
})();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
@ -59,53 +56,57 @@ const WalletBalance = (props: Props) => {
|
||||||
<div className="table__wrapper">
|
<div className="table__wrapper">
|
||||||
<table className="table table--transactions">
|
<table className="table table--transactions">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th className="date-header">{__('Date')}</th>
|
<th className="date-header">{__('Date')}</th>
|
||||||
<th>{<>{__('Receiving Channel Name')}</>}</th>
|
<th>{<>{__('Receiving Channel Name')}</>}</th>
|
||||||
<th>{__('Tip Location')}</th>
|
<th>{__('Tip Location')}</th>
|
||||||
<th>{__('Amount (USD)')} </th>
|
<th>{__('Amount (USD)')} </th>
|
||||||
<th>{__('Card Last 4')}</th>
|
<th>{__('Card Last 4')}</th>
|
||||||
<th>{__('Anonymous')}</th>
|
<th>{__('Anonymous')}</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{accountTransactions &&
|
{accountTransactions &&
|
||||||
accountTransactions.map((transaction) => (
|
accountTransactions.map((transaction) => (
|
||||||
<tr key={transaction.name + transaction.created_at}>
|
<tr key={transaction.name + transaction.created_at}>
|
||||||
<td>{moment(transaction.created_at).format('LLL')}</td>
|
<td>{moment(transaction.created_at).format('LLL')}</td>
|
||||||
<td>
|
<td>
|
||||||
<Button
|
<Button
|
||||||
className=""
|
className=""
|
||||||
navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
|
navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
|
||||||
label={transaction.channel_name}
|
label={transaction.channel_name}
|
||||||
button="link"
|
button="link"
|
||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<Button
|
<Button
|
||||||
className=""
|
className=""
|
||||||
navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
|
navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
|
||||||
label={
|
label={
|
||||||
transaction.channel_claim_id === transaction.source_claim_id
|
transaction.channel_claim_id === transaction.source_claim_id
|
||||||
? 'Channel Page'
|
? 'Channel Page'
|
||||||
: 'Content Page'
|
: 'Content Page'
|
||||||
}
|
}
|
||||||
button="link"
|
button="link"
|
||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
<td>${transaction.tipped_amount / 100}</td>
|
<td>${transaction.tipped_amount / 100}</td>
|
||||||
<td>{lastFour}</td>
|
<td>{lastFour}</td>
|
||||||
<td>{transaction.private_tip ? 'Yes' : 'No'}</td>
|
<td>{transaction.private_tip ? 'Yes' : 'No'}</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
{(!accountTransactions || accountTransactions.length === 0) && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
|
{(!accountTransactions || accountTransactions.length === 0) && (
|
||||||
|
<p style={{ textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)' }}>
|
||||||
|
No Transactions
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -5,43 +5,19 @@ import Card from 'component/common/card';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
import * as ICONS from 'constants/icons';
|
import * as ICONS from 'constants/icons';
|
||||||
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';
|
|
||||||
}
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
closeModal: () => void,
|
closeModal: () => void,
|
||||||
abandonTxo: (Txo, () => void) => void,
|
|
||||||
abandonClaim: (string, number, ?() => void) => void,
|
|
||||||
tx: Txo,
|
|
||||||
claim: GenericClaim,
|
|
||||||
cb: () => void,
|
|
||||||
doResolveUri: (string) => void,
|
|
||||||
uri: string,
|
|
||||||
paymentMethodId: string,
|
paymentMethodId: string,
|
||||||
setAsConfirmingCard: () => void,
|
setAsConfirmingCard: () => void, // ?
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function ModalRevokeClaim(props: Props) {
|
export default function ModalRemoveCard(props: Props) {
|
||||||
var that = this;
|
const { closeModal, paymentMethodId } = props;
|
||||||
console.log(that);
|
|
||||||
|
|
||||||
console.log(props);
|
|
||||||
|
|
||||||
const { closeModal, uri, paymentMethodId, setAsConfirmingCard } = props;
|
|
||||||
|
|
||||||
console.log(uri);
|
|
||||||
|
|
||||||
console.log(setAsConfirmingCard);
|
|
||||||
|
|
||||||
function removeCard() {
|
function removeCard() {
|
||||||
console.log(paymentMethodId);
|
|
||||||
|
|
||||||
Lbryio.call(
|
Lbryio.call(
|
||||||
'customer',
|
'customer',
|
||||||
'detach',
|
'detach',
|
||||||
|
@ -51,11 +27,9 @@ export default function ModalRevokeClaim(props: Props) {
|
||||||
},
|
},
|
||||||
'post'
|
'post'
|
||||||
).then((removeCardResponse) => {
|
).then((removeCardResponse) => {
|
||||||
console.log(removeCardResponse);
|
|
||||||
|
|
||||||
// TODO: add toast here
|
// TODO: add toast here
|
||||||
// closeModal();
|
// closeModal();
|
||||||
|
// Is there a better way to handle this? Why reload?
|
||||||
window.location.reload();
|
window.location.reload();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -63,15 +37,14 @@ export default function ModalRevokeClaim(props: Props) {
|
||||||
return (
|
return (
|
||||||
<Modal ariaHideApp={false} isOpen contentLabel={'hello'} type="card" onAborted={closeModal}>
|
<Modal ariaHideApp={false} isOpen contentLabel={'hello'} type="card" onAborted={closeModal}>
|
||||||
<Card
|
<Card
|
||||||
title={'Confirm Remove Card'}
|
title={__('Confirm Remove Card')}
|
||||||
// body={getMsgBody(type, isSupport, name)}
|
|
||||||
actions={
|
actions={
|
||||||
<div className="section__actions">
|
<div className="section__actions">
|
||||||
<Button
|
<Button
|
||||||
className="stripe__confirm-remove-card"
|
className="stripe__confirm-remove-card"
|
||||||
button="secondary"
|
button="secondary"
|
||||||
icon={ICONS.DELETE}
|
icon={ICONS.DELETE}
|
||||||
label={'Remove Card'}
|
label={__('Remove Card')}
|
||||||
onClick={removeCard}
|
onClick={removeCard}
|
||||||
/>
|
/>
|
||||||
<Button button="link" label={__('Cancel')} onClick={closeModal} />
|
<Button button="link" label={__('Cancel')} onClick={closeModal} />
|
||||||
|
|
|
@ -7,17 +7,12 @@ import Card from 'component/common/card';
|
||||||
import Page from 'component/page';
|
import Page from 'component/page';
|
||||||
|
|
||||||
import { Lbryio } from 'lbryinc';
|
import { Lbryio } from 'lbryinc';
|
||||||
import { URL, WEBPACK_WEB_PORT, STRIPE_PUBLIC_KEY } from 'config';
|
import { URL, WEBPACK_WEB_PORT } from 'config';
|
||||||
|
import { getStripeEnvironment } from 'util/stripe';
|
||||||
|
|
||||||
const isDev = process.env.NODE_ENV !== 'production';
|
const isDev = process.env.NODE_ENV !== 'production';
|
||||||
|
|
||||||
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';
|
|
||||||
}
|
|
||||||
|
|
||||||
let successStripeRedirectUrl, failureStripeRedirectUrl;
|
let successStripeRedirectUrl, failureStripeRedirectUrl;
|
||||||
let successEndpoint = '/$/settings/tip_account';
|
let successEndpoint = '/$/settings/tip_account';
|
||||||
let failureEndpoint = '/$/settings/tip_account';
|
let failureEndpoint = '/$/settings/tip_account';
|
||||||
|
@ -46,7 +41,7 @@ type State = {
|
||||||
unpaidBalance: number,
|
unpaidBalance: number,
|
||||||
pageTitle: string,
|
pageTitle: string,
|
||||||
stillRequiringVerification: boolean,
|
stillRequiringVerification: boolean,
|
||||||
accountTransactions: any
|
accountTransactions: any,
|
||||||
};
|
};
|
||||||
|
|
||||||
class StripeAccountConnection extends React.Component<Props, State> {
|
class StripeAccountConnection extends React.Component<Props, State> {
|
||||||
|
@ -144,7 +139,10 @@ class StripeAccountConnection extends React.Component<Props, State> {
|
||||||
stillRequiringVerification: false,
|
stillRequiringVerification: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
if ((eventuallyDueInformation && eventuallyDueInformation.length) || (currentlyDueInformation && currentlyDueInformation.length)) {
|
if (
|
||||||
|
(eventuallyDueInformation && eventuallyDueInformation.length) ||
|
||||||
|
(currentlyDueInformation && currentlyDueInformation.length)
|
||||||
|
) {
|
||||||
objectToUpdateState.stillRequiringVerification = true;
|
objectToUpdateState.stillRequiringVerification = true;
|
||||||
getAndSetAccountLink(false);
|
getAndSetAccountLink(false);
|
||||||
}
|
}
|
||||||
|
@ -233,8 +231,17 @@ class StripeAccountConnection extends React.Component<Props, State> {
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<h3>{__('Congratulations! Your account has been connected with Odysee.')}</h3>
|
<h3>{__('Congratulations! Your account has been connected with Odysee.')}</h3>
|
||||||
{stillRequiringVerification && <><h3 style={{marginTop: '10px'}}>Although your account is connected it still requires verification to begin receiving tips.</h3>
|
{stillRequiringVerification && (
|
||||||
<h3 style={{marginTop: '10px'}}>Please use the button below to complete your verification process and enable tipping for your account.</h3></> }
|
<>
|
||||||
|
<h3 style={{ marginTop: '10px' }}>
|
||||||
|
Although your account is connected it still requires verification to begin receiving tips.
|
||||||
|
</h3>
|
||||||
|
<h3 style={{ marginTop: '10px' }}>
|
||||||
|
Please use the button below to complete your verification process and enable tipping for
|
||||||
|
your account.
|
||||||
|
</h3>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -254,9 +261,7 @@ class StripeAccountConnection extends React.Component<Props, State> {
|
||||||
<br />
|
<br />
|
||||||
<div>
|
<div>
|
||||||
<h3>
|
<h3>
|
||||||
{__(
|
{__('Connect your bank account to be able to cash your pending balance out to your account.')}
|
||||||
'Connect your bank account to be able to cash your pending balance out to your account.'
|
|
||||||
)}
|
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="section__actions">
|
<div className="section__actions">
|
||||||
|
@ -271,19 +276,23 @@ class StripeAccountConnection extends React.Component<Props, State> {
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
actions={
|
actions={
|
||||||
<>{ stillRequiringVerification && <Button
|
<>
|
||||||
button="primary"
|
{stillRequiringVerification && (
|
||||||
label={__('Complete Verification')}
|
<Button
|
||||||
icon={ICONS.SETTINGS}
|
button="primary"
|
||||||
navigate={stripeConnectionUrl}
|
label={__('Complete Verification')}
|
||||||
className="stripe__complete-verification-button"
|
icon={ICONS.SETTINGS}
|
||||||
/> }
|
navigate={stripeConnectionUrl}
|
||||||
<Button
|
className="stripe__complete-verification-button"
|
||||||
button="secondary"
|
/>
|
||||||
label={__('View Transactions')}
|
)}
|
||||||
icon={ICONS.SETTINGS}
|
<Button
|
||||||
navigate={`/$/${PAGES.WALLET}?tab=fiat-payment-history`}
|
button="secondary"
|
||||||
/></>
|
label={__('View Transactions')}
|
||||||
|
icon={ICONS.SETTINGS}
|
||||||
|
navigate={`/$/${PAGES.WALLET}?tab=fiat-payment-history`}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<br />
|
<br />
|
||||||
|
|
Loading…
Reference in a new issue