WALL-2589/chore: poa address section (#11434)

* chore: poa address

* fix: remove test launch

* chore: update v2

* chore: comments and update styles for responsive

* fix: remove test launch v2

* fix: comments

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';

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. */

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;

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<TGenericSizes, 'lg' | 'md' | 'sm'>;
     maxWidth?: CSSProperties['maxWidth'];
@@ -22,7 +22,7 @@ type TProps = {
 };
 
 const WalletDropdown: React.FC<TProps> = ({
-    icon,
+    icon = false,
     label,
     list,
     listHeight = 'md',
@@ -61,7 +61,7 @@ const WalletDropdown: React.FC<TProps> = ({
         onSelectedItemChange({ selectedItem }) {
             onSelect(selectedItem?.value ?? '');
         },
-        selectedItem: items.find(item => item.value === value),
+        selectedItem: items.find(item => item.value === value) ?? null,
     });
 
     useEffect(() => {

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%;
+            }
+        }
+    }
+}

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 (
+        <div className='wallets-resubmit-poa'>
+            <div className='wallets-resubmit-poa__address'>
+                <div className='wallets-resubmit-poa__address--title'>
+                    <WalletText weight='bold'>Address</WalletText>
+                    <div className='wallets-resubmit-poa__address--title-divider' />
+                </div>
+                <div className='wallets-resubmit-poa__address--inline'>
+                    <InlineMessage size='md' type='warning' variant='contained'>
+                        <div className='wallets-resubmit-poa__address--inline-message'>
+                            For faster verification, input the same address here as in your proof of address document
+                            (see section below)
+                        </div>
+                    </InlineMessage>
+                </div>
+                <div className='wallets-resubmit-poa__address--input'>
+                    <WalletTextField label='First line of address*' maxWidth={deviceWidth} name='first-line' />
+                    <WalletTextField label='Second line of address' maxWidth={deviceWidth} name='second-line' />
+                    <WalletTextField label='Town/City*' maxWidth={deviceWidth} name='town-line' />
+                    <WalletDropdown
+                        label='State/Province'
+                        list={statesList}
+                        listHeight='sm'
+                        maxWidth={deviceWidth}
+                        onSelect={handleSelect}
+                        value={selectedState}
+                    />
+                    <WalletTextField label='Postal/ZIP Code' maxWidth={deviceWidth} name='zip-line' />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ResubmitPOA;

packages/wallets/src/features/accounts/screens/ResubmitPOA/index.ts

@@ -0,0 +1 @@
+export { default as ResubmitPOA } from './ResubmitPOA';

packages/wallets/src/features/accounts/screens/index.ts

@@ -1,2 +1,3 @@
 export * from './IDVDocumentUpload';
 export * from './ManualDocumentUpload';
+export * from './ResubmitPOA';

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 (
-        <div style={{ fontSize: 60, height: 400, width: 600 }}>
-            <h1>POA screen</h1>
-        </div>
-    );
-};
-
 const PersonalDetails = () => {
     return (
         <div style={{ fontSize: 60, height: 400, width: 600 }}>
@@ -59,7 +52,7 @@ const screens = {
     onfidoScreen: <Onfido />,
     passwordScreen: <Password />,
     personalDetailsScreen: <PersonalDetails />,
-    poaScreen: <Poa />,
+    poaScreen: <ResubmitPOA />,
 };
 
 type TVerificationProps = {
@@ -95,20 +88,11 @@ const Verification: FC<TVerificationProps> = ({ 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<typeof screens>) => {
         if (['idvScreen', 'onfidoScreen', 'manualScreen'].includes(currentScreenId)) {
-            if (!hasAttemptedPOA) {
+            if (hasAttemptedPOA) {
                 switchScreen('poaScreen');
             } else if (needPersonalDetails) {
                 switchScreen('personalDetailsScreen');