[FEQ] / Ameerul / FEQ-1399 create adverts list (deriv-com#13391)

* feat: added buy-sell adverts list desktop

* chore: added responsive styling for buy sell table

* chore: added new component, fixed styles and testcases

* chore: added test cases

* fix: eslint errors

* chore: empty commit

* build: updated quill-icons to the latest version

* chore: empty commit

* chore: replaced @apply with scss

---------

Co-authored-by: Niloofar <niloofar.sadeghi@regentmarkets.com>

packages/account-v2/package.json

@@ -15,7 +15,7 @@
         "@deriv/api": "^1.0.0",
         "@deriv/library": "^1.0.0",
         "@deriv/quill-design": "^1.3.2",
-        "@deriv/quill-icons": "^1.17.4",
+        "@deriv/quill-icons": "^1.17.25",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
         "formik": "^2.1.4",

packages/cashier-v2/package.json

@@ -16,7 +16,7 @@
         "@deriv/api": "^1.0.0",
         "@deriv/integration": "^1.0.0",
         "@deriv/library": "^1.0.0",
-        "@deriv/quill-icons": "^1.17.4",
+        "@deriv/quill-icons": "^1.17.25",
         "@deriv/utils": "^1.0.0",
         "clsx": "^2.0.0",
         "formik": "^2.1.4",

packages/library/package.json

@@ -5,7 +5,7 @@
     "main": "src/index.ts",
     "dependencies": {
         "@deriv/quill-design": "^1.3.2",
-        "@deriv/quill-icons": "^1.17.4",
+        "@deriv/quill-icons": "^1.17.25",
         "react": "^17.0.2",
         "usehooks-ts": "^2.7.0",
         "@deriv/api": "^1.0.0",

packages/p2p-v2/package.json

@@ -15,7 +15,7 @@
         "@deriv-com/ui": "1.3.1",
         "@deriv/api": "^1.0.0",
         "@deriv/integration": "^1.0.0",
-        "@deriv/quill-icons": "^1.17.4",
+        "@deriv/quill-icons": "^1.17.25",
         "@deriv/react-joyride": "^2.6.2",
         "@sendbird/chat": "^4.9.7",
         "@tanstack/react-table": "^8.10.3",

packages/p2p-v2/src/components/Badge/Badge.scss

@@ -8,6 +8,18 @@
     border-radius: 3.4rem;
     color: #ffffff;
 
+    &--general {
+        background-image: linear-gradient(#e6e9e9, #f2f3f4);
+    }
+
+    &--gold {
+        background: linear-gradient(90deg, #f7931a 0%, #ffc71b 104.41%);
+    }
+
+    &--green {
+        background: linear-gradient(90deg, #1db193 0%, #09da7a 104.41%);
+    }
+
     &--success {
         background-image: linear-gradient(#00a8af, #04cfd8);
     }
@@ -16,10 +28,6 @@
         background-image: linear-gradient(#f7931a, #ffc71b);
     }
 
-    &--general {
-        background-image: linear-gradient(#e6e9e9, #f2f3f4);
-    }
-
     &__label {
         font-size: 1rem;
         line-height: 1.4rem;

packages/p2p-v2/src/components/Badge/Badge.tsx

@@ -4,18 +4,33 @@ import { Text } from '@deriv-com/ui';
 import './Badge.scss';
 
 type TBadgeProps = {
-    label: string;
-    status: string;
-    variant: 'general' | 'success' | 'warning';
+    label?: string;
+    status?: string;
+    tradeCount?: number | undefined;
+    variant?: 'general' | 'success' | 'warning';
 };
 
-const Badge = ({ label, status, variant }: TBadgeProps) => {
+const Badge = ({ label, status, tradeCount, variant }: TBadgeProps) => {
+    if (tradeCount) {
+        return (
+            <div
+                className={clsx('p2p-v2-badge', {
+                    'p2p-v2-badge--gold': tradeCount >= 100 && tradeCount < 250,
+                    'p2p-v2-badge--green': tradeCount >= 250,
+                })}
+            >
+                <Text className='p2p-v2-badge__label' color='white' weight='bold'>
+                    {`${tradeCount >= 250 ? '250+' : '100+'}`}
+                </Text>
+            </div>
+        );
+    }
     return (
         <div
             className={clsx('p2p-v2-badge', {
+                'p2p-v2-badge--general': variant === 'general',
                 'p2p-v2-badge--success': variant === 'success',
                 'p2p-v2-badge--warning': variant === 'warning',
-                'p2p-v2-badge--general': variant === 'general',
             })}
         >
             <Text className='p2p-v2-badge__label' color='white' weight='bold'>

packages/p2p-v2/src/components/OnlineStatus/OnlineStatus.scss

@@ -0,0 +1,18 @@
+.p2p-v2-online-status {
+    &__icon {
+        position: absolute;
+        bottom: -0.05px;
+        right: -0.08px;
+        margin: 0;
+        border-radius: 50%;
+        transform: scale(1.1);
+
+        &--online {
+            background: #4bb4b3;
+        }
+
+        &--offline {
+            background: #999;
+        }
+    }
+}

packages/p2p-v2/src/components/OnlineStatus/OnlineStatusIcon.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import clsx from 'clsx';
+
+type TOnlineStatusIconProps = {
+    isOnline: boolean;
+    size?: number | string;
+};
+
+const OnlineStatusIcon = ({ isOnline, size = '1em' }: TOnlineStatusIconProps) => {
+    return (
+        <div
+            className={clsx('p2p-v2-online-status__icon', {
+                'p2p-v2-online-status__icon--offline': !isOnline,
+                'p2p-v2-online-status__icon--online': !!isOnline,
+            })}
+            data-testid='dt_p2p_v2_online_status_icon'
+            style={{
+                height: size,
+                width: size,
+            }}
+        />
+    );
+};
+
+export default OnlineStatusIcon;

packages/p2p-v2/src/components/OnlineStatus/OnlineStatusLabel.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { getLastOnlineLabel } from '@/utils';
+import { Text, useDevice } from '@deriv-com/ui';
+
+type TOnlineStatusLabelProps = {
+    isOnline: 0 | 1;
+    lastOnlineTime: number;
+};
+
+const OnlineStatusLabel = ({ isOnline, lastOnlineTime }: TOnlineStatusLabelProps) => {
+    const { isMobile } = useDevice();
+    const size = isMobile ? 'xs' : 'sm';
+
+    return (
+        <Text color='less-prominent' size={size}>
+            {getLastOnlineLabel(isOnline, lastOnlineTime)}
+        </Text>
+    );
+};
+
+export default OnlineStatusLabel;

packages/p2p-v2/src/components/OnlineStatus/__tests__/OnlineStatusIcon.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import OnlineStatusIcon from '../OnlineStatusIcon';
+
+describe('<OnlineStatusIcon/>', () => {
+    it('should render the default state as offline', () => {
+        render(<OnlineStatusIcon isOnline={false} />);
+
+        const icon = screen.getByTestId('dt_p2p_v2_online_status_icon');
+        expect(icon).toHaveClass('p2p-v2-online-status__icon--offline');
+    });
+
+    it('should render online state when user is online', () => {
+        render(<OnlineStatusIcon isOnline />);
+
+        const icon = screen.getByTestId('dt_p2p_v2_online_status_icon');
+        expect(icon).toHaveClass('p2p-v2-online-status__icon--online');
+    });
+});

packages/p2p-v2/src/components/OnlineStatus/__tests__/OnlineStatusLabel.spec.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { getLastOnlineLabel } from '@/utils';
+import { render, screen } from '@testing-library/react';
+import OnlineStatusLabel from '../OnlineStatusLabel';
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn().mockReturnValue({
+        isMobile: false,
+    }),
+}));
+
+jest.mock('@/utils', () => ({
+    ...jest.requireActual('@/utils'),
+    getLastOnlineLabel: jest.fn().mockReturnValue('Seen 2 days ago'),
+}));
+
+describe('<OnlineStatusLabel/>', () => {
+    it('should call the getLastOnlineLabel function with isOnline and lastOnlineTime', () => {
+        render(<OnlineStatusLabel isOnline={0} lastOnlineTime={1685446791} />);
+        expect(getLastOnlineLabel).toHaveBeenCalledWith(0, 1685446791);
+        expect(screen.getByText('Seen 2 days ago')).toBeInTheDocument();
+    });
+});

packages/p2p-v2/src/components/OnlineStatus/index.ts

@@ -0,0 +1,5 @@
+import OnlineStatusIcon from './OnlineStatusIcon';
+import OnlineStatusLabel from './OnlineStatusLabel';
+import './OnlineStatus.scss';
+
+export { OnlineStatusIcon, OnlineStatusLabel };

packages/p2p-v2/src/components/PaymentMethodLabel/PaymentMethodLabel.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text } from '@deriv-com/ui';
+
+type TPaymentMethodLabelProps = {
+    color?: string;
+    paymentMethodName: string;
+    size?: string;
+};
+
+const PaymentMethodLabel = ({ color = 'general', paymentMethodName, size = 'sm' }: TPaymentMethodLabelProps) => {
+    return (
+        <Text className='border-solid border-[1px] border-[#D6DADB] rounded-lg px-[8px] py-1' color={color} size={size}>
+            {paymentMethodName}
+        </Text>
+    );
+};
+
+export default PaymentMethodLabel;

packages/p2p-v2/src/components/PaymentMethodLabel/index.ts

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

packages/p2p-v2/src/components/StarRating/StarRating.tsx

@@ -8,10 +8,16 @@ type TStarRatingProps = {
     isReadonly?: boolean;
     onClick?: () => void;
     ratingValue: number;
-    size?: number;
+    starsScale?: number;
 };
 
-const StarRating = ({ initialValue = 0, isReadonly = false, onClick, ratingValue }: TStarRatingProps) => {
+const StarRating = ({
+    initialValue = 0,
+    isReadonly = false,
+    onClick,
+    ratingValue,
+    starsScale = 1,
+}: TStarRatingProps) => {
     // Converts initial value to be in the form of x.0 or x.5
     // to show full and half stars only
     const fractionalizedValue = Math.round(initialValue * 2) / 2;
@@ -29,6 +35,7 @@ const StarRating = ({ initialValue = 0, isReadonly = false, onClick, ratingValue
             ratingValue={fractionalizedValue}
             readonly={isReadonly}
             size={12}
+            style={{ transform: `scale(${starsScale})` }}
         />
     );
 };

packages/p2p-v2/src/components/Table/Table.tsx

@@ -1,8 +1,8 @@
 import React, { memo, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { ColumnDef, getCoreRowModel, getGroupedRowModel, GroupingState, useReactTable } from '@tanstack/react-table';
+import { useDevice, useFetchMore } from '@/hooks';
 import { Text } from '@deriv-com/ui';
-import { useFetchMore, useDevice } from '@/hooks';
+import { ColumnDef, getCoreRowModel, getGroupedRowModel, GroupingState, useReactTable } from '@tanstack/react-table';
 import './Table.scss';
 
 type TProps<T> = {
@@ -45,9 +45,9 @@ const Table = <T,>({
     }, [headerRef?.current]);
 
     const { fetchMoreOnBottomReached } = useFetchMore({
+        isFetching,
         loadMore: loadMoreFunction,
         ref: tableContainerRef,
-        isFetching,
     });
 
     return (

packages/p2p-v2/src/components/UserAvatar/UserAvatar.scss

@@ -1,11 +1,13 @@
 .p2p-v2-user-avatar {
-    align-items: center;
-    background-color: #ff444f;
-    border-radius: 50%;
+    position: relative;
     display: flex;
+    flex-direction: column;
+    align-items: center;
     justify-content: center;
+    width: fit-content;
+    height: fit-content;
 
     &__short-nickname {
-        color: #fff;
+        position: absolute;
     }
 }