Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
Merged
44 changes: 32 additions & 12 deletions client/components/CustomFieldsForm.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]) => {
Expand Down
5 changes: 3 additions & 2 deletions client/omnichannel/directory/ContactForm.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down Expand Up @@ -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)) {
Expand Down Expand Up @@ -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>
Expand Down