Merge branch 'master' into FEQ-2382-keep-the-filter-options-in-buy-sell-page

Author: ameerul-deriv

package-lock.json

@@ -19,7 +19,7 @@
         "@deriv-com/api-hooks": "^1.3.7",
         "@deriv-com/translations": "^1.2.4",
         "@deriv-com/ui": "^1.29.0",
-        "@deriv-com/utils": "^0.0.26",
+        "@deriv-com/utils": "^0.0.28",
         "@deriv/deriv-api": "^1.0.15",
         "@deriv/quill-design": "^1.2.24",
         "@deriv/quill-icons": "^1.22.10",

package.json

@@ -0,0 +1,20 @@
+.video-player-modal {
+    background-color: #000;
+    border-radius: 0.8rem;
+    width: 64rem;
+    height: 38rem;
+
+    @include mobile {
+        width: calc(100vw - 3.2rem);
+        height: 23rem;
+    }
+
+    &__close-btn {
+        position: absolute;
+        right: 0.8rem;
+
+        @include desktop {
+            cursor: pointer;
+        }
+    }
+}

src/assets/blog.svg

@@ -0,0 +1,34 @@
+import { LabelPairedCircleXmarkMdFillIcon } from '@deriv/quill-icons';
+import { Modal } from '@deriv-com/ui';
+import './VideoPlayerModal.scss';
+
+type TVideoPlayerModalProps = {
+    isModalOpen: boolean;
+    onRequestClose: () => void;
+    title: string;
+    url: string;
+};
+
+const VideoPlayerModal = ({ isModalOpen, onRequestClose, title, url }: TVideoPlayerModalProps) => {
+    return (
+        <Modal
+            ariaHideApp={false}
+            className='video-player-modal'
+            isOpen={isModalOpen}
+            onRequestClose={onRequestClose}
+            shouldCloseOnOverlayClick
+        >
+            <Modal.Body>
+                <LabelPairedCircleXmarkMdFillIcon
+                    className='video-player-modal__close-btn'
+                    data-testid='dt_video_player_modal_close_btn'
+                    fill='#ffffff'
+                    onClick={onRequestClose}
+                />
+                <iframe height='100%' src={url} title={title} width='100%' />
+            </Modal.Body>
+        </Modal>
+    );
+};
+
+export default VideoPlayerModal;

src/assets/find-ad.svg

@@ -0,0 +1,19 @@
+import { HOW_TO_USE_DERIV_P2P_URL } from '@/constants';
+import { render, screen } from '@testing-library/react';
+import VideoPlayerModal from '../VideoPlayerModal';
+
+const mockProps = {
+    isModalOpen: true,
+    onRequestClose: jest.fn(),
+    title: 'How to use the Deriv P2P app',
+    url: HOW_TO_USE_DERIV_P2P_URL,
+};
+
+describe('<VideoPlayerModal />', () => {
+    it('should render the modal', () => {
+        render(<VideoPlayerModal {...mockProps} />);
+
+        expect(screen.getByTestId('dt_video_player_modal_close_btn')).toBeInTheDocument();
+        expect(screen.getByTitle('How to use the Deriv P2P app')).toHaveAttribute('src', mockProps.url);
+    });
+});

src/assets/introducing-deriv-p2p.svg

@@ -0,0 +1 @@
+export { default as VideoPlayerModal } from './VideoPlayerModal';

src/assets/pay-user.svg

@@ -30,3 +30,4 @@ export * from './PreferredCountriesModal';
 export * from './RadioGroupFilterModal';
 export * from './RatingModal';
 export * from './ShareAdsModal';
+export * from './VideoPlayerModal';

src/assets/receive-payment.svg

@@ -6,6 +6,7 @@ export const MY_ADS_URL = '/my-ads';
 export const MY_PROFILE_URL = '/my-profile';
 export const ADVERTISER_URL = '/advertiser';
 export const ENDPOINT = '/endpoint';
+export const GUIDE_URL = '/guide';
 
 // TODO move these to deriv-utils library
 export const ACCOUNT_LIMITS = `${URLConstants.derivAppProduction}/account/account-limits`;
@@ -50,3 +51,11 @@ export const getOauthUrl = () => {
 
     return oauthUrl;
 };
+
+export const INTRODUCING_DERIV_P2P_URL =
+    'https://player.vimeo.com/video/715973569?color&autopause=0&loop=0&muted=0&title=0&portrait=0&autoplay=1&byline=0#t=';
+
+export const HOW_TO_USE_DERIV_P2P_URL =
+    'https://player.vimeo.com/video/715982928?color&autopause=0&loop=0&muted=0&title=0&portrait=0&autoplay=1&byline=0#t=';
+
+export const HOW_TO_PROTECT_YOURSELF_URL = 'https://blog.deriv.com/posts/how-to-protect-yourself-on-p2p-platforms/';

src/assets/received-fund.svg

@@ -1,11 +1,11 @@
 .advertiser {
     position: absolute;
-    top: 12rem;
+    top: 1rem;
     background-color: #fff;
     width: 95.2rem;
 
     @include mobile {
-        top: 8rem;
+        top: 0;
         overflow: overlay;
         height: calc(100vh - 4rem);
         width: 100%;

src/assets/release-fund.svg

@@ -34,10 +34,6 @@
     }
 
     &__tabs {
-        @include mobile {
-            padding: 1.6rem;
-        }
-
         & .derivs-primary-tabs {
             height: 4rem;
             width: 18rem;
@@ -55,6 +51,7 @@
         display: flex;
         flex-direction: row;
         gap: 1rem;
+        align-items: center;
 
         @include mobile {
             width: 100%;

src/assets/scam-advance-payment.svg

@@ -4,7 +4,9 @@ import { Search } from '@/components';
 import { FilterModal } from '@/components/Modals';
 import { getSortByList } from '@/constants';
 import { useIsAdvertiserBarred, useModalManager } from '@/hooks/custom-hooks';
+import { GuideTooltip } from '@/pages/guide/components';
 import { useBuySellFiltersStore } from '@/stores';
+import { TSortByValues } from '@/utils';
 import { getLocalizedTabs } from '@/utils/tabs';
 import { LabelPairedBarsFilterMdBoldIcon, LabelPairedBarsFilterSmBoldIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
@@ -40,16 +42,19 @@ const BuySellHeader = ({ activeTab, setActiveTab, setIsFilterModalOpen, setSearc
             })}
             data-testid='dt_buy_sell_header'
         >
-            <Tabs
-                TitleFontSize={isMobile ? 'md' : 'sm'}
-                activeTab={getLocalizedTabs(localize)[activeTab]}
-                onChange={setActiveTab}
-                variant='primary'
-                wrapperClassName='buy-sell-header__tabs'
-            >
-                <Tab title={localize('Buy')} />
-                <Tab title={localize('Sell')} />
-            </Tabs>
+            <div className='buy-sell-header__row justify-between'>
+                <Tabs
+                    TitleFontSize={isMobile ? 'md' : 'sm'}
+                    activeTab={getLocalizedTabs(localize)[activeTab]}
+                    onChange={setActiveTab}
+                    variant='primary'
+                    wrapperClassName='buy-sell-header__tabs'
+                >
+                    <Tab title={localize('Buy')} />
+                    <Tab title={localize('Sell')} />
+                </Tabs>
+                {isMobile && <GuideTooltip />}
+            </div>
             <div className='buy-sell-header__row'>
                 <div className='flex flex-row-reverse lg:flex-row gap-4'>
                     <CurrencyDropdown selectedCurrency={filteredCurrency} setSelectedCurrency={setFilteredCurrency} />

src/assets/scam-pot.svg

@@ -1,6 +1,6 @@
 .endpoint {
     position: absolute;
-    top: 8rem;
+    top: 1rem;
     left: 0;
     background: #fff;
     width: 100%;