[WEBREL] Sergei / WEBREL - 2856 / UI Bugs for Tablet View Implementat…

…ion (deriv-com#15815) * feat: add useDevice hook instead of is_mobile from the store * feat: changed a lot of stuff * fix: tests for personal-details * feat: implement suggestions * feat: change js breakpoints, add styles for tablet screens and fix tests
heorhi-deriv · Jun 28, 2024 · 30775f4 · 30775f4
1 parent 75288e7
commit 30775f4
Show file tree

Hide file tree

Showing 23 changed files with 420 additions and 371 deletions.
diff --git a/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx b/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { FormikProps } from 'formik';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { useDevice } from '@deriv-com/ui';
 import { useStatesList } from '@deriv/hooks';
 import { isDesktop, isMobile } from '@deriv/shared';
 import { StoreProvider, mockStore } from '@deriv/stores';
@@ -38,6 +39,11 @@ jest.mock('@deriv/components', () => {
     };
 });
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({ isDesktop: true, isMobile: false })),
+}));
+
 const mockedSplitValidationResultTypes = splitValidationResultTypes as jest.MockedFunction<
     typeof splitValidationResultTypes
 >;
@@ -103,6 +109,7 @@ describe('<AddressDetails/>', () => {
     beforeEach(() => {
         (isDesktop as jest.Mock).mockReturnValue(true);
         (isMobile as jest.Mock).mockReturnValue(false);
+        (useDevice as jest.Mock).mockReturnValue({ isDesktop: true, isMobile: false });
         jest.clearAllMocks();
     });
 
@@ -117,6 +124,7 @@ describe('<AddressDetails/>', () => {
     });
 
     it('should render AddressDetails component for mobile', async () => {
+        (useDevice as jest.Mock).mockReturnValue({ isMobile: true, isDesktop: false });
         const new_store_config: TStores = {
             ...store,
             ui: {
@@ -211,6 +219,8 @@ describe('<AddressDetails/>', () => {
     it('should render AddressDetails component with states_list for mobile', async () => {
         (isDesktop as jest.Mock).mockReturnValue(false);
         (isMobile as jest.Mock).mockReturnValue(true);
+        (useDevice as jest.Mock).mockReturnValue({ isMobile: true, isDesktop: false });
+
         (useStatesList as jest.Mock).mockReturnValue({
             data: [
                 { text: 'State 1', value: 'State 1' },

diff --git a/packages/account/src/Components/address-details/address-details.tsx b/packages/account/src/Components/address-details/address-details.tsx
@@ -4,15 +4,14 @@
 import { RefObject, useState, Fragment } from 'react';
 import clsx from 'clsx';
 import { Formik, Field, FormikProps, FormikHelpers, FormikHandlers, FormikState, FieldProps } from 'formik';
+import { useDevice } from '@deriv-com/ui';
 import { StatesList } from '@deriv/api-types';
 import {
     Autocomplete,
     AutoHeightWrapper,
-    DesktopWrapper,
     Div100vhContainer,
     FormSubmitButton,
     Loading,
-    MobileWrapper,
     Modal,
     SelectNative,
     Text,
@@ -89,15 +88,14 @@ const AddressDetails = observer(
         has_real_account,
         ...props
     }: TAddressDetails) => {
+        const { isDesktop } = useDevice();
         const [address_state_to_display, setAddressStateToDisplay] = useState('');
 
         const {
-            ui,
             client: { residence, account_settings },
             traders_hub: { is_eu_user },
         } = useStore();
 
-        const { is_desktop, is_mobile } = ui;
         const { data: states_list, isFetched } = useStatesList(residence);
 
         const handleCancel = (values: TAddressDetailFormProps) => {
@@ -128,7 +126,7 @@ const AddressDetails = observer(
                     handleChange,
                     setFieldTouched,
                 }: FormikHandlers & FormikHelpers<TAddressDetailFormProps> & FormikState<TAddressDetailFormProps>) => (
-                    <AutoHeightWrapper default_height={350} height_offset={is_desktop ? 80 : null}>
+                    <AutoHeightWrapper default_height={350} height_offset={isDesktop ? 80 : null}>
                         {({
                             setRef,
                             height,
@@ -141,10 +139,10 @@ const AddressDetails = observer(
                                 <Div100vhContainer
                                     className='details-form'
                                     height_offset='90px'
-                                    is_disabled={is_desktop}
+                                    is_disabled={isDesktop}
                                 >
                                     <ScrollToFieldWithError />
-                                    {is_mobile && (
+                                    {!isDesktop && (
                                         <Text size='xs' weight='bold' className='details-form__heading'>
                                             <Localize i18n_default_text='Complete your address details' />
                                         </Text>
@@ -195,7 +193,7 @@ const AddressDetails = observer(
                                                 <Field name='address_state'>
                                                     {({ field }: FieldProps) => (
                                                         <Fragment>
-                                                            <DesktopWrapper>
+                                                            {isDesktop ? (
                                                                 <Autocomplete
                                                                     {...field}
                                                                     {...(address_state_to_display && {
@@ -224,8 +222,7 @@ const AddressDetails = observer(
                                                                             has_real_account)
                                                                     }
                                                                 />
-                                                            </DesktopWrapper>
-                                                            <MobileWrapper>
+                                                            ) : (
                                                                 <SelectNative
                                                                     placeholder={localize('Please select')}
                                                                     label={localize('State/Province')}
@@ -248,7 +245,7 @@ const AddressDetails = observer(
                                                                             has_real_account)
                                                                     }
                                                                 />
-                                                            </MobileWrapper>
+                                                            )}
                                                         </Fragment>
                                                     )}
                                                 </Field>
@@ -280,11 +277,11 @@ const AddressDetails = observer(
                                         </div>
                                     </ThemedScrollbars>
                                 </Div100vhContainer>
-                                <Modal.Footer has_separator is_bypassed={is_mobile}>
+                                <Modal.Footer has_separator is_bypassed={!isDesktop}>
                                     <FormSubmitButton
                                         is_disabled={isSubmitting}
                                         label={localize('Next')}
-                                        is_absolute={is_mobile}
+                                        is_absolute={!isDesktop}
                                         has_cancel
                                         cancel_label={localize('Previous')}
                                         onCancel={() => handleCancel(values)}