META-INF.resources.js.multishipping.DeliveryGroupModal.tsx 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
There is a newer version: 4.0.133
/**
 * 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 ClayForm, {ClayInput} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import ClayModal from '@clayui/modal';
import {Observer} from '@clayui/modal/lib/types';
import classnames from 'classnames';
import {sub} from 'frontend-js-web';
import React, {useCallback, useRef, useState} from 'react';

import AddressSelector from './AddressSelector';
import ErrorMessage from './ErrorMessage';
import {IDeliveryGroup, IFieldError, IPostalAddress} from './Types';

const MANDATORY_FIELDS = ['name'];

interface IDeliveryGroupModalProps {
	onOpenModal(value: boolean): void;
	accountId: number;
	deliveryGroup?: IDeliveryGroup;
	handleSubmit: any;
	hasManageAddressesPermission?: boolean;
	namespace?: string;
	observerModal: Observer;
	spritemap?: string;
}

const DeliveryGroupModal = ({
	accountId,
	deliveryGroup,
	handleSubmit,
	hasManageAddressesPermission = true,
	namespace = 'DeliveryGroupModal',
	observerModal,
	onOpenModal,
	spritemap = '',
}: IDeliveryGroupModalProps) => {
	const formRef = useRef(null);
	const [deliveryGroupState, setDeliveryGroupState] =
		useState(
			deliveryGroup || {
				addressId: 0,
				deliveryDate: '',
				id: 0,
				name: '',
			}
		);
	const [errors, setErrors] = useState(
		deliveryGroup
			? {}
			: MANDATORY_FIELDS.reduce((map: IFieldError, field) => {
					map[field] = '';

					return map;
				}, {})
	);
	const [handleAddressSubmit, setHandleAddressSubmit] = useState(
		() =>
			async (event: Event): Promise => {
				event.preventDefault();

				return {id: 0};
			}
	);
	const [isAddressFormValid, setIsAddressFormValid] = useState(false);

	const handleFieldChange = useCallback(
		({
			target: {name: fieldName, value},
		}: {
			target: {
				name: string;
				value: boolean | number | string | undefined;
			};
		}) => {
			setDeliveryGroupState((prevState) => ({
				...prevState,
				[fieldName]: value,
			}));

			if (MANDATORY_FIELDS.includes(fieldName)) {
				setErrors((prevState) => {
					if (!value) {
						return {
							...prevState,
							[fieldName]: Liferay.Language.get(
								'this-field-is-required'
							),
						};
					}
					else {
						delete prevState[fieldName];

						return {
							...prevState,
						};
					}
				});
			}
		},
		[]
	);

	const handleFormSubmit = useCallback(
		async (event) => {
			event.preventDefault();

			if (isAddressFormValid && !!deliveryGroupState.name?.length) {
				const address = await handleAddressSubmit(event);

				if (address && address.id) {
					const updatedDeliveryGroup = {
						...deliveryGroupState,
						address,
						addressId: address.id,
					};

					handleSubmit(updatedDeliveryGroup);
				}
			}
		},
		[
			deliveryGroupState,
			handleAddressSubmit,
			handleSubmit,
			isAddressFormValid,
		]
	);

	return (
		
			
				{sub(
					deliveryGroup
						? Liferay.Language.get('edit-x')
						: Liferay.Language.get('add-x'),
					Liferay.Language.get('delivery-group')
				)}
			

			
				
					
						
							{Liferay.Language.get('group-name')}

							
						

						

						
					

					
						
							{Liferay.Language.get('shipping-address')}
						

						
					

					
						
							{Liferay.Language.get('delivery-date')}
						

						
							
								{Liferay.Language.get('date')}
							

							
						
					
				
			

			
						 onOpenModal(false)}
						>
							{Liferay.Language.get('cancel')}
						

						
							{Liferay.Language.get('save')}
						
					
				}
			/>
		
	);
};

export default DeliveryGroupModal;