From a1b409547ebada245fac014385b3b9cc142c8ba9 Mon Sep 17 00:00:00 2001
From: Nada <nada.ajinas@deriv.com>
Date: Fri, 7 Jun 2024 15:49:48 +0400
Subject: [PATCH] fix: ui issues in buy sell flow

---
 .../AdvertsTableRow/AdvertsTableRow.tsx       |   6 +-
 .../BuySellAmount/BuySellAmount.tsx           |   5 +-
 src/components/BuySellForm/BuySellForm.scss   |   2 +-
 src/components/BuySellForm/BuySellForm.tsx    | 131 +++++++++---------
 .../BuySellForm/BuySellFormDisplayWrapper.tsx |   5 +-
 .../BuySellPaymentSection.tsx                 |  10 +-
 .../__tests__/BuySellPaymentSection.spec.tsx  |  18 +++
 .../__tests__/BuySellForm.spec.tsx            |   1 +
 .../screens/Advertiser/Advertiser.scss        |   6 +
 .../screens/Advertiser/Advertiser.tsx         |   1 +
 10 files changed, 115 insertions(+), 70 deletions(-)

diff --git a/src/components/AdvertsTableRow/AdvertsTableRow.tsx b/src/components/AdvertsTableRow/AdvertsTableRow.tsx
index 4a1e1813..83293c6d 100644
--- a/src/components/AdvertsTableRow/AdvertsTableRow.tsx
+++ b/src/components/AdvertsTableRow/AdvertsTableRow.tsx
@@ -167,14 +167,14 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
                         {payment_method_names ? (
                             payment_method_names.map((method: string, idx: number) => (
                                 <PaymentMethodLabel
-                                    color={textColor}
+                                    color='general'
                                     key={idx}
                                     paymentMethodName={method}
-                                    size={isMobile ? 'sm' : 'xs'}
+                                    size={isMobile ? 'xs' : 'sm'}
                                 />
                             ))
                         ) : (
-                            <PaymentMethodLabel color={textColor} paymentMethodName='-' />
+                            <PaymentMethodLabel color='general' paymentMethodName='-' />
                         )}
                     </div>
                 </Container>
diff --git a/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx b/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx
index 075ed04a..9cc9d2ec 100644
--- a/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx
+++ b/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx
@@ -20,6 +20,7 @@ type TBuySellAmountProps = {
     minLimit: string;
     paymentMethodNames?: string[];
     setValue: ReturnType<typeof useForm>['setValue'];
+    trigger: ReturnType<typeof useForm>['trigger'];
 };
 const BuySellAmount = ({
     accountCurrency,
@@ -33,6 +34,7 @@ const BuySellAmount = ({
     minLimit,
     paymentMethodNames,
     setValue,
+    trigger,
 }: TBuySellAmountProps) => {
     const { isMobile } = useDevice();
     const labelSize = isMobile ? 'sm' : 'xs';
@@ -52,7 +54,8 @@ const BuySellAmount = ({
     useEffect(() => {
         setInputValue(minLimit);
         setValue('amount', minLimit);
-    }, [minLimit, setValue]);
+        trigger('amount');
+    }, [minLimit, setValue, trigger]);
 
     return (
         <div className='flex flex-col gap-[2rem] py-[1.6rem]'>
diff --git a/src/components/BuySellForm/BuySellForm.scss b/src/components/BuySellForm/BuySellForm.scss
index abab42af..e9b5fb3a 100644
--- a/src/components/BuySellForm/BuySellForm.scss
+++ b/src/components/BuySellForm/BuySellForm.scss
@@ -30,7 +30,7 @@
         top: 0;
         left: 0;
         z-index: 1;
-        height: calc(100vh - 4rem);
+        height: calc(100vh - 7rem);
 
         & .mobile-wrapper__body {
             overflow: overlay;
diff --git a/src/components/BuySellForm/BuySellForm.tsx b/src/components/BuySellForm/BuySellForm.tsx
index 7c170a98..c18b5460 100644
--- a/src/components/BuySellForm/BuySellForm.tsx
+++ b/src/components/BuySellForm/BuySellForm.tsx
@@ -56,6 +56,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
     const { data } = api.advertiser.useGetInfo() || {};
     const [errorMessage, setErrorMessage] = useState('');
     const scrollRef = useRef<HTMLDivElement>(null);
+    const [isHidden, setIsHidden] = useState(false);
     const {
         balance_available = '',
         daily_buy = 0,
@@ -154,6 +155,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
         getValues,
         handleSubmit,
         setValue,
+        trigger,
     } = useForm({
         defaultValues: {
             amount: min_order_amount_limit ?? 1,
@@ -220,72 +222,77 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
     }, [error?.error.message, isError]);
 
     return (
-        <form onSubmit={handleSubmit(onSubmit)}>
-            <BuySellFormDisplayWrapper
-                accountCurrency={account_currency as TCurrency}
-                isBuy={isBuy}
-                isModalOpen={isModalOpen}
-                isValid={isValid && ((isBuy && selectedPaymentMethods.length > 0) || !isBuy)}
-                onRequestClose={onRequestClose}
-                onSubmit={onSubmit}
-            >
-                {/* TODO: Remove the below banner when implementing real time exchange changes */}
-                {rate_type === RATE_TYPE.FLOAT && !shouldDisableField && (
-                    <div className='px-[2.4rem] mt-[2.4rem]'>
-                        <InlineMessage variant='info'>
-                            <Text size={isMobile ? 'xs' : '2xs'}>
-                                <Localize i18n_default_text='If the market rate changes from the rate shown here, we won’t be able to process your order.' />
-                            </Text>
-                        </InlineMessage>
-                    </div>
-                )}
-                {errorMessage && (
-                    <div className='px-[2.4rem] mt-[2.4rem]'>
-                        <InlineMessage variant='error'>
-                            <Text size={isMobile ? 'xs' : '2xs'}>{errorMessage}</Text>
-                        </InlineMessage>
-                    </div>
-                )}
-                <BuySellData
+        <>
+            <form onSubmit={handleSubmit(onSubmit)}>
+                <BuySellFormDisplayWrapper
                     accountCurrency={account_currency as TCurrency}
-                    expiryPeriod={order_expiry_period ?? 3600}
-                    instructions={description ?? '-'}
                     isBuy={isBuy}
-                    localCurrency={local_currency as TCurrency}
-                    name={advertiser_details?.name ?? ''}
-                    paymentMethodNames={payment_method_names}
-                    paymentMethods={paymentMethods as THooks.PaymentMethods.Get}
-                    rate={displayEffectiveRate}
-                    ref={scrollRef}
-                />
-                <LightDivider />
-                {isBuy && payment_method_names && payment_method_names?.length > 0 && (
-                    <BuySellPaymentSection
-                        availablePaymentMethods={availablePaymentMethods as TPaymentMethod[]}
-                        onSelectPaymentMethodCard={onSelectPaymentMethodCard}
-                        selectedPaymentMethodIds={selectedPaymentMethods}
+                    isHidden={isHidden}
+                    isModalOpen={isModalOpen}
+                    isValid={isValid && ((isBuy && selectedPaymentMethods.length > 0) || !isBuy)}
+                    onRequestClose={onRequestClose}
+                    onSubmit={onSubmit}
+                >
+                    {/* TODO: Remove the below banner when implementing real time exchange changes */}
+                    {rate_type === RATE_TYPE.FLOAT && !shouldDisableField && (
+                        <div className='px-[2.4rem] mt-[2.4rem]'>
+                            <InlineMessage variant='info'>
+                                <Text size={isMobile ? 'xs' : '2xs'}>
+                                    <Localize i18n_default_text='If the market rate changes from the rate shown here, we won’t be able to process your order.' />
+                                </Text>
+                            </InlineMessage>
+                        </div>
+                    )}
+                    {errorMessage && (
+                        <div className='px-[2.4rem] mt-[2.4rem]'>
+                            <InlineMessage variant='error'>
+                                <Text size={isMobile ? 'xs' : '2xs'}>{errorMessage}</Text>
+                            </InlineMessage>
+                        </div>
+                    )}
+                    <BuySellData
+                        accountCurrency={account_currency as TCurrency}
+                        expiryPeriod={order_expiry_period ?? 3600}
+                        instructions={description ?? '-'}
+                        isBuy={isBuy}
+                        localCurrency={local_currency as TCurrency}
+                        name={advertiser_details?.name ?? ''}
+                        paymentMethodNames={payment_method_names}
+                        paymentMethods={paymentMethods as THooks.PaymentMethods.Get}
+                        rate={displayEffectiveRate}
+                        ref={scrollRef}
                     />
-                )}
-                <BuySellAmount
-                    accountCurrency={account_currency as TCurrency}
-                    amount={initialAmount}
-                    calculatedRate={calculatedRate}
-                    control={control as unknown as Control<FieldValues>}
-                    isBuy={isBuy}
-                    isDisabled={shouldDisableField}
-                    localCurrency={local_currency as TCurrency}
-                    maxLimit={getAdvertiserMaxLimit(
-                        isBuy,
-                        Number(daily_buy_limit) - Number(daily_buy),
-                        Number(daily_sell_limit) - Number(daily_sell),
-                        max_order_amount_limit_display ?? '0'
+                    <LightDivider />
+                    {isBuy && payment_method_names && payment_method_names?.length > 0 && (
+                        <BuySellPaymentSection
+                            availablePaymentMethods={availablePaymentMethods as TPaymentMethod[]}
+                            onSelectPaymentMethodCard={onSelectPaymentMethodCard}
+                            selectedPaymentMethodIds={selectedPaymentMethods}
+                            setIsHidden={setIsHidden}
+                        />
                     )}
-                    minLimit={min_order_amount_limit_display ?? '0'}
-                    paymentMethodNames={payment_method_names}
-                    setValue={setValue as unknown as (name: string, value: string) => void}
-                />
-            </BuySellFormDisplayWrapper>
-        </form>
+                    <BuySellAmount
+                        accountCurrency={account_currency as TCurrency}
+                        amount={initialAmount}
+                        calculatedRate={calculatedRate}
+                        control={control as unknown as Control<FieldValues>}
+                        isBuy={isBuy}
+                        isDisabled={shouldDisableField}
+                        localCurrency={local_currency as TCurrency}
+                        maxLimit={getAdvertiserMaxLimit(
+                            isBuy,
+                            Number(daily_buy_limit) - Number(daily_buy),
+                            Number(daily_sell_limit) - Number(daily_sell),
+                            max_order_amount_limit_display ?? '0'
+                        )}
+                        minLimit={min_order_amount_limit_display ?? '0'}
+                        paymentMethodNames={payment_method_names}
+                        setValue={setValue as unknown as (name: string, value: string) => void}
+                        trigger={trigger as unknown as () => Promise<boolean>}
+                    />
+                </BuySellFormDisplayWrapper>
+            </form>
+        </>
     );
 };
 
diff --git a/src/components/BuySellForm/BuySellFormDisplayWrapper.tsx b/src/components/BuySellForm/BuySellFormDisplayWrapper.tsx
index b3b22f62..7ad34762 100644
--- a/src/components/BuySellForm/BuySellFormDisplayWrapper.tsx
+++ b/src/components/BuySellForm/BuySellFormDisplayWrapper.tsx
@@ -9,6 +9,7 @@ import { BuySellFormHeader } from './BuySellFormHeader';
 type TBuySellFormDisplayWrapperProps = {
     accountCurrency: string;
     isBuy: boolean;
+    isHidden: boolean;
     isModalOpen: boolean;
     isValid: boolean;
     onRequestClose: () => void;
@@ -18,6 +19,7 @@ const BuySellFormDisplayWrapper = ({
     accountCurrency,
     children,
     isBuy,
+    isHidden,
     isModalOpen,
     isValid,
     onRequestClose,
@@ -44,10 +46,11 @@ const BuySellFormDisplayWrapper = ({
     return (
         <Modal
             ariaHideApp={false}
-            className={clsx('buy-sell-form', { 'buy-sell-form--is-buy': isBuy })}
+            className={clsx('buy-sell-form', { 'buy-sell-form--is-buy': isBuy, hidden: isHidden })}
             isOpen={isModalOpen}
             onRequestClose={onRequestClose}
             shouldCloseOnOverlayClick={false}
+            style={{ overlay: { background: isHidden ? 'transparent' : 'rgba(0, 0, 0, 0.72)', zIndex: 9999 } }}
         >
             <Modal.Header onRequestClose={onRequestClose}>
                 <BuySellFormHeader currency={accountCurrency} isBuy={isBuy} />
diff --git a/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx b/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx
index feba0752..59003467 100644
--- a/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx
+++ b/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useReducer } from 'react';
+import { Dispatch, SetStateAction, useCallback, useReducer } from 'react';
 import { TPaymentMethod, TSelectedPaymentMethod } from 'types';
 import { LightDivider, PaymentMethodForm } from '@/components';
 import { useModalManager } from '@/hooks';
@@ -12,12 +12,14 @@ type TBuySellPaymentSectionProps = {
     availablePaymentMethods: (TPaymentMethod & { isAvailable?: boolean })[];
     onSelectPaymentMethodCard?: (paymentMethodId: number) => void;
     selectedPaymentMethodIds: number[];
+    setIsHidden?: Dispatch<SetStateAction<boolean>>;
 };
 
 const BuySellPaymentSection = ({
     availablePaymentMethods,
     onSelectPaymentMethodCard,
     selectedPaymentMethodIds,
+    setIsHidden,
 }: TBuySellPaymentSectionProps) => {
     const { isMobile } = useDevice();
     const sortedList = sortPaymentMethodsWithAvailability(availablePaymentMethods);
@@ -61,6 +63,7 @@ const BuySellPaymentSection = ({
                             key={index}
                             medium
                             onClickAdd={() => {
+                                setIsHidden?.(true);
                                 showModal('PaymentMethodForm', { shouldStackModals: false });
                                 handleAddPaymentMethod(paymentMethod?.display_name, paymentMethod);
                             }}
@@ -76,7 +79,10 @@ const BuySellPaymentSection = ({
                 <PaymentMethodForm
                     displayModal={!isMobile && !!isModalOpenFor('PaymentMethodForm')}
                     formState={formState}
-                    onRequestClose={hideModal}
+                    onRequestClose={() => {
+                        hideModal();
+                        setIsHidden?.(false);
+                    }}
                     onResetFormState={handleResetFormState}
                 />
             )}
diff --git a/src/components/BuySellForm/BuySellPaymentSection/__tests__/BuySellPaymentSection.spec.tsx b/src/components/BuySellForm/BuySellPaymentSection/__tests__/BuySellPaymentSection.spec.tsx
index fa700c3c..830a5c4d 100644
--- a/src/components/BuySellForm/BuySellPaymentSection/__tests__/BuySellPaymentSection.spec.tsx
+++ b/src/components/BuySellForm/BuySellPaymentSection/__tests__/BuySellPaymentSection.spec.tsx
@@ -79,4 +79,22 @@ describe('<BuySellPaymentSection />', () => {
         expect(mockUseModalManager.showModal).toHaveBeenCalledWith('PaymentMethodForm', { shouldStackModals: false });
         expect(screen.getByText('PaymentMethodForm')).toBeInTheDocument();
     });
+
+    it('should hide the background modal when setishidden is passed', async () => {
+        const setIsHidden = jest.fn();
+        mockAvailablePaymentMethods.isAvailable = false;
+        mockUseModalManager.isModalOpenFor.mockImplementation((modal: string) => modal === 'PaymentMethodForm');
+        render(
+            <BuySellPaymentSection
+                {...mockProps}
+                availablePaymentMethods={[mockAvailablePaymentMethods]}
+                setIsHidden={setIsHidden}
+            />
+        );
+
+        const addButton = screen.getByTestId('dt_payment_method_add_button');
+        await userEvent.click(addButton);
+        expect(mockUseModalManager.showModal).toHaveBeenCalledWith('PaymentMethodForm', { shouldStackModals: false });
+        expect(setIsHidden).toHaveBeenCalledWith(true);
+    });
 });
diff --git a/src/components/BuySellForm/__tests__/BuySellForm.spec.tsx b/src/components/BuySellForm/__tests__/BuySellForm.spec.tsx
index 4f878bf8..5fb8d06b 100644
--- a/src/components/BuySellForm/__tests__/BuySellForm.spec.tsx
+++ b/src/components/BuySellForm/__tests__/BuySellForm.spec.tsx
@@ -154,6 +154,7 @@ jest.mock('react-hook-form', () => ({
         })),
         handleSubmit: mockHandleSubmit,
         setValue: jest.fn(),
+        trigger: jest.fn(),
     }),
 }));
 
diff --git a/src/pages/advertiser/screens/Advertiser/Advertiser.scss b/src/pages/advertiser/screens/Advertiser/Advertiser.scss
index 2f3a7db7..e2925659 100644
--- a/src/pages/advertiser/screens/Advertiser/Advertiser.scss
+++ b/src/pages/advertiser/screens/Advertiser/Advertiser.scss
@@ -10,4 +10,10 @@
         height: calc(100vh - 4rem);
         width: 100%;
     }
+
+    & .page-return {
+        @include mobile {
+            padding: 0.5rem 1.6rem;
+        }
+    }
 }
diff --git a/src/pages/advertiser/screens/Advertiser/Advertiser.tsx b/src/pages/advertiser/screens/Advertiser/Advertiser.tsx
index 645623c3..168b8b5d 100644
--- a/src/pages/advertiser/screens/Advertiser/Advertiser.tsx
+++ b/src/pages/advertiser/screens/Advertiser/Advertiser.tsx
@@ -48,6 +48,7 @@ const Advertiser = () => {
                         />
                     ),
                 })}
+                size={isMobile ? 'lg' : 'md'}
                 weight='bold'
             />
             <AdvertiserBlockOverlay