META-INF.resources.js.components.Variants.internal.VariantTable.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 ClayButton from '@clayui/button';
import ClayDropDown from '@clayui/drop-down';
import ClayIcon from '@clayui/icon';
import {useModal} from '@clayui/modal';
import ClayTable from '@clayui/table';
import classNames from 'classnames';
import {sub} from 'frontend-js-web';
import PropTypes from 'prop-types';
import React, {useContext, useState} from 'react';

import SegmentsExperimentsContext from '../../../context.es';
import {openPublishModal} from '../../../state/actions.es';
import {DispatchContext} from '../../../state/context.es';
import {SegmentsVariantType} from '../../../types.es';
import {navigateToExperience} from '../../../util/navigation.es';
import {indexToPercentageString} from '../../../util/percentages.es';
import {
	STATUS_DRAFT,
	STATUS_FINISHED_NO_WINNER,
	STATUS_FINISHED_WINNER,
	STATUS_RUNNING,
	STATUS_TERMINATED,
} from '../../../util/statuses.es';
import {ConfirmModal} from '../../ConfirmModal';

function ImprovementCell({control, improvement: initialImprovement}) {
	const number = Number(initialImprovement);
	const improvement = isNaN(number) ? 0 : number;

	if (control) {
		return (
			
				{sub(Liferay.Language.get('x-loss'), 0).toLowerCase()}
			
		);
	}

	return (
		 0 ? 'text-success' : 'text-danger'
			)}
		>
			{sub(
				improvement > 0
					? Liferay.Language.get('x-lift')
					: Liferay.Language.get('x-loss'),
				parseFloat(Math.abs(improvement).toFixed(2))
			).toLowerCase()}
		
	);
}

function VariantTable({
	experiment,
	onVariantDeletion,
	onVariantEdition,
	selectedSegmentsExperienceId,
	variants,
}) {
	const [openDropdown, setOpenDropdown] = useState(false);
	const [deleteModalState, setDeleteModalState] = useState({
		open: false,
		variantId: null,
	});
	const {editVariantLayoutURL} = useContext(SegmentsExperimentsContext);
	const dispatch = useContext(DispatchContext);

	const {observer, onClose} = useModal({
		onClose: () => {
			setDeleteModalState({open: false, variantId: null});
		},
	});

	const publishable =
		experiment.status.value === STATUS_TERMINATED ||
		experiment.status.value === STATUS_FINISHED_WINNER ||
		experiment.status.value === STATUS_FINISHED_NO_WINNER;

	const showImprovement =
		publishable || experiment.status.value === STATUS_RUNNING;

	return (
		<>
			
				
					
						
							{Liferay.Language.get('name')}
						

						{showImprovement && (
							
								{Liferay.Language.get('improvement')}
							
						)}

						{experiment.status.value === STATUS_DRAFT && (
							
								
									{Liferay.Language.get('traffic')}
								
							
						)}

						{publishable && (
							
								
									{Liferay.Language.get('actions')}
								
							
						)}
					
				

				
					{variants.map(
						({
							control,
							name,
							segmentsExperienceId,
							segmentsExperimentRelId,
							segmentsExperimentVariantImprovement: improvement,
							split,
							winner,
						}) => (
							
								
									
											navigateToExperience({
												experienceId:
													segmentsExperienceId,
											})
										}
									>
										{control ? (
											
												{winner && (
													
												)}

												{name}

												
											
										) : (
											name
										)}
									
								

								{experiment.status.value === STATUS_DRAFT &&
									control && }

								{showImprovement && (
									
								)}

								{!control && experiment.editable && (
									
										
											
													navigateToExperience({
														baseUrl:
															editVariantLayoutURL,
														experienceId:
															segmentsExperienceId,
													})
												}
											>
												
											

											
														
													
												}
											>
												
													
															onVariantEdition({
																name,
																variantId:
																	segmentsExperimentRelId,
															})
														}
													>
														

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

													 {
															setDeleteModalState(
																{
																	open: true,
																	variantId:
																		segmentsExperimentRelId,
																}
															);
														}}
													>
														

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

								{!publishable && !experiment.editable && (
									
										{indexToPercentageString(split)}
									
								)}

								{publishable && (
									
										 {
												dispatch(
													openPublishModal({
														experienceId:
															segmentsExperienceId,
														experienceName: name,
													})
												);
											}}
											size="sm"
										>
											
										
									
								)}
							
						)
					)}
				
			

			{deleteModalState.open && (
				 {
						onVariantDeletion(deleteModalState.variantId);

						onClose();
					}}
					submitTitle={Liferay.Language.get('delete')}
					title={Liferay.Language.get('delete-variant')}
				>
					
						{Liferay.Language.get(
							'are-you-sure-you-want-to-delete-this'
						)}
					
				
			)}
		
	);
}

VariantTable.propTypes = {
	onVariantDeletion: PropTypes.func.isRequired,
	onVariantEdition: PropTypes.func.isRequired,
	variants: PropTypes.arrayOf(SegmentsVariantType),
};

export default VariantTable;