From aa6eb536a82f6fa7c21611474be7a8e751ca834a Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Tue, 19 May 2020 09:42:24 +0200 Subject: [PATCH] fix(ui): pay form next button disabled state fix #3176 --- renderer/components/Pay/PayPanelFooter.js | 32 ++++++++++++++++------- 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/renderer/components/Pay/PayPanelFooter.js b/renderer/components/Pay/PayPanelFooter.js index fad8e7a281a..e59481641b9 100644 --- a/renderer/components/Pay/PayPanelFooter.js +++ b/renderer/components/Pay/PayPanelFooter.js @@ -1,10 +1,11 @@ -import React from 'react' +import React, { useRef } from 'react' import PropTypes from 'prop-types' import { Flex } from 'rebass/styled-components' import { FormattedMessage, injectIntl } from 'react-intl' import { CoinBig } from '@zap/utils/coin' import { intlShape } from '@zap/i18n' import { convert } from '@zap/utils/btc' +import { usePrevious } from 'hooks' import { CryptoValue } from 'containers/UI' import { Message, Text } from 'components/UI' import messages from './messages' @@ -103,10 +104,28 @@ const PayPanelFooter = props => { ) } + const prevStep = usePrevious(currentStep) + const isChangedStep = prevStep && currentStep !== prevStep + const isPaymentTypeSet = paymentType !== PAYMENT_TYPES.none + const isAddressStep = currentStep === PAY_FORM_STEPS.address + + const hadPaymentTypeRef = useRef(isPaymentTypeSet) + if (isPaymentTypeSet) { + hadPaymentTypeRef.current = true + } + const hadPaymentType = hadPaymentTypeRef.current + // Determine which buttons should be visible. const hasBackButton = currentStep !== PAY_FORM_STEPS.address - const isPaymentTypeSet = paymentType !== PAYMENT_TYPES.none - const hasSubmitButton = currentStep !== PAY_FORM_STEPS.address || isPaymentTypeSet + const hasSubmitButton = hadPaymentType || isPaymentTypeSet || isChangedStep || !isAddressStep + + // Determine wether the submit button should be disabled. + const willValidateInvalid = !isAddressStep || (isAddressStep && !isPaymentTypeSet) + const isDisabled = + formState.pristine || + isProcessing || + (currentStep === PAY_FORM_STEPS.summary && !hasEnoughFunds) || + (willValidateInvalid && formState.invalid) return ( @@ -114,12 +133,7 @@ const PayPanelFooter = props => {