2021-08-18 00:34:17 +02:00
4 changed files with 101 additions and 122 deletions
--- a/ui/component/commentCreate/view.jsx
+++ b/ui/component/commentCreate/view.jsx
@ -1,6 +1,6 @@
 // @flow
 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 ICONS from 'constants/icons';
 import React from 'react';
@ -21,12 +21,8 @@ import Empty from 'component/common/empty';
 import { getChannelIdFromClaim } from 'util/claim';
 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 && STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) {
-  stripeEnvironment = 'live';
-}
+import { getStripeEnvironment } from 'util/stripe';
+let stripeEnvironment = getStripeEnvironment();

 const TAB_FIAT = 'TabFiat';
 const TAB_LBC = 'TabLBC';
@ -534,7 +530,7 @@ export function CommentCreate(props: Props) {
              />
            )}
            {/* @if TARGET='web' */}
-            {!claimIsMine && (
+            {!claimIsMine && stripeEnvironment && (
              <Button
                disabled={disabled}
                button="alt"
--- a/ui/component/walletFiatPaymentHistory/view.jsx
+++ b/ui/component/walletFiatPaymentHistory/view.jsx
@ -4,14 +4,8 @@ import Button from 'component/button';
 import Card from 'component/common/card';
 import { Lbryio } from 'lbryinc';
 import moment from 'moment';
-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';
-}
+import { getStripeEnvironment } from 'util/stripe';
+let stripeEnvironment = getStripeEnvironment();

 type Props = {
  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
  React.useEffect(() => {
-    (async function() {
-        const customerStatusResponse = await getCustomerStatus();
+    (async function () {
+      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">
              <table className="table table--transactions">
                <thead>
-                <tr>
-                  <th className="date-header">{__('Date')}</th>
-                  <th>{<>{__('Receiving Channel Name')}</>}</th>
-                  <th>{__('Tip Location')}</th>
-                  <th>{__('Amount (USD)')} </th>
-                  <th>{__('Card Last 4')}</th>
-                  <th>{__('Anonymous')}</th>
-                </tr>
+                  <tr>
+                    <th className="date-header">{__('Date')}</th>
+                    <th>{<>{__('Receiving Channel Name')}</>}</th>
+                    <th>{__('Tip Location')}</th>
+                    <th>{__('Amount (USD)')} </th>
+                    <th>{__('Card Last 4')}</th>
+                    <th>{__('Anonymous')}</th>
+                  </tr>
                </thead>
                <tbody>
-                {accountTransactions &&
-                accountTransactions.map((transaction) => (
-                  <tr key={transaction.name + transaction.created_at}>
-                    <td>{moment(transaction.created_at).format('LLL')}</td>
-                    <td>
-                      <Button
-                        className=""
-                        navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
-                        label={transaction.channel_name}
-                        button="link"
-                      />
-                    </td>
-                    <td>
-                      <Button
-                        className=""
-                        navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
-                        label={
-                          transaction.channel_claim_id === transaction.source_claim_id
-                            ? 'Channel Page'
-                            : 'Content Page'
-                        }
-                        button="link"
-                      />
-                    </td>
-                    <td>${transaction.tipped_amount / 100}</td>
-                    <td>{lastFour}</td>
-                    <td>{transaction.private_tip ? 'Yes' : 'No'}</td>
-                  </tr>
-                ))}
+                  {accountTransactions &&
+                    accountTransactions.map((transaction) => (
+                      <tr key={transaction.name + transaction.created_at}>
+                        <td>{moment(transaction.created_at).format('LLL')}</td>
+                        <td>
+                          <Button
+                            className=""
+                            navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
+                            label={transaction.channel_name}
+                            button="link"
+                          />
+                        </td>
+                        <td>
+                          <Button
+                            className=""
+                            navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
+                            label={
+                              transaction.channel_claim_id === transaction.source_claim_id
+                                ? 'Channel Page'
+                                : 'Content Page'
+                            }
+                            button="link"
+                          />
+                        </td>
+                        <td>${transaction.tipped_amount / 100}</td>
+                        <td>{lastFour}</td>
+                        <td>{transaction.private_tip ? 'Yes' : 'No'}</td>
+                      </tr>
+                    ))}
                </tbody>
              </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>
          </>
        }
      />
-  </>
+    </>
  );
 };

--- a/ui/modal/modalRemoveCard/view.jsx
+++ b/ui/modal/modalRemoveCard/view.jsx
@ -5,43 +5,19 @@ import Card from 'component/common/card';
 import Button from 'component/button';
 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';
-}
+import { getStripeEnvironment } from 'util/stripe';
+let stripeEnvironment = getStripeEnvironment();

 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,
+  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);
+export default function ModalRemoveCard(props: Props) {
+  const { closeModal, paymentMethodId } = props;

  function removeCard() {
-    console.log(paymentMethodId);
-
    Lbryio.call(
      'customer',
      'detach',
@ -51,11 +27,9 @@ export default function ModalRevokeClaim(props: Props) {
      },
      'post'
    ).then((removeCardResponse) => {
-      console.log(removeCardResponse);
-
      // TODO: add toast here
      // closeModal();
-
+      // Is there a better way to handle this? Why reload?
      window.location.reload();
    });
  }
@ -63,15 +37,14 @@ export default function ModalRevokeClaim(props: Props) {
  return (
    <Modal ariaHideApp={false} isOpen contentLabel={'hello'} type="card" onAborted={closeModal}>
      <Card
-        title={'Confirm Remove Card'}
-        // body={getMsgBody(type, isSupport, name)}
+        title={__('Confirm Remove Card')}
        actions={
          <div className="section__actions">
            <Button
              className="stripe__confirm-remove-card"
              button="secondary"
              icon={ICONS.DELETE}
-              label={'Remove Card'}
+              label={__('Remove Card')}
              onClick={removeCard}
            />
            <Button button="link" label={__('Cancel')} onClick={closeModal} />
--- a/ui/page/settingsStripeAccount/view.jsx
+++ b/ui/page/settingsStripeAccount/view.jsx
@ -7,17 +7,12 @@ import Card from 'component/common/card';
 import Page from 'component/page';

 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';

-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';
-}
-
+let stripeEnvironment = getStripeEnvironment();
 let successStripeRedirectUrl, failureStripeRedirectUrl;
 let successEndpoint = '/$/settings/tip_account';
 let failureEndpoint = '/$/settings/tip_account';
@ -46,7 +41,7 @@ type State = {
  unpaidBalance: number,
  pageTitle: string,
  stillRequiringVerification: boolean,
-  accountTransactions: any
+  accountTransactions: any,
 };

 class StripeAccountConnection extends React.Component<Props, State> {
@ -144,7 +139,10 @@ class StripeAccountConnection extends React.Component<Props, State> {
            stillRequiringVerification: false,
          };

-          if ((eventuallyDueInformation && eventuallyDueInformation.length) || (currentlyDueInformation && currentlyDueInformation.length)) {
+          if (
+            (eventuallyDueInformation && eventuallyDueInformation.length) ||
+            (currentlyDueInformation && currentlyDueInformation.length)
+          ) {
            objectToUpdateState.stillRequiringVerification = true;
            getAndSetAccountLink(false);
          }
@ -233,8 +231,17 @@ class StripeAccountConnection extends React.Component<Props, State> {
                  <div>
                    <div>
                      <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>
-                      <h3 style={{marginTop: '10px'}}>Please use the button below to complete your verification process and enable tipping for your account.</h3></> }
+                      {stillRequiringVerification && (
+                        <>
+                          <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>
@ -254,9 +261,7 @@ class StripeAccountConnection extends React.Component<Props, State> {
                      <br />
                      <div>
                        <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>
                      </div>
                      <div className="section__actions">
@ -271,19 +276,23 @@ class StripeAccountConnection extends React.Component<Props, State> {
            </div>
          }
          actions={
-            <>{ stillRequiringVerification && <Button
-              button="primary"
-              label={__('Complete Verification')}
-              icon={ICONS.SETTINGS}
-              navigate={stripeConnectionUrl}
-              className="stripe__complete-verification-button"
-            /> }
-            <Button
-              button="secondary"
-              label={__('View Transactions')}
-              icon={ICONS.SETTINGS}
-              navigate={`/$/${PAGES.WALLET}?tab=fiat-payment-history`}
-            /></>
+            <>
+              {stillRequiringVerification && (
+                <Button
+                  button="primary"
+                  label={__('Complete Verification')}
+                  icon={ICONS.SETTINGS}
+                  navigate={stripeConnectionUrl}
+                  className="stripe__complete-verification-button"
+                />
+              )}
+              <Button
+                button="secondary"
+                label={__('View Transactions')}
+                icon={ICONS.SETTINGS}
+                navigate={`/$/${PAGES.WALLET}?tab=fiat-payment-history`}
+              />
+            </>
          }
        />
        <br />