From e1f4dad842f7df77ba5724d6bde41f15933d7a5a Mon Sep 17 00:00:00 2001 From: Nada Date: Wed, 8 May 2024 16:16:07 +0400 Subject: [PATCH 1/4] fix: failing test in sell form fixed --- .../AdvertsTableRow/AdvertsTableRow.tsx | 13 +--- src/components/BuySellForm/BuySellForm.tsx | 24 +++++-- .../BuySellPaymentSection.tsx | 62 ++++++++++-------- .../__tests__/BuySellForm.spec.tsx | 65 +++++++++++-------- .../PaymentMethodForm/PaymentMethodForm.tsx | 2 +- .../PaymentMethodFormAutocomplete.tsx | 8 +-- .../__tests__/Verification.spec.tsx | 20 +++--- src/hooks/api/order/p2p-order/useOrderList.ts | 1 + .../__tests__/SellAdPaymentSelection.spec.tsx | 1 + 9 files changed, 110 insertions(+), 86 deletions(-) diff --git a/src/components/AdvertsTableRow/AdvertsTableRow.tsx b/src/components/AdvertsTableRow/AdvertsTableRow.tsx index 2bde5979..e1f0690c 100644 --- a/src/components/AdvertsTableRow/AdvertsTableRow.tsx +++ b/src/components/AdvertsTableRow/AdvertsTableRow.tsx @@ -1,11 +1,11 @@ import { Fragment, memo, useEffect, useRef } from 'react'; import clsx from 'clsx'; import { useHistory } from 'react-router-dom'; -import { TAdvertiserPaymentMethod, TAdvertsTableRowRenderer, TCurrency, TExchangeRate, TPaymentMethod } from 'types'; +import { TAdvertsTableRowRenderer, TCurrency, TExchangeRate, TPaymentMethod } from 'types'; import { Badge, BuySellForm, PaymentMethodLabel, StarRating, UserAvatar } from '@/components'; import { ADVERTISER_URL, BUY_SELL } from '@/constants'; import { api } from '@/hooks'; -import { useIsAdvertiser, useModalManager } from '@/hooks/custom-hooks'; +import { useModalManager } from '@/hooks/custom-hooks'; import { generateEffectiveRate, getCurrentRoute } from '@/utils'; import { LabelPairedChevronRightMdRegularIcon } from '@deriv/quill-icons'; import { useExchangeRates } from '@deriv-com/api-hooks'; @@ -21,17 +21,9 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => { const history = useHistory(); const isBuySellPage = getCurrentRoute() === 'buy-sell'; - const isAdvertiser = useIsAdvertiser(); const { data: paymentMethods } = api.paymentMethods.useGet(); - const { data: advertiserPaymentMethods, get } = api.advertiserPaymentMethods.useGet(); const { data } = api.advertiser.useGetInfo() || {}; - useEffect(() => { - if (isAdvertiser) { - get(); - } - }, [isAdvertiser]); - const { daily_buy = 0, daily_buy_limit = 0, daily_sell = 0, daily_sell_limit = 0 } = data || {}; const exchangeRateRef = useRef(null); @@ -192,7 +184,6 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => { ['mutate'] type TBuySellFormProps = { advert: THooks.Advert.GetList[number]; advertiserBuyLimit: number; - advertiserPaymentMethods: THooks.AdvertiserPaymentMethods.Get; advertiserSellLimit: number; balanceAvailable: number; displayEffectiveRate: string; @@ -46,7 +45,6 @@ const getAdvertiserMaxLimit = ( const BuySellForm = ({ advert, advertiserBuyLimit, - advertiserPaymentMethods, advertiserSellLimit, balanceAvailable, displayEffectiveRate, @@ -56,7 +54,15 @@ const BuySellForm = ({ paymentMethods, }: TBuySellFormProps) => { const { data: orderCreatedInfo, isSuccess, mutate } = api.order.useCreate(); + const isAdvertiser = useIsAdvertiser(); const [selectedPaymentMethods, setSelectedPaymentMethods] = useState([]); + const { data: advertiserPaymentMethods, get } = api.advertiserPaymentMethods.useGet(); + + useEffect(() => { + if (isAdvertiser) { + get(); + } + }, [isAdvertiser]); const { account_currency, @@ -73,7 +79,9 @@ const BuySellForm = ({ type, } = advert; - const advertiserPaymentMethodObjects = getPaymentMethodObjects(advertiserPaymentMethods); + const advertiserPaymentMethodObjects = getPaymentMethodObjects( + advertiserPaymentMethods as TAdvertiserPaymentMethod[] + ); const paymentMethodObjects = getPaymentMethodObjects(paymentMethods); @@ -128,6 +136,10 @@ const BuySellForm = ({ payload.payment_info = getValues('bank_details'); } + if (isBuy) { + payload.contact_info = getValues('contact_details'); + } + mutate(payload); }; @@ -155,7 +167,7 @@ const BuySellForm = ({ accountCurrency={account_currency as TCurrency} isBuy={isBuy} isModalOpen={isModalOpen} - isValid={isValid} + isValid={isValid && ((isBuy && selectedPaymentMethods.length > 0) || !isBuy)} onRequestClose={onRequestClose} onSubmit={onSubmit} > diff --git a/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx b/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx index e6606edb..86b50c9c 100644 --- a/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx +++ b/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx @@ -1,5 +1,8 @@ -import { TPaymentMethod } from 'types'; -import { LightDivider } from '@/components'; +import { useCallback, useReducer } from 'react'; +import { TPaymentMethod, TSelectedPaymentMethod } from 'types'; +import { LightDivider, PaymentMethodForm } from '@/components'; +import { useModalManager } from '@/hooks'; +import { advertiserPaymentMethodsReducer } from '@/reducers'; import { sortPaymentMethodsWithAvailability } from '@/utils'; import { Text, useDevice } from '@deriv-com/ui'; import { PaymentMethodCard } from '../../PaymentMethodCard'; @@ -17,34 +20,26 @@ const BuySellPaymentSection = ({ }: TBuySellPaymentSectionProps) => { const { isMobile } = useDevice(); const sortedList = sortPaymentMethodsWithAvailability(availablePaymentMethods); - //TODO: below section to be modified to handle payment method addition after handling of modal provider - // const [formState, dispatch] = useReducer(advertiserPaymentMethodsReducer, {}); - // const handleAddPaymentMethod = (selectedPaymentMethod?: TSelectedPaymentMethod) => { - // dispatch({ - // payload: { - // selectedPaymentMethod, - // }, - // type: 'ADD', - // }); - // }; + const [formState, dispatch] = useReducer(advertiserPaymentMethodsReducer, {}); + const { hideModal, isModalOpenFor, showModal } = useModalManager(); - // const handleResetFormState = useCallback(() => { - // dispatch({ type: 'RESET' }); - // }, []); + const handleAddPaymentMethod = (displayName: string, selectedPaymentMethod?: TSelectedPaymentMethod) => { + dispatch({ + payload: { + selectedPaymentMethod: { + ...selectedPaymentMethod, + displayName, + method: selectedPaymentMethod?.method ?? selectedPaymentMethod?.id, + }, + }, + type: 'ADD', + }); + }; - // if (formState?.isVisible) { - // return ( - // - // ); - // } + const handleResetFormState = useCallback(() => { + dispatch({ type: 'RESET' }); + }, []); return ( <> @@ -62,7 +57,10 @@ const BuySellPaymentSection = ({ undefined} + onClickAdd={() => { + showModal('PaymentMethodForm', { shouldStackModals: false }); + handleAddPaymentMethod(paymentMethod?.display_name, paymentMethod); + }} onSelectPaymentMethodCard={onSelectPaymentMethodCard} paymentMethod={paymentMethod} selectedPaymentMethodIds={selectedPaymentMethodIds} @@ -71,6 +69,14 @@ const BuySellPaymentSection = ({ + {isModalOpenFor('PaymentMethodForm') && ( + + )} ); }; diff --git a/src/components/BuySellForm/__tests__/BuySellForm.spec.tsx b/src/components/BuySellForm/__tests__/BuySellForm.spec.tsx index e08508f9..b9bef1e2 100644 --- a/src/components/BuySellForm/__tests__/BuySellForm.spec.tsx +++ b/src/components/BuySellForm/__tests__/BuySellForm.spec.tsx @@ -6,14 +6,52 @@ import userEvent from '@testing-library/user-event'; import BuySellForm from '../BuySellForm'; const mockMutateFn = jest.fn(); +const mockModalManager = { + hideModal: jest.fn(), + isModalOpenFor: jest.fn().mockReturnValue(false), + showModal: jest.fn(), +}; + jest.mock('@/hooks', () => ({ api: { + advertiserPaymentMethods: { + useGet: jest.fn(() => ({ + data: [ + { + display_name: 'alipay', + fields: { + account: { + display_name: 'Alipay ID', + required: 1, + type: 'text' as 'memo' | 'text', + value: '12345', + }, + instructions: { + display_name: 'Instructions', + required: 0, + type: 'memo' as 'memo' | 'text', + value: 'Alipay instructions', + }, + }, + id: '1', + is_enabled: 1 as 0 | 1, + method: 'alipay', + type: 'ewallet' as 'bank' | 'ewallet' | 'other', + used_by_adverts: ['1'], + used_by_orders: ['1'], + }, + ], + get: jest.fn(), + })), + }, order: { useCreate: jest.fn(() => ({ mutate: mockMutateFn, })), }, }, + useIsAdvertiser: jest.fn(() => true), + useModalManager: jest.fn(() => mockModalManager), })); jest.mock('@deriv-com/ui', () => ({ @@ -57,36 +95,9 @@ jest.mock('@/utils', () => ({ })); const mockFloatingPointValidator = floatingPointValidator as jest.Mock; -type TNumber = 0 | 1; - const mockProps = { advert: mockAdvertValues, advertiserBuyLimit: 1000, - advertiserPaymentMethods: [ - { - display_name: 'alipay', - fields: { - account: { - display_name: 'Alipay ID', - required: 1, - type: 'text' as 'memo' | 'text', - value: '12345', - }, - instructions: { - display_name: 'Instructions', - required: 0, - type: 'memo' as 'memo' | 'text', - value: 'Alipay instructions', - }, - }, - id: '1', - is_enabled: 1 as TNumber, - method: 'alipay', - type: 'ewallet' as 'bank' | 'ewallet' | 'other', - used_by_adverts: ['1'], - used_by_orders: ['1'], - }, - ], advertiserSellLimit: 1000, balanceAvailable: 10, displayEffectiveRate: '1', diff --git a/src/components/PaymentMethodForm/PaymentMethodForm.tsx b/src/components/PaymentMethodForm/PaymentMethodForm.tsx index fc5a1919..3c210597 100644 --- a/src/components/PaymentMethodForm/PaymentMethodForm.tsx +++ b/src/components/PaymentMethodForm/PaymentMethodForm.tsx @@ -11,7 +11,7 @@ import './PaymentMethodForm.scss'; type TPaymentMethodFormProps = { displayModal?: boolean; formState: TFormState; - onAdd: (selectedPaymentMethod?: TSelectedPaymentMethod) => void; + onAdd?: (selectedPaymentMethod?: TSelectedPaymentMethod) => void; onRequestClose?: () => void; onResetFormState: () => void; }; diff --git a/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx b/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx index dc2fa3af..13a7ff7a 100644 --- a/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx +++ b/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx @@ -6,7 +6,7 @@ type TPaymentMethodFormAutocompleteProps = { actionType: TFormState['actionType']; availablePaymentMethods?: THooks.PaymentMethods.Get; availablePaymentMethodsList: { text: string; value: string }[]; - onAdd: (selectedPaymentMethod?: TSelectedPaymentMethod) => void; + onAdd?: (selectedPaymentMethod?: TSelectedPaymentMethod) => void; reset: () => void; selectedPaymentMethod: TFormState['selectedPaymentMethod']; }; @@ -34,7 +34,7 @@ const PaymentMethodFormAutocomplete = ({ fill='#999999' height={15.7} onClick={() => { - onAdd(); + onAdd?.(); reset(); }} width={15.7} @@ -62,7 +62,7 @@ const PaymentMethodFormAutocomplete = ({ onSelect={value => { const selectedPaymentMethod = availablePaymentMethods?.find(p => p.id === value); if (selectedPaymentMethod) { - onAdd({ + onAdd?.({ displayName: selectedPaymentMethod?.display_name, fields: selectedPaymentMethod?.fields, method: selectedPaymentMethod?.id, @@ -86,7 +86,7 @@ const PaymentMethodFormAutocomplete = ({ e.stopPropagation(); const paymentMethod = availablePaymentMethods?.find(p => p.id === 'other'); if (paymentMethod) { - onAdd({ + onAdd?.({ displayName: paymentMethod?.display_name, fields: paymentMethod?.fields, method: 'other', diff --git a/src/components/Verification/__tests__/Verification.spec.tsx b/src/components/Verification/__tests__/Verification.spec.tsx index a0d9d355..b9ea2c55 100644 --- a/src/components/Verification/__tests__/Verification.spec.tsx +++ b/src/components/Verification/__tests__/Verification.spec.tsx @@ -30,6 +30,14 @@ jest.mock('react-router-dom', () => ({ })); describe('', () => { + beforeAll(() => { + Object.defineProperty(window, 'location', { + value: { + href: 'https://test.com', + }, + writable: true, + }); + }); it('should show Loader if isLoading is true', () => { render(); expect(screen.getByTestId('dt_derivs-loader')).toBeInTheDocument(); @@ -62,9 +70,7 @@ describe('', () => { await userEvent.click(poiButton); - expect(mockHistoryPush).toHaveBeenCalledWith( - 'https://app.deriv.com/account/proof-of-identity?ext_platform_url=/p2p' - ); + expect(window.location.href).toBe('https://app.deriv.com/account/proof-of-identity?ext_platform_url=/p2p'); }); it('should redirect user to proof-of-address route if user clicks on arrow button', async () => { @@ -80,9 +86,7 @@ describe('', () => { await userEvent.click(poaButton); - expect(mockHistoryPush).toHaveBeenCalledWith( - 'https://app.deriv.com/account/proof-of-identity?ext_platform_url=/p2p' - ); + expect(window.location.href).toBe('https://app.deriv.com/account/proof-of-address?ext_platform_url=/p2p'); }); it('should update url with search params if user clicks on arrow button and url has search params', async () => { @@ -98,9 +102,7 @@ describe('', () => { await userEvent.click(poiButton); - expect(mockHistoryPush).toHaveBeenCalledWith( - 'https://app.deriv.com/account/proof-of-identity?ext_platform_url=/p2p' - ); + expect(window.location.href).toBe('https://app.deriv.com/account/proof-of-identity?ext_platform_url=/p2p'); }); it('should show the pending message if poi/poa status is pending and poi/poa buttons are disabled', () => { diff --git a/src/hooks/api/order/p2p-order/useOrderList.ts b/src/hooks/api/order/p2p-order/useOrderList.ts index f6f34acf..c10f8a22 100644 --- a/src/hooks/api/order/p2p-order/useOrderList.ts +++ b/src/hooks/api/order/p2p-order/useOrderList.ts @@ -10,6 +10,7 @@ const useOrderList = ( const { data, ...rest } = useP2POrderList({ enabled: isEnabled, payload: { ...payload, limit: payload?.limit, offset: payload?.offset }, + queryKey: ['p2p_order_list', payload], }); // Additional p2p_order_list data diff --git a/src/pages/my-ads/components/SellAdPaymentSelection/__tests__/SellAdPaymentSelection.spec.tsx b/src/pages/my-ads/components/SellAdPaymentSelection/__tests__/SellAdPaymentSelection.spec.tsx index 315c0325..b4bb2f6b 100644 --- a/src/pages/my-ads/components/SellAdPaymentSelection/__tests__/SellAdPaymentSelection.spec.tsx +++ b/src/pages/my-ads/components/SellAdPaymentSelection/__tests__/SellAdPaymentSelection.spec.tsx @@ -31,6 +31,7 @@ jest.mock('@/hooks', () => ({ used_by_orders: null, }, ], + get: jest.fn(), }), }, }, From 19fd73ad866da83c7d34c1972d773b324ba868ed Mon Sep 17 00:00:00 2001 From: Nada Date: Wed, 8 May 2024 16:47:59 +0400 Subject: [PATCH 2/4] fix: styles in mobile view fixed --- src/components/BuySellForm/BuySellForm.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/BuySellForm/BuySellForm.scss b/src/components/BuySellForm/BuySellForm.scss index ce12eed8..773a1933 100644 --- a/src/components/BuySellForm/BuySellForm.scss +++ b/src/components/BuySellForm/BuySellForm.scss @@ -35,5 +35,17 @@ & .mobile-wrapper__body { overflow: auto; } + + & .payment-method-form { + background: #fff; + z-index: 1; + inset: 0; + + &__form { + & .payment-methods-form-footer { + bottom: 0; + } + } + } } } From 34dfede4e3ebad404c8137f8ca55ad62b28a2fdb Mon Sep 17 00:00:00 2001 From: Nada Date: Thu, 9 May 2024 12:22:12 +0400 Subject: [PATCH 3/4] fix: mobile view add payment method fixed --- .../PaymentMethodCardBody.tsx | 9 +++-- .../__tests__/PaymentMethodCardBody.spec.tsx | 7 ++++ .../PaymentMethodForm/PaymentMethodForm.tsx | 39 +++++++++++-------- .../PaymentMethodsFormFooter.scss | 2 +- .../PaymentMethodsFormFooter.tsx | 13 ++++++- .../SellAdPaymentSelection.scss | 3 +- src/pages/my-ads/screens/MyAds/MyAds.tsx | 2 +- 7 files changed, 51 insertions(+), 24 deletions(-) diff --git a/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx b/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx index 0e319c6b..3c285cee 100644 --- a/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx +++ b/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx @@ -1,4 +1,5 @@ import { TAccount, TBankName, THooks, TName } from 'types'; +import { useDevice } from '@/hooks'; import { Text } from '@deriv-com/ui'; import './PaymentMethodCardBody.scss'; @@ -14,13 +15,15 @@ const PaymentMethodCardBody = ({ const displayName = paymentMethod?.display_name; const modifiedDisplayName = displayName?.replace(/\s|-/gm, ''); const isBankOrOther = modifiedDisplayName && ['BankTransfer', 'Other'].includes(modifiedDisplayName); + const { isMobile } = useDevice(); + const textSize = isMobile ? 'md' : 'sm'; return (
- {isBankOrOther && !shouldShowPaymentMethodDisplayName ? null : {displayName}} - + {isBankOrOther && !shouldShowPaymentMethodDisplayName ? null : {displayName}} + {(paymentMethod.fields?.bank_name as TBankName)?.value ?? (paymentMethod.fields?.name as TName)?.value} - {(paymentMethod.fields?.account as TAccount)?.value} + {(paymentMethod.fields?.account as TAccount)?.value}
); }; diff --git a/src/components/PaymentMethodCard/__tests__/PaymentMethodCardBody.spec.tsx b/src/components/PaymentMethodCard/__tests__/PaymentMethodCardBody.spec.tsx index 352fb110..9800a42c 100644 --- a/src/components/PaymentMethodCard/__tests__/PaymentMethodCardBody.spec.tsx +++ b/src/components/PaymentMethodCard/__tests__/PaymentMethodCardBody.spec.tsx @@ -1,6 +1,13 @@ import { render, screen } from '@testing-library/react'; import { PaymentMethodCardBody } from '../PaymentMethodCardBody'; +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + useDevice: jest.fn(() => { + false; + }), +})); + describe('PaymentMethodCardBody', () => { it('should render the component correctly', () => { render( diff --git a/src/components/PaymentMethodForm/PaymentMethodForm.tsx b/src/components/PaymentMethodForm/PaymentMethodForm.tsx index 3c210597..ed4a2b66 100644 --- a/src/components/PaymentMethodForm/PaymentMethodForm.tsx +++ b/src/components/PaymentMethodForm/PaymentMethodForm.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState } from 'react'; +import { FormEvent, useEffect, useMemo, useState } from 'react'; import { useForm } from 'react-hook-form'; import { TAdvertiserPaymentMethod, TFormState, TSelectedPaymentMethod } from 'types'; import { PageReturn, PaymentMethodField, PaymentMethodsFormFooter } from '@/components'; @@ -181,6 +181,24 @@ const PaymentMethodForm = ({ ); } + const handleFormSubmit = (event: FormEvent) => { + event.preventDefault(); // Prevents create edit ad form submission + event.stopPropagation(); + handleSubmit(data => { + const hasData = Object.keys(data).length > 0; + if (actionType === 'ADD' && hasData) { + create({ + ...data, + method: String((selectedPaymentMethod as TAdvertiserPaymentMethod)?.method), + }); + } else if (actionType === 'EDIT' && hasData) { + update(String(selectedPaymentMethod?.id), { + ...data, + }); + } + })(event); + }; + return (
-
{ - const hasData = Object.keys(data).length > 0; - if (actionType === 'ADD' && hasData) { - create({ - ...data, - method: String((selectedPaymentMethod as TAdvertiserPaymentMethod)?.method), - }); - } else if (actionType === 'EDIT' && hasData) { - update(String(selectedPaymentMethod?.id), { - ...data, - }); - } - })} - > +
)} diff --git a/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss b/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss index 0c6ea109..c6ab4a20 100644 --- a/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss +++ b/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss @@ -11,6 +11,6 @@ padding: 1.6rem 2.4rem; border-top: 2px solid #f2f3f4; position: absolute; - bottom: 2.2rem; + bottom: 0; } } diff --git a/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.tsx b/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.tsx index 23576f79..f4954ab2 100644 --- a/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.tsx +++ b/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.tsx @@ -1,3 +1,4 @@ +import { ButtonHTMLAttributes, FormEvent, MouseEventHandler } from 'react'; import { TFormState } from 'types'; import { Button, useDevice } from '@deriv-com/ui'; import './PaymentMethodsFormFooter.scss'; @@ -8,6 +9,8 @@ type TPaymentMethodsFormFooterProps = { isDirty: boolean; isSubmitting: boolean; isValid: boolean; + onSubmit?: (event: FormEvent) => void; + type?: ButtonHTMLAttributes['type']; }; /** @@ -26,6 +29,8 @@ const PaymentMethodsFormFooter = ({ isDirty, isSubmitting, isValid, + onSubmit, + type = 'submit', }: TPaymentMethodsFormFooterProps) => { const { isMobile } = useDevice(); const textSize = isMobile ? 'md' : 'sm'; @@ -48,7 +53,13 @@ const PaymentMethodsFormFooter = ({ Cancel {/* TODO: Remember to translate these */} -
diff --git a/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.scss b/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.scss index fae67562..125be9e2 100644 --- a/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.scss +++ b/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.scss @@ -11,9 +11,10 @@ & .payment-method-form { @include mobile { background: #ffffff; - z-index: 1; + z-index: 999; inset: 0; top: 4rem; + position: fixed; &__form { & .payment-methods-form-footer { diff --git a/src/pages/my-ads/screens/MyAds/MyAds.tsx b/src/pages/my-ads/screens/MyAds/MyAds.tsx index 61daf22c..e5048cbd 100644 --- a/src/pages/my-ads/screens/MyAds/MyAds.tsx +++ b/src/pages/my-ads/screens/MyAds/MyAds.tsx @@ -6,7 +6,7 @@ const MyAds = () => { const { isMobile } = useDevice(); return ( -
+
); From dfde485300729844671b26e428060b544c643e91 Mon Sep 17 00:00:00 2001 From: Nada Date: Thu, 9 May 2024 12:24:00 +0400 Subject: [PATCH 4/4] fix: remove unwantd style --- .../SellAdPaymentSelection/SellAdPaymentSelection.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.scss b/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.scss index 125be9e2..fae67562 100644 --- a/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.scss +++ b/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.scss @@ -11,10 +11,9 @@ & .payment-method-form { @include mobile { background: #ffffff; - z-index: 999; + z-index: 1; inset: 0; top: 4rem; - position: fixed; &__form { & .payment-methods-form-footer {