Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Commit

Permalink
Merge pull request #9566 from NejcZdovc/redux/autofillCC
Browse files Browse the repository at this point in the history
Converts AutofillCreditCardPanel into redux component
  • Loading branch information
NejcZdovc authored Jun 20, 2017
2 parents 5cb22be + 15deae1 commit 3db05b2
Show file tree
Hide file tree
Showing 10 changed files with 129 additions and 107 deletions.
12 changes: 6 additions & 6 deletions app/autofill.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
})
}

Expand Down
168 changes: 100 additions & 68 deletions app/renderer/components/autofill/autofillCreditCardPanel.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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'
Expand All @@ -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 }}
defaultValue={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
defaultValue={this.props.card}
data-test-id='creditCardNumber'
spellCheck='false'
onKeyDown={this.onKeyDown}
onChange={this.onCardChange}
value={this.props.currentDetail.get('card')}
/>
</div>
</div>
Expand All @@ -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>
Expand All @@ -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}
Expand All @@ -188,6 +220,8 @@ class AutofillCreditCardPanel extends ImmutableComponent {
}
}

module.exports = ReduxComponent.connect(AutofillCreditCardPanel)

const styles = StyleSheet.create({
// Copied from textbox.js
input: {
Expand All @@ -205,5 +239,3 @@ const styles = StyleSheet.create({
marginLeft: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
}
})

module.exports = AutofillCreditCardPanel
4 changes: 2 additions & 2 deletions app/renderer/components/frame/frame.js
Original file line number Diff line number Diff line change
Expand Up @@ -594,8 +594,8 @@ class Frame extends React.Component {
windowActions.setAutofillAddressDetail(null, null, currentDetail)
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()
Expand Down
10 changes: 1 addition & 9 deletions app/renderer/components/main/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,6 @@ class Main extends ImmutableComponent {
this.onClickWindow = this.onClickWindow.bind(this)
this.onHideSiteInfo = this.onHideSiteInfo.bind(this)
this.onHideBraveryPanel = this.onHideBraveryPanel.bind(this)
this.onHideAutofillCreditCardPanel = this.onHideAutofillCreditCardPanel.bind(this)
this.onTabContextMenu = this.onTabContextMenu.bind(this)
this.checkForTitleMode = debounce(this.checkForTitleMode.bind(this), 20)
this.resetAltMenuProcessing()
Expand Down Expand Up @@ -529,10 +528,6 @@ class Main extends ImmutableComponent {
windowActions.setBraveryPanelDetail()
}

onHideAutofillCreditCardPanel () {
windowActions.setAutofillCreditCardDetail()
}

onMouseDown (e) {
// TODO(bsclifton): update this to use eventUtil.eventElHasAncestorWithClasses
let node = e.target
Expand Down Expand Up @@ -699,10 +694,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
}
{
Expand Down
4 changes: 1 addition & 3 deletions docs/appActions.md
Original file line number Diff line number Diff line change
Expand Up @@ -513,16 +513,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)
Expand Down
8 changes: 5 additions & 3 deletions docs/windowActions.md
Original file line number Diff line number Diff line change
Expand Up @@ -650,15 +650,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

**newValue**: `string`, New value for this property

**originalDetail**: `Object`, Properties of the credit card to edit
**wholeObject**: `Object`, Whole object of credit card detail



Expand Down
6 changes: 2 additions & 4 deletions js/actions/appActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -630,13 +630,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
})
},

Expand Down
Loading

0 comments on commit 3db05b2

Please sign in to comment.