META-INF.resources.js.info_box.modal.InfoBoxModalTermInput.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.commerce.order.content.web
Liferay Commerce Order Content Web
The newest version!
/**
 * SPDX-FileCopyrightText: (c) 2024 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 {ClaySelect} from '@clayui/form';
import {CommerceServiceProvider} from 'commerce-frontend-js';
import React, {useCallback, useEffect, useState} from 'react';

import '../../../css/index.scss';

const InfoBoxModalTermInput = ({
	additionalProps: {termDescription},
	field,
	inputValue,
	isOpen,
	orderId,
	setInputValue,
	setIsValid,
	setParseResponse,
	spritemap,
}) => {
	const [selectedTermDescription, setSelectedTermDescription] =
		useState(termDescription);
	const [terms, setTerms] = useState([]);

	const getTermsPage = useCallback(
		(orderId) => {
			if (field === 'deliveryTermId') {
				return CommerceServiceProvider.DeliveryCartAPI(
					'v1'
				).getCartDeliveryTermsPage(orderId);
			}
			else if (field === 'paymentTermId') {
				return CommerceServiceProvider.DeliveryCartAPI(
					'v1'
				).getCartPaymentTermsPage(orderId);
			}

			return Promise.resolve({terms: []});
		},
		[field]
	);

	const handleTermChange = (event) => {
		const selectedId = Number(event.target.value);

		setInputValue(selectedId);

		const selectedTerm = terms.find((term) => term.id === selectedId);

		setSelectedTermDescription(
			selectedTerm ? selectedTerm.description : ''
		);
	};

	useEffect(() => {
		setParseResponse(() => (field, response) => {
			if (field === 'deliveryTermId') {
				return response['deliveryTermLabel'];
			}
			else if (field === 'paymentTermId') {
				return response['paymentTermLabel'];
			}

			return '';
		});
	}, [field, setParseResponse]);

	useEffect(() => {
		if (terms.length === 1 && !inputValue) {
			setInputValue(terms[0].id);
		}
		if (terms.length && inputValue) {
			const selectedTerm = terms.find(
				(term) => term.id === Number(inputValue)
			);

			setSelectedTermDescription(
				selectedTerm ? selectedTerm.description : ''
			);
		}
	}, [terms, inputValue, setInputValue]);

	useEffect(() => {
		getTermsPage(orderId)
			.then((response) => {
				const terms = response.items || [];

				if (terms.length === 1) {
					setSelectedTermDescription(terms[0].description);
				}

				setIsValid(!!terms.length);
				setTerms(terms);
			})
			.catch((error) => {
				setIsValid(false);
				setTerms([]);

				Liferay.Util.openToast({
					message:
						error.detail ||
						error.errorDescription ||
						Liferay.Language.get(
							'an-unexpected-system-error-occurred'
						),
					type: 'danger',
				});
			});
	}, [getTermsPage, field, orderId, setIsValid]);

	return (
		<>
			{!!terms.length && isOpen && (
				<>
					
						{terms.length > 1 && (
							
						)}

						{terms.map((term) => (
							
						))}
					
					{selectedTermDescription && (
						
					)}
				
			)}
			{!!terms.length && !isOpen && (
				
			)}
			{!terms.length && (
				
					{field === 'deliveryTermId'
						? Liferay.Language.get(
								'there-are-no-available-delivery-terms'
							)
						: Liferay.Language.get(
								'there-are-no-available-payment-terms'
							)}
				
			)}
		
	);
};

export default InfoBoxModalTermInput;