META-INF.resources.js.components.Variants.Variants.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 ClayIcon from '@clayui/icon';
import ClayModal, {useModal} from '@clayui/modal';
import PropTypes from 'prop-types';
import React, {useContext, useState} from 'react';

import SegmentsExperimentsContext from '../../context.es';
import {
	addVariant,
	reviewVariants,
	updateVariant,
	updateVariants,
} from '../../state/actions.es';
import {DispatchContext, StateContext} from '../../state/context.es';
import {navigateToExperience} from '../../util/navigation.es';
import {STATUS_DRAFT} from '../../util/statuses.es';
import {openErrorToast, openSuccessToast} from '../../util/toasts.es';
import VariantForm from './internal/VariantForm.es';
import VariantTable from './internal/VariantTable.es';

function Variants({selectedSegmentsExperienceId}) {
	const dispatch = useContext(DispatchContext);
	const {errors, experiment, variants} = useContext(StateContext);
	const {APIService, page} = useContext(SegmentsExperimentsContext);
	const [creatingVariant, setCreatingVariant] = useState(false);

	const {observer: creatingVariantObserver, onClose: creatingVariantOnClose} =
		useModal({
			onClose: () => setCreatingVariant(false),
		});

	const [editingVariant, setEditingVariant] = useState({active: false});

	const {observer: editingVariantObserver, onClose: editingVariantOnClose} =
		useModal({
			onClose: () => setEditingVariant({active: false}),
		});

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

				{experiment.status.value === STATUS_DRAFT && (
					
				)}
			

			{variants.length === 1 && (
				<>
					
						
							{Liferay.Language.get(
								'no-variants-have-been-created-for-this-test'
							)}
						
					

					
						{Liferay.Language.get('variants-help')}
					

					{errors.variantsError && (
						
							

							{Liferay.Language.get(
								'a-variant-needs-to-be-created'
							)}
						
					)}

					{experiment.editable && (
						 setCreatingVariant(!creatingVariant)}
						>
							{Liferay.Language.get('create-variant')}
						
					)}
				
			)}

			

			{creatingVariant && (
				
					
				
			)}

			{editingVariant.active && (
				
					
				
			)}
		
	);

	function _handleVariantDeletion(variantId) {
		const body = {
			plid: page.plid,
			segmentsExperimentRelId: variantId,
		};

		return APIService.deleteVariant(body)
			.then(() => {
				openSuccessToast();

				let variantExperienceId = null;

				const newVariants = variants.filter((variant) => {
					if (variant.segmentsExperimentRelId !== variantId) {
						return true;
					}

					variantExperienceId = variant.segmentsExperienceId;

					return false;
				});

				if (variantExperienceId === selectedSegmentsExperienceId) {
					navigateToExperience({
						experienceId: experiment.segmentsExperienceId,
					});
				}
				else {
					dispatch(updateVariants(newVariants));
					dispatch(reviewVariants());
				}
			})
			.catch((_error) => {
				openErrorToast();
			});
	}

	function _handleVariantEdition({name, variantId}) {
		setEditingVariant({
			active: true,
			name,
			variantId,
		});
	}

	function _handleVariantEditionSave({name, variantId}) {
		const body = {
			name,
			plid: page.plid,
			segmentsExperimentRelId: variantId,
		};

		return APIService.editVariant(body).then(({segmentsExperimentRel}) => {
			openSuccessToast();

			dispatch(
				updateVariant({
					changes: {
						name: segmentsExperimentRel.name,
					},
					variantId,
				})
			);
		});
	}

	function _handleVariantCreation({name}) {
		const body = {
			name,
			plid: page.plid,
			segmentsExperimentId: experiment.segmentsExperimentId,
		};

		return APIService.createVariant(body)
			.then(({segmentsExperimentRel}) => {
				const {
					name,
					segmentsExperienceId,
					segmentsExperimentId,
					segmentsExperimentRelId,
					split,
				} = segmentsExperimentRel;

				openSuccessToast();

				dispatch(
					addVariant({
						control: false,
						name,
						segmentsExperienceId,
						segmentsExperimentId,
						segmentsExperimentRelId,
						split,
					})
				);
			})
			.catch((_error) => {
				openErrorToast();
			});
	}
}

Variants.propTypes = {
	onVariantPublish: PropTypes.func,
	selectedSegmentsExperienceId: PropTypes.string.isRequired,
};

export default Variants;