From b6d5d3483a1e372896fca14deed28a6cdf42fdfc Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Fri, 11 Nov 2022 11:03:07 +0400
Subject: [PATCH 1/7] feat: :art: migrated component to tsx

---
 .../file-uploader-container/file-uploader.jsx |  4 +-
 .../{file-dropzone.jsx => file-dropzone.tsx}  | 48 +++++++++++++++----
 2 files changed, 41 insertions(+), 11 deletions(-)
 rename packages/components/src/components/file-dropzone/{file-dropzone.jsx => file-dropzone.tsx} (84%)

diff --git a/packages/account/src/Components/file-uploader-container/file-uploader.jsx b/packages/account/src/Components/file-uploader-container/file-uploader.jsx
index 24ac7125ee86..eb2a08f83e61 100644
--- a/packages/account/src/Components/file-uploader-container/file-uploader.jsx
+++ b/packages/account/src/Components/file-uploader-container/file-uploader.jsx
@@ -96,11 +96,11 @@ const FileUploader = React.forwardRef(({ onFileDrop, getSocket }, ref) => {
                 filename_limit={26}
                 hover_message={localize('Drop files here..')}
                 max_size={max_document_size}
-                message={<UploadMessage />}
+                message={() => <UploadMessage />}
                 multiple={false}
                 onDropAccepted={handleAcceptedFiles}
                 onDropRejected={handleRejectedFiles}
-                validation_error_message={document_file.error_message}
+                validation_error_message={() => document_file.error_message}
                 value={document_file.files}
             />
             {(document_file.files.length > 0 || !!document_file.error_message) && (
diff --git a/packages/components/src/components/file-dropzone/file-dropzone.jsx b/packages/components/src/components/file-dropzone/file-dropzone.tsx
similarity index 84%
rename from packages/components/src/components/file-dropzone/file-dropzone.jsx
rename to packages/components/src/components/file-dropzone/file-dropzone.tsx
index 715b9f177c9b..769f2fc7548d 100644
--- a/packages/components/src/components/file-dropzone/file-dropzone.jsx
+++ b/packages/components/src/components/file-dropzone/file-dropzone.tsx
@@ -1,11 +1,43 @@
 import classNames from 'classnames';
-import React from 'react';
+import React, { ReactElement, ReactNode, RefObject } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import Dropzone from 'react-dropzone';
+import Dropzone, { DropzoneOptions } from 'react-dropzone';
 import { truncateFileName } from '@deriv/shared';
 import Text from '../text';
 
-const FadeInMessage = ({ is_visible, color, children, key, timeout, no_text }) => (
+type TFadeInMessage = {
+    is_visible: boolean;
+    color?: string;
+    key?: string;
+    timeout: number;
+    no_text?: boolean;
+};
+
+type TPreviewSingle = {
+    dropzone_ref: RefObject<HTMLElement>;
+} & TFileDropzone;
+
+type TFileDropzone = {
+    className?: string;
+    noClick?: boolean;
+    validation_error_message: (open?: () => void) => ReactNode | null;
+    max_size?: number;
+    value: Array<{ name: string }>;
+    message: (open?: () => void) => ReactNode;
+    filename_limit?: number;
+    error_message: string;
+    hover_message: string;
+    preview_single?: ReactElement;
+} & DropzoneOptions;
+
+const FadeInMessage = ({
+    is_visible,
+    color,
+    children,
+    key,
+    timeout,
+    no_text,
+}: React.PropsWithChildren<TFadeInMessage>) => (
     <CSSTransition
         appear
         key={key}
@@ -38,7 +70,7 @@ const FadeInMessage = ({ is_visible, color, children, key, timeout, no_text }) =
     </CSSTransition>
 );
 
-const PreviewSingle = props => {
+const PreviewSingle = (props: TPreviewSingle) => {
     if (props.preview_single) {
         return <div className='dc-file-dropzone__message'>{props.preview_single}</div>;
     }
@@ -57,7 +89,7 @@ const PreviewSingle = props => {
     );
 };
 
-const FileDropzone = ({ className, noClick = false, ...props }) => {
+const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) => {
     const dropzone_ref = React.useRef(null);
     return (
         <Dropzone
@@ -98,7 +130,7 @@ const FileDropzone = ({ className, noClick = false, ...props }) => {
                             timeout={150}
                             no_text={noClick}
                         >
-                            {noClick ? props.message(open) : props.message}
+                            {props.message(open)}
                         </FadeInMessage>
                         <FadeInMessage
                             // message shown on hover if files are accepted onDrag
@@ -140,9 +172,7 @@ const FileDropzone = ({ className, noClick = false, ...props }) => {
                             timeout={150}
                             color='loss-danger'
                         >
-                            {noClick && typeof props.validation_error_message === 'function'
-                                ? props.validation_error_message(open)
-                                : props.validation_error_message}
+                            {props.validation_error_message(open)}
                         </FadeInMessage>
                     </div>
                 </div>

From cf53459e403c8b988e91ef0387d6269024f0047f Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Fri, 11 Nov 2022 11:26:23 +0400
Subject: [PATCH 2/7] feat: :art: fixed index

---
 packages/components/src/components/file-dropzone/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/file-dropzone/index.js b/packages/components/src/components/file-dropzone/index.js
index 5e329982b80e..4d70ff0cfd1f 100644
--- a/packages/components/src/components/file-dropzone/index.js
+++ b/packages/components/src/components/file-dropzone/index.js
@@ -1,4 +1,4 @@
-import FileDropzone from './file-dropzone.jsx';
+import FileDropzone from './file-dropzone';
 import './file-dropzone.scss';
 
 export default FileDropzone;

From 4eaec357a84ba7ccee8f4ddfcfe8cd5b1ba9b076 Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Fri, 11 Nov 2022 11:41:50 +0400
Subject: [PATCH 3/7] feat: :art: incorporated single logic for props

---
 .../file-dropzone/file-dropzone.tsx           | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/components/file-dropzone/file-dropzone.tsx b/packages/components/src/components/file-dropzone/file-dropzone.tsx
index 769f2fc7548d..dece1a3067e0 100644
--- a/packages/components/src/components/file-dropzone/file-dropzone.tsx
+++ b/packages/components/src/components/file-dropzone/file-dropzone.tsx
@@ -91,6 +91,10 @@ const PreviewSingle = (props: TPreviewSingle) => {
 
 const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) => {
     const dropzone_ref = React.useRef(null);
+
+    const message = props.message();
+    const validationErrorMessage = props.validation_error_message();
+
     return (
         <Dropzone
             // sends back accepted files array
@@ -111,8 +115,7 @@ const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) =
                     className={classNames('dc-file-dropzone', className, {
                         'dc-file-dropzone--is-active': isDragActive,
                         'dc-file-dropzone--has-file': isDragActive || props.value.length > 0,
-                        'dc-file-dropzone--has-error':
-                            (isDragReject || !!props.validation_error_message) && !isDragAccept,
+                        'dc-file-dropzone--has-error': (isDragReject || !!validationErrorMessage) && !isDragAccept,
                         'dc-file-dropzone--is-noclick': noClick,
                     })}
                     ref={dropzone_ref}
@@ -121,12 +124,7 @@ const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) =
                     <div className='dc-file-dropzone__content'>
                         <FadeInMessage
                             // default message when not on hover or onDrag
-                            is_visible={
-                                !isDragActive &&
-                                !!props.message &&
-                                props.value.length < 1 &&
-                                !props.validation_error_message
-                            }
+                            is_visible={!isDragActive && !!message && props.value.length < 1 && !validationErrorMessage}
                             timeout={150}
                             no_text={noClick}
                         >
@@ -141,7 +139,7 @@ const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) =
                         </FadeInMessage>
                         {/* Handle cases for displaying multiple files and single filenames */}
 
-                        {props.multiple && props.value.length > 0 && !props.validation_error_message
+                        {props.multiple && props.value.length > 0 && !validationErrorMessage
                             ? props.value.map((file, idx) => (
                                   <Text
                                       size='xxs'
@@ -155,9 +153,7 @@ const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) =
                               ))
                             : props.value[0] &&
                               !isDragActive &&
-                              !props.validation_error_message && (
-                                  <PreviewSingle dropzone_ref={dropzone_ref} {...props} />
-                              )}
+                              !validationErrorMessage && <PreviewSingle dropzone_ref={dropzone_ref} {...props} />}
                         <FadeInMessage
                             // message shown if there are errors with the dragged file
                             is_visible={isDragReject}
@@ -168,7 +164,7 @@ const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) =
                         </FadeInMessage>
                         <FadeInMessage
                             // message shown on if there are validation errors with file uploaded
-                            is_visible={!!props.validation_error_message && !isDragActive}
+                            is_visible={!!validationErrorMessage && !isDragActive}
                             timeout={150}
                             color='loss-danger'
                         >

From fe293224bf5c9aded2e8d29eaaa3340d1a124bdd Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Fri, 11 Nov 2022 14:20:43 +0400
Subject: [PATCH 4/7] feat: :recycle: incorporated review comments

---
 .../file-uploader-container/file-uploader.jsx |  4 +--
 .../file-dropzone/file-dropzone.tsx           | 32 ++++++++++++-------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/packages/account/src/Components/file-uploader-container/file-uploader.jsx b/packages/account/src/Components/file-uploader-container/file-uploader.jsx
index eb2a08f83e61..24ac7125ee86 100644
--- a/packages/account/src/Components/file-uploader-container/file-uploader.jsx
+++ b/packages/account/src/Components/file-uploader-container/file-uploader.jsx
@@ -96,11 +96,11 @@ const FileUploader = React.forwardRef(({ onFileDrop, getSocket }, ref) => {
                 filename_limit={26}
                 hover_message={localize('Drop files here..')}
                 max_size={max_document_size}
-                message={() => <UploadMessage />}
+                message={<UploadMessage />}
                 multiple={false}
                 onDropAccepted={handleAcceptedFiles}
                 onDropRejected={handleRejectedFiles}
-                validation_error_message={() => document_file.error_message}
+                validation_error_message={document_file.error_message}
                 value={document_file.files}
             />
             {(document_file.files.length > 0 || !!document_file.error_message) && (
diff --git a/packages/components/src/components/file-dropzone/file-dropzone.tsx b/packages/components/src/components/file-dropzone/file-dropzone.tsx
index dece1a3067e0..42f03d7d3adf 100644
--- a/packages/components/src/components/file-dropzone/file-dropzone.tsx
+++ b/packages/components/src/components/file-dropzone/file-dropzone.tsx
@@ -20,10 +20,11 @@ type TPreviewSingle = {
 type TFileDropzone = {
     className?: string;
     noClick?: boolean;
-    validation_error_message: (open?: () => void) => ReactNode | null;
+    // validation_error_message: (open?: () => void) => ReactNode;
+    validation_error_message: ReactNode & ((open?: () => void) => ReactNode);
     max_size?: number;
     value: Array<{ name: string }>;
-    message: (open?: () => void) => ReactNode;
+    message: ReactNode & ((open?: () => void) => ReactNode);
     filename_limit?: number;
     error_message: string;
     hover_message: string;
@@ -92,9 +93,6 @@ const PreviewSingle = (props: TPreviewSingle) => {
 const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) => {
     const dropzone_ref = React.useRef(null);
 
-    const message = props.message();
-    const validationErrorMessage = props.validation_error_message();
-
     return (
         <Dropzone
             // sends back accepted files array
@@ -115,7 +113,8 @@ const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) =
                     className={classNames('dc-file-dropzone', className, {
                         'dc-file-dropzone--is-active': isDragActive,
                         'dc-file-dropzone--has-file': isDragActive || props.value.length > 0,
-                        'dc-file-dropzone--has-error': (isDragReject || !!validationErrorMessage) && !isDragAccept,
+                        'dc-file-dropzone--has-error':
+                            (isDragReject || !!props.validation_error_message) && !isDragAccept,
                         'dc-file-dropzone--is-noclick': noClick,
                     })}
                     ref={dropzone_ref}
@@ -124,11 +123,16 @@ const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) =
                     <div className='dc-file-dropzone__content'>
                         <FadeInMessage
                             // default message when not on hover or onDrag
-                            is_visible={!isDragActive && !!message && props.value.length < 1 && !validationErrorMessage}
+                            is_visible={
+                                !isDragActive &&
+                                !!props.message &&
+                                props.value.length < 1 &&
+                                !props.validation_error_message
+                            }
                             timeout={150}
                             no_text={noClick}
                         >
-                            {props.message(open)}
+                            {noClick ? props.message(open) : props.message}
                         </FadeInMessage>
                         <FadeInMessage
                             // message shown on hover if files are accepted onDrag
@@ -139,7 +143,7 @@ const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) =
                         </FadeInMessage>
                         {/* Handle cases for displaying multiple files and single filenames */}
 
-                        {props.multiple && props.value.length > 0 && !validationErrorMessage
+                        {props.multiple && props.value.length > 0 && !props.validation_error_message
                             ? props.value.map((file, idx) => (
                                   <Text
                                       size='xxs'
@@ -153,7 +157,9 @@ const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) =
                               ))
                             : props.value[0] &&
                               !isDragActive &&
-                              !validationErrorMessage && <PreviewSingle dropzone_ref={dropzone_ref} {...props} />}
+                              !props.validation_error_message && (
+                                  <PreviewSingle dropzone_ref={dropzone_ref} {...props} />
+                              )}
                         <FadeInMessage
                             // message shown if there are errors with the dragged file
                             is_visible={isDragReject}
@@ -164,11 +170,13 @@ const FileDropzone = ({ className, noClick = false, ...props }: TFileDropzone) =
                         </FadeInMessage>
                         <FadeInMessage
                             // message shown on if there are validation errors with file uploaded
-                            is_visible={!!validationErrorMessage && !isDragActive}
+                            is_visible={!!props.validation_error_message && !isDragActive}
                             timeout={150}
                             color='loss-danger'
                         >
-                            {props.validation_error_message(open)}
+                            {noClick && typeof props.validation_error_message === 'function'
+                                ? props.validation_error_message(open)
+                                : props.validation_error_message}
                         </FadeInMessage>
                     </div>
                 </div>

From 83bbd306bb332139308ac026da017063009c1cbb Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Fri, 11 Nov 2022 14:21:45 +0400
Subject: [PATCH 5/7] feat: :art: remoed comments

---
 .../components/src/components/file-dropzone/file-dropzone.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/components/file-dropzone/file-dropzone.tsx b/packages/components/src/components/file-dropzone/file-dropzone.tsx
index 42f03d7d3adf..0b612fa3280b 100644
--- a/packages/components/src/components/file-dropzone/file-dropzone.tsx
+++ b/packages/components/src/components/file-dropzone/file-dropzone.tsx
@@ -20,7 +20,6 @@ type TPreviewSingle = {
 type TFileDropzone = {
     className?: string;
     noClick?: boolean;
-    // validation_error_message: (open?: () => void) => ReactNode;
     validation_error_message: ReactNode & ((open?: () => void) => ReactNode);
     max_size?: number;
     value: Array<{ name: string }>;

From f98650c2b3f5912d39743f89f30c05440c98ab12 Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Fri, 11 Nov 2022 14:32:01 +0400
Subject: [PATCH 6/7] feat: migrated index file

---
 .../src/components/file-dropzone/{index.js => index.ts}           | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/components/src/components/file-dropzone/{index.js => index.ts} (100%)

diff --git a/packages/components/src/components/file-dropzone/index.js b/packages/components/src/components/file-dropzone/index.ts
similarity index 100%
rename from packages/components/src/components/file-dropzone/index.js
rename to packages/components/src/components/file-dropzone/index.ts

From 7145ae1c57a062549c44048606e194655846eb7d Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Fri, 11 Nov 2022 16:13:48 +0400
Subject: [PATCH 7/7] feat: :art: incorporated type

---
 .../components/src/components/file-dropzone/file-dropzone.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/components/file-dropzone/file-dropzone.tsx b/packages/components/src/components/file-dropzone/file-dropzone.tsx
index 0b612fa3280b..95c99d37bb8a 100644
--- a/packages/components/src/components/file-dropzone/file-dropzone.tsx
+++ b/packages/components/src/components/file-dropzone/file-dropzone.tsx
@@ -19,7 +19,6 @@ type TPreviewSingle = {
 
 type TFileDropzone = {
     className?: string;
-    noClick?: boolean;
     validation_error_message: ReactNode & ((open?: () => void) => ReactNode);
     max_size?: number;
     value: Array<{ name: string }>;