Source: segments-experiment-web/src/main/resources/META-INF/resources/js/components/SegmentsExperimentsModal.es.js

/**
 * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
 *
 * This library is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Lesser General Public License as published by the Free
 * Software Foundation; either version 2.1 of the License, or (at your option)
 * any later version.
 *
 * This library is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
 * details.
 */

import React, {useState} from 'react';
import PropTypes from 'prop-types';
import ClayModal from '@clayui/modal';
import ClayButton from '@clayui/button';
import ClayAlert from '@clayui/alert';
import ValidatedInput from './ValidatedInput/ValidatedInput.es';
import ClayIcon from '@clayui/icon';
import {ClaySelect} from '@clayui/form';
import {SegmentsExperimentGoal} from '../types.es';

function SegmentsExperimentsModal({
	description = '',
	error,
	goal,
	goals = [],
	name = '',
	onClose,
	onSave,
	segmentsExperienceId,
	segmentsExperimentId,
	title
}) {
	const [inputDescription, setInputDescription] = useState(description);
	const [inputGoal, setInputGoal] = useState(
		(goal && goal.value) || (goals[0] && goals[0].value)
	);
	const [inputName, setInputName] = useState(name);
	const [invalidForm, setInvalidForm] = useState(false);

	return (
		<>
			<ClayModal.Header>{title}</ClayModal.Header>
			<ClayModal.Body>
				<form onSubmit={_handleFormSubmit}>
					{error && (
						<ClayAlert
							displayType="danger"
							title={Liferay.Language.get('error')}
						>
							{error}
						</ClayAlert>
					)}

					<ValidatedInput
						autofocus={true}
						errorMessage={Liferay.Language.get(
							'test-name-is-required'
						)}
						label={Liferay.Language.get('test-name')}
						onChange={_handleNameChange}
						onValidationChange={_handleInputNameValidation}
						value={inputName}
					/>

					<div className="form-group">
						<label>{Liferay.Language.get('description')}</label>
						<textarea
							className="form-control"
							maxLength="4000"
							onChange={_handleDescriptionChange}
							placeholder={Liferay.Language.get(
								'description-placeholder'
							)}
							value={inputDescription}
						/>
					</div>
					{goals.length > 0 && (
						<div className="form-group">
							<label className="w100">
								{Liferay.Language.get('select-goal')}
								<ClayIcon
									className="reference-mark text-warning ml-1"
									symbol="asterisk"
								/>
								<ClaySelect
									className="mt-1"
									defaultValue={inputGoal}
									onChange={_handleGoalChange}
								>
									{goals.map(goal => (
										<ClaySelect.Option
											key={goal.value}
											label={goal.label}
											value={goal.value}
										/>
									))}
								</ClaySelect>
							</label>
						</div>
					)}
				</form>
			</ClayModal.Body>
			<ClayModal.Footer
				last={
					<ClayButton.Group spaced>
						<ClayButton
							displayType="secondary"
							onClick={onClose}
							type="button"
						>
							{Liferay.Language.get('cancel')}
						</ClayButton>
						<ClayButton
							disabled={invalidForm}
							displayType="primary"
							onClick={_handleSave}
						>
							{Liferay.Language.get('save')}
						</ClayButton>
					</ClayButton.Group>
				}
			/>
		</>
	);

	function _handleGoalChange(event) {
		setInputGoal(event.target.value);
	}

	function _handleNameChange(event) {
		setInputName(event.target.value);
	}

	function _handleDescriptionChange(event) {
		setInputDescription(event.target.value);
	}

	function _handleInputNameValidation(error) {
		setInvalidForm(error);
	}

	/**
	 * Triggers `onSave` prop
	 *
	 * Resets `goalTarget` if goal is not 'click'
	 */
	function _handleSave() {
		if (!invalidForm) {
			const goalTarget =
				inputGoal === 'click'
					? goal && goal.target
						? goal.target
						: ''
					: '';

			onSave({
				description: inputDescription,
				goal: inputGoal,
				goalTarget,
				name: inputName,
				segmentsExperienceId,
				segmentsExperimentId
			});
		}
	}

	function _handleFormSubmit(event) {
		event.preventDefault();

		_handleSave();
	}
}

SegmentsExperimentsModal.propTypes = {
	description: PropTypes.string,
	error: PropTypes.string,
	goal: SegmentsExperimentGoal,
	goals: PropTypes.arrayOf(SegmentsExperimentGoal),
	name: PropTypes.string,
	onClose: PropTypes.func.isRequired,
	onSave: PropTypes.func.isRequired,
	segmentsExperienceId: PropTypes.string,
	segmentsExperimentId: PropTypes.string,
	title: PropTypes.string.isRequired
};

export default SegmentsExperimentsModal;