farrah/feat: awareness banner

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);
+    }
+}

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 (
+        <InlineMessage className='awareness-banner' iconPosition={isDesktop ? 'center' : 'top'} variant='warning'>
+            <Text size='xs'>
+                <Localize
+                    components={[<strong key={0} />]}
+                    i18n_default_text='<0>Stay safe:</0> Never share login details or verification codes. Check URLs and contact us only via live chat.'
+                />
+            </Text>
+        </InlineMessage>
+    );
+};
+
+export default AwarenessBanner;

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(<AwarenessBanner />);
+
+        expect(
+            screen.getByText(
+                /Never share login details or verification codes. Check URLs and contact us only via live chat./i
+            )
+        ).toBeInTheDocument();
+    });
+});

src/components/AwarenessBanner/index.ts

@@ -0,0 +1 @@
+export { default as AwarenessBanner } from './AwarenessBanner';

src/components/BuySellForm/BuySellForm.scss

@@ -39,7 +39,7 @@
         z-index: 1;
 
         &--is-buy {
-            top: -4rem;
+            top: -10rem;
         }
 
         & .payment-method-form {

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;
             }

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';

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);

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 && <TemporarilyBarredHint />}
             {!isScheduleAvailable && !isAdvertiserBarred && <OutsideBusinessHoursHint />}
             {isAdvertiser && shouldShowVerification && <PNVBanner />}
+            <AwarenessBanner />
             <BuySellTable />
         </div>
     );

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(() => <div>BuySellTable</div>));
 
 const mockUseLocation = useLocation as jest.MockedFunction<typeof useLocation>;

src/pages/my-ads/components/AdFormTextArea/AdFormTextArea.tsx

@@ -1,33 +1,51 @@
+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';
 import { useTranslations } from '@deriv-com/translations';
 import { TextArea } from '@deriv-com/ui';
 import './AdFormTextArea.scss';
 
+export type TChangeEvent = (e: ChangeEvent<HTMLTextAreaElement>) => 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 (
         <Controller
             control={control}
             name={name}
             render={({ field: { onBlur, onChange, value }, fieldState: { error } }) => (
-                <div className='mb-[2.4rem] ad-form-textarea'>
+                <div className={clsx('mb-[2.4rem] ad-form-textarea', className)}>
                     <TextArea
+                        className={className}
                         hint={error ? error.message : hint}
                         isInvalid={!!error}
                         label={label}
                         maxLength={300}
                         onBlur={onBlur}
-                        onChange={onChange}
+                        onChange={e => {
+                            onChange(e);
+                            onFieldChange?.(e);
+                        }}
                         shouldShowCounter
                         textSize='sm'
                         value={value}

src/pages/my-ads/components/AdTypeSection/AdTypeSection.scss

@@ -14,4 +14,23 @@
     &--edit {
         padding-top: 2.4rem;
     }
+
+    &__textarea {
+        .deriv-textarea__footer p {
+            padding-left: 16px;
+        }
+    }
+
+    &__instructions {
+        textarea {
+            border-color: #ffad3a !important;
+        }
+
+        textarea:focus + label span,
+        label,
+        p,
+        span {
+            color: #ffad3a;
+        }
+    }
 }

src/pages/my-ads/components/AdTypeSection/AdTypeSection.tsx

@@ -1,9 +1,9 @@
-import { MouseEventHandler } from 'react';
+import { MouseEventHandler, useEffect, useState } from 'react';
 import clsx from 'clsx';
 import { Controller, useFormContext } from 'react-hook-form';
 import { TCurrency } from 'types';
 import { FloatingRate, RadioGroup } from '@/components';
-import { BUY_SELL, RATE_TYPE } from '@/constants';
+import { BUY_SELL, RATE_TYPE, VALID_SYMBOLS_PATTERN } from '@/constants';
 import { api } from '@/hooks';
 import { useQueryString } from '@/hooks/custom-hooks';
 import { getValidationRules, restrictDecimalPlace } from '@/utils';
@@ -27,6 +27,7 @@
 };
 
 const AdTypeSection = ({ currency, localCurrency, onCancel, rateType, ...props }: TAdTypeSectionProps) => {
+    const [isInstructionsWarningVisible, setIsInstructionsWarningVisible] = useState(false);
     const { queryString } = useQueryString();
     const { data: advertiserInfo } = api.advertiser.useGetInfo();
     const { balance_available: balanceAvailable } = advertiserInfo || {};
@@ -69,6 +70,23 @@
         });
     };
 
+    const validateInstructions = (value: string) => {
+        const regExp = /.*(\+?\d{1,4}[-.\s]?)?((\(\d{1,4}\))|\d{1,4})[-.\s]?\d{1,4}[-.\s]?\d{1,9}.*/;
+        const strings = typeof value === 'string' ? value.split(' ') : [];
+        const hasStringOfNumbers = strings.some(str => regExp.test(str));
+        const isValid = VALID_SYMBOLS_PATTERN.test(value);
+
+        if (isValid) {
+            setIsInstructionsWarningVisible(hasStringOfNumbers);
+        } else {
+            setIsInstructionsWarningVisible(false);
+        }
+    };
+
+    useEffect(() => {
+        validateInstructions(getValues('instructions'));
+    }, []);
+
     return (
         <div className={clsx('ad-type-section', { 'ad-type-section--edit': isEdit })}>
             {!isEdit && (
@@ -186,10 +204,23 @@
                 />
             )}
             <AdFormTextArea
+                className={clsx('ad-type-section__textarea', {
+                    'ad-type-section__instructions': isInstructionsWarningVisible,
+                })}
                 field={localize('Instructions')}
-                hint={localize('This information will be visible to everyone')}
-                label={localize('Instructions(optional)')}
+                hint={
+                    isInstructionsWarningVisible
+                        ? localize('Make sure you’re not sharing your personal details.')
+                        : localize(
+                              'This information will be visible to everyone. Don’t share your phone number or personal details.'
+                          )
+                }
+                label={localize('Instructions (optional)')}
                 name='instructions'
+                onFieldChange={e => {
+                    const { value } = e.target;
+                    validateInstructions(value);
+                }}
             />
             <AdFormController {...props} isNextButtonDisabled={!isValid} onCancel={onCancel} />
         </div>

src/pages/my-ads/screens/MyAds/MyAds.scss

@@ -0,0 +1,6 @@
+.my-ads {
+    @include mobile-or-tablet-screen {
+        max-height: calc(100% - 8rem);
+        overflow: auto;
+    }
+}

src/pages/my-ads/screens/MyAds/MyAds.tsx

@@ -1,4 +1,10 @@
-import { OutsideBusinessHoursHint, PNVBanner, TemporarilyBarredHint, Verification } from '@/components';
+import {
+    AwarenessBanner,
+    OutsideBusinessHoursHint,
+    PNVBanner,
+    TemporarilyBarredHint,
+    Verification,
+} from '@/components';
 import {
     useGetBusinessHours,
     useGetPhoneNumberVerification,
@@ -8,6 +14,7 @@ import {
 } from '@/hooks/custom-hooks';
 import { Loader } from '@deriv-com/ui';
 import { MyAdsTable } from './MyAdsTable';
+import './MyAds.scss';
 
 const MyAds = () => {
     const isAdvertiserBarred = useIsAdvertiserBarred();
@@ -23,15 +30,17 @@ const MyAds = () => {
     if (isAdvertiserNotVerified)
         return (
             <div className='overflow-y-auto h-[calc(100%-11rem)]'>
+                <AwarenessBanner />
                 <Verification />;
             </div>
         );
 
     return (
-        <div className='flex flex-col h-full'>
+        <div className='flex flex-col h-full my-ads'>
             {isAdvertiserBarred && <TemporarilyBarredHint />}
             {!isScheduleAvailable && !isAdvertiserBarred && <OutsideBusinessHoursHint />}
             {isAdvertiser && shouldShowVerification && <PNVBanner />}
+            <AwarenessBanner />
             <MyAdsTable />
         </div>
     );

src/pages/my-ads/screens/MyAdsEmpty/MyAdsEmpty.tsx

@@ -14,10 +14,11 @@ const MyAdsEmpty = () => {
     const history = useHistory();
     const textSize = isMobile ? 'lg' : 'md';
     return (
-        <div className='mt-[11.8rem] mx-[1.6rem]'>
+        <div className='mt-[3.8rem] mx-[1.6rem]'>
             <ActionScreen
                 actionButtons={
                     <Button
+                        className='mb-[8rem]'
                         disabled={isAdvertiserBarred}
                         onClick={() => {
                             if (isAdvertiser) history.push(`${MY_ADS_URL}/adForm?formAction=create`);

src/pages/my-profile/screens/MyProfile/MyProfile.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { PNVBanner, ProfileContent, Verification } from '@/components';
+import { AwarenessBanner, PNVBanner, ProfileContent, Verification } from '@/components';
 import { NicknameModal } from '@/components/Modals';
 import {
     useAdvertiserStats,
@@ -55,6 +55,7 @@ const MyProfile = () => {
     if (isAdvertiserNotVerified) {
         return (
             <div className='overflow-y-auto h-[calc(100%-11rem)]'>
+                <AwarenessBanner />
                 <Verification />
             </div>
         );
@@ -73,6 +74,7 @@ const MyProfile = () => {
     return (
         <div className='h-full'>
             {isAdvertiser && shouldShowVerification && <PNVBanner />}
+            <AwarenessBanner />
             <div className='my-profile'>
                 <ProfileContent data={advertiserStats} />
                 <Tabs

src/pages/my-profile/screens/MyProfile/MyProfileMobile.tsx

@@ -1,6 +1,6 @@
 import { useHistory } from 'react-router-dom';
 import { TAdvertiserStats } from 'types';
-import { MobileTabs, ProfileContent } from '@/components';
+import { AwarenessBanner, MobileTabs, ProfileContent } from '@/components';
 import { GUIDE_URL } from '@/constants';
 import { useQueryString } from '@/hooks/custom-hooks';
 import { MyProfileAdDetails } from '../MyProfileAdDetails';
@@ -32,6 +32,7 @@ const MyProfileMobile = ({ data }: TMyProfileMobileProps) => {
 
     return (
         <>
+            <AwarenessBanner />
             <ProfileContent data={data} />
             <MobileTabs
                 onChangeTab={clickedTab => {

src/pages/my-profile/screens/MyProfile/__tests__/MyProfileMobile.spec.tsx

@@ -46,6 +46,11 @@ jest.mock('@/hooks/custom-hooks', () => ({
     })),
 }));
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({ isDesktop: true })),
+}));
+
 const mockProps = {
     data: {} as TAdvertiserStats,
 };