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: 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 } }) => ( -
+