Fix pay form submit button disabled state

renderer/components/Pay/PayPanelFooter.js

@@ -1,10 +1,10 @@
-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 { FormattedMessage, useIntl } 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'
@@ -55,71 +55,104 @@ const getNextButtonText = (formState, props) => {
   return nextButtonText
 }
 
+const LiquidityWarning = ({
+  maxOneTimeSend,
+  cryptoUnit,
+  amountInSats,
+  isNotEnoughFunds,
+  paymentType,
+}) => {
+  const { formatNumber } = useIntl()
+  const isBolt11 = paymentType === PAYMENT_TYPES.bolt11
+  const isPubkey = paymentType === PAYMENT_TYPES.pubkey
+  const isAboveMax = (isBolt11 || isPubkey) && CoinBig(amountInSats).gt(maxOneTimeSend)
+  const formattedMax = formatNumber(convert('sats', cryptoUnit, maxOneTimeSend), {
+    maximumFractionDigits: 8,
+  })
+  return (
+    <Flex alignItems="center" flexDirection="column">
+      {isNotEnoughFunds ? (
+        <Message mb={2} variant="error">
+          <FormattedMessage {...messages.error_not_enough_funds} />
+        </Message>
+      ) : (
+        isAboveMax && (
+          <Message justifyContent="center" mb={2} variant="warning">
+            <FormattedMessage
+              {...messages.error_not_onetime_send_capacity}
+              values={{ capacity: formattedMax, unit: cryptoUnit }}
+            />
+          </Message>
+        )
+      )}
+    </Flex>
+  )
+}
+
+LiquidityWarning.propTypes = {
+  amountInSats: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  cryptoUnit: PropTypes.string.isRequired,
+  isNotEnoughFunds: PropTypes.bool,
+  maxOneTimeSend: PropTypes.string.isRequired,
+  paymentType: PropTypes.oneOf(Object.values(PAYMENT_TYPES)).isRequired,
+}
+
 const PayPanelFooter = props => {
   const hasEnoughFunds = isEnoughFunds(props)
   const {
+    amountInSats,
     channelBalance,
+    cryptoUnit,
     cryptoUnitName,
     currentStep,
     formState,
     isProcessing,
+    maxOneTimeSend,
     paymentType,
     previousStep,
     walletBalanceConfirmed,
-    intl,
   } = props
 
-  const renderLiquidityWarning = props => {
-    const { currentStep, maxOneTimeSend, cryptoUnit, amountInSats } = props
-
-    if (currentStep !== PAY_FORM_STEPS.summary) {
-      return null
-    }
+  const prevStep = usePrevious(currentStep)
+  const isChangedStep = prevStep && currentStep !== prevStep
+  const isPaymentTypeSet = paymentType !== PAYMENT_TYPES.none
+  const isAddressStep = currentStep === PAY_FORM_STEPS.address
+  const isSummaryStep = currentStep === PAY_FORM_STEPS.summary
 
-    const isBolt11 = paymentType === PAYMENT_TYPES.bolt11
-    const isPubkey = paymentType === PAYMENT_TYPES.pubkey
-    const isNotEnoughFunds = !isEnoughFunds(props)
-    const isAboveMax = (isBolt11 || isPubkey) && CoinBig(amountInSats).gt(maxOneTimeSend)
-    const formattedMax = intl.formatNumber(convert('sats', cryptoUnit, maxOneTimeSend), {
-      maximumFractionDigits: 8,
-    })
-    return (
-      <Flex alignItems="center" flexDirection="column">
-        {isNotEnoughFunds ? (
-          <Message mb={2} variant="error">
-            <FormattedMessage {...messages.error_not_enough_funds} />
-          </Message>
-        ) : (
-          isAboveMax && (
-            <Message justifyContent="center" mb={2} variant="warning">
-              <FormattedMessage
-                {...messages.error_not_onetime_send_capacity}
-                values={{ capacity: formattedMax, unit: cryptoUnit }}
-              />
-            </Message>
-          )
-        )}
-      </Flex>
-    )
+  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 (
     <Flex flexDirection="column">
-      {renderLiquidityWarning(props)}
+      {!isSummaryStep && (
+        <LiquidityWarning
+          amountInSats={amountInSats}
+          cryptoUnit={cryptoUnit}
+          isNotEnoughFunds={!isEnoughFunds(props)}
+          maxOneTimeSend={maxOneTimeSend}
+          paymentType={paymentType}
+        />
+      )}
+
       <PayButtons
         hasBackButton={hasBackButton}
         hasSubmitButton={hasSubmitButton}
-        isDisabled={
-          formState.pristine ||
-          formState.invalid ||
-          isProcessing ||
-          (currentStep === PAY_FORM_STEPS.summary && !hasEnoughFunds)
-        }
+        isDisabled={isDisabled}
         isProcessing={isProcessing}
         nextButtonText={getNextButtonText(formState, props)}
         previousStep={previousStep}
@@ -161,7 +194,6 @@ PayPanelFooter.propTypes = {
   cryptoUnitName: PropTypes.string.isRequired,
   currentStep: PropTypes.string.isRequired,
   formState: PropTypes.object.isRequired,
-  intl: intlShape.isRequired,
   invoice: PropTypes.object,
   isProcessing: PropTypes.bool,
   maxOneTimeSend: PropTypes.string.isRequired,
@@ -170,4 +202,4 @@ PayPanelFooter.propTypes = {
   walletBalanceConfirmed: PropTypes.string.isRequired,
 }
 
-export default injectIntl(PayPanelFooter)
+export default PayPanelFooter

test/unit/components/Pay/__snapshots__/PayPanelFooter.spec.js.snap

@@ -1,13 +1,142 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`component.Pay.PayPanelFooter current step is "address" should render correctly 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
+<Styled(styled.div)
+  flexDirection="column"
+>
+  <LiquidityWarning
+    amountInSats={1}
+    isNotEnoughFunds={false}
+  />
+  <PayButtons
+    hasBackButton={false}
+    hasSubmitButton={true}
+    isDisabled={false}
+    nextButtonText={
+      <FormattedMessage
+        defaultMessage="Next"
+        id="components.Pay.next"
+        values={Object {}}
+      />
+    }
+    previousStep={[Function]}
+  />
+  <Text
+    fontWeight="normal"
+    mt={3}
+    textAlign="center"
+  >
+    <FormattedMessage
+      defaultMessage="Your current confirmed balance:"
+      id="components.Pay.current_balance"
+      values={Object {}}
+    />
+  </Text>
+  <Text
+    fontSize="xs"
+    textAlign="center"
+  >
+    <FormattedMessage
+      defaultMessage="{amount} {cryptoUnitName} (onchain)"
+      id="components.Pay.onchain_balance"
+      values={
+        Object {
+          "amount": <CryptoValue
+            value={1}
+          />,
+          "cryptoUnitName": "sats",
+        }
+      }
+    />
+  </Text>
+  <Text
+    fontSize="xs"
+    textAlign="center"
+  >
+    <FormattedMessage
+      defaultMessage="{amount} {cryptoUnitName} (in channels)"
+      id="components.Pay.lightning_balance"
+      values={
+        Object {
+          "amount": <CryptoValue
+            value={1}
+          />,
+          "cryptoUnitName": "sats",
+        }
+      }
+    />
+  </Text>
+</Styled(styled.div)>
 `;
 
 exports[`component.Pay.PayPanelFooter current step is "summary" should render correctly 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
+<Styled(styled.div)
+  flexDirection="column"
+>
+  <PayButtons
+    hasBackButton={true}
+    hasSubmitButton={true}
+    nextButtonText={
+      <React.Fragment>
+        <FormattedMessage
+          defaultMessage="Send"
+          id="components.Pay.send"
+          values={Object {}}
+        />
+
+        <CryptoValue
+          value={1}
+        />
+
+        sats
+      </React.Fragment>
+    }
+    previousStep={[Function]}
+  />
+  <Text
+    fontWeight="normal"
+    mt={3}
+    textAlign="center"
+  >
+    <FormattedMessage
+      defaultMessage="Your current confirmed balance:"
+      id="components.Pay.current_balance"
+      values={Object {}}
+    />
+  </Text>
+  <Text
+    fontSize="xs"
+    textAlign="center"
+  >
+    <FormattedMessage
+      defaultMessage="{amount} {cryptoUnitName} (onchain)"
+      id="components.Pay.onchain_balance"
+      values={
+        Object {
+          "amount": <CryptoValue
+            value={1}
+          />,
+          "cryptoUnitName": "sats",
+        }
+      }
+    />
+  </Text>
+  <Text
+    fontSize="xs"
+    textAlign="center"
+  >
+    <FormattedMessage
+      defaultMessage="{amount} {cryptoUnitName} (in channels)"
+      id="components.Pay.lightning_balance"
+      values={
+        Object {
+          "amount": <CryptoValue
+            value={1}
+          />,
+          "cryptoUnitName": "sats",
+        }
+      }
+    />
+  </Text>
+</Styled(styled.div)>
 `;