Merge pull request binary-com#11 from utkarsha-deriv/utkarsha/tablet-…

…view-proof-of-ownership [UPM-643] tablet view for proof of ownership
Dhruv-deriv · May 23, 2024 · 50151fa · 50151fa
2 parents df4a352 + a810fb2
commit 50151fa
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 87 deletions.
diff --git a/packages/account/src/Components/icon-message-content/icon-message-content.tsx b/packages/account/src/Components/icon-message-content/icon-message-content.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { Div100vhContainer, Text } from '@deriv/components';
-import { isDesktop } from '@deriv/shared';
+import { useDevice } from '@deriv-com/ui';
 
 type TIconMessageContent = {
     className?: string;
@@ -20,57 +20,61 @@ const IconMessageContent = ({
     is_disabled_for_mobile = false,
     message,
     text,
-}: React.PropsWithChildren<TIconMessageContent>) => (
-    <Div100vhContainer
-        className={classNames('account-management__message-wrapper', {
-            'account-management__message-wrapper-full-width': full_width,
-        })}
-        is_disabled={isDesktop() || is_disabled_for_mobile}
-        height_offset='110px'
-    >
-        <div
-            className={classNames('account-management__message-content', {
-                [`${className}__message-content`]: className,
+}: React.PropsWithChildren<TIconMessageContent>) => {
+    const { isDesktop } = useDevice();
+
+    return (
+        <Div100vhContainer
+            className={classNames('account-management__message-wrapper', {
+                'account-management__message-wrapper-full-width': full_width,
             })}
+            is_disabled={isDesktop || is_disabled_for_mobile}
+            height_offset='110px'
         >
-            {icon && (
-                <div
-                    className={classNames('account-management__message-icon', {
-                        [`${className}__message-icon`]: className,
-                    })}
-                >
-                    {icon}
-                </div>
-            )}
-            <Text
-                as='div'
-                color='general'
-                weight='bold'
-                size='s'
-                align='center'
-                className={classNames('account-management__message', {
-                    [`${className}__message`]: className,
+            <div
+                className={classNames('account-management__message-content', {
+                    [`${className}__message-content`]: className,
                 })}
             >
-                {message}
-            </Text>
-            {text && (
-                <div className='account-management__text-container'>
-                    <Text
-                        className={classNames({
-                            [`${className}__text`]: className,
+                {icon && (
+                    <div
+                        className={classNames('account-management__message-icon', {
+                            [`${className}__message-icon`]: className,
                         })}
-                        as='p'
-                        size='xs'
-                        align='center'
                     >
-                        {text}
-                    </Text>
-                </div>
-            )}
-            {children}
-        </div>
-    </Div100vhContainer>
-);
+                        {icon}
+                    </div>
+                )}
+                <Text
+                    as='div'
+                    color='general'
+                    weight='bold'
+                    size='s'
+                    align='center'
+                    className={classNames('account-management__message', {
+                        [`${className}__message`]: className,
+                    })}
+                >
+                    {message}
+                </Text>
+                {text && (
+                    <div className='account-management__text-container'>
+                        <Text
+                            className={classNames({
+                                [`${className}__text`]: className,
+                            })}
+                            as='p'
+                            size='xs'
+                            align='center'
+                        >
+                            {text}
+                        </Text>
+                    </div>
+                )}
+                {children}
+            </div>
+        </Div100vhContainer>
+    );
+};
 
 export default IconMessageContent;
diff --git a/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership-form.tsx b/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership-form.tsx
@@ -3,6 +3,7 @@ import { Form, Formik, FormikHelpers, FormikProps } from 'formik';
 import DocumentUploader from '@binary-com/binary-document-uploader';
 import { Button } from '@deriv/components';
 import { readFiles, WS, UPLOAD_FILE_TYPE } from '@deriv/shared';
+import { useDevice } from '@deriv-com/ui';
 import { observer, useStore } from '@deriv/stores';
 import { Localize, localize } from '@deriv/translations';
 import FormFooter from '../../../Components/form-footer';
@@ -24,10 +25,10 @@ type TProofOfOwnershipFormProps = {
 };
 
 const ProofOfOwnershipForm = observer(({ grouped_payment_method_data }: TProofOfOwnershipFormProps) => {
-    const { client, notifications, ui } = useStore();
+    const { client, notifications } = useStore();
     const { refreshNotifications } = notifications;
     const { email: client_email, updateAccountStatus } = client;
-    const { is_mobile } = ui;
+    const { isDesktop } = useDevice();
 
     const grouped_payment_method_data_keys = Object.keys(grouped_payment_method_data) as Array<TPaymentMethod>;
 
@@ -46,11 +47,11 @@ const ProofOfOwnershipForm = observer(({ grouped_payment_method_data }: TProofOf
 
     const getScrollOffset = React.useCallback(
         (items_count = 0) => {
-            if (is_mobile) return '20rem';
+            if (!isDesktop) return '20rem';
             if (items_count <= 2) return '0rem';
             return '8rem';
         },
-        [is_mobile]
+        [isDesktop]
     );
 
     if (grouped_payment_method_data_keys) {