[FEQ]-[P2PS]- nada/fix: console error, firefox testlink, ellipsis iss…

…ue, character count (#75)

* fix: console error, firefox testlink, ellipsis issue, character count issue

* fix: added blocked user count modal

* fix: payment methods dropdown shadow, missing rating, ui scroll issues

* fix: tab title fix

* fix: reuse variable for text size

* fix: add eslint ignore

* fix: height for app

* fix: remove px

__mocks__/LocalizeMock.js

@@ -7,7 +7,9 @@ const Localize = ({ i18n_default_text, values }) => {
 
 // Mock for useTranslations hook
 const useTranslations = () => ({
-    localize: jest.fn(text => text),
+    localize: jest.fn((text, args) => {
+        return text.replace(/{{(.*?)}}/g, (_, match) => args[match.trim()]);
+    }),
 });
 
 const localize = jest.fn(text => text);

package.json

@@ -16,7 +16,7 @@
     "dependencies": {
         "@babel/preset-env": "^7.24.5",
         "@deriv-com/api-hooks": "^0.1.19",
-        "@deriv-com/translations": "^1.2.3",
+        "@deriv-com/translations": "^1.2.4",
         "@deriv-com/ui": "^1.26.0",
         "@deriv-com/utils": "latest",
         "@deriv/deriv-api": "^1.0.15",

src/components/AdvertiserName/AdvertiserNameStats.scss

@@ -9,7 +9,7 @@
         gap: 2rem;
     }
 
-    & div {
+    & div:not(.deriv-tooltip-container):not(.deriv-tooltip-container *) {
         display: flex;
         align-items: center;
         gap: 0.8rem;

src/components/AdvertiserName/AdvertiserNameStats.tsx

@@ -2,9 +2,10 @@ import clsx from 'clsx';
 import { DeepPartial, TAdvertiserStats } from 'types';
 import { OnlineStatusIcon, OnlineStatusLabel, StarRating } from '@/components';
 import { getCurrentRoute } from '@/utils';
-import { LabelPairedCircleUserSlashSmRegularIcon, LabelPairedThumbsUpSmRegularIcon } from '@deriv/quill-icons';
+import { LabelPairedThumbsUpSmRegularIcon } from '@deriv/quill-icons';
 import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
+import BlockUserCount from './BlockUserCount';
 import './AdvertiserNameStats.scss';
 
 /**
@@ -64,11 +65,7 @@ const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial
                 <>
                     <div>
                         <div className='advertiser-name-stats__rating'>
-                            {isMobile && (
-                                <Text color='less-prominent' size='sm'>
-                                    ({ratingAverage})
-                                </Text>
-                            )}
+                            <Text size='sm'>({ratingAverage})</Text>
                             <StarRating allowFraction isReadonly ratingValue={ratingAverage} />
                             <Text color='less-prominent' size='sm'>
                                 (<Localize i18n_default_text='{{ratingCount}} ratings' values={{ ratingCount }} />)
@@ -83,14 +80,7 @@ const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial
                     </div>
                 </>
             )}
-            {isMyProfile && (
-                <div>
-                    <LabelPairedCircleUserSlashSmRegularIcon />
-                    <Text color='less-prominent' size='sm'>
-                        {blockedByCount || 0}
-                    </Text>
-                </div>
-            )}
+            {isMyProfile && <BlockUserCount count={blockedByCount} />}
         </div>
     );
 };

src/components/AdvertiserName/BlockUserCount.scss

@@ -0,0 +1,19 @@
+.block-user-count {
+    & .deriv-tooltip-container {
+        display: flex;
+        align-items: center;
+        gap: 0.1rem;
+    }
+    &__tooltip {
+        padding: 0.8rem;
+        gap: 0;
+
+        @include mobile {
+            display: none;
+        }
+    }
+
+    &__button {
+        padding: 0;
+    }
+}

src/components/AdvertiserName/BlockUserCount.tsx

@@ -0,0 +1,60 @@
+import { TLocalize } from 'types';
+import { useModalManager } from '@/hooks';
+import { LabelPairedCircleUserSlashSmRegularIcon } from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
+import { Button, Text, Tooltip, useDevice } from '@deriv-com/ui';
+import { BlockUserCountModal } from '../Modals';
+import './BlockUserCount.scss';
+
+type TBlockUserCount = {
+    count?: number;
+};
+
+const getMessage = (localize: TLocalize, count = 0) => {
+    switch (count) {
+        case 0:
+            return localize('Nobody has blocked you. Yay!');
+        case 1:
+            return localize('{{count}} person has blocked you', {
+                count,
+            });
+        default:
+            return localize('{{count}} people have blocked you', {
+                count,
+            });
+    }
+};
+
+const BlockUserCount = ({ count }: TBlockUserCount) => {
+    const { localize } = useTranslations();
+    const { hideModal, isModalOpenFor, showModal } = useModalManager();
+    const { isMobile } = useDevice();
+    return (
+        <div className='block-user-count'>
+            <Tooltip
+                className='block-user-count__tooltip'
+                message={<Text size='xs'>{getMessage(localize, count)}</Text>}
+            >
+                <Button
+                    className='block-user-count__button'
+                    color='white'
+                    data-testid='dt_block_user_count_button'
+                    onClick={() => {
+                        isMobile ? showModal('BlockUserCountModal') : undefined;
+                    }}
+                    variant='outlined'
+                >
+                    <LabelPairedCircleUserSlashSmRegularIcon />
+                </Button>
+                <Text color='less-prominent' size='sm'>
+                    {count ?? 0}
+                </Text>
+            </Tooltip>
+            {!!isModalOpenFor('BlockUserCountModal') && (
+                <BlockUserCountModal isModalOpen message={getMessage(localize, count)} onRequestClose={hideModal} />
+            )}
+        </div>
+    );
+};
+
+export default BlockUserCount;

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

@@ -0,0 +1,50 @@
+import { useDevice } from '@deriv-com/ui';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import BlockUserCount from '../BlockUserCount';
+
+const modalManager = {
+    hideModal: jest.fn(),
+    isModalOpenFor: jest.fn(),
+    showModal: jest.fn(),
+};
+modalManager.showModal.mockImplementation(() => {
+    modalManager.isModalOpenFor.mockReturnValue(true);
+});
+
+jest.mock('@/hooks', () => ({
+    ...jest.requireActual('@/hooks'),
+    useModalManager: jest.fn(() => modalManager),
+}));
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({ isMobile: false })),
+}));
+
+describe('BlockUserCount', () => {
+    it('should render the component as expected', () => {
+        render(<BlockUserCount count={0} />);
+        expect(screen.getByText('0')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_block_user_count_button')).toBeInTheDocument();
+    });
+    it('should display the tooltip message on hovering', async () => {
+        render(<BlockUserCount count={0} />);
+        const button = screen.getByTestId('dt_block_user_count_button');
+        await userEvent.hover(button);
+        expect(screen.getByText('Nobody has blocked you. Yay!')).toBeInTheDocument();
+    });
+    it('should display the count in the tooltip message', async () => {
+        render(<BlockUserCount count={1} />);
+        const button = screen.getByTestId('dt_block_user_count_button');
+        await userEvent.hover(button);
+        expect(screen.getByText('1 person has blocked you')).toBeInTheDocument();
+    });
+    it('should open the modal on clicking the button in mobile view', async () => {
+        (useDevice as jest.Mock).mockReturnValue({ isMobile: true });
+        render(<BlockUserCount count={0} />);
+        await userEvent.click(screen.getByTestId('dt_block_user_count_button'));
+        expect(modalManager.showModal).toHaveBeenCalledWith('BlockUserCountModal');
+        expect(modalManager.isModalOpenFor()).toBe(true);
+    });
+});

src/components/AppFooter/AppFooter.tsx

@@ -17,7 +17,7 @@ import WhatsApp from './WhatsApp';
 import './AppFooter.scss';
 
 const AppFooter = () => {
-    const { currentLang, localize, switchLanguage } = useTranslations();
+    const { currentLang = 'EN', localize, switchLanguage } = useTranslations();
     const { hideModal, isModalOpenFor, showModal } = useModalManager();
 
     const openLanguageSettingModal = () => showModal('DesktopLanguagesModal');

src/components/Modals/BlockUserCountModal/BlockUserCountModal.scss

@@ -0,0 +1,3 @@
+.block-user-count-modal {
+    @include default-modal;
+}

src/components/Modals/BlockUserCountModal/BlockUserCountModal.tsx

@@ -0,0 +1,32 @@
+import { Localize } from '@deriv-com/translations';
+import { Button, Modal, Text } from '@deriv-com/ui';
+import './BlockUserCountModal.scss';
+
+type TBlockUserCountModalProps = {
+    isModalOpen: boolean;
+    message: string;
+    onRequestClose: () => void;
+};
+
+const BlockUserCountModal = ({ isModalOpen, message, onRequestClose }: TBlockUserCountModalProps) => {
+    return (
+        <Modal
+            ariaHideApp={false}
+            className='block-user-count-modal'
+            isOpen={isModalOpen}
+            onRequestClose={onRequestClose}
+            shouldCloseOnOverlayClick={false}
+        >
+            <Modal.Body className='p-[2.4rem] pb-[0.8rem]'>
+                <Text>{message}</Text>
+            </Modal.Body>
+            <Modal.Footer className='p-[1.6rem]' hideBorder>
+                <Button onClick={onRequestClose} size='lg' textSize='md'>
+                    <Localize i18n_default_text='Ok' />
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+export default BlockUserCountModal;

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

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import BlockUserCountModal from '../BlockUserCountModal';
+
+const mockProps = {
+    isModalOpen: true,
+    message: 'test',
+    onRequestClose: jest.fn(),
+};
+
+describe('BlockUserCountModal', () => {
+    it('should render the modal component as expected', () => {
+        render(<BlockUserCountModal {...mockProps} />);
+        expect(screen.getByText('test')).toBeInTheDocument();
+    });
+    it('should handle the onclick event for the ok button', async () => {
+        render(<BlockUserCountModal {...mockProps} />);
+        await userEvent.click(screen.getByText('Ok'));
+        expect(mockProps.onRequestClose).toHaveBeenCalled();
+    });
+});

src/components/Modals/BlockUserCountModal/index.ts

@@ -0,0 +1 @@
+export { default as BlockUserCountModal } from './BlockUserCountModal';

src/components/Modals/index.ts

@@ -7,6 +7,7 @@ export * from './AdRateSwitchModal';
 export * from './AdVisibilityErrorModal';
 export * from './AvailableP2PBalanceModal';
 export * from './BlockUnblockUserModal';
+export * from './BlockUserCountModal';
 export * from './DailyLimitModal';
 export * from './EmailLinkBlockedModal';
 export * from './EmailLinkExpiredModal';

src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.scss

@@ -12,6 +12,11 @@
         .deriv-dropdown {
             width: 3.2rem;
 
+            & .deriv-dropdown__button {
+                transform: none;
+                transition: none;
+            }
+
             &__items {
                 width: 12.8rem;
                 border: 0;

src/components/PaymentMethodForm/PaymentMethodForm.scss

@@ -78,7 +78,7 @@
 
         @include mobile {
             overflow: auto;
-            height: calc(100vh - 14rem);
+            height: calc(100vh - 12rem);
             padding-bottom: 8rem;
         }
     }
@@ -112,6 +112,9 @@
             }
 
             & .deriv-dropdown {
+                & .deriv-dropdown__items {
+                    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.24);
+                }
                 & .deriv-input {
                     height: 4rem;
                     align-items: center;