META-INF.resources.components.account_selector.views.AccountCreationModalBody.js Maven / Gradle / Ivy

Go to download
/**
 * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
 * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
 */

import {useResource} from '@clayui/data-provider';
import ClayForm, {ClayInput, ClaySelect} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import ClayModal from '@clayui/modal';
import ClayMultiSelect from '@clayui/multi-select';
import {fetch} from 'frontend-js-web';
import React, {useMemo, useState} from 'react';

const ORGANIZATIONS_ROOT_ENDPOINT = '/o/headless-admin-user/v1.0/organizations';

const orgUrl = new URL(
	`${themeDisplay.getPathContext()}${ORGANIZATIONS_ROOT_ENDPOINT}`,
	themeDisplay.getPortalURL()
);

export default function AccountCreationModalBody({
	accountData,
	accountTypes,
	setAccountData,
}) {
	const [organizationQuery, setOrganizationQuery] = useState('');
	const [organizationError, setOrganizationError] = useState(false);

	const [networkStatus, setNetworkStatus] = useState(4);
	const {resource = []} = useResource({
		fetch: async (link, options) => {
			const result = await fetch(link, options);
			const json = await result.json();

			return json.items.map((item) => ({
				label: item.name,
				value: item.id,
			}));
		},
		fetchPolicy: 'cache-first',
		link: orgUrl.toString(),
		onNetworkStatusChange: setNetworkStatus,
	});

	const availableOrganizations = useMemo(() => {
		if (!resource) {
			return [];
		}

		const accountValues = accountData.organizations.map(
			(item) => item.value
		);

		return resource.filter((org) => !accountValues.includes(org.value));
	}, [accountData.organizations, resource]);

	return (
		
			
				
					{Liferay.Language.get('account-name')}

					
						

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

				
						setAccountData({
							...accountData,
							name: event.target.value,
						})
					}
					required
					type="text"
					value={accountData.name}
				/>
			

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

				 {
						setOrganizationError(false);

						const validItems = [];

						newItems.map((item) => {
							if (
								resource.find(
									(organization) =>
										organization.label.toLowerCase() ===
										item.label.toLowerCase()
								)
							) {
								validItems.push(item);
							}
							else {
								setOrganizationError(true);
							}
						});

						setAccountData({
							...accountData,
							organizations: validItems,
						});
					}}
					sourceItems={availableOrganizations}
					value={organizationQuery}
				/>

				{organizationError && (
					
						
							

							{Liferay.Language.get('select-from-list')}
						
					
				)}
			

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

				
					{accountTypes.map((type) => (
						
								setAccountData({
									...accountData,
									type: event.target.value,
								})
							}
							value={accountData.type}
						/>
					))}
				
			

			
				
					{Liferay.Language.get('tax-id')}

					
						
					
				

				
						setAccountData({
							...accountData,
							taxId: event.target.value,
						})
					}
					type="text"
					value={accountData.taxId}
				/>
			

			
				
					{Liferay.Language.get('external-reference-code')}
				

				
						setAccountData({
							...accountData,
							externalReferenceCode: event.target.value,
						})
					}
					type="text"
					value={accountData.externalReferenceCode}
				/>
			

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

				
						setAccountData({
							...accountData,
							description: event.target.value,
						})
					}
					type="text"
					value={accountData.description}
				/>
			
		
	);
}