From fa8da5dce99e6d20bb2316396d6d463ed1e2f9ad Mon Sep 17 00:00:00 2001 From: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com> Date: Thu, 30 Nov 2023 15:36:11 +0400 Subject: [PATCH] Likhith/wall 1714/enhance error message handling for poi (#11912) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: :white_check_mark: updated testcases * fix: failing tests * refactor: code and ts fixes * fix: display of IDV error * chore: add duplication account error * refactor: added undefined check to response data * chore: review comments * chore: review comments * fix: :arrow_up: upgraded SDK and handled language change * fix: :recycle: incorporated review comments * fix: :recycle: refactored code to remove useRef * fix: barriers test fix form master * fix: barriers test * chore: refactored object.freeze to as const * chore: optional chaining to document type * chore: update spec file for idv-form * test: update personal-details spec * chore: review comments * refactor: :recycle: incorporated hooks to handle business logic * refactor: css structure * fix: barriers test * fix: :coffin: removed unwanted code * test: :fire: removed mocked tokens * chore: :memo: Added documentation for UseNotificationEvent hook * fix: :lipstick: incorporated styling * fix: :recycle: incorporated review comments * refactor: rename properties * refactor: remove is_appstore from tests * fix: :recycle: incorporated review comments * refactor: styles refactor * fix: :zap: reduced duplicate data * fix: incorporated review comments * fix: :recycle: incorporated review comments * chore: Trigger Build * fix: :truck: modified path * chore: remove unused fila and variable, updated icons * revert: :beers: removed icon changes * refactor: removed formatting * fix: removed assignment of default values * fix: :bug: unable to select a new doc supporting country * fix: :bug: resolved re-render issue * fix: :zap: resolved message issue * refactor: :truck: renamed varibales * fix: :test_tube: failing testcase * fix: :bug: resolved issues with failure messages * fix: :bug: resolved issue with DIEL accounts * fix: :bug: fixed issue for DIEL clients * fix: styling issues * fix: ts error for format-response * build: :pushpin: updated package-lock after updating onfido-sdk-ui * fix: :truck: fixed path * fix: :truck: fixed path * fix: :bug: resolved styling bugs * fix: :bug: resolved styling bugs * fix: :recycle: removed default values * fix: :fire: incorporated new styles to fix icon size * fix: :fire: incorporated new styles to fix icon size * fix: :white_check_mark: fixed failing testcase * fix: :green_heart: eslint issues * fix: :zap: incorporated platform language change * fix: removed store * fix: layout styles * fix: style issues * fix: styles * fix: moved common styles to core * refactor: incorporated review comments * fix: :lipstick: updated styles * fix: :bug: reverted code * fix: :bug: reverted code * refactor: incorporated review comments * fix: :bug: Onfido SDK language code conversion * fix: migrated hooks * revert: logic for generating code * chore: adding missing testcases * fix: recatored Onfido constants * fix: onfido screen css issues * fix: removed package-lock to resolve merge error * Merge branch 'master' into likhith/KYC-363/onfido-sdk-updation * chore: added package-lock * Merge branch 'master' into combined/wall-400/IDV-error-message-handled * chore: Trigger Build * fix: bug: /WEBREL-1358/personal-details page and poa page css issue * fix: layout button * fix: layout button * fix: mt5 next button not getting enabled * fix: resolved issue with button * fix: resolved issue with button * fix: resolved missing dropdown * fix: removed console * fix: incorporated review comments * feat: :sparkles: incorporated new images and merged checkbox feature * feat: :sparkles: incorporated new images and merged checkbox feature * refactor: split components * fix: idv failed document type * fix: removed duplicate import * fix: incorporated error message scenario * fix: styling as per new figma * fix: styling as per new figma * fix: spacing between fields * fix: spacing between fields * fix: spacing between fields * fix: incorporated new error code and styles as per new figma * fix: incorporated new error code and styles as per new figma * feat: incorporated idv-error codes * Merge branch 'master' into likhith/kyc-195/display-idv-error-messages * fix: reverted changes * Incorporate poi context (#55) * chore: incorporate POIContext to keep track of submission * chore: reset poi context state upon route change * refactor: added reset for all path * fix: changed testcases --------- Co-authored-by: Likhith Kolayari * fix: incorporated Onfido error messages * chore: removed dead code * fix: incorporated review comments * fix: incorporated review comments * fix: import paths * fix: Onfido error for failed selfie check * fix: incorporated missing status code * fix: button width * fix: Error text for Failure of IDV * fix: changed icon badge * fix: onfido check in POI * fix: failing testcase * fix: user flow for POI * fix: layout for Expired scenario in onfido * fix: styling of erro message * fix: code smells * chore: trigger rebuild * fix: issue with checkbox * fix: removed unused import * fix: added keyboard event * fix: resolved build failure * Merge branch 'master' into likhith/KYC-363/onfido-sdk-updation * fix: Onfido styles * fix: resolved code-smells * fix: resolved code smells * fix: code styling * fix: review comments * Merge remote-tracking branch 'upstream/master' into likhith/WALL-1714/enhance-error-message-handling-for-poi * Merge remote-tracking branch 'upstream/master' into likhith/WALL-1714/enhance-error-message-handling-for-poi * Merge remote-tracking branch 'upstream/master' into likhith/WALL-1714/enhance-error-message-handling-for-poi --------- Co-authored-by: yauheni-deriv <103182683+yauheni-deriv@users.noreply.github.com> Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”> Co-authored-by: Shahzaib --- .../__tests__/icon-message-list.spec.tsx | 90 +++-- .../__tests__/list-item.spec.tsx | 26 ++ .../icon-message-list/icon-message-list.tsx | 109 ++---- .../icon-message-list/list-item.tsx | 30 ++ .../idv-failed/__tests__/idv-failed.spec.tsx | 22 +- .../poi/idv-status/idv-failed/idv-failed.tsx | 110 +----- .../__tests__/idv-submit-complete.spec.tsx | 6 +- .../idv-submit-complete.tsx | 10 +- .../__tests__/poi-country-selector.spec.tsx | 6 +- .../poi-country-selector.tsx | 19 +- .../__tests__/rejected-reasons.spec.tsx | 21 +- .../rejected-reasons/{index.js => index.ts} | 0 .../Configs/__test__/poi-error-config.spec.ts | 18 + .../account/src/Configs/poi-error-config.tsx | 61 +++- .../src/Helpers/__tests__/utils.spec.tsx | 6 +- packages/account/src/Helpers/utils.tsx | 14 +- .../Verification/ProofOfIdentity/onfido.jsx | 15 +- .../proof-of-identity-submission.jsx | 12 +- packages/account/src/Styles/account.scss | 22 +- .../src/utils/constants/idv-failure-codes.ts | 8 - packages/shared/src/utils/constants/index.ts | 2 +- .../src/utils/constants/poi-failure-codes.tsx | 345 ++++++++++++++++++ .../src/utils/helpers/format-response.ts | 60 ++- 23 files changed, 688 insertions(+), 324 deletions(-) create mode 100644 packages/account/src/Components/icon-message-list/__tests__/list-item.spec.tsx create mode 100644 packages/account/src/Components/icon-message-list/list-item.tsx rename packages/account/src/Components/poi/status/rejected-reasons/{index.js => index.ts} (100%) create mode 100644 packages/account/src/Configs/__test__/poi-error-config.spec.ts delete mode 100644 packages/shared/src/utils/constants/idv-failure-codes.ts create mode 100644 packages/shared/src/utils/constants/poi-failure-codes.tsx diff --git a/packages/account/src/Components/icon-message-list/__tests__/icon-message-list.spec.tsx b/packages/account/src/Components/icon-message-list/__tests__/icon-message-list.spec.tsx index 2591e61a77ff..ef1733cf3e76 100644 --- a/packages/account/src/Components/icon-message-list/__tests__/icon-message-list.spec.tsx +++ b/packages/account/src/Components/icon-message-list/__tests__/icon-message-list.spec.tsx @@ -1,6 +1,8 @@ import React from 'react'; -import { fireEvent, render, screen } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { Icon } from '@deriv/components'; +import { StoreProvider, mockStore } from '@deriv/stores'; import IconMessageList from '../icon-message-list'; jest.mock('@deriv/components', () => { @@ -11,67 +13,61 @@ jest.mock('@deriv/components', () => { }; }); describe('', () => { - const messages_list = ['Sample Text1', 'Sample Text2', 'Sample Text3', 'Sample Text4']; + const messages_list = ['DataComparisonDocumentNumbers', 'CompromisedDocument', 'VisualAuthenticityFonts']; + + const mock_props: React.ComponentProps = { + icon: , + message: 'Lorem Ipsom', + message_list: messages_list, + onContinue: jest.fn(), + }; + + const store_config = mockStore({ ui: { is_desktop: true } }); + + const renderComponent = ({ props = mock_props, store = store_config }) => + render( + + + + ); + it('should render IconMessageList component', () => { - render(); + renderComponent({}); expect(screen.getByTestId('dt_icon_message_list')).toBeInTheDocument(); }); it('should render icon passed to the component', () => { - render(} />); - expect(screen.getByTestId('mocked_icon')).toBeInTheDocument(); + renderComponent({}); + expect(screen.getByText('sampleIcon')).toBeInTheDocument(); + expect(screen.getByText('IcAlertDanger')).toBeInTheDocument(); }); + it('should show message passed to the component', () => { - render(); + renderComponent({}); expect(screen.getByText(/lorem ipsom/i)).toBeInTheDocument(); }); - it('when the length of message_list is less than 3, it should show messages with icons ', () => { - render(); - expect(screen.getByText(/Sample Text1/i)).toBeInTheDocument(); - expect(screen.getByText(/Sample Text2/i)).toBeInTheDocument(); - expect(screen.getAllByText(/icclosecircle/i).length).toBe(2); - }); - - it('should show first 3 msgs and show_more_btn when the message_list is more than 3', () => { - render(); - expect(screen.getByText(/sample text1/i)).toBeInTheDocument(); - expect(screen.getByText(/sample text2/i)).toBeInTheDocument(); - expect(screen.getByText(/sample text3/i)).toBeInTheDocument(); - expect(screen.queryByText(/sample text4/i)).not.toBeInTheDocument(); - expect( - screen.getByRole('button', { - name: /show more/i, - }) - ).toBeInTheDocument(); - expect( - screen.queryByRole('button', { - name: /show less/i, - }) - ).not.toBeInTheDocument(); - }); - - it('should show all messages and show_less_btn when show_more btn is clicked', () => { - render(); - - const show_more_btn = screen.getByRole('button', { - name: /show more/i, - }); - fireEvent.click(show_more_btn); - expect(screen.getByText(/sample text1/i)).toBeInTheDocument(); - expect(screen.getByText(/sample text2/i)).toBeInTheDocument(); - expect(screen.getByText(/sample text3/i)).toBeInTheDocument(); - expect(screen.getByText(/sample text4/i)).toBeInTheDocument(); - expect(screen.queryByRole('button', { name: /show less/i })).toBeInTheDocument(); - expect(screen.queryByRole('button', { name: /show more/i })).not.toBeInTheDocument(); + it('should render the messages based on Onfido Error codes', () => { + const new_props = { + ...mock_props, + message_list: ['DataComparisonDocumentNumbers', 'CompromisedDocument'], + }; + renderComponent({ props: new_props }); + expect(screen.getByText('Your document appears to be invalid.')).toBeInTheDocument(); + expect(screen.getByText('Your document failed our verification checks.')).toBeInTheDocument(); }); it('should show continue_btn if OnContinue is passed', () => { const onContinuefn = jest.fn(); - render(); - const upload_btn = screen.queryByRole('button', { name: /upload document/i }); + const new_props = { + ...mock_props, + messages_list: ['DataComparisonDocumentNumbers'], + onContinue: onContinuefn, + }; + renderComponent({ props: new_props }); + const upload_btn = screen.queryByRole('button', { name: /verify again/i }); expect(upload_btn).toBeInTheDocument(); - fireEvent.click(upload_btn); + userEvent.click(upload_btn); expect(onContinuefn).toHaveBeenCalled(); }); }); diff --git a/packages/account/src/Components/icon-message-list/__tests__/list-item.spec.tsx b/packages/account/src/Components/icon-message-list/__tests__/list-item.spec.tsx new file mode 100644 index 000000000000..5eae8fece439 --- /dev/null +++ b/packages/account/src/Components/icon-message-list/__tests__/list-item.spec.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import ListItem from '../list-item'; +import { StoreProvider, mockStore } from '@deriv/stores'; + +describe('', () => { + const store_config = mockStore({}); + + const renderComponent = (props: React.ComponentProps) => + render( + + + + ); + + it('should render ListItem component', () => { + renderComponent({ text: 'test' }); + expect(screen.getByText('test')).toBeInTheDocument(); + }); + + it('should render ListItem component with index', () => { + renderComponent({ text: 'test', index: 1 }); + expect(screen.getByText('1.')).toBeInTheDocument(); + expect(screen.getByText('test')).toBeInTheDocument(); + }); +}); diff --git a/packages/account/src/Components/icon-message-list/icon-message-list.tsx b/packages/account/src/Components/icon-message-list/icon-message-list.tsx index 495c9e6a34e8..ea2a6ba997fd 100644 --- a/packages/account/src/Components/icon-message-list/icon-message-list.tsx +++ b/packages/account/src/Components/icon-message-list/icon-message-list.tsx @@ -1,44 +1,27 @@ import React from 'react'; import classNames from 'classnames'; -import { localize } from '@deriv/translations'; -import { Div100vhContainer, Text, Button, Icon, ThemedScrollbars } from '@deriv/components'; -import { isDesktop, isMobile } from '@deriv/shared'; +import { Div100vhContainer, Text, Button, ThemedScrollbars, Icon } from '@deriv/components'; +import { getOnfidoError } from '@deriv/shared'; +import { observer, useStore } from '@deriv/stores'; +import { Localize } from '@deriv/translations'; +import ListItem from './list-item'; -type TListItem = { - text?: string; -}; - -type TMessage_list = { - message_list?: string[]; -}; - -type TIconMessageList = TMessage_list & { - className: string; +type TIconMessageList = { + className?: string; icon: React.ReactElement; message: string; + message_list: Array; onContinue: () => void; }; -const ListItem = ({ text }: TListItem) => ( -
-
- -
-
- - {text} - -
-
-); - -const IconMessageList = ({ className, icon, message, message_list = [], onContinue }: Partial) => { - const has_maximum_list = message_list.length > 3; +const IconMessageList = observer(({ className, icon, message, message_list = [], onContinue }: TIconMessageList) => { + const { ui } = useStore(); + const { is_mobile, is_desktop } = ui; return ( - +
{message} {message_list && (
- {has_maximum_list ? ( - - ) : ( - message_list.map((text, idx) => ) - )} +
+
+ +
+
+ {message_list.length < 2 ? ( + + ) : ( + message_list.map((text, idx) => ( + + )) + )} +
+
)} {onContinue && ( @@ -81,49 +78,15 @@ const IconMessageList = ({ className, icon, message, message_list = [], onContin className='account-management__continue' onClick={onContinue} large - text={localize('Upload Document')} primary - /> + > + + )}
); -}; - -const MaximumList = ({ message_list }: TMessage_list) => { - const [show_more, setShowMore] = React.useState(false); - const maximum_list = message_list.slice(0, 3); - - return show_more ? ( - - {message_list.map(text => ( - - ))} -