From 1071ef87ebf48bf71d0432fdec0da70335164ded Mon Sep 17 00:00:00 2001
From: Moon <moon.kyong@automattic.com>
Date: Thu, 24 Feb 2022 12:35:22 -0800
Subject: [PATCH] Update toggleExperiment to support backend experiments

---
 src/experiments/data/actions.js | 38 ++++++++++++++++++++++++----
 src/experiments/index.js        | 44 +++++++++++++++++++--------------
 2 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/src/experiments/data/actions.js b/src/experiments/data/actions.js
index fdf0f0fdd1d..16716d534da 100644
--- a/src/experiments/data/actions.js
+++ b/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,
diff --git a/src/experiments/index.js b/src/experiments/index.js
index 97e110fb908..15fcdad264a 100644
--- a/src/experiments/index.js
+++ b/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>