META-INF.resources.js.info_box.DefaultView.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 ClayButton from '@clayui/button';
import {useModal} from '@clayui/modal';
import {CommerceServiceProvider, commerceEvents} from 'commerce-frontend-js';
import {openToast, sub} from 'frontend-js-web';
import React, {useCallback, useEffect, useState} from 'react';

import InfoBoxModal from '../InfoBoxModal';
import {formatValue, isEditable} from '../util';

const DefaultView = ({
	additionalProps,
	buttonDisplayType,
	elementId,
	field,
	fieldValue,
	fieldValueType,
	hasPermission,
	isOpen,
	label,
	namespace,
	orderId,
	readOnly,
	spritemap,
}) => {
	const {observer, onOpenChange, open} = useModal();
	const [inputValue, setInputValue] = useState(
		additionalProps?.value ? additionalProps?.value : fieldValue
	);
	const [currentValue, setCurrentValue] = useState(inputValue);
	const [parseRequest, setParseRequest] = useState(
		() => (field, inputValue) => {
			return {
				[field]: inputValue,
			};
		}
	);
	const [parseResponse, setParseResponse] = useState(
		() => (field, response) => {
			if (response) {
				return response[field];
			}

			return null;
		}
	);
	const [value, setValue] = useState(fieldValue);

	const submitOrder = useCallback(
		(inputValue) => {
			const updateOrder = isOpen
				? CommerceServiceProvider.DeliveryCartAPI('v1').updateCartById
				: CommerceServiceProvider.DeliveryOrderAPI('v1')
						.updatePlacedOrderById;

			updateOrder(orderId, parseRequest(field, inputValue))
				.then((order) => {
					setCurrentValue(inputValue);
					setValue(parseResponse(field, order));

					onOpenChange(false);

					Liferay.fire(commerceEvents.ORDER_INFORMATION_ALTERED, {
						order,
					});
				})
				.catch((error) => {
					openToast({
						message:
							error.message ||
							Liferay.Language.get(
								'an-unexpected-error-occurred'
							),
						type: 'danger',
					});
				});
		},
		[
			field,
			isOpen,
			onOpenChange,
			orderId,
			parseRequest,
			parseResponse,
			setCurrentValue,
			setValue,
		]
	);

	const [handleSubmit, setHandleSubmit] = useState(() => async (event) => {
		event.preventDefault();

		await submitOrder(inputValue);
	});

	useEffect(() => {
		setHandleSubmit(() => async (event) => {
			event.preventDefault();

			await submitOrder(inputValue);
		});
	}, [inputValue, setHandleSubmit, submitOrder]);

	return (
		<>
			
				
					{label ? (
						{label}
					) : null}

					{hasPermission && !readOnly && isEditable(field, isOpen) ? (
						 {
								setInputValue(currentValue);

								onOpenChange(true);
							}}
							size="xs"
						>
							{value
								? Liferay.Language.get('edit')
								: Liferay.Language.get('add')}
						
					) : null}
				

				
					{value ? (
						
							{formatValue(value, fieldValueType)}
						
					) : (
						
								hasPermission &&
								!readOnly &&
								isEditable(field, isOpen) &&
								onOpenChange(true)
							}
						>
							{Liferay.Language.get('not-set')}
						
					)}
				
			

			{hasPermission && !readOnly && isEditable(field, isOpen) ? (
				
			) : null}
		
	);
};

export default DefaultView;