feat(autopay): add ability to edit autopay entries

resolve LN-Zap#1777
korhaliv · Mar 27, 2019 · b9ea17b · b9ea17b
1 parent 6cead37
commit b9ea17b
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 48 deletions.
diff --git a/renderer/components/Autopay/AutopayCreateForm.js b/renderer/components/Autopay/AutopayCreateForm.js
@@ -18,46 +18,72 @@ const Container = styled(animated.div)`
   width: 100%;
 `
 
+function getButtonText(isActive, isEditMode) {
+  if (isEditMode) {
+    return messages.edit_button_text
+  }
+
+  return isActive ? messages.close_button_text : messages.add_button_text
+}
+
 const AutopayCreateForm = props => {
   const {
     merchantNickname,
     merchantName,
     pubkey,
     isActive,
+    limit,
     merchantLogo,
+    onRemoveAutopay,
     onCreateAutopay,
     onClose,
     showError,
     intl,
+    isEditMode,
     showNotification,
     ...rest
   } = props
-  const isEditMode = true
   const onSubmit = async values => {
     try {
-      const { limit } = values
-      await onCreateAutopay(pubkey, parseFloat(limit))
-      const message = intl.formatMessage({ ...messages.add_success })
-      showNotification(message)
+      if (isEditMode) {
+        const { limit, isEnabled } = values
+        if (isEnabled) {
+          await onCreateAutopay(pubkey, parseFloat(limit))
+          const message = intl.formatMessage({ ...messages.save_success })
+          onClose()
+          showNotification(message)
+        } else {
+          onRemoveAutopay(pubkey)
+          const message = intl.formatMessage({ ...messages.remove_success })
+          onClose()
+          showNotification(message)
+        }
+      } else {
+        const { limit } = values
+        await onCreateAutopay(pubkey, parseFloat(limit))
+        const message = intl.formatMessage({ ...messages.add_success })
+        showNotification(message)
+      }
     } catch (e) {
       const message = intl.formatMessage({ ...messages.add_error })
       showError(message)
     }
   }
 
+  // new autopay entry has just been added
+  const isNewItemAdded = isActive && !isEditMode
   const hide = { opacity: 0 }
   const show = { opacity: 1 }
+
   return (
     <Form {...rest} onSubmit={onSubmit}>
       {({ formState }) => {
-        const { limit = min } = formState.values
         const back = <AutopayCreateSuccess merchantLogo={merchantLogo} />
         const front = (
           <AutopayCreateSettings
-            defaultValue={defaultValue}
-            editMode
+            defaultValue={limit || defaultValue}
             isEditMode={isEditMode}
-            limit={limit}
+            limit={formState.values.limit}
             max={max}
             merchantName={merchantName}
             min={min}
@@ -67,7 +93,6 @@ const AutopayCreateForm = props => {
 
         /* eslint-disable  react/display-name */
         /* eslint-disable   react/prop-types */
-
         const renderFlipper = isActive => ({ opacity }) => (
           <Container
             style={{
@@ -78,7 +103,7 @@ const AutopayCreateForm = props => {
               }),
             }}
           >
-            {isActive ? back : front}
+            {isNewItemAdded ? back : front}
           </Container>
         )
         /* eslint-disable */
@@ -93,7 +118,7 @@ const AutopayCreateForm = props => {
               </Heading.h1>
               <Bar my={2} />
             </Panel.Header>
-            <Panel.Body css={{ height: editMode ? '250px' : '195px' }}>
+            <Panel.Body css={{ height: isEditMode ? '250px' : '195px' }}>
               <Spring
                 native
                 to={{
@@ -120,13 +145,11 @@ const AutopayCreateForm = props => {
             <Panel.Footer mt={3}>
               <Flex justifyContent="center">
                 <Button
-                  onClick={() => isActive && onClose()}
-                  type={isActive ? 'button' : 'submit'}
+                  onClick={() => isNewItemAdded && onClose()}
+                  type={isNewItemAdded ? 'button' : 'submit'}
                   variant="primary"
                 >
-                  <FormattedMessage
-                    {...(isActive ? messages.close_button_text : messages.add_button_text)}
-                  />
+                  <FormattedMessage {...getButtonText(isActive, isEditMode)} />
                 </Button>
               </Flex>
             </Panel.Footer>
@@ -139,11 +162,14 @@ const AutopayCreateForm = props => {
 
 AutopayCreateForm.propTypes = {
   isActive: PropTypes.bool.isRequired,
+  isEditMode: PropTypes.bool.isRequired,
+  limit: PropTypes.string.isRequired,
   merchantLogo: PropTypes.string.isRequired,
   merchantName: PropTypes.string.isRequired,
   merchantNickname: PropTypes.string.isRequired,
   showNotification: PropTypes.func.isRequired,
   showError: PropTypes.func.isRequired,
+  onRemoveAutopay: PropTypes.func.isRequired,
   intl: intlShape.isRequired,
   onClose: PropTypes.func.isRequired,
   onCreateAutopay: PropTypes.func.isRequired,

diff --git a/renderer/components/Autopay/AutopayCreateModal.js b/renderer/components/Autopay/AutopayCreateModal.js
@@ -8,8 +8,10 @@ import AutopayModalBody from './AutopayModalBody'
 const AutopayCreateModal = ({
   selectedMerchant,
   onClose,
+  isEditMode,
   onCreateAutopay,
   showError,
+  onRemoveAutopay,
   showNotification,
 }) => {
   const isOpen = Boolean(selectedMerchant)
@@ -18,18 +20,20 @@ const AutopayCreateModal = ({
   if (!isOpen) {
     return null
   }
-  const { nickname, pubkey, image, isActive } = selectedMerchant
-
+  const { nickname, pubkey, image, isActive, limit } = selectedMerchant
   return (
     <DialogOverlay alignItems="center" justifyContent="center">
       <AutopayModalBody onClose={onClose}>
         <AutopayCreateForm
           isActive={isActive}
+          isEditMode={isEditMode}
+          limit={limit}
           merchantLogo={image}
           merchantName={nickname}
           merchantNickname={nickname}
           onClose={onClose}
           onCreateAutopay={onCreateAutopay}
+          onRemoveAutopay={onRemoveAutopay}
           pubkey={pubkey}
           showError={showError}
           showNotification={showNotification}
@@ -40,8 +44,10 @@ const AutopayCreateModal = ({
 }
 
 AutopayCreateModal.propTypes = {
+  isEditMode: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
   onCreateAutopay: PropTypes.func.isRequired,
+  onRemoveAutopay: PropTypes.func.isRequired,
   selectedMerchant: PropTypes.object,
   showError: PropTypes.func.isRequired,
   showNotification: PropTypes.func.isRequired,

diff --git a/renderer/components/Autopay/AutopayCreateSettings.js b/renderer/components/Autopay/AutopayCreateSettings.js
@@ -20,25 +20,28 @@ const AutopayCreateSettings = ({
   min,
   max,
   intl,
-  defaultValue,
   limit,
+  defaultValue,
   merchantName,
   pubkey,
   isEditMode,
 }) => (
   <SettingsContainer>
     {isEditMode && (
-      <DataRow
-        left={intl.formatMessage({ ...messages.autopay_status })}
-        right={
-          <Flex>
-            <Toggle field="isEnabled" id="isEnabled" />
-            <AutopayStatus ml={2} />
-          </Flex>
-        }
-      />
+      <>
+        <DataRow
+          left={intl.formatMessage({ ...messages.autopay_status })}
+          right={
+            <Flex>
+              <Toggle field="isEnabled" id="isEnabled" initialValue />
+              <AutopayStatus ml={2} />
+            </Flex>
+          }
+        />
+        <Bar variant="light" />
+      </>
     )}
-    <Bar variant="light" />
+
     <DataRow
       left={
         <>
@@ -60,12 +63,12 @@ const AutopayCreateSettings = ({
       right={
         <Flex alignItems="flex-end" flexDirection="column" ml={4}>
           <Flex alignItems="baseline">
-            <CryptoValue fontSize="xxl" value={limit} />
+            <CryptoValue fontSize="xxl" value={limit || defaultValue} />
             <CryptoSelector ml={2} />
           </Flex>
           <Flex alignItems="baseline">
             <Text color="gray">=</Text>
-            <FiatValue color="gray" style="currency" value={limit} />
+            <FiatValue color="gray" style="currency" value={limit || defaultValue} />
           </Flex>
         </Flex>
       }

diff --git a/renderer/containers/Autopay/AutopayCreateModal.js b/renderer/containers/Autopay/AutopayCreateModal.js
@@ -1,14 +1,18 @@
 import { connect } from 'react-redux'
 import AutopayCreateModal from 'components/Autopay/AutopayCreateModal'
-import { closeAutopayCreateModal, autopaySelectors, enableAutopay } from 'reducers/autopay'
+import {
+  closeAutopayCreateModal,
+  autopaySelectors,
+  enableAutopay,
+  disableAutopay,
+} from 'reducers/autopay'
 import { showNotification, showError } from 'reducers/notification'
 
-const mapStateToProps = state => {
-  const selectedMerchant = autopaySelectors.selectedMerchant(state)
-  return {
-    selectedMerchant,
-  }
-}
+const mapStateToProps = state => ({
+  selectedMerchant: autopaySelectors.selectedMerchant(state),
+  isEditMode: autopaySelectors.isCreateModalEditMode(state),
+})
+
 const mapDispatchToProps = dispatch => ({
   onClose() {
     dispatch(closeAutopayCreateModal())
@@ -18,6 +22,10 @@ const mapDispatchToProps = dispatch => ({
     dispatch(enableAutopay(pubkey, limit))
   },
 
+  onRemoveAutopay(pubkey) {
+    dispatch(disableAutopay(pubkey))
+  },
+
   showNotification(...args) {
     dispatch(showNotification(...args))
   },

diff --git a/renderer/containers/Autopay/AutopayList.js b/renderer/containers/Autopay/AutopayList.js
@@ -6,8 +6,12 @@ const mapStateToProps = state => ({
   merchants: autopaySelectors.autopayListAsArray(state),
 })
 
-const mapDispatchToProps = {
-  openAutopayCreateModal,
+const mapDispatchToProps = dispatch => {
+  return {
+    openAutopayCreateModal(merchantId) {
+      dispatch(openAutopayCreateModal(merchantId, true))
+    },
+  }
 }
 
 export default connect(