diff --git a/packages/cashier/src/components/cashier-container/real/__tests__/real.spec.tsx b/packages/cashier/src/components/cashier-container/real/__tests__/real.spec.tsx index 54a581ea884f..6d21638efa88 100644 --- a/packages/cashier/src/components/cashier-container/real/__tests__/real.spec.tsx +++ b/packages/cashier/src/components/cashier-container/real/__tests__/real.spec.tsx @@ -73,7 +73,7 @@ describe('', () => { expect(screen.queryByTestId('dt_doughflow_section')).toBeInTheDocument(); }); - it('should trigger setIsDeposit callback when the user clicks on Cashier breadcrumb', () => { + it('should trigger setIsDeposit callback when the user clicks on Cashier breadcrumb', async () => { render( @@ -83,8 +83,22 @@ describe('', () => { const el_breadcrumb_cashier = screen.queryByText(/cashier/i); if (el_breadcrumb_cashier) { - userEvent.click(el_breadcrumb_cashier); + await userEvent.click(el_breadcrumb_cashier); expect(mocked_cashier_store.general_store?.setIsDeposit).toHaveBeenCalledWith(false); } }); + + it('should render inline message with StaticUrl', () => { + render( + + + + ); + + expect(screen.getByText(/Withdraw using the same payment method you used to deposit/i)).toBeInTheDocument(); + + const link = screen.getByRole('link', { name: /available payment methods/i }); + expect(link).toBeInTheDocument(); + expect(link).toHaveAttribute('href', expect.stringContaining('/payment-methods')); + }); }); diff --git a/packages/cashier/src/components/cashier-container/real/real.scss b/packages/cashier/src/components/cashier-container/real/real.scss index 3bfb8a46406a..c921681592a2 100644 --- a/packages/cashier/src/components/cashier-container/real/real.scss +++ b/packages/cashier/src/components/cashier-container/real/real.scss @@ -8,6 +8,7 @@ height: calc(100% - 6rem); inset-inline-end: 0; padding: 0 1.6rem; + top: 9rem; + .page-container__sidebar--right { position: relative; @@ -17,6 +18,12 @@ } } } + + &__inline-message-link { + text-decoration: underline; + cursor: pointer; + } + &__loader { width: 100%; height: 80vh; diff --git a/packages/cashier/src/components/cashier-container/real/real.tsx b/packages/cashier/src/components/cashier-container/real/real.tsx index e1e91acb67f2..dd445e63c008 100644 --- a/packages/cashier/src/components/cashier-container/real/real.tsx +++ b/packages/cashier/src/components/cashier-container/real/real.tsx @@ -1,7 +1,11 @@ import React from 'react'; -import { Loading } from '@deriv/components'; -import { useStore, observer } from '@deriv/stores'; + +import { InlineMessage, Loading, StaticUrl, Text } from '@deriv/components'; +import { observer, useStore } from '@deriv/stores'; +import { Localize } from '@deriv/translations'; + import { useCashierStore } from '../../../stores/useCashierStores'; + import './real.scss'; const Real = observer(() => { @@ -28,14 +32,33 @@ const Real = observer(() => { {should_show_loader && } {iframe_url && ( -