diff --git a/packages/account/src/Components/poi/poi-confirm-with-example-form-container/poi-confirm-with-example-form-container.tsx b/packages/account/src/Components/poi/poi-confirm-with-example-form-container/poi-confirm-with-example-form-container.tsx index 63949898186a..e2581a34742e 100644 --- a/packages/account/src/Components/poi/poi-confirm-with-example-form-container/poi-confirm-with-example-form-container.tsx +++ b/packages/account/src/Components/poi/poi-confirm-with-example-form-container/poi-confirm-with-example-form-container.tsx @@ -2,9 +2,9 @@ import React from 'react'; import classNames from 'classnames'; import { Form, Formik, FormikHelpers } from 'formik'; import { GetSettings } from '@deriv/api-types'; -import { Checkbox, Loading, Text } from '@deriv/components'; +import { Checkbox, HintBox, Loading, Text } from '@deriv/components'; +import { Localize, localize } from '@deriv/translations'; import { filterObjProperties, isMobile, toMoment, validLength, validName, WS } from '@deriv/shared'; -import { localize } from '@deriv/translations'; import FormBody from 'Components/form-body'; import LoadErrorMessage from 'Components/load-error-message'; import PersonalDetailsForm from 'Components/forms/personal-details-form'; @@ -66,12 +66,12 @@ const PoiConfirmWithExampleFormContainer = ({ const onSubmit = async (values: TValues, { setStatus, setSubmitting }: FormikHelpers) => { if (checked) return; - setStatus({ msg: '' }); + setStatus({ error_msg: '' }); const request = makeSettingsRequest(values); const data = await WS.setSettings(request); if (data.error) { - setStatus({ msg: data.error.message }); + setStatus({ error_msg: data.error.message }); setSubmitting(false); } else { const response = await WS.authorized.storage.getSettings(); @@ -156,6 +156,7 @@ const PoiConfirmWithExampleFormContainer = ({ isSubmitting, setFieldValue, setFieldTouched, + status, }) => (
@@ -188,6 +189,21 @@ const PoiConfirmWithExampleFormContainer = ({ disabled={isSubmitting} /> + {status?.error_msg && ( +
+ + + + } + is_danger + /> +
+ )}
)} diff --git a/packages/core/src/sass/app/_common/components/onfido-container.scss b/packages/core/src/sass/app/_common/components/onfido-container.scss index 0e8b829ce1ff..e7f05d1aee53 100644 --- a/packages/core/src/sass/app/_common/components/onfido-container.scss +++ b/packages/core/src/sass/app/_common/components/onfido-container.scss @@ -78,6 +78,11 @@ max-width: unset; } + &--status-message { + margin-top: 1.6rem; + text-align: center; + width: 100%; + } &_container { @include desktop() { border: 1px solid var(--general-active);