Merge pull request #29 from woocommerce/update/support-backend-experiments

Experiments - Support backend experiments

src/experiments/data/actions.js

@@ -1,23 +1,51 @@
+/**
+ * External dependencies
+ */
+import { apiFetch } from '@wordpress/data-controls';
+
 /**
  * Internal dependencies
  */
 import TYPES from './action-types';
-import { EXPERIMENT_NAME_PREFIX } from './constants';
+import { EXPERIMENT_NAME_PREFIX, TRANSIENT_NAME_PREFIX } from './constants';
 
-export function toggleExperiment( experimentName ) {
+function toggleFrontendExperiment( experimentName, newVariation ) {
 	const storageItem = JSON.parse(
 		window.localStorage.getItem( EXPERIMENT_NAME_PREFIX + experimentName )
 	);
 
-	const newVariation =
-		storageItem.variationName === 'control' ? 'treatment' : 'control';
-
 	storageItem.variationName = newVariation;
 
 	window.localStorage.setItem(
 		EXPERIMENT_NAME_PREFIX + experimentName,
 		JSON.stringify( storageItem )
 	);
+}
+
+function* toggleBackendExperiment( experimentName, newVariation ) {
+	try {
+		const payload = {};
+		payload[ TRANSIENT_NAME_PREFIX + experimentName ] = newVariation;
+		yield apiFetch( {
+			method: 'POST',
+			path: '/wc-admin/options',
+			headers: { 'content-type': 'application/json' },
+			body: JSON.stringify( payload ),
+		} );
+	} catch ( error ) {
+		throw new Error();
+	}
+}
+
+export function* toggleExperiment( experimentName, currentVariation, source ) {
+	const newVariation =
+		currentVariation === 'control' ? 'treatment' : 'control';
+
+	if ( source === 'frontend' ) {
+		toggleFrontendExperiment( experimentName, newVariation );
+	} else {
+		yield toggleBackendExperiment( experimentName, newVariation );
+	}
 
 	return {
 		type: TYPES.TOGGLE_EXPERIMENT,

src/experiments/data/constants.js

@@ -1,2 +1,4 @@
 export const STORE_KEY = 'wc-admin-helper/experiments';
 export const EXPERIMENT_NAME_PREFIX = 'explat-experiment--';
+export const TRANSIENT_NAME_PREFIX = '_transient_abtest_variation_';
+export const API_NAMESPACE = '/wc-admin-test-helper';

src/experiments/data/resolvers.js

@@ -1,24 +1,59 @@
+/**
+ * External dependencies
+ */
+import { apiFetch } from '@wordpress/data-controls';
+
 /**
  * Internal dependencies
  */
 import { setExperiments } from './actions';
-import { EXPERIMENT_NAME_PREFIX } from './constants';
+import {
+	EXPERIMENT_NAME_PREFIX,
+	TRANSIENT_NAME_PREFIX,
+	API_NAMESPACE,
+} from './constants';
 
-export function* getExperiments() {
+function getExperimentsFromFrontend() {
 	const storageItems = Object.entries( { ...window.localStorage } ).filter(
 		( item ) => {
 			return item[ 0 ].indexOf( EXPERIMENT_NAME_PREFIX ) === 0;
 		}
 	);
 
-	const experiments = storageItems.map( ( storageItem ) => {
+	return storageItems.map( ( storageItem ) => {
 		const [ key, value ] = storageItem;
 		const objectValue = JSON.parse( value );
 		return {
 			name: key.replace( EXPERIMENT_NAME_PREFIX, '' ),
 			variation: objectValue.variationName || 'control',
+			source: 'frontend',
 		};
 	} );
-
-	yield setExperiments( experiments );
+}
+
+export function* getExperiments() {
+	try {
+		const response = yield apiFetch( {
+			path: `${ API_NAMESPACE }/options?search=_transient_abtest_variation_`,
+		} );
+
+		const experimentsFromBackend = response.map( ( experiment ) => {
+			return {
+				name: experiment.option_name.replace(
+					TRANSIENT_NAME_PREFIX,
+					''
+				),
+				variation:
+					experiment.option_value === 'control'
+						? 'control'
+						: 'treatment',
+				source: 'backend',
+			};
+		} );
+		yield setExperiments(
+			getExperimentsFromFrontend().concat( experimentsFromBackend )
+		);
+	} catch ( error ) {
+		throw new Error();
+	}
 }

src/experiments/index.js

@@ -24,24 +24,32 @@ function Experiments( { experiments, toggleExperiment } ) {
 					</tr>
 				</thead>
 				<tbody>
-					{ experiments.map( ( { name, variation }, index ) => {
-						return (
-							<tr key={ index }>
-								<td className="experiment-name">{ name }</td>
-								<td align="center">{ variation }</td>
-								<td align="center">
-									<Button
-										onClick={ () => {
-											toggleExperiment( name );
-										} }
-										isPrimary
-									>
-										Toggle
-									</Button>
-								</td>
-							</tr>
-						);
-					} ) }
+					{ experiments.map(
+						( { name, variation, source }, index ) => {
+							return (
+								<tr key={ index }>
+									<td className="experiment-name">
+										{ name }
+									</td>
+									<td align="center">{ variation }</td>
+									<td align="center">
+										<Button
+											onClick={ () => {
+												toggleExperiment(
+													name,
+													variation,
+													source
+												);
+											} }
+											isPrimary
+										>
+											Toggle
+										</Button>
+									</td>
+								</tr>
+							);
+						}
+					) }
 				</tbody>
 			</table>
 		</div>