disable review button if no card saved also some cleanup (#6535)
* disable review button if no card saved also some cleanup * fix flow errors
This commit is contained in:
parent
5a04d0fea0
commit
4fe17363f3
3 changed files with 21 additions and 20 deletions
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
|
||||
|
|
|
@ -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
|
||||
<></>
|
||||
)
|
||||
|
||||
|
|
Loading…
Reference in a new issue