Update toggleExperiment to support backend experiments
This commit is contained in:
parent
ed9a9fca55
commit
1071ef87eb
|
@ -1,23 +1,51 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import { apiFetch } from '@wordpress/data-controls';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
*/
|
*/
|
||||||
import TYPES from './action-types';
|
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(
|
const storageItem = JSON.parse(
|
||||||
window.localStorage.getItem( EXPERIMENT_NAME_PREFIX + experimentName )
|
window.localStorage.getItem( EXPERIMENT_NAME_PREFIX + experimentName )
|
||||||
);
|
);
|
||||||
|
|
||||||
const newVariation =
|
|
||||||
storageItem.variationName === 'control' ? 'treatment' : 'control';
|
|
||||||
|
|
||||||
storageItem.variationName = newVariation;
|
storageItem.variationName = newVariation;
|
||||||
|
|
||||||
window.localStorage.setItem(
|
window.localStorage.setItem(
|
||||||
EXPERIMENT_NAME_PREFIX + experimentName,
|
EXPERIMENT_NAME_PREFIX + experimentName,
|
||||||
JSON.stringify( storageItem )
|
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 {
|
return {
|
||||||
type: TYPES.TOGGLE_EXPERIMENT,
|
type: TYPES.TOGGLE_EXPERIMENT,
|
||||||
|
|
|
@ -24,15 +24,22 @@ function Experiments( { experiments, toggleExperiment } ) {
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{ experiments.map( ( { name, variation }, index ) => {
|
{ experiments.map(
|
||||||
|
( { name, variation, source }, index ) => {
|
||||||
return (
|
return (
|
||||||
<tr key={ index }>
|
<tr key={ index }>
|
||||||
<td className="experiment-name">{ name }</td>
|
<td className="experiment-name">
|
||||||
|
{ name }
|
||||||
|
</td>
|
||||||
<td align="center">{ variation }</td>
|
<td align="center">{ variation }</td>
|
||||||
<td align="center">
|
<td align="center">
|
||||||
<Button
|
<Button
|
||||||
onClick={ () => {
|
onClick={ () => {
|
||||||
toggleExperiment( name );
|
toggleExperiment(
|
||||||
|
name,
|
||||||
|
variation,
|
||||||
|
source
|
||||||
|
);
|
||||||
} }
|
} }
|
||||||
isPrimary
|
isPrimary
|
||||||
>
|
>
|
||||||
|
@ -41,7 +48,8 @@ function Experiments( { experiments, toggleExperiment } ) {
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
);
|
);
|
||||||
} ) }
|
}
|
||||||
|
) }
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue