Merge branch 'master' into evgeniy-wall-376/likhith-wall-379/verifica…

…tion_ux_improvement_with_example

.github/workflows/stale.yml

@@ -0,0 +1,18 @@
+permissions:
+  issues: write
+  pull-requests: write
+
+name: 'Close stale issues and PRs'
+on:
+  schedule:
+    - cron: '30 1 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v8
+        with:
+          stale-issue-message: 'This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 5 days.'
+          days-before-stale: 60
+          days-before-close: 5

packages/cashier/src/components/alert-banner/__tests__/alert-banner.spec.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import AlertBanner from '../alert-banner';
+
+describe('<AlertBanner />', () => {
+    it('should render the icon and message props passed for the banner', () => {
+        const props: React.ComponentProps<typeof AlertBanner> = {
+            icon: 'IcAlertWarningDark',
+            message: 'Alert banner test message.',
+        };
+        render(<AlertBanner {...props} />);
+        const dt_alert_banner_icon = screen.getByTestId('dt_alert_banner_icon');
+        expect(dt_alert_banner_icon).toBeInTheDocument();
+        expect(screen.getByText(props.message)).toBeInTheDocument();
+    });
+});

packages/cashier/src/components/alert-banner/alert-banner.scss

@@ -0,0 +1,13 @@
+.alert-banner {
+    display: grid;
+    grid-template-columns: auto auto;
+    width: auto;
+    padding: 0.8rem;
+    margin: 2.4rem 0;
+    border-radius: $BORDER_RADIUS;
+    background-color: $alpha-color-yellow-1;
+
+    svg {
+        margin: 0.3rem 0.3rem 0 0;
+    }
+}

packages/cashier/src/components/alert-banner/alert-banner.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Icon, Text } from '@deriv/components';
+import './alert-banner.scss';
+
+type TAlertBanner = {
+    className?: string;
+    icon: string;
+    message: string;
+};
+
+const AlertBanner = ({ className, icon, message }: TAlertBanner) => {
+    return (
+        <div className={classNames('alert-banner', className)}>
+            <Icon size={16} icon={icon} data_testid='dt_alert_banner_icon' />
+            <Text as='p' align='center' size='xs'>
+                {message}
+            </Text>
+        </div>
+    );
+};
+
+export default AlertBanner;

packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { isMobile } from '@deriv/shared';
 import CryptoTransactionsRenderer from '../crypto-transactions-renderer';
 import CashierProviders from '../../../cashier-providers';
@@ -135,4 +136,68 @@ describe('<CryptoTransactionsRenderer />', () => {
             mockRootStore.modules.cashier.transaction_history.showCryptoTransactionsCancelModal
         ).toHaveBeenCalledTimes(1);
     });
+
+    it('should display popover when hovering on tooltip for third-party transactions (CoinsPaid)', () => {
+        (isMobile as jest.Mock).mockReturnValue(false);
+        const tooltip_props = {
+            row: {
+                address_hash: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt',
+                address_url: 'https://explorer.coinspaid.com/CP:Abcd1234',
+                amount: 0.005,
+                id: '3',
+                is_valid_to_cancel: 1,
+                status_code: 'LOCKED',
+                status_message:
+                    "We're reviewing your withdrawal request. You may still cancel this transaction if you wish. Once we start processing, you won't be able to cancel.",
+                submit_date: 1640603927,
+                transaction_type: 'withdrawal',
+                transaction_url: 'CP:Abcd1234',
+            },
+        };
+
+        render(<CryptoTransactionsRenderer {...tooltip_props} />, {
+            wrapper: ({ children }) => <CashierProviders store={mockRootStore}>{children}</CashierProviders>,
+        });
+
+        const crypto_transactions_history_table_tooltip = screen.getByTestId(
+            'dt_crypto_transactions_history_table_tooltip'
+        );
+
+        expect(crypto_transactions_history_table_tooltip).toBeInTheDocument();
+
+        userEvent.hover(crypto_transactions_history_table_tooltip);
+        expect(screen.getByText('The details of this transaction is available on CoinsPaid.')).toBeInTheDocument();
+        userEvent.unhover(crypto_transactions_history_table_tooltip);
+    });
+
+    it('should check whether the tooltip is clickable for third-party transactions (CoinsPaid)', () => {
+        (isMobile as jest.Mock).mockReturnValue(true);
+        const tooltip_props = {
+            row: {
+                address_hash: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt',
+                address_url: 'https://explorer.coinspaid.com/CP:Abcd1234',
+                amount: 0.005,
+                id: '3',
+                is_valid_to_cancel: 1,
+                status_code: 'LOCKED',
+                status_message:
+                    "We're reviewing your withdrawal request. You may still cancel this transaction if you wish. Once we start processing, you won't be able to cancel.",
+                submit_date: 1640603927,
+                transaction_type: 'withdrawal',
+                transaction_url: 'CP:Abcd1234',
+            },
+            onTooltipClick: jest.fn(),
+        };
+
+        render(<CryptoTransactionsRenderer {...tooltip_props} />, {
+            wrapper: ({ children }) => <CashierProviders store={mockRootStore}>{children}</CashierProviders>,
+        });
+
+        const crypto_transactions_history_table_tooltip_mobile = screen.getByTestId(
+            'dt_crypto_transactions_history_table_tooltip_mobile'
+        );
+
+        expect(crypto_transactions_history_table_tooltip_mobile).toBeInTheDocument();
+        fireEvent.click(crypto_transactions_history_table_tooltip_mobile);
+    });
 });