Purchases: Reduxify Stored Cards on Secure Payment page

client/components/data/query-stored-cards/index.jsx

@@ -7,21 +7,13 @@ import { connect } from 'react-redux';
 /**
  * Internal dependencies
  */
-import { hasLoadedStoredCardsFromServer, isFetchingStoredCards } from 'state/stored-cards/selectors';
+import { isFetchingStoredCards } from 'state/stored-cards/selectors';
 import { fetchStoredCards } from 'state/stored-cards/actions';
 
 class QueryStoredCards extends Component {
 	componentWillMount() {
-		this.requestStoredCards();
-	}
-
-	componentWillReceiveProps( nextProps ) {
-		this.requestStoredCards( nextProps );
-	}
-
-	requestStoredCards( props = this.props ) {
-		if ( ! props.isRequesting && ! props.hasLoadedFromServer ) {
-			props.fetchStoredCards();
+		if ( ! this.props.isRequesting ) {
+			this.props.fetchStoredCards();
 		}
 	}
 
@@ -38,7 +30,6 @@ QueryStoredCards.propTypes = {
 export default connect(
 	state => {
 		return {
-			hasLoadedFromServer: hasLoadedStoredCardsFromServer( state ),
 			isRequesting: isFetchingStoredCards( state )
 		};
 	},

client/me/credit-cards/index.jsx

@@ -10,13 +10,14 @@ var connect = require( 'react-redux' ).connect,
 var CreditCardDelete = require( './credit-card-delete' ),
 	Card = require( 'components/card' ),
 	getStoredCards = require( 'state/stored-cards/selectors' ).getStoredCards,
+	hasLoadedStoredCardsFromServer = require( 'state/stored-cards/selectors' ).hasLoadedStoredCardsFromServer,
 	isFetchingStoredCards = require( 'state/stored-cards/selectors' ).isFetchingStoredCards,
 	QueryStoredCards = require( 'components/data/query-stored-cards' ),
 	SectionHeader = require( 'components/section-header' );
 
 var CreditCards = React.createClass( {
 	renderCards: function() {
-		if ( this.props.isFetchingStoredCards ) {
+		if ( this.props.isFetching && ! this.props.hasLoadedFromServer ) {
 			return (
 				<div className="credit-cards__no-results">
 					{ this.translate( 'Loading…' ) }
@@ -61,6 +62,7 @@ var CreditCards = React.createClass( {
 module.exports = connect(
 	state => ( {
 		cards: getStoredCards( state ),
-		isFetchingStoredCards: isFetchingStoredCards( state )
+		hasLoadedFromServer: hasLoadedStoredCardsFromServer( state ),
+		isFetching: isFetchingStoredCards( state )
 	} )
 )( CreditCards );

client/my-sites/upgrades/checkout/checkout.jsx

@@ -14,19 +14,21 @@ var connect = require( 'react-redux' ).connect,
 var analytics = require( 'lib/analytics' ),
 	cartItems = require( 'lib/cart-values' ).cartItems,
 	clearPurchases = require( 'lib/upgrades/actions/purchases' ).clearPurchases,
+	clearSitePlans = require( 'state/sites/plans/actions' ).clearSitePlans,
 	DomainDetailsForm = require( './domain-details-form' ),
+	fetchReceiptCompleted = require( 'state/receipts/actions' ).fetchReceiptCompleted,
+	getExitCheckoutUrl = require( 'lib/checkout' ).getExitCheckoutUrl,
+	getStoredCards = require( 'state/stored-cards/selectors' ).getStoredCards,
 	hasDomainDetails = require( 'lib/store-transactions' ).hasDomainDetails,
+	notices = require( 'notices' ),
 	observe = require( 'lib/mixins/data-observe' ),
-	fetchReceiptCompleted = require( 'state/receipts/actions' ).fetchReceiptCompleted,
-	clearSitePlans = require( 'state/sites/plans/actions' ).clearSitePlans,
 	purchasePaths = require( 'me/purchases/paths' ),
+	QueryStoredCards = require( 'components/data/query-stored-cards' ),
 	SecurePaymentForm = require( './secure-payment-form' ),
-	getExitCheckoutUrl = require( 'lib/checkout' ).getExitCheckoutUrl,
-	upgradesActions = require( 'lib/upgrades/actions' ),
+	supportPaths = require( 'lib/url/support' ),
 	themeItem = require( 'lib/cart-values/cart-items' ).themeItem,
 	transactionStepTypes = require( 'lib/store-transactions/step-types' ),
-	notices = require( 'notices' ),
-	supportPaths = require( 'lib/url/support' );
+	upgradesActions = require( 'lib/upgrades/actions' );
 
 import {
 	isValidFeatureKey,
@@ -35,9 +37,10 @@ import {
 import { planItem as getCartItemForPlan } from 'lib/cart-values/cart-items';
 
 const Checkout = React.createClass( {
-	mixins: [ observe( 'sites', 'cards', 'productsList' ) ],
+	mixins: [ observe( 'sites', 'productsList' ) ],
 
 	propTypes: {
+		cards: React.PropTypes.array.isRequired,
 		selectedFeature: React.PropTypes.string
 	},
 
@@ -95,7 +98,7 @@ const Checkout = React.createClass( {
 		props = props || this.props;
 
 		analytics.tracks.recordEvent( 'calypso_checkout_page_view', {
-			saved_cards: props.cards.get().length,
+			saved_cards: props.cards.length,
 			is_renewal: cartItems.hasRenewalItem( props.cart )
 		} );
 	},
@@ -249,6 +252,8 @@ const Checkout = React.createClass( {
 		return (
 			<div className="main main-column" role="main">
 				<div className="checkout">
+					<QueryStoredCards />
+
 					{ this.content() }
 				</div>
 			</div>
@@ -257,7 +262,11 @@ const Checkout = React.createClass( {
 } );
 
 module.exports = connect(
-	undefined,
+	function( state ) {
+		return {
+			cards: getStoredCards( state )
+		}
+	},
 	function( dispatch ) {
 		return {
 			clearSitePlans: function( siteId ) {

client/my-sites/upgrades/checkout/credit-card-selector.jsx

@@ -33,7 +33,7 @@ var CreditCardSelector = React.createClass({
 	},
 
 	storedCards: function() {
-		return this.props.cards.get().map( function( card ) {
+		return this.props.cards.map( function( card ) {
 			var storedCard = <StoredCard card={ card } />;
 			return this.section( card.stored_details_id, storedCard );
 		}, this );
@@ -44,7 +44,7 @@ var CreditCardSelector = React.createClass({
 			<NewCardForm
 				countriesList={ this.props.countriesList }
 				transaction={ this.props.transaction }
-				hasStoredCards={ this.props.cards.get().length > 0 } />
+				hasStoredCards={ this.props.cards.length > 0 } />
 		);
 
 		return this.section( 'new-card', cardForm );
@@ -53,7 +53,7 @@ var CreditCardSelector = React.createClass({
 	section: function( name, content ) {
 		var classes = classNames( 'payment-box-section', {
 			'selected': this.state.section === name,
-			'no-stored-cards' : name === 'new-card' && this.props.cards.get().length === 0
+			'no-stored-cards': name === 'new-card' && this.props.cards.length === 0
 		} );
 
 		return (
@@ -86,10 +86,8 @@ var CreditCardSelector = React.createClass({
 	},
 
 	getStoredCardDetails: function( section ) {
-		var cards = this.props.cards.get();
-		return filter( cards, { stored_details_id: section } )[ 0 ];
+		return filter( this.props.cards, { stored_details_id: section } )[ 0 ];
 	}
-
 } );
 
 module.exports = CreditCardSelector;

client/my-sites/upgrades/checkout/secure-payment-form.jsx

@@ -117,7 +117,7 @@ var SecurePaymentForm = React.createClass( {
 					transaction={ this.props.transaction }
 					cart={ this.props.cart }
 					countriesList={ countriesList }
-					initialCard={ this.initialCard() }
+					initialCard={ this.getInitialCard() }
 					selected={ this.state.visiblePaymentBox === 'credit-card' }
 					selectedSite={ this.props.selectedSite }
 					onToggle={ this.selectPaymentBox }
@@ -137,8 +137,8 @@ var SecurePaymentForm = React.createClass( {
 		);
 	},
 
-	initialCard: function() {
-		return this.props.cards.get()[ 0 ];
+	getInitialCard: function() {
+		return this.props.cards[ 0 ];
 	},
 
 	componentWillMount: function() {
@@ -165,8 +165,8 @@ var SecurePaymentForm = React.createClass( {
 				break;
 
 			case 'credit-card':
-				if ( this.initialCard() ) {
-					newPayment = storeTransactions.storedCardPayment( this.initialCard() );
+				if ( this.getInitialCard() ) {
+					newPayment = storeTransactions.storedCardPayment( this.getInitialCard() );
 				} else {
 					newPayment = storeTransactions.newCardPayment();
 				}

client/my-sites/upgrades/controller.jsx

@@ -170,7 +170,6 @@ module.exports = {
 			CheckoutData = require( 'components/data/checkout' ),
 			CartData = require( 'components/data/cart' ),
 			SecondaryCart = require( './cart/secondary-cart' ),
-			storedCards = require( 'lib/stored-cards' )(),
 			basePath = route.sectionify( context.path ),
 			product = context.params.product,
 			selectedFeature = context.params.feature;
@@ -189,7 +188,6 @@ module.exports = {
 			(
 				<CheckoutData>
 					<Checkout
-						cards={ storedCards }
 						product={ product }
 						productsList={ productsList }
 						selectedFeature={ selectedFeature }