feat: add advertiser block user overlay

src/components/AdvertiserName/AdvertiserName.tsx

@@ -1,15 +1,20 @@
 import { DeepPartial, TAdvertiserStats } from 'types';
 import { UserAvatar } from '@/components';
 import { getCurrentRoute } from '@/utils';
-import { LabelPairedEllipsisVerticalLgRegularIcon } from '@deriv/quill-icons';
 import { useGetSettings } from '@deriv-com/api-hooks';
 import { Text, useDevice } from '@deriv-com/ui';
 import AdvertiserNameBadges from './AdvertiserNameBadges';
 import AdvertiserNameStats from './AdvertiserNameStats';
 import AdvertiserNameToggle from './AdvertiserNameToggle';
+import BlockDropdown from './BlockDropdown';
 import './AdvertiserName.scss';
 
-const AdvertiserName = ({ advertiserStats }: { advertiserStats: DeepPartial<TAdvertiserStats> }) => {
+type TAdvertiserNameProps = {
+    advertiserStats: DeepPartial<TAdvertiserStats>;
+    onClickBlocked?: () => void;
+};
+
+const AdvertiserName = ({ advertiserStats, onClickBlocked }: TAdvertiserNameProps) => {
     const { data } = useGetSettings();
     const { isDesktop } = useDevice();
     const isMyProfile = getCurrentRoute() === 'my-profile';
@@ -34,7 +39,9 @@ const AdvertiserName = ({ advertiserStats }: { advertiserStats: DeepPartial<TAdv
                 <AdvertiserNameBadges advertiserStats={advertiserStats} />
             </div>
             {isDesktop && isMyProfile && <AdvertiserNameToggle advertiserInfo={advertiserStats} />}
-            {isDesktop && !isMyProfile && <LabelPairedEllipsisVerticalLgRegularIcon className='cursor-pointer' />}
+            {isDesktop && !isMyProfile && !advertiserStats?.is_blocked && (
+                <BlockDropdown id={advertiserStats?.id} onClickBlocked={onClickBlocked} />
+            )}
         </div>
     );
 };

src/components/AdvertiserName/BlockDropdown.scss

@@ -0,0 +1,31 @@
+.block-dropdown {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    .deriv-dropdown {
+        width: 3.2rem;
+
+        & .deriv-dropdown__button {
+            transform: none;
+            transition: none;
+        }
+
+        &__items {
+            width: 12.8rem;
+            border: 0;
+            padding: 0;
+            top: 3rem;
+            right: 1rem;
+        }
+
+        .deriv-input {
+            border: 0;
+            padding: 0;
+
+            &__field,
+            &__helper-message {
+                display: none;
+            }
+        }
+    }
+}

src/components/AdvertiserName/BlockDropdown.tsx

@@ -0,0 +1,45 @@
+import { BlockUnblockUserModal } from '@/components/Modals';
+import { useAdvertiserStats, useModalManager } from '@/hooks';
+import { LabelPairedEllipsisVerticalXlRegularIcon } from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
+import { Dropdown } from '@deriv-com/ui';
+import './BlockDropdown.scss';
+
+type TBlockDropdownProps = {
+    id?: string;
+    onClickBlocked?: () => void;
+};
+
+const BlockDropdown = ({ id, onClickBlocked }: TBlockDropdownProps) => {
+    const { localize } = useTranslations();
+    const { hideModal, isModalOpenFor, showModal } = useModalManager();
+    const { data } = useAdvertiserStats(id);
+    const { is_blocked: isBlocked, name = '' } = data ?? {};
+    return (
+        <div className='block-dropdown'>
+            <Dropdown
+                dropdownIcon={<LabelPairedEllipsisVerticalXlRegularIcon data-testid='dt_block_dropdown_icon' />}
+                list={[
+                    {
+                        text: localize('Block'),
+                        value: 'block',
+                    },
+                ]}
+                name='block-user-dropdown'
+                onSelect={() => showModal('BlockUnblockUserModal')}
+            />
+            {isModalOpenFor('BlockUnblockUserModal') && (
+                <BlockUnblockUserModal
+                    advertiserName={name}
+                    id={id ?? ''}
+                    isBlocked={!!isBlocked}
+                    isModalOpen
+                    onClickBlocked={onClickBlocked}
+                    onRequestClose={hideModal}
+                />
+            )}
+        </div>
+    );
+};
+
+export default BlockDropdown;

src/components/AdvertiserName/__tests__/BlockDropdown.spec.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import BlockDropdown from '../BlockDropdown';
+
+jest.mock('@/hooks/custom-hooks', () => ({
+    useIsAdvertiserBarred: jest.fn().mockReturnValue(false),
+}));
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({
+        isMobile: false,
+    }),
+}));
+
+const mockProps = {
+    id: '134',
+    onClickBlocked: jest.fn(),
+};
+
+const mockModalManager = {
+    hideModal: jest.fn(),
+    isModalOpenFor: jest.fn().mockReturnValue(false),
+    showModal: jest.fn(),
+};
+jest.mock('@/hooks', () => ({
+    useAdvertiserStats: jest.fn().mockReturnValue({ data: { is_blocked: false, name: 'test' } }),
+    useModalManager: jest.fn(() => mockModalManager),
+}));
+describe('BlockDropdown', () => {
+    it('should render', () => {
+        render(<BlockDropdown {...mockProps} />);
+        expect(screen.getByTestId('dt_block_dropdown_icon')).toBeInTheDocument();
+    });
+    it('should render the dropdown list on clicking on the icon', async () => {
+        render(<BlockDropdown {...mockProps} />);
+        await userEvent.click(screen.getByTestId('dt_block_dropdown_icon'));
+        expect(screen.getByText('Block')).toBeInTheDocument();
+    });
+    it('should handle the onclick event for clicking on the block button', async () => {
+        render(<BlockDropdown {...mockProps} />);
+        await userEvent.click(screen.getByTestId('dt_block_dropdown_icon'));
+        await userEvent.click(screen.getByText('Block'));
+        expect(mockModalManager.showModal).toHaveBeenCalledWith('BlockUnblockUserModal');
+    });
+});

src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import Modal from 'react-modal';
 import { api } from '@/hooks';
 import { Localize } from '@deriv-com/translations';
@@ -10,6 +11,7 @@ type TBlockUnblockUserModalProps = {
     id: string;
     isBlocked: boolean;
     isModalOpen: boolean;
+    onClickBlocked?: () => void;
     onRequestClose: () => void;
 };
 
@@ -18,10 +20,19 @@ const BlockUnblockUserModal = ({
     id,
     isBlocked,
     isModalOpen,
+    onClickBlocked,
     onRequestClose,
 }: TBlockUnblockUserModalProps) => {
-    const { mutate: blockAdvertiser } = api.counterparty.useBlock();
-    const { mutate: unblockAdvertiser } = api.counterparty.useUnblock();
+    const { mutate: blockAdvertiser, mutation } = api.counterparty.useBlock();
+    const { mutate: unblockAdvertiser, mutation: unblockMutation } = api.counterparty.useUnblock();
+
+    useEffect(() => {
+        if (mutation.isSuccess || unblockMutation.isSuccess) {
+            onClickBlocked?.();
+            onRequestClose();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mutation.isSuccess, onClickBlocked, unblockMutation.isSuccess]);
 
     const getModalTitle = () => (isBlocked ? `Unblock ${advertiserName}?` : `Block ${advertiserName}?`);
 
@@ -44,8 +55,6 @@ const BlockUnblockUserModal = ({
         } else {
             blockAdvertiser([parseInt(id)]);
         }
-
-        onRequestClose();
     };
 
     return (

src/components/Modals/BlockUnblockUserModal/__tests__/BlockUnblockUserModal.spec.tsx

@@ -12,9 +12,15 @@ jest.mock('@/hooks', () => ({
         counterparty: {
             useBlock: jest.fn(() => ({
                 mutate: mockUseBlockMutate,
+                mutation: {
+                    isSuccess: false,
+                },
             })),
             useUnblock: jest.fn(() => ({
                 mutate: mockUseUnblockMutate,
+                mutation: {
+                    isSuccess: false,
+                },
             })),
         },
     },

src/components/ProfileContent/ProfileContent.tsx

@@ -1,3 +1,4 @@
+import { Dispatch, SetStateAction, useEffect } from 'react';
 import { AdvertiserName, AdvertiserNameToggle } from '@/components';
 import { useAdvertiserStats } from '@/hooks/custom-hooks';
 import { getCurrentRoute } from '@/utils';
@@ -8,17 +9,28 @@ import './ProfileContent.scss';
 
 type TProfileContentProps = {
     id?: string;
+    setAdvertiserName?: (name: string) => void;
+    setShowOverlay?: Dispatch<SetStateAction<boolean>>;
 };
 
-const ProfileContent = ({ id }: TProfileContentProps) => {
+const ProfileContent = ({ id, setAdvertiserName, setShowOverlay }: TProfileContentProps) => {
     const { isMobile } = useDevice();
     const { data } = useAdvertiserStats(id);
     const isMyProfile = getCurrentRoute() === 'my-profile';
 
+    useEffect(() => {
+        if (data?.name && setAdvertiserName && setShowOverlay) {
+            if (data?.is_blocked) {
+                setShowOverlay(true);
+            }
+            setAdvertiserName(data?.name);
+        }
+    }, [data?.is_blocked, data?.name, setAdvertiserName, setShowOverlay]);
+
     return (
         <>
             <div className='profile-content'>
-                <AdvertiserName advertiserStats={data} />
+                <AdvertiserName advertiserStats={data} onClickBlocked={() => setShowOverlay?.(true)} />
                 {isMyProfile ? <ProfileBalance advertiserStats={data} /> : <ProfileStats advertiserStats={data} />}
             </div>
             {isMobile && isMyProfile && <AdvertiserNameToggle advertiserInfo={data} />}

src/hooks/custom-hooks/useAdvertiserStats.ts

@@ -31,12 +31,15 @@ const useAdvertiserStats = (advertiserId?: string) => {
         if (advertiserId) {
             subscribe({ id: advertiserId });
         }
+    }, [advertiserId, subscribe]);
 
+    useEffect(() => {
         return () => {
             localStorage.removeItem(`p2p_advertiser_info_${advertiserId}`);
             unsubscribe();
         };
-    }, [advertiserId, subscribe, unsubscribe]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
     const transformedData = useMemo(() => {
         if (!isSubscribed && isEmptyObject(data) && !isSuccessSettings && !isSuccessAuthenticationStatus)

src/pages/advertiser/screens/Advertiser/Advertiser.tsx

@@ -1,16 +1,21 @@
+import { useState } from 'react';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { PageReturn, ProfileContent } from '@/components';
+import BlockDropdown from '@/components/AdvertiserName/BlockDropdown';
 import { BUY_SELL_URL, MY_PROFILE_URL } from '@/constants';
-import { api } from '@/hooks';
-import { LabelPairedEllipsisVerticalLgRegularIcon } from '@deriv/quill-icons';
+import { api, useModalManager } from '@/hooks';
 import { useDevice } from '@deriv-com/ui';
 import { AdvertiserAdvertsTable } from '../AdvertiserAdvertsTable';
+import { AdvertiserBlockOverlay } from '../AdvertiserBlockOverlay';
 import './Advertiser.scss';
 
 const Advertiser = () => {
     const { isMobile } = useDevice();
+    const { showModal } = useModalManager();
     const { advertiserId } = useParams<{ advertiserId: string }>();
     const { data: advertiserInfo } = api.advertiser.useGetInfo();
+    const [showOverlay, setShowOverlay] = useState(false);
+    const [advertiserName, setAdvertiserName] = useState('');
 
     // Need to return undefined if the id is the same as the logged in user
     // This will prevent the API from trying to resubscribe to the same user and grab the data from local storage
@@ -32,12 +37,27 @@ const Advertiser = () => {
                 }
                 pageTitle='Advertiser’s page'
                 {...(isMobile && {
-                    rightPlaceHolder: <LabelPairedEllipsisVerticalLgRegularIcon className='cursor-pointer' />,
+                    rightPlaceHolder: (
+                        <BlockDropdown
+                            id={advertiserId}
+                            onClickBlocked={() => {
+                                setShowOverlay(prevState => !prevState);
+                            }}
+                        />
+                    ),
                 })}
                 weight='bold'
             />
-            <ProfileContent id={id} />
-            <AdvertiserAdvertsTable advertiserId={advertiserId} />
+            <AdvertiserBlockOverlay
+                advertiserName={advertiserName}
+                id={id}
+                isOverlayVisible={showOverlay}
+                onClickUnblock={() => showModal('BlockUnblockUserModal')}
+                setShowOverlay={setShowOverlay}
+            >
+                <ProfileContent id={id} setAdvertiserName={setAdvertiserName} setShowOverlay={setShowOverlay} />
+                <AdvertiserAdvertsTable advertiserId={advertiserId} />
+            </AdvertiserBlockOverlay>
         </div>
     );
 };

src/pages/advertiser/screens/Advertiser/__tests__/Advertiser.spec.tsx

@@ -31,6 +31,9 @@ jest.mock('@/hooks', () => ({
             })),
         },
     },
+    useModalManager: jest.fn(() => ({
+        showModal: jest.fn(),
+    })),
 }));
 
 jest.mock('@deriv-com/ui', () => ({

src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.scss

@@ -0,0 +1,36 @@
+.advertiser-block-overlay {
+    position: relative;
+    margin-bottom: 3rem;
+
+    &__wrapper {
+        align-items: center;
+        gap: 2rem;
+        background: #fff;
+        border: 2px solid #f2f3f4;
+        border-radius: 6px;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: center;
+        position: absolute;
+        opacity: 0.9;
+        top: 0;
+        left: 0;
+        width: 100%;
+        z-index: 9999;
+
+        @include mobile {
+            border: none;
+            border-radius: unset;
+            flex-flow: column;
+        }
+
+        &-text {
+            margin: 2.5rem 0 0.8rem;
+        }
+
+        &-button {
+            margin-top: 2rem;
+        }
+    }
+}