From 81bac22fe002dea97196836e5adb4fe8a64ed9f6 Mon Sep 17 00:00:00 2001
From: Anthony <contact@anthonymayfield.com>
Date: Sun, 18 Jul 2021 21:04:28 +0200
Subject: [PATCH] disable review button if no card saved also some cleanup

---
 ui/component/commentCreate/view.jsx           | 11 +++----
 ui/component/walletSendTip/view.jsx           |  4 +--
 ui/component/walletTipAmountSelector/view.jsx | 30 +++++++++++--------
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx
index 6be016f43..12028b6de 100644
--- a/ui/component/commentCreate/view.jsx
+++ b/ui/component/commentCreate/view.jsx
@@ -84,16 +84,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;
@@ -373,10 +371,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}
@@ -387,8 +385,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..0e154c11d 100644
--- a/ui/component/walletTipAmountSelector/view.jsx
+++ b/ui/component/walletTipAmountSelector/view.jsx
@@ -34,26 +34,35 @@ type Props = {
   uri: string,
   onTipErrorChange: (string) => void,
   activeTab: string,
+  shouldDisableReviewButton: (string) => 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);
 
+  /**
+   * 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))
-    );
+
+    const shouldDisable =
+      // if it's LBC but the balance isn't enough
+      (amount > balance && activeTab !== TAB_FIAT) ||
+      // if it's fiat but there's no card saved OR the creator can't receive fiat tips
+      (activeTab === TAB_FIAT && (!hasCardSaved || !canReceiveFiatTip));
+
+    shouldDisableReviewButton(shouldDisable);
+
+    return shouldDisable;
   }
 
-  console.log(activeTab);
-
-  console.log(claim);
-
   // setup variables for tip API
   let channelClaimId, tipChannelName;
   // if there is a signing channel it's on a file
@@ -83,9 +92,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 +236,7 @@ function WalletTipAmountSelector(props: Props) {
           <FormField
             autoFocus
             name="tip-input"
+            disabled={shouldDisableAmountSelector()}
             label={
               activeTab === TAB_LBC ? (
                 <React.Fragment>
@@ -239,7 +246,6 @@ function WalletTipAmountSelector(props: Props) {
                   </I18nMessage>
                 </React.Fragment>
               ) : (
-                // TODO: add conditional based on hasSavedCard
                 <></>
               )