META-INF.resources.js.components.SegmentsExperiments.es.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.segments.experiment.web
Liferay Segments Experiment Web
There is a newer version: 3.0.99
/**
 * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
 * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
 */

import ClayAlert from '@clayui/alert';
import ClayButton from '@clayui/button';
import ClayDropDown from '@clayui/drop-down';
import ClayIcon from '@clayui/icon';
import ClayLabel from '@clayui/label';
import {sub} from 'frontend-js-web';
import PropTypes from 'prop-types';
import React, {useContext, useState} from 'react';

import SegmentsExperimentsContext from '../context.es';
import {openDeletionModal} from '../state/actions.es';
import {DispatchContext, StateContext} from '../state/context.es';
import {NO_EXPERIMENT_ILLUSTRATION_FILE_NAME} from '../util/contants.es';
import {
	STATUS_DRAFT,
	STATUS_FINISHED_WINNER,
	STATUS_RUNNING,
	STATUS_TERMINATED,
	statusToLabelDisplayType,
} from '../util/statuses.es';
import ClickGoalPicker from './ClickGoalPicker/ClickGoalPicker.es';
import SegmentsExperimentsActions from './SegmentsExperimentsActions.es';
import SegmentsExperimentsDetails from './SegmentsExperimentsDetails.es';
import Variants from './Variants/Variants.es';

function SegmentsExperiments({
	onCreateSegmentsExperiment,
	onEditSegmentsExperiment,
	onEditSegmentsExperimentStatus,
	onTargetChange,
}) {
	const {experiment} = useContext(StateContext);
	const dispatch = useContext(DispatchContext);

	const goalTarget = experiment?.goal?.target?.replace('#', '');
	const isGoalTargetInDOM = document.getElementById(goalTarget);

	// If the target has been removed from the page we must reset it

	if (goalTarget && !isGoalTargetInDOM) {
		onTargetChange('');
	}

	return (
		 {
				dispatch(openDeletionModal());
			}}
			onEditSegmentsExperiment={onEditSegmentsExperiment}
			onEditSegmentsExperimentStatus={onEditSegmentsExperimentStatus}
			onTargetChange={onTargetChange}
		/>
	);
}

function Experiments({
	experiment,
	goalTarget,
	onCreateSegmentsExperiment,
	onDeleteSegmentsExperiment,
	onEditSegmentsExperiment,
	onEditSegmentsExperimentStatus,
	onTargetChange,
}) {
	const [dropdown, setDropdown] = useState(false);
	const [dimissAlert, setDimissAlert] = useState(true);
	const {imagesPath} = useContext(SegmentsExperimentsContext);
	const noExperimentIllustration = `${imagesPath}${NO_EXPERIMENT_ILLUSTRATION_FILE_NAME}`;
	const {selectedExperienceId, variants} = useContext(StateContext);
	const winnerVariant = variants.find((variant) => variant.winner === true);

	return (
		<>
			{experiment && (
				<>
					
						
							{experiment.name}
						

						{experiment.editable && (
							
										
									
								}
							>
								
									
										

										{Liferay.Language.get('edit')}
									

									
										

										{Liferay.Language.get('delete')}
									
								
							
						)}

						{!experiment.editable &&
							experiment.status.value !== STATUS_RUNNING && (
								
									
								
							)}
					

					
						{experiment.status.label}
					

					{experiment.status.value === STATUS_TERMINATED &&
						dimissAlert && (
							 setDimissAlert(false)}
								title={Liferay.Language.get('alert')}
							>
								{Liferay.Language.get(
									'the-test-has-not-gathered-sufficient-data-to-confidently-determine-a-winner.-however,-variants-can-still-be-published'
								)}
							
						)}

					{experiment.status.value === STATUS_FINISHED_WINNER && (
						
							',
										winnerVariant.name,
										''
									),
								}}
							/>
						
					)}

					

					{experiment.goal.value === 'click' && (
						 {
								onTargetChange(selector);
							}}
							target={goalTarget}
						/>
					)}

					

					
				
			)}

			{!experiment && (
				
					

					
						{Liferay.Language.get(
							'no-active-tests-were-found-for-the-selected-experience'
						)}
					

					{Liferay.Language.get('create-test-help-message')}

					
							onCreateSegmentsExperiment(selectedExperienceId)
						}
					>
						{Liferay.Language.get('create-test')}
					
				
			)}
		
	);
}

SegmentsExperiments.propTypes = {
	onCreateSegmentsExperiment: PropTypes.func.isRequired,
	onDeleteSegmentsExperiment: PropTypes.func.isRequired,
	onEditSegmentsExperiment: PropTypes.func.isRequired,
	onEditSegmentsExperimentStatus: PropTypes.func.isRequired,
	onTargetChange: PropTypes.func.isRequired,
};

export default SegmentsExperiments;