Ameerul /Task #65487 Dropdown Block User Feature

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

@@ -276,6 +276,7 @@ import './common/ic-logout.svg';
 import './common/ic-lookbacks.svg';
 import './common/ic-loss.svg';
 import './common/ic-macos.svg';
+import './common/ic-menu-dots.svg';
 import './common/ic-message-delivered.svg';
 import './common/ic-message-errored.svg';
 import './common/ic-message-pending.svg';

packages/components/stories/icon/icons.js

@@ -13,7 +13,7 @@ export const icons =
         'IcBrandDmt5',
         'IcBrandDtrader',
         'IcBrandDxtrade',
-        'IcBrandSmarttrader'
+        'IcBrandSmarttrader',
     ],
     'cashier': [
         'IcCashierAdd',
@@ -140,7 +140,7 @@ export const icons =
         'IcCashierXanpoolLight',
         'IcCashierXanpoolSmallDark',
         'IcCashierXanpoolSmallLight',
-        'IcCashier'
+        'IcCashier',
     ],
     'common': [
         'IcAccountError',
@@ -283,6 +283,7 @@ export const icons =
         'IcLookbacks',
         'IcLoss',
         'IcMacos',
+        'IcMenuDots',
         'IcMessageDelivered',
         'IcMessageErrored',
         'IcMessagePending',
@@ -385,7 +386,7 @@ export const icons =
         'IcWindows',
         'IcWip',
         'IcZoomIn',
-        'IcZoomOut'
+        'IcZoomOut',
     ],
     'contract': [
         'IcContractBarrier',
@@ -401,7 +402,7 @@ export const icons =
         'IcContractSafeguard',
         'IcContractStartTimeCircle',
         'IcContractStartTime',
-        'IcContractTarget'
+        'IcContractTarget',
     ],
     'currency': [
         'IcCurrencyAud',
@@ -423,7 +424,7 @@ export const icons =
         'IcCurrencyUsdc',
         'IcCurrencyUsdk',
         'IcCurrencyUst',
-        'IcCurrencyVirtual'
+        'IcCurrencyVirtual',
     ],
     'dxtrade': [
         'IcDxtradeDeviceDesktopLight',
@@ -438,7 +439,7 @@ export const icons =
         'IcDxtradeFinancial',
         'IcDxtradeOnePassword',
         'IcDxtradeSyntheticPlatform',
-        'IcDxtradeSynthetic'
+        'IcDxtradeSynthetic',
     ],
     'flag': [
         'IcFlagDe',
@@ -454,7 +455,7 @@ export const icons =
         'IcFlagUk',
         'IcFlagVi',
         'IcFlagZhCn',
-        'IcFlagZhTw'
+        'IcFlagZhTw',
     ],
     'mt5': [
         'IcMt5CfdPlatform',
@@ -480,7 +481,7 @@ export const icons =
         'IcMt5SyntheticIndices',
         'IcMt5SyntheticPlatform',
         'IcMt5Synthetic',
-        'IcMt5TradeTypes'
+        'IcMt5TradeTypes',
     ],
     'option': [
         'IcOptionCallPutReset',
@@ -498,7 +499,7 @@ export const icons =
         'IcOptionRaiseFall',
         'IcOptionStayinGoesout',
         'IcOptionTouchNotouch',
-        'IcOptionUpDownAsian'
+        'IcOptionUpDownAsian',
     ],
     'stock': [
         'IcStockAdidasSalomon',
@@ -548,7 +549,7 @@ export const icons =
         'IcStockVisa',
         'IcStockWallMart',
         'IcStockWaltDisney',
-        'IcStockZoom'
+        'IcStockZoom',
     ],
     'tradetype': [
         'IcTradetypeAsiand',
@@ -583,7 +584,7 @@ export const icons =
         'IcTradetypeRunlow',
         'IcTradetypeTickhigh',
         'IcTradetypeTicklow',
-        'IcTradetypeUpordown'
+        'IcTradetypeUpordown',
     ],
     'underlying': [
         'IcUnderlying1HZ100V',
@@ -740,7 +741,7 @@ export const icons =
         'IcUnderlyingWLDEUR',
         'IcUnderlyingWLDGBP',
         'IcUnderlyingWLDUSD',
-        'IcUnderlyingWLDXAU'
+        'IcUnderlyingWLDXAU',
     ],
     'wallet': [
         'IcWalletClearFunds',
@@ -776,6 +777,6 @@ export const icons =
         'IcWalletWebmoneyLight',
         'IcWalletWebmoney',
         'IcWalletZingpayDark',
-        'IcWalletZingpayLight'
-    ]
-}
+        'IcWalletZingpayLight',
+    ],
+}

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Dropdown, Icon } from '@deriv/components';
+import { localize } from 'Components/i18next';
+import { useStores } from 'Stores';
+import './advertiser-page.scss';
+import { observer } from 'mobx-react-lite';
+
+const AdvertiserPageDropdownMenu = () => {
+    const { advertiser_page_store } = useStores();
+
+    const { is_blocked } = advertiser_page_store.advertiser_info;
+
+    const viewBlockUserModal = () => {
+        if (!is_blocked) {
+            advertiser_page_store.setIsBlockUserModalOpen(true);
+        }
+    };
+
+    return (
+        <div className='advertiser-page__menu-dots-toggle'>
+            <Icon
+                className='advertiser-page__menu-dots-icon'
+                icon='IcMenuDots'
+                onClick={() => advertiser_page_store.setIsDropdownVisible(!advertiser_page_store.is_dropdown_visible)}
+                size={16}
+            />
+            {advertiser_page_store.is_dropdown_visible && (
+                <div
+                    className={`advertiser-page__dropdown${is_blocked ? '--disabled' : ''}`}
+                    onClick={viewBlockUserModal}
+                >
+                    <Dropdown
+                        className='advertiser-page__dropdown-container'
+                        is_align_text_right
+                        list={['Block']}
+                        name={'block_user_dropdown'}
+                        placeholder={localize('Block')}
+                    />
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default observer(AdvertiserPageDropdownMenu);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Loading, Text } from '@deriv/components';
+import { DesktopWrapper, Loading, MobileWrapper, Text } from '@deriv/components';
 import { daysSince, isMobile } from '@deriv/shared';
 import { reaction } from 'mobx';
 import { observer } from 'mobx-react-lite';
@@ -12,8 +12,10 @@ import UserAvatar from 'Components/user/user-avatar/user-avatar.jsx';
 import { useStores } from 'Stores';
 import AdvertiserPageStats from './advertiser-page-stats.jsx';
 import AdvertiserPageAdverts from './advertiser-page-adverts.jsx';
+import AdvertiserPageDropdownMenu from './advertiser-page-dropdown-menu.jsx';
 import TradeBadge from '../trade-badge/trade-badge.jsx';
 import './advertiser-page.scss';
+import BlockUserModal from './block-user/block-user-modal.jsx';
 
 const AdvertiserPage = () => {
     const { advertiser_page_store, buy_sell_store } = useStores();
@@ -24,14 +26,21 @@ const AdvertiserPage = () => {
         created_time,
         first_name,
         full_verification,
+        is_blocked,
         last_name,
         sell_orders_count,
     } = advertiser_page_store.advertiser_info;
 
     const joined_since = daysSince(created_time);
 
+    const onCancel = () => {
+        advertiser_page_store.setIsBlockUserModalOpen(false);
+        advertiser_page_store.setIsDropdownVisible(false);
+    };
+
     React.useEffect(() => {
         advertiser_page_store.onMount();
+        advertiser_page_store.setIsDropdownVisible(false);
 
         return reaction(
             () => advertiser_page_store.active_index,
@@ -52,17 +61,28 @@ const AdvertiserPage = () => {
 
     return (
         <div className='advertiser-page'>
+            <BlockUserModal
+                is_advertiser_blocked={is_blocked}
+                is_block_user_modal_open={advertiser_page_store.is_block_user_modal_open}
+                onCancel={onCancel}
+                onSubmit={advertiser_page_store.blockUser}
+            />
             <BuySellModal
                 selected_ad={advertiser_page_store.advert}
                 should_show_popup={advertiser_page_store.show_ad_popup}
                 setShouldShowPopup={advertiser_page_store.setShowAdPopup}
                 table_type={advertiser_page_store.counterparty_type === buy_sell.BUY ? buy_sell.BUY : buy_sell.SELL}
             />
-            <PageReturn
-                className='buy-sell__advertiser-page-return'
-                onClick={buy_sell_store.hideAdvertiserPage}
-                page_title={localize("Advertiser's page")}
-            />
+            <div className='advertiser-page__page-return-header'>
+                <PageReturn
+                    className='buy-sell__advertiser-page-return'
+                    onClick={buy_sell_store.hideAdvertiserPage}
+                    page_title={localize("Advertiser's page")}
+                />
+                <MobileWrapper>
+                    <AdvertiserPageDropdownMenu />
+                </MobileWrapper>
+            </div>
             <div className='advertiser-page-details-container'>
                 <div className='advertiser-page__header-details'>
                     <UserAvatar
@@ -102,6 +122,9 @@ const AdvertiserPage = () => {
                             />
                         </div>
                     </div>
+                    <DesktopWrapper>
+                        <AdvertiserPageDropdownMenu />
+                    </DesktopWrapper>
                 </div>
                 <AdvertiserPageStats />
             </div>

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

@@ -3,6 +3,53 @@
     display: flex;
     flex-direction: column;
 
+    &__dropdown {
+        box-shadow: 0 1rem 2rem var(--shadow-menu);
+        border-radius: $BORDER_RADIUS;
+        cursor: pointer;
+        position: absolute;
+        right: 0;
+
+        span {
+            color: var(--text-prominent) !important;
+        }
+
+        &-container {
+            margin-top: 0;
+        }
+
+        &--disabled {
+            box-shadow: 0 1rem 2rem var(--shadow-menu);
+            border-radius: $BORDER_RADIUS;
+            position: absolute;
+            right: 0;
+
+            span {
+                color: var(--text-disabled) !important;
+            }
+        }
+    }
+
+    &__menu-dots-icon {
+        cursor: pointer;
+        margin-bottom: 0.8rem;
+    }
+
+    &__menu-dots-toggle {
+        position: absolute;
+        right: 2.4rem;
+
+        @include mobile {
+            bottom: 0.8rem;
+            right: 1.2rem;
+        }
+    }
+
+    &__page-return-header {
+        display: flex;
+        position: relative;
+    }
+
     &__header {
         display: flex;
         flex-direction: column;

packages/p2p/src/components/advertiser-page/block-user/block-user-modal.jsx

@@ -10,6 +10,7 @@ const BlockUserModal = ({ is_advertiser_blocked, is_block_user_modal_open, onCan
 
     return (
         <Modal
+            has_close_icon={false}
             is_open={is_block_user_modal_open}
             small
             title={
@@ -31,6 +32,7 @@ const BlockUserModal = ({ is_advertiser_blocked, is_block_user_modal_open, onCan
                     )}
                 </Text>
             }
+            toggleModal={onCancel}
         >
             <Modal.Body>
                 <Text color='prominent' size='xs'>

packages/p2p/src/stores/advertiser-page-store.js

@@ -15,6 +15,8 @@ export default class AdvertiserPageStore extends BaseStore {
     @observable api_error_message = '';
     @observable form_error_message = '';
     @observable has_more_adverts_to_load = false;
+    @observable is_block_user_modal_open = false;
+    @observable is_dropdown_visible = false;
     @observable is_loading = true;
     @observable is_loading_adverts = true;
     @observable is_submit_disabled = true;
@@ -82,6 +84,22 @@ export default class AdvertiserPageStore extends BaseStore {
         });
     }
 
+    @action.bound
+    blockUser() {
+        requestWS({
+            p2p_advertiser_relations: 1,
+            add_blocked: [this.advertiser_details_id],
+        }).then(response => {
+            if (!response.error) {
+                this.setIsBlockUserModalOpen(false);
+                this.setIsDropdownVisible(false);
+                this.getAdvertiserInfo();
+            } else {
+                this.setErrorMessage(response.error);
+            }
+        });
+    }
+
     @action.bound
     getAdvertiserInfo() {
         this.setIsLoading(true);
@@ -184,6 +202,16 @@ export default class AdvertiserPageStore extends BaseStore {
         this.has_more_adverts_to_load = has_more_adverts_to_load;
     }
 
+    @action.bound
+    setIsBlockUserModalOpen(is_block_user_modal_open) {
+        this.is_block_user_modal_open = is_block_user_modal_open;
+    }
+
+    @action.bound
+    setIsDropdownVisible(is_dropdown_visible) {
+        this.is_dropdown_visible = is_dropdown_visible;
+    }
+
     @action.bound
     setIsLoading(is_loading) {
         this.is_loading = is_loading;