From 644e76fd817aaec3c6dee2322ef607ef91479a2a Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Wed, 17 Jun 2020 09:11:57 +0200
Subject: [PATCH] Tip-Modal: Add settings persistence and UX improvements.

--- Issues:
(1) #-4394 add persistence to new support modal.
(2) Should collapse the custom field when presets are selected.
Even though the Send button repeats the amount for Tip, it's still confusing to see both the Preset being active and Custom numeric field visible.
(3) Missing localization tags.
---
 static/app-strings.json             |  8 ++++++-
 ui/component/walletSendTip/view.jsx | 34 ++++++++++++++++++-----------
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index f81708760..8ee132cfe 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -1210,6 +1210,8 @@
   "Your browser does not support iframes.": "Your browser does not support iframes.",
   "Not a valid LBRY address": "Not a valid LBRY address",
   "Confirm Tip": "Confirm Tip",
+  "Supporting": "Supporting",
+  "Tipping": "Tipping",
   "Tipping: ": "Tipping: ",
   "Sending: ": "Sending: ",
   "To: ": "To: ",
@@ -1244,6 +1246,9 @@
   "Thanks for the feedback! You help make the app better for everyone.": "Thanks for the feedback! You help make the app better for everyone.",
   "Thanks for the feedback. Mark has been notified and is currently walking over to his computer to work on this.": "Thanks for the feedback. Mark has been notified and is currently walking over to his computer to work on this.",
   "Changelog": "Changelog",
+  "Supporting Content Requires LBC": "Supporting Content Requires LBC",
+  "With LBC, you can send tips to your favorite creators, or help boost their content for more people to see.": "With LBC, you can send tips to your favorite creators, or help boost their content for more people to see.",
+  "Boost Your Content": "Boost Your Content",
   "Send Revokable Support": "Send Revokable Support",
   "Send a %amount% Tip": "Send a %amount% Tip",
   "Channel to show support as": "Channel to show support as",
@@ -1251,5 +1256,6 @@
   "Support This Content": "Support This Content",
   "Make this support permanent": "Make this support permanent",
   "Custom support amount": "Custom support amount",
-  "Loading your channels...":"Loading your channels..."
+  "(%lbc_balance% available)": "(%lbc_balance% available)",
+  "Loading your channels...": "Loading your channels..."
 }
diff --git a/ui/component/walletSendTip/view.jsx b/ui/component/walletSendTip/view.jsx
index 051c00d6c..e114d17f3 100644
--- a/ui/component/walletSendTip/view.jsx
+++ b/ui/component/walletSendTip/view.jsx
@@ -50,10 +50,11 @@ function WalletSendTip(props: Props) {
     channels,
     fetchingChannels,
   } = props;
-  const [tipAmount, setTipAmount] = React.useState(DEFAULT_TIP_AMOUNTS[0]);
+  const [presetTipAmount, setPresetTipAmount] = usePersistedState('comment-support:presetTip', DEFAULT_TIP_AMOUNTS[0]);
+  const [customTipAmount, setCustomTipAmount] = usePersistedState('comment-support:customTip', 1.0);
+  const [useCustomTip, setUseCustomTip] = usePersistedState('comment-support:useCustomTip', false);
   const [tipError, setTipError] = React.useState();
-  const [isSupport, setIsSupport] = React.useState(claimIsMine);
-  const [showMore, setShowMore] = React.useState(false);
+  const [sendAsTip, setSendAsTip] = usePersistedState('comment-support:sendAsTip', true);
   const [isConfirming, setIsConfirming] = React.useState(false);
   const isMobile = useIsMobile();
   const [selectedChannel, setSelectedChannel] = usePersistedState('comment-support:channel');
@@ -70,6 +71,9 @@ function WalletSendTip(props: Props) {
     }
   }, [channelStrings]);
 
+  const tipAmount = useCustomTip ? customTipAmount : presetTipAmount;
+  const isSupport = claimIsMine ? true : !sendAsTip;
+
   React.useEffect(() => {
     const regexp = RegExp(/^(\d*([.]\d{0,8})?)$/);
     const validTipInput = regexp.test(String(tipAmount));
@@ -134,9 +138,9 @@ function WalletSendTip(props: Props) {
     }
   }
 
-  function handleSupportPriceChange(event: SyntheticInputEvent<*>) {
+  function handleCustomPriceChange(event: SyntheticInputEvent<*>) {
     const tipAmount = parseFloat(event.target.value);
-    setTipAmount(tipAmount);
+    setCustomTipAmount(tipAmount);
   }
 
   return (
@@ -193,7 +197,7 @@ function WalletSendTip(props: Props) {
               <>
                 <div className="section">
                   <SelectChannel
-                    label="Channel to show support as"
+                    label={__('Channel to show support as')}
                     channel={selectedChannel}
                     onChannelChange={newChannel => setSelectedChannel(newChannel)}
                   />
@@ -210,7 +214,10 @@ function WalletSendTip(props: Props) {
                         'button-toggle--disabled': amount > balance,
                       })}
                       label={`${amount} LBC`}
-                      onClick={() => setTipAmount(amount)}
+                      onClick={() => {
+                        setPresetTipAmount(amount);
+                        setUseCustomTip(false);
+                      }}
                     />
                   ))}
                   <Button
@@ -219,18 +226,18 @@ function WalletSendTip(props: Props) {
                       'button-toggle--active': !DEFAULT_TIP_AMOUNTS.includes(tipAmount),
                     })}
                     label={__('Custom')}
-                    onClick={() => setShowMore(true)}
+                    onClick={() => setUseCustomTip(true)}
                   />
                 </div>
 
-                {showMore && (
+                {useCustomTip && (
                   <div className="section">
                     <FormField
                       autoFocus
                       name="tip-input"
                       label={
                         <React.Fragment>
-                          {'Custom support amount'}{' '}
+                          {__('Custom support amount')}{' '}
                           {isMobile && (
                             <I18nMessage tokens={{ lbc_balance: <CreditAmount badge={false} amount={balance} /> }}>
                               (%lbc_balance% available)
@@ -244,7 +251,8 @@ function WalletSendTip(props: Props) {
                       step="any"
                       type="number"
                       placeholder="1.23"
-                      onChange={event => handleSupportPriceChange(event)}
+                      value={customTipAmount}
+                      onChange={event => handleCustomPriceChange(event)}
                     />
                   </div>
                 )}
@@ -268,8 +276,8 @@ function WalletSendTip(props: Props) {
                       name="toggle-is-support"
                       type="checkbox"
                       label={__('Make this support permanent')}
-                      checked={!isSupport}
-                      onChange={() => setIsSupport(!isSupport)}
+                      checked={sendAsTip}
+                      onChange={() => setSendAsTip(!sendAsTip)}
                     />
                   )}
                 </div>