fix: style issues, unit tests

src/components/AppFooter/AppFooter.tsx

@@ -18,6 +18,7 @@ import './AppFooter.scss';
 
 const AppFooter = () => {
     const { currentLang = 'EN', localize, switchLanguage } = useTranslations();
+
     const { hideModal, isModalOpenFor, showModal } = useModalManager();
 
     const openLanguageSettingModal = () => showModal('DesktopLanguagesModal');

src/components/BuySellForm/BuySellFormFooter/BuySellFormFooter.tsx

@@ -1,3 +1,4 @@
+import { Localize } from '@deriv-com/translations';
 import { Button, useDevice } from '@deriv-com/ui';
 
 type TBuySellFormFooterProps = {
@@ -17,7 +18,7 @@ const BuySellFormFooter = ({ isDisabled, onClickCancel, onSubmit }: TBuySellForm
                 textSize={isMobile ? 'md' : 'sm'}
                 variant='outlined'
             >
-                Cancel
+                <Localize i18n_default_text='Cancel' />
             </Button>
             <Button
                 disabled={isDisabled}
@@ -26,7 +27,7 @@ const BuySellFormFooter = ({ isDisabled, onClickCancel, onSubmit }: TBuySellForm
                 textSize={isMobile ? 'md' : 'sm'}
                 type='submit'
             >
-                Confirm
+                <Localize i18n_default_text='Confirm' />
             </Button>
         </div>
     );

src/components/CopyAdForm/CopyAdForm.scss

@@ -4,4 +4,21 @@
     @include mobile {
         margin: 0 1.6rem;
     }
+
+    &__full-page-modal {
+        position: absolute;
+        top: -6rem;
+        z-index: 2;
+        height: calc(100vh - 9rem);
+
+        & .mobile-wrapper__body {
+            margin-top: 1.6rem;
+        }
+
+        & .mobile-wrapper__footer {
+            display: flex;
+            gap: 0.8rem;
+            justify-content: flex-end;
+        }
+    }
 }

src/components/CopyAdForm/CopyAdForm.tsx

@@ -1,7 +1,7 @@
 import { Controller, FormProvider, NonUndefined, useForm } from 'react-hook-form';
 import { TCountryListItem, TCurrency, THooks } from 'types';
 import { RATE_TYPE } from '@/constants';
-import { api } from '@/hooks';
+import { api, useFloatingRate } from '@/hooks';
 import { AdFormInput } from '@/pages/my-ads/components/AdFormInput';
 import { formatTime, getValidationRules, restrictDecimalPlace } from '@/utils';
 import { Localize, useTranslations } from '@deriv-com/translations';
@@ -10,35 +10,89 @@ import { FloatingRate } from '../FloatingRate';
 import CopyAdFormDisplayWrapper from './CopyAdFormDisplayWrapper';
 import './CopyAdForm.scss';
 
+type TSavedFormValues = {
+    amount: number;
+    maxOrder: string;
+    minOrder: string;
+    rateValue: string;
+};
+
 type TCopyAdFormProps = NonUndefined<THooks.AdvertiserAdverts.Get>[0] & {
+    formValues: TSavedFormValues;
+} & {
     isModalOpen: boolean;
+    onClickCancel: () => void;
+    onFormSubmit: (values: TSavedFormValues) => void;
     onRequestClose: () => void;
 };
 
-const CopyAdForm = ({ isModalOpen, onRequestClose, ...rest }: TCopyAdFormProps) => {
-    const methods = useForm({ mode: 'all' });
-    const { data: countryList = {} as TCountryListItem } = api.countryList.useGet();
-    const { control, getValues, handleSubmit, trigger } = methods;
-    const { localize } = useTranslations();
-    const { isMobile } = useDevice();
+type TFormValues = {
+    amount: number;
+    'float-rate-offset-limit': string;
+    'max-order': string;
+    'min-order': string;
+    'rate-type-string': string;
+    'rate-value': string;
+};
+
+const CopyAdForm = ({
+    formValues,
+    isModalOpen,
+    onClickCancel,
+    onFormSubmit,
+    onRequestClose,
+    ...rest
+}: TCopyAdFormProps) => {
     const {
         account_currency: currency,
+        amount,
         description,
         eligible_countries: eligibleCountries = [],
         local_currency: localCurrency,
         min_completion_rate: minCompletionRate = 0,
         min_join_days: minJoinDays = 0,
         order_expiry_period: orderExpiryPeriod,
         payment_method_names: paymentMethodNames,
-        rate_type: rateType,
+        rate_display: rateDisplay,
         type,
     } = rest;
+    const { floatRateOffsetLimitString, rateType } = useFloatingRate();
+    const methods = useForm<TFormValues>({
+        defaultValues: {
+            amount: amount ?? formValues.amount,
+            'float-rate-offset-limit': floatRateOffsetLimitString,
+            'max-order': formValues.maxOrder,
+            'min-order': formValues.minOrder,
+            'rate-type-string': rateType,
+            'rate-value': formValues.rateValue ?? rateType === RATE_TYPE.FLOAT ? '-0.01' : rateDisplay,
+        },
+        mode: 'all',
+    });
+
+    const { data: countryList = {} as TCountryListItem } = api.countryList.useGet();
+    const {
+        control,
+        formState: { isValid },
+        getValues,
+        handleSubmit,
+        trigger,
+    } = methods;
+    const { localize } = useTranslations();
+    const { isMobile } = useDevice();
+
+    const onSubmit = () => {
+        onFormSubmit({
+            amount: getValues('amount'),
+            maxOrder: getValues('max-order'),
+            minOrder: getValues('min-order'),
+            rateValue: getValues('rate-value'),
+        });
+    };
 
-    const onSubmit = () => {};
     const labelSize = isMobile ? 'sm' : 'xs';
     const valueSize = isMobile ? 'md' : 'sm';
 
-    const triggerValidation = (fieldNames: string[]) => {
+    const triggerValidation = (fieldNames: (keyof TFormValues)[]) => {
         // Loop through the provided field names
         fieldNames.forEach(fieldName => {
             // Check if the field has a value
@@ -64,10 +118,16 @@ const CopyAdForm = ({ isModalOpen, onRequestClose, ...rest }: TCopyAdFormProps)
     return (
         <FormProvider {...methods}>
             <form onSubmit={handleSubmit(onSubmit)}>
-                <CopyAdFormDisplayWrapper isModalOpen={isModalOpen} onRequestClose={onRequestClose}>
+                <CopyAdFormDisplayWrapper
+                    isModalOpen={isModalOpen}
+                    isValid={isValid}
+                    onClickCancel={onClickCancel}
+                    onRequestClose={onRequestClose}
+                    onSubmit={onSubmit}
+                >
                     <div className='copy-ad-form'>
                         <InlineMessage variant='info'>
-                            <Text size={isMobile ? 'xs' : '2xs'}>
+                            <Text size={isMobile ? 'sm' : '2xs'}>
                                 <Localize i18n_default_text='Review your settings and create a new ad. Every ad must have unique limits and rates.' />
                             </Text>
                         </InlineMessage>
@@ -83,7 +143,7 @@ const CopyAdForm = ({ isModalOpen, onRequestClose, ...rest }: TCopyAdFormProps)
                                 )}
                             </Text>
                         </div>
-                        <div className='flex flex-col'>
+                        <div className='flex flex-col mt-[1.6rem]'>
                             <AdFormInput
                                 label={localize('Total amount')}
                                 name='amount'
@@ -151,7 +211,7 @@ const CopyAdForm = ({ isModalOpen, onRequestClose, ...rest }: TCopyAdFormProps)
                             <Text color='less-prominent' size={labelSize}>
                                 <Localize i18n_default_text='Instructions' />
                             </Text>
-                            <Text size={valueSize}>{description ?? ''}</Text>
+                            <Text size={valueSize}>{description || '-'}</Text>
                         </div>
                         <div className='flex flex-col w-full mt-[1.6rem]'>
                             <Text color='less-prominent' size={labelSize}>
@@ -166,11 +226,11 @@ const CopyAdForm = ({ isModalOpen, onRequestClose, ...rest }: TCopyAdFormProps)
                             <Text size={valueSize}>{paymentMethodNames?.join(', ') ?? '-'}</Text>
                         </div>
                         {hasCounterpartyConditions && (
-                            <>
+                            <div className='flex flex-col w-full mt-[1.6rem]'>
                                 <Text color='less-prominent' size='xs'>
                                     <Localize i18n_default_text='Counterparty conditions' />
                                 </Text>
-                                <Text as='ul' className='copy-advert-form__list' color='prominent' size='xs'>
+                                <Text as='ul' className='copy-advert-form__list' color='prominent' size='sm'>
                                     {minJoinDays > 0 && (
                                         <li>
                                             <Localize
@@ -193,22 +253,16 @@ const CopyAdForm = ({ isModalOpen, onRequestClose, ...rest }: TCopyAdFormProps)
                                         <li>
                                             <Localize
                                                 components={[<strong key={0} />]}
-                                                i18n_default_text='Preferred countries <0>({{eligible_countries_display}})</0>'
+                                                i18n_default_text='Preferred countries <0>({{eligibleCountriesDisplay}})</0>'
                                                 values={{
-                                                    eligible_countries_display: getEligibleCountriesDisplay(),
+                                                    eligibleCountriesDisplay: getEligibleCountriesDisplay(),
                                                 }}
                                             />
                                         </li>
                                     )}
                                 </Text>
-                            </>
+                            </div>
                         )}
-                        <div className='flex flex-col w-full mt-[1.6rem]'>
-                            <Text color='less-prominent' size={labelSize}>
-                                <Localize i18n_default_text='Counterparty conditions' />
-                            </Text>
-                            <Text size={valueSize}>{''}</Text>
-                        </div>
                     </div>
                 </CopyAdFormDisplayWrapper>
             </form>

src/components/CopyAdForm/CopyAdFormDisplayWrapper.tsx

@@ -1,41 +1,42 @@
 import { PropsWithChildren } from 'react';
-import clsx from 'clsx';
-import { getCurrentRoute } from '@/utils';
 import { useDevice } from '@deriv-com/ui';
 import { FullPageMobileWrapper } from '../FullPageMobileWrapper';
 import { CopyAdFormModal } from '../Modals';
 import CopyAdFormFooter from './CopyAdFormFooter';
-import CopyAdFormHeader from './CopyAdFormHeader';
 
 type TCopyAdFormDisplayWrapperProps = {
     isModalOpen: boolean;
+    isValid: boolean;
+    onClickCancel: () => void;
     onRequestClose: () => void;
+    onSubmit: () => void;
 };
 const CopyAdFormDisplayWrapper = ({
     children,
     isModalOpen,
+    isValid,
+    onClickCancel,
     onRequestClose,
+    onSubmit,
 }: PropsWithChildren<TCopyAdFormDisplayWrapperProps>) => {
     const { isMobile } = useDevice();
-    const currentRoute = getCurrentRoute();
 
     if (isMobile) {
         return (
             <FullPageMobileWrapper
-                className={clsx('buy-sell-form__full-page-modal', {
-                    'buy-sell-form__full-page-modal--is-buy': currentRoute === 'buy-sell',
-                })}
+                className='copy-ad-form__full-page-modal'
                 onBack={onRequestClose}
-                renderFooter={() => <CopyAdFormFooter onRequestClose={onRequestClose} />}
-                renderHeader={() => <CopyAdFormHeader />}
+                renderFooter={() => (
+                    <CopyAdFormFooter isValid={isValid} onClickCancel={onClickCancel} onSubmit={onSubmit} />
+                )}
             >
                 {children}
             </FullPageMobileWrapper>
         );
     }
 
     return (
-        <CopyAdFormModal isModalOpen={isModalOpen} onRequestClose={onRequestClose}>
+        <CopyAdFormModal isModalOpen={isModalOpen} isValid={isValid} onClickCancel={onClickCancel} onSubmit={onSubmit}>
             {children}
         </CopyAdFormModal>
     );

src/components/CopyAdForm/CopyAdFormFooter.tsx

@@ -1,23 +1,26 @@
 import { Localize } from '@deriv-com/translations';
-import { Button } from '@deriv-com/ui';
+import { Button, useDevice } from '@deriv-com/ui';
 
 type TCopyAdFormFooterProps = {
-    onRequestClose: () => void;
+    isValid: boolean;
+    onClickCancel: () => void;
+    onSubmit: () => void;
 };
-const CopyAdFormFooter = ({ onRequestClose }: TCopyAdFormFooterProps) => {
+const CopyAdFormFooter = ({ isValid, onClickCancel, onSubmit }: TCopyAdFormFooterProps) => {
+    const { isMobile } = useDevice();
     return (
         <>
             <Button
                 className='border-2'
                 color='black'
-                onClick={onRequestClose}
+                onClick={onClickCancel}
                 size='lg'
-                textSize='sm'
+                textSize={isMobile ? 'md' : 'sm'}
                 variant='outlined'
             >
                 <Localize i18n_default_text='Cancel' />
             </Button>
-            <Button size='lg' textSize='sm'>
+            <Button disabled={!isValid} onClick={onSubmit} size='lg' textSize={isMobile ? 'md' : 'sm'}>
                 <Localize i18n_default_text='Create ad' />
             </Button>
         </>

src/components/CopyAdForm/__tests__/CopyAdFormFooter.spec.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import CopyAdFormFooter from '../CopyAdFormFooter';
+
+const mockProps = {
+    isValid: true,
+    onClickCancel: jest.fn(),
+    onSubmit: jest.fn(),
+};
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({ isMobile: false }),
+}));
+
+describe('CopyAdFormFooter', () => {
+    it('should render the footer', () => {
+        render(<CopyAdFormFooter {...mockProps} />);
+        expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Create ad' })).toBeInTheDocument();
+    });
+    it('should handle the onClickCancel event', () => {
+        render(<CopyAdFormFooter {...mockProps} />);
+        screen.getByRole('button', { name: 'Cancel' }).click();
+        expect(mockProps.onClickCancel).toHaveBeenCalledTimes(1);
+    });
+    it('should handle the onSubmit event', () => {
+        render(<CopyAdFormFooter {...mockProps} />);
+        screen.getByRole('button', { name: 'Create ad' }).click();
+        expect(mockProps.onSubmit).toHaveBeenCalledTimes(1);
+    });
+    it('should disable the submit button when isValid is false', () => {
+        render(<CopyAdFormFooter {...mockProps} isValid={false} />);
+        expect(screen.getByRole('button', { name: 'Create ad' })).toBeDisabled();
+    });
+});

src/components/CopyAdForm/__tests__/CopyAdFormHeader.spec.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import CopyAdFormHeader from '../CopyAdFormHeader';
+
+describe('CopyAdFormHeader', () => {
+    it('should render the header', () => {
+        render(<CopyAdFormHeader />);
+        expect(screen.getByText('Create a similar ad')).toBeInTheDocument();
+    });
+});

src/components/FloatingRate/FloatingRate.tsx

@@ -55,7 +55,7 @@ const FloatingRate = ({
 
     const marketRate = overrideExchangeRate ? Number(overrideExchangeRate) : exchangeRateRef.current ?? 1;
     const os = mobileOSDetect();
-    const marketFeed = value ? percentOf(marketRate, Number(value)) : marketRate;
+    const marketFeed = value ? percentOf(marketRate, Number(value) || 0) : marketRate;
     const decimalPlace = setDecimalPlaces(marketFeed, 6);
     const textSize = isMobile ? 'sm' : 'xs';