diff --git a/src/components/AdvertiserName/AdvertiserName.tsx b/src/components/AdvertiserName/AdvertiserName.tsx
index aa172d5e..a9f08093 100644
--- a/src/components/AdvertiserName/AdvertiserName.tsx
+++ b/src/components/AdvertiserName/AdvertiserName.tsx
@@ -39,7 +39,7 @@ const AdvertiserName = ({ advertiserStats, onClickBlocked }: TAdvertiserNameProp
{isDesktop && isMyProfile && }
- {isDesktop && !isMyProfile && !advertiserStats?.isBlocked && (
+ {isDesktop && !isMyProfile && !advertiserStats?.is_blocked && (
)}
diff --git a/src/components/AdvertiserName/BlockDropdown.tsx b/src/components/AdvertiserName/BlockDropdown.tsx
index afafcd72..ef927dfb 100644
--- a/src/components/AdvertiserName/BlockDropdown.tsx
+++ b/src/components/AdvertiserName/BlockDropdown.tsx
@@ -3,6 +3,7 @@ import { useOnClickOutside } from 'usehooks-ts';
import { BlockUnblockUserModal } from '@/components/Modals';
import { useAdvertiserStats, useModalManager } from '@/hooks';
import { LabelPairedEllipsisVerticalMdRegularIcon } from '@deriv/quill-icons';
+import { Localize } from '@deriv-com/translations';
import { Button, Text, useDevice } from '@deriv-com/ui';
import './BlockDropdown.scss';
@@ -15,7 +16,7 @@ const BlockDropdown = ({ id, onClickBlocked }: TBlockDropdownProps) => {
const [visible, setVisible] = useState(false);
const { hideModal, isModalOpenFor, showModal } = useModalManager();
const { data } = useAdvertiserStats(id);
- const { isBlocked, name = '' } = data ?? {};
+ const { is_blocked: isBlocked, name = '' } = data ?? {};
const ref = useRef(null);
useOnClickOutside(ref, () => setVisible(false));
const { isMobile } = useDevice();
@@ -24,8 +25,7 @@ const BlockDropdown = ({ id, onClickBlocked }: TBlockDropdownProps) => {
@@ -41,19 +41,21 @@ const BlockDropdown = ({ id, onClickBlocked }: TBlockDropdownProps) => {
variant='ghost'
>
- Block
+
)}
-
+ {isModalOpenFor('BlockUnblockUserModal') && (
+
+ )}
);
};
diff --git a/src/components/AdvertiserName/__tests__/BlockDropdown.spec.tsx b/src/components/AdvertiserName/__tests__/BlockDropdown.spec.tsx
new file mode 100644
index 00000000..32f9170f
--- /dev/null
+++ b/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();
+ expect(screen.getByTestId('dt_block_dropdown_icon')).toBeInTheDocument();
+ });
+ it('should render the dropdown list on clicking on the icon', async () => {
+ render();
+ 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();
+ await userEvent.click(screen.getByTestId('dt_block_dropdown_icon'));
+ await userEvent.click(screen.getByText('Block'));
+ expect(mockModalManager.showModal).toHaveBeenCalledWith('BlockUnblockUserModal');
+ });
+});
diff --git a/src/components/ProfileContent/ProfileContent.tsx b/src/components/ProfileContent/ProfileContent.tsx
index 3ba6df8d..0cde5419 100644
--- a/src/components/ProfileContent/ProfileContent.tsx
+++ b/src/components/ProfileContent/ProfileContent.tsx
@@ -30,10 +30,7 @@ const ProfileContent = ({ id, setAdvertiserName, setShowOverlay }: TProfileConte
return (
<>
-
setShowOverlay?.((prevState: boolean) => !prevState)}
- />
+ setShowOverlay?.(true)} />
{isMyProfile ? : }
{isMobile && isMyProfile && }
diff --git a/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserInfo.ts b/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserInfo.ts
index a12f616c..1638c74a 100644
--- a/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserInfo.ts
+++ b/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserInfo.ts
@@ -25,6 +25,7 @@ const useAdvertiserInfo = (id?: string) => {
* Key removal is handled in useAdvertiserStats hook's useEffect.
* */
const local_storage_key = id ? `p2p_advertiser_info_${id}` : 'p2p_advertiser_info';
+
const [p2p_advertiser_info, setP2PAdvertiserInfo] = useLocalStorage>(
local_storage_key,
{}
diff --git a/src/hooks/custom-hooks/useAdvertiserStats.ts b/src/hooks/custom-hooks/useAdvertiserStats.ts
index 72654a60..502c9d1d 100644
--- a/src/hooks/custom-hooks/useAdvertiserStats.ts
+++ b/src/hooks/custom-hooks/useAdvertiserStats.ts
@@ -83,9 +83,6 @@ const useAdvertiserStats = (advertiserId?: string) => {
/** Checks if the user is already an advertiser */
isAdvertiser,
- /** Indicates that the advertiser is blocked by the current user. */
- isBlocked: !!data?.is_blocked,
-
/** Checks if the user is eligible to upgrade their daily limits */
isEligibleForLimitUpgrade: Boolean(data?.upgradable_daily_limits),
diff --git a/src/pages/advertiser/screens/Advertiser/Advertiser.tsx b/src/pages/advertiser/screens/Advertiser/Advertiser.tsx
index 2dc8cb6f..f25ac611 100644
--- a/src/pages/advertiser/screens/Advertiser/Advertiser.tsx
+++ b/src/pages/advertiser/screens/Advertiser/Advertiser.tsx
@@ -50,8 +50,10 @@ const Advertiser = () => {
/>
showModal('BlockUnblockUserModal')}
+ setShowOverlay={setShowOverlay}
>
diff --git a/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.scss b/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.scss
index 869a2a94..ad483c76 100644
--- a/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.scss
+++ b/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.scss
@@ -4,6 +4,7 @@
&__wrapper {
align-items: center;
+ gap: 2rem;
background: #fff;
border: 2px solid #f2f3f4;
border-radius: 6px;
@@ -32,8 +33,4 @@
margin-top: 2rem;
}
}
-
- .advertiser-page-adverts__table-body {
- min-height: 20vh;
- }
}
diff --git a/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.tsx b/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.tsx
index 5c44d223..b3dcd5f4 100644
--- a/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.tsx
+++ b/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.tsx
@@ -1,24 +1,32 @@
import { PropsWithChildren } from 'react';
+import { BlockUnblockUserModal } from '@/components/Modals';
+import { useModalManager } from '@/hooks';
+import { DerivLightIcBlockIcon } from '@deriv/quill-icons';
import { Localize } from '@deriv-com/translations';
import { Button, Text, useDevice } from '@deriv-com/ui';
import './AdvertiserBlockOverlay.scss';
type TAdvertiserBlockOverlayProps = {
advertiserName: string;
+ id?: string;
isOverlayVisible: boolean;
onClickUnblock: () => void;
+ setShowOverlay: (showOverlay: boolean) => void;
};
const AdvertiserBlockOverlay = ({
advertiserName,
children,
+ id,
isOverlayVisible,
- onClickUnblock,
+ setShowOverlay,
}: PropsWithChildren) => {
const { isMobile } = useDevice();
+ const { hideModal, isModalOpenFor, showModal } = useModalManager();
if (isOverlayVisible) {
return (
+
showModal('BlockUnblockUserModal')}
size='lg'
textSize={isMobile ? 'md' : 'sm'}
variant='outlined'
>
- Unblock
+
{children}
+
setShowOverlay(false)}
+ onRequestClose={hideModal}
+ />
);
}