chore: [UPM-923]/evgeniy/error message for passkey not supported device (deriv-com#14723)

* chore: [UPM-923]/evgeniy/error message for passkey not supported device

* fix: read of undefined

* chore: added new button text and action for not supported

* fix: error variable name

* chore: update content in passkey-config (#42)

* fix: content for unsupported error

* Suisin/solve passkey header issue (#43)

* chore: fix header not bold issue

* chore: update passkey creation fail content

* chore: refactor error content

* chore: added comment to remove is_tour_open

* chore: remove close icon for error modal

* chore: remove close icon for error modal

---------

Co-authored-by: Sui Sin <[email protected]>

Author: yauheni-deriv

packages/account/src/Sections/Security/Passkeys/passkeys-configs.tsx

@@ -113,7 +113,26 @@ type TGetModalContent = {
     is_passkey_registration_started: boolean;
 };
 
+export const NOT_SUPPORTED_ERROR_NAME = 'NotSupportedError';
+
 export const getModalContent = ({ error, is_passkey_registration_started }: TGetModalContent) => {
+    const isNotSupportedError = (error: TServerError) => error?.name === NOT_SUPPORTED_ERROR_NAME;
+
+    const error_message = isNotSupportedError(error as TServerError) ? (
+        <Localize i18n_default_text="This device doesn't support passkeys." />
+    ) : (
+        (error as TServerError)?.message
+    );
+    const button_text = (
+        <Localize i18n_default_text={isNotSupportedError(error as TServerError) ? 'OK' : 'Try again'} />
+    );
+
+    const error_message_header = (
+        <Text size='xs' weight='bold'>
+            <Localize i18n_default_text='Passkey setup failed' />
+        </Text>
+    );
+
     const reminder_tips = [
         <Localize i18n_default_text='Enable screen lock on your device.' key='tip_1' />,
         <Localize i18n_default_text='Enable bluetooth.' key='tip_2' />,
@@ -142,8 +161,9 @@ export const getModalContent = ({ error, is_passkey_registration_started }: TGet
     }
 
     return {
-        description: (error as TServerError)?.message ?? '',
-        button_text: error ? <Localize i18n_default_text='Try again' /> : undefined,
+        description: error_message ?? '',
+        button_text: error ? button_text : undefined,
+        header: error ? error_message_header : undefined,
     };
 };
 

packages/account/src/Sections/Security/Passkeys/passkeys.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Redirect } from 'react-router-dom';
+import { Redirect, useHistory } from 'react-router-dom';
 import { Loading } from '@deriv/components';
 import { useGetPasskeysList, useRegisterPasskey } from '@deriv/hooks';
 import { routes } from '@deriv/shared';
@@ -9,18 +9,20 @@ import PasskeysList from './components/passkeys-list';
 import PasskeyModal from './components/passkey-modal';
 import {
     getModalContent,
+    NOT_SUPPORTED_ERROR_NAME,
     PASSKEY_STATUS_CODES,
     passkeysMenuActionEventTrack,
     TPasskeysStatus,
 } from './passkeys-configs';
 import './passkeys.scss';
-import { TServerError } from 'Types';
+import { TServerError } from '../../../Types/common.type';
 
 const Passkeys = observer(() => {
     const { ui, client, common } = useStore();
     const { is_mobile } = ui;
     const { is_passkey_supported } = client;
     let timeout: ReturnType<typeof setTimeout>;
+    const history = useHistory();
 
     const [passkey_status, setPasskeyStatus] = React.useState<TPasskeysStatus>(PASSKEY_STATUS_CODES.NONE);
     const [is_modal_open, setIsModalOpen] = React.useState(false);
@@ -93,6 +95,9 @@ const Passkeys = observer(() => {
     const onModalButtonClick = () => {
         if (error) {
             onCloseModal(onCloseError);
+            if ((error as TServerError).name === NOT_SUPPORTED_ERROR_NAME) {
+                history.push(routes.traders_hub);
+            }
         } else {
             passkeysMenuActionEventTrack('create_passkey_reminder_passed');
             createPasskey();
@@ -130,7 +135,7 @@ const Passkeys = observer(() => {
             )}
             <PasskeyModal
                 toggleModal={is_passkey_registration_started ? onCloseRegistration : undefined}
-                has_close_icon={!!modal_content.header}
+                has_close_icon={!error && !!modal_content.header}
                 header={modal_content.header}
                 className='passkeys-modal'
                 is_modal_open={is_modal_open}