[FEQ] Sergei / FEQ - 2374, 2375, 2376 / Tablet view issues 4 (2) (#15666

) * fix: creation banner and adding mt5 account * feat: add deriv-com/ui to account package json * fix: add react/jsx-runtime to webpack resolvers because i have added deriv-com/ui to package json
binary-com · Jun 14, 2024 · aa6fd7b · aa6fd7b
1 parent 445f55c
commit aa6fd7b
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 94 deletions.
diff --git a/packages/account/build/constants.js b/packages/account/build/constants.js
@@ -17,6 +17,7 @@ const {
 } = require('./loaders-config');
 
 const ALIASES = {
+    'react/jsx-runtime': 'react/jsx-runtime.js',
     Assets: path.resolve(__dirname, '../src/Assets'),
     Components: path.resolve(__dirname, '../src/Components'),
     Configs: path.resolve(__dirname, '../src/Configs'),

diff --git a/packages/account/package.json b/packages/account/package.json
@@ -33,6 +33,7 @@
         "@deriv-com/analytics": "1.5.9",
         "@deriv-com/translations": "^1.2.3",
         "@deriv-com/utils": "^0.0.24",
+        "@deriv-com/ui": "v1.28.1",
         "@deriv/api": "^1.0.0",
         "@deriv/components": "^1.0.0",
         "@deriv/hooks": "^1.0.0",

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
@@ -7,11 +7,17 @@
         row-gap: 1.6rem;
         margin-bottom: 2.4rem;
 
-        @include desktop {
+        @include tablet-screen {
+            grid-template-columns: repeat(2, 1fr);
+            row-gap: 3.2rem;
+        }
+
+        @include desktop-screen {
             grid-template-columns: repeat(3, 1fr);
             column-gap: calc((100% - 23.7rem * 3) / 2);
             row-gap: 3.2rem;
         }
+
         &-layout {
             background-color: var(--transparent-danger);
             gap: 1.6rem;
@@ -25,7 +31,7 @@
             width: 23.7rem;
             height: 21.8rem;
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 margin-inline: auto;
             }
         }

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
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Formik, FormikErrors, FormikHelpers, FormikValues } from 'formik';
+import { useDevice } from '@deriv-com/ui';
 import { Loading, Button, Text, ThemedScrollbars, FormSubmitButton, Modal, HintBox } from '@deriv/components';
 import { useFileUploader } from '@deriv/hooks';
 import { validAddress, validPostCode, validLetterSymbol, validLength, getLocation, WS } from '@deriv/shared';
@@ -44,15 +45,15 @@ const ProofOfAddressForm = observer(
         step_index,
         className,
     }: Partial<TProofOfAddressForm>) => {
-        const { client, notifications, ui } = useStore();
+        const { isDesktop } = useDevice();
+        const { client, notifications } = useStore();
         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,12 +284,12 @@ 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)}>
@@ -297,7 +298,7 @@ const ProofOfAddressForm = observer(
                                                 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>