Merge branch 'master' of github.com:deriv-com/p2p into drawer

deriv-com · Jun 14, 2024 · 8b9fb6d · 8b9fb6d
2 parents e0fb451 + ec255d8
commit 8b9fb6d
Show file tree

Hide file tree

Showing 49 changed files with 372 additions and 228 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     },
     "dependencies": {
         "@babel/preset-env": "^7.24.5",
-        "@deriv-com/api-hooks": "^1.1.1",
+        "@deriv-com/api-hooks": "^1.1.2",
         "@deriv-com/translations": "^1.2.4",
         "@deriv-com/ui": "^1.28.2",
         "@deriv-com/utils": "^0.0.25",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,12 @@
+import { Suspense } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
 import { AppFooter, AppHeader, DerivIframe } from '@/components';
 import { useRedirectToOauth } from '@/hooks';
 import AppContent from '@/routes/AppContent';
 import { initializeI18n, TranslationProvider } from '@deriv-com/translations';
-import { useDevice } from '@deriv-com/ui';
+import { Loader, useDevice } from '@deriv-com/ui';
 
 const { VITE_CROWDIN_BRANCH_NAME, VITE_PROJECT_NAME, VITE_TRANSLATIONS_CDN_URL } = import.meta.env;
 const i18nInstance = initializeI18n({
@@ -22,10 +23,12 @@ const App = () => {
         <BrowserRouter>
             <QueryParamProvider adapter={ReactRouter5Adapter}>
                 <TranslationProvider defaultLang='EN' i18nInstance={i18nInstance}>
-                    <DerivIframe />
-                    <AppHeader />
-                    <AppContent />
-                    {isDesktop && <AppFooter />}
+                    <Suspense fallback={<Loader isFullScreen />}>
+                        <DerivIframe />
+                        <AppHeader />
+                        <AppContent />
+                        {isDesktop && <AppFooter />}
+                    </Suspense>
                 </TranslationProvider>
             </QueryParamProvider>
         </BrowserRouter>

diff --git a/src/components/AppFooter/__tests__/AppFooter.spec.tsx b/src/components/AppFooter/__tests__/AppFooter.spec.tsx
@@ -10,6 +10,20 @@ import AppFooter from '../AppFooter';
 jest.mock('@deriv-com/translations');
 jest.mock('@/hooks');
 
+Object.defineProperty(window, 'matchMedia', {
+    value: jest.fn().mockImplementation(query => ({
+        addEventListener: jest.fn(),
+        addListener: jest.fn(), // Deprecated
+        dispatchEvent: jest.fn(),
+        matches: false,
+        media: query,
+        onchange: null,
+        removeEventListener: jest.fn(),
+        removeListener: jest.fn(), // Deprecated
+    })),
+    writable: true,
+});
+
 const AppFooterComponent = () => (
     <BrowserRouter>
         <QueryParamProvider adapter={ReactRouter5Adapter}>

diff --git a/src/components/AppFooter/__tests__/ServerTime.spec.tsx b/src/components/AppFooter/__tests__/ServerTime.spec.tsx
@@ -13,6 +13,20 @@ jest.mock('@/utils', () => ({
     epochToUTC: jest.fn(),
 }));
 
+Object.defineProperty(window, 'matchMedia', {
+    value: jest.fn().mockImplementation(query => ({
+        addEventListener: jest.fn(),
+        addListener: jest.fn(), // Deprecated
+        dispatchEvent: jest.fn(),
+        matches: false,
+        media: query,
+        onchange: null,
+        removeEventListener: jest.fn(),
+        removeListener: jest.fn(), // Deprecated
+    })),
+    writable: true,
+});
+
 describe('ServerTime component', () => {
     const mockTime = 1625074800; // Example epoch time
     const mockUTCFormat = '2021-06-30 14:00 GMT';

diff --git a/src/components/AppHeader/__tests__/AppHeader.spec.tsx b/src/components/AppHeader/__tests__/AppHeader.spec.tsx
@@ -1,4 +1,7 @@
 import { ReactNode } from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryParamProvider } from 'use-query-params';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
 import { useAuthData } from '@deriv-com/api-hooks';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -81,7 +84,13 @@ describe('<AppHeader/>', () => {
     });
 
     it('should render the header and handle login when there are no P2P accounts', async () => {
-        render(<AppHeader />);
+        render(
+            <BrowserRouter>
+                <QueryParamProvider adapter={ReactRouter5Adapter}>
+                    <AppHeader />
+                </QueryParamProvider>
+            </BrowserRouter>
+        );
         await userEvent.click(screen.getByRole('button', { name: 'Log in' }));
 
         expect(window.open).toHaveBeenCalledWith(expect.any(String), '_self');
@@ -104,7 +113,13 @@ describe('<AppHeader/>', () => {
             writable: true,
         });
 
-        render(<AppHeader />);
+        render(
+            <BrowserRouter>
+                <QueryParamProvider adapter={ReactRouter5Adapter}>
+                    <AppHeader />
+                </QueryParamProvider>
+            </BrowserRouter>
+        );
         const logoutButton = screen.getByRole('button', { name: 'Logout' });
         const { logout } = mockUseAuthData();
         expect(logoutButton).toBeInTheDocument();

diff --git a/src/components/BuySellForm/BuySellForm.tsx b/src/components/BuySellForm/BuySellForm.tsx
@@ -215,13 +215,10 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
     }, [isSuccess, orderCreatedInfo, history, onRequestClose]);
 
     useEffect(() => {
-        // @ts-expect-error types are not correct from api-hooks
         if (isError && error?.message) {
-            // @ts-expect-error types are not correct from api-hooks
             setErrorMessage(error?.message);
             scrollRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
         }
-        // @ts-expect-error types are not correct from api-hooks
     }, [error?.message, isError]);
 
     return (

diff --git a/src/components/DerivIframe/DerivIframe.tsx b/src/components/DerivIframe/DerivIframe.tsx
@@ -1,17 +1,5 @@
-import { URLConstants } from '@deriv-com/utils';
-
 const DerivIframe = () => {
-    const getAllowedLocalStorageOrigin = () => {
-        const hostName = window.location.hostname;
-        if (/^staging-p2p\.deriv\.com$/i.test(hostName)) {
-            return URLConstants.derivP2pStaging;
-        } else if (/^localhost$/i.test(hostName)) {
-            return window.location.origin;
-        }
-        return URLConstants.derivP2pProduction;
-    };
-
-    const origin = getAllowedLocalStorageOrigin();
+    const origin = window.location.origin;
 
     return (
         <iframe

diff --git a/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx b/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx
@@ -38,13 +38,13 @@ const BlockUnblockUserModal = ({
             onClickBlocked?.();
             onRequestClose();
         } else if (error || unblockError) {
-            // @ts-expect-error types are not correct from api-hooks
             setErrorMessage?.(error?.message || unblockError?.message);
             onRequestClose();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isSuccess, onClickBlocked, unblockIsSuccess, unblockError, error, setErrorMessage]);
 
+    const textSize = isMobile ? 'md' : 'sm';
     const getModalTitle = () => (isBlocked ? `Unblock ${advertiserName}?` : `Block ${advertiserName}?`);
 
     const getModalContent = () =>
@@ -82,7 +82,7 @@ const BlockUnblockUserModal = ({
                 </Text>
             </Modal.Header>
             <Modal.Body>
-                <Text as='p' className='px-[1.6rem] lg:px-[2.4rem]' size={isMobile ? 'md' : 'sm'}>
+                <Text as='p' className='px-[1.6rem] lg:px-[2.4rem]' size={textSize}>
                     {getModalContent()}
                 </Text>
             </Modal.Body>
@@ -92,12 +92,12 @@ const BlockUnblockUserModal = ({
                     color='black'
                     onClick={onRequestClose}
                     size='lg'
-                    textSize='sm'
+                    textSize={textSize}
                     variant='outlined'
                 >
                     <Localize i18n_default_text='Cancel' />
                 </Button>
-                <Button onClick={onClickBlockUnblock} size='lg' textSize='sm'>
+                <Button onClick={onClickBlockUnblock} size='lg' textSize={textSize}>
                     {isBlocked ? <Localize i18n_default_text='Unblock' /> : <Localize i18n_default_text='Block' />}
                 </Button>
             </Modal.Footer>

diff --git a/src/components/Modals/InvalidVerificationLinkModal/InvalidVerificationLinkModal.tsx b/src/components/Modals/InvalidVerificationLinkModal/InvalidVerificationLinkModal.tsx
@@ -6,10 +6,10 @@ import { Button, Modal, Text, useDevice } from '@deriv-com/ui';
 import './InvalidVerificationLinkModal.scss';
 
 type TInvalidVerificationLinkModalProps = {
-    error?: {
+    error: {
         code: string;
         message: string;
-    };
+    } | null;
     isModalOpen: boolean;
     mutate: () => void;
     onRequestClose: () => void;

diff --git a/src/components/Modals/NicknameModal/NicknameModal.tsx b/src/components/Modals/NicknameModal/NicknameModal.tsx
@@ -71,7 +71,6 @@ const NicknameModal = ({ isModalOpen, onRequestClose }: TNicknameModalProps) =>
                                 data-testid='dt_nickname_modal_input'
                                 error={!!error?.message || isError}
                                 label={localize('Your nickname')}
-                                // @ts-expect-error types are not correct from api-hooks
                                 message={createError?.message || error?.message}
                                 onBlur={onBlur}
                                 onChange={onChange}

diff --git a/src/components/PaymentMethodCard/PaymentMethodCard.tsx b/src/components/PaymentMethodCard/PaymentMethodCard.tsx
@@ -63,6 +63,7 @@ const PaymentMethodCard = ({
                         isEditable={isEditable}
                         isSelectable={!isEditable && toAdd}
                         isSelected={isSelected}
+                        medium={medium}
                         onDeletePaymentMethod={onDeletePaymentMethod}
                         onEditPaymentMethod={onEditPaymentMethod}
                         onSelectPaymentMethod={() => onSelectPaymentMethodCard?.(Number(paymentMethod.id))}

diff --git a/src/components/PaymentMethodForm/PaymentMethodForm.scss b/src/components/PaymentMethodForm/PaymentMethodForm.scss
@@ -143,6 +143,11 @@
             & .deriv-input__right-content {
                 display: flex;
                 align-items: center;
+                & .deriv-dropdown__button {
+                    &--active {
+                        transform: none;
+                    }
+                }
             }
         }
     }

diff --git a/src/components/PaymentMethodForm/PaymentMethodForm.tsx b/src/components/PaymentMethodForm/PaymentMethodForm.tsx
@@ -31,7 +31,7 @@ const PaymentMethodForm = ({
 }: TPaymentMethodFormProps) => {
     const {
         control,
-        formState: { isDirty, isSubmitting, isValid },
+        formState: { dirtyFields, isDirty, isSubmitting, isValid },
         handleSubmit,
         reset,
     } = useForm({ mode: 'all' });
@@ -63,8 +63,9 @@ const PaymentMethodForm = ({
         }));
         return listItems || [];
     }, [availablePaymentMethods]);
+
     const handleGoBack = () => {
-        if (isDirty) {
+        if (Object.keys(dirtyFields).length) {
             setIsError(true);
         } else {
             onResetFormState();

diff --git a/...nents/PaymentMethodForm/PaymentMethodFormModalRenderer/PaymentMethodFormModalRenderer.tsx b/...nents/PaymentMethodForm/PaymentMethodFormModalRenderer/PaymentMethodFormModalRenderer.tsx
@@ -6,12 +6,12 @@ import { useTranslations } from '@deriv-com/translations';
 
 type TPaymentMethodFormModalRendererProps = {
     actionType: TFormState['actionType'];
-    createError: TSocketError<'p2p_advertiser_payment_methods'> | null;
+    createError: TSocketError<'p2p_advertiser_payment_methods'>['error'] | null;
     isCreateSuccessful: boolean;
     isUpdateSuccessful: boolean;
     onResetFormState: () => void;
     setIsError: (isError: boolean) => void;
-    updateError: TSocketError<'p2p_advertiser_payment_methods'> | null;
+    updateError: TSocketError<'p2p_advertiser_payment_methods'>['error'] | null;
 };
 
 const PaymentMethodFormModalRenderer = ({

diff --git a/src/components/PopoverDropdown/PopoverDropdown.tsx b/src/components/PopoverDropdown/PopoverDropdown.tsx
@@ -25,13 +25,17 @@ const PopoverDropdown = ({ dropdownList, onClick, tooltipMessage }: TPopoverDrop
 
     return (
         <div className='popover-dropdown' ref={ref}>
-            <TooltipMenuIcon
-                as='button'
-                onClick={() => setVisible(prevState => !prevState)}
-                tooltipContent={tooltipMessage}
-            >
-                <LabelPairedEllipsisVerticalLgBoldIcon data-testid='dt_popover_dropdown_icon' />
-            </TooltipMenuIcon>
+            {isAdvertiserBarred ? (
+                <LabelPairedEllipsisVerticalLgBoldIcon data-testid='dt_popover_dropdown_icon' fill='#999999' />
+            ) : (
+                <TooltipMenuIcon
+                    as='button'
+                    onClick={() => setVisible(prevState => !prevState)}
+                    tooltipContent={tooltipMessage}
+                >
+                    <LabelPairedEllipsisVerticalLgBoldIcon data-testid='dt_popover_dropdown_icon' />
+                </TooltipMenuIcon>
+            )}
             {visible && (
                 <div className='popover-dropdown__list'>
                     {dropdownList.map(item => (

diff --git a/src/components/PopoverDropdown/__tests__/PopoverDropdown.spec.tsx b/src/components/PopoverDropdown/__tests__/PopoverDropdown.spec.tsx
@@ -48,10 +48,9 @@ describe('PopoverDropdown', () => {
         expect(mockProps.onClick).toHaveBeenCalledWith('value 1');
     });
 
-    it('should disable the button if advertiser is barred', async () => {
+    it('should disable the icon if advertiser is barred', async () => {
         mockUseIsAdvertiserBarred.mockReturnValue(true);
         render(<PopoverDropdown {...mockProps} />);
-        await userEvent.click(screen.getByTestId('dt_popover_dropdown_icon'));
-        expect(screen.getByRole('button', { name: 'label 1' })).toBeDisabled();
+        expect(screen.getByTestId('dt_popover_dropdown_icon')).not.toHaveProperty('onClick');
     });
 });
diff --git a/src/components/Search/Search.scss b/src/components/Search/Search.scss
@@ -2,6 +2,14 @@
     width: 100%;
     background-color: #fff;
 
+    input[type='search']::-webkit-search-cancel-button {
+        display: none;
+    }
+
+    rect {
+        fill: #999;
+    }
+
     .deriv-input {
         padding: 6px 8px;
         font-size: 1.4rem;
@@ -30,5 +38,10 @@
         &__label {
             left: 3rem;
         }
+
+        &__right-content {
+            display: flex;
+            align-items: center;
+        }
     }
 }