feat: accounts manual verification document selection

Author: Farhan-slurrp

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

@@ -0,0 +1 @@
+export * from './screens';

packages/wallets/src/features/accounts/screens/ManualDocumentUpload/ManualDocumentUpload.tsx

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import { DocumentSelection } from './components/DocumentSelection';
+import { PassportDocumentUpload } from './components/PassportDocumentUpload';
+
+const ManualDocumentUpload = () => {
+    // will use formik here in the future!
+    const [selectedDocument, setSelectedDocument] = useState('');
+
+    if (selectedDocument === 'passport') {
+        return <PassportDocumentUpload setSelectedDocument={setSelectedDocument} />;
+    } //... other document types
+
+    return <DocumentSelection setSelectedDocument={setSelectedDocument} />;
+};
+
+export default ManualDocumentUpload;

packages/wallets/src/features/accounts/screens/ManualDocumentUpload/__tests__/ManualDocumentUpload.spec.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { APIProvider } from '@deriv/api';
+import { render, screen } from '@testing-library/react';
+import ManualDocumentUpload from '../ManualDocumentUpload';
+
+describe('<ManualDocumentUpload />', () => {
+    it('should set selected document', () => {
+        render(
+            <APIProvider>
+                <ManualDocumentUpload />
+            </APIProvider>
+        );
+
+        expect(screen.getByText('Please upload one of the following documents:')).toBeInTheDocument();
+        const passportCard = screen.getByTestId('dt_passport');
+        expect(passportCard).toBeInTheDocument();
+        passportCard.click();
+        expect(screen.getByTestId('dt_passport-document-upload')).toBeInTheDocument();
+    });
+});

packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentSelection/DocumentSelection.scss

@@ -0,0 +1,13 @@
+.wallets-document-selection {
+    display: flex;
+    padding-top: 32px;
+    flex-direction: column;
+    align-items: self-start;
+    justify-content: center;
+    gap: 19px;
+    width: 675px;
+
+    @include mobile {
+        width: 328px;
+    }
+}

packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentSelection/DocumentSelection.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useSettings } from '@deriv/api';
+import { WalletText } from '../../../../../../components/Base';
+import { documentTypes } from '../../constants';
+import { DocumentSelectionCard } from '../DocumentSelectionCard';
+import './DocumentSelection.scss';
+
+type TProps = {
+    setSelectedDocument: (document: string) => void;
+};
+
+const DocumentSelection: React.FC<TProps> = ({ setSelectedDocument }) => {
+    const { data } = useSettings();
+
+    return (
+        <div className='wallets-document-selection'>
+            <WalletText>Please upload one of the following documents:</WalletText>
+            {documentTypes.map(({ countries, description, icon, title, value }) => {
+                if (countries && !countries.includes(data?.country_code ?? '')) {
+                    return null;
+                }
+                return (
+                    <DocumentSelectionCard
+                        description={description}
+                        icon={icon}
+                        key={`document-card-${value}`}
+                        onClick={setSelectedDocument}
+                        title={title}
+                        value={value}
+                    />
+                );
+            })}
+        </div>
+    );
+};
+
+export default DocumentSelection;

packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentSelection/index.ts

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

packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentSelectionCard/DocumentSelectionCard.scss

@@ -0,0 +1,28 @@
+.wallets-document-selection-card {
+    all: unset;
+    display: flex;
+    padding: 1.6rem;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+    border-radius: 0.4rem;
+    border: 0.1rem solid var(--system-light-3-less-prominent-text, #999);
+    cursor: pointer;
+
+    &:hover {
+        border: 0.1rem solid var(--system-light-3-prominent-text, #666);
+    }
+
+    &__content {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+    }
+
+    &__text-content {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
+}

packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentSelectionCard/DocumentSelectionCard.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { WalletText } from '../../../../../../components/Base';
+import useDevice from '../../../../../../hooks/useDevice';
+import RightArrow from '../../../../../../public/images/navigation-chevron-right.svg';
+import { TDocumentType } from '../../constants';
+import './DocumentSelectionCard.scss';
+
+type TProps = TDocumentType & {
+    onClick: (document: string) => void;
+};
+
+const DocumentSelectionCard: React.FC<TProps> = ({ description, icon: Icon, onClick, title, value }) => {
+    const { isMobile } = useDevice();
+    return (
+        <button className='wallets-document-selection-card' data-testid={`dt_${value}`} onClick={() => onClick(value)}>
+            <div className='wallets-document-selection-card__content'>
+                <Icon />
+                <div className='wallets-document-selection-card__text-content'>
+                    <WalletText size={isMobile ? 'xs' : 'sm'} weight='bold'>
+                        {title}
+                    </WalletText>
+                    <WalletText size={isMobile ? '2xs' : 'xs'}>{description}</WalletText>
+                </div>
+            </div>
+            <RightArrow />
+        </button>
+    );
+};
+
+export default DocumentSelectionCard;

packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentSelectionCard/index.ts

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

packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/PassportDocumentUpload/PassportDocumentUpload.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { WalletButton, WalletButtonGroup } from '../../../../../../components/Base';
+
+type TProps = {
+    setSelectedDocument: (document: string) => void;
+};
+
+const PassportDocumentUpload: React.FC<TProps> = ({ setSelectedDocument }) => {
+    return (
+        <div data-testid='dt_passport-document-upload'>
+            <div>
+                <WalletButtonGroup>
+                    <WalletButton onClick={() => setSelectedDocument('')} text='Back' variant='outlined' />
+                    <WalletButton onClick={() => setSelectedDocument('')} text='Next' />
+                </WalletButtonGroup>
+            </div>
+        </div>
+    );
+};
+
+export default PassportDocumentUpload;