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..5e59fc76 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
(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
0) || !isBuy)}
onRequestClose={onRequestClose}
@@ -264,6 +267,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
availablePaymentMethods={availablePaymentMethods as TPaymentMethod[]}
onSelectPaymentMethodCard={onSelectPaymentMethodCard}
selectedPaymentMethodIds={selectedPaymentMethods}
+ setIsHidden={setIsHidden}
/>
)}
void}
+ trigger={trigger as unknown as () => Promise}
/>
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 (
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>;
};
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 = ({
{
+ 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('', () => {
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(
+
+ );
+
+ 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'
/>