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/data/constants.js b/src/experiments/data/constants.js index 9c918cb46e6..53877b8c47c 100644 --- a/src/experiments/data/constants.js +++ b/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'; diff --git a/src/experiments/data/resolvers.js b/src/experiments/data/resolvers.js index 754e32b64bf..1b062ddbf7c 100644 --- a/src/experiments/data/resolvers.js +++ b/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(); + } } 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 } ) {
- { experiments.map( ( { name, variation }, index ) => { - return ( -