Merge pull request #147 from nada-deriv/nada/FEQ-2379/usedevice

nada/fix: removed usedevice component

Author: farrah-deriv

src/components/Checklist/Checklist.tsx

@@ -1,6 +1,5 @@
-import { useDevice } from '@/hooks/custom-hooks';
 import { LabelPairedArrowRightLgBoldIcon, LabelPairedCheckMdBoldIcon } from '@deriv/quill-icons';
-import { Button, Text } from '@deriv-com/ui';
+import { Button, Text, useDevice } from '@deriv-com/ui';
 import './Checklist.scss';
 
 type TChecklistItem = {

src/components/Input/Input.tsx

@@ -1,7 +1,6 @@
 import { forwardRef, ReactElement } from 'react';
 import clsx from 'clsx';
-import { useDevice } from '@/hooks/custom-hooks';
-import { Text } from '@deriv-com/ui';
+import { Text, useDevice } from '@deriv-com/ui';
 import './Input.scss';
 
 type TInputProps = {

src/components/Table/Table.tsx

@@ -1,7 +1,7 @@
 import { memo, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { useDevice, useFetchMore } from '@/hooks/custom-hooks';
-import { Text } from '@deriv-com/ui';
+import { useFetchMore } from '@/hooks/custom-hooks';
+import { Text, useDevice } from '@deriv-com/ui';
 import { ColumnDef, getCoreRowModel, getGroupedRowModel, GroupingState, useReactTable } from '@tanstack/react-table';
 import './Table.scss';
 

src/components/Verification/Verification.tsx

@@ -1,8 +1,8 @@
 import { Checklist } from '@/components';
-import { useDevice, usePoiPoaStatus } from '@/hooks/custom-hooks';
+import { usePoiPoaStatus } from '@/hooks/custom-hooks';
 import { DerivLightIcCashierSendEmailIcon } from '@deriv/quill-icons';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { Loader, Text } from '@deriv-com/ui';
+import { Loader, Text, useDevice } from '@deriv-com/ui';
 import { URLConstants } from '@deriv-com/utils';
 import './Verification.scss';
 

src/components/Verification/__tests__/Verification.spec.tsx

@@ -20,6 +20,13 @@ jest.mock('@/hooks/custom-hooks', () => ({
     usePoiPoaStatus: jest.fn(() => mockUsePoiPoaStatusData),
 }));
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({
+        isMobile: false,
+    })),
+}));
+
 describe('<Verification />', () => {
     beforeAll(() => {
         Object.defineProperty(window, 'location', {

src/hooks/custom-hooks/index.ts

@@ -1,6 +1,5 @@
 export { default as useAdvertiserStats } from './useAdvertiserStats';
 export { default as useCopyToClipboard } from './useCopyToClipboard';
-export { default as useDevice } from './useDevice';
 export { default as useExtendedOrderDetails } from './useExtendedOrderDetails';
 export { default as useFetchMore } from './useFetchMore';
 export { default as useFloatingRate } from './useFloatingRate';

src/hooks/custom-hooks/useDevice.ts

@@ -1,6 +1,7 @@
 import { DeepPartial, THooks } from 'types';
 import { api } from '@/hooks';
 import { useIsAdvertiserBarred } from '@/hooks/custom-hooks';
+import { useDevice } from '@deriv-com/ui';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import AdvertiserAdvertsTable from '../AdvertiserAdvertsTable';
@@ -77,6 +78,13 @@ jest.mock('@/hooks', () => ({
     },
 }));
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(),
+}));
+
+const mockUseDevice = useDevice as jest.Mock;
+
 const mockUseModalManager = {
     hideModal: jest.fn(),
     isModalOpenFor: jest.fn(),
@@ -118,6 +126,7 @@ describe('<AdvertiserAdvertsTable />', () => {
     });
 
     it('should show the AdvertsTableRenderer component if data is not empty', () => {
+        mockUseDevice.mockReturnValue({ isDesktop: true });
         mockUseGetAdvertList = {
             ...mockUseGetAdvertList,
             data: [

src/pages/advertiser/screens/AdvertiserAdvertsTable/__tests__/AdvertiserAdvertsTable.spec.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import { useDevice } from '@/hooks/custom-hooks';
-import { Text, ToggleSwitch } from '@deriv-com/ui';
+import { Localize } from '@deriv-com/translations';
+import { Text, ToggleSwitch, useDevice } from '@deriv-com/ui';
 
 type TMyAdsToggleProps = {
     isPaused: boolean;
@@ -11,7 +11,7 @@ const MyAdsToggle = ({ isPaused, onClickToggle }: TMyAdsToggleProps) => {
     return (
         <div className={clsx('flex gap-[1.6rem] items-center', { 'justify-end w-full': isMobile })}>
             <Text color={isPaused ? 'success' : 'less-prominent'} size={isMobile ? 'md' : 'sm'}>
-                Hide my ads
+                <Localize i18n_default_text='Hide my ads' />
             </Text>
             <ToggleSwitch onChange={onClickToggle} value={isPaused} />
         </div>

src/pages/my-ads/screens/MyAds/MyAdsToggle/MyAdsToggle.tsx

@@ -2,6 +2,13 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import MyAdsToggle from '../MyAdsToggle';
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({
+        isMobile: false,
+    })),
+}));
+
 const mockProps = {
     isPaused: false,
     onClickToggle: jest.fn(),

src/pages/my-ads/screens/MyAds/MyAdsToggle/__tests__/MyAdsToggle.spec.tsx

@@ -2,9 +2,9 @@ import { PropsWithChildren, useState } from 'react';
 import { FullPageMobileWrapper } from '@/components';
 import { RadioGroupFilterModal } from '@/components/Modals';
 import { getCounterpartiesDropdownList } from '@/constants';
-import { useDevice, useQueryString } from '@/hooks/custom-hooks';
+import { useQueryString } from '@/hooks/custom-hooks';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { Text } from '@deriv-com/ui';
+import { Text, useDevice } from '@deriv-com/ui';
 import { MyProfileCounterpartiesHeader } from './MyProfileCounterpartiesHeader';
 import { MyProfileCounterpartiesTable } from './MyProfileCounterpartiesTable';
 import './MyProfileCounterparties.scss';

src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterparties.tsx

@@ -1,10 +1,9 @@
 import { MutableOption } from 'types';
 import { Search } from '@/components';
 import { getCounterpartiesDropdownList } from '@/constants';
-import { useDevice } from '@/hooks/custom-hooks';
 import { LabelPairedChevronDownMdRegularIcon, LegacySort1pxIcon } from '@deriv/quill-icons';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { Button, Dropdown, Text } from '@deriv-com/ui';
+import { Button, Dropdown, Text, useDevice } from '@deriv-com/ui';
 import './MyProfileCounterpartiesHeader.scss';
 
 type MyProfileCounterpartiesHeaderProps = {

src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx

@@ -2,6 +2,12 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import MyProfileCounterpartiesHeader from '../MyProfileCounterpartiesHeader';
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({
+        isMobile: false,
+    })),
+}));
 const mockProps = {
     dropdownValue: 'all',
     onClickFilter: jest.fn(),

src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/__tests__/MyProfileCounterpartiesHeader.spec.tsx

@@ -1,4 +1,4 @@
-import { useDevice } from '@/hooks/custom-hooks';
+import { useDevice } from '@deriv-com/ui';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import MyProfileCounterparties from '../MyProfileCounterparties';
@@ -18,14 +18,18 @@ jest.mock('@/components/Modals/RadioGroupFilterModal', () => ({
 const mockSetQueryString = jest.fn();
 
 jest.mock('@/hooks/custom-hooks', () => ({
-    useDevice: jest.fn(() => ({
-        isMobile: false,
-    })),
     useQueryString: jest.fn(() => ({
         setQueryString: mockSetQueryString,
     })),
 }));
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({
+        isMobile: false,
+    })),
+}));
+
 describe('MyProfileCounterparties', () => {
     it('should render the component as expected', () => {
         render(<MyProfileCounterparties />);