META-INF.resources.js.info_box.modal.InfoBoxModalAddressInput.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 ClayForm, {
	ClayInput,
	ClaySelect,
	ClaySelectWithOption,
} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import classnames from 'classnames';
import {CommerceServiceProvider} from 'commerce-frontend-js';
import {openToast, sub} from 'frontend-js-web';
import React, {useEffect, useState} from 'react';

const InfoBoxModalAddressInput = ({
	additionalProps,
	field,
	inputValue,
	label,
	orderId,
	setHandleSubmit,
	setInputValue,
	setParseRequest,
	setParseResponse,
	submitOrder,
}) => {
	const [addresses, setAddresses] = useState([]);
	const [countries, setCountries] = useState([]);
	const [errors, setErrors] = useState({});
	const [hasRegions, setHasRegions] = useState(false);

	const getAddressType = () => {
		if (field === 'billingAddress') {
			return 'billing';
		}

		if (field === 'shippingAddress') {
			return 'shipping';
		}

		return null;
	};

	const [currentAddress, setCurrentAddress] = useState({
		addressType: getAddressType(),
		id: 0,
		primary: false,
	});

	const checkRequiredFields = (currentAddress) => {
		if (currentAddress.id !== 0) {
			return false;
		}

		const curErrors = {};

		if (!currentAddress.addressCountry) {
			curErrors['infoBoxModalAddressCountryInput'] = Liferay.Language.get(
				'this-field-is-required'
			);
		}

		if (!currentAddress.addressLocality) {
			curErrors['infoBoxModalAddressCityInput'] = Liferay.Language.get(
				'this-field-is-required'
			);
		}

		if (!currentAddress.addressRegion && hasRegions) {
			curErrors['infoBoxModalAddressRegionInput'] = Liferay.Language.get(
				'this-field-is-required'
			);
		}

		if (!currentAddress.name) {
			curErrors['infoBoxModalAddressNameInput'] = Liferay.Language.get(
				'this-field-is-required'
			);
		}

		if (!currentAddress.postalCode) {
			curErrors['infoBoxModalAddressZipInput'] = Liferay.Language.get(
				'this-field-is-required'
			);
		}

		if (!currentAddress.streetAddressLine1) {
			curErrors['infoBoxModalAddressStreet1Input'] = Liferay.Language.get(
				'this-field-is-required'
			);
		}

		setErrors((prevState) => ({
			...prevState,
			...curErrors,
		}));

		return Object.keys(curErrors).length;
	};

	const ErrorMessage = ({errors, name}) => {
		return (
			<>
				{!!errors[name] && (
					
						

						{errors[name]}
					
				)}
			
		);
	};

	const handleAddressChange = ({target: {value}}) => {
		setInputValue(value);
	};

	const onChangeHandler = ({target}) => {
		const curErrors = errors;

		if (!target.value || target.value.length <= 0) {
			curErrors[target.id] = Liferay.Language.get(
				'this-field-is-required'
			);
		}
		else {
			delete curErrors[target.id];
		}

		setErrors((prevState) => ({
			...prevState,
			...curErrors,
		}));
	};

	useEffect(() => {
		const [selectedAddress] = addresses.filter(
			(address) => address.id === Number(inputValue)
		);

		setCurrentAddress(
			selectedAddress
				? selectedAddress
				: {addressType: getAddressType(), id: 0, primary: false}
		);

		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [addresses, inputValue]);

	useEffect(() => {
		if (currentAddress.id !== 0) {
			setErrors({});
		}

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

			if (currentAddress.id === 0) {
				if (checkRequiredFields(currentAddress)) {
					return;
				}

				CommerceServiceProvider.AdminUserAPI('v1')
					.postPostalAddress(
						Liferay.CommerceContext.account.accountId,
						currentAddress
					)
					.then((response) => {
						submitOrder(response.id);
					})
					.catch((error) => {
						openToast({
							message:
								error.detail ||
								error.errorDescription ||
								Liferay.Language.get(
									'an-unexpected-system-error-occurred'
								),
							type: 'danger',
						});
					});
			}
			else {
				submitOrder(Number(inputValue));
			}
		});

		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [currentAddress]);

	useEffect(() => {
		CommerceServiceProvider.AdminUserAPI('v1')
			.getPostalAddresses(Liferay.CommerceContext.account.accountId)
			.then(({items}) => {
				setAddresses(
					items.filter(
						(item) =>
							item.addressType === 'billing-and-shipping' ||
							item.addressType === getAddressType()
					)
				);
			})
			.catch((error) => {
				setAddresses([]);

				openToast({
					message:
						error.detail ||
						error.errorDescription ||
						Liferay.Language.get(
							'an-unexpected-system-error-occurred'
						),
					type: 'danger',
				});
			});

		CommerceServiceProvider.AdminAddressAPI('v1')
			.getCountries()
			.then((data) => {
				setCountries(
					(data?.items || [])
						.filter((country) => {
							return country.active;
						})
						.map((country) => {
							country.name =
								country.title_i18n[
									Liferay.ThemeDisplay.getLanguageId()
								] || country.title_i18n['en_US'];

							return country;
						})
						.sort((a, b) => {
							return a.name > b.name
								? 1
								: b.name > a.name
									? -1
									: 0;
						})
				);
			})
			.catch((error) => {
				setCountries([]);

				openToast({
					message:
						error.detail ||
						error.errorDescription ||
						Liferay.Language.get(
							'an-unexpected-system-error-occurred'
						),
					type: 'danger',
				});
			});

		setParseRequest(() => (field, inputValue) => {
			return {
				[field + 'Id']: Number(inputValue),
			};
		});
		setParseResponse(() => (field, response) => {
			return response[field];
		});

		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	return (
		<>
			
				{sub(Liferay.Language.get('choose-x'), label)}
			

			
				{additionalProps.hasManageAddressesPermission ? (
					
				) : null}

				{addresses.map((address) => (
					
				))}
			

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

							
						

						 {
								event.preventDefault();

								setCurrentAddress({
									...currentAddress,
									name: event.target.value,
								});

								onChangeHandler(event);
							}}
							type="text"
							value={currentAddress?.name ?? ''}
						/>

						
					

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

							
						

						 {
								event.preventDefault();

								setCurrentAddress({
									...currentAddress,
									addressCountry: event.target.value,
									addressRegion: null,
								});

								setHasRegions(
									!!countries.find(
										(country) =>
											country.name === event.target.value
									)?.regions?.length
								);

								onChangeHandler(event);
							}}
							options={[
								{},
								...countries.map((country) => {
									return {
										'aria-label': country.name,
										'label':
											country.title_i18n[
												Liferay.ThemeDisplay.getLanguageId()
											] || country.title_i18n['en_US'],
										'value': country.name,
									};
								}),
							]}
							value={currentAddress?.addressCountry ?? ''}
						/>

						
					

					
						
							{Liferay.Language.get('address-line-1')}

							
						

						 {
								event.preventDefault();

								setCurrentAddress({
									...currentAddress,
									streetAddressLine1: event.target.value,
								});

								onChangeHandler(event);
							}}
							type="text"
							value={currentAddress?.streetAddressLine1 ?? ''}
						/>

						
					
				
			

			
				
					
						
							{Liferay.Language.get('address-line-2')}
						

						 {
								event.preventDefault();

								setCurrentAddress({
									...currentAddress,
									streetAddressLine2: event.target.value,
								});
							}}
							type="text"
							value={currentAddress?.streetAddressLine2 ?? ''}
						/>
					

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

							
						

						 {
								event.preventDefault();

								setCurrentAddress({
									...currentAddress,
									addressLocality: event.target.value,
								});

								onChangeHandler(event);
							}}
							type="text"
							value={currentAddress?.addressLocality ?? ''}
						/>

						
					

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

							
						

						 {
								event.preventDefault();

								setCurrentAddress({
									...currentAddress,
									postalCode: event.target.value,
								});

								onChangeHandler(event);
							}}
							type="text"
							value={currentAddress?.postalCode ?? ''}
						/>

						
					
				

				
					
						
							{Liferay.Language.get('address-line-3')}
						

						 {
								event.preventDefault();

								setCurrentAddress({
									...currentAddress,
									streetAddressLine3: event.target.value,
								});
							}}
							type="text"
							value={currentAddress?.streetAddressLine3 ?? ''}
						/>
					

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

							{hasRegions && (
								
							)}
						

						 {
								event.preventDefault();

								setCurrentAddress({
									...currentAddress,
									addressRegion: event.target.value,
								});

								onChangeHandler(event);
							}}
							options={[
								{},
								...(
									(
										countries.find((country) => {
											return (
												country.name ===
												currentAddress.addressCountry
											);
										}) || {}
									).regions || []
								)
									.filter((region) => {
										return region.active;
									})
									.map((region) => {
										return {
											'aria-label': region.name,
											'label':
												region.title_i18n[
													Liferay.ThemeDisplay.getLanguageId()
												] || region.title_i18n['en_US'],
											'value': region.name,
										};
									}),
							]}
							value={currentAddress?.addressRegion ?? ''}
						/>

						
					

					
						
							{Liferay.Language.get('phone-number')}
						

						 {
								event.preventDefault();

								setCurrentAddress({
									...currentAddress,
									phoneNumber: event.target.value,
								});
							}}
							type="text"
							value={currentAddress?.phoneNumber ?? ''}
						/>
					
				
			
		
	);
};

export default InfoBoxModalAddressInput;