Checkout: Refactor shopping cart to use new API endpoint

Automattic · Jan 31, 2017 · 85bc00e · 85bc00e
1 parent 9f1f1d6
commit 85bc00e
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 28 deletions.
diff --git a/client/lib/cart/store/cart-synchronizer.js b/client/lib/cart/store/cart-synchronizer.js
@@ -56,12 +56,12 @@ function preprocessCartForServer( cart ) {
 	return newCart;
 }
 
-function CartSynchronizer( siteID, wpcom ) {
+function CartSynchronizer( cartKey, wpcom ) {
 	if ( ! ( this instanceof CartSynchronizer ) ) {
-		return new CartSynchronizer( siteID, wpcom );
+		return new CartSynchronizer( cartKey, wpcom );
 	}
 
-	this._siteID = siteID;
+	this._cartKey = cartKey;
 	this._wpcom = wpcom;
 	this._latestValue = null;
 	this._hasLoadedFromServer = false;
@@ -151,7 +151,7 @@ CartSynchronizer.prototype._processQueuedChanges = function() {
 };
 
 CartSynchronizer.prototype._postToServer = function( callback ) {
-	this._wpcom.cart( this._siteID, 'POST', preprocessCartForServer( this._latestValue ), function( error, newValue ) {
+	this._wpcom.cart( this._cartKey, 'POST', preprocessCartForServer( this._latestValue ), function( error, newValue ) {
 		if ( error ) {
 			callback( error );
 			return;
@@ -170,7 +170,7 @@ CartSynchronizer.prototype.fetch = function() {
 };
 
 CartSynchronizer.prototype._getFromServer = function( callback ) {
-	this._wpcom.cart( this._siteID, 'GET', function( error, newValue ) {
+	this._wpcom.cart( this._cartKey, 'GET', function( error, newValue ) {
 		if ( error ) {
 			callback( error );
 			return;

diff --git a/client/lib/cart/store/index.js b/client/lib/cart/store/index.js
@@ -22,7 +22,7 @@ var UpgradesActionTypes = require( 'lib/upgrades/constants' ).action,
 	applyCoupon = cartValues.applyCoupon,
 	cartItems = cartValues.cartItems;
 
-var _selectedSiteID = null,
+var _cartItem = null,
 	_synchronizer = null,
 	_poller = null;
 
@@ -51,11 +51,11 @@ function setSelectedSite() {
 	var selectedSite = sites.getSelectedSite();
 
 	if ( ! selectedSite ) {
-		_selectedSiteID = null;
+		_cartItem = null;
 		return;
 	}
 
-	if ( _selectedSiteID === selectedSite.ID ) {
+	if ( _cartItem === selectedSite.ID ) {
 		return;
 	}
 
@@ -64,9 +64,9 @@ function setSelectedSite() {
 		_synchronizer.off( 'change', emitChange );
 	}
 
-	_selectedSiteID = selectedSite.ID;
+	_cartItem = selectedSite.ID;
 
-	_synchronizer = cartSynchronizer( selectedSite.ID, wpcom );
+	_synchronizer = cartSynchronizer( _cartItem, wpcom );
 	_synchronizer.on( 'change', emitChange );
 
 	_poller = PollerPool.add( CartStore, _synchronizer._poll.bind( _synchronizer ) );

diff --git a/client/lib/cart/store/test/cart-synchronizer.js b/client/lib/cart/store/test/cart-synchronizer.js
@@ -10,7 +10,7 @@ import CartSynchronizer from '../cart-synchronizer';
 import FakeWPCOM from './fake-wpcom';
 import useFilesystemMocks from 'test/helpers/use-filesystem-mocks';
 
-var TEST_SITE_ID = 91234567890;
+var TEST_CART_KEY = 91234567890;
 
 var poller = {
 	add: function() {}
@@ -31,7 +31,7 @@ describe( 'cart-synchronizer', function() {
 	describe( '*before* the first fetch from the server', function() {
 		it( 'should *not* allow the value to be read', function() {
 			var wpcom = FakeWPCOM(),
-				synchronizer = CartSynchronizer( TEST_SITE_ID, wpcom, poller );
+				synchronizer = CartSynchronizer( TEST_CART_KEY, wpcom, poller );
 
 			assert.throws( () => {
 				synchronizer.getLatestValue();
@@ -40,8 +40,8 @@ describe( 'cart-synchronizer', function() {
 
 		it( 'should enqueue local changes and POST them after fetching', function() {
 			var wpcom = FakeWPCOM(),
-				synchronizer = CartSynchronizer( TEST_SITE_ID, wpcom, poller ),
-				serverCart = emptyCart( TEST_SITE_ID );
+				synchronizer = CartSynchronizer( TEST_CART_KEY, wpcom, poller ),
+				serverCart = emptyCart( TEST_CART_KEY );
 
 			synchronizer.fetch();
 			synchronizer.update( applyCoupon( 'foo' ) );
@@ -63,8 +63,8 @@ describe( 'cart-synchronizer', function() {
 	describe( '*after* the first fetch from the server', function() {
 		it( 'should allow the value to be read', function() {
 			var wpcom = FakeWPCOM(),
-				synchronizer = CartSynchronizer( TEST_SITE_ID, wpcom, poller ),
-				serverCart = emptyCart( TEST_SITE_ID );
+				synchronizer = CartSynchronizer( TEST_CART_KEY, wpcom, poller ),
+				serverCart = emptyCart( TEST_CART_KEY );
 
 			synchronizer.fetch();
 			wpcom.resolveRequest( 0, serverCart );
@@ -75,8 +75,8 @@ describe( 'cart-synchronizer', function() {
 
 	it( 'should make local changes visible immediately', function() {
 		var wpcom = FakeWPCOM(),
-			synchronizer = CartSynchronizer( TEST_SITE_ID, wpcom, poller ),
-			serverCart = emptyCart( TEST_SITE_ID );
+			synchronizer = CartSynchronizer( TEST_CART_KEY, wpcom, poller ),
+			serverCart = emptyCart( TEST_CART_KEY );
 
 		synchronizer.fetch();
 		wpcom.resolveRequest( 0, serverCart );

diff --git a/client/lib/signup/cart.js b/client/lib/signup/cart.js
@@ -12,8 +12,8 @@ var wpcom = require( 'lib/wp' ),
 	cartItems = cartValues.cartItems;
 
 module.exports = {
-	addToCart: function( siteSlug, newCartItems, callback ) {
-		wpcom.undocumented().cart( siteSlug, function( error, data ) {
+	addToCart: function( cartKey, newCartItems, callback ) {
+		wpcom.undocumented().cart( cartKey, function( error, data ) {
 			if ( error ) {
 				return callback( error );
 			}
@@ -33,7 +33,7 @@ module.exports = {
 				newCart = cartValues.fillInAllCartItemAttributes( addFunction( newCart ), productsList.get() );
 			} );
 
-			wpcom.undocumented().cart( siteSlug, 'POST', newCart, function( postError ) {
+			wpcom.undocumented().cart( cartKey, 'POST', newCart, function( postError ) {
 				callback( postError );
 			} );
 		} );

diff --git a/client/lib/signup/step-actions.js b/client/lib/signup/step-actions.js
@@ -33,9 +33,10 @@ function createCart( callback, dependencies, data ) {
 	const { domainItem, themeItem } = data;
 
 	if ( designType === 'domain' ) {
-		// TODO: Find a way to create cart without a site
-		// SignupCart.addToCart depends on the site's slug
-		callback( undefined, [ null, null, domainItem, themeItem ] );
+		const cartKey = 'no-site';
+		const providedDependencies = [ null, null, domainItem, themeItem ];
+
+		SignupCart.addToCart( cartKey, [ domainItem ], error => callback( error, providedDependencies ) );
 	} else {
 		createSiteWithCart( callback, dependencies, data );
 	}

diff --git a/client/lib/wpcom-undocumented/lib/undocumented.js b/client/lib/wpcom-undocumented/lib/undocumented.js
@@ -643,14 +643,14 @@ Undocumented.prototype.getSitePlans = function( siteDomain, fn ) {
 /**
  * GET/POST cart
  *
- * @param {string} [siteDomain] The site's slug
+ * @param {string} [cartKey] The cart's key
  * @param {string} [method] The request method
  * @param {object} [data] The REQUEST data
  * @param {Function} fn The callback function
  * @api public
  */
-Undocumented.prototype.cart = function( siteDomain, method, data, fn ) {
-	debug( '/sites/:site_id:/shopping-cart query' );
+Undocumented.prototype.cart = function( cartKey, method, data, fn ) {
+	debug( '/me/shopping-cart/:cart-key query' );
 	if ( arguments.length === 2 ) {
 		fn = method;
 		method = 'GET';
@@ -661,7 +661,7 @@ Undocumented.prototype.cart = function( siteDomain, method, data, fn ) {
 		data = {};
 	}
 	return this._sendRequestWithLocale( {
-		path: '/sites/' + siteDomain + '/shopping-cart',
+		path: '/me/shopping-cart/' + cartKey,
 		method: method,
 		body: data
 	}, fn );

diff --git a/client/my-sites/upgrades/controller.jsx b/client/my-sites/upgrades/controller.jsx
@@ -214,6 +214,40 @@ module.exports = {
 		);
 	},
 
+	sitelessCheckout: function( context ) {
+		const Checkout = require( './checkout' ),
+			CheckoutData = require( 'components/data/checkout' ),
+			CartData = require( 'components/data/cart' ),
+			SecondaryCart = require( './cart/secondary-cart' );
+
+		analytics.pageView.record( '/checkout/no-site', 'Checkout' );
+
+		// FIXME: Auto-converted from the Flux setTitle action. Please use <DocumentHead> instead.
+		context.store.dispatch( setTitle( i18n.translate( 'Checkout' ) ) );
+
+		renderWithReduxStore(
+			(
+				<CheckoutData>
+					<Checkout
+						productsList={ productsList }
+					/>
+				</CheckoutData>
+			),
+			document.getElementById( 'primary' ),
+			context.store
+		);
+
+		renderWithReduxStore(
+			(
+				<CartData>
+					<SecondaryCart />
+				</CartData>
+			),
+			document.getElementById( 'secondary' ),
+			context.store
+		);
+	},
+
 	checkoutThankYou: function( context ) {
 		const CheckoutThankYouComponent = require( './checkout-thank-you' ),
 			basePath = route.sectionify( context.path ),

diff --git a/client/my-sites/upgrades/index.js b/client/my-sites/upgrades/index.js
@@ -251,6 +251,11 @@ module.exports = function() {
 			upgradesController.checkoutThankYou
 		);
 
+		page(
+			'/checkout/no-site',
+			upgradesController.sitelessCheckout
+		);
+
 		page(
 			'/checkout/:domain/:product?',
 			controller.siteSelection,