Ameerul /Task #65487 Dropdown Block User Feature

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

@@ -278,6 +278,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',
@@ -285,6 +285,7 @@ export const icons =
         'IcLookbacks',
         'IcLoss',
         'IcMacos',
+        'IcMenuDots',
         'IcMessageDelivered',
         'IcMessageErrored',
         'IcMessagePending',
@@ -388,7 +389,7 @@ export const icons =
         'IcWindows',
         'IcWip',
         'IcZoomIn',
-        'IcZoomOut',
+        'IcZoomOut'
     ],
     'contract': [
         'IcContractBarrier',
@@ -404,7 +405,7 @@ export const icons =
         'IcContractSafeguard',
         'IcContractStartTimeCircle',
         'IcContractStartTime',
-        'IcContractTarget',
+        'IcContractTarget'
     ],
     'currency': [
         'IcCurrencyAud',
@@ -426,7 +427,7 @@ export const icons =
         'IcCurrencyUsdc',
         'IcCurrencyUsdk',
         'IcCurrencyUst',
-        'IcCurrencyVirtual',
+        'IcCurrencyVirtual'
     ],
     'dxtrade': [
         'IcDxtradeDeviceDesktopLight',
@@ -441,7 +442,7 @@ export const icons =
         'IcDxtradeFinancial',
         'IcDxtradeOnePassword',
         'IcDxtradeSyntheticPlatform',
-        'IcDxtradeSynthetic',
+        'IcDxtradeSynthetic'
     ],
     'flag': [
         'IcFlagDe',
@@ -457,7 +458,7 @@ export const icons =
         'IcFlagUk',
         'IcFlagVi',
         'IcFlagZhCn',
-        'IcFlagZhTw',
+        'IcFlagZhTw'
     ],
     'mt5': [
         'IcMt5CfdPlatform',
@@ -483,7 +484,7 @@ export const icons =
         'IcMt5SyntheticIndices',
         'IcMt5SyntheticPlatform',
         'IcMt5Synthetic',
-        'IcMt5TradeTypes',
+        'IcMt5TradeTypes'
     ],
     'option': [
         'IcOptionCallPutReset',
@@ -501,7 +502,7 @@ export const icons =
         'IcOptionRaiseFall',
         'IcOptionStayinGoesout',
         'IcOptionTouchNotouch',
-        'IcOptionUpDownAsian',
+        'IcOptionUpDownAsian'
     ],
     'stock': [
         'IcStockAdidasSalomon',
@@ -551,7 +552,7 @@ export const icons =
         'IcStockVisa',
         'IcStockWallMart',
         'IcStockWaltDisney',
-        'IcStockZoom',
+        'IcStockZoom'
     ],
     'tradetype': [
         'IcTradetypeAsiand',
@@ -586,7 +587,7 @@ export const icons =
         'IcTradetypeRunlow',
         'IcTradetypeTickhigh',
         'IcTradetypeTicklow',
-        'IcTradetypeUpordown',
+        'IcTradetypeUpordown'
     ],
     'underlying': [
         'IcUnderlying1HZ100V',
@@ -743,7 +744,7 @@ export const icons =
         'IcUnderlyingWLDEUR',
         'IcUnderlyingWLDGBP',
         'IcUnderlyingWLDUSD',
-        'IcUnderlyingWLDXAU',
+        'IcUnderlyingWLDXAU'
     ],
     'wallet': [
         'IcWalletClearFunds',
@@ -779,6 +780,6 @@ export const icons =
         'IcWalletWebmoneyLight',
         'IcWalletWebmoney',
         'IcWalletZingpayDark',
-        'IcWalletZingpayLight',
-    ],
-}
+        'IcWalletZingpayLight'
+    ]
+}

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Dropdown, Icon } from '@deriv/components';
+import { localize } from 'Components/i18next';
+import { useStores } from 'Stores';
+import { observer } from 'mobx-react-lite';
+import './advertiser-page.scss';
+
+const AdvertiserPageDropdownMenu = () => {
+    const { advertiser_page_store, general_store } = useStores();
+
+    const { is_blocked } = advertiser_page_store.advertiser_info;
+
+    const showDropdown = () => {
+        if (!advertiser_page_store.is_counterparty_advertiser_blocked) {
+            advertiser_page_store.setIsDropdownMenuVisible(!advertiser_page_store.is_dropdown_menu_visible);
+        }
+    };
+
+    return (
+        <div className='advertiser-page__menu-dots-toggle'>
+            <Icon className='advertiser-page__menu-dots-icon' icon='IcMenuDots' onClick={showDropdown} size={16} />
+            {advertiser_page_store.is_dropdown_menu_visible && (
+                <div
+                    className={`advertiser-page__dropdown${is_blocked ? '--disabled' : ''}`}
+                    onClick={() => general_store.setIsBlockUserModalOpen(true)}
+                >
+                    <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,6 +12,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,12 +29,27 @@ const AdvertiserPage = () => {
         first_name,
         full_verification,
         last_name,
+        name,
         sell_orders_count,
     } = advertiser_page_store.advertiser_info;
     const joined_since = daysSince(created_time);
 
+    const onCancel = () => {
+        general_store.setIsBlockUserModalOpen(false);
+        advertiser_page_store.setIsDropdownMenuVisible(false);
+    };
+
+    const onSubmit = () => {
+        general_store.blockUnblockUser(
+            !advertiser_page_store.is_counterparty_advertiser_blocked,
+            advertiser_page_store.advertiser_details_id
+        );
+        advertiser_page_store.setIsDropdownMenuVisible(false);
+    };
+
     React.useEffect(() => {
         advertiser_page_store.onMount();
+        advertiser_page_store.setIsDropdownMenuVisible(false);
 
         return reaction(
             () => advertiser_page_store.active_index,
@@ -59,27 +75,28 @@ const AdvertiserPage = () => {
             })}
         >
             <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={onCancel}
+                onSubmit={onSubmit}
             />
             <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>
             <BlockUserOverlay
                 is_visible={!!advertiser_page_store.is_counterparty_advertiser_blocked}
                 onClickUnblock={() => general_store.setIsBlockUserModalOpen(true)}
@@ -123,6 +140,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;
+    }
+
     &--no-scroll {
         overflow: hidden;
     }

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

@@ -2,12 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Button, Modal, Text } from '@deriv/components';
 import { observer } from 'mobx-react-lite';
-import { useStores } from 'Stores';
 import { Localize } from 'Components/i18next';
 
-const BlockUserModal = ({ is_advertiser_blocked, is_block_user_modal_open, onCancel, onSubmit }) => {
-    const { advertiser_page_store } = useStores();
-
+const BlockUserModal = ({ advertiser_name, is_advertiser_blocked, is_block_user_modal_open, onCancel, onSubmit }) => {
     return (
         <Modal
             has_close_icon={false}
@@ -17,16 +14,16 @@ const BlockUserModal = ({ is_advertiser_blocked, is_block_user_modal_open, onCan
                 <Text color='prominent' size='s' weight='bold'>
                     {is_advertiser_blocked ? (
                         <Localize
-                            i18n_default_text='Unblock {{advertiser_details_name}}?'
+                            i18n_default_text='Unblock {{advertiser_name}}?'
                             values={{
-                                advertiser_details_name: advertiser_page_store.advertiser_details_name,
+                                advertiser_name,
                             }}
                         />
                     ) : (
                         <Localize
-                            i18n_default_text='Block {{advertiser_details_name}}?'
+                            i18n_default_text='Block {{advertiser_name}}?'
                             values={{
-                                advertiser_details_name: advertiser_page_store.advertiser_details_name,
+                                advertiser_name,
                             }}
                         />
                     )}
@@ -37,13 +34,13 @@ const BlockUserModal = ({ is_advertiser_blocked, is_block_user_modal_open, onCan
                 <Text color='prominent' size='xs'>
                     {is_advertiser_blocked ? (
                         <Localize
-                            i18n_default_text="You will be able to see {{ advertiser_details_name }}'s ads. They'll be able to place orders on your ads, too."
-                            values={{ advertiser_details_name: advertiser_page_store.advertiser_details_name }}
+                            i18n_default_text="You will be able to see {{ advertiser_name }}'s ads. They'll be able to place orders on your ads, too."
+                            values={{ advertiser_name }}
                         />
                     ) : (
                         <Localize
-                            i18n_default_text="You won't see {{advertiser_details_name}}'s ads anymore and they won't be able to place orders on your ads."
-                            values={{ advertiser_details_name: advertiser_page_store.advertiser_details_name }}
+                            i18n_default_text="You won't see {{advertiser_name}}'s ads anymore and they won't be able to place orders on your ads."
+                            values={{ advertiser_name }}
                         />
                     )}
                 </Text>
@@ -65,6 +62,7 @@ const BlockUserModal = ({ is_advertiser_blocked, is_block_user_modal_open, onCan
 };
 
 BlockUserModal.propTypes = {
+    advertiser_name: PropTypes.string.isRequired,
     is_advertiser_blocked: PropTypes.bool.isRequired,
     is_block_user_modal_open: PropTypes.bool.isRequired,
     onCancel: PropTypes.func.isRequired,

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

@@ -48,7 +48,7 @@ const BuySell = () => {
             </React.Fragment>
         );
     }
-    
+
     // TODO: Refactor this within next release as discussed with design team regarding the tabs
     // if (buy_sell_store.show_advertiser_page && !buy_sell_store.should_show_verification) {
     //     return (