refactor(autopay): add edit mode to settings form

LN-Zap · Apr 2, 2019 · f8809c5 · f8809c5
1 parent 0a5c696
commit f8809c5
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/renderer/components/Autopay/AutopayCreateForm.js b/renderer/components/Autopay/AutopayCreateForm.js
@@ -32,7 +32,7 @@ const AutopayCreateForm = props => {
     showNotification,
     ...rest
   } = props
-
+  const isEditMode = true
   const onSubmit = async values => {
     try {
       const { limit } = values
@@ -55,6 +55,8 @@ const AutopayCreateForm = props => {
         const front = (
           <AutopayCreateSettings
             defaultValue={defaultValue}
+            editMode
+            isEditMode={isEditMode}
             limit={limit}
             max={max}
             merchantName={merchantName}
@@ -91,7 +93,7 @@ const AutopayCreateForm = props => {
               </Heading.h1>
               <Bar my={2} />
             </Panel.Header>
-            <Panel.Body css={{ height: '195px' }}>
+            <Panel.Body css={{ height: editMode ? '250px' : '195px' }}>
               <Spring
                 native
                 to={{

diff --git a/renderer/components/Autopay/AutopayCreateSettings.js b/renderer/components/Autopay/AutopayCreateSettings.js
@@ -1,21 +1,44 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+
 import styled from 'styled-components'
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl'
 import { Flex } from 'rebass'
 
 import { CryptoValue, CryptoSelector, FiatValue } from 'containers/UI'
-import { Bar, DataRow, Range, Text } from 'components/UI'
+import { Bar, DataRow, Range, Text, Toggle } from 'components/UI'
 import { Truncate } from 'components/Util'
 import messages from './messages'
+import AutopayStatus from './AutopayStatus'
 
 const SettingsContainer = styled.div`
   position: relative;
   left: -50%;
 `
 
-const AutopayCreateSettings = ({ min, max, intl, defaultValue, limit, merchantName, pubkey }) => (
+const AutopayCreateSettings = ({
+  min,
+  max,
+  intl,
+  defaultValue,
+  limit,
+  merchantName,
+  pubkey,
+  isEditMode,
+}) => (
   <SettingsContainer>
+    {isEditMode && (
+      <DataRow
+        left={intl.formatMessage({ ...messages.autopay_status })}
+        right={
+          <Flex>
+            <Toggle field="isEnabled" id="isEnabled" />
+            <AutopayStatus ml={2} />
+          </Flex>
+        }
+      />
+    )}
+    <Bar variant="light" />
     <DataRow
       left={
         <>
@@ -61,6 +84,7 @@ const AutopayCreateSettings = ({ min, max, intl, defaultValue, limit, merchantNa
 AutopayCreateSettings.propTypes = {
   defaultValue: PropTypes.string.isRequired,
   intl: intlShape.isRequired,
+  isEditMode: PropTypes.bool.isRequired,
   limit: PropTypes.string.isRequired,
   max: PropTypes.string.isRequired,
   merchantName: PropTypes.string.isRequired,

diff --git a/renderer/components/Autopay/AutopayStatus.js b/renderer/components/Autopay/AutopayStatus.js
@@ -6,8 +6,8 @@ import { FormattedMessage, injectIntl } from 'react-intl'
 import { Text } from 'components/UI'
 import messages from './messages'
 
-const AutopayStatus = ({ fieldState }) => (
-  <Text>
+const AutopayStatus = ({ fieldState, ...rest }) => (
+  <Text {...rest}>
     {
       <FormattedMessage
         {...(fieldState && fieldState.value