fix: conflicts

package.json

@@ -96,7 +96,7 @@
     },
     "dependencies": {
         "@babel/preset-typescript": "^7.24.7",
-        "@deriv-com/analytics": "1.14.0",
+        "@deriv-com/analytics": "1.25.1",
         "@sendbird/chat": "^4.9.7",
         "@types/react-transition-group": "^4.4.4",
         "babel-jest": "^29.7.0",

packages/account/build/webpack.config.js

@@ -16,7 +16,6 @@ module.exports = function (env) {
             'financial-details-config': 'Configs/financial-details-config',
             'get-status-badge-config': 'Configs/get-status-badge-config',
             'personal-details-config': 'Configs/personal-details-config',
-            'poi-poa-docs-submitted': 'Components/poi-poa-docs-submitted/poi-poa-docs-submitted',
             'risk-tolerance-warning-modal': 'Components/trading-assessment/risk-tolerance-warning-modal',
             'sent-email-modal': 'Components/sent-email-modal',
             'terms-of-use-config': 'Configs/terms-of-use-config',

packages/account/package.json

@@ -30,7 +30,7 @@
     },
     "dependencies": {
         "@binary-com/binary-document-uploader": "^2.4.8",
-        "@deriv-com/analytics": "1.14.0",
+        "@deriv-com/analytics": "1.25.1",
         "@deriv-com/translations": "1.3.9",
         "@deriv-com/utils": "^0.0.36",
         "@deriv-com/ui": "1.36.4",

packages/account/src/Components/account-limits/__tests__/account-limits.spec.tsx

@@ -349,71 +349,6 @@ describe('<AccountLimits/>', () => {
         expect(screen.getByTestId('withdrawal_limits_table')).toHaveTextContent('Limit');
     });
 
-    it('show show withdrawal limit lifted message if is_fully_authenticated is true', () => {
-        render(
-            <StoreProvider store={store}>
-                <AccountLimits {...props} />
-            </StoreProvider>
-        );
-
-        expect(
-            screen.getByText(/your account is fully authenticated and your withdrawal limits have been lifted\./i)
-        ).toBeInTheDocument();
-    });
-
-    it('withdrawal_limits_table should show `Total withdrawal allowed` when is_fully_authenticated is false', () => {
-        store = mockStore({
-            client: {
-                ...mock.client,
-                is_fully_authenticated: false,
-            },
-        });
-        render(
-            <StoreProvider store={store}>
-                <AccountLimits {...props} />
-            </StoreProvider>
-        );
-        expect(screen.getByText(/total withdrawal allowed/i)).toBeInTheDocument();
-    });
-
-    it('should show limit_notice message when is_fully_authenticated is false in responsive mode', () => {
-        store = mockStore({
-            client: {
-                ...mock.client,
-                is_fully_authenticated: false,
-            },
-        });
-        (useDevice as jest.Mock).mockReturnValueOnce({ isDesktop: false });
-        render(
-            <BrowserRouter>
-                <StoreProvider store={store}>
-                    <AccountLimits {...props} />
-                </StoreProvider>
-            </BrowserRouter>
-        );
-        expect(screen.getByText(/stated limits are subject to change without prior notice\./i)).toBeInTheDocument();
-    });
-
-    it('should not  show limit_notice message when is_fully_authenticated is false', () => {
-        store = mockStore({
-            client: {
-                ...mock.client,
-                is_fully_authenticated: false,
-            },
-        });
-        (useDevice as jest.Mock).mockReturnValueOnce({ isDesktop: true });
-        render(
-            <BrowserRouter>
-                <StoreProvider store={store}>
-                    <AccountLimits {...props} is_app_settings={false} />
-                </StoreProvider>
-            </BrowserRouter>
-        );
-        expect(
-            screen.queryByText(/your account is fully authenticated and your withdrawal limits have been lifted\./i)
-        ).not.toBeInTheDocument();
-    });
-
     it('should show AccountLimitsArticle when should_show_article and isDesktop is true', () => {
         store = mockStore(mock);
         (useDevice as jest.Mock).mockReturnValueOnce({ isDesktop: true });

packages/account/src/Components/account-limits/__tests__/withdrawal-limits-table.spec.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import WithdrawalLimitsTable from '../withdrawal-limits-table';
+import { mockStore, StoreProvider } from '@deriv/stores';
+import { useGetWithdrawalLimitsDetails } from '@deriv/hooks';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('@deriv/hooks', () => ({
+    useGetWithdrawalLimitsDetails: jest.fn(),
+}));
+
+describe('WithdrawalLimitsTable', () => {
+    const store = mockStore({});
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const renderComponent = () =>
+        render(
+            <StoreProvider store={store}>
+                <WithdrawalLimitsTable />
+            </StoreProvider>
+        );
+
+    const constant_title = ['Withdrawal limits', 'Limit (USD)'];
+
+    it('should renders the withdrawal limits table correctly', () => {
+        (useGetWithdrawalLimitsDetails as jest.Mock).mockReturnValue({
+            withdrawal_limit_details: [
+                {
+                    withdrawal_title: 'Lifetime limit',
+                    withdrawal_info_message: 'Lifetime limit info',
+                    withdrawal_amount: 10000,
+                },
+                {
+                    withdrawal_title: '30-day limit',
+                    withdrawal_info_message: '30-day limit info',
+                    withdrawal_amount: 5000,
+                },
+            ],
+        });
+
+        renderComponent();
+
+        constant_title.map(title => expect(screen.getByText(title)).toBeInTheDocument());
+
+        expect(screen.getByText(/Lifetime limit/)).toBeInTheDocument();
+        expect(screen.getByText(/10,000/)).toBeInTheDocument();
+
+        expect(screen.getByText(/30-day limit/)).toBeInTheDocument();
+        expect(screen.getByText(/5,000/)).toBeInTheDocument();
+    });
+
+    it('should render withdrawal_info_message on mouse hover on the info icon', () => {
+        (useGetWithdrawalLimitsDetails as jest.Mock).mockReturnValue({
+            withdrawal_limit_details: [
+                {
+                    withdrawal_title: 'Lifetime limit',
+                    withdrawal_info_message: 'Lifetime limit info',
+                    withdrawal_amount: 10000,
+                },
+            ],
+        });
+
+        renderComponent();
+        expect(screen.queryByText(/Lifetime limit info/)).not.toBeInTheDocument();
+        const pop_over_icon = screen.getByTestId('dt_popover_wrapper');
+        userEvent.hover(pop_over_icon);
+        expect(screen.queryByText(/Lifetime limit info/)).toBeInTheDocument();
+    });
+
+    it('should not render any value if withdrawal_limit_details is empty', () => {
+        (useGetWithdrawalLimitsDetails as jest.Mock).mockReturnValue({
+            withdrawal_limit_details: [],
+        });
+
+        renderComponent();
+
+        constant_title.map(title => expect(screen.getByText(title)).toBeInTheDocument());
+
+        expect(screen.queryByText(/Lifetime limit/)).not.toBeInTheDocument();
+        expect(screen.queryByText(/10,000/)).not.toBeInTheDocument();
+
+        expect(screen.queryByText(/30-day limit/)).not.toBeInTheDocument();
+        expect(screen.queryByText(/5,000/)).not.toBeInTheDocument();
+    });
+});

packages/account/src/Components/account-limits/account-limits-extra-info.tsx

@@ -3,12 +3,17 @@ import { useDevice } from '@deriv-com/ui';
 
 type TAccountLimitsExtraInfo = {
     message: string;
+    should_display_in_info_tooltip?: boolean;
     className?: string;
 };
 
-const AccountLimitsExtraInfo = ({ message, ...props }: TAccountLimitsExtraInfo) => {
+const AccountLimitsExtraInfo = ({
+    message,
+    should_display_in_info_tooltip = false,
+    ...props
+}: TAccountLimitsExtraInfo) => {
     const { isDesktop } = useDevice();
-    if (!isDesktop) {
+    if (!isDesktop && !should_display_in_info_tooltip) {
         return (
             <Text color='less-prominent' line_height='s' size='xxxs'>
                 {message}
@@ -19,7 +24,7 @@ const AccountLimitsExtraInfo = ({ message, ...props }: TAccountLimitsExtraInfo)
     return (
         <Popover
             data_testid='dt_acc_limits_popover'
-            alignment='right'
+            alignment={isDesktop ? 'right' : 'top'}
             className='da-account-limits__popover'
             icon='info'
             is_bubble_hover_enabled

packages/account/src/Components/account-limits/account-limits-table-cell.tsx

@@ -6,6 +6,7 @@ type TAccountLimitsTableCell = {
     align: 'right' | 'left';
     is_hint: boolean;
     level: string;
+    className?: string;
     renderExtraInfo: () => ReactElement;
 };
 
@@ -15,12 +16,13 @@ const AccountLimitsTableCell = ({
     is_hint,
     level,
     renderExtraInfo,
+    className,
 }: PropsWithChildren<Partial<TAccountLimitsTableCell>>) => {
     const text_size = is_hint ? 'xxxs' : 'xxs';
 
     return (
         <td
-            className={clsx('da-account-limits__table-cell', {
+            className={clsx('da-account-limits__table-cell', className, {
                 'da-account-limits__table-cell--left': align !== 'right',
                 'da-account-limits__table-cell--right': align === 'right',
                 'da-account-limits__table-cell--submarket': level === 'submarket',

packages/account/src/Components/account-limits/account-limits.scss

@@ -55,6 +55,11 @@
             &--submarket {
                 padding-left: 1rem;
             }
+            &--withdrawal-limit {
+                @include mobile-or-tablet-screen {
+                    flex-direction: row;
+                }
+            }
         }
 
         &-wrapper {
@@ -70,10 +75,6 @@
         }
     }
 
-    &__text-container {
-        margin: 1.2rem 1.2rem 1.2rem 0;
-    }
-
     &__popover {
         margin-inline-start: 0.8rem;
     }

packages/account/src/Components/account-limits/account-limits.tsx

@@ -237,13 +237,7 @@ const AccountLimits = observer(
                                 </table>
                                 {/* We only show "Withdrawal Limits" on account-wide settings pages. */}
 
-                                {!is_app_settings && (
-                                    <WithdrawalLimitsTable
-                                        num_of_days_limit={num_of_days_limit}
-                                        remainder={remainder}
-                                        withdrawal_since_inception_monetary={withdrawal_since_inception_monetary}
-                                    />
-                                )}
+                                {!is_app_settings && <WithdrawalLimitsTable />}
                             </ThemedScrollbars>
                         </div>
                         {should_show_article && isDesktop && <AccountLimitsArticle />}