From 6410ed5f064195d8e6fd577d91a8f9614c4303dd Mon Sep 17 00:00:00 2001
From: Shahzaib <shahzaib@deriv.com>
Date: Thu, 11 May 2023 10:49:47 +0800
Subject: [PATCH] chore: error message banner for onfido flow

---
 ...oi-confirm-with-example-form-container.tsx | 24 +++++++++++++++----
 .../_common/components/onfido-container.scss  |  5 ++++
 2 files changed, 25 insertions(+), 4 deletions(-)

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 77a2180ff803..4d6be5b12d5a 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 } from '@deriv/components';
+import { Checkbox, HintBox, Loading, Text } from '@deriv/components';
 import { filterObjProperties, toMoment, validLength, validName, WS } from '@deriv/shared';
-import { localize } from '@deriv/translations';
+import { Localize, 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';
@@ -63,12 +63,12 @@ const PoiConfirmWithExampleFormContainer = ({
 
     const onSubmit = async (values: TValues, { setStatus, setSubmitting }: FormikHelpers<TValues>) => {
         if (checked) return;
-        setStatus({ msg: '' });
+        setStatus({ error: false, msg: '' });
         const request = makeSettingsRequest(values);
         const data = await WS.setSettings(request);
 
         if (data.error) {
-            setStatus({ msg: data.error.message });
+            setStatus({ error: true, msg: data.error.message });
             setSubmitting(false);
         } else {
             const response = await WS.authorized.storage.getSettings();
@@ -148,6 +148,7 @@ const PoiConfirmWithExampleFormContainer = ({
                 isSubmitting,
                 setFieldValue,
                 setFieldTouched,
+                status,
             }) => (
                 <Form className='account-form__poi-confirm-example' onSubmit={handleSubmit}>
                     <FormBody>
@@ -176,6 +177,21 @@ const PoiConfirmWithExampleFormContainer = ({
                                 disabled={isSubmitting}
                             />
                         </button>
+                        {status?.error && (
+                            <div className='account-form__poi-confirm-example--status-message'>
+                                <HintBox
+                                    icon='IcAlertDanger'
+                                    icon_height={16}
+                                    icon_width={16}
+                                    message={
+                                        <Text as='p' size='xxxs'>
+                                            <Localize i18n_default_text='Sorry, an internal error occurred. Hit the above checkbox to try again.' />
+                                        </Text>
+                                    }
+                                    is_danger
+                                />
+                            </div>
+                        )}
                     </FormBody>
                 </Form>
             )}
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 10aa7f1e8203..7e7998c071ff 100644
--- a/packages/core/src/sass/app/_common/components/onfido-container.scss
+++ b/packages/core/src/sass/app/_common/components/onfido-container.scss
@@ -83,6 +83,11 @@
             max-width: unset;
         }
 
+        &--status-message {
+            margin-top: 1.6rem;
+            text-align: center;
+            width: 100%;
+        }
         &_container {
             @include desktop() {
                 border: 1px solid var(--general-active);