From 42d93a3deafe7b7b052f6134be4f4d9383e4c40c Mon Sep 17 00:00:00 2001
From: mayeaux <contact@anthonymayfield.com>
Date: Mon, 19 Jul 2021 03:47:39 +0200
Subject: [PATCH] Latest changes to odysee (#6536)

* disable review button if no card saved also some cleanup

* fix flow errors
---
 ui/component/commentCreate/view.jsx           | 11 +++-----
 ui/component/walletSendTip/view.jsx           |  4 +--
 ui/component/walletTipAmountSelector/view.jsx | 26 +++++++++++--------
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx
index e8f00b1e9..1fce8fb04 100644
--- a/ui/component/commentCreate/view.jsx
+++ b/ui/component/commentCreate/view.jsx
@@ -91,16 +91,14 @@ export function CommentCreate(props: Props) {
   const [commentValue, setCommentValue] = React.useState('');
   const [advancedEditor, setAdvancedEditor] = usePersistedState('comment-editor-mode', false);
   const hasChannels = channels && channels.length;
-  const disabled = isSubmitting || !activeChannelClaim || !commentValue.length;
   const charCount = commentValue.length;
 
   const [activeTab, setActiveTab] = React.useState('');
 
   const [tipError, setTipError] = React.useState();
 
-  // React.useEffect(() => {
-  //   setTipError('yes');
-  // }, []);
+  const disabled = isSubmitting || !activeChannelClaim || !commentValue.length;
+  const [shouldDisableReviewButton, setShouldDisableReviewButton] = React.useState();
 
   function handleCommentChange(event) {
     let commentValue;
@@ -390,10 +388,10 @@ export function CommentCreate(props: Props) {
         autoFocus={isReply}
         textAreaMaxLength={livestream ? FF_MAX_CHARS_IN_LIVESTREAM_COMMENT : FF_MAX_CHARS_IN_COMMENT}
       />
-      {/* TODO: the tip validation is done in selector */}
       {isSupportComment && (
         <WalletTipAmountSelector
           onTipErrorChange={setTipError}
+          shouldDisableReviewButton={setShouldDisableReviewButton}
           claim={claim}
           activeTab={activeTab}
           amount={tipAmount}
@@ -404,8 +402,7 @@ export function CommentCreate(props: Props) {
         {isSupportComment ? (
           <>
             <Button
-              // TODO: add better check here
-              disabled={disabled || tipError}
+              disabled={disabled || tipError || shouldDisableReviewButton}
               type="button"
               button="primary"
               icon={activeTab === TAB_LBC ? ICONS.LBC : ICONS.FINANCE}
diff --git a/ui/component/walletSendTip/view.jsx b/ui/component/walletSendTip/view.jsx
index 231f920ad..8821c3f41 100644
--- a/ui/component/walletSendTip/view.jsx
+++ b/ui/component/walletSendTip/view.jsx
@@ -476,8 +476,8 @@ function WalletSendTip(props: Props) {
 
                 {activeTab === TAB_FIAT && !hasCardSaved && (
                   <h3 className="add-card-prompt">
-                    <Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card')} button="link" /> To
-                    {__('Tip Creators')}
+                    <Button navigates={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card')} button="link" />
+                    {' '}{__('To Tip Creators')}
                   </h3>
                 )}
 
diff --git a/ui/component/walletTipAmountSelector/view.jsx b/ui/component/walletTipAmountSelector/view.jsx
index 711782cda..a0246ca47 100644
--- a/ui/component/walletTipAmountSelector/view.jsx
+++ b/ui/component/walletTipAmountSelector/view.jsx
@@ -34,25 +34,32 @@ type Props = {
   uri: string,
   onTipErrorChange: (string) => void,
   activeTab: string,
+  shouldDisableReviewButton: (boolean) => void
 };
 
 function WalletTipAmountSelector(props: Props) {
-  const { balance, amount, onChange, activeTab, claim, onTipErrorChange } = props;
+  const { balance, amount, onChange, activeTab, claim, onTipErrorChange, shouldDisableReviewButton } = 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);
 
+  // if it's fiat but there's no card saved OR the creator can't receive fiat tips
+  const shouldDisableFiatSelectors = (activeTab === TAB_FIAT && (!hasCardSaved || !canReceiveFiatTip));
+
+  /**
+   * whether tip amount selection/review functionality should be disabled
+   * @param [amount] LBC amount (optional)
+   * @returns {boolean}
+   */
   function shouldDisableAmountSelector(amount) {
-    return (
-      (amount > balance && activeTab !== TAB_FIAT) || (activeTab === TAB_FIAT && (!hasCardSaved || !canReceiveFiatTip))
-    );
+    // if it's LBC but the balance isn't enough, or fiat conditions met
+    // $FlowFixMe
+    return (amount > balance && activeTab !== TAB_FIAT) || shouldDisableFiatSelectors;
   }
 
-  console.log(activeTab);
-
-  console.log(claim);
+  shouldDisableReviewButton(shouldDisableFiatSelectors);
 
   // setup variables for tip API
   let channelClaimId, tipChannelName;
@@ -83,9 +90,6 @@ function WalletTipAmountSelector(props: Props) {
         customerStatusResponse.Customer.invoice_settings.default_payment_method &&
         customerStatusResponse.Customer.invoice_settings.default_payment_method.id;
 
-      console.log('here');
-      console.log(defaultPaymentMethodId);
-
       setHasSavedCard(Boolean(defaultPaymentMethodId));
     });
   }, []);
@@ -230,6 +234,7 @@ function WalletTipAmountSelector(props: Props) {
           <FormField
             autoFocus
             name="tip-input"
+            disabled={shouldDisableAmountSelector()}
             label={
               activeTab === TAB_LBC ? (
                 <React.Fragment>
@@ -239,7 +244,6 @@ function WalletTipAmountSelector(props: Props) {
                   </I18nMessage>
                 </React.Fragment>
               ) : (
-                // TODO: add conditional based on hasSavedCard
                 <></>
               )