From d19ae4490920afe81a75ae659b8d46680c1313f1 Mon Sep 17 00:00:00 2001
From: Aum Bhatt <aum@deriv.com>
Date: Tue, 17 Sep 2024 15:21:37 +0400
Subject: [PATCH] feat: added DocumentsList component

---
 .../ClientVerificationModal.tsx                   |  8 +++-----
 .../components/DocumentsList/DocumentsList.scss   |  7 +++++++
 .../components/DocumentsList/DocumentsList.tsx    | 15 +++++++++++++++
 .../components}/DocumentTile/DocumentTile.scss    |  0
 .../components}/DocumentTile/DocumentTile.tsx     |  0
 .../components}/DocumentTile/index.ts             |  0
 .../components/DocumentsList/components/index.ts  |  1 +
 .../components/DocumentsList/index.ts             |  1 +
 .../ClientVerificationModal/components/index.ts   |  2 +-
 9 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.scss
 create mode 100644 packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx
 rename packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/{ => DocumentsList/components}/DocumentTile/DocumentTile.scss (100%)
 rename packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/{ => DocumentsList/components}/DocumentTile/DocumentTile.tsx (100%)
 rename packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/{ => DocumentsList/components}/DocumentTile/index.ts (100%)
 create mode 100644 packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/index.ts
 create mode 100644 packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/index.ts

diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/ClientVerificationModal.tsx b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/ClientVerificationModal.tsx
index 98b8f1026103..2a2e9d5f9c7c 100644
--- a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/ClientVerificationModal.tsx
+++ b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/ClientVerificationModal.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { DerivLightUploadPoiIcon } from '@deriv/quill-icons';
 import { Localize } from '@deriv-com/translations';
-import { SectionMessage, Text, useDevice } from '@deriv-com/ui';
+import { Text, useDevice } from '@deriv-com/ui';
 import { ModalStepWrapper } from '../../../../components';
-import { DocumentTile } from './components';
+import { DocumentsList } from './components';
 import './ClientVerificationModal.scss';
 
 const getDescriptionText = () => {
@@ -29,9 +29,7 @@ const ClientVerificationModal = () => {
                 <Text align='center' size={isMobile ? 'md' : 'sm'}>
                     {description}
                 </Text>
-                <DocumentTile title='Personal Details' />
-                <DocumentTile title='Personal Details' />
-                <DocumentTile title='Personal Details' />
+                <DocumentsList />
             </div>
         </ModalStepWrapper>
     );
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.scss b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.scss
new file mode 100644
index 000000000000..264c1f00b394
--- /dev/null
+++ b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.scss
@@ -0,0 +1,7 @@
+.wallets-documents-list {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.6rem;
+}
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx
new file mode 100644
index 000000000000..c0fa8a0c8960
--- /dev/null
+++ b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { DocumentTile } from './components';
+import './DocumentsList.scss';
+
+const DocumentsList = () => {
+    return (
+        <div className='wallets-documents-list'>
+            <DocumentTile title='Proof of identity' />
+            <DocumentTile title='Proof of address' />
+            <DocumentTile title='Personal Details' />
+        </div>
+    );
+};
+
+export default DocumentsList;
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentTile/DocumentTile.scss b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/DocumentTile/DocumentTile.scss
similarity index 100%
rename from packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentTile/DocumentTile.scss
rename to packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/DocumentTile/DocumentTile.scss
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentTile/DocumentTile.tsx b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/DocumentTile/DocumentTile.tsx
similarity index 100%
rename from packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentTile/DocumentTile.tsx
rename to packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/DocumentTile/DocumentTile.tsx
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentTile/index.ts b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/DocumentTile/index.ts
similarity index 100%
rename from packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentTile/index.ts
rename to packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/DocumentTile/index.ts
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/index.ts b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/index.ts
new file mode 100644
index 000000000000..76c67643d998
--- /dev/null
+++ b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/index.ts
@@ -0,0 +1 @@
+export * from './DocumentTile';
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/index.ts b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/index.ts
new file mode 100644
index 000000000000..d23ca16a13b6
--- /dev/null
+++ b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/index.ts
@@ -0,0 +1 @@
+export { default as DocumentsList } from './DocumentsList';
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/index.ts b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/index.ts
index 76c67643d998..a711e93c8860 100644
--- a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/index.ts
+++ b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/index.ts
@@ -1 +1 @@
-export * from './DocumentTile';
+export * from './DocumentsList';