From f17d1d2f42f1e62a4f71cf032a9813a05c2a4d62 Mon Sep 17 00:00:00 2001
From: ameerul-deriv <103412909+ameerul-deriv@users.noreply.github.com>
Date: Tue, 9 Aug 2022 20:24:21 +0800
Subject: [PATCH] Ameerul /Task #65487 Dropdown Block User Feature (#5682)

* added dropdown, menu dots icon, added function for users to block advertisers with block user modal

* refactored code, and renamed dropdown component to advertiser-page-dropdown-menu

* renamed variables and functions according to comments

* refactored block user function in advertiser-page-store and block-user-modal

* minor changes to the imports

* merged with master and added changes

* removed old blockUser and showModal functions from advertiser store

* removed is_blocked from dropdown

* refactored code with comments

* moved showBlockUserModal function to the store

* removed curly brackets in name

* fixed gap in modal

* fixed tooltip message and user cannot block themselves

* fixed dropdown darkmode design and hid menu dots icon when user is blocked

* changed dropdown hover colour

* added useOnClickOutisde Hook to hide dropdown when clicked outside
---
 .../components/icon/common/ic-menu-dots.svg   |  1 +
 .../components/src/components/icon/icons.js   |  1 +
 packages/components/stories/icon/icons.js     | 31 ++++-----
 .../advertiser-page-dropdown-menu.jsx         | 66 +++++++++++++++++++
 .../advertiser-page/advertiser-page.jsx       | 35 ++++++----
 .../advertiser-page/advertiser-page.scss      | 65 ++++++++++++++++++
 .../block-user/block-user-count.jsx           | 16 +++--
 .../block-user-overlay.scss                   |  2 +-
 .../block-user-modal/block-user-modal.jsx     |  3 +-
 .../block-user-modal/block-user-modal.scss    |  5 ++
 .../block-user/block-user-modal/index.js      |  1 +
 .../p2p/src/stores/advertiser-page-store.js   | 31 +++++++++
 12 files changed, 221 insertions(+), 36 deletions(-)
 create mode 100644 packages/components/src/components/icon/common/ic-menu-dots.svg
 create mode 100644 packages/p2p/src/components/advertiser-page/advertiser-page-dropdown-menu.jsx
 create mode 100644 packages/p2p/src/components/block-user/block-user-modal/block-user-modal.scss

diff --git a/packages/components/src/components/icon/common/ic-menu-dots.svg b/packages/components/src/components/icon/common/ic-menu-dots.svg
new file mode 100644
index 000000000000..36f7407a70fc
--- /dev/null
+++ b/packages/components/src/components/icon/common/ic-menu-dots.svg
@@ -0,0 +1 @@
+<svg width="2" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm0 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm0 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" fill="var(--text-general)"/></svg>
\ No newline at end of file
diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js
index 3077ecd22fb1..1e2c1b70eb89 100644
--- a/packages/components/src/components/icon/icons.js
+++ b/packages/components/src/components/icon/icons.js
@@ -283,6 +283,7 @@ import './common/ic-lookbacks.svg';
 import './common/ic-loss.svg';
 import './common/ic-macos-logo.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';
diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js
index 13efaa9f02f2..9596b32341e1 100644
--- a/packages/components/stories/icon/icons.js
+++ b/packages/components/stories/icon/icons.js
@@ -13,7 +13,7 @@ export const icons =
         'IcBrandDmt5',
         'IcBrandDtrader',
         'IcBrandDxtrade',
-        'IcBrandSmarttrader',
+        'IcBrandSmarttrader'
     ],
     'cashier': [
         'IcCashierAdd',
@@ -141,7 +141,7 @@ export const icons =
         'IcCashierXanpoolLight',
         'IcCashierXanpoolSmallDark',
         'IcCashierXanpoolSmallLight',
-        'IcCashier',
+        'IcCashier'
     ],
     'common': [
         'IcAccountError',
@@ -290,6 +290,7 @@ export const icons =
         'IcLoss',
         'IcMacosLogo',
         'IcMacos',
+        'IcMenuDots',
         'IcMessageDelivered',
         'IcMessageErrored',
         'IcMessagePending',
@@ -394,7 +395,7 @@ export const icons =
         'IcWindows',
         'IcWip',
         'IcZoomIn',
-        'IcZoomOut',
+        'IcZoomOut'
     ],
     'contract': [
         'IcContractBarrier',
@@ -410,7 +411,7 @@ export const icons =
         'IcContractSafeguard',
         'IcContractStartTimeCircle',
         'IcContractStartTime',
-        'IcContractTarget',
+        'IcContractTarget'
     ],
     'currency': [
         'IcCurrencyAud',
@@ -432,7 +433,7 @@ export const icons =
         'IcCurrencyUsdc',
         'IcCurrencyUsdk',
         'IcCurrencyUst',
-        'IcCurrencyVirtual',
+        'IcCurrencyVirtual'
     ],
     'dxtrade': [
         'IcDxtradeDeviceDesktopLight',
@@ -447,7 +448,7 @@ export const icons =
         'IcDxtradeFinancial',
         'IcDxtradeOnePassword',
         'IcDxtradeSyntheticPlatform',
-        'IcDxtradeSynthetic',
+        'IcDxtradeSynthetic'
     ],
     'flag': [
         'IcFlagDe',
@@ -463,7 +464,7 @@ export const icons =
         'IcFlagUk',
         'IcFlagVi',
         'IcFlagZhCn',
-        'IcFlagZhTw',
+        'IcFlagZhTw'
     ],
     'mt5': [
         'IcMt5CfdPlatform',
@@ -490,7 +491,7 @@ export const icons =
         'IcMt5SyntheticIndices',
         'IcMt5SyntheticPlatform',
         'IcMt5Synthetic',
-        'IcMt5TradeTypes',
+        'IcMt5TradeTypes'
     ],
     'option': [
         'IcOptionCallPutReset',
@@ -508,7 +509,7 @@ export const icons =
         'IcOptionRaiseFall',
         'IcOptionStayinGoesout',
         'IcOptionTouchNotouch',
-        'IcOptionUpDownAsian',
+        'IcOptionUpDownAsian'
     ],
     'stock': [
         'IcStockAdidasSalomon',
@@ -558,7 +559,7 @@ export const icons =
         'IcStockVisa',
         'IcStockWallMart',
         'IcStockWaltDisney',
-        'IcStockZoom',
+        'IcStockZoom'
     ],
     'tradetype': [
         'IcTradetypeAsiand',
@@ -593,7 +594,7 @@ export const icons =
         'IcTradetypeRunlow',
         'IcTradetypeTickhigh',
         'IcTradetypeTicklow',
-        'IcTradetypeUpordown',
+        'IcTradetypeUpordown'
     ],
     'underlying': [
         'IcUnderlying1HZ100V',
@@ -750,7 +751,7 @@ export const icons =
         'IcUnderlyingWLDEUR',
         'IcUnderlyingWLDGBP',
         'IcUnderlyingWLDUSD',
-        'IcUnderlyingWLDXAU',
+        'IcUnderlyingWLDXAU'
     ],
     'wallet': [
         'IcWalletClearFunds',
@@ -786,6 +787,6 @@ export const icons =
         'IcWalletWebmoneyLight',
         'IcWalletWebmoney',
         'IcWalletZingpayDark',
-        'IcWalletZingpayLight',
-    ],
-}
+        'IcWalletZingpayLight'
+    ]
+}
\ No newline at end of file
diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page-dropdown-menu.jsx b/packages/p2p/src/components/advertiser-page/advertiser-page-dropdown-menu.jsx
new file mode 100644
index 000000000000..e978b95ca58a
--- /dev/null
+++ b/packages/p2p/src/components/advertiser-page/advertiser-page-dropdown-menu.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import PropTypes from 'prop-types';
+import { Dropdown, Icon, Text } from '@deriv/components';
+import { Localize } from 'Components/i18next';
+import { useStores } from 'Stores';
+import { useOnClickOutside } from '../../../../components/src/hooks';
+import './advertiser-page.scss';
+
+const AdvertiserPageDropdownMenu = ({ is_my_advert }) => {
+    const dropdown_menu_ref = React.useRef();
+    const { advertiser_page_store } = useStores();
+
+    const onClickOutside = () => {
+        advertiser_page_store.setIsDropdownMenuVisible(false);
+    };
+
+    useOnClickOutside(dropdown_menu_ref, onClickOutside, () => advertiser_page_store.is_dropdown_menu_visible);
+
+    return (
+        !advertiser_page_store.is_counterparty_advertiser_blocked && (
+            <div className='advertiser-page__menu-dots-toggle'>
+                <Icon
+                    className='advertiser-page__menu-dots-icon'
+                    icon='IcMenuDots'
+                    onClick={() =>
+                        advertiser_page_store.setIsDropdownMenuVisible(!advertiser_page_store.is_dropdown_menu_visible)
+                    }
+                    size={16}
+                />
+                {advertiser_page_store.is_dropdown_menu_visible && (
+                    <div
+                        ref={dropdown_menu_ref}
+                        className='advertiser-page__dropdown'
+                        onClick={advertiser_page_store.showBlockUserModal}
+                    >
+                        <Dropdown
+                            className={`advertiser-page__dropdown-container${is_my_advert ? '--disabled' : ''}`}
+                            is_align_text_right
+                            list={['Block']}
+                            name='block_user_dropdown'
+                            placeholder={
+                                <Text
+                                    color={
+                                        advertiser_page_store.is_counterparty_advertiser_blocked
+                                            ? 'less-prominent'
+                                            : 'prominent'
+                                    }
+                                    size='xs'
+                                >
+                                    <Localize i18n_default_text='Block' />
+                                </Text>
+                            }
+                        />
+                    </div>
+                )}
+            </div>
+        )
+    );
+};
+
+export default observer(AdvertiserPageDropdownMenu);
+
+AdvertiserPageDropdownMenu.propTypes = {
+    is_my_advert: PropTypes.bool,
+};
diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx
index fcf2244f707b..7934fd81468c 100644
--- a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx
+++ b/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';
@@ -13,6 +13,7 @@ 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 BlockUserOverlay from './block-user/block-user-overlay';
 import BlockUserModal from 'Components/block-user/block-user-modal';
@@ -28,13 +29,17 @@ const AdvertiserPage = () => {
         created_time,
         first_name,
         full_verification,
+        id,
         last_name,
+        name,
         sell_orders_count,
     } = advertiser_page_store.advertiser_info;
     const joined_since = daysSince(created_time);
+    const is_my_advert = id === general_store.advertiser_id;
 
     React.useEffect(() => {
         advertiser_page_store.onMount();
+        advertiser_page_store.setIsDropdownMenuVisible(false);
 
         return reaction(
             () => advertiser_page_store.active_index,
@@ -61,15 +66,11 @@ const AdvertiserPage = () => {
         >
             <RateChangeModal onMount={advertiser_page_store.setShowAdPopup} />
             <BlockUserModal
+                advertiser_name={name}
                 is_advertiser_blocked={!!advertiser_page_store.is_counterparty_advertiser_blocked}
                 is_block_user_modal_open={general_store.is_block_user_modal_open}
-                onCancel={() => general_store.setIsBlockUserModalOpen(false)}
-                onSubmit={() =>
-                    general_store.blockUnblockUser(
-                        !advertiser_page_store.is_counterparty_advertiser_blocked,
-                        advertiser_page_store.advertiser_details_id
-                    )
-                }
+                onCancel={advertiser_page_store.onCancel}
+                onSubmit={advertiser_page_store.onSubmit}
             />
             <BuySellModal
                 selected_ad={advertiser_page_store.advert}
@@ -77,11 +78,16 @@ const AdvertiserPage = () => {
                 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 is_my_advert={is_my_advert} />
+                </MobileWrapper>
+            </div>
             <BlockUserOverlay
                 is_visible={!!advertiser_page_store.is_counterparty_advertiser_blocked}
                 onClickUnblock={() => general_store.setIsBlockUserModalOpen(true)}
@@ -125,6 +131,9 @@ const AdvertiserPage = () => {
                                 />
                             </div>
                         </div>
+                        <DesktopWrapper>
+                            <AdvertiserPageDropdownMenu is_my_advert={is_my_advert} />
+                        </DesktopWrapper>
                     </div>
                     <AdvertiserPageStats />
                 </div>
diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page.scss b/packages/p2p/src/components/advertiser-page/advertiser-page.scss
index 3f991c5372f2..a61dd334b6c3 100644
--- a/packages/p2p/src/components/advertiser-page/advertiser-page.scss
+++ b/packages/p2p/src/components/advertiser-page/advertiser-page.scss
@@ -3,6 +3,71 @@
     display: flex;
     flex-direction: column;
 
+    &__dropdown {
+        box-shadow: 0 1rem 2rem var(--shadow-menu);
+        border-radius: $BORDER_RADIUS;
+        cursor: pointer;
+        position: absolute;
+        right: 0;
+        z-index: 2;
+
+        .dc-dropdown__display {
+            background-color: var(--general-main-2);
+            border: 1px solid var(--general-active);
+
+            span {
+                background-color: var(--general-main-2);
+            }
+
+            &-placeholder {
+                top: auto;
+            }
+        }
+
+        &-container {
+            margin-top: 0;
+
+            &--disabled {
+                margin-top: 0;
+
+                span {
+                    color: var(--text-disabled) !important;
+                }
+            }
+        }
+
+        &:hover {
+            .dc-dropdown__display {
+                background-color: var(--border-normal);
+                border: 1px solid var(--border-normal);
+
+                span {
+                    background-color: var(--border-normal);
+                }
+            }
+        }
+    }
+
+    &__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;
+    }
+
     &--no-scroll {
         overflow: hidden;
     }
diff --git a/packages/p2p/src/components/advertiser-page/block-user/block-user-count.jsx b/packages/p2p/src/components/advertiser-page/block-user/block-user-count.jsx
index 3727d5e45326..0600303ec29b 100644
--- a/packages/p2p/src/components/advertiser-page/block-user/block-user-count.jsx
+++ b/packages/p2p/src/components/advertiser-page/block-user/block-user-count.jsx
@@ -12,10 +12,14 @@ const BlockUserCount = () => {
 
     const [is_block_user_count_modal_open, setIsBlockUserCountModalOpen] = React.useState(false);
 
-    const message =
-        blocked_by_count === 0
-            ? localize('Nobody has blocked you. Yay!')
-            : localize('{{blocked_by_count}} people have blocked you.', { blocked_by_count });
+    const getMessage = () => {
+        if (blocked_by_count === 0) {
+            return localize('Nobody has blocked you. Yay!');
+        } else if (blocked_by_count === 1) {
+            return localize('{{blocked_by_count}} person has blocked you', { blocked_by_count });
+        }
+        return localize('{{blocked_by_count}} people have blocked you', { blocked_by_count });
+    };
 
     React.useEffect(() => {
         my_profile_store.getAdvertiserInfo();
@@ -29,7 +33,7 @@ const BlockUserCount = () => {
                 <Modal has_close_icon={false} is_open={is_block_user_count_modal_open} width='440px'>
                     <Modal.Body>
                         <Text color='prominent' size='xs'>
-                            {message}
+                            {getMessage()}
                         </Text>
                     </Modal.Body>
                     <Modal.Footer>
@@ -50,7 +54,7 @@ const BlockUserCount = () => {
                     alignment='top'
                     className='block-user-count'
                     classNameTarget='block-user-count__container'
-                    message={message}
+                    message={getMessage()}
                 >
                     <Icon className='block-user-count__container--icon' icon='IcUserBlockedOutline' size={16} />
                     <Text color='less-prominent' line_height='m' size={isDesktop() ? 'xs' : 14}>
diff --git a/packages/p2p/src/components/advertiser-page/block-user/block-user-overlay/block-user-overlay.scss b/packages/p2p/src/components/advertiser-page/block-user/block-user-overlay/block-user-overlay.scss
index 90694358b213..c10035ac605d 100644
--- a/packages/p2p/src/components/advertiser-page/block-user/block-user-overlay/block-user-overlay.scss
+++ b/packages/p2p/src/components/advertiser-page/block-user/block-user-overlay/block-user-overlay.scss
@@ -16,7 +16,7 @@
         top: 0;
         left: 0;
         width: 94rem;
-        z-index: 9999;
+        z-index: 1;
 
         @include mobile {
             border: none;
diff --git a/packages/p2p/src/components/block-user/block-user-modal/block-user-modal.jsx b/packages/p2p/src/components/block-user/block-user-modal/block-user-modal.jsx
index ecf525f9b989..bb6949e6def7 100644
--- a/packages/p2p/src/components/block-user/block-user-modal/block-user-modal.jsx
+++ b/packages/p2p/src/components/block-user/block-user-modal/block-user-modal.jsx
@@ -7,6 +7,7 @@ import { Localize } from 'Components/i18next';
 const BlockUserModal = ({ advertiser_name, is_advertiser_blocked, is_block_user_modal_open, onCancel, onSubmit }) => {
     return (
         <Modal
+            className='block-user-modal'
             has_close_icon={false}
             is_open={is_block_user_modal_open}
             small
@@ -30,7 +31,7 @@ const BlockUserModal = ({ advertiser_name, is_advertiser_blocked, is_block_user_
                 </Text>
             }
         >
-            <Modal.Body>
+            <Modal.Body className='block-user-modal__body'>
                 <Text color='prominent' size='xs'>
                     {is_advertiser_blocked ? (
                         <Localize
diff --git a/packages/p2p/src/components/block-user/block-user-modal/block-user-modal.scss b/packages/p2p/src/components/block-user/block-user-modal/block-user-modal.scss
new file mode 100644
index 000000000000..84d470158208
--- /dev/null
+++ b/packages/p2p/src/components/block-user/block-user-modal/block-user-modal.scss
@@ -0,0 +1,5 @@
+.block-user-modal {
+    &__body {
+        padding: 0 2.4rem;
+    }
+}
diff --git a/packages/p2p/src/components/block-user/block-user-modal/index.js b/packages/p2p/src/components/block-user/block-user-modal/index.js
index 7a60699e574b..385476da1fa2 100644
--- a/packages/p2p/src/components/block-user/block-user-modal/index.js
+++ b/packages/p2p/src/components/block-user/block-user-modal/index.js
@@ -1,3 +1,4 @@
 import BlockUserModal from './block-user-modal.jsx';
+import './block-user-modal.scss';
 
 export default BlockUserModal;
diff --git a/packages/p2p/src/stores/advertiser-page-store.js b/packages/p2p/src/stores/advertiser-page-store.js
index 6434c60ebd33..0f0f2d81e222 100644
--- a/packages/p2p/src/stores/advertiser-page-store.js
+++ b/packages/p2p/src/stores/advertiser-page-store.js
@@ -16,6 +16,7 @@ export default class AdvertiserPageStore extends BaseStore {
     @observable form_error_message = '';
     @observable has_more_adverts_to_load = false;
     @observable is_counterparty_advertiser_blocked = false;
+    @observable is_dropdown_menu_visible = false;
     @observable is_loading = true;
     @observable is_loading_adverts = true;
     @observable is_submit_disabled = true;
@@ -111,6 +112,12 @@ export default class AdvertiserPageStore extends BaseStore {
         }
     }
 
+    @action.bound
+    onCancel() {
+        this.root_store.general_store.setIsBlockUserModalOpen(false);
+        this.setIsDropdownMenuVisible(false);
+    }
+
     @action.bound
     onCancelClick() {
         this.setShowAdPopup(false);
@@ -127,6 +134,15 @@ export default class AdvertiserPageStore extends BaseStore {
         this.getAdvertiserInfo();
     }
 
+    @action.bound
+    onSubmit() {
+        this.root_store.general_store.blockUnblockUser(
+            !this.is_counterparty_advertiser_blocked,
+            this.advertiser_details_id
+        );
+        this.setIsDropdownMenuVisible(false);
+    }
+
     onTabChange() {
         this.setAdverts([]);
         this.loadMoreAdvertiserAdverts({ startIndex: 0 });
@@ -187,6 +203,11 @@ export default class AdvertiserPageStore extends BaseStore {
         this.has_more_adverts_to_load = has_more_adverts_to_load;
     }
 
+    @action.bound
+    setIsDropdownMenuVisible(is_dropdown_menu_visible) {
+        this.is_dropdown_menu_visible = is_dropdown_menu_visible;
+    }
+
     @action.bound
     setIsLoading(is_loading) {
         this.is_loading = is_loading;
@@ -220,4 +241,14 @@ export default class AdvertiserPageStore extends BaseStore {
             this.setShowAdPopup(true);
         }
     }
+
+    @action.bound
+    showBlockUserModal() {
+        if (
+            !this.is_counterparty_advertiser_blocked &&
+            this.advertiser_info.id !== this.root_store.general_store.advertiser_id
+        ) {
+            this.root_store.general_store.setIsBlockUserModalOpen(true);
+        }
+    }
 }