import React from 'react'

export default class GiftAidButton extends React.Component {
  constructor (props) {
    super (props)
    this.state = { confirmation: false }
  }

  cancel () {
    this.props.update_member_user(
      { gift_aid_cancelled: true
      , date_gift_aid_cancelled: new Date().toISOString()
      , gift_aid_signed: false
      , date_gift_aid_signed: null
      }
    )
  }

  attempt_cancel () {
    this.setState({ confirmation: true })
  }

  reset () {
    this.setState({ confirmation: false })
  }

  which_cancel () {
    return this.state.confirmation ? this.cancel.bind(this) : this.attempt_cancel.bind(this)
  }

  which_text () {
    return this.state.confirmation ? 'Confirm' : 'Cancel Gift Aid'
  }

  render () {
    return (
      <div>
        <p><b>Would you like to revoke your Gift Aid declaration?</b></p>
        <button onClick={this.which_cancel()} className={this.state.confirmation ? 'red' : ''}>
          {this.which_text()}
        </button>
        {this.state.confirmation && <button onClick={this.reset.bind(this)} className='green' >Keep Gift Aid</button>}
      </div>
    )
  }
}

import React from 'react'

export default class GiftAidButton extends React.Component {
  constructor (props) {
    super (props)
    this.state = { confirmation: false }
  }

  cancel () {
    this.props.update_member_user({ gift_aid_signed: false, gift_aid_cancelled: true })
  }

  attempt_cancel () {
    this.setState({ confirmation: true })
  }

  reset () {
    this.setState({ confirmation: false })
  }

  which_cancel () {
    return this.state.confirmation ? this.cancel.bind(this) : this.attempt_cancel.bind(this)
  }

  which_text () {
    return this.state.confirmation ? 'Confirm' : 'Cancel Gift Aid'
  }

  render () {
    return (
      <div>
        <p><b>Would you like to cancel your Gift Aid?</b></p>
        <button onClick={this.which_cancel()} className={this.state.confirmation ? 'red' : ''}>
          {this.which_text()}
        </button>
        {this.state.confirmation && <button onClick={this.reset.bind(this)} className='green' >Keep Gift Aid</button>}
      </div>
    )
  }
}

--- 
+++ 
@@ -7,7 +7,13 @@
   }
 
   cancel () {
-    this.props.update_member_user({ gift_aid_signed: false, gift_aid_cancelled: true })
+    this.props.update_member_user(
+      { gift_aid_cancelled: true
+      , date_gift_aid_cancelled: new Date().toISOString()
+      , gift_aid_signed: false
+      , date_gift_aid_signed: null
+      }
+    )
   }
 
   attempt_cancel () {
@@ -29,7 +35,7 @@
   render () {
     return (
       <div>
-        <p><b>Would you like to cancel your Gift Aid?</b></p>
+        <p><b>Would you like to revoke your Gift Aid declaration?</b></p>
         <button onClick={this.which_cancel()} className={this.state.confirmation ? 'red' : ''}>
           {this.which_text()}
         </button>
Make accompanying changes to DB when cancelling Gift Aid declaration.
