Update toggleExperiment to 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/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>