diff --git a/src/components/AwarenessBanner/AwarenessBanner.scss b/src/components/AwarenessBanner/AwarenessBanner.scss
new file mode 100644
index 00000000..fa54b965
--- /dev/null
+++ b/src/components/AwarenessBanner/AwarenessBanner.scss
@@ -0,0 +1,9 @@
+.awareness-banner {
+ margin-top: 16px;
+
+ @include mobile {
+ margin-left: 16px;
+ margin-right: 16px;
+ width: calc(100% - 32px);
+ }
+}
diff --git a/src/components/AwarenessBanner/AwarenessBanner.tsx b/src/components/AwarenessBanner/AwarenessBanner.tsx
new file mode 100644
index 00000000..41afb467
--- /dev/null
+++ b/src/components/AwarenessBanner/AwarenessBanner.tsx
@@ -0,0 +1,20 @@
+import { Localize } from '@deriv-com/translations';
+import { InlineMessage, Text, useDevice } from '@deriv-com/ui';
+import './AwarenessBanner.scss';
+
+const AwarenessBanner = () => {
+ const { isDesktop } = useDevice();
+
+ return (
+
+
+ ]}
+ i18n_default_text='<0>Stay safe:0> Never share login details or verification codes. Check URLs and contact us only via live chat.'
+ />
+
+
+ );
+};
+
+export default AwarenessBanner;
diff --git a/src/components/AwarenessBanner/__tests__/AwarenessBanner.spec.tsx b/src/components/AwarenessBanner/__tests__/AwarenessBanner.spec.tsx
new file mode 100644
index 00000000..e46b7619
--- /dev/null
+++ b/src/components/AwarenessBanner/__tests__/AwarenessBanner.spec.tsx
@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import AwarenessBanner from '../AwarenessBanner';
+
+jest.mock('@deriv-com/ui', () => ({
+ ...jest.requireActual('@deriv-com/ui'),
+ useDevice: jest.fn(() => ({
+ isMobile: false,
+ })),
+}));
+
+describe('PNVBanner', () => {
+ it('should render the proper message', async () => {
+ render();
+
+ expect(
+ screen.getByText(
+ /Never share login details or verification codes. Check URLs and contact us only via live chat./i
+ )
+ ).toBeInTheDocument();
+ });
+});
diff --git a/src/components/AwarenessBanner/index.ts b/src/components/AwarenessBanner/index.ts
new file mode 100644
index 00000000..1d04ad09
--- /dev/null
+++ b/src/components/AwarenessBanner/index.ts
@@ -0,0 +1 @@
+export { default as AwarenessBanner } from './AwarenessBanner';
diff --git a/src/components/BuySellForm/BuySellForm.scss b/src/components/BuySellForm/BuySellForm.scss
index a3fd5f21..bbf9105d 100644
--- a/src/components/BuySellForm/BuySellForm.scss
+++ b/src/components/BuySellForm/BuySellForm.scss
@@ -39,7 +39,7 @@
z-index: 1;
&--is-buy {
- top: -4rem;
+ top: -10rem;
}
& .payment-method-form {
diff --git a/src/components/Modals/FilterModal/FilterModal.scss b/src/components/Modals/FilterModal/FilterModal.scss
index a486e309..836b1d02 100644
--- a/src/components/Modals/FilterModal/FilterModal.scss
+++ b/src/components/Modals/FilterModal/FilterModal.scss
@@ -5,7 +5,7 @@
@include mobile-or-tablet-screen {
position: absolute;
- top: -4rem;
+ top: -10rem;
z-index: 1;
height: calc(100vh - 8rem);
width: 100%;
@@ -16,9 +16,11 @@
transform: rotate(180deg);
}
}
+
& .mobile-wrapper {
&__header {
gap: 0;
+
span {
margin: 0 auto;
}
diff --git a/src/components/index.ts b/src/components/index.ts
index 12963989..12976d14 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -2,6 +2,7 @@ export * from './AdvertiserName';
export * from './AdvertsTableRow';
export * from './AppFooter';
export * from './AppHeader';
+export * from './AwarenessBanner';
export * from './Badge';
export * from './BuySellForm';
export * from './Checklist';
diff --git a/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.scss b/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.scss
index c09255ea..7901881d 100644
--- a/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.scss
+++ b/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.scss
@@ -43,7 +43,7 @@
&__full-page-modal {
position: absolute;
- top: -4rem;
+ top: -10rem;
left: 0;
z-index: 1;
height: calc(100vh - 5rem);
diff --git a/src/pages/buy-sell/screens/BuySell/BuySell.tsx b/src/pages/buy-sell/screens/BuySell/BuySell.tsx
index 54b81786..dc7bc065 100644
--- a/src/pages/buy-sell/screens/BuySell/BuySell.tsx
+++ b/src/pages/buy-sell/screens/BuySell/BuySell.tsx
@@ -1,6 +1,13 @@
import clsx from 'clsx';
import { useHistory, useLocation } from 'react-router-dom';
-import { OutsideBusinessHoursHint, PageReturn, PNVBanner, TemporarilyBarredHint, Verification } from '@/components';
+import {
+ AwarenessBanner,
+ OutsideBusinessHoursHint,
+ PageReturn,
+ PNVBanner,
+ TemporarilyBarredHint,
+ Verification,
+} from '@/components';
import { BUY_SELL_URL } from '@/constants';
import {
useGetBusinessHours,
@@ -50,6 +57,7 @@ const BuySell = () => {
{isAdvertiserBarred && }
{!isScheduleAvailable && !isAdvertiserBarred && }
{isAdvertiser && shouldShowVerification && }
+
);
diff --git a/src/pages/buy-sell/screens/BuySell/__tests__/BuySell.spec.tsx b/src/pages/buy-sell/screens/BuySell/__tests__/BuySell.spec.tsx
index e4dd000a..8232ce1d 100644
--- a/src/pages/buy-sell/screens/BuySell/__tests__/BuySell.spec.tsx
+++ b/src/pages/buy-sell/screens/BuySell/__tests__/BuySell.spec.tsx
@@ -32,6 +32,11 @@ jest.mock('@/hooks/custom-hooks', () => ({
useIsAdvertiserBarred: jest.fn().mockReturnValue(false),
}));
+jest.mock('@deriv-com/ui', () => ({
+ ...jest.requireActual('@deriv-com/ui'),
+ useDevice: jest.fn(() => ({ isDesktop: true })),
+}));
+
jest.mock('../../BuySellTable/BuySellTable', () => jest.fn(() =>
BuySellTable
));
const mockUseLocation = useLocation as jest.MockedFunction;
diff --git a/src/pages/my-ads/components/AdFormTextArea/AdFormTextArea.tsx b/src/pages/my-ads/components/AdFormTextArea/AdFormTextArea.tsx
index 275ee24b..675876aa 100644
--- a/src/pages/my-ads/components/AdFormTextArea/AdFormTextArea.tsx
+++ b/src/pages/my-ads/components/AdFormTextArea/AdFormTextArea.tsx
@@ -1,3 +1,5 @@
+import { ChangeEvent } from 'react';
+import clsx from 'clsx';
import { Controller, useFormContext } from 'react-hook-form';
import { VALID_SYMBOLS_PATTERN } from '@/constants';
import { getTextFieldError } from '@/utils';
@@ -5,14 +7,26 @@ import { useTranslations } from '@deriv-com/translations';
import { TextArea } from '@deriv-com/ui';
import './AdFormTextArea.scss';
+export type TChangeEvent = (e: ChangeEvent) => void;
+
type TAdFormTextAreaProps = {
+ className?: string;
field: string;
hint?: string;
label: string;
name: string;
+ onFieldChange?: TChangeEvent;
required?: boolean;
};
-const AdFormTextArea = ({ field, hint = '', label, name, required = false }: TAdFormTextAreaProps) => {
+const AdFormTextArea = ({
+ className,
+ field,
+ hint = '',
+ label,
+ name,
+ onFieldChange,
+ required = false,
+}: TAdFormTextAreaProps) => {
const { control } = useFormContext();
const { localize } = useTranslations();
return (
@@ -20,14 +34,18 @@ const AdFormTextArea = ({ field, hint = '', label, name, required = false }: TAd
control={control}
name={name}
render={({ field: { onBlur, onChange, value }, fieldState: { error } }) => (
-