diff --git a/packages/api/src/hooks/index.ts b/packages/api/src/hooks/index.ts index cf9f1039d6da..21014f4a0094 100644 --- a/packages/api/src/hooks/index.ts +++ b/packages/api/src/hooks/index.ts @@ -55,3 +55,4 @@ export { default as useTransferBetweenAccounts } from './useTransferBetweenAccou export { default as useVerifyEmail } from './useVerifyEmail'; export { default as useWalletAccountsList } from './useWalletAccountsList'; export { default as useWalletMigration } from './useWalletMigration'; +export { default as useStatesList } from './useStatesList'; diff --git a/packages/api/src/hooks/useStatesList.ts b/packages/api/src/hooks/useStatesList.ts index 59a55a0b5ea3..fa3b52eea7bd 100644 --- a/packages/api/src/hooks/useStatesList.ts +++ b/packages/api/src/hooks/useStatesList.ts @@ -12,7 +12,7 @@ const useStatesList = (country: TStatesList) => { payload: { states_list: country }, }); - const modified_states_list = useMemo(() => ({ ...data?.states_list }), [data?.states_list]); + const modified_states_list = useMemo(() => [...(data?.states_list || [])], [data?.states_list]); return { /** The states list for the given country. */ diff --git a/packages/wallets/src/components/Base/WalletDropdown/WalletDropdown.scss b/packages/wallets/src/components/Base/WalletDropdown/WalletDropdown.scss index b540eab6d700..fee7164b7ba6 100644 --- a/packages/wallets/src/components/Base/WalletDropdown/WalletDropdown.scss +++ b/packages/wallets/src/components/Base/WalletDropdown/WalletDropdown.scss @@ -34,7 +34,7 @@ position: absolute; inset: 0; min-width: 0; /* this is required to reset input's default width */ - padding-left: 4rem; + padding-left: 2rem; display: flex; flex-grow: 1; font-family: inherit; diff --git a/packages/wallets/src/components/Base/WalletDropdown/WalletDropdown.tsx b/packages/wallets/src/components/Base/WalletDropdown/WalletDropdown.tsx index 754d5e6fc9e7..6689b56ddb5a 100644 --- a/packages/wallets/src/components/Base/WalletDropdown/WalletDropdown.tsx +++ b/packages/wallets/src/components/Base/WalletDropdown/WalletDropdown.tsx @@ -11,8 +11,8 @@ type TProps = { icon?: React.ReactNode; label?: React.ReactNode; list: { - text: React.ReactNode; - value: string; + text?: React.ReactNode; + value?: string; }[]; listHeight?: Extract; maxWidth?: CSSProperties['maxWidth']; @@ -22,7 +22,7 @@ type TProps = { }; const WalletDropdown: React.FC = ({ - icon, + icon = false, label, list, listHeight = 'md', @@ -61,7 +61,7 @@ const WalletDropdown: React.FC = ({ onSelectedItemChange({ selectedItem }) { onSelect(selectedItem?.value ?? ''); }, - selectedItem: items.find(item => item.value === value), + selectedItem: items.find(item => item.value === value) ?? null, }); useEffect(() => { diff --git a/packages/wallets/src/features/accounts/screens/ResubmitPOA/ResubmitPOA.scss b/packages/wallets/src/features/accounts/screens/ResubmitPOA/ResubmitPOA.scss new file mode 100644 index 000000000000..6dfc370178bb --- /dev/null +++ b/packages/wallets/src/features/accounts/screens/ResubmitPOA/ResubmitPOA.scss @@ -0,0 +1,83 @@ +.wallets-resubmit-poa { + width: 99.6rem; + height: 60rem; + display: flex; + padding: 1.6rem; + flex-direction: column; + align-items: center; + gap: 1.6rem; + flex: 1 0 0; + align-self: stretch; + background: var(--system-light-8-primary-background, #fff); + + @include mobile { + width: 100%; + height: 100%; + padding: 1.6rem; + } + + &__address { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1.6rem; + max-width: 85rem; + + @include mobile { + width: 100%; + } + + &--title { + display: flex; + height: 2.4rem; + justify-content: center; + align-items: center; + gap: 1.1rem; + + @include mobile { + display: flex; + align-items: center; + gap: 8px; + align-self: stretch; + } + + &-divider { + width: 76rem; + height: 0.12rem; + flex-shrink: 0; + background: var(--system-light-7-secondary-background, #f2f3f4); + + @include mobile { + height: 0.1rem; + flex: 1 0 0; + } + } + } + + &--inline { + display: flex; + align-items: flex-start; + gap: 0.8rem; + + &-message { + width: 80rem; + + @include mobile { + width: 100%; + } + } + } + + &--input { + display: flex; + width: 84.2rem; + flex-direction: column; + align-items: flex-start; + gap: 1.6rem; + + @include mobile { + width: 100%; + } + } + } +} diff --git a/packages/wallets/src/features/accounts/screens/ResubmitPOA/ResubmitPOA.tsx b/packages/wallets/src/features/accounts/screens/ResubmitPOA/ResubmitPOA.tsx new file mode 100644 index 000000000000..152b2716dd57 --- /dev/null +++ b/packages/wallets/src/features/accounts/screens/ResubmitPOA/ResubmitPOA.tsx @@ -0,0 +1,56 @@ +import React, { useState } from 'react'; +import { useSettings, useStatesList } from '@deriv/api'; +import { InlineMessage, WalletDropdown, WalletText, WalletTextField } from '../../../../components/Base'; +import useDevice from '../../../../hooks/useDevice'; +import './ResubmitPOA.scss'; + +const ResubmitPOA: React.FC = () => { + const { data } = useSettings(); + const { isMobile } = useDevice(); + const country = data?.country_code || ''; + const { data: statesList } = useStatesList(country); + + const [selectedState, setSelectedState] = useState(''); + + // Will replace this with formik values later + const handleSelect = (value: string) => { + setSelectedState(value); + }; + + const deviceWidth = isMobile ? '100%' : '84rem'; + + return ( +
+
+
+ Address +
+
+
+ +
+ For faster verification, input the same address here as in your proof of address document + (see section below) +
+
+
+
+ + + + + +
+
+
+ ); +}; + +export default ResubmitPOA; diff --git a/packages/wallets/src/features/accounts/screens/ResubmitPOA/index.ts b/packages/wallets/src/features/accounts/screens/ResubmitPOA/index.ts new file mode 100644 index 000000000000..0371a819eac1 --- /dev/null +++ b/packages/wallets/src/features/accounts/screens/ResubmitPOA/index.ts @@ -0,0 +1 @@ +export { default as ResubmitPOA } from './ResubmitPOA'; diff --git a/packages/wallets/src/features/accounts/screens/index.ts b/packages/wallets/src/features/accounts/screens/index.ts index b13b168bc022..da1d38d48c95 100644 --- a/packages/wallets/src/features/accounts/screens/index.ts +++ b/packages/wallets/src/features/accounts/screens/index.ts @@ -1,2 +1,3 @@ export * from './IDVDocumentUpload'; export * from './ManualDocumentUpload'; +export * from './ResubmitPOA'; diff --git a/packages/wallets/src/features/cfd/flows/Verification/Verification.tsx b/packages/wallets/src/features/cfd/flows/Verification/Verification.tsx index 8d4fb932906c..7bf0da7ed665 100644 --- a/packages/wallets/src/features/cfd/flows/Verification/Verification.tsx +++ b/packages/wallets/src/features/cfd/flows/Verification/Verification.tsx @@ -1,11 +1,12 @@ import React, { FC, useMemo } from 'react'; -import { FlowProvider, TFlowProviderContext } from '../../../../components/FlowProvider'; -import { useModal } from '../../../../components/ModalProvider'; +import { useAuthentication, usePOA, usePOI } from '@deriv/api'; import { ModalStepWrapper, WalletButton } from '../../../../components/Base'; +import { FlowProvider, TFlowProviderContext } from '../../../../components/FlowProvider'; import { Loader } from '../../../../components/Loader'; -import { Onfido } from '../../screens'; -import { useAuthentication, usePOA, usePOI } from '@deriv/api'; +import { useModal } from '../../../../components/ModalProvider'; import { THooks } from '../../../../types'; +import { ResubmitPOA } from '../../../accounts/screens'; +import { Onfido } from '../../screens'; const Idv = () => { return ( @@ -23,14 +24,6 @@ const Manual = () => { ); }; -const Poa = () => { - return ( -
-

POA screen

-
- ); -}; - const PersonalDetails = () => { return (
@@ -59,7 +52,7 @@ const screens = { onfidoScreen: , passwordScreen: , personalDetailsScreen: , - poaScreen: , + poaScreen: , }; type TVerificationProps = { @@ -95,20 +88,11 @@ const Verification: FC = ({ selectedJurisdiction }) => { if (service === 'onfido') return 'onfidoScreen'; } return 'manualScreen'; - }, [ - hasAttemptedPOA, - needPersonalDetails, - authenticationData?.is_poa_needed, - poiStatus, - poiStatus?.services, - // eslint-disable-next-line react-hooks/exhaustive-deps - poiStatus?.current?.service, - isSuccessPOIStatus, - ]); + }, [hasAttemptedPOA, needPersonalDetails, authenticationData?.is_poa_needed, poiStatus, isSuccessPOIStatus]); const nextFlowHandler = ({ currentScreenId, switchScreen }: TFlowProviderContext) => { if (['idvScreen', 'onfidoScreen', 'manualScreen'].includes(currentScreenId)) { - if (!hasAttemptedPOA) { + if (hasAttemptedPOA) { switchScreen('poaScreen'); } else if (needPersonalDetails) { switchScreen('personalDetailsScreen');