Ameerul /Feature 82816 Block User Phase 2

packages/components/src/components/icon/icons.js

@@ -439,6 +439,7 @@ import './common/ic-neteller-dark.svg';
 import './common/ic-neteller-light.svg';
 import './common/ic-new-file.svg';
 import './common/ic-no-ad.svg';
+import './common/ic-no-data.svg';
 import './common/ic-no-order.svg';
 import './common/ic-notification-clear.svg';
 import './common/ic-notification.svg';
@@ -600,6 +601,7 @@ import './currency/ic-currency-usdc.svg';
 import './currency/ic-currency-usdk.svg';
 import './currency/ic-currency-ust.svg';
 import './currency/ic-currency-virtual.svg';
+import './derivez/ic-derivez.svg';
 import './dxtrade/ic-dxtrade-deriv-x.svg';
 import './dxtrade/ic-dxtrade-derived.svg';
 import './dxtrade/ic-dxtrade-derivx-platform.svg';

packages/p2p/src/components/advertiser-page/advertiser-page-adverts.jsx

@@ -67,8 +67,8 @@ const AdvertiserPageAdverts = () => {
                     ) : (
                         <Empty
                             className={classNames('', { 'advertiser-page-empty': isMobile() })}
-                            icon='IcCashierNoAds'
-                            title={localize('No ads')}
+                            icon='IcNoData'
+                            title={localize('There are no ads yet')}
                         />
                     )}
                 </React.Fragment>

packages/p2p/src/components/advertiser-page/advertiser-page.jsx

@@ -6,6 +6,7 @@ import { observer } from 'mobx-react-lite';
 import { useStores } from 'Stores';
 import { Localize, localize } from 'Components/i18next';
 import { buy_sell } from 'Constants/buy-sell';
+import { my_profile_tabs } from 'Constants/my-profile-tabs';
 import RateChangeModal from 'Components/buy-sell/rate-change-modal.jsx';
 import BuySellModal from 'Components/buy-sell/buy-sell-modal.jsx';
 import PageReturn from 'Components/page-return/page-return.jsx';
@@ -24,11 +25,12 @@ import { OnlineStatusIcon, OnlineStatusLabel } from 'Components/online-status';
 import './advertiser-page.scss';
 
 const AdvertiserPage = () => {
-    const { general_store, advertiser_page_store, buy_sell_store } = useStores();
+    const { general_store, advertiser_page_store, buy_sell_store, my_profile_store } = useStores();
 
     const is_my_advert = advertiser_page_store.advertiser_details_id === general_store.advertiser_id;
     // Use general_store.advertiser_info since resubscribing to the same id from advertiser page returns error
     const info = is_my_advert ? general_store.advertiser_info : advertiser_page_store.counterparty_advertiser_info;
+
     const {
         basic_verification,
         buy_orders_count,
@@ -94,6 +96,8 @@ const AdvertiserPage = () => {
                 is_error_modal_open={is_error_modal_open}
                 setIsErrorModalOpen={is_open => {
                     if (!is_open) buy_sell_store.hideAdvertiserPage();
+                    if (general_store.active_index !== 0)
+                        my_profile_store.setActiveTab(my_profile_tabs.MY_COUNTERPARTIES);
                     advertiser_page_store.onCancel();
                     general_store.setBlockUnblockUserError('');
                 }}
@@ -117,7 +121,11 @@ const AdvertiserPage = () => {
             <div className='advertiser-page__page-return-header'>
                 <PageReturn
                     className='buy-sell__advertiser-page-return'
-                    onClick={buy_sell_store.hideAdvertiserPage}
+                    onClick={() => {
+                        buy_sell_store.hideAdvertiserPage();
+                        if (general_store.active_index === general_store.path.my_profile)
+                            my_profile_store.setActiveTab(my_profile_tabs.MY_COUNTERPARTIES);
+                    }}
                     page_title={localize("Advertiser's page")}
                 />
                 {!is_my_advert && (
@@ -175,7 +183,6 @@ const AdvertiserPage = () => {
                                     </div>
                                 </div>
                             </MobileWrapper>
-
                             <div className='advertiser-page__rating'>
                                 <DesktopWrapper>
                                     <React.Fragment>

packages/p2p/src/components/block-user/block-user-empty/block-user-empty.jsx

@@ -19,7 +19,7 @@ const BlockUserEmpty = () => {
                         width={128}
                     />
                     <Text className='block-user-empty__text' line_height='m' size='s' weight='bold'>
-                        <Localize i18n_default_text='You have no blocked advertisers' />
+                        <Localize i18n_default_text='No users to show here.' />
                     </Text>
                 </div>
             </DesktopWrapper>
@@ -28,7 +28,7 @@ const BlockUserEmpty = () => {
                     body_className='block-user-empty'
                     height_offset='80px'
                     is_modal_open
-                    page_header_text={localize('Blocked advertisers')}
+                    page_header_text={localize('My counterparties')}
                     pageHeaderReturnFn={() => my_profile_store.setActiveTab(my_profile_tabs.MY_STATS)}
                 >
                     <Icon
@@ -38,7 +38,7 @@ const BlockUserEmpty = () => {
                         width={128}
                     />
                     <Text className='block-user-empty__text' line_height='m' size='s' weight='bold'>
-                        <Localize i18n_default_text='You have no blocked advertisers' />
+                        <Localize i18n_default_text='No users to show here.' />
                     </Text>
                 </MobileFullPageModal>
             </MobileWrapper>

packages/p2p/src/components/block-user/block-user-empty/block-user-empty.scss

@@ -3,6 +3,10 @@
     display: flex;
     flex-direction: column;
 
+    @include mobile {
+        margin-top: 16rem;
+    }
+
     &__icon {
         margin-top: 2.2rem;
     }

packages/p2p/src/components/block-user/block-user-modal/block-user-modal.scss

@@ -1,5 +1,9 @@
 .block-user-modal {
     &__body {
         padding: 0 2.4rem;
+
+        @include mobile {
+            padding: 0 1.6rem;
+        }
     }
 }

packages/p2p/src/components/buy-sell/buy-sell-row.jsx

@@ -60,18 +60,18 @@ const BuySellRow = ({ row: advert }) => {
         exchange_rate: floating_rate_store.exchange_rate,
         market_rate: effective_rate,
     });
+    const onClickRow = () => {
+        if (!general_store.is_advertiser) {
+            buy_sell_store.setShouldShowVerification(true);
+        } else if (!general_store.is_barred) {
+            buy_sell_store.showAdvertiserPage(advert);
+        }
+    };
 
     if (isMobile()) {
         return (
             <div className='buy-sell-row'>
-                <div
-                    className='buy-sell-row__advertiser'
-                    onClick={() =>
-                        general_store.is_barred || !general_store.is_advertiser
-                            ? undefined
-                            : buy_sell_store.showAdvertiserPage(advert)
-                    }
-                >
+                <div className='buy-sell-row__advertiser' onClick={() => onClickRow()}>
                     <OnlineStatusAvatar
                         is_online={advertiser_details.is_online}
                         nickname={advertiser_name}
@@ -173,11 +173,7 @@ const BuySellRow = ({ row: advert }) => {
             <Table.Cell>
                 <div
                     className={classNames('buy-sell__cell', { 'buy-sell__cell-hover': !general_store.is_barred })}
-                    onClick={() =>
-                        general_store.is_barred || !general_store.is_advertiser
-                            ? undefined
-                            : buy_sell_store.showAdvertiserPage(advert)
-                    }
+                    onClick={() => onClickRow()}
                 >
                     <OnlineStatusAvatar
                         is_online={advertiser_details.is_online}

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

@@ -39,7 +39,11 @@ const BuySell = () => {
     if (buy_sell_store.should_show_verification) {
         return (
             <React.Fragment>
-                <PageReturn onClick={buy_sell_store.hideVerification} page_title={localize('Verification')} />
+                <PageReturn
+                    className='buy-sell__page-return'
+                    onClick={buy_sell_store.hideVerification}
+                    page_title={localize('Verification')}
+                />
                 <Verification />
             </React.Fragment>
         );

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

@@ -73,6 +73,10 @@
         }
     }
 
+    &__page-return {
+        margin: 2rem;
+    }
+
     &__table-header {
         display: grid;
         grid-template-columns: 2fr 1.5fr 1fr 1.5fr 1fr;

packages/p2p/src/components/error-modal/error-modal.scss

@@ -1,5 +1,9 @@
 .error-modal {
     &__body {
         padding: 0 2.4rem;
+
+        @include mobile {
+            padding: 0 1.6rem;
+        }
     }
 }

packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Dropdown, Icon } from '@deriv/components';
+import { isMobile } from '@deriv/shared';
+import { observer } from 'mobx-react-lite';
+import { localize } from 'Components/i18next';
+import { useStores } from 'Stores';
+import './block-user-dropdown.scss';
+
+const BlockUserDropdown = () => {
+    const { my_profile_store } = useStores();
+
+    if (isMobile()) {
+        return (
+            <div
+                className='block-user-dropdown'
+                onClick={() => {
+                    my_profile_store.setIsFilterModalOpen(true);
+                }}
+            >
+                <Icon icon='IcCashierSort' />
+            </div>
+        );
+    }
+
+    return (
+        <Dropdown
+            className='block-user-dropdown'
+            classNameLabel='block-user-dropdown--label'
+            is_align_text_left
+            list={my_profile_store.block_user_sort_list}
+            onChange={my_profile_store.handleChange}
+            placeholder={localize('Sort by')}
+            value={my_profile_store.selected_sort_value}
+        />
+    );
+};
+
+export default observer(BlockUserDropdown);

packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.scss

@@ -0,0 +1,15 @@
+.block-user-dropdown {
+    margin-left: 1rem;
+    width: 20rem;
+
+    @include mobile {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid var(--border-normal);
+        border-radius: 4px;
+        padding: 0.8rem;
+        height: 4rem;
+        width: 4rem;
+    }
+}

packages/p2p/src/components/my-profile/block-user/block-user-dropdown/index.js

@@ -0,0 +1,3 @@
+import BlockUserDropdown from './block-user-dropdown.jsx';
+
+export default BlockUserDropdown;

packages/p2p/src/components/my-profile/block-user/block-user-filter-modal/block-user-filter-modal.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Modal, RadioGroup, Text } from '@deriv/components';
+import { useStores } from 'Stores';
+
+const BlockUserFilterModal = () => {
+    const { my_profile_store } = useStores();
+
+    return (
+        <Modal
+            is_open={my_profile_store.is_filter_modal_open}
+            height='10rem'
+            toggleModal={() => my_profile_store.setIsFilterModalOpen(false)}
+            width='80vw'
+        >
+            <RadioGroup
+                className='sort-radiogroup'
+                onToggle={my_profile_store.handleChange}
+                selected={my_profile_store.selected_sort_value}
+                required
+            >
+                {my_profile_store.block_user_sort_list.map((list_item, key) => {
+                    return (
+                        <RadioGroup.Item
+                            key={key}
+                            value={list_item.value}
+                            label={
+                                <Text color='prominent' size='s'>
+                                    {list_item.text}
+                                </Text>
+                            }
+                        />
+                    );
+                })}
+            </RadioGroup>
+        </Modal>
+    );
+};
+
+export default observer(BlockUserFilterModal);

packages/p2p/src/components/my-profile/block-user/block-user-filter-modal/index.js

@@ -0,0 +1,3 @@
+import BlockUserFilterModal from './block-user-filter-modal.jsx';
+
+export default BlockUserFilterModal;

packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { useStores } from 'Stores';
+import { Text, Loading } from '@deriv/components';
+import { isMobile } from '@deriv/shared';
+import BlockUserDropdown from '../block-user-dropdown';
+import BlockUserTable from '../block-user-table';
+import BlockUserTableError from '../block-user-table/block-user-table-error';
+import SearchBox from 'Components/search-box';
+import debounce from 'lodash.debounce';
+import { localize } from 'Components/i18next';
+import './block-user-list.scss';
+
+const BlockUserList = observer(() => {
+    const { general_store, my_profile_store } = useStores();
+
+    const debouncedGetSearchedTradePartners = debounce(search => {
+        my_profile_store.setSearchTerm(search.trim());
+        my_profile_store.getSearchedTradePartners();
+    }, 200);
+
+    const onSearch = search => {
+        // Ensures that trade partners list is not reloaded if search term entered is the same
+        if (my_profile_store.search_term !== search.trim()) {
+            my_profile_store.setIsBlockUserTableLoading(true);
+            debouncedGetSearchedTradePartners(search);
+        }
+    };
+
+    if (general_store.is_barred && general_store.block_unblock_user_error) {
+        return <BlockUserTableError error_message={general_store.block_unblock_user_error} />;
+    }
+
+    if (my_profile_store.is_loading) {
+        return <Loading is_fullscreen={isMobile()} />;
+    }
+
+    return (
+        <div className='block-user-list'>
+            {my_profile_store.trade_partners_list.length > 0 && (
+                <React.Fragment>
+                    <Text className='block-user-list__text' size='xs'>
+                        {localize(
+                            "When you block someone, you won't see their ads, and they can't see yours. Your ads will be hidden from their search results, too."
+                        )}
+                    </Text>
+                    <div className='block-user-list__header'>
+                        <SearchBox
+                            onClear={my_profile_store.onClear}
+                            onSearch={onSearch}
+                            placeholder={localize('Search by nickname')}
+                        />
+                        <BlockUserDropdown />
+                    </div>
+                </React.Fragment>
+            )}
+            <BlockUserTable />
+        </div>
+    );
+});
+
+export default BlockUserList;