From 2dbeb09b0226f6e8839874ceecd1279be1cbe0ee Mon Sep 17 00:00:00 2001
From: Muhammad Fasih Ali Naqvi
 <muhammadfasih@Muhammad-Fasihs-Mac-X7KDC4NKQ0-Standard.local>
Date: Tue, 21 May 2024 15:00:57 +0800
Subject: [PATCH 1/4] feat: enabled poa for tablet view

---
 .../src/Components/form-body/form-body.tsx    |  4 ++-
 .../common-mistake-examples.scss              |  3 +++
 .../scrollbars-container.tsx                  | 26 ++++++++++++-------
 .../ProofOfAddress/proof-of-address-form.tsx  | 18 +++++++------
 packages/account/src/Styles/account.scss      |  9 +++++++
 5 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/packages/account/src/Components/form-body/form-body.tsx b/packages/account/src/Components/form-body/form-body.tsx
index 1bff72577005..d7551daecc56 100644
--- a/packages/account/src/Components/form-body/form-body.tsx
+++ b/packages/account/src/Components/form-body/form-body.tsx
@@ -6,14 +6,16 @@ import classNames from 'classnames';
 type TFormBody = {
     scroll_offset?: string;
     className?: string;
+    isFullHeight?: boolean;
 };
 
-export const FormBody = ({ children, scroll_offset, className }: React.PropsWithChildren<TFormBody>) => (
+export const FormBody = ({ children, scroll_offset, className, isFullHeight }: React.PropsWithChildren<TFormBody>) => (
     <React.Fragment>
         <DesktopWrapper>
             <ScrollbarsContainer
                 className={classNames('account__scrollbars_container--grid-layout', className)}
                 scroll_offset={scroll_offset}
+                isFullHeight={isFullHeight}
             >
                 {children}
             </ScrollbarsContainer>
diff --git a/packages/account/src/Components/poa/common-mistakes/common-mistake-examples.scss b/packages/account/src/Components/poa/common-mistakes/common-mistake-examples.scss
index 2336f29e78e4..8489d93d114e 100644
--- a/packages/account/src/Components/poa/common-mistakes/common-mistake-examples.scss
+++ b/packages/account/src/Components/poa/common-mistakes/common-mistake-examples.scss
@@ -12,6 +12,9 @@
             column-gap: calc((100% - 23.7rem * 3) / 2);
             row-gap: 3.2rem;
         }
+        @include tablet-screen {
+            grid-template-columns: repeat(2, 1fr);
+        }
         &-layout {
             background-color: var(--transparent-danger);
             gap: 1.6rem;
diff --git a/packages/account/src/Components/scrollbars-container/scrollbars-container.tsx b/packages/account/src/Components/scrollbars-container/scrollbars-container.tsx
index af785dab5d89..7c9e160db6e7 100644
--- a/packages/account/src/Components/scrollbars-container/scrollbars-container.tsx
+++ b/packages/account/src/Components/scrollbars-container/scrollbars-container.tsx
@@ -6,19 +6,27 @@ import { isMobile } from '@deriv/shared';
 type TScrollbarsContainer = {
     className?: string;
     scroll_offset?: string;
+    isFullHeight?: boolean;
 };
 
 export const ScrollbarsContainer = ({
     children,
     className,
     scroll_offset,
-}: React.PropsWithChildren<TScrollbarsContainer>) => (
-    <ThemedScrollbars is_bypassed={isMobile()} height={scroll_offset ? `calc(100% - ${scroll_offset})` : '100%'}>
-        <div
-            className={classNames('account__scrollbars_container', className)}
-            data-testid='dt_scrollbar_container_div'
+    isFullHeight = false,
+}: React.PropsWithChildren<TScrollbarsContainer>) => {
+    const height_unit = isFullHeight ? '100vh' : '100%';
+    return (
+        <ThemedScrollbars
+            is_bypassed={isMobile()}
+            height={scroll_offset ? `calc(${height_unit} - ${scroll_offset})` : '100%'}
         >
-            {children}
-        </div>
-    </ThemedScrollbars>
-);
+            <div
+                className={classNames('account__scrollbars_container', className)}
+                data-testid='dt_scrollbar_container_div'
+            >
+                {children}
+            </div>
+        </ThemedScrollbars>
+    );
+};
diff --git a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx
index 04d5a4d4f669..c044b094574c 100644
--- a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx
+++ b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx
@@ -17,6 +17,7 @@ import CommonMistakeExamples from '../../../Components/poa/common-mistakes/commo
 import PersonalDetailsForm from '../../../Components/forms/personal-details-form.jsx';
 import { isServerError, validate } from '../../../Helpers/utils';
 import { getFileUploaderDescriptions } from '../../../Constants/file-uploader';
+import { useDevice } from '@deriv-com/ui';
 
 type TProofOfAddressForm = {
     className?: string;
@@ -44,7 +45,8 @@ const ProofOfAddressForm = observer(
         step_index,
         className,
     }: Partial<TProofOfAddressForm>) => {
-        const { client, notifications, ui } = useStore();
+        const { client, notifications } = useStore();
+        const { isDesktop, isMobile, isTablet } = useDevice();
         const { account_settings, fetchResidenceList, fetchStatesList, getChangeableFields, states_list, is_eu } =
             client;
         const {
@@ -52,7 +54,7 @@ const ProofOfAddressForm = observer(
             removeNotificationMessage,
             removeNotificationByKey,
         } = notifications;
-        const { is_mobile } = ui;
+        // const { isMobile } = ui;
         const [document_files, setDocumentFiles] = React.useState<File[]>([]);
         const [file_selection_error, setFileSelectionError] = React.useState<string | null>(null);
         const [is_loading, setIsLoading] = React.useState(true);
@@ -271,7 +273,7 @@ const ProofOfAddressForm = observer(
         }
         const setOffset = (status: { msg: string }) => {
             const mobile_scroll_offset = status?.msg ? '200px' : '154px';
-            return is_mobile && !is_for_cfd_modal ? mobile_scroll_offset : '80px';
+            return (isMobile || isTablet) && !is_for_cfd_modal ? mobile_scroll_offset : '80px';
         };
 
         return (
@@ -283,21 +285,21 @@ const ProofOfAddressForm = observer(
             >
                 {({ status, handleSubmit, isSubmitting, isValid }) => (
                     <>
-                        <LeaveConfirm onDirty={is_mobile ? showForm : undefined} />
+                        <LeaveConfirm onDirty={isMobile ? showForm : undefined} />
                         {form_state.should_show_form && (
                             <form noValidate className='account-form account-form_poa' onSubmit={handleSubmit}>
                                 <ThemedScrollbars
                                     height='572px'
-                                    is_bypassed={!is_for_cfd_modal || is_mobile}
+                                    is_bypassed={!is_for_cfd_modal || isMobile}
                                     className={className}
                                 >
-                                    <FormBody scroll_offset={setOffset(status)}>
+                                    <FormBody scroll_offset={setOffset(status)} isFullHeight={!isDesktop}>
                                         {(status?.msg || is_resubmit) && (
                                             <HintBox
                                                 className='account-form_poa-submit-error'
                                                 icon='IcAlertDanger'
                                                 message={
-                                                    <Text as='p' size={is_mobile ? 'xxxs' : 'xs'}>
+                                                    <Text as='p' size={isMobile ? 'xxxs' : 'xs'}>
                                                         {!status?.msg && is_resubmit && (
                                                             <Localize i18n_default_text='We were unable to verify your address with the details you provided. Please check and resubmit or choose a different document type.' />
                                                         )}
@@ -342,7 +344,7 @@ const ProofOfAddressForm = observer(
                                                 !!file_selection_error
                                             }
                                             label={localize('Continue')}
-                                            is_absolute={is_mobile}
+                                            is_absolute={isMobile}
                                             is_loading={isSubmitting}
                                         />
                                     </Modal.Footer>
diff --git a/packages/account/src/Styles/account.scss b/packages/account/src/Styles/account.scss
index 317235c7c724..74d9337c6c33 100644
--- a/packages/account/src/Styles/account.scss
+++ b/packages/account/src/Styles/account.scss
@@ -627,6 +627,12 @@ $MIN_HEIGHT_FLOATING: calc(
     }
 
     .account-management {
+        &__container {
+            @include mobile-or-tablet-screen {
+                margin-inline: auto;
+                margin-block-start: 1.6rem;
+            }
+        }
         &__list {
             &-container {
                 margin-top: 1.6rem;
@@ -713,6 +719,9 @@ $MIN_HEIGHT_FLOATING: calc(
                 display: flex;
                 justify-content: center;
                 width: 100%;
+                @include mobile-or-tablet-screen {
+                    margin-block-start: 1.6rem;
+                }
 
                 &-full-width {
                     width: calc(100vw - 33rem);

From a6a24379d7d0d375d10abcce2f8c35c67d89b733 Mon Sep 17 00:00:00 2001
From: Muhammad Fasih Ali Naqvi
 <muhammadfasih@Muhammad-Fasihs-Mac-X7KDC4NKQ0-Standard.local>
Date: Tue, 21 May 2024 15:06:47 +0800
Subject: [PATCH 2/4] feat: removed unused code

---
 .../Verification/ProofOfAddress/proof-of-address-form.tsx        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx
index c044b094574c..2e458f2f9e28 100644
--- a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx
+++ b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx
@@ -54,7 +54,6 @@ const ProofOfAddressForm = observer(
             removeNotificationMessage,
             removeNotificationByKey,
         } = notifications;
-        // const { isMobile } = ui;
         const [document_files, setDocumentFiles] = React.useState<File[]>([]);
         const [file_selection_error, setFileSelectionError] = React.useState<string | null>(null);
         const [is_loading, setIsLoading] = React.useState(true);

From 81341af4e6bf21d83b6ac19c63e7c7a54cc5e4fc Mon Sep 17 00:00:00 2001
From: Muhammad Fasih Ali Naqvi
 <muhammadfasih@Muhammad-Fasihs-Mac-X7KDC4NKQ0-Standard.local>
Date: Tue, 21 May 2024 15:36:30 +0800
Subject: [PATCH 3/4] feat: used not desktop breakpoint

---
 .../scrollbars-container/scrollbars-container.tsx    |  5 +++--
 .../ProofOfAddress/proof-of-address-form.tsx         | 12 ++++++------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/account/src/Components/scrollbars-container/scrollbars-container.tsx b/packages/account/src/Components/scrollbars-container/scrollbars-container.tsx
index 7c9e160db6e7..a146685012ec 100644
--- a/packages/account/src/Components/scrollbars-container/scrollbars-container.tsx
+++ b/packages/account/src/Components/scrollbars-container/scrollbars-container.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import { ThemedScrollbars } from '@deriv/components';
-import { isMobile } from '@deriv/shared';
+import { useDevice } from '@deriv-com/ui';
 
 type TScrollbarsContainer = {
     className?: string;
@@ -15,10 +15,11 @@ export const ScrollbarsContainer = ({
     scroll_offset,
     isFullHeight = false,
 }: React.PropsWithChildren<TScrollbarsContainer>) => {
+    const { isDesktop } = useDevice();
     const height_unit = isFullHeight ? '100vh' : '100%';
     return (
         <ThemedScrollbars
-            is_bypassed={isMobile()}
+            is_bypassed={!isDesktop}
             height={scroll_offset ? `calc(${height_unit} - ${scroll_offset})` : '100%'}
         >
             <div
diff --git a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx
index 2e458f2f9e28..c2bb7c8c3d18 100644
--- a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx
+++ b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx
@@ -46,7 +46,7 @@ const ProofOfAddressForm = observer(
         className,
     }: Partial<TProofOfAddressForm>) => {
         const { client, notifications } = useStore();
-        const { isDesktop, isMobile, isTablet } = useDevice();
+        const { isDesktop } = useDevice();
         const { account_settings, fetchResidenceList, fetchStatesList, getChangeableFields, states_list, is_eu } =
             client;
         const {
@@ -272,7 +272,7 @@ const ProofOfAddressForm = observer(
         }
         const setOffset = (status: { msg: string }) => {
             const mobile_scroll_offset = status?.msg ? '200px' : '154px';
-            return (isMobile || isTablet) && !is_for_cfd_modal ? mobile_scroll_offset : '80px';
+            return !isDesktop && !is_for_cfd_modal ? mobile_scroll_offset : '80px';
         };
 
         return (
@@ -284,12 +284,12 @@ const ProofOfAddressForm = observer(
             >
                 {({ status, handleSubmit, isSubmitting, isValid }) => (
                     <>
-                        <LeaveConfirm onDirty={isMobile ? showForm : undefined} />
+                        <LeaveConfirm onDirty={!isDesktop ? showForm : undefined} />
                         {form_state.should_show_form && (
                             <form noValidate className='account-form account-form_poa' onSubmit={handleSubmit}>
                                 <ThemedScrollbars
                                     height='572px'
-                                    is_bypassed={!is_for_cfd_modal || isMobile}
+                                    is_bypassed={!is_for_cfd_modal || !isDesktop}
                                     className={className}
                                 >
                                     <FormBody scroll_offset={setOffset(status)} isFullHeight={!isDesktop}>
@@ -298,7 +298,7 @@ const ProofOfAddressForm = observer(
                                                 className='account-form_poa-submit-error'
                                                 icon='IcAlertDanger'
                                                 message={
-                                                    <Text as='p' size={isMobile ? 'xxxs' : 'xs'}>
+                                                    <Text as='p' size={!isDesktop ? 'xxxs' : 'xs'}>
                                                         {!status?.msg && is_resubmit && (
                                                             <Localize i18n_default_text='We were unable to verify your address with the details you provided. Please check and resubmit or choose a different document type.' />
                                                         )}
@@ -343,7 +343,7 @@ const ProofOfAddressForm = observer(
                                                 !!file_selection_error
                                             }
                                             label={localize('Continue')}
-                                            is_absolute={isMobile}
+                                            is_absolute={!isDesktop}
                                             is_loading={isSubmitting}
                                         />
                                     </Modal.Footer>

From aa0dca6b81757736f0910948cf9e6f8d7748ac8b Mon Sep 17 00:00:00 2001
From: Muhammad Fasih Ali Naqvi
 <muhammadfasih@Muhammad-Fasihs-Mac-X7KDC4NKQ0-Standard.local>
Date: Tue, 21 May 2024 18:11:50 +0800
Subject: [PATCH 4/4] feat: updated device hook

---
 .../src/Components/form-body/form-body.tsx    | 47 ++++++++++---------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/packages/account/src/Components/form-body/form-body.tsx b/packages/account/src/Components/form-body/form-body.tsx
index d7551daecc56..c0300d511fe6 100644
--- a/packages/account/src/Components/form-body/form-body.tsx
+++ b/packages/account/src/Components/form-body/form-body.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { ScrollbarsContainer } from '../scrollbars-container/scrollbars-container';
-import { Div100vhContainer, DesktopWrapper, MobileWrapper } from '@deriv/components';
+import { Div100vhContainer } from '@deriv/components';
 import classNames from 'classnames';
+import { useDevice } from '@deriv-com/ui';
 
 type TFormBody = {
     scroll_offset?: string;
@@ -9,24 +10,26 @@ type TFormBody = {
     isFullHeight?: boolean;
 };
 
-export const FormBody = ({ children, scroll_offset, className, isFullHeight }: React.PropsWithChildren<TFormBody>) => (
-    <React.Fragment>
-        <DesktopWrapper>
-            <ScrollbarsContainer
-                className={classNames('account__scrollbars_container--grid-layout', className)}
-                scroll_offset={scroll_offset}
-                isFullHeight={isFullHeight}
-            >
-                {children}
-            </ScrollbarsContainer>
-        </DesktopWrapper>
-        <MobileWrapper>
-            <Div100vhContainer
-                className={classNames('account__scrollbars_container--grid-layout', className)}
-                height_offset={scroll_offset || '200px'}
-            >
-                {children}
-            </Div100vhContainer>
-        </MobileWrapper>
-    </React.Fragment>
-);
+export const FormBody = ({ children, scroll_offset, className, isFullHeight }: React.PropsWithChildren<TFormBody>) => {
+    const { isDesktop } = useDevice();
+    return (
+        <React.Fragment>
+            {isDesktop ? (
+                <ScrollbarsContainer
+                    className={classNames('account__scrollbars_container--grid-layout', className)}
+                    scroll_offset={scroll_offset}
+                    isFullHeight={isFullHeight}
+                >
+                    {children}
+                </ScrollbarsContainer>
+            ) : (
+                <Div100vhContainer
+                    className={classNames('account__scrollbars_container--grid-layout', className)}
+                    height_offset={scroll_offset || '200px'}
+                >
+                    {children}
+                </Div100vhContainer>
+            )}
+        </React.Fragment>
+    );
+};