Chore desktop cleanup #6896

Merged
jessopb merged 8 commits from chore-desktopCleanup into master 2021-08-18 00:34:17 +02:00
4 changed files with 101 additions and 122 deletions
Showing only changes of commit 78801ae82d - Show all commits

View file

@ -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"

View file

@ -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>
</> </>
} }
/> />
</> </>
); );
}; };

View file

@ -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} />

View file

@ -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 />