Converts AutofillCreditCardPanel into redux component

Resolves #9445

Auditors: @bsclifton @bridiver

Test Plan:

app/autofill.js

@@ -32,13 +32,13 @@ module.exports.removeAutofillAddress = (guid) => {
   session.defaultSession.autofill.removeProfile(guid)
 }
 
-module.exports.addAutofillCreditCard = (detail, guid) => {
+module.exports.addAutofillCreditCard = (detail) => {
   session.defaultSession.autofill.addCreditCard({
-    name: detail.name,
-    card_number: detail.card,
-    expiration_month: detail.month,
-    expiration_year: detail.year,
-    guid: guid
+    name: detail.get('name'),
+    card_number: detail.get('card'),
+    expiration_month: detail.get('month'),
+    expiration_year: detail.get('year'),
+    guid: detail.get('guid')
   })
 }
 

app/renderer/components/autofill/autofillCreditCardPanel.js

@@ -3,17 +3,13 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const ImmutableComponent = require('../immutableComponent')
-const Dialog = require('../common/dialog')
-const Button = require('../common/button')
-const windowActions = require('../../../../js/actions/windowActions')
-const appActions = require('../../../../js/actions/appActions')
-const KeyCodes = require('../../../common/constants/keyCodes')
-
+const Immutable = require('immutable')
 const {StyleSheet, css} = require('aphrodite/no-important')
-const commonStyles = require('../styles/commonStyles')
-const globalStyles = require('../styles/global')
 
+// Component
+const ReduxComponent = require('../reduxComponent')
+const Dialog = require('../common/dialog')
+const Button = require('../common/button')
 const {
   CommonForm,
   CommonFormSection,
@@ -24,81 +20,113 @@ const {
   commonFormStyles
 } = require('../common/commonForm')
 
-class AutofillCreditCardPanel extends ImmutableComponent {
-  constructor () {
-    super()
-    this.onNameChange = this.onNameChange.bind(this)
-    this.onCardChange = this.onCardChange.bind(this)
-    this.onExpMonthChange = this.onExpMonthChange.bind(this)
-    this.onExpYearChange = this.onExpYearChange.bind(this)
+// Actions
+const windowActions = require('../../../../js/actions/windowActions')
+const appActions = require('../../../../js/actions/appActions')
+
+// Constants
+const KeyCodes = require('../../../common/constants/keyCodes')
+
+// Styles
+const commonStyles = require('../styles/commonStyles')
+const globalStyles = require('../styles/global')
+
+class AutofillCreditCardPanel extends React.Component {
+  constructor (props) {
+    super(props)
     this.onKeyDown = this.onKeyDown.bind(this)
     this.onSave = this.onSave.bind(this)
-    this.onClick = this.onClick.bind(this)
   }
+
   onNameChange (e) {
-    let currentDetail = this.props.currentDetail
-    currentDetail = currentDetail.set('name', e.target.value)
-    if (this.nameOnCard.value !== e.target.value) {
-      this.nameOnCard.value = e.target.value
-    }
-    windowActions.setAutofillCreditCardDetail(currentDetail, this.props.originalDetail)
+    windowActions.setAutofillCreditCardDetail('name', e.target.value)
   }
+
   onCardChange (e) {
-    let currentDetail = this.props.currentDetail
-    currentDetail = currentDetail.set('card', e.target.value)
-    windowActions.setAutofillCreditCardDetail(currentDetail, this.props.originalDetail)
+    windowActions.setAutofillCreditCardDetail('card', e.target.value)
   }
+
   onExpMonthChange (e) {
-    let currentDetail = this.props.currentDetail
-    currentDetail = currentDetail.set('month', e.target.value)
-    windowActions.setAutofillCreditCardDetail(currentDetail, this.props.originalDetail)
+    windowActions.setAutofillCreditCardDetail('month', e.target.value)
   }
+
   onExpYearChange (e) {
-    let currentDetail = this.props.currentDetail
-    currentDetail = currentDetail.set('year', e.target.value)
-    windowActions.setAutofillCreditCardDetail(currentDetail, this.props.originalDetail)
+    windowActions.setAutofillCreditCardDetail('year', e.target.value)
   }
+
   onKeyDown (e) {
     switch (e.keyCode) {
       case KeyCodes.ENTER:
         this.onSave()
         break
       case KeyCodes.ESC:
-        this.props.onHide()
+        this.onHide()
         break
     }
   }
+
   onSave () {
-    appActions.addAutofillCreditCard(this.props.currentDetail, this.props.originalDetail)
-    this.props.onHide()
+    appActions.addAutofillCreditCard(Immutable.fromJS({
+      name: this.props.name,
+      card: this.props.card,
+      month: this.props.month,
+      year: this.props.year,
+      guid: this.props.guid
+    }))
+    this.onHide()
   }
+
   onClick (e) {
     e.stopPropagation()
   }
-  get disableSaveButton () {
-    let currentDetail = this.props.currentDetail
-    if (!currentDetail.size) return true
-    if (!currentDetail.get('name') && !currentDetail.get('card')) return true
-    return false
-  }
+
   componentDidMount () {
     this.nameOnCard.focus()
-    this.nameOnCard.value = this.props.currentDetail.get('name') || ''
   }
-  render () {
-    var ExpMonth = []
+
+  onHide () {
+    windowActions.setAutofillCreditCardDetail()
+  }
+
+  get expirationMonths () {
+    const expMonth = []
     for (let i = 1; i <= 12; ++i) {
       let mon = i < 10 ? '0' + i.toString() : i.toString()
-      ExpMonth.push(<option value={mon}>{mon}</option>)
+      expMonth.push(<option value={mon}>{mon}</option>)
     }
-    var ExpYear = []
-    var today = new Date()
-    var year = today.getFullYear()
+
+    return expMonth
+  }
+
+  get expirationYears () {
+    const expYear = []
+    const today = new Date()
+    const year = today.getFullYear()
     for (let i = year; i <= year + 9; ++i) {
-      ExpYear.push(<option value={i}>{i}</option>)
+      expYear.push(<option value={i}>{i}</option>)
     }
 
-    return <Dialog onHide={this.props.onHide} testId='autofillCreditCardPanel' isClickDismiss>
+    return expYear
+  }
+
+  mergeProps (state, ownProps) {
+    const currentWindow = state.get('currentWindow')
+    const detail = currentWindow.get('autofillCreditCardDetail', Immutable.Map())
+
+    const props = {}
+    props.name = detail.get('name', '')
+    props.card = detail.get('card', '')
+    props.month = detail.get('month')
+    props.year = detail.get('year')
+    props.guid = detail.get('guid', '-1')
+    props.disableSaveButton = detail.isEmpty() ||
+      (!detail.get('name') && !detail.get('card'))
+
+    return props
+  }
+
+  render () {
+    return <Dialog onHide={this.onHide} testId='autofillCreditCardPanel' isClickDismiss>
       <CommonForm onClick={this.onClick}>
         <CommonFormTitle
           data-test-id='manageAutofillDataTitle'
@@ -113,28 +141,30 @@ class AutofillCreditCardPanel extends ImmutableComponent {
             <div className={css(commonFormStyles.inputWrapper, commonFormStyles.inputWrapper__input)}>
               <div data-test-id='creditCardNameWrapper'>
                 <input className={css(
-                  commonStyles.formControl,
-                  commonStyles.textbox,
-                  commonStyles.textbox__outlineable,
-                  commonFormStyles.input__box,
-                  styles.input
-                )}
+                    commonStyles.formControl,
+                    commonStyles.textbox,
+                    commonStyles.textbox__outlineable,
+                    commonFormStyles.input__box,
+                    styles.input
+                  )}
+                  ref={(nameOnCard) => { this.nameOnCard = nameOnCard }}
+                  value={this.props.name}
+                  type='text'
                   data-test-id='creditCardName'
                   spellCheck='false'
                   onKeyDown={this.onKeyDown}
                   onChange={this.onNameChange}
-                  ref={(nameOnCard) => { this.nameOnCard = nameOnCard }}
                 />
               </div>
               <div data-test-id='creditCardNumberWrapper'
                 className={css(commonFormStyles.input__marginRow)
               }>
                 <CommonFormTextbox
+                  value={this.props.card}
                   data-test-id='creditCardNumber'
                   spellCheck='false'
                   onKeyDown={this.onKeyDown}
                   onChange={this.onCardChange}
-                  value={this.props.currentDetail.get('card')}
                 />
               </div>
             </div>
@@ -154,17 +184,19 @@ class AutofillCreditCardPanel extends ImmutableComponent {
               styles.expirationDate__dropdowns
             )}>
               <CommonFormDropdown
-                value={this.props.currentDetail.get('month')}
+                value={this.props.month}
                 onChange={this.onExpMonthChange}
-                data-test-id='expMonthSelect'>
-                {ExpMonth}
+                data-test-id='expMonthSelect'
+              >
+                {this.expirationMonths}
               </CommonFormDropdown>
               <div className={css(styles.dropdown__right)}>
                 <CommonFormDropdown
-                  value={this.props.currentDetail.get('year')}
+                  value={this.props.year}
                   onChange={this.onExpYearChange}
-                  data-test-id='expYearSelect'>
-                  {ExpYear}
+                  data-test-id='expYearSelect'
+                >
+                  {this.expirationYears}
                 </CommonFormDropdown>
               </div>
             </div>
@@ -174,10 +206,10 @@ class AutofillCreditCardPanel extends ImmutableComponent {
           <Button className='whiteButton'
             l10nId='cancel'
             testId='cancelCreditCardButton'
-            onClick={this.props.onHide}
+            onClick={this.onHide}
           />
           <Button className='primaryButton'
-            disabled={this.disableSaveButton}
+            disabled={this.props.disableSaveButton}
             l10nId='save'
             testId='saveCreditCardButton'
             onClick={this.onSave}
@@ -188,6 +220,8 @@ class AutofillCreditCardPanel extends ImmutableComponent {
   }
 }
 
+module.exports = ReduxComponent.connect(AutofillCreditCardPanel)
+
 const styles = StyleSheet.create({
   // Copied from textbox.js
   input: {
@@ -205,5 +239,3 @@ const styles = StyleSheet.create({
     marginLeft: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
   }
 })
-
-module.exports = AutofillCreditCardPanel

app/renderer/components/frame/frame.js

@@ -603,8 +603,8 @@ class Frame extends React.Component {
             windowActions.setAutofillAddressDetail(currentDetail, originalDetail)
           break
         case messages.AUTOFILL_SET_CREDIT_CARD:
-          method = (currentDetail, originalDetail) =>
-            windowActions.setAutofillCreditCardDetail(currentDetail, originalDetail)
+          method = (currentDetail) =>
+            windowActions.setAutofillCreditCardDetail(null, null, currentDetail)
           break
         case messages.HIDE_CONTEXT_MENU:
           method = () => windowActions.setContextMenuDetail()

app/renderer/components/main/main.js

@@ -80,7 +80,6 @@ class Main extends ImmutableComponent {
     this.onHideClearBrowsingDataPanel = this.onHideClearBrowsingDataPanel.bind(this)
     this.onHideWidevinePanel = this.onHideWidevinePanel.bind(this)
     this.onHideAutofillAddressPanel = this.onHideAutofillAddressPanel.bind(this)
-    this.onHideAutofillCreditCardPanel = this.onHideAutofillCreditCardPanel.bind(this)
     this.onHideReleaseNotes = this.onHideReleaseNotes.bind(this)
     this.onHideCheckDefaultBrowserDialog = this.onHideCheckDefaultBrowserDialog.bind(this)
     this.onTabContextMenu = this.onTabContextMenu.bind(this)
@@ -550,10 +549,6 @@ class Main extends ImmutableComponent {
     windowActions.setAutofillAddressDetail()
   }
 
-  onHideAutofillCreditCardPanel () {
-    windowActions.setAutofillCreditCardDetail()
-  }
-
   onHideReleaseNotes () {
     windowActions.setReleaseNotesVisible(false)
   }
@@ -755,10 +750,7 @@ class Main extends ImmutableComponent {
         }
         {
          autofillCreditCardPanelIsVisible
-          ? <AutofillCreditCardPanel
-            currentDetail={this.props.windowState.getIn(['autofillCreditCardDetail', 'currentDetail'])}
-            originalDetail={this.props.windowState.getIn(['autofillCreditCardDetail', 'originalDetail'])}
-            onHide={this.onHideAutofillCreditCardPanel} />
+          ? <AutofillCreditCardPanel />
           : null
         }
         {

docs/appActions.md

@@ -519,16 +519,14 @@ Remove address data
 
 
 
-### addAutofillCreditCard(detail, originalDetail) 
+### addAutofillCreditCard(detail) 
 
 Add credit card data
 
 **Parameters**
 
 **detail**: `object`, the credit card to add as per doc/state.md's autofillCreditCardDetail
 
-**originalDetail**: `object`, the original credit card before editing
-
 
 
 ### removeAutofillCreditCard(detail) 

docs/windowActions.md

@@ -648,15 +648,17 @@ Sets the manage autofill address popup detail
 
 
 
-### setAutofillCreditCardDetail(currentDetail, originalDetail) 
+### setAutofillCreditCardDetail(property, newValue, wholeObject) 
 
 Sets the manage autofill credit card popup detail
 
 **Parameters**
 
-**currentDetail**: `Object`, Properties of the credit card to change to
+**property**: `string`, Property that we want change
 
-**originalDetail**: `Object`, Properties of the credit card to edit
+**newValue**: `string`, New value for this property
+
+**wholeObject**: `Object`, Whole object of credit card detail
 
 
 

js/actions/appActions.js

@@ -634,13 +634,11 @@ const appActions = {
   /**
    * Add credit card data
    * @param {object} detail - the credit card to add as per doc/state.md's autofillCreditCardDetail
-   * @param {object} originalDetail - the original credit card before editing
    */
-  addAutofillCreditCard: function (detail, originalDetail) {
+  addAutofillCreditCard: function (detail) {
     dispatch({
       actionType: appConstants.APP_ADD_AUTOFILL_CREDIT_CARD,
-      detail,
-      originalDetail
+      detail
     })
   },