[FEQ-2166]/Tablet view - Reports, Dtrader, Tradershub (#15011)

* [DTRA] Farhan/DTRA-945/Dtrader's Tablet View (#14346) * feat: tablet view * revert: trade params test cases * chore: remove unused imports * chore: added test case for usedevice * fix: height * fix: accumulators stats * fix: layout * fix: test * refactor: update test * refactor: change mixins names * fix: platform switcher * refactor: remove shared isnewmobile and fix styles in contract page * fix: blocker showing in different page besides dtrader, comments * fix: comments * revert: unneded changes * fix: test failed * fix: breaking designs because of rtl * feat: empty * fix: account switcher * fix: account switcher and add blocker on portrait * chore: update test case * refactor: replace with hook from deriv-com/ui * fix: failing test cases * chore: update deriv-com/ui and remove redundant hook * fix: useonclickoutside * [TRAH] Sergei / TRAH - 2761 / Trader's hub tablet view (#13396) * feat: update to deriv-com/ui * feat: delete landscape blocker * feat: add some mixins * feat: complete with mixins * feat: modify traders hub main page * feat: modify main title * feat: modify asset-summary * feat: modify asset-summary styles * feat: modify listing-container and currency-switcher styles * feat: modify header * feat: get back package-lock.json * fix: add some our library to ignore patterns for jest * chore: empty commit * feat: get back landscape_blocker * feat: better to update it in base.config intead of writing it in both files * feat: update package.json * feat: create hook to hide landscape_blocker * feat: move landscape blocker to the react compnent * feat: add routes to LandscapeBlocker * feat: add mock for deriv-com/ui in globals.js * fix: fix one test * feat: remove jest deriv-com/ui from globals * fix: trying to fix tests again * fix: fix again and again * fix: fix test case again * feat: add isDesktop check for cfds-listing * feat: override some styles * feat: change breakpoints for footer * fix: change package version * feat: update mixins based on Farhan PR * fix: fix lint issue * feat: delete useEffect in App of trader package and style for landscape blocker * feat: modify footer * chore: made decision to delete unreachable code * feat: get changes back for app component in trader package * feat: remove routes.root from disable blocker array * feat: change condition to else * feat: implement review suggestions and fix mixin * feat: rename sccs file * feat: get changes back for trading.scss * feat: implemet review suggestions * [TRAH] Sergei / TRAH-2762, TRAH-2763 / Tablet view for Jurisdiction Modal and Compare CFDs Accounts modal (#14799) * feat: modify regulators compare modal component * feat: add correct mixins for cfd-compare-accounts modal * fix: add resolver for react/jsx-runtime * fix: mock deriv-com/ui useDevice hook * feat: implement review suggestions * Farhan/DTRA-1195/Reports's tablet view (#14772) * chore: reports pages tablet view * style: update width as per figma design * refactor: landscape cloker component * fix: comments * chore: use bitwise to avoid nan value * fix: comments * fix: import * chore: update function * Farhan/Lock Dtrader Tablet View on Landscape Mode (#14781) * chore: lock landscape mode on tablet view * chore: only show tablet view on real tablet * fix: notification * chore: change implementation * fix: change root * refactor: comments * fix: comments * fix: height * fix: rtl language * refactor: remove extra property * fix: positions modal height based on figma * chore: add loader before rotating the screen * fix: failing test * chore: add timeout before hiding loader * style: move styles * chore: another ref for loader timeout cleanup * fix: hide footer for dtrader * DTRA / Kate / FEQ-2212 / Hide footer navigation links popovers (#15176) * fix: add check for desktop * refactor: add custom check for tablet os * refactor: revert changes from endpoint note and server time * refactor: device detection * fix: style and update function for detection tablet os * chore: remove empty space * chore: remove used type * DTRA / Kate / FEQ-2213 + FEQ-2205 / Made popover optional (#15197) * fix: add check for purchase button popover for tablet * fix: make popover optional for header * refactor: add condition for wallets header * [DTRA] Farhan/Dtrader Tablet Subtasks (#15123) * chore: lock landscape mode on tablet view * chore: only show tablet view on real tablet * fix: notification * chore: change implementation * fix: change root * refactor: comments * fix: comments * fix: height * fix: rtl language * refactor: remove extra property * fix: positions modal height based on figma * chore: add loader before rotating the screen * fix: failing test * chore: add timeout before hiding loader * style: move styles * chore: another ref for loader timeout cleanup * fix: hide footer for dtrader * chore: update os detect * fix: failing tests * fix: height issue * fix: android device issue and toolbar widgets * fix: reports height * fix: test failing * fix: position drawer on ios * refactor: remove unused prop * fix: route for contract --------- Co-authored-by: balakrishna-deriv <56330681+balakrishna-deriv@users.noreply.github.com> * chore: update @deriv/deriv-charts to 2.1.16 (#15212) Co-authored-by: balakrishna-deriv <balakrishna-deriv@users.noreply.github.com> * [DTRA] Farhan/Fix test failing (#15216) * chore: lock landscape mode on tablet view * chore: only show tablet view on real tablet * fix: notification * chore: change implementation * fix: change root * refactor: comments * fix: comments * fix: height * fix: rtl language * refactor: remove extra property * fix: positions modal height based on figma * chore: add loader before rotating the screen * fix: failing test * chore: add timeout before hiding loader * style: move styles * chore: another ref for loader timeout cleanup * fix: hide footer for dtrader * chore: update os detect * fix: failing tests * fix: height issue * fix: android device issue and toolbar widgets * fix: reports height * fix: test failing * fix: position drawer on ios * refactor: remove unused prop * fix: route for contract * fix: failing test and ts * fix: miseed ts errors --------- Co-authored-by: balakrishna-deriv <56330681+balakrishna-deriv@users.noreply.github.com> * feat: get changes back and just delete mixin for tablet (#15182) * [FEQ] Sergei / FEQ-2200, FEQ-2201 / Add a real MT5 account, Identity verification, Choose a jurisdiction popup for tablet (#15205) * feat: change styles for mt5 jurisdiction modal * feat: change styles for adding a real mt5 account modal * feat: change more styles * fix: add mock for useDevice hook from deriv-com/ui * [DTRA] Farhan/FEQ-2208/Hide indicators and drawing tools toolbar widgets on tablet (#15224) * chore: lock landscape mode on tablet view * chore: only show tablet view on real tablet * fix: notification * chore: change implementation * fix: change root * refactor: comments * fix: comments * fix: height * fix: rtl language * refactor: remove extra property * fix: positions modal height based on figma * chore: add loader before rotating the screen * fix: failing test * chore: add timeout before hiding loader * style: move styles * chore: another ref for loader timeout cleanup * fix: hide footer for dtrader * chore: update os detect * fix: failing tests * fix: height issue * fix: android device issue and toolbar widgets * fix: reports height * fix: test failing * fix: position drawer on ios * refactor: remove unused prop * fix: route for contract * fix: failing test and ts * fix: miseed ts errors * fix: hide indicators and drawing tools for tablet view * fix: test case * fix: height reports --------- Co-authored-by: balakrishna-deriv <56330681+balakrishna-deriv@users.noreply.github.com> * [DTRA] Farhan/FEQ-2205/Header notification icon and account settings links are not working as expected (#15275) * fix: hide popover on traders hub header * fix: account switcher width * fix: comments * feat: change mixins and add isTablet for datepicker (#15349) * feat: change 2 desktop mixins (#15362) * [DTRA] Farhan/Tablet view subtasks (#15376) * fix: subtasks 2 * fix: failing tests * [DTRA] Farhan/FEQ-2280/tablet subtasks (#15404) * fix: subtasks 2 * fix: failing tests * fix: positions toggle icon * refactor: digit breakpoint * fix: drawer moving when coming back from reports * fix: tablet tooltip * fix: hide download widget for tablet * fix: report open position footer * fix: double sell button * fix: digit container * fix: failing tests * fix: tests --------- Co-authored-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> * FEQ-2313 / Kate / Android tablet- Long code message content is showing in smaller size (#15474) * fix: css for link * fix: css * chore: get back line height * refactor: add tablet os check and revert style changes * Fix tablet view issues (#15469) * fix: jest test trader * fix: alignment issues * fix: test cases * fix: contract type dialog height (#15476) * Ahmad/Fix Strike Icon color on firefox (#15481) * chore: strike icon * fix: revert all * fix: tablet issues (#15497) * chore: remove unused hook * [FEX] Sergei / FEQ - 2310, 2311, 2319, 2320, 2344 / Tablet view issues #3 (#15522) * fix: change isDisabledLandscapeBlockerRoute because traders hub route now is the root route * feat: make logged out version of TH accesable for tablet view * feat: add styles for mt5 password modal * feat: fix notifications styles * Ahmad/Strike Icon Svg fix on Firefox (#15578) * chore: strike icon * fix: revert all * chore: add important * Ahmad/ Fiix Strike Icon in firefox and update Deriv UI Package (#15609) * chore: strike icon * fix: revert all * chore: add important * fix: update packages and remove temp fix * fix: creation banner and adding mt5 account (#15659) * Revert "fix: creation banner and adding mt5 account (#15659)" (#15661) This reverts commit ef2dddb. * [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 * [FEQ] Sergei / FEQ - 2376 / "Get real account" button for DIEL (#15690) * feat: tablet view suggestion * feat: implement new design for tablet * chore: fix test cases * chore: add observer --------- Co-authored-by: Farhan Ahmad Nurzi <125247833+farhan-nurzi-deriv@users.noreply.github.com> Co-authored-by: Sergei Baranovski <120570511+sergei-deriv@users.noreply.github.com> Co-authored-by: balakrishna-binary <bala.krishna@regentmarkets.com> Co-authored-by: kate-deriv <121025168+kate-deriv@users.noreply.github.com> Co-authored-by: balakrishna-deriv <56330681+balakrishna-deriv@users.noreply.github.com> Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com> Co-authored-by: balakrishna-deriv <balakrishna-deriv@users.noreply.github.com> Co-authored-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com> Co-authored-by: Akmal Djumakhodjaev <akmal@binary.com> Co-authored-by: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com>
deriv-com · Jun 26, 2024 · 9765c27 · 9765c27
1 parent 249894c
commit 9765c27
Show file tree

Hide file tree

Showing 225 changed files with 3,016 additions and 2,278 deletions.
diff --git a/.stylelintrc.js b/.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: [

diff --git a/__mocks__/globals.js b/__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({}),
 };

diff --git a/jest.config.base.js b/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'],

diff --git a/jest.config.js b/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/'],
 };
diff --git a/package-lock.json b/package-lock.json
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/jest.config.js b/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',

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.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",

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/Components/poi/status/unsupported/card-details/card-details.scss b/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;
 

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';
@@ -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>