make flow shut up

flow-typed/user.js

@@ -28,6 +28,7 @@ declare type User = {
   device_types: Array<DeviceType>,
   lbry_first_approved: boolean,
   experimental_ui: boolean,
+  fiat_enabled: boolean,
   odysee_live_enabled: boolean,
   odysee_live_disabled: boolean,
   global_mod: boolean,

ui/component/stripeAccountConnection/view.jsx

@@ -36,10 +36,11 @@ type State = {
   loading: boolean,
   content: ?string,
   stripeConnectionUrl: string,
-  alreadyUpdated: boolean,
+  // alreadyUpdated: boolean,
   accountConfirmed: boolean,
+  accountPendingConfirmation: boolean,
   accountNotConfirmedButReceivedTips: boolean,
-  unpaidBalance: string
+  unpaidBalance: number,
 };
 
 class StripeAccountConnection extends React.Component<Props, State> {
@@ -53,22 +54,30 @@ class StripeAccountConnection extends React.Component<Props, State> {
       accountPendingConfirmation: false,
       accountNotConfirmedButReceivedTips: false,
       unpaidBalance: 0,
+      stripeConnectionUrl: '',
+      // alreadyUpdated: false,
     };
   }
 
   componentDidMount() {
     const { user } = this.props;
 
+    // $FlowFixMe
     this.experimentalUiEnabled = user && user.experimental_ui;
 
     var that = this;
 
     function getAndSetAccountLink(stillNeedToConfirmAccount) {
-      Lbryio.call('account', 'link', {
+      Lbryio.call(
+        'account',
+        'link',
+        {
           return_url: successStripeRedirectUrl,
           refresh_url: failureStripeRedirectUrl,
           environment: stripeEnvironment,
-      }, 'post').then(accountLinkResponse => {
+        },
+        'post'
+      ).then((accountLinkResponse) => {
         // stripe link for user to navigate to and confirm account
         const stripeConnectionUrl = accountLinkResponse.url;
 
@@ -87,9 +96,15 @@ class StripeAccountConnection extends React.Component<Props, State> {
     }
 
     // call the account status endpoint
-    Lbryio.call('account', 'status', {
+    Lbryio.call(
+      'account',
+      'status',
+      {
         environment: stripeEnvironment,
-    }, 'post').then(accountStatusResponse => {
+      },
+      'post'
+    )
+      .then((accountStatusResponse) => {
         const yetToBeCashedOutBalance = accountStatusResponse.total_received_unpaid;
         if (yetToBeCashedOutBalance) {
           that.setState({
@@ -118,7 +133,8 @@ class StripeAccountConnection extends React.Component<Props, State> {
           // pass true so it updates the frontend
           getAndSetAccountLink(true);
         }
-    }).catch(function(error) {
+      })
+      .catch(function (error) {
         // errorString passed from the API (with a 403 error)
         const errorString = 'account not linked to user, please link first';
 
@@ -134,7 +150,13 @@ class StripeAccountConnection extends React.Component<Props, State> {
   }
 
   render() {
-    const { stripeConnectionUrl, accountConfirmed, accountPendingConfirmation, unpaidBalance, accountNotConfirmedButReceivedTips } = this.state;
+    const {
+      stripeConnectionUrl,
+      accountConfirmed,
+      accountPendingConfirmation,
+      unpaidBalance,
+      accountNotConfirmedButReceivedTips,
+    } = this.state;
 
     const { user } = this.props;
 
@@ -146,7 +168,7 @@ class StripeAccountConnection extends React.Component<Props, State> {
           body={
             <div>
               {/* show while waiting for account status */}
-              {!accountConfirmed && !accountPendingConfirmation && !accountNotConfirmedButReceivedTips &&
+              {!accountConfirmed && !accountPendingConfirmation && !accountNotConfirmedButReceivedTips && (
                 <div className="card__body-actions">
                   <div>
                     <div>
@@ -154,9 +176,9 @@ class StripeAccountConnection extends React.Component<Props, State> {
                     </div>
                   </div>
                 </div>
-              }
+              )}
               {/* user has yet to complete their integration */}
-              {!accountConfirmed && accountPendingConfirmation &&
+              {!accountConfirmed && accountPendingConfirmation && (
                 <div className="card__body-actions">
                   <div>
                     <div>
@@ -164,61 +186,67 @@ class StripeAccountConnection extends React.Component<Props, State> {
                     </div>
                     <div className="section__actions">
                       <a href={stripeConnectionUrl}>
-                      <Button
+                        <Button button="secondary" label={__('Connect Your Bank Account')} icon={ICONS.FINANCE} />
-                        button="secondary"
-                        label={__('Connect Your Bank Account')}
-                        icon={ICONS.FINANCE}
-                      />
                       </a>
                     </div>
                   </div>
                 </div>
-              }
+              )}
-              { /* user has completed their integration */ }
+              {/* user has completed their integration */}
-              {accountConfirmed &&
+              {accountConfirmed && (
                 <div className="card__body-actions">
                   <div>
                     <div>
                       <h3>Congratulations! Your account has been connected with Odysee.</h3>
-                    {unpaidBalance > 0 ? <div><br />
+                      {unpaidBalance > 0 ? (
-                      <h3>Your account balance is ${unpaidBalance / 100} USD. Functionality to view your transactions and withdraw your balance will be landing shortly.</h3>
+                        <div>
-                    </div> : <div><br />
+                          <br />
+                          <h3>
+                            Your account balance is ${unpaidBalance / 100} USD. Functionality to view your transactions
+                            and withdraw your balance will be landing shortly.
+                          </h3>
+                        </div>
+                      ) : (
+                        <div>
+                          <br />
                           <h3>Your account balance is $0 USD. When you receive a tip you will see it here.</h3>
-                    </div>}
+                        </div>
+                      )}
                     </div>
                   </div>
                 </div>
-              }
+              )}
-              { accountNotConfirmedButReceivedTips &&
+              {accountNotConfirmedButReceivedTips && (
                 <div className="card__body-actions">
                   <div>
                     <div>
                       <h3>Congratulations, you have already begun receiving tips on Odysee!</h3>
-                    <div><br />
+                      <div>
-                      <h3>Your pending account balance is ${unpaidBalance / 100} USD. Functionality to view and receive your transactions will land soon.</h3>
+                        <br />
-                    </div><br />
+                        <h3>
+                          Your pending account balance is ${unpaidBalance / 100} USD. Functionality to view and receive
+                          your transactions will land soon.
+                        </h3>
+                      </div>
+                      <br />
                       <div>
                         <h3>Connect your Bank Account to be able to cash your pending balance out to your account.</h3>
                       </div>
                       <div className="section__actions">
                         <a href={stripeConnectionUrl}>
-                        <Button
+                          <Button button="secondary" label={__('Connect Your Bank Account')} icon={ICONS.FINANCE} />
-                          button="secondary"
-                          label={__('Connect Your Bank Account')}
-                          icon={ICONS.FINANCE}
-                        />
                         </a>
                       </div>
                     </div>
                   </div>
                 </div>
-              }
+              )}
             </div>
           }
         />
       );
     } else {
-      return (<></>); // probably null;
+      return <></>; // probably null;
     }
   }
 }

ui/page/settingsStripeCard/view.jsx

@@ -1,4 +1,4 @@
-// @flow
+// restore flow
 /* eslint-disable no-undef */
 /* eslint-disable react/prop-types */
 import React from 'react';
@@ -19,14 +19,25 @@ if (STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) {
   stripeEnvironment = 'live';
 }
 
-type Props = {
+// type Props = {
-  disabled: boolean,
+//   disabled: boolean,
-  label: ?string,
+//   label: ?string,
-  email: ?string,
+//   email: ?string,
-}
+//   scriptFailedToLoad: boolean,
+// };
+//
+// type State = {
+//   open: boolean,
+//   currentFlowStage: string,
+//   customerTransactions: Array<any>,
+//   pageTitle: string,
+//   userCardDetails: any, // fill this out
+//   scriptFailedToLoad: boolean,
+// };
 
 class CardVerify extends React.Component<Props, State> {
-  constructor(props: Props) {
+  constructor(props) {
+    // :Props
     super(props);
     this.state = {
       open: false,
@@ -56,11 +67,17 @@ class CardVerify extends React.Component<Props, State> {
 
     // setting a timeout to let the client secret populate
     // TODO: fix this, should be a cleaner way
-    setTimeout(function() {
+    setTimeout(function () {
       // check if customer has card setup already
-      Lbryio.call('customer', 'status', {
+      Lbryio.call(
+        'customer',
+        'status',
+        {
           environment: stripeEnvironment,
-      }, 'post').then(customerStatusResponse => {
+        },
+        'post'
+      )
+        .then((customerStatusResponse) => {
           // user has a card saved if their defaultPaymentMethod has an id
           const defaultPaymentMethod = customerStatusResponse.Customer.invoice_settings.default_payment_method;
           var userHasAlreadySetupPayment = Boolean(defaultPaymentMethod && defaultPaymentMethod.id);
@@ -83,9 +100,14 @@ class CardVerify extends React.Component<Props, State> {
             });
 
             // get customer transactions
-          Lbryio.call('customer', 'list', {
+            Lbryio.call(
+              'customer',
+              'list',
+              {
                 environment: stripeEnvironment,
-          }, 'post').then(customerTransactionsResponse => {
+              },
+              'post'
+            ).then((customerTransactionsResponse) => {
               that.setState({
                 customerTransactions: customerTransactionsResponse,
               });
@@ -100,9 +122,14 @@ class CardVerify extends React.Component<Props, State> {
             });
 
             // get a payment method secret for frontend
-          Lbryio.call('customer', 'setup', {
+            Lbryio.call(
+              'customer',
+              'setup',
+              {
                 environment: stripeEnvironment,
-          }, 'post').then(customerSetupResponse => {
+              },
+              'post'
+            ).then((customerSetupResponse) => {
               console.log(customerSetupResponse);
 
               clientSecret = customerSetupResponse.client_secret;
@@ -112,7 +139,8 @@ class CardVerify extends React.Component<Props, State> {
             });
           }
           // if the status call fails, either an actual error or need to run setup first
-      }).catch(function(error) {
+        })
+        .catch(function (error) {
           console.log(error);
 
           // errorString passed from the API (with a 403 error)
@@ -126,9 +154,14 @@ class CardVerify extends React.Component<Props, State> {
             });
 
             // get a payment method secret for frontend
-          Lbryio.call('customer', 'setup', {
+            Lbryio.call(
+              'customer',
+              'setup',
+              {
                 environment: stripeEnvironment,
-          }, 'post').then(customerSetupResponse => {
+              },
+              'post'
+            ).then((customerSetupResponse) => {
               console.log(customerSetupResponse);
 
               clientSecret = customerSetupResponse.client_secret;
@@ -144,8 +177,8 @@ class CardVerify extends React.Component<Props, State> {
 
     function setupStripe() {
       // TODO: have to fix this, using so that the script is available
-      setTimeout(function() {
+      setTimeout(function () {
-        var stripeElements = function(publicKey, setupIntent) {
+        var stripeElements = function (publicKey, setupIntent) {
           var stripe = Stripe(publicKey);
           var elements = stripe.elements();
 
@@ -154,8 +187,7 @@ class CardVerify extends React.Component<Props, State> {
             base: {
               fontSize: '16px',
               color: '#32325d',
-              fontFamily:
+              fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
-                '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
               fontSmoothing: 'antialiased',
               '::placeholder': {
                 color: 'rgba(0,0,0,0.4)',
@@ -168,17 +200,17 @@ class CardVerify extends React.Component<Props, State> {
           card.mount('#card-element');
 
           // Element focus ring
-          card.on('focus', function() {
+          card.on('focus', function () {
             var el = document.getElementById('card-element');
             el.classList.add('focused');
           });
 
-          card.on('blur', function() {
+          card.on('blur', function () {
             var el = document.getElementById('card-element');
             el.classList.remove('focused');
           });
 
-          card.on('ready', function() {
+          card.on('ready', function () {
             card.focus();
           });
 
@@ -198,12 +230,14 @@ class CardVerify extends React.Component<Props, State> {
 
             changeLoadingState(true);
 
-            stripe.confirmCardSetup(clientSecret, {
+            stripe
+              .confirmCardSetup(clientSecret, {
                 payment_method: {
                   card: card,
                   billing_details: { email: email },
                 },
-            }).then(function(result) {
+              })
+              .then(function (result) {
                 if (result.error) {
                   console.log(result);
 
@@ -220,7 +254,7 @@ class CardVerify extends React.Component<Props, State> {
 
           // Handle payment submission when user clicks the pay button.
           var button = document.getElementById('submit');
-          button.addEventListener('click', function(event) {
+          button.addEventListener('click', function (event) {
             submitForm(event);
           });
 
@@ -237,24 +271,35 @@ class CardVerify extends React.Component<Props, State> {
         stripeElements(publicKey, clientSecret);
 
         // Show a spinner on payment submission
-        var changeLoadingState = function(isLoading) {
+        var changeLoadingState = function (isLoading) {
           if (isLoading) {
+            // $FlowFixMe
             document.querySelector('button').disabled = true;
+            // $FlowFixMe
             document.querySelector('#spinner').classList.remove('hidden');
+            // $FlowFixMe
             document.querySelector('#button-text').classList.add('hidden');
           } else {
+            // $FlowFixMe
             document.querySelector('button').disabled = false;
+            // $FlowFixMe
             document.querySelector('#spinner').classList.add('hidden');
+            // $FlowFixMe
             document.querySelector('#button-text').classList.remove('hidden');
           }
         };
 
         // shows a success / error message when the payment is complete
-        var orderComplete = function(stripe, clientSecret) {
+        var orderComplete = function (stripe, clientSecret) {
-          stripe.retrieveSetupIntent(clientSecret).then(function(result) {
+          stripe.retrieveSetupIntent(clientSecret).then(function (result) {
-            Lbryio.call('customer', 'status', {
+            Lbryio.call(
+              'customer',
+              'status',
+              {
                 environment: stripeEnvironment,
-            }, 'post').then(customerStatusResponse => {
+              },
+              'post'
+            ).then((customerStatusResponse) => {
               var card = customerStatusResponse.PaymentMethods[0].card;
 
               var cardDetails = {
@@ -287,10 +332,16 @@ class CardVerify extends React.Component<Props, State> {
   }
 
   componentWillUnmount() {
+    // pretty sure this doesn't exist
+    // $FlowFixMe
     if (this.loadPromise) {
+      // $FlowFixMe
       this.loadPromise.reject();
     }
+    // pretty sure this doesn't exist
+    // $FlowFixMe
     if (CardVerify.stripeHandler && this.state.open) {
+      // $FlowFixMe
       CardVerify.stripeHandler.close();
     }
   }
@@ -329,7 +380,6 @@ class CardVerify extends React.Component<Props, State> {
     const { currentFlowStage, customerTransactions, pageTitle, userCardDetails } = this.state;
 
     return (
-
       <Page backout={{ title: pageTitle, backLabel: __('Done') }} noFooter noSideNavigation>
         <div>
           {scriptFailedToLoad && (
@@ -337,20 +387,18 @@ class CardVerify extends React.Component<Props, State> {
           )}
         </div>
 
-        {currentFlowStage === 'loading' && <div className="headerCard toConfirmCard">
+        {currentFlowStage === 'loading' && (
-          <Card
+          <div className="headerCard toConfirmCard">
-            title={__('Connect your card with Odysee')}
+            <Card title={__('Connect your card with Odysee')} subtitle={__('Getting your card connection status...')} />
-            subtitle={__('Getting your card connection status...')}
+          </div>
-          />
+        )}
-        </div>}
 
-        {currentFlowStage === 'confirmingCard' && <div className="sr-root">
+        {currentFlowStage === 'confirmingCard' && (
+          <div className="sr-root">
             <div className="sr-main">
               <div className="sr-payment-form card cardInput">
                 <div className="sr-form-row">
-                <label className="payment-details">
+                  <label className="payment-details">Card Details</label>
-                  Card Details
-                </label>
                   <div className="sr-input sr-element sr-card-element" id="card-element" />
                 </div>
                 <div className="sr-field-error" id="card-errors" role="alert" />
@@ -360,28 +408,37 @@ class CardVerify extends React.Component<Props, State> {
                 </button>
               </div>
             </div>
-        </div>}
+          </div>
+        )}
 
-        {currentFlowStage === 'cardConfirmed' && <div className="successCard">
+        {currentFlowStage === 'cardConfirmed' && (
+          <div className="successCard">
             <Card
               title={__('Card Details')}
-            body={<>
+              body={
-              <h4 className="grey-text">Brand: {userCardDetails.brand.toUpperCase()} &nbsp;
+                <>
-                Last 4:  {userCardDetails.lastFour} &nbsp;
+                  <h4 className="grey-text">
+                    Brand: {userCardDetails.brand.toUpperCase()} &nbsp; Last 4: {userCardDetails.lastFour} &nbsp;
                     Expires: {userCardDetails.expiryMonth}/{userCardDetails.expiryYear} &nbsp;
                   </h4>
-              </>}
+                </>
+              }
             />
             <br />
 
-          {(!customerTransactions || customerTransactions.length === 0) && <Card
+            {(!customerTransactions || customerTransactions.length === 0) && (
+              <Card
                 title={__('Tip History')}
                 subtitle={__('You have not sent any tips yet. When you do they will appear here. ')}
-          />}
+              />
+            )}
 
-          {customerTransactions && customerTransactions.length > 0 && <Card
+            {customerTransactions && customerTransactions.length > 0 && (
+              <Card
                 title={__('Tip History')}
-            body={<><div className="table__wrapper">
+                body={
+                  <>
+                    <div className="table__wrapper">
                       <table className="table table--transactions">
                         <thead>
                           <tr>
@@ -403,10 +460,13 @@ class CardVerify extends React.Component<Props, State> {
                             ))}
                         </tbody>
                       </table>
-            </div></>}
+                    </div>
-          />}
+                  </>
-        </div>}
+                }
-
+              />
+            )}
+          </div>
+        )}
       </Page>
     );
   }