Nada/p2 ps 234/buy sell ads message

packages/p2p/src/components/buy-sell/no-ads/__tests__/no-ads.spec.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { createBrowserHistory } from 'history';
+import { Router } from 'react-router';
+import NoAds from '../no-ads';
+
+const mock_store_values = {
+    buy_sell_store: {
+        is_buy: true,
+        local_currencies: [
+            {
+                text: 'USD',
+                value: 'USD',
+                is_default: true,
+            },
+        ],
+        selected_local_currency: 'USD',
+        setCreateSellAdFromNoAds: jest.fn(),
+    },
+    general_store: {
+        handleTabClick: jest.fn(),
+        is_barred: false,
+    },
+    my_ads_store: {
+        setShowAdForm: jest.fn(),
+    },
+};
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(() => mock_store_values),
+}));
+
+jest.mock('@sendbird/chat', () => ({
+    SendbirdChat: jest.fn().mockReturnValue({}),
+}));
+
+jest.mock('@sendbird/chat/groupChannel', () => ({
+    SendbirdChat: jest.fn().mockReturnValue({}),
+}));
+
+jest.mock('@sendbird/chat/message', () => ({
+    SendbirdChat: jest.fn().mockReturnValue({}),
+}));
+
+const mock_props = {
+    is_ads_page: false,
+};
+
+describe('<NoAds/>', () => {
+    it('should render the component', () => {
+        render(<NoAds />);
+        expect(screen.getByText('No ads for this currency 😞')).toBeInTheDocument();
+        expect(screen.getByText('Create ad')).toBeInTheDocument();
+        expect(
+            screen.getByText('Looking to buy or sell USD? You can post your own ad for others to respond.')
+        ).toBeInTheDocument();
+    });
+    it('should display "You have no ads" when is_ads_page is true', () => {
+        render(<NoAds {...mock_props} is_ads_page />);
+        expect(screen.getByText('You have no ads.')).toBeInTheDocument();
+        expect(screen.getByText('Create new ad')).toBeInTheDocument();
+    });
+    it('should handle onclick of create ad button', () => {
+        const history = createBrowserHistory();
+        render(
+            <Router history={history}>
+                <NoAds is_ads_page />
+            </Router>
+        );
+        const create_ad_button = screen.getByRole('button', { name: 'Create new ad' });
+        expect(create_ad_button).toBeInTheDocument();
+        create_ad_button.click();
+        expect(mock_store_values.buy_sell_store.setCreateSellAdFromNoAds).toHaveBeenCalledWith(true);
+        expect(mock_store_values.general_store.handleTabClick).toHaveBeenCalledTimes(0);
+        expect(mock_store_values.my_ads_store.setShowAdForm).toHaveBeenCalledWith(true);
+    });
+});

packages/p2p/src/components/buy-sell/no-ads/no-ads.jsx

@@ -6,53 +6,51 @@ import { Localize } from 'Components/i18next';
 import { useStores } from 'Stores';
 import { routes } from '@deriv/shared';
 import './no-ads.scss';
+import classNames from 'classnames';
 
-const NoAds = () => {
+const NoAds = ({ is_ads_page = false }) => {
     const { buy_sell_store, general_store, my_ads_store } = useStores();
+    const { handleTabClick, is_barred } = general_store;
+    const { is_buy, local_currencies, selected_local_currency, setCreateSellAdFromNoAds } = buy_sell_store;
+    const { setShowAdForm } = my_ads_store;
     const history = useHistory();
 
-    const is_default_currency = buy_sell_store.local_currencies.filter(
-        currency =>
-            currency.text.toLowerCase() === buy_sell_store.selected_local_currency.toLowerCase() && currency.is_default
+    const is_default_currency = local_currencies.filter(
+        currency => currency.text.toLowerCase() === selected_local_currency?.toLowerCase() && currency.is_default
     ).length;
 
+    const onClickButton = () => {
+        if (!is_ads_page) handleTabClick(2);
+        if (is_buy) setCreateSellAdFromNoAds(true);
+        setShowAdForm(true);
+        history.push(routes.p2p_my_ads);
+    };
+
     return (
-        <div className='no-ads'>
+        <div className={classNames('no-ads', { 'ads-page': is_ads_page })}>
             <Icon icon='IcCashierNoAds' size={128} />
-            {is_default_currency ? (
+            {is_default_currency || is_ads_page ? (
                 <React.Fragment>
-                    <Text
-                        align='center'
-                        className='no-ads__title'
-                        color='general'
-                        line_height='m'
-                        size='s'
-                        weight='bold'
-                    >
-                        <Localize i18n_default_text='No ads for this currency 😞' />
+                    <Text align='center' className='no-ads__title' weight='bold'>
+                        {is_ads_page ? (
+                            <Localize i18n_default_text='You have no ads.' />
+                        ) : (
+                            <Localize i18n_default_text='No ads for this currency 😞' />
+                        )}
                     </Text>
-                    <Text className='no-ads__message' align='center' color='general' line_height='m' size='s'>
+                    <Text className='no-ads__message' align='center'>
                         <Localize i18n_default_text='Looking to buy or sell USD? You can post your own ad for others to respond.' />
                     </Text>
-                    <Button
-                        className='no-ads__button'
-                        disabled={general_store.is_barred}
-                        primary
-                        large
-                        onClick={() => {
-                            if (!general_store.is_barred) {
-                                general_store.handleTabClick(2);
-                                if (buy_sell_store.is_buy) buy_sell_store.setCreateSellAdFromNoAds(true);
-                                my_ads_store.setShowAdForm(true);
-                                history.push(routes.p2p_my_ads);
-                            }
-                        }}
-                    >
-                        <Localize i18n_default_text='Create ad' />
+                    <Button className='no-ads__button' disabled={is_barred} primary large onClick={onClickButton}>
+                        {is_ads_page ? (
+                            <Localize i18n_default_text='Create new ad' />
+                        ) : (
+                            <Localize i18n_default_text='Create ad' />
+                        )}
                     </Button>
                 </React.Fragment>
             ) : (
-                <Text align='center' className='no-ads__title' color='general' line_height='m' size='s' weight='bold'>
+                <Text align='center' className='no-ads__title' weight='bold'>
                     <Localize i18n_default_text='No ads for this currency at the moment 😞' />
                 </Text>
             )}

packages/p2p/src/components/buy-sell/no-ads/no-ads.scss

@@ -22,3 +22,19 @@
         margin: 2.4rem 0 0.5rem;
     }
 }
+
+.ads-page {
+    margin: 4.5rem 1.6rem;
+
+    @include desktop {
+        position: absolute;
+        left: 5rem;
+    }
+
+    @include mobile {
+        margin-top: 11.8rem;
+        .no-ads__message {
+            width: 100%;
+        }
+    }
+}

packages/p2p/src/components/my-ads/__tests__/my-ads-table.spec.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import MyAdsTable from '../my-ads-table';
+
+const mock_store_values = {
+    general_store: {
+        setP2PConfig: jest.fn(),
+    },
+    my_ads_store: {
+        setAdverts: jest.fn(),
+        setSelectedAdId: jest.fn(),
+        loadMoreAds: jest.fn(),
+        is_table_loading: false,
+        api_error_message: null,
+        setApiErrorCode: jest.fn(),
+        adverts: [],
+    },
+    floating_rate_store: {
+        setChangeAdAlert: jest.fn(),
+    },
+};
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(() => mock_store_values),
+}));
+
+jest.mock('../../buy-sell/no-ads', () => jest.fn(() => <div>No Ads Component</div>));
+
+jest.mock('@sendbird/chat', () => ({
+    SendbirdChat: jest.fn().mockReturnValue({}),
+}));
+
+jest.mock('@sendbird/chat/groupChannel', () => ({
+    SendbirdChat: jest.fn().mockReturnValue({}),
+}));
+
+jest.mock('@sendbird/chat/message', () => ({
+    SendbirdChat: jest.fn().mockReturnValue({}),
+}));
+
+const mock_use_store_values = mockStore({
+    client: {
+        currency: 'USD',
+    },
+});
+
+describe('<MyAdsTable/>', () => {
+    it('should render the NoAds component when there are no ads', () => {
+        render(
+            <StoreProvider store={mock_use_store_values}>
+                <MyAdsTable />
+            </StoreProvider>
+        );
+        expect(screen.getByText('No Ads Component')).toBeInTheDocument();
+    });
+});

packages/p2p/src/components/my-ads/my-ads-table.jsx

@@ -4,12 +4,12 @@ import { Button, HintBox, InfiniteDataList, Loading, Table, Text } from '@deriv/
 import { isDesktop, isMobile } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { localize, Localize } from 'Components/i18next';
-import Empty from 'Components/empty/empty.jsx';
 import ToggleAds from 'Components/my-ads/toggle-ads.jsx';
 import { TableError } from 'Components/table/table-error.jsx';
 import { ad_type } from 'Constants/floating-rate';
 import { useStores } from 'Stores';
 import MyAdsRowRenderer from './my-ads-row-renderer.jsx';
+import NoAds from '../buy-sell/no-ads';
 
 const getHeaders = offered_currency => [
     { text: localize('Ad ID') },
@@ -145,19 +145,7 @@ const MyAdsTable = () => {
         );
     }
 
-    return (
-        <Empty icon='IcCashierNoAds' title={localize('You have no ads.')}>
-            <Button
-                className='p2p-empty__button'
-                is_disabled={general_store.is_barred}
-                onClick={() => my_ads_store.onClickCreate()}
-                large
-                primary
-            >
-                {localize('Create new ad')}
-            </Button>
-        </Empty>
-    );
+    return <NoAds is_ads_page />;
 };
 
 export default observer(MyAdsTable);