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(() => {
+  const disabled = isSubmitting || !activeChannelClaim || !commentValue.length;
-  //   setTipError('yes');
+  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 || shouldDisableReviewButton}
-              disabled={disabled || tipError}
               type="button"
               button="primary"
               icon={activeTab === TAB_LBC ? ICONS.LBC : ICONS.FINANCE}

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
+                    <Button navigates={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card')} button="link" />
-                    {__('Tip Creators')}
+                    {' '}{__('To Tip Creators')}
                   </h3>
                 )}
 

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 (
+    // if it's LBC but the balance isn't enough, or fiat conditions met
-      (amount > balance && activeTab !== TAB_FIAT) || (activeTab === TAB_FIAT && (!hasCardSaved || !canReceiveFiatTip))
+    // $FlowFixMe
-    );
+    return (amount > balance && activeTab !== TAB_FIAT) || shouldDisableFiatSelectors;
   }
 
-  console.log(activeTab);
+  shouldDisableReviewButton(shouldDisableFiatSelectors);
-
-  console.log(claim);
 
   // 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
                 <></>
               )