diff --git a/packages/api/src/hooks/usePOA.ts b/packages/api/src/hooks/usePOA.ts index e94f190585db..9a09d5b49ee5 100644 --- a/packages/api/src/hooks/usePOA.ts +++ b/packages/api/src/hooks/usePOA.ts @@ -16,6 +16,7 @@ const usePOA = () => { is_expired: authentication_data?.document.status === 'expired', is_suspected: authentication_data?.document.status === 'suspected', is_verified: authentication_data?.document.status === 'verified', + is_need_submission: !['pending', 'verified'].includes(authentication_data?.document.status || ''), }; }, [authentication_data]); diff --git a/packages/api/src/hooks/usePOI.ts b/packages/api/src/hooks/usePOI.ts index b7f4ca650dba..1e308f044bd8 100644 --- a/packages/api/src/hooks/usePOI.ts +++ b/packages/api/src/hooks/usePOI.ts @@ -88,6 +88,11 @@ const usePOI = () => { ...authentication_data?.identity, previous: previous_poi, current: current_poi, + is_pending: authentication_data?.identity?.status === 'pending', + is_rejected: authentication_data?.identity?.status === 'rejected', + is_expired: authentication_data?.identity?.status === 'expired', + is_suspected: authentication_data?.identity?.status === 'suspected', + is_verified: authentication_data?.identity?.status === 'verified', }; }, [authentication_data, current_poi, previous_poi]); diff --git a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.scss b/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.scss index 49fc9590b5a3..995c1fe55365 100644 --- a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.scss +++ b/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.scss @@ -18,16 +18,6 @@ gap: 0.8rem; align-self: stretch; - &-text { - color: var(--system-light-2-general-text, #333); - - /* desktop/paragraph/P2 - regular */ - font-size: 1.4rem; - font-style: normal; - font-weight: 400; - line-height: 2rem; /* 142.857% */ - } - &-landing-company { display: flex; height: 2.4rem; @@ -37,37 +27,19 @@ border-radius: 0.4rem; background: var(--system-light-7-secondary-background, #f2f3f4); } - - &-landing-company-text { - color: var(--system-light-1-prominent-text, #333); - - /* desktop/extra small/XS - bold */ - font-size: 1rem; - font-style: normal; - font-weight: 700; - line-height: 1.4rem; /* 140% */ - text-transform: uppercase; - } } - &-loginid { - color: var(--system-light-3-less-prominent-text, #999); - - /* desktop/small/S - bold */ - font-size: 1.2rem; - font-style: normal; - font-weight: 700; - line-height: 1.8rem; /* 150% */ - } + &-badge { + width: fit-content; - &-balance { - color: var(--system-light-1-prominent-text, #333); + & a { + cursor: pointer; + text-decoration: underline; + } - /* desktop/paragraph/P2 - bold */ - font-size: 1.4rem; - font-style: normal; - font-weight: 700; - line-height: 2rem; /* 142.857% */ + & > .wallets-inline-message { + padding: 0.5rem 0.8rem; + } } &-description { diff --git a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx b/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx index 419833c31ad6..cba98a39a999 100644 --- a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx +++ b/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx @@ -1,14 +1,14 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; -import { useAuthorize } from '@deriv/api'; -import { WalletButton } from '../../../../../components/Base'; +import { useAuthorize, useJurisdictionStatus } from '@deriv/api'; +import { InlineMessage, WalletButton, WalletText } from '../../../../../components/Base'; +import { useModal } from '../../../../../components/ModalProvider'; import { TradingAccountCard } from '../../../../../components/TradingAccountCard'; import { getStaticUrl } from '../../../../../helpers/urls'; import { THooks } from '../../../../../types'; import { MarketTypeDetails } from '../../../constants'; +import { MT5TradeModal, VerificationFailedModal } from '../../../modals'; import './AddedMT5AccountsList.scss'; -import { useModal } from '../../../../../components/ModalProvider'; -import { MT5TradeModal } from '../../../modals'; type TProps = { account: THooks.MT5AccountsList; @@ -35,8 +35,9 @@ const MT5AccountIcon: React.FC = ({ account }) => { const AddedMT5AccountsList: React.FC = ({ account }) => { const { data: activeWallet } = useAuthorize(); const history = useHistory(); - const { show } = useModal(); + const { data: jurisdictionStatus } = useJurisdictionStatus(account.landing_company_short || 'svg', account.status); const { title } = MarketTypeDetails[account.market_type || 'all']; + const { show } = useModal(); return ( = ({ account }) => { trailing={() => (
{ history.push('/wallets/cashier/transfer'); }} @@ -51,6 +53,7 @@ const AddedMT5AccountsList: React.FC = ({ account }) => { variant='outlined' /> show()} text='Open' /> @@ -59,17 +62,50 @@ const AddedMT5AccountsList: React.FC = ({ account }) => { >
-

{title}

+ {title} {!activeWallet?.is_virtual && (
-

- {account.landing_company_short} -

+ + {account.landing_company_short?.toUpperCase()} +
)}
-

{account.display_balance}

-

{account.display_login}

+ {!(jurisdictionStatus.is_failed || jurisdictionStatus.is_pending) && ( + + {account.display_balance} + + )} + + {account.display_login} + + {jurisdictionStatus.is_pending && ( +
+ + + Pending verification + + +
+ )} + {jurisdictionStatus.is_failed && ( + + )}
); diff --git a/packages/wallets/src/features/cfd/modals/VerificationFailedModal/VerificationFailedModal.tsx b/packages/wallets/src/features/cfd/modals/VerificationFailedModal/VerificationFailedModal.tsx new file mode 100644 index 000000000000..36658cbfa968 --- /dev/null +++ b/packages/wallets/src/features/cfd/modals/VerificationFailedModal/VerificationFailedModal.tsx @@ -0,0 +1,13 @@ +import React, { FC } from 'react'; +import { ModalWrapper } from '../../../../components/Base'; +import { VerificationFailed } from '../../screens'; + +const VerificationFailedModal: FC = () => { + return ( + + + + ); +}; + +export default VerificationFailedModal; diff --git a/packages/wallets/src/features/cfd/modals/VerificationFailedModal/index.ts b/packages/wallets/src/features/cfd/modals/VerificationFailedModal/index.ts new file mode 100644 index 000000000000..03b9b2fb75c3 --- /dev/null +++ b/packages/wallets/src/features/cfd/modals/VerificationFailedModal/index.ts @@ -0,0 +1 @@ +export { default as VerificationFailedModal } from './VerificationFailedModal'; diff --git a/packages/wallets/src/features/cfd/modals/index.ts b/packages/wallets/src/features/cfd/modals/index.ts index d782d366f0f8..f8a2c3231a51 100644 --- a/packages/wallets/src/features/cfd/modals/index.ts +++ b/packages/wallets/src/features/cfd/modals/index.ts @@ -3,3 +3,4 @@ export * from './JurisdictionModal'; export * from './MT5AccountTypeModal'; export * from './MT5PasswordModal'; export * from './MT5TradeModal'; +export * from './VerificationFailedModal'; diff --git a/packages/wallets/src/features/cfd/screens/VerificationFailed/VerificationFailed.scss b/packages/wallets/src/features/cfd/screens/VerificationFailed/VerificationFailed.scss new file mode 100644 index 000000000000..628207a5202e --- /dev/null +++ b/packages/wallets/src/features/cfd/screens/VerificationFailed/VerificationFailed.scss @@ -0,0 +1,29 @@ +.wallets-verification-failed { + display: flex; + flex-direction: column; + padding: 2.4rem; + gap: 2.4rem; + border-radius: 0.8rem; + background-color: var(--system-light-8-primary-background, #fff); + width: 44rem; + height: 34.4rem; + + @include mobile { + width: 32rem; + height: 30rem; + padding: 1.6rem; + gap: 1.6rem; + } + + & li { + left: 1rem; + position: relative; + list-style-type: disc; + } + + &__footer { + display: flex; + justify-content: flex-end; + gap: 0.8rem; + } +} diff --git a/packages/wallets/src/features/cfd/screens/VerificationFailed/VerificationFailed.tsx b/packages/wallets/src/features/cfd/screens/VerificationFailed/VerificationFailed.tsx new file mode 100644 index 000000000000..511ec0b1ccb4 --- /dev/null +++ b/packages/wallets/src/features/cfd/screens/VerificationFailed/VerificationFailed.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { usePOA, usePOI } from '@deriv/api'; +import { WalletButton, WalletText } from '../../../../components/Base'; +import { useModal } from '../../../../components/ModalProvider'; +import './VerificationFailed.scss'; + +const getDocumentTitle = (isPOIFailed?: boolean, isPOAFailed?: boolean) => { + if (isPOIFailed && isPOAFailed) return 'proof of identity and proof of address'; + if (isPOIFailed) return 'proof of identity'; + return 'proof of address'; +}; + +const VerificationFailed = () => { + const { hide } = useModal(); + const { data: poiStatus } = usePOI(); + const { data: poaStatus } = usePOA(); + + const isPOIFailed = poiStatus?.is_rejected || poiStatus?.is_expired || poiStatus?.is_suspected; + const isPOAFailed = poaStatus?.is_rejected || poaStatus?.is_expired || poaStatus?.is_suspected; + + return ( +
+ + Why did my verification fail? + + + Your {getDocumentTitle(isPOIFailed, isPOAFailed)} did not pass our verification checks. This could be + due to reasons such as: + +
    +
  • + Document details do not match profile details +
  • +
  • + Expired documents +
  • +
  • + Poor image quality +
  • +
+ + Click Resubmit documents to find out more and submit your documents again. + +
+ hide()} size='lg' text='Maybe later' variant='outlined' /> + +
+
+ ); +}; + +export default VerificationFailed; diff --git a/packages/wallets/src/features/cfd/screens/VerificationFailed/index.ts b/packages/wallets/src/features/cfd/screens/VerificationFailed/index.ts new file mode 100644 index 000000000000..ecf2f5b7c8db --- /dev/null +++ b/packages/wallets/src/features/cfd/screens/VerificationFailed/index.ts @@ -0,0 +1 @@ +export { default as VerificationFailed } from './VerificationFailed'; diff --git a/packages/wallets/src/features/cfd/screens/index.ts b/packages/wallets/src/features/cfd/screens/index.ts index b2f4ad54eb66..a1dbab3f5619 100644 --- a/packages/wallets/src/features/cfd/screens/index.ts +++ b/packages/wallets/src/features/cfd/screens/index.ts @@ -7,3 +7,4 @@ export * from './MT5AccountType'; export * from './MT5AccountTypeCard'; export * from './MT5TradeScreen'; export * from './Onfido'; +export * from './VerificationFailed';