Merge pull request #9 from fasihali-deriv/poa-tablet-view

Fasih/UPM-642/Enabled POA for tablet view
amina-deriv · May 22, 2024 · df4a352 · df4a352
2 parents c370590 + aa0dca6
commit df4a352
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 39 deletions.
diff --git a/packages/account/src/Components/form-body/form-body.tsx b/packages/account/src/Components/form-body/form-body.tsx
@@ -1,30 +1,35 @@
 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;
     className?: string;
+    isFullHeight?: boolean;
 };
 
-export const FormBody = ({ children, scroll_offset, className }: React.PropsWithChildren<TFormBody>) => (
-    <React.Fragment>
-        <DesktopWrapper>
-            <ScrollbarsContainer
-                className={classNames('account__scrollbars_container--grid-layout', className)}
-                scroll_offset={scroll_offset}
-            >
-                {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>
+    );
+};
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
@@ -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
@@ -1,24 +1,33 @@
 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;
     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 { isDesktop } = useDevice();
+    const height_unit = isFullHeight ? '100vh' : '100%';
+    return (
+        <ThemedScrollbars
+            is_bypassed={!isDesktop}
+            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
@@ -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,15 +45,15 @@ const ProofOfAddressForm = observer(
         step_index,
         className,
     }: Partial<TProofOfAddressForm>) => {
-        const { client, notifications, ui } = useStore();
+        const { client, notifications } = useStore();
+        const { isDesktop } = useDevice();
         const { account_settings, fetchResidenceList, fetchStatesList, getChangeableFields, states_list, is_eu } =
             client;
         const {
             addNotificationMessageByKey: addNotificationByKey,
             removeNotificationMessage,
             removeNotificationByKey,
         } = notifications;
-        const { is_mobile } = 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 +272,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 !isDesktop && !is_for_cfd_modal ? mobile_scroll_offset : '80px';
         };
 
         return (
@@ -283,21 +284,21 @@ const ProofOfAddressForm = observer(
             >
                 {({ status, handleSubmit, isSubmitting, isValid }) => (
                     <>
-                        <LeaveConfirm onDirty={is_mobile ? 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 || is_mobile}
+                                    is_bypassed={!is_for_cfd_modal || !isDesktop}
                                     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={!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.' />
                                                         )}
@@ -342,7 +343,7 @@ const ProofOfAddressForm = observer(
                                                 !!file_selection_error
                                             }
                                             label={localize('Continue')}
-                                            is_absolute={is_mobile}
+                                            is_absolute={!isDesktop}
                                             is_loading={isSubmitting}
                                         />
                                     </Modal.Footer>

diff --git 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);