[FIX] Omnichannel - Contact Center form is not validating custom fields properly

client/components/CustomFieldsForm.js

@@ -5,45 +5,65 @@ import { useSetting } from '../contexts/SettingsContext';
 import { useForm } from '../hooks/useForm';
 import { useTranslation } from '../contexts/TranslationContext';
 import { capitalize } from '../lib/capitalize';
+import { useComponentDidUpdate } from '../hooks/useComponentDidUpdate';
 
-const CustomTextInput = ({ name, required, minLength, maxLength, setState, state, className }) => {
+const CustomTextInput = ({ name, required, minLength, maxLength, setState, state, className, setCustomFieldsError = () => [] }) => {
 	const t = useTranslation();
 
+	const [inputError, setInputError] = useState('');
+
 	const verify = useMemo(() => {
 		const errors = [];
-
 		if (!state && required) {
-			errors.push(t('Field_required'));
+			errors.push(t('The_field_is_required', name));
 		}
 
 		if (state.length < minLength && state.length > 0) {
 			errors.push(t('Min_length_is', minLength));
 		}
 
 		return errors.join(', ');
-	}, [state, required, minLength, t]);
+	}, [state, required, minLength, t, name]);
+
+	useEffect(() => {
+		setCustomFieldsError((oldErrors) => (verify ? [...oldErrors, { name }] : oldErrors.filter((item) => item.name !== name)));
+	}, [name, setCustomFieldsError, verify]);
+
+	useComponentDidUpdate(() => {
+		setInputError(verify);
+	}, [verify]);
 
 	return useMemo(() => <Field className={className}>
 		<Field.Label>{t(name)}{required && '*'}</Field.Label>
 		<Field.Row>
-			<TextInput name={name} error={verify} maxLength={maxLength} flexGrow={1} value={state} required={required} onChange={(e) => setState(e.currentTarget.value)}/>
+			<TextInput name={name} error={inputError} maxLength={maxLength} flexGrow={1} value={state} onChange={(e) => setState(e.currentTarget.value)}/>
 		</Field.Row>
-		<Field.Error>{verify}</Field.Error>
-	</Field>, [className, t, name, verify, maxLength, state, required, setState]);
+		<Field.Error>{inputError}</Field.Error>
+	</Field>, [className, t, name, required, inputError, maxLength, state, setState]);
 };
 
-const CustomSelect = ({ name, required, options = {}, setState, state, className }) => {
+const CustomSelect = ({ name, required, options = {}, setState, state, className, setCustomFieldsError = () => [] }) => {
 	const t = useTranslation();
+	const [selectError, setSelectError] = useState('');
+
 	const mappedOptions = useMemo(() => Object.values(options).map((value) => [value, value]), [options]);
-	const verify = useMemo(() => (!state.length && required ? t('Field_required') : ''), [required, state.length, t]);
+	const verify = useMemo(() => (!state.length && required ? t('The_field_is_required', name) : ''), [name, required, state.length, t]);
+
+	useEffect(() => {
+		setCustomFieldsError((oldErrors) => (verify ? [...oldErrors, { name }] : oldErrors.filter((item) => item.name !== name)));
+	}, [name, setCustomFieldsError, verify]);
+
+	useComponentDidUpdate(() => {
+		setSelectError(verify);
+	}, [verify]);
 
 	return useMemo(() => <Field className={className}>
 		<Field.Label>{t(name)}{required && '*'}</Field.Label>
 		<Field.Row>
-			<Select name={name} error={verify} flexGrow={1} value={state} options={mappedOptions} required={required} onChange={(val) => setState(val)}/>
+			<Select name={name} error={selectError} flexGrow={1} value={state} options={mappedOptions} onChange={(val) => setState(val)}/>
 		</Field.Row>
-		<Field.Error>{verify}</Field.Error>
-	</Field>, [className, t, name, verify, state, mappedOptions, required, setState]);
+		<Field.Error>{selectError}</Field.Error>
+	</Field>, [className, t, name, required, selectError, state, mappedOptions, setState]);
 };
 
 const CustomFieldsAssembler = ({ formValues, formHandlers, customFields, ...props }) => Object.entries(customFields).map(([key, value]) => {

client/omnichannel/directory/ContactForm.js

@@ -96,6 +96,7 @@ export function ContactNewEdit({ id, data, reload, close }) {
 	const [nameError, setNameError] = useState();
 	const [emailError, setEmailError] = useState();
 	const [phoneError, setPhoneError] = useState();
+	const [customFieldsError, setCustomFieldsError] = useState([]);
 
 	const { value: allCustomFields, phase: state } = useEndpointData('livechat/custom-fields');
 
@@ -193,7 +194,7 @@ export function ContactNewEdit({ id, data, reload, close }) {
 		}
 	});
 
-	const formIsValid = name && !emailError && !phoneError;
+	const formIsValid = name && !emailError && !phoneError && customFieldsError.length === 0;
 
 
 	if ([state].includes(AsyncStatePhase.LOADING)) {
@@ -230,7 +231,7 @@ export function ContactNewEdit({ id, data, reload, close }) {
 				</Field.Error>
 			</Field>
 			{ canViewCustomFields() && allCustomFields
-			&& <CustomFieldsForm jsonCustomFields={jsonCustomField} customFieldsData={livechatData} setCustomFieldsData={handleLivechatData} /> }
+			&& <CustomFieldsForm jsonCustomFields={jsonCustomField} customFieldsData={livechatData} setCustomFieldsData={handleLivechatData} setCustomFieldsError={setCustomFieldsError} /> }
 			{ ContactManager && <ContactManager value={username} handler={handleUsername} /> }
 		</VerticalBar.ScrollableContent>
 		<VerticalBar.Footer>