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) => ( )) ) : ( - + )} 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['setValue']; + trigger: ReturnType['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 (
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' />