[FEQ-2166]/Tablet view - Reports, Dtrader, Tradershub

.stylelintrc.js

@@ -36,7 +36,7 @@ module.exports = {
         'shorthand-property-no-redundant-values': true,
         'string-no-newline': true,
         'time-min-milliseconds': 100,
-        'unit-allowed-list': ['fr', 'px', 'em', 'rem', '%', 'svh', 'vw', 'vh', 'deg', 'ms', 's', 'dpcm'],
+        'unit-allowed-list': ['fr', 'px', 'em', 'rem', '%', 'svh', 'svw', 'vw', 'vh', 'deg', 'ms', 's', 'dpcm'],
         'value-keyword-case': 'lower',
     },
     extends: [

__mocks__/globals.js

@@ -20,6 +20,26 @@ jest.mock('@deriv-com/analytics', () => ({
     },
 }));
 
+// default breakpoint to desktop
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({ isDesktop: true }),
+}));
+
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(), // Deprecated
+        removeListener: jest.fn(), // Deprecated
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+    })),
+});
+
 const mock_onfido = {
     init: jest.fn().mockResolvedValue({}),
 };

jest.config.base.js

@@ -16,7 +16,7 @@ module.exports = {
     testRegex: '(/__tests__/.*|(\\.)(test|spec))\\.(js|jsx|tsx|ts)?$',
     // This is needed to transform es modules imported from node_modules of the target component.
     transformIgnorePatterns: [
-        '/node_modules/(?!(@enykeev/react-virtualized|@simplewebauthn/browser|@deriv-com/translations)).+\\.js$',
+        '/node_modules/(?!(@enykeev/react-virtualized|@simplewebauthn/browser|@deriv/quill-design|@deriv/quill-icons|@deriv-com/ui|@deriv-com/translations)).+\\.js$',
     ],
     setupFiles: ['<rootDir>/../../jest.setup.js'],
     setupFilesAfterEnv: ['<rootDir>/../../setupTests.js'],

jest.config.js

@@ -1,3 +1,5 @@
+const baseConfig = require('./jest.config.base');
+
 module.exports = {
     collectCoverage: false,
     collectCoverageFrom: [
@@ -17,6 +19,6 @@ module.exports = {
         '^.+\\.(ts|tsx)?$': 'ts-jest',
     },
     testRegex: '(/__tests__/.*|(\\.)(test|spec))\\.(js|jsx|tsx|ts)?$',
-    transformIgnorePatterns: ['/node_modules/(?!(@enykeev/react-virtualized|@simplewebauthn/browser)).+\\.js$'],
+    transformIgnorePatterns: baseConfig.transformIgnorePatterns,
     testPathIgnorePatterns: ['/integration-tests/'],
 };

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'),

packages/account/jest.config.js

@@ -4,6 +4,7 @@ module.exports = {
     ...baseConfigForPackages,
     preset: 'ts-jest',
     moduleNameMapper: {
+        '\\.css$': '<rootDir>/../../__mocks__/styleMock.js',
         '\\.s(c|a)ss$': '<rootDir>/../../__mocks__/styleMock.js',
         '^.+\\.svg$': '<rootDir>/../../__mocks__/styleMock.js',
         '@deriv-com/translations': '<rootDir>/../../__mocks__/translation.mock.js',

packages/account/package.json

@@ -33,6 +33,7 @@
         "@deriv-com/analytics": "1.5.9",
         "@deriv-com/translations": "^1.3.2",
         "@deriv-com/utils": "^0.0.25",
+        "@deriv-com/ui": "^1.28.1",
         "@deriv/api": "^1.0.0",
         "@deriv/components": "^1.0.0",
         "@deriv/hooks": "^1.0.0",

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;
             }
         }

packages/account/src/Components/poi/status/unsupported/card-details/card-details.scss

@@ -32,9 +32,13 @@
 
         .dc-datepicker {
             margin-left: 2.4rem;
+
+            @include mobile-or-tablet-screen {
+                margin-left: unset;
+            }
         }
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             .dc-input {
                 margin-bottom: 2rem;
             }
@@ -188,7 +192,7 @@
         .dc-btn:not(:last-of-type) {
             margin-right: 0.8rem;
         }
-        @include mobile {
+        @include mobile-or-tablet-screen {
             height: auto;
             padding-bottom: unset;
 

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';
@@ -37,15 +38,15 @@ type TFormState = Record<'is_btn_loading' | 'is_submit_success' | 'should_allow_
 
 const ProofOfAddressForm = observer(
     ({ is_resubmit, is_for_cfd_modal, onSubmit, onSubmitForCFDModal, 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);
@@ -272,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 !isDesktop && !is_for_cfd_modal ? mobile_scroll_offset : '80px';
         };
 
         return (
@@ -284,12 +285,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)}>
@@ -298,7 +299,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.' />
                                                         )}
@@ -343,7 +344,7 @@ const ProofOfAddressForm = observer(
                                                 !!file_selection_error
                                             }
                                             label={localize('Continue')}
-                                            is_absolute={is_mobile}
+                                            is_absolute={!isDesktop}
                                             is_loading={isSubmitting}
                                         />
                                     </Modal.Footer>