refactor: hide hold invoices ui behind feature flag

renderer/components/Activity/ActivityModal/ActivityModal.js

@@ -9,6 +9,7 @@ export default class ActivityModal extends React.PureComponent {
   static propTypes = {
     cancelInvoice: PropTypes.func.isRequired,
     clearSettleInvoiceError: PropTypes.func.isRequired,
+    isHoldInvoiceEnabled: PropTypes.bool,
     isInvoiceCancelling: PropTypes.bool,
     isInvoiceSettling: PropTypes.bool,
     item: PropTypes.object,
@@ -26,6 +27,7 @@ export default class ActivityModal extends React.PureComponent {
     const {
       cancelInvoice,
       clearSettleInvoiceError,
+      isHoldInvoiceEnabled,
       isInvoiceCancelling,
       isInvoiceSettling,
       item,
@@ -59,6 +61,7 @@ export default class ActivityModal extends React.PureComponent {
           clearSettleInvoiceError,
           settleInvoice,
           settleInvoiceError,
+          isHoldInvoiceEnabled,
           isInvoiceCancelling,
           isInvoiceSettling,
         },

renderer/components/Activity/InvoiceModal/InvoiceModal.js

@@ -9,6 +9,7 @@ import messages from './messages'
 const InvoiceModal = ({
   cancelInvoice,
   clearSettleInvoiceError,
+  isHoldInvoiceEnabled,
   isInvoiceCancelling,
   isInvoiceSettling,
   item,
@@ -34,6 +35,7 @@ const InvoiceModal = ({
         cancelInvoice={cancelInvoice}
         clearSettleInvoiceError={clearSettleInvoiceError}
         invoice={item}
+        isHoldInvoiceEnabled={isHoldInvoiceEnabled}
         isInvoiceCancelling={isInvoiceCancelling}
         isInvoiceSettling={isInvoiceSettling}
         settleInvoice={settleInvoice}
@@ -47,6 +49,7 @@ const InvoiceModal = ({
 InvoiceModal.propTypes = {
   cancelInvoice: PropTypes.func.isRequired,
   clearSettleInvoiceError: PropTypes.func.isRequired,
+  isHoldInvoiceEnabled: PropTypes.bool,
   isInvoiceCancelling: PropTypes.bool,
   isInvoiceSettling: PropTypes.bool,
   item: PropTypes.object.isRequired,

renderer/components/Request/RequestSummary.js

@@ -28,6 +28,7 @@ const RequestSummary = ({
   settleInvoiceError,
   invoice = {},
   showNotification,
+  isHoldInvoiceEnabled,
   isInvoiceCancelling,
   isInvoiceSettling,
   ...rest
@@ -171,13 +172,13 @@ const RequestSummary = ({
       <DataRow
         left={
           <>
-            <Text mb={2}>
+            <Text>
               <FormattedMessage {...messages.status} />
             </Text>
-            {!isNowExpired && ['OPEN', 'ACCEPTED'].includes(state) && (
-              <Flex alignItems="center" mr={2}>
+            {!isNowExpired && ['OPEN', 'ACCEPTED'].includes(state) && isHoldInvoiceEnabled && (
+              <Flex alignItems="center" mr={2} mt={2}>
                 <Button
-                  isDisabled={Boolean(isInvoiceCancelling || isInvoiceSettling)}
+                  isDisabled={isInvoiceCancelling || isInvoiceSettling}
                   mr={2}
                   onClick={() => cancelInvoice(invoice.rHash)}
                   size="small"
@@ -186,7 +187,7 @@ const RequestSummary = ({
                 </Button>
                 {isHoldInvoice && (
                   <Button
-                    isDisabled={Boolean(isInvoiceCancelling || isInvoiceSettling)}
+                    isDisabled={state !== 'ACCEPTED' || isInvoiceCancelling || isInvoiceSettling}
                     onClick={() => setIsSettleDialogOpen(true)}
                     size="small"
                   >
@@ -242,6 +243,7 @@ RequestSummary.propTypes = {
   cancelInvoice: PropTypes.func.isRequired,
   clearSettleInvoiceError: PropTypes.func.isRequired,
   invoice: PropTypes.object.isRequired,
+  isHoldInvoiceEnabled: PropTypes.bool,
   isInvoiceCancelling: PropTypes.bool,
   isInvoiceSettling: PropTypes.bool,
   settleInvoice: PropTypes.func.isRequired,

renderer/containers/Activity/ActivityModal.js

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux'
+import { isHoldInvoiceEnabled } from '@zap/utils/featureFlag'
 import { hideActivityModal, activitySelectors, saveInvoice } from 'reducers/activity'
 import {
   cancelInvoice,
@@ -11,6 +12,7 @@ import { showNotification } from 'reducers/notification'
 import { ActivityModal } from 'components/Activity/ActivityModal'
 
 const mapStateToProps = state => ({
+  isHoldInvoiceEnabled: isHoldInvoiceEnabled() && infoSelectors.hasInvoicesSupport(state),
   isInvoiceCancelling: invoiceSelectors.isInvoiceCancelling(state),
   isInvoiceSettling: invoiceSelectors.isInvoiceSettling(state),
   item: activitySelectors.activityModalItem(state),

renderer/containers/Request.js

@@ -18,7 +18,7 @@ const mapStateToProps = state => ({
   cryptoUnit: tickerSelectors.cryptoUnit(state),
   cryptoUnitName: tickerSelectors.cryptoUnitName(state),
   isProcessing: invoiceSelectors.isInvoiceCreating(state),
-  isHoldInvoiceEnabled: isHoldInvoiceEnabled(),
+  isHoldInvoiceEnabled: isHoldInvoiceEnabled() && infoSelectors.hasInvoicesSupport(state),
   maxOneTimeReceive: channelsSelectors.maxOneTimeReceive(state),
   willUseFallback: settingsSelectors.currentConfig(state).invoices.useAddressFallback,
 })

renderer/reducers/info/selectors.js

@@ -123,10 +123,22 @@ const commitString = createSelector(version, v => {
   return c ? c.replace('commit=', '') : undefined
 })
 
+/**
+ * hasRouterSupport - Check whether node has support for Invoices service
+ *
+ * @returns {boolean} Boolean indicating if node has Invoices service
+ */
+const hasInvoicesSupport = createSelector(grpcProtoVersion, v => {
+  if (!v) {
+    return false
+  }
+  return semver.gte(v, '0.6.0-beta', { includePrerelease: true })
+})
+
 /**
  * hasRouterSupport - Check whether node has support for Router service
  *
- * @returns {boolean} Boolean indicating if node has router service
+ * @returns {boolean} Boolean indicating if node has Router service
  */
 const hasRouterSupport = createSelector(grpcProtoVersion, v => {
   if (!v) {
@@ -219,6 +231,7 @@ export default {
   grpcProtoVersion,
   versionString,
   commitString,
+  hasInvoicesSupport,
   hasRouterSupport,
   hasSendPaymentV2Support,
   hasMppSupport,