Merge pull request #108 from nada-deriv/nada/FEQ-2340/buy-sell-issues

nada/fix: ui issues in buy sell flow
niloofar-deriv · Jun 7, 2024 · 985f8b8 · 985f8b8
2 parents 8d502a2 + 64bfbfc
commit 985f8b8
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,
@@ -224,6 +226,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
             <BuySellFormDisplayWrapper
                 accountCurrency={account_currency as TCurrency}
                 isBuy={isBuy}
+                isHidden={isHidden}
                 isModalOpen={isModalOpen}
                 isValid={isValid && ((isBuy && selectedPaymentMethods.length > 0) || !isBuy)}
                 onRequestClose={onRequestClose}
@@ -264,6 +267,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
                         availablePaymentMethods={availablePaymentMethods as TPaymentMethod[]}
                         onSelectPaymentMethodCard={onSelectPaymentMethodCard}
                         selectedPaymentMethodIds={selectedPaymentMethods}
+                        setIsHidden={setIsHidden}
                     />
                 )}
                 <BuySellAmount
@@ -283,6 +287,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
                     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -48,6 +48,7 @@ const Advertiser = () => {
                         />
                     ),
                 })}
+                size={isMobile ? 'lg' : 'md'}
                 weight='bold'
             />
             <AdvertiserBlockOverlay
-Original file line number
+Diff line change
@@ Expand Up / @@ -154,6 +154,7 @@ jest.mock('react-hook-form', () => ({ @@
             })),
             handleSubmit: mockHandleSubmit,
             setValue: jest.fn(),
+            trigger: jest.fn(),
         }),
     }));
@@ Expand Down @@