META-INF.resources.js.AddPriceEntryForm.js Maven / Gradle / Ivy

Show more of this group Show more artifacts with this name
Show all versions of com.liferay.commerce.pricing.web
Liferay Commerce Pricing Web
The newest version!
/**
 * SPDX-FileCopyrightText: (c) 2023 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, {ClayButtonWithIcon} from '@clayui/button';
import ClayForm, {ClayInput, ClaySelectWithOption} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import ClayLayout from '@clayui/layout';
import {CommerceServiceProvider, commerceEvents} from 'commerce-frontend-js';
import PropTypes from 'prop-types';
import React, {useMemo, useRef, useState} from 'react';

import '../css/main.scss';

function AddPriceEntryForm({
	basePrice,
	cpInstanceId,
	currency,
	dataSetId,
	maxFractionDigits,
	namespace,
	priceLists,
	unitOfMeasures,
}) {
	const [inputGroups, setInputGroups] = useState([
		{
			id: 'inputGroup-0',
			price: basePrice,
			priceListId: (priceLists || [])[0]?.value || 0,
			unitOfMeasureKey: (unitOfMeasures || [])[0]?.value || null,
		},
	]);
	const inputGroupCounterRef = useRef(0);
	const hasUnitOfMeasuresRef = useRef(!!(unitOfMeasures || []).length);

	const AdminPricingResource = useMemo(
		() => CommerceServiceProvider.AdminPricingAPI('v2'),
		[]
	);

	const closeModal = (modalConfig = {}) => {
		const openerWindow = Liferay.Util.getOpener();

		openerWindow.Liferay.fire('closeModal', modalConfig);

		if (dataSetId && openerWindow.originalOpenerLiferay) {
			openerWindow.originalOpenerLiferay.fire(
				commerceEvents.FDS_UPDATE_DISPLAY,
				{
					id: dataSetId,
				}
			);

			delete openerWindow.originalOpenerLiferay;
		}
	};

	const getInputGroup = (inputGroupId) => {
		const inputGroup = inputGroups.find((item) => item.id === inputGroupId);

		if (inputGroup) {
			return inputGroup;
		}

		throw new Error(`No input group found for id ${inputGroupId}`);
	};

	const onChangePriceHandler = ({inputGroupId, price}) => {
		const inputGroup = getInputGroup(inputGroupId);
		inputGroup.price = price;
		setInputGroups([...inputGroups]);
	};

	const onChangePriceListHandler = ({inputGroupId, priceListId}) => {
		const inputGroup = getInputGroup(inputGroupId);
		inputGroup.priceListId = priceListId;
		setInputGroups([...inputGroups]);
	};

	const onChangeUnitOfMeasureHandler = ({inputGroupId, unitOfMeasureKey}) => {
		const inputGroup = getInputGroup(inputGroupId);
		inputGroup.unitOfMeasureKey = unitOfMeasureKey;
		setInputGroups([...inputGroups]);
	};

	const onRemoveInputGroupHandler = (id) => {
		removeInputGroup(id);
	};

	const removeInputGroup = (id) => {
		setInputGroups((inputGroups) =>
			inputGroups.filter((inputGroup) => inputGroup.id !== id)
		);
	};

	const submitForm = async (event) => {
		event.preventDefault();

		const form = event.currentTarget;

		const error = form.querySelector('.has-error');

		if (!error) {
			const promises = inputGroups.map((inputGroup) => {
				return AdminPricingResource.addPriceEntry(
					inputGroup.priceListId,
					{
						price: inputGroup.price,
						priceListId: inputGroup.priceListId,
						skuId: cpInstanceId,
						unitOfMeasureKey: inputGroup.unitOfMeasureKey,
					}
				)
					.then((result) => {
						result.inputGroupId = inputGroup.id;
						result.success = true;

						return result;
					})
					.catch((error) => {
						error.success = false;

						return error;
					});
			});

			const results = await Promise.all(promises);

			const validResults = results.filter((result) => result.success);

			if (validResults.length === inputGroups.length) {
				closeModal({
					id: `${namespace}addPriceEntryDialog`,
				});
			}
			else {
				validResults.forEach((result) => {
					removeInputGroup(result.inputGroupId);
				});
				Liferay.Util.openToast({
					message: Liferay.Language.get(
						'your-request-failed-to-complete-for-these-items'
					),
					title: Liferay.Language.get('error'),
					type: 'danger',
				});
			}
		}
	};

	return (
		
			{inputGroups.map((inputGroup, index) => (
				
					
						
							
								
									{Liferay.Language.get('price-list')}

									
										
									
								

								 {
										onChangePriceListHandler({
											inputGroupId: inputGroup.id,
											priceListId: target.value,
										});
									}}
									options={priceLists}
									required={true}
								/>
							

							{hasUnitOfMeasuresRef.current ? (
								
									
										{Liferay.Language.get(
											'unit-of-measure'
										)}

										
											
										
									

									 {
											onChangeUnitOfMeasureHandler({
												inputGroupId: inputGroup.id,
												unitOfMeasureKey: target.value,
											});
										}}
										options={unitOfMeasures}
										required={true}
									/>
								
							) : (
								<>
							)}

							
								
									{Liferay.Language.get('unit-price')}

									
										
									
								

								
									
										 {
												onChangePriceHandler({
													inputGroupId: inputGroup.id,
													price: target.value,
												});
											}}
											required={true}
											step={
												1 /
												Math.pow(10, maxFractionDigits)
											}
											type="number"
											value={inputGroup.price}
										/>
									

									
										
											{currency}
										
									
								
							

							
								{index !== 0 && (
									
											onRemoveInputGroupHandler(
												inputGroup.id
											)
										}
										size="sm"
										symbol="trash"
									/>
								)}
							
						
					
				
			))}

			
				 {
						setInputGroups((prevState) => [
							...prevState,
							{
								id: `inputGroup-${++inputGroupCounterRef.current}`,
								price: basePrice,
								priceListId: (priceLists || [])[0]?.value || 0,
								unitOfMeasureKey:
									(unitOfMeasures || [])[0]?.value || null,
							},
						]);
					}}
				>
					
						
					

					{Liferay.Language.get('add-entry')}
				
			
		
	);
}

AddPriceEntryForm.defaultProps = {
	basePrice: 0,
	maxFractionDigits: 2,
};

AddPriceEntryForm.propTypes = {
	basePrice: PropTypes.number.isRequired,
	cpInstanceId: PropTypes.number.isRequired,
	currency: PropTypes.string.isRequired,
	dataSetId: PropTypes.string,
	maxFractionDigits: PropTypes.number,
	namespace: PropTypes.string.isRequired,
	priceLists: PropTypes.arrayOf(
		PropTypes.shape({
			label: PropTypes.string.isRequired,
			value: PropTypes.number.isRequired,
		})
	).isRequired,
	unitOfMeasures: PropTypes.arrayOf(
		PropTypes.shape({
			label: PropTypes.string.isRequired,
			value: PropTypes.string.isRequired,
		})
	),
};

export default AddPriceEntryForm;